/* =========================================================
   TECH CYBER WARRIOR LIMITED
   PREMIUM SKY-BLUE RESPONSIVE SYSTEM
   LIGHT / DARK SYSTEM MODE
   FULL WEBSITE CSS — FINAL REPLACEMENT
   ========================================================= */


/* =========================================================
   01. ROOT
   ========================================================= */

:root {
    --bg: #f5fbff;
    --bg-2: #ffffff;
    --bg-3: #eef9ff;

    --card: rgba(255, 255, 255, 0.88);
    --card-solid: #ffffff;

    --line: rgba(14, 165, 233, 0.16);
    --line-strong: rgba(14, 165, 233, 0.34);

    --text: #071a2b;
    --text-2: #18344d;
    --muted: #60788d;

    --blue: #0284c7;
    --blue-2: #0ea5e9;
    --blue-3: #38bdf8;
    --cyan: #06b6d4;

    --white: #ffffff;
    --success: #16a34a;

    --shadow-sm:
        0 8px 25px rgba(7, 89, 133, 0.08);

    --shadow:
        0 20px 60px rgba(7, 89, 133, 0.12);

    --shadow-lg:
        0 30px 100px rgba(7, 89, 133, 0.17);

    --max: 1240px;

    --radius-sm: 12px;
    --radius: 22px;
    --radius-lg: 32px;

    --transition:
        0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   02. DARK MODE
   ========================================================= */

@media (prefers-color-scheme: never) {

    :root {
        --bg: #030912;
        --bg-2: #07111d;
        --bg-3: #0a1826;

        --card: rgba(9, 25, 42, 0.84);
        --card-solid: #0b1a2b;

        --line: rgba(88, 189, 255, 0.18);
        --line-strong: rgba(88, 189, 255, 0.40);

        --text: #f0f9ff;
        --text-2: #d7ebf8;
        --muted: #a5b8c9;

        --blue: #38bdf8;
        --blue-2: #60d5ff;
        --blue-3: #7dd3fc;
        --cyan: #67e8f9;

        --shadow-sm:
            0 8px 25px rgba(0, 0, 0, 0.28);

        --shadow:
            0 20px 70px rgba(0, 0, 0, 0.42);

        --shadow-lg:
            0 35px 110px rgba(0, 0, 0, 0.55);
    }
}


/* =========================================================
   03. RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(56, 189, 248, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(34, 211, 238, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            var(--bg),
            var(--bg-2)
        );

    line-height: 1.5;

    transition:
        background 0.4s ease,
        color 0.4s ease;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -10;

    opacity: 0.28;

    background-image:
        linear-gradient(
            rgba(56, 189, 248, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.045) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 90%
        );
}

@media (prefers-color-scheme: never) {

    body::before {
        opacity: 0.15;
    }
}


/* =========================================================
   04. ELEMENTS
   ========================================================= */

a {
    color: inherit;
    text-decoration: none;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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


/* =========================================================
   05. CONTAINER
   ========================================================= */

.container {
    width: min(
        var(--max),
        calc(100% - 40px)
    );

    margin-inline: auto;
}


/* =========================================================
   06. PROGRESS
   ========================================================= */

.progress {
    position: fixed;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    z-index: 99999;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan),
            var(--blue-3)
        );

    box-shadow:
        0 0 12px var(--blue),
        0 0 30px var(--cyan);
}


/* =========================================================
   07. NAVBAR
   ========================================================= */

.nav {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 5000;

    padding: 19px 0;

    transition:
        padding var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}

.nav.scrolled {
    padding: 9px 0;

    background:
        color-mix(
            in srgb,
            var(--bg-2) 88%,
            transparent
        );

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

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

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.07);
}

.nav-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;
}


/* =========================================================
   08. BRAND
   ========================================================= */

.brand {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    font-weight: 900;

    letter-spacing: 0.025em;

    white-space: nowrap;
}

.brand img {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    object-fit: cover;

    border-radius: 15px;

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

    box-shadow:
        0 0 25px rgba(14, 165, 233, 0.18);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.brand:hover img {
    transform:
        rotate(-4deg)
        scale(1.05);

    box-shadow:
        0 0 40px rgba(14, 165, 233, 0.35);
}

.brand span {
    font-size: 14px;
}


/* =========================================================
   09. MENU
   ========================================================= */

.menu {
    display: flex;

    align-items: center;

    gap: 25px;
}

.menu a {
    position: relative;

    padding: 8px 1px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        color var(--transition);
}

.menu a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    transform:
        translateX(-50%);

    transition:
        width var(--transition);
}

.menu a:hover,
.menu a.active {
    color: var(--blue);
}

.menu a:hover::after,
.menu a.active::after {
    width: 100%;
}


/* =========================================================
   10. NAVBAR ACTIONS
   ========================================================= */

.nav-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


/* =========================================================
   11. GLOBAL BUTTONS
   ========================================================= */

.btn {
    position: relative;

    display: inline-flex;

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

    gap: 9px;

    min-height: 48px;

    padding: 12px 30px;

    border:
        1px solid rgba(56, 189, 248, 0.42);

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0ea5e9,
            #0284c7
        );

    font-weight: 800;

    box-shadow:
        0 12px 30px rgba(14, 165, 233, 0.22);

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 75%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.38),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;
}

.btn:hover::before {
    left: 140%;
}

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

    box-shadow:
        0 18px 45px rgba(14, 165, 233, 0.32);
}

.btn:active {
    transform:
        translateY(-1px);
}

.btn.ghost {
    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--card-solid) 72%,
            transparent
        );

    box-shadow: none;
}

.btn.ghost:hover {
    color: var(--blue);

    border-color:
        var(--line-strong);
}


/* =========================================================
   12. TALK TO AN EXPERT — NAVBAR PREMIUM BUTTON
   ========================================================= */

.nav .btn {
    min-height: 46px;

    padding:
        11px 22px;

    border:
        1px solid rgba(56, 189, 248, 0.55);

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #38bdf8 0%,
            #0ea5e9 45%,
            #0284c7 100%
        );

    font-size: 13px;

    font-weight: 850;

    letter-spacing:
        0.01em;

    white-space: nowrap;

    box-shadow:
        0 10px 28px rgba(14, 165, 233, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    overflow: hidden;

    transform:
        translateY(0);

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

.nav .btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -140%;

    width: 75%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;

    pointer-events: none;
}

.nav .btn:hover {
    color: #ffffff;

    transform:
        translateY(-3px);

    border-color:
        rgba(125, 211, 252, 0.90);

    background:
        linear-gradient(
            135deg,
            #7dd3fc 0%,
            #0ea5e9 45%,
            #0284c7 100%
        );

    box-shadow:
        0 16px 40px rgba(14, 165, 233, 0.35),
        0 0 25px rgba(34, 211, 238, 0.18);
}

.nav .btn:hover::before {
    left: 140%;
}

.nav .btn:active {
    transform:
        translateY(-1px)
        scale(0.98);
}

.nav .btn:focus-visible {
    outline:
        3px solid rgba(56, 189, 248, 0.35);

    outline-offset: 4px;
}


/* =========================================================
   13. NAVBAR CTA ICON
   ========================================================= */

.nav .btn .btn-icon {
    width: 19px;
    height: 19px;

    display: inline-grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.18);

    font-size: 11px;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.nav .btn:hover .btn-icon {
    transform:
        translateX(3px)
        rotate(-8deg);

    background:
        rgba(255, 255, 255, 0.28);
}

.nav.scrolled .btn {
    min-height: 43px;

    padding:
        9px 19px;

    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(14, 165, 233, 0.20);
}


/* =========================================================
   14. MOBILE MENU
   ========================================================= */

.hamb {
    display: none;

    width: 44px;
    height: 44px;

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

    border-radius: 12px;

    background:
        var(--card);

    color:
        var(--text);

    backdrop-filter:
        blur(15px);

    transition:
        transform var(--transition),
        border-color var(--transition);
}

.hamb:hover {
    transform:
        scale(1.05);

    border-color:
        var(--line-strong);
}


/* =========================================================
   PREMIUM MOBILE MENU BUTTON + TOUCH EFFECT
   ========================================================= */
.hamb {
    position: relative;
    flex: 0 0 44px;
    border: 1px solid var(--line);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.hamb::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(56,189,248,.45);
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.hamb.touching,
.hamb:active {
    transform: scale(.92);
    border-color: var(--blue);
    box-shadow: 0 0 0 5px rgba(56,189,248,.12), 0 10px 28px rgba(14,165,233,.22);
}

.hamb.touching::before {
    animation: menuTouchRipple .42s ease-out;
}

.hamb-lines {
    position: relative;
    width: 20px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.hamb-lines i {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform .28s ease, opacity .2s ease, width .28s ease;
}

.hamb[aria-expanded="true"] {
    color: var(--blue);
    border-color: var(--line-strong);
}

.hamb[aria-expanded="true"] .hamb-lines i:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamb[aria-expanded="true"] .hamb-lines i:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamb[aria-expanded="true"] .hamb-lines i:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@keyframes menuTouchRipple {
    0% { transform: translate(-50%,-50%) scale(0); opacity: .65; }
    100% { transform: translate(-50%,-50%) scale(12); opacity: 0; }
}

@media (max-width: 980px) {
    .menu {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px) scale(.98);
        transform-origin: top center;
        pointer-events: none;
        transition: opacity .25s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .25s;
    }

    .menu.open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .menu a {
        border-radius: 12px;
        transition: background .2s ease, color .2s ease, padding-left .2s ease;
    }

    .menu a:active,
    .menu a:focus-visible {
        background: rgba(56,189,248,.10);
        padding-left: 16px;
    }

    body.menu-lock {
        overflow: hidden;
    }
}

/* =========================================================
   15. HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: grid;

    place-items: center;

    padding:
        145px 0 90px;

    overflow: hidden;
}

.hero::after {
    content: "";

    position: absolute;

    left: -15%;
    right: -15%;

    bottom: -25%;

    height: 55%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(56, 189, 248, 0.18),
            transparent 68%
        );
}

.hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    align-items: center;

    gap: 65px;
}


/* =========================================================
   16. EYEBROW
   ========================================================= */

.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 13px;

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

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--blue) 8%,
            transparent
        );

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        850;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(12px);
}

.dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 18px var(--cyan);

    animation:
        pulse 1.6s infinite;
}


/* =========================================================
   17. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--text);
}

h1 {
    margin:
        22px 0;

    max-width:
        900px;

    font-size:
        clamp(46px, 6vw, 84px);

    line-height:
        0.98;

    letter-spacing:
        -0.055em;
}

h2 {
    margin-bottom:
        15px;

    font-size:
        clamp(32px, 4vw, 56px);

    line-height:
        1.05;

    letter-spacing:
        -0.045em;
}

h3 {
    line-height:
        1.25;
}

.gradient {
    background:
        linear-gradient(
            100deg,
            var(--text) 10%,
            var(--blue-2) 48%,
            var(--blue) 80%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.lead {
    max-width:
        700px;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;
}

.sub {
    color:
        var(--muted);

    line-height:
        1.8;
}


/* =========================================================
   18. ACTIONS
   ========================================================= */

.actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        30px;
}


/* =========================================================
   19. HERO VISUAL
   ========================================================= */

.hero-visual {
    position:
        relative;

    min-height:
        550px;

    display:
        grid;

    place-items:
        center;
}


/* =========================================================
   20. ORBIT
   ========================================================= */

.orbit {
    position:
        absolute;

    width:
        410px;

    height:
        410px;

    border:
        1px solid rgba(56, 189, 248, 0.25);

    border-radius:
        50%;

    animation:
        spin 20s linear infinite;
}

.orbit::before,
.orbit::after {
    content:
        "";

    position:
        absolute;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 25px var(--cyan);
}

.orbit::before {
    width:
        9px;

    height:
        9px;

    top:
        18px;

    left:
        50%;
}

.orbit::after {
    width:
        7px;

    height:
        7px;

    right:
        18px;

    bottom:
        60px;
}


/* =========================================================
   21. LOGO CORE
   ========================================================= */

.logo-core {
    position:
        relative;

    width:
        260px;

    height:
        260px;

    display:
        grid;

    place-items:
        center;

    padding:
        16px;

    border:
        1px solid rgba(56, 189, 248, 0.45);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(14, 165, 233, 0.20),
            var(--bg-2) 68%
        );

    box-shadow:
        0 0 100px rgba(14, 165, 233, 0.18),
        inset 0 0 50px rgba(14, 165, 233, 0.10);

    animation:
        float 5s ease-in-out infinite;
}

.logo-core::before {
    content:
        "";

    position:
        absolute;

    inset:
        9px;

    border:
        1px dashed rgba(125, 211, 252, 0.25);

    border-radius:
        50%;

    animation:
        spin 25s linear infinite reverse;
}

.logo-core img {
    position:
        relative;

    width:
        250px;

    height:
        220px;

    object-fit:
        cover;

    border-radius:
        50%;

    mix-blend-mode:
        screen;

    box-shadow:
        0 0 50px rgba(34, 211, 238, 0.22);
}


/* =========================================================
   22. FLOAT CARDS
   ========================================================= */

.float-card {
    position:
        absolute;

    padding:
        13px 16px;

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

    border-radius:
        16px;

    background:
        color-mix(
            in srgb,
            var(--card-solid) 84%,
            transparent
        );

    backdrop-filter:
        blur(18px);

    box-shadow:
        var(--shadow);

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        750;

    animation:
        float 4s ease-in-out infinite;
}

.fc1 {
    top:
        17%;

    right:
        0;
}

.fc2 {
    left:
        0;

    bottom:
        20%;

    animation-delay:
        -2s;
}

.fc3 {
    top:
        7%;

    left:
        8%;

    animation-delay:
        -1s;
}


/* =========================================================
   23. SECTIONS
   ========================================================= */

.section {
    position:
        relative;

    padding:
        115px 0;
}

.section-head {
    max-width:
        780px;

    margin-bottom:
        45px;
}

.kicker {
    margin-bottom:
        13px;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


/* =========================================================
   24. GRID
   ========================================================= */

.grid {
    display:
        grid;

    gap:
        20px;
}

.cards-4 {
    grid-template-columns:
        repeat(4, 1fr);
}

.cards-3 {
    grid-template-columns:
        repeat(3, 1fr);
}


/* =========================================================
   25. CARDS
   ========================================================= */

.card {
    position:
        relative;

    padding:
        30px;

    min-height:
        100%;

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

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--blue) 7%,
                var(--card-solid)
            ),
            var(--card-solid)
        );

    box-shadow:
        var(--shadow-sm);

    overflow:
        hidden;

    transform-style:
        preserve-3d;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 0%),
            rgba(34, 211, 238, 0.18),
            transparent 32%
        );

    opacity:
        0;

    transition:
        opacity var(--transition);
}

.card::after {
    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    top:
        -50px;

    right:
        -50px;

    border-radius:
        50%;

    background:
        rgba(56, 189, 248, 0.10);

    filter:
        blur(20px);

    pointer-events:
        none;
}

.card:hover {
    transform:
        translateY(-9px);

    border-color:
        var(--line-strong);

    box-shadow:
        var(--shadow);
}

.card:hover::before {
    opacity:
        1;
}


/* =========================================================
   26. ICON
   ========================================================= */

.icon {
    position:
        relative;

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        23px;

    border:
        1px solid rgba(56, 189, 248, 0.28);

    border-radius:
        17px;

    background:
        rgba(14, 165, 233, 0.08);

    color:
        var(--blue);

    font-size:
        23px;

    box-shadow:
        0 10px 25px rgba(14, 165, 233, 0.08);

    transition:
        transform var(--transition),
        background var(--transition);
}

.card:hover .icon {
    transform:
        rotate(-5deg)
        scale(1.08);

    background:
        rgba(14, 165, 233, 0.15);
}

.card h3 {
    margin-bottom:
        10px;

    font-size:
        19px;
}

.card p {
    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;
}

.link {
    display:
        inline-flex;

    margin-top:
        19px;

    color:
        var(--blue);

    font-size:
        13px;

    font-weight:
        850;

    transition:
        transform var(--transition),
        color var(--transition);
}

.link:hover {
    color:
        var(--cyan);

    transform:
        translateX(5px);
}


/* =========================================================
   27. STATS
   ========================================================= */

.stats {
    display:
        grid;

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

    overflow:
        hidden;

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

    border-radius:
        24px;

    background:
        var(--card);

    backdrop-filter:
        blur(20px);

    box-shadow:
        var(--shadow);
}

.stat {
    position:
        relative;

    padding:
        30px;

    text-align:
        center;

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

    transition:
        background var(--transition);
}

.stat:hover {
    background:
        rgba(56, 189, 248, 0.06);
}

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

.stat strong {
    display:
        block;

    color:
        var(--blue);

    font-size:
        40px;

    font-weight:
        900;

    line-height:
        1.1;
}

.stat span {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        12px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* =========================================================
   28. SPLIT
   ========================================================= */

.split {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        60px;

    align-items:
        center;
}


/* =========================================================
   29. PANEL
   ========================================================= */

.panel {
    padding:
        36px;

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

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

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--blue) 7%,
                var(--card-solid)
            ),
            var(--card-solid)
        );

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(18px);
}


/* =========================================================
   30. CHECKS
   ========================================================= */

.checks {
    display:
        grid;

    gap:
        13px;

    margin-top:
        23px;
}

.checks div {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.6;
}

.checks b {
    color:
        var(--blue);
}


/* =========================================================
   31. TIMELINE
   ========================================================= */

.timeline {
    position:
        relative;

    margin-top:
        38px;
}

.timeline::before {
    content:
        "";

    position:
        absolute;

    left:
        18px;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        linear-gradient(
            var(--blue),
            transparent
        );
}

.step {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        38px 1fr;

    gap:
        18px;

    margin-bottom:
        30px;
}

.num {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(56, 189, 248, 0.45);

    border-radius:
        50%;

    background:
        var(--bg-2);

    color:
        var(--blue);

    font-weight:
        900;

    box-shadow:
        0 0 20px rgba(14, 165, 233, 0.10);

    z-index:
        2;
}

.step h3 {
    margin-bottom:
        7px;
}

.step p {
    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;
}


/* =========================================================
   32. CTA
   ========================================================= */

.cta {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        65px;

    overflow:
        hidden;

    border:
        1px solid rgba(56, 189, 248, 0.30);

    border-radius:
        32px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(34, 211, 238, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--blue) 8%,
                var(--card-solid)
            ),
            var(--card-solid)
        );

    box-shadow:
        var(--shadow-lg);
}

.cta::before {
    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -100px;

    bottom:
        -120px;

    border-radius:
        50%;

    background:
        rgba(34, 211, 238, 0.12);

    filter:
        blur(40px);

    pointer-events:
        none;
}


/* =========================================================
   33. PAGE HERO
   ========================================================= */

.page-hero {
    position:
        relative;

    padding:
        175px 0 90px;
}

.page-hero h1 {
    max-width:
        900px;

    font-size:
        clamp(44px, 6vw, 74px);
}


/* =========================================================
   34. SERVICES
   ========================================================= */

.service-list {
    display:
        grid;

    gap:
        11px;

    margin-top:
        20px;
}

.service-list span {
    display:
        block;

    padding:
        10px 12px;

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

    border-radius:
        10px;

    background:
        rgba(14, 165, 233, 0.05);

    color:
        var(--muted);

    font-size:
        13px;

    transition:
        transform var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.service-list span:hover {
    transform:
        translateX(5px);

    border-color:
        var(--line-strong);

    color:
        var(--blue);
}


/* =========================================================
   35. TEAM PHOTOS
   ========================================================= */

.person-photo {
    position:
        relative;

    width:
        100%;

    height:
        340px;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center top;

    border:
        1px solid rgba(56, 189, 248, 0.38);

    border-radius:
        30px 30px 70px 30px;

    background:
        linear-gradient(
            145deg,
            var(--bg-3),
            var(--bg-2)
        );

    box-shadow:
        0 18px 45px rgba(7, 89, 133, 0.12),
        0 0 0 1px rgba(56, 189, 248, 0.04);

    overflow:
        hidden;

    transition:
        transform 0.55s cubic-bezier(.22,1,.36,1),
        border-radius 0.55s ease,
        border-color 0.45s ease,
        box-shadow 0.55s ease,
        filter 0.45s ease;
}

.person-photo::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(0, 0, 0, 0.04) 60%,
            rgba(0, 0, 0, 0.40) 100%
        );
}

.person-photo::after {
    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        -110px;

    top:
        -110px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(34, 211, 238, 0.40),
            rgba(56, 189, 248, 0.12) 38%,
            transparent 72%
        );

    filter:
        blur(10px);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 0.5s ease,
        transform 0.6s ease;
}

.card:has(.person-photo) {
    position:
        relative;

    padding:
        18px;

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--blue) 6%,
                var(--card-solid)
            ),
            var(--card-solid)
        );

    overflow:
        hidden;
}

.card:has(.person-photo):hover {
    transform:
        translateY(-10px);

    border-color:
        rgba(56, 189, 248, 0.48);

    box-shadow:
        0 28px 70px rgba(14, 165, 233, 0.16),
        0 0 35px rgba(34, 211, 238, 0.06);
}

.card:hover .person-photo {
    transform:
        translateY(-4px)
        scale(1.018);

    border-color:
        rgba(56, 189, 248, 0.75);

    border-radius:
        38px 38px 82px 38px;

    box-shadow:
        0 25px 65px rgba(14, 165, 233, 0.20),
        0 0 35px rgba(34, 211, 238, 0.10);

    filter:
        saturate(1.06)
        contrast(1.03);
}

.card:hover .person-photo::after {
    opacity:
        1;

    transform:
        translate(-12px, 12px)
        scale(1.12);
}

.card:has(.person-photo) h3 {
    position:
        relative;

    margin-top:
        24px;

    margin-bottom:
        7px;

    font-size:
        21px;

    font-weight:
        850;

    letter-spacing:
        -0.02em;
}

.card:has(.person-photo) h3::after {
    content:
        "";

    display:
        block;

    width:
        38px;

    height:
        3px;

    margin-top:
        10px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    transition:
        width 0.4s ease;
}

.card:has(.person-photo):hover h3::after {
    width:
        75px;
}

.card:has(.person-photo) p {
    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.7;
}

.person-photo.placeholder {
    display:
        grid;

    place-items:
        center;

    color:
        var(--blue);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(56, 189, 248, 0.16),
            var(--bg-3) 45%,
            var(--bg-2)
        );
}


/* =========================================================
   36. PROFILE
   ========================================================= */

.leader {
    display:
        grid;

    grid-template-columns:
        140px 1fr;

    gap:
        24px;

    align-items:
        center;
}

.avatar {
    width:
        140px;

    height:
        140px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        30px 60px 30px 60px;

    background:
        radial-gradient(
            circle at 30% 20%,
            var(--blue-2),
            var(--bg-3) 45%,
            var(--bg-2)
        );

    color:
        var(--blue);

    font-size:
        42px;

    font-weight:
        900;

    box-shadow:
        var(--shadow);

    transition:
        border-radius var(--transition),
        transform var(--transition);
}

.avatar:hover {
    border-radius:
        60px 30px 60px 30px;

    transform:
        rotate(-2deg)
        scale(1.03);
}


/* =========================================================
   37. FOUNDER PHOTO
   ========================================================= */

.founder-main-photo {
    width:
        100%;

    height:
        610px;

    object-fit:
        cover;

    object-position:
        center top;

    display:
        block;

    border:
        2px solid rgba(56, 189, 248, 0.50);

    border-radius:
        42px 42px 110px 42px;

    box-shadow:
        0 30px 90px rgba(14, 165, 233, 0.16);

    transition:
        border-radius var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.founder-main-photo:hover {
    transform:
        translateY(-5px);

    border-radius:
        70px 40px 70px 40px;

    box-shadow:
        0 40px 110px rgba(14, 165, 233, 0.23);
}


/* =========================================================
   38. FOUNDER COPY
   ========================================================= */

.founder-copy {
    color:
        var(--text);

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

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--blue) 8%,
                var(--card-solid)
            ),
            var(--card-solid)
        );

    box-shadow:
        var(--shadow);
}

.founder-copy h2 {
    margin:
        8px 0;

    color:
        var(--text);

    font-size:
        clamp(38px, 5vw, 62px);
}

.founder-copy .sub {
    color:
        var(--muted);
}

.founder-role {
    margin-bottom:
        22px;

    color:
        var(--blue);

    font-size:
        25px;

    font-weight:
        850;
}


/* =========================================================
   39. FOUNDER PILLS
   ========================================================= */

.founder-pills {
    display:
        grid;

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

    gap:
        11px;

    margin:
        26px 0;
}

.founder-pills span {
    padding:
        13px 10px;

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

    border-radius:
        14px;

    background:
        rgba(14, 165, 233, 0.06);

    color:
        var(--blue);

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        750;

    transition:
        transform var(--transition),
        background var(--transition);
}

.founder-pills span:hover {
    transform:
        translateY(-4px);

    background:
        rgba(14, 165, 233, 0.12);
}


/* =========================================================
   40. SIGNATURE
   ========================================================= */

.founder-sign {
    margin-top:
        17px;

    color:
        var(--blue);

    font-family:
        cursive;

    font-size:
        32px;
}

.founder-tagline {
    margin-top:
        4px;

    color:
        var(--muted);

    font-weight:
        700;
}


/* =========================================================
   41. REVIEWS
   ========================================================= */

.review {
    min-height:
        210px;
}

.review-stars {
    margin-bottom:
        15px;

    color:
        var(--blue-2);

    font-size:
        14px;

    letter-spacing:
        3px;
}

.review p {
    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   42. CLIENT STRIP
   ========================================================= */

.client-strip {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        23px;
}

.client-badge {
    padding:
        10px 14px;

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

    border-radius:
        999px;

    background:
        rgba(14, 165, 233, 0.05);

    color:
        var(--muted);

    font-size:
        12px;

    transition:
        transform var(--transition),
        color var(--transition);
}

.client-badge:hover {
    transform:
        translateY(-3px);

    color:
        var(--blue);
}


/* =========================================================
   43. SKY LINE
   ========================================================= */

.sky-line {
    height:
        1px;

    margin:
        34px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            transparent
        );

    opacity:
        0.55;
}


/* =========================================================
   44. FORM
   ========================================================= */

.form {
    display:
        grid;

    gap:
        15px;
}

.form input,
.form textarea,
.form select {
    width:
        100%;

    padding:
        15px 16px;

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

    border-radius:
        14px;

    outline:
        none;

    background:
        var(--bg-2);

    color:
        var(--text);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.form input::placeholder,
.form textarea::placeholder {
    color:
        var(--muted);
}

.form textarea {
    min-height:
        150px;

    resize:
        vertical;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
    border-color:
        var(--blue);

    box-shadow:
        0 0 0 4px rgba(14, 165, 233, 0.09);

    transform:
        translateY(-1px);
}


/* =========================================================
   45. FOOTER
   ========================================================= */

.footer {
    position:
        relative;

    padding:
        70px 0 25px;

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

    background:
        linear-gradient(
            180deg,
            var(--bg-3),
            var(--bg-2)
        );
}

.footer-grid {
    display:
        grid;

    grid-template-columns:
        1.45fr 1fr 1fr 1fr;

    gap:
        42px;
}

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

.footer-brand .brand {
    margin-bottom:
        18px;
}

.footer-brand .brand img {
    width:
        48px;

    height:
        48px;
}

.footer-brand p {
    max-width:
        330px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.85;
}

.footer h4 {
    margin-bottom:
        16px;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        850;

    letter-spacing:
        0.02em;
}

.footer ul {
    list-style:
        none;

    display:
        grid;

    gap:
        3px;
}

.footer a,
.footer p {
    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        2;
}

.footer a {
    transition:
        color var(--transition),
        transform var(--transition);
}

.footer a:hover {
    color:
        var(--blue);
}

.footer-connect {
    display:
        grid;

    gap:
        5px;
}

.footer-connect a {
    display:
        inline-flex;

    width:
        fit-content;
}

.footer-bottom {
    margin-top:
        42px;
}

.copy {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        20px;

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

    color:
        var(--muted);

    font-size:
        12px;
}

.copy a {
    color:
        var(--blue);
}


/* =========================================================
   46. REVEAL
   ========================================================= */

.reveal {
    opacity:
        0;

    transform:
        translateY(35px);

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

.reveal.visible {
    opacity:
        1;

    transform:
        none;
}


/* =========================================================
   47. BACK TO TOP
   ========================================================= */

.backtop {
    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        color-mix(
            in srgb,
            var(--card-solid) 88%,
            transparent
        );

    backdrop-filter:
        blur(16px);

    color:
        var(--text);

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translateY(15px);

    transition:
        opacity var(--transition),
        transform var(--transition),
        color var(--transition),
        border-color var(--transition);

    z-index:
        4000;
}

.backtop.show {
    opacity:
        1;

    pointer-events:
        auto;

    transform:
        translateY(0);
}

.backtop:hover {
    color:
        var(--blue);

    border-color:
        var(--line-strong);

    transform:
        translateY(-4px);
}


/* =========================================================
   48. PARTICLES
   ========================================================= */

#particles {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        0;
}


/* =========================================================
   49. HELPERS
   ========================================================= */

.text-blue {
    color:
        var(--blue);
}

.text-muted {
    color:
        var(--muted);
}

.center {
    text-align:
        center;
}

.mt-20 {
    margin-top:
        20px;
}

.mt-30 {
    margin-top:
        30px;
}

.mt-40 {
    margin-top:
        40px;
}


/* =========================================================
   50. ANIMATIONS
   ========================================================= */

@keyframes spin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}

@keyframes float {

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

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

@keyframes pulse {

    0%,
    100% {
        opacity:
            1;

        transform:
            scale(1);
    }

    50% {
        opacity:
            0.35;

        transform:
            scale(0.75);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(56, 189, 248, 0.15);
    }

    50% {
        box-shadow:
            0 0 45px rgba(56, 189, 248, 0.35);
    }
}


/* =========================================================
   51. LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .container {
        width:
            min(
                var(--max),
                calc(100% - 34px)
            );
    }

    .menu {
        gap:
            18px;
    }

    .hero-grid {
        gap:
            40px;
    }

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

    .footer-grid {
        grid-template-columns:
            2fr 1fr 1fr;
    }
}


/* =========================================================
   52. TABLET / MOBILE NAV
   ========================================================= */

@media (max-width: 980px) {

    .menu {
        position:
            absolute;

        top:
            76px;

        left:
            18px;

        right:
            18px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            4px;

        padding:
            18px;

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

        border-radius:
            20px;

        background:
            color-mix(
                in srgb,
                var(--bg-2) 96%,
                transparent
            );

        backdrop-filter:
            blur(25px);

        box-shadow:
            var(--shadow);
    }

    .menu.open {
        display:
            flex;
    }

    .menu a {
        padding:
            13px 10px;
    }

    .hamb {
        display:
            grid;

        place-items:
            center;
    }

    .hero-grid,
    .split {
        grid-template-columns:
            1fr;
    }

    .hero {
        padding-top:
            125px;
    }

    .hero-visual {
        min-height:
            460px;
    }

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

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

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

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

    .stat:nth-last-child(-n + 2) {
        border-bottom:
            0;
    }

    .footer-grid {
        grid-template-columns:
            2fr 1fr 1fr;
    }

    .founder-main-photo {
        height:
            520px;
    }

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

    .nav .btn {
        min-height:
            44px;

        padding:
            10px 18px;

        font-size:
            12px;
    }
}


/* =========================================================
   53. MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .container {
        width:
            calc(100% - 28px);
    }

    .nav {
        padding:
            13px 0;
    }

    .nav.scrolled {
        padding:
            8px 0;
    }

    .brand span {
        display:
            none;
    }

    .brand img {
        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;

        border-radius:
            14px;
    }

    .nav-actions {
        gap:
            7px;
    }

    .nav .btn {
        min-height:
            42px;

        padding:
            9px 15px;

        border-radius:
            12px;

        font-size:
            11px;
    }

    .nav .btn .btn-icon {
        width:
            17px;

        height:
            17px;

        font-size:
            10px;
    }

    .hero {
        min-height:
            auto;

        padding:
            120px 0 75px;
    }

    h1 {
        font-size:
            clamp(
                43px,
                14vw,
                65px
            );
    }

    h2 {
        font-size:
            clamp(
                32px,
                10vw,
                46px
            );
    }

    .lead {
        font-size:
            16px;

        line-height:
            1.7;
    }

    .actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .actions .btn {
        width:
            100%;
    }

    .hero-visual {
        min-height:
            350px;

        margin-top:
            10px;
    }

    .orbit {
        width:
            285px;

        height:
            285px;
    }

    .logo-core {
        width:
            195px;

        height:
            195px;
    }

    .logo-core img {
        width:
            148px;

        height:
            148px;
    }

    .float-card {
        padding:
            10px 12px;

        font-size:
            10px;
    }

    .fc1 {
        right:
            -3px;
    }

    .fc2 {
        left:
            -3px;
    }

    .fc3 {
        left:
            4px;
    }

    .section {
        padding:
            80px 0;
    }

    .section-head {
        margin-bottom:
            30px;
    }

    .page-hero {
        padding:
            135px 0 65px;
    }

    .page-hero h1 {
        font-size:
            clamp(
                42px,
                13vw,
                62px
            );
    }

    .cards-4,
    .cards-3 {
        grid-template-columns:
            1fr;
    }

    .card {
        padding:
            25px;
    }

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

    .stat {
        padding:
            21px 8px;
    }

    .stat strong {
        font-size:
            28px;
    }

    .stat span {
        font-size:
            9px;
    }

    .panel {
        padding:
            25px;
    }

    .cta {
        display:
            block;

        padding:
            32px 25px;
    }

    .cta .btn {
        width:
            100%;

        margin-top:
            22px;
    }

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

    .avatar {
        width:
            120px;

        height:
            120px;
    }

    .founder-main-photo {
        height:
            420px;

        border-radius:
            28px 28px 70px 28px;
    }

    .founder-copy h2 {
        font-size:
            38px;
    }

    .founder-pills {
        grid-template-columns:
            1fr;
    }

    .founder-role {
        font-size:
            21px;
    }

    .person-photo {
        height:
            280px;
    }

    .footer {
        padding:
            55px 0 22px;
    }

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

        gap:
            32px 22px;
    }

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

        max-width:
            none;
    }

    .footer-brand p {
        max-width:
            100%;
    }

    .copy {
        display:
            block;

        line-height:
            1.7;
    }

    .copy span {
        display:
            block;

        margin-top:
            8px;
    }

    .backtop {
        right:
            15px;

        bottom:
            15px;
    }
}


/* =========================================================
   54. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .container {
        width:
            calc(100% - 24px);
    }

    .btn {
        padding:
            12px 22px;
    }

    .nav .btn {
        min-height:
            40px;

        padding:
            8px 12px;

        font-size:
            10px;

        gap:
            6px;
    }

    .nav .btn .btn-icon {
        display:
            none;
    }

    .hero {
        padding-top:
            112px;
    }

    .hero-visual {
        min-height:
            320px;
    }

    .orbit {
        width:
            255px;

        height:
            255px;
    }

    .logo-core {
        width:
            178px;

        height:
            178px;
    }

    .logo-core img {
        width:
            132px;

        height:
            132px;
    }

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

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

    .person-photo {
        height:
            270px;
    }

    .founder-main-photo {
        height:
            390px;
    }
}


/* =========================================================
   55. VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 380px) {

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

    .stat {
        border-right:
            0;

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

    .stat:last-child {
        border-bottom:
            0;
    }

    .orbit {
        width:
            240px;

        height:
            240px;
    }

    .logo-core {
        width:
            165px;

        height:
            165px;
    }

    .logo-core img {
        width:
            122px;

        height:
            122px;
    }

    .float-card {
        font-size:
            9px;

        padding:
            8px 10px;
    }
}


/* =========================================================
   56. DARK MODE IMAGE / FOOTER FIXES
   ========================================================= */

@media (prefers-color-scheme: never) {

    .person-photo {
        border-color:
            rgba(96, 213, 255, 0.30);

        box-shadow:
            0 20px 55px rgba(0, 0, 0, 0.38),
            0 0 25px rgba(14, 165, 233, 0.06);
    }

    .card:hover .person-photo {
        border-color:
            rgba(96, 213, 255, 0.72);

        box-shadow:
            0 28px 75px rgba(0, 0, 0, 0.50),
            0 0 40px rgba(34, 211, 238, 0.12);
    }

    .footer {
        background:
            linear-gradient(
                180deg,
                #081522,
                #050d16
            );
    }

    .form input,
    .form textarea,
    .form select {
        background:
            #081522;
    }
}


/* =========================================================
   57. ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline:
        3px solid rgba(56, 189, 248, 0.45);

    outline-offset:
        3px;
}

button:disabled,
.btn:disabled {
    opacity:
        0.55;

    cursor:
        not-allowed;
}


/* =========================================================
   58. REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior:
            auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

    .reveal {
        opacity:
            1;

        transform:
            none;
    }
}

/* ===== TCW PROJECT PAGES / LOCATION RESPONSIVE ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.location-map{min-height:360px;overflow:hidden;border-radius:22px}
.location-map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%;text-align:center}.location-map,.location-map iframe{min-height:300px}.company-location .location-card{grid-template-columns:1fr!important}}


/* ===== PREMIUM LOCATION BLOCK ===== */
.company-location{padding-top:70px;padding-bottom:80px}
.company-location .location-card{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:24px;
  align-items:stretch;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  overflow:hidden;
}
.company-location .location-map{order:1;min-height:480px;border-radius:20px;background:#111;position:relative}
.company-location .location-map iframe{min-height:480px;height:100%;border-radius:20px}
.company-location .location-info{
  order:2;
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:20px;
  background:rgba(0,0,0,.14);
}
.company-location .location-info h2{margin:8px 0 18px;line-height:1.12}
.company-location .location-address{
  display:flex;gap:14px;align-items:flex-start;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.company-location .location-address .loc-icon{font-size:25px;line-height:1}
.company-location .location-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.company-location .location-meta .meta-item{padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.035)}
.company-location .location-meta strong{display:block;font-size:13px;margin-bottom:5px}
.company-location .location-meta span{font-size:13px;opacity:.72}
.company-location .location-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.company-location .location-actions .btn{flex:1;min-width:170px;text-align:center}
@media(max-width:980px){
  .company-location .location-card{grid-template-columns:1fr}
  .company-location .location-map{order:1;min-height:390px}
  .company-location .location-map iframe{min-height:390px}
  .company-location .location-info{order:2}
}
@media(max-width:640px){
  .company-location{padding-top:45px;padding-bottom:55px}
  .company-location .location-card{grid-template-columns:1fr!important;padding:10px;border-radius:22px;gap:12px}
  .company-location .location-map,.company-location .location-map iframe{min-height:300px;border-radius:16px}
  .company-location .location-info{padding:24px 18px;border-radius:16px}
  .company-location .location-meta{grid-template-columns:1fr}
  .company-location .location-actions{flex-direction:column}
  .company-location .location-actions .btn{width:100%;min-width:0}
}

/* ==================== PREMIUM CEO HIGHLIGHT ==================== */
.ceo-team-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  transform:translateY(0);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.ceo-team-card::before{
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-75px;top:-75px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,190,80,.28),transparent 68%);
  pointer-events:none;
  z-index:-1;
}
.ceo-team-card::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,190,80,.9),transparent);
  opacity:.8;
}
.ceo-team-card:hover{
  transform:translateY(-8px);
  box-shadow:0 32px 85px rgba(0,0,0,.30);
  border-color:rgba(255,190,80,.42);
}
.ceo-team-photo{
  position:relative;
  min-height:340px;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(145deg,#181818,#0b0b0b);
}
.ceo-team-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.48));
  pointer-events:none;
}
.ceo-team-photo img{
  width:100%;height:100%;
  min-height:340px;
  object-fit:cover;
  object-position:center top;
  display:block;
  transition:transform .6s ease,filter .4s ease;
}
.ceo-team-card:hover .ceo-team-photo img{
  transform:scale(1.035);
  filter:saturate(1.05) contrast(1.03);
}
.ceo-team-badge{
  position:absolute;
  left:18px;bottom:18px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:999px;
  color:#17110a;
  background:linear-gradient(135deg,#ffe3a1,#f5b94f);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.ceo-team-badge::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:currentColor;
}
.ceo-team-card .profile-meta{
  padding:22px 22px 24px;
}
.ceo-team-card .profile-meta h3{
  margin:0 0 5px;
  font-size:1.35rem;
  letter-spacing:-.02em;
}
.ceo-team-card .profile-meta .role{
  display:inline-block;
  margin-bottom:11px;
  font-weight:700;
  letter-spacing:.04em;
  font-size:.82rem;
  opacity:.82;
}
.ceo-team-card .profile-meta p{
  margin:0;
  line-height:1.7;
  opacity:.72;
}
@media (max-width:700px){
  .ceo-team-photo,.ceo-team-photo img{min-height:300px}
  .ceo-team-card .profile-meta{padding:18px 18px 20px}
  .ceo-team-card .profile-meta h3{font-size:1.22rem}
}

/* ==================== CEO FULL BORDER ==================== */
.ceo-team-card{
  border:2px solid rgba(255,190,80,.55) !important;
  border-radius:24px !important;
  padding:10px !important;
  background:linear-gradient(145deg,rgba(255,190,80,.10),rgba(255,255,255,.035)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.25),0 0 28px rgba(255,190,80,.10) !important;
}
.ceo-team-card:hover{
  border-color:rgba(255,205,115,.95) !important;
  box-shadow:0 0 0 2px rgba(255,190,80,.10),0 32px 85px rgba(0,0,0,.30),0 0 42px rgba(255,190,80,.18) !important;
}
.ceo-team-photo{
  border:2px solid rgba(255,190,80,.42) !important;
  border-radius:18px !important;
}
.ceo-team-card .profile-meta{
  border:1px solid rgba(255,190,80,.20);
  border-radius:18px;
  margin-top:10px;
}
@media(max-width:700px){
  .ceo-team-card{padding:7px !important;border-radius:20px !important}
  .ceo-team-photo{border-radius:15px !important}
}

/* =========================================================
   FINAL RESPONSIVE + PERFORMANCE HARDENING
   ========================================================= */
html { width:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body { width:100%; max-width:100%; overflow-x:hidden; margin:0; }
*,*::before,*::after { box-sizing:border-box; }
img,svg,video,canvas,iframe { max-width:100%; }
img { height:auto; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,.btn,a { touch-action:manipulation; }

.container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.hero-grid,.two-col,.split,.location-card,.company-location .location-card { min-width:0; }
.hero-copy,.hero-visual,.panel,.card,.section-head,.footer-grid>* { min-width:0; }

/* Never let long text/URLs create horizontal scrolling. */
h1,h2,h3,h4,h5,h6,p,a,span,li,button,input,textarea,select { overflow-wrap:anywhere; }

/* Touch-friendly controls without making tiny phones overflow. */
.btn { min-height:44px; }
input,select,textarea { max-width:100%; font-size:16px; }

/* Images and embeds stay inside their cards. */
img { display:block; }
iframe { display:block; width:100%; border:0; }
.location-map,.company-location .location-map { width:100%; max-width:100%; overflow:hidden; }
.location-map iframe,.company-location .location-map iframe { width:100%; max-width:100%; }

/* Tablet */
@media (max-width: 980px) {
  .container { width:min(100% - 32px, 760px); }
  .nav-inner { min-height:72px; }
  .brand { min-width:0; max-width:calc(100% - 64px); }
  .brand-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .menu { max-width:calc(100vw - 24px); }
  .grid-2,.grid-3,.grid-4,.hero-grid,.two-col,.split,.location-card,.company-location .location-card { grid-template-columns:1fr !important; }
  .hero { overflow:clip; }
  .hero-copy h1,.hero h1 { max-width:100%; }
  .location-map,.company-location .location-map { min-height:360px; }
  .location-map iframe,.company-location .location-map iframe { min-height:360px; }
}

/* Standard phones */
@media (max-width: 640px) {
  .container { width:calc(100% - 24px); }
  section,.section { overflow:clip; }
  .nav-inner { min-height:64px; gap:8px; }
  .brand img { width:40px; height:40px; object-fit:contain; flex:0 0 40px; }
  .brand-name { font-size:clamp(11px,3.2vw,15px); letter-spacing:.04em; }
  .hamb { width:44px; height:44px; min-width:44px; }
  .menu { width:min(330px, calc(100vw - 24px)); right:12px; left:auto; }

  .hero { padding-left:0; padding-right:0; }
  .hero-copy h1,.hero h1 { font-size:clamp(32px,9vw,48px); line-height:1.04; }
  .hero-copy p,.hero p { font-size:15px; line-height:1.65; }
  .hero-actions { width:100%; gap:10px; }
  .hero-actions .btn,.cta .btn { width:100%; max-width:100%; }

  .section-head h2 { font-size:clamp(27px,7vw,38px); line-height:1.12; }
  .panel,.card { width:100%; max-width:100%; }
  .stats { width:100%; }

  .company-location { padding-inline:0; }
  .company-location .location-card { gap:14px !important; }
  .company-location .location-map,.company-location .location-map iframe,
  .location-map,.location-map iframe { min-height:300px !important; height:300px; }
  .map-company-label { max-width:calc(100% - 24px); left:12px; right:12px; }
  .location-details { width:100%; }
  .location-details .btn { width:100%; }

  .footer-grid { grid-template-columns:1fr !important; }
  .footer-grid>* { width:100%; }
}

/* Small Android / iPhone SE / older compact phones */
@media (max-width: 390px) {
  .container { width:calc(100% - 20px); }
  .nav-inner { min-height:60px; }
  .brand img { width:36px; height:36px; flex-basis:36px; }
  .brand-name { font-size:10px; }
  .hamb { width:42px; height:42px; min-width:42px; }
  .menu { width:calc(100vw - 20px); right:10px; }
  .hero-copy h1,.hero h1 { font-size:clamp(29px,9.2vw,38px); }
  .hero-visual { min-height:280px; }
  .orbit { max-width:82vw; max-height:82vw; }
  .logo-core { max-width:58vw; max-height:58vw; }
  .logo-core img { max-width:75%; max-height:75%; }
  .location-map,.location-map iframe,.company-location .location-map,.company-location .location-map iframe { min-height:270px !important; height:270px; }
  .panel,.card { padding:18px; }
}

/* Very narrow 320px devices */
@media (max-width: 340px) {
  .container { width:calc(100% - 16px); }
  .brand { min-width:0; flex:1 1 auto; gap:7px; }
  .brand-name { display:block; min-width:0; font-size:9px; line-height:1.05; letter-spacing:.015em; white-space:nowrap; overflow:visible; text-overflow:clip; }
  .hero-copy h1,.hero h1 { font-size:29px; }
  .section-head h2 { font-size:26px; }
  .location-map,.location-map iframe,.company-location .location-map,.company-location .location-map iframe { min-height:250px !important; height:250px; }
}

/* Respect reduced-motion and improve perceived performance. */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}


/* =========================================================
   MOBILE PREMIUM POLISH — FULL CARDS + TOUCH INTERACTIONS
   ========================================================= */
.card, .panel, .service-card, .feature-card, .project-card, .info-card {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.card > *, .panel > *, .service-card > *, .feature-card > *, .project-card > *, .info-card > * {
  max-width: 100%;
  min-width: 0;
}
.card img, .panel img, .service-card img, .feature-card img, .project-card img, .info-card img {
  max-width: 100%;
  object-fit: cover;
}

/* Keep the full company name visible beside the logo on every phone. */
@media (max-width: 420px) {
  .nav-inner { padding-inline: 0; gap: 6px; }
  .brand { flex: 1 1 auto; width: auto; max-width: calc(100% - 52px); }
  .brand img { width: 34px; height: 34px; flex: 0 0 34px; }
  .brand-name { display: block !important; font-size: clamp(8.5px, 2.7vw, 11px); letter-spacing: .01em; line-height: 1.05; white-space: nowrap; overflow: visible; }
  .hamb { flex: 0 0 42px; }
}

/* Phones: every card gets comfortable edges and never gets clipped. */
@media (max-width: 640px) {
  .cards-4, .cards-3, .grid-2, .grid-3, .grid-4, .features, .services-grid, .projects-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }
  .card, .panel, .service-card, .feature-card, .project-card, .info-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0;
    padding: clamp(18px, 5vw, 26px);
    border-radius: 20px;
  }
  .card h3, .panel h3, .service-card h3, .feature-card h3, .project-card h3, .info-card h3 {
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.25;
  }
  .card p, .panel p, .service-card p, .feature-card p, .project-card p, .info-card p {
    font-size: 14px;
    line-height: 1.65;
  }
}

/* Touch feedback: tap feels like a premium press without removing hover effects. */
.card.touch-active, .panel.touch-active, .btn.touch-active, .menu a.touch-active {
  transform: translateY(-3px) scale(.99);
  filter: brightness(1.08);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.card.touch-active { box-shadow: 0 18px 45px rgba(0,0,0,.25), 0 0 0 1px var(--line-strong); }
.btn.touch-active { box-shadow: 0 10px 28px rgba(0,0,0,.22); }

/* Mobile menu is a complete, obvious panel rather than a partial dropdown. */
@media (max-width: 980px) {
  .menu {
    width: min(360px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
  }
  .menu a { min-height: 46px; display: flex; align-items: center; padding: 11px 14px; }
  .menu.open { animation: mobileMenuIn .28s cubic-bezier(.22,1,.36,1); }
  @keyframes mobileMenuIn { from { opacity:0; transform: translateY(-14px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
}

/* =========================================================
   FINAL MOBILE STATS — 2x2 DIVIDERS
   ========================================================= */
@media (max-width: 640px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stats .stat {
    min-width: 0;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .stats .stat:nth-child(2n) {
    border-right: 0 !important;
  }
  .stats .stat:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
  }
  .stats .stat strong {
    font-size: clamp(24px, 7vw, 32px);
    white-space: nowrap;
  }
  .stats .stat span {
    font-size: clamp(8px, 2.5vw, 11px);
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stats .stat {
    padding: 18px 7px;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .stats .stat:nth-child(2n) {
    border-right: 0 !important;
  }
  .stats .stat:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
  }
}


/* =========================================================
   GOVERNMENT / SEMI-GOVERNMENT CREDIBILITY SECTIONS
   ========================================================= */
 .government-section { position:relative; }
.government-banner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:30px;padding:36px;border:1px solid rgba(255,255,255,.16);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:0 28px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);position:relative;overflow:hidden}
.government-banner:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 80% 20%,rgba(255,190,70,.13),transparent 32%),radial-gradient(circle at 15% 80%,rgba(120,220,255,.08),transparent 30%);pointer-events:none}
.government-copy,.government-badges{position:relative;z-index:1}.government-copy h2{margin:10px 0 14px;font-size:clamp(28px,4vw,46px);line-height:1.08}.government-copy .kicker{letter-spacing:.14em;font-weight:800;text-transform:uppercase}.government-badges{display:grid;gap:14px;align-content:center}.gov-badge{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;padding:18px 20px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));box-shadow:0 12px 35px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}.gov-badge:hover{transform:translateY(-6px) scale(1.01);border-color:rgba(255,205,90,.65);box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 28px rgba(255,190,70,.12)}.gov-badge>span{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,210,100,.45);border-radius:15px;background:rgba(255,200,80,.08);font-size:23px;box-shadow:0 0 22px rgba(255,190,70,.12)}.gov-badge b{display:block;font-size:15px;line-height:1.35}.gov-badge small{display:block;opacity:.72;margin-top:5px;line-height:1.4}.gov-premium b{font-weight:850}
@media(max-width:760px){.government-banner{grid-template-columns:1fr;padding:22px;gap:20px}.government-badges{grid-template-columns:1fr}.gov-badge{grid-template-columns:46px minmax(0,1fr);padding:16px}.gov-badge>span{width:42px;height:42px}.gov-badge b{font-size:14px}}

/* ===== PREMIUM DUAL OFFICE LOCATIONS ===== */
.locations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:30px;align-items:stretch}
.location-office{display:flex;flex-direction:column;overflow:hidden;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 22px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.location-office:hover{transform:translateY(-6px);border-color:rgba(255,210,100,.38);box-shadow:0 30px 75px rgba(0,0,0,.3),0 0 32px rgba(255,190,70,.08)}
.location-office .location-info{padding:30px;min-width:0;display:flex;flex-direction:column;flex:0 0 auto}
.location-office .location-map{position:relative;min-height:440px;height:440px;border-radius:0!important;background:#111;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.location-office .location-map iframe{display:block;width:100%;height:100%;min-height:440px;border:0;border-radius:0!important}
.location-badge{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.045);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.location-office h3{font-size:clamp(22px,2vw,27px);margin:17px 0 5px;line-height:1.15}
.location-office .location-address{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035);min-height:92px}
.location-office .location-address .sub{line-height:1.55;display:inline-block;margin-top:4px}
.location-office .location-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.location-office .location-meta .meta-item{min-width:0}
.location-office .location-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.location-office .location-actions .btn{flex:1;min-width:170px;text-align:center}
.map-company-label{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(10,10,12,.84);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.28);pointer-events:none}
.map-company-label span{font-size:18px}.map-company-label strong{font-size:13px;line-height:1.1}.map-company-label small{font-size:11px;opacity:.68;margin-left:2px}
@media(max-width:1100px){.locations-grid{grid-template-columns:1fr;max-width:850px;margin-left:auto;margin-right:auto}.location-office .location-map{min-height:430px;height:430px}.location-office .location-map iframe{min-height:430px}}
@media(max-width:640px){.locations-grid{gap:18px;margin-top:22px}.location-office{border-radius:22px}.location-office .location-info{padding:22px 17px}.location-office h3{font-size:21px}.location-office .location-meta{grid-template-columns:1fr}.location-office .location-map{min-height:320px;height:320px}.location-office .location-map iframe{min-height:320px}.location-office .location-actions{flex-direction:column}.location-office .location-actions .btn{width:100%;min-width:0}.map-company-label{left:10px;right:10px;bottom:10px;max-width:calc(100% - 20px)}}
@media(max-width:360px){.location-office .location-info{padding:19px 14px}.location-office .location-map,.location-office .location-map iframe{min-height:285px;height:285px}.map-company-label{padding:8px 10px}.map-company-label strong{font-size:11px}.map-company-label small{font-size:10px}}


/* ===== FINAL PREMIUM MOBILE POLISH ===== */
:root{--tcw-radius:22px;--tcw-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe{max-width:100%}
button,a,.btn,.card,.panel,.service-card,.feature-card,.location-card{transition:transform .28s var(--tcw-ease),box-shadow .28s var(--tcw-ease),border-color .28s ease,background-color .28s ease,filter .28s ease}
@media (hover:hover){
  .card:hover,.panel:hover,.service-card:hover,.feature-card:hover,.location-card:hover{transform:translateY(-5px);box-shadow:0 22px 60px rgba(0,0,0,.28)}
}
.card:active,.panel:active,.service-card:active,.feature-card:active,.location-card:active,.btn:active{transform:scale(.985)}

/* Header / brand remains readable on narrow phones */
.brand{min-width:0;display:flex;align-items:center;gap:9px}
.brand-name{display:block!important;min-width:0;white-space:nowrap;line-height:1.05;overflow:visible;text-overflow:clip}

/* Premium location cards */
.company-location .locations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.company-location .location-card{height:100%;grid-template-columns:1fr!important;grid-template-rows:auto auto}
.company-location .location-map{order:2!important;min-height:400px}
.company-location .location-info{order:1!important;min-width:0}
.company-location .location-address .sub{overflow-wrap:anywhere}
.company-location .location-card:focus-within{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 70px rgba(0,0,0,.25)}

/* Small-screen cards: never clip content */
@media(max-width:980px){
  .company-location .locations-grid{grid-template-columns:1fr}
  .company-location .location-card{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,1180px)}
  .section{overflow:clip}
  .company-location{padding:42px 0 52px}
  .company-location .locations-grid{gap:16px}
  .company-location .location-card{padding:9px;border-radius:22px;gap:9px;overflow:visible}
  .company-location .location-info{padding:22px 16px;border-radius:17px}
  .company-location .location-badge{font-size:11px;letter-spacing:.08em}
  .company-location .location-info h3{font-size:clamp(20px,6vw,28px);overflow-wrap:anywhere}
  .company-location .location-map,.company-location .location-map iframe{min-height:285px;height:285px;border-radius:17px}
  .company-location .location-meta{grid-template-columns:1fr 1fr;gap:9px}
  .company-location .location-meta .meta-item{padding:12px 10px;min-width:0}
  .company-location .location-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .company-location .location-actions .btn{min-width:0;width:100%;min-height:48px}
  .section-head h2{font-size:clamp(25px,8vw,38px);line-height:1.08}
  .section-head .sub{font-size:14px;line-height:1.65}
  .brand img{width:38px;height:38px;flex:0 0 38px}
  .brand-name{font-size:clamp(9px,2.9vw,13px)!important;letter-spacing:.02em!important}
}
@media(max-width:360px){
  .container{width:calc(100% - 18px)}
  .brand{gap:6px}
  .brand img{width:34px;height:34px;flex-basis:34px}
  .brand-name{font-size:8.5px!important;letter-spacing:0!important}
  .company-location .location-info{padding:19px 13px}
  .company-location .location-meta{grid-template-columns:1fr}
  .company-location .location-map,.company-location .location-map iframe{height:260px;min-height:260px}
}

/* Touch-friendly controls while preserving premium interaction */
@media(pointer:coarse){
  a,.btn,button,.menu a{touch-action:manipulation}
  .btn,.menu a{min-height:44px}
}

/* ===== OUR OFFICES: PREMIUM DUAL ADDRESS ===== */
.company-location .locations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
.company-location .locations-grid .location-card{min-width:0}
.company-location .location-branch .location-info{min-height:100%;justify-content:center}
.company-location .location-branch{grid-template-columns:1fr}
.company-location .location-branch .location-address{margin-top:18px}
@media(max-width:980px){.company-location .locations-grid{grid-template-columns:1fr}.company-location .location-branch .location-info{min-height:320px}}
@media(max-width:640px){.company-location .locations-grid{gap:18px}.company-location .location-branch .location-info{min-height:auto}}

/* OUR OFFICES — poster-inspired premium layout */
.company-location{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(4,12,24,.18),rgba(4,12,24,.42))}
.company-location .section-head{max-width:1100px;margin:0 auto 30px}
.company-location .section-head .kicker{letter-spacing:.16em;font-weight:800}
.company-location .section-head h2{font-size:clamp(30px,4vw,48px);margin:8px 0 10px}
.company-location .section-head .sub{max-width:780px;font-size:16px}
.company-location .locations-grid{display:grid;grid-template-columns:1fr;gap:22px;max-width:1100px;margin:0 auto}
.company-location .location-card{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;grid-template-rows:1fr!important;gap:0!important;padding:0!important;overflow:hidden;border-radius:26px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(135deg,rgba(20,29,43,.96),rgba(10,17,29,.98));box-shadow:0 24px 70px rgba(0,0,0,.28)}
.company-location .location-info{padding:34px 34px 30px!important;display:flex;flex-direction:column;justify-content:center;min-width:0;border-radius:0!important;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.company-location .location-badge{width:max-content;max-width:100%;border:1px solid rgba(234,179,8,.34);background:rgba(234,179,8,.07);color:#f7f8fb;border-radius:999px;padding:9px 14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.company-location .location-info h3{font-size:clamp(27px,3vw,38px);margin:18px 0 4px;line-height:1.12}
.company-location .location-info>.sub{font-size:16px;margin-bottom:20px}
.company-location .location-address{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.035)}
.company-location .location-address .loc-icon{font-size:24px;flex:0 0 auto}
.company-location .location-address strong{font-size:15px}
.company-location .location-address .sub{display:inline-block;margin-top:6px;line-height:1.7}
.company-location .location-meta{margin-top:16px}
.company-location .location-actions{margin-top:18px}
.company-location .location-map{order:2!important;min-height:430px;height:100%;border-radius:0!important;overflow:hidden;position:relative}
.company-location .location-map iframe{width:100%;height:100%;min-height:430px;border:0;display:block}
.company-location .map-company-label{left:18px;bottom:18px;border-radius:14px}
.company-location .location-branch{grid-template-columns:1fr!important;min-height:230px}
.company-location .location-branch .location-info{padding:30px 34px!important;justify-content:center}
.company-location .location-branch .location-address{max-width:760px}
.company-location .location-branch .location-info h3{margin-top:14px}
.company-location .location-branch .location-info>.sub{margin-bottom:16px}
@media(max-width:900px){
  .company-location .location-card{grid-template-columns:1fr!important;grid-template-rows:auto auto!important}
  .company-location .location-info{padding:26px 22px!important}
  .company-location .location-map{min-height:340px;height:340px}
  .company-location .location-map iframe{min-height:340px}
}
@media(max-width:640px){
  .company-location .section-head{margin-bottom:20px}
  .company-location .locations-grid{gap:16px}
  .company-location .location-card{border-radius:21px}
  .company-location .location-info{padding:21px 16px!important}
  .company-location .location-info h3{font-size:clamp(24px,7vw,31px)}
  .company-location .location-address{padding:15px;gap:11px}
  .company-location .location-address .sub{font-size:14px;line-height:1.65}
  .company-location .location-map,.company-location .location-map iframe{height:285px;min-height:285px}
  .company-location .location-branch{min-height:0}
  .company-location .location-branch .location-info{padding:21px 16px!important}
}
@media(max-width:360px){
  .company-location .location-info{padding:18px 13px!important}
  .company-location .location-badge{font-size:10px;padding:8px 11px}
  .company-location .location-address{padding:13px}
  .company-location .location-address .sub{font-size:13px}
  .company-location .location-map,.company-location .location-map iframe{height:255px;min-height:255px}
}

/* =========================================================
   EXPLICIT LIGHT / DARK THEME CONTROL
   ========================================================= */
:root {
  color-scheme: light dark;
  --loc-bg: rgba(255,255,255,.92);
  --loc-card-bg: rgba(255,255,255,.82);
  --loc-border: rgba(7,26,43,.13);
  --loc-text: #071a2b;
  --loc-muted: #60788d;
  --loc-soft: rgba(7,26,43,.045);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg:#f5fbff; --bg-2:#fff; --bg-3:#eef9ff;
  --card:rgba(255,255,255,.88); --card-solid:#fff;
  --line:rgba(14,165,233,.16); --line-strong:rgba(14,165,233,.34);
  --text:#071a2b; --text-2:#18344d; --muted:#60788d;
  --blue:#0284c7; --blue-2:#0ea5e9; --blue-3:#38bdf8; --cyan:#06b6d4;
  --loc-bg:rgba(255,255,255,.94); --loc-card-bg:rgba(255,255,255,.84);
  --loc-border:rgba(7,26,43,.13); --loc-text:#071a2b; --loc-muted:#60788d; --loc-soft:rgba(7,26,43,.045);
}

html[data-theme="dark-disabled"] {
  color-scheme: dark;
  --bg:#030912; --bg-2:#07111d; --bg-3:#0a1826;
  --card:rgba(9,25,42,.84); --card-solid:#0b1a2b;
  --line:rgba(88,189,255,.18); --line-strong:rgba(88,189,255,.40);
  --text:#f0f9ff; --text-2:#d7ebf8; --muted:#a5b8c9;
  --blue:#38bdf8; --blue-2:#60d5ff; --blue-3:#7dd3fc; --cyan:#67e8f9;
  --loc-bg:rgba(9,18,30,.96); --loc-card-bg:rgba(255,255,255,.035);
  --loc-border:rgba(255,255,255,.13); --loc-text:#f0f9ff; --loc-muted:#a5b8c9; --loc-soft:rgba(255,255,255,.045);
}

/* Location section follows the selected website theme instead of staying dark. */
.company-location{background:linear-gradient(180deg,var(--loc-soft),transparent)!important;color:var(--loc-text)!important;transition:background .35s ease,color .35s ease}
.company-location .location-card{background:var(--loc-bg)!important;border-color:var(--loc-border)!important;box-shadow:0 24px 70px rgba(0,0,0,.14)!important}
.company-location .location-info{background:linear-gradient(180deg,var(--loc-soft),transparent)!important;color:var(--loc-text)!important}
.company-location .location-info>.sub,.company-location .location-address .sub,.company-location .location-meta span{color:var(--loc-muted)!important}
.company-location .location-address,.company-location .meta-item{background:var(--loc-card-bg)!important;border-color:var(--loc-border)!important}
.company-location .location-badge{color:var(--loc-text)!important;background:var(--loc-card-bg)!important;border-color:var(--line-strong)!important}
.company-location .map-company-label{background:var(--loc-bg)!important;color:var(--loc-text)!important;border-color:var(--loc-border)!important;box-shadow:0 12px 30px rgba(0,0,0,.18)!important}
.company-location .map-company-label small{color:var(--loc-muted)!important}
html[data-theme="light"] .company-location .location-map{background:#eaf2f7!important}
html[data-theme="dark-disabled"] .company-location .location-map{background:#07111d!important}

/* Full leadership card/photo on phones: preserve the complete image like desktop. */
@media(max-width:640px){
  .leader{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;align-items:start!important}
  .leader .avatar{margin-inline:0}
  .ceo-team-card,.leader-card{width:100%;overflow:hidden}
  .ceo-team-photo,.ceo-team-photo img{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
  .person-photo{width:100%;height:auto;object-fit:contain;object-position:center}
}


/* ==================== SEMI-GOVERNMENT COMPANY STATUS ==================== */
.semi-gov-status{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);font-size:12px;letter-spacing:.02em;transition:background .3s ease,color .3s ease,border-color .3s ease,transform .25s ease}
.semi-gov-status strong{font-weight:850}
.semi-gov-status span{opacity:.68}
.semi-gov-status:hover{transform:translateY(-2px)}
.footer-semi-gov{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:18px;background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);transition:background .3s ease,color .3s ease,border-color .3s ease}
.footer-semi-gov>span{font-size:22px}
.footer-semi-gov strong{display:block;font-size:14px}
.footer-semi-gov small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.45}
@media(max-width:640px){.semi-gov-status{width:100%;border-radius:16px;justify-content:flex-start;padding:10px 12px}.semi-gov-status span{width:100%;padding-left:28px}.footer-semi-gov{padding:12px 13px}.footer-semi-gov small{font-size:10px}}


/* =========================================================
   TCW SITE-WIDE LIGHT THEME — FINAL OVERRIDE
   The public website intentionally stays light on every device.
   ========================================================= */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5fbff;
    --bg-2: #ffffff;
    --bg-3: #eef9ff;
    --card: rgba(255,255,255,.94);
    --card-solid: #ffffff;
    --line: rgba(14,165,233,.16);
    --line-strong: rgba(14,165,233,.34);
    --text: #071a2b;
    --text-2: #18344d;
    --muted: #60788d;
    --blue: #0284c7;
    --blue-2: #0ea5e9;
    --blue-3: #38bdf8;
    --cyan: #06b6d4;
    --white: #ffffff;
    --success: #16a34a;
}
body {
    color-scheme: light;
    background:
        radial-gradient(circle at 10% 5%, rgba(56,189,248,.10), transparent 27%),
        radial-gradient(circle at 90% 12%, rgba(34,211,238,.08), transparent 30%),
        linear-gradient(180deg, #f5fbff, #ffffff);
    color: #071a2b;
}
body::before { opacity: .28 !important; }


/* =========================================================
   CYBER CRIME RESPONSE PORTAL
   ========================================================= */
.portal-hero { padding: 145px 0 75px; position:relative; overflow:hidden; }
.portal-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr); gap:60px; align-items:center; }
.portal-brand-card { padding:26px; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); }
.portal-brand-frame { border-radius:20px; padding:18px; background:#fff; border:1px solid #e7f3f9; }
.portal-brand-frame img { width:100%; max-height:310px; object-fit:contain; }
.portal-disclaimer { margin:16px 4px 0; color:var(--muted); font-size:12px; line-height:1.6; }
.portal-trust-row { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:24px; color:#2b617b; font-size:13px; font-weight:700; }
.portal-alert { border-top:1px solid #ccecf9; border-bottom:1px solid #ccecf9; background:#effaff; }
.portal-alert-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; }
.portal-alert-inner > div:first-child { display:flex; flex-direction:column; gap:2px; }
.portal-alert-inner span { color:var(--muted); font-size:13px; }
.portal-alert-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.btn.small { min-height:40px; padding:9px 17px; font-size:12px; }
.portal-hotline { color:#b42318; font-weight:900; white-space:nowrap; }
.portal-hotline span { color:#b42318; font-size:20px; }
.portal-section { padding-top:88px; }
.portal-form-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:28px; align-items:start; }
.portal-form { padding:30px; }
.portal-form-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.form-step { display:inline-block; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.12em; }
.portal-form h3 { margin-top:4px; font-size:24px; }
.required-note { color:var(--muted); font-size:12px; }
.portal-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.portal-form label, .track-form label { display:flex; flex-direction:column; gap:7px; color:var(--text-2); font-size:13px; font-weight:800; margin-bottom:18px; }
.portal-form input, .portal-form select, .portal-form textarea, .track-form input {
  width:100%; border:1px solid #cfe4ee; border-radius:12px; background:#fff; color:var(--text);
  padding:13px 14px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.portal-form textarea { resize:vertical; min-height:150px; }
.portal-form input:focus, .portal-form select:focus, .portal-form textarea:focus, .track-form input:focus { border-color:var(--blue-2); box-shadow:0 0 0 4px rgba(14,165,233,.10); }
.check-row { flex-direction:row !important; align-items:flex-start; gap:10px !important; font-size:12px !important; font-weight:600 !important; color:var(--muted) !important; }
.check-row input { width:18px; height:18px; margin-top:1px; flex:0 0 18px; }
.form-message { min-height:24px; margin-top:14px; color:var(--muted); font-size:13px; line-height:1.5; }
.form-message.success { color:#137333; }
.form-message.error { color:#b42318; }
.portal-side { display:grid; gap:20px; }
.portal-info-card { padding:26px; }
.portal-card-icon { font-size:30px; display:inline-block; margin-bottom:12px; }
.portal-info-card h3 { font-size:21px; margin-bottom:10px; }
.portal-info-card p { color:var(--muted); font-size:13px; line-height:1.7; }
.portal-steps { list-style:none; display:grid; gap:18px; margin-top:20px; }
.portal-steps li { display:grid; grid-template-columns:32px 1fr; gap:12px; }
.portal-steps li > span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#eaf8ff; color:var(--blue); font-weight:900; font-size:12px; }
.portal-steps strong { font-size:13px; }
.portal-steps p { margin-top:2px; font-size:12px; }
.emergency-card { border-color:#ffd6d1; background:#fffafa; }
.text-link { display:inline-block; margin-top:12px; color:var(--blue); font-weight:800; font-size:13px; }
.portal-track-section { background:linear-gradient(180deg,#fff,#f5fbff); }
.tracker-card { padding:30px; max-width:950px; margin:0 auto; }
.track-form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:16px; }
.track-form label { margin-bottom:0; }
.track-result { margin-top:22px; padding:20px; border:1px solid #d6edf7; border-radius:16px; background:#f8fdff; }
.track-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.status-pill { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#e8f7ed; color:#137333; font-size:11px; font-weight:900; }
.track-result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.track-result-grid div { padding:12px; background:#fff; border-radius:12px; border:1px solid #e5f0f5; }
.track-result-grid small { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.track-result-grid b { font-size:13px; }
.portal-safety-section { padding-top:70px; }
.safety-card { min-height:200px; }
.official-card { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px; background:linear-gradient(135deg,#f0fbff,#ffffff); }
.official-card h2 { font-size:34px; margin-top:5px; }
.official-card p { max-width:750px; color:var(--muted); }
@media (max-width:980px) {
  .portal-hero-grid, .portal-form-layout { grid-template-columns:1fr; }
  .portal-brand-card { max-width:700px; }
  .portal-alert-inner { align-items:flex-start; flex-direction:column; }
  .menu { position:absolute; top:calc(100% + 8px); left:20px; right:20px; flex-direction:column; align-items:stretch; padding:16px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }
  .menu a { padding:10px 12px; }
  .hamb { display:grid; place-items:center; }
}
@media (max-width:700px) {
  .portal-hero { padding-top:125px; }
  .portal-form { padding:20px; }
  .portal-form-grid, .track-form, .track-result-grid { grid-template-columns:1fr; }
  .official-card { flex-direction:column; align-items:flex-start; }
  .official-card h2 { font-size:28px; }
  .portal-trust-row { flex-direction:column; gap:8px; }
}

/* ===== TCW production polish: light-only, accessible, responsive ===== */
:root, :root[data-theme="dark"], :root[data-theme="light"] { color-scheme: light !important; --bg:#f7fbff; --bg-2:#fff; --bg-3:#eef8fd; --card:rgba(255,255,255,.96); --card-solid:#fff; --line:rgba(2,132,199,.15); --line-strong:rgba(2,132,199,.32); --text:#082033; --text-2:#173d57; --muted:#60788a; --blue:#087fbd; --blue-2:#0ea5e9; --blue-3:#38bdf8; --cyan:#06b6d4; --shadow-sm:0 8px 24px rgba(8,58,88,.07); --shadow:0 18px 55px rgba(8,58,88,.10); --shadow-lg:0 28px 90px rgba(8,58,88,.14); }
@media(prefers-color-scheme:never){html,body{color-scheme:light!important}}
html{background:#fff} body{background:radial-gradient(circle at 12% 0%,rgba(56,189,248,.12),transparent 28%),radial-gradient(circle at 90% 8%,rgba(14,165,233,.08),transparent 26%),linear-gradient(180deg,#f7fbff 0,#fff 72%);color:#082033}
body::before{opacity:.18!important;background-size:56px 56px!important}
.nav{background:rgba(255,255,255,.88)!important;border-bottom:1px solid rgba(8,32,51,.07);backdrop-filter:blur(18px)}
.nav.scrolled{box-shadow:0 10px 35px rgba(8,58,88,.08)}
.menu a{font-weight:700}.menu a.active{color:var(--blue)}
.btn{box-shadow:0 10px 25px rgba(2,132,199,.15);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(2,132,199,.2)}.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(14,165,233,.28);outline-offset:3px}
.card,.panel{background:rgba(255,255,255,.92);border:1px solid rgba(2,132,199,.12);box-shadow:var(--shadow-sm)}.card:hover,.panel:hover{box-shadow:var(--shadow);border-color:rgba(2,132,199,.22)}
.form-message{min-height:24px}.form-message.success{color:#137333}.form-message.error{color:#b42318}.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.menu-lock{overflow:hidden}
@media(max-width:980px){.menu{background:#fff!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}.menu.open{display:flex}.hamb{background:#fff!important;border:1px solid var(--line)!important}}
@media(max-width:640px){.container{width:min(100% - 32px,var(--max))}.hero{padding-top:110px}.hero h1{font-size:clamp(38px,11vw,56px)}.section{padding-block:65px}.nav-inner{min-height:72px}.brand-name{font-size:11px}.card,.panel{border-radius:18px}}

/* =========================================================
   TCW SIGNATURE DESIGN SYSTEM — LIGHT ONLY
   ========================================================= */
:root{
  color-scheme:light;
  --bg:#f6f9fc; --bg-2:#ffffff; --bg-3:#edf6fb;
  --card:#ffffff; --card-solid:#ffffff;
  --line:#dbe7ef; --line-strong:#b9d2df;
  --text:#0a1c2a; --text-2:#294355; --muted:#647b8b;
  --blue:#075985; --blue-2:#0284c7; --blue-3:#38bdf8; --cyan:#0891b2;
  --success:#16803c; --shadow-sm:0 8px 24px rgba(10,28,42,.06); --shadow:0 18px 55px rgba(10,28,42,.09); --shadow-lg:0 30px 90px rgba(10,28,42,.13);
  --radius-sm:10px; --radius:18px; --radius-lg:28px; --max:1280px;
}
@media (prefers-color-scheme:never){:root{color-scheme:light;--bg:#f6f9fc;--bg-2:#fff;--bg-3:#edf6fb;--card:#fff;--card-solid:#fff;--line:#dbe7ef;--line-strong:#b9d2df;--text:#0a1c2a;--text-2:#294355;--muted:#647b8b;--blue:#075985;--blue-2:#0284c7;--blue-3:#38bdf8;--cyan:#0891b2;--success:#16803c;--shadow-sm:0 8px 24px rgba(10,28,42,.06);--shadow:0 18px 55px rgba(10,28,42,.09);--shadow-lg:0 30px 90px rgba(10,28,42,.13)}}
html{background:var(--bg)} body{background:var(--bg);color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(2,132,199,.025) 1px,transparent 1px),linear-gradient(rgba(2,132,199,.025) 1px,transparent 1px);background-size:42px 42px}
.container{max-width:var(--max)}
.nav{background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(18px);box-shadow:0 4px 22px rgba(10,28,42,.035)}
.brand-name{letter-spacing:.11em!important;font-weight:850!important;color:#08263b!important}
.menu a{color:#385466!important;font-weight:650}.menu a:hover,.menu a.active{color:var(--blue-2)!important}
.btn{border-radius:10px!important;box-shadow:none!important;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(2,132,199,.14)!important}.btn.primary,.btn:not(.ghost){background:#075985!important;color:#fff!important}.btn.ghost{background:#fff!important;color:#075985!important;border:1px solid #bfd4df!important}
.hero,.page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8fcff 0%,#edf8fd 52%,#fff 100%)!important;border-bottom:1px solid var(--line)}
.hero:after,.page-hero:after{content:"TCW";position:absolute;right:-30px;bottom:-110px;font-size:260px;font-weight:900;letter-spacing:-.08em;color:rgba(2,132,199,.045);pointer-events:none}
.kicker{letter-spacing:.16em!important;color:#0e7490!important;font-weight:800!important}.sub{color:var(--muted)!important;line-height:1.75}
h1,h2,h3,h4{letter-spacing:-.025em;color:var(--text)}
.section{position:relative}.section-head{max-width:850px}.panel,.card,.service-card,.stat-card,.feature-card{background:rgba(255,255,255,.94)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-sm)!important;border-radius:var(--radius)!important}.panel:hover,.card:hover,.service-card:hover,.feature-card:hover{border-color:#b6d6e5!important;box-shadow:var(--shadow)!important}
/* editorial poster wall */
.tcw-poster-wall{padding:72px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tcw-poster-wall .poster-intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}.tcw-poster-wall .poster-intro h2{max-width:620px;margin:0}.tcw-posters{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.tcw-poster{position:relative;display:block;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--line);min-height:270px;box-shadow:var(--shadow-sm);transition:.28s ease}.tcw-poster:nth-child(1){grid-column:span 6}.tcw-poster:nth-child(2),.tcw-poster:nth-child(3){grid-column:span 3}.tcw-poster:nth-child(4),.tcw-poster:nth-child(5){grid-column:span 3}.tcw-poster img{width:100%;height:100%;min-height:270px;object-fit:cover;display:block;transition:transform .5s ease}.tcw-poster:after{content:"OPEN →";position:absolute;left:18px;bottom:16px;padding:8px 11px;border-radius:8px;background:rgba(255,255,255,.92);color:#075985;font-size:11px;font-weight:850;letter-spacing:.12em}.tcw-poster:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.tcw-poster:hover img{transform:scale(1.025)}
/* trust / utility strip */
.tcw-trust{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}.tcw-trust>div{padding:22px;border-right:1px solid var(--line)}.tcw-trust>div:last-child{border-right:0}.tcw-trust strong{display:block;font-size:18px;margin-bottom:5px}.tcw-trust span{color:var(--muted);font-size:13px}
.footer{background:#09283d!important;color:#dceef7!important;border-top:0!important}.footer a{color:#bfe6f7!important}.footer p,.footer span{color:#9fc0d0!important}
input,textarea,select{background:#fff!important;border:1px solid #cbdde7!important;color:#0a1c2a!important;border-radius:10px!important}input:focus,textarea:focus,select:focus{border-color:#0284c7!important;box-shadow:0 0 0 4px rgba(2,132,199,.1)!important;outline:none}
.skip-link{background:#075985!important;color:#fff!important}
@media(max-width:900px){.tcw-poster-wall{padding:52px 0}.tcw-poster:nth-child(n){grid-column:span 6}.tcw-trust{grid-template-columns:1fr 1fr}.tcw-trust>div:nth-child(2){border-right:0}.tcw-trust>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:600px){.tcw-poster:nth-child(n){grid-column:span 12}.tcw-poster-wall .poster-intro{display:block}.tcw-trust{grid-template-columns:1fr}.tcw-trust>div{border-right:0;border-bottom:1px solid var(--line)}.tcw-trust>div:last-child{border-bottom:0}.hero:after,.page-hero:after{font-size:160px}}

/* =========================================================
   TCW PREMIUM EXPERIENCE 2026
   Adaptive light/dark, cinematic hero, fraud hub
   ========================================================= */
.theme-toggle{border:1px solid var(--line);background:var(--card);color:var(--text);width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-size:18px;box-shadow:var(--shadow-sm);margin-left:auto;margin-right:8px;transition:.2s ease}.theme-toggle:hover{transform:translateY(-2px)}
.premium-hero{min-height:760px;isolation:isolate}.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden}.hero-video{width:100%;height:100%;object-fit:cover;display:block}.hero-media-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,250,253,.96) 0%,rgba(246,250,253,.84) 34%,rgba(246,250,253,.34) 66%,rgba(246,250,253,.10) 100%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.36))}.premium-hero .hero-content{max-width:720px}.premium-hero .hero-visual{filter:drop-shadow(0 24px 50px rgba(0,50,80,.18))}.premium-hero .hero-grid{min-height:760px;align-items:center}
.poster-label{position:absolute;right:16px;bottom:16px;padding:8px 11px;background:rgba(7,36,54,.9);color:#fff;border-radius:8px;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.premium-systems{background:linear-gradient(180deg,#fff,#f4f9fc)}
.fraud-hub{background:linear-gradient(180deg,#f7fbfe 0%,#fff 100%);border-top:1px solid var(--line)}.fraud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}.fraud-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;min-height:220px;box-shadow:var(--shadow-sm);transition:.25s ease;position:relative}.fraud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.fraud-card>span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--bg-3);color:var(--blue-2);font-size:11px;font-weight:900;margin-bottom:26px}.fraud-card h3{margin-bottom:10px}.fraud-card p{color:var(--muted);line-height:1.7;font-size:14px}.fraud-card a{display:inline-block;margin-top:18px;color:var(--blue-2);font-weight:800}.fraud-card.urgent{border-color:rgba(220,38,38,.25);background:linear-gradient(135deg,var(--card),rgba(254,242,242,.9))}.fraud-callout{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:22px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm)}.fraud-callout a{font-weight:850;color:var(--blue-2)}.tcw-trust-section{padding-top:20px}
@media(max-width:900px){.premium-hero,.premium-hero .hero-grid{min-height:700px}.hero-media-overlay{background:linear-gradient(180deg,rgba(246,250,253,.93),rgba(246,250,253,.62) 65%,rgba(246,250,253,.82))}.fraud-grid{grid-template-columns:1fr 1fr}.fraud-callout{grid-template-columns:1fr}.theme-toggle{margin-left:8px}}
@media(max-width:600px){.premium-hero,.premium-hero .hero-grid{min-height:680px}.hero-video{object-position:60% center}.fraud-grid{grid-template-columns:1fr}.fraud-card{min-height:auto}.theme-toggle{width:36px;height:36px;font-size:16px}.poster-label{font-size:9px}}
/* adaptive dark mode; manual override wins */
html[data-theme="dark-disabled"]{color-scheme:dark}html[data-theme="dark-disabled"],html[data-theme="dark-disabled"] body{--bg:#07111b;--bg-2:#0b1722;--bg-3:#102231;--card:#0e1d2a;--card-solid:#0e1d2a;--line:#243b4b;--line-strong:#3a6074;--text:#eff8fd;--text-2:#d2e6ef;--muted:#9bb1bf;--blue:#5cc8ff;--blue-2:#38bdf8;--blue-3:#7dd3fc;--cyan:#67e8f9;--shadow-sm:0 8px 24px rgba(0,0,0,.22);--shadow:0 18px 55px rgba(0,0,0,.32);--shadow-lg:0 30px 90px rgba(0,0,0,.42);background:#07111b;color:var(--text)}html[data-theme="dark-disabled"] body{background:radial-gradient(circle at 10% 0%,rgba(14,165,233,.12),transparent 30%),linear-gradient(180deg,#07111b,#0b1722)}html[data-theme="dark-disabled"] .nav{background:rgba(7,17,27,.92)!important;border-color:#243b4b!important}html[data-theme="dark-disabled"] .menu a{color:#c8dce7!important}html[data-theme="dark-disabled"] .btn.ghost{background:#0e1d2a!important;color:#7dd3fc!important;border-color:#34586b!important}html[data-theme="dark-disabled"] .hero,html[data-theme="dark-disabled"] .page-hero{background:#07111b!important}html[data-theme="dark-disabled"] .hero-media-overlay{background:linear-gradient(90deg,rgba(7,17,27,.95),rgba(7,17,27,.72) 45%,rgba(7,17,27,.25) 100%)}html[data-theme="dark-disabled"] .tcw-poster-wall,html[data-theme="dark-disabled"] .fraud-hub{background:#0b1722}html[data-theme="dark-disabled"] .fraud-card.urgent{background:linear-gradient(135deg,#0e1d2a,#2a1519)}html[data-theme="dark-disabled"] .tcw-trust,html[data-theme="dark-disabled"] .tcw-trust>div,html[data-theme="dark-disabled"] .fraud-callout{background:#0e1d2a}html[data-theme="dark-disabled"] input,html[data-theme="dark-disabled"] textarea,html[data-theme="dark-disabled"] select{background:#0e1d2a!important;color:#eff8fd!important;border-color:#34586b!important}
@media(prefers-color-scheme:never){html[data-theme="dark-disabled"]{color-scheme:dark}html[data-theme="dark-disabled"],html[data-theme="dark-disabled"] body{--bg:#07111b;--bg-2:#0b1722;--bg-3:#102231;--card:#0e1d2a;--card-solid:#0e1d2a;--line:#243b4b;--line-strong:#3a6074;--text:#eff8fd;--text-2:#d2e6ef;--muted:#9bb1bf;--blue:#5cc8ff;--blue-2:#38bdf8;--blue-3:#7dd3fc;--cyan:#67e8f9;--shadow-sm:0 8px 24px rgba(0,0,0,.22);--shadow:0 18px 55px rgba(0,0,0,.32);--shadow-lg:0 30px 90px rgba(0,0,0,.42);background:#07111b;color:var(--text)}html[data-theme="dark-disabled"] .nav{background:rgba(7,17,27,.92)!important;border-color:#243b4b!important}html[data-theme="dark-disabled"] .menu a{color:#c8dce7!important}html[data-theme="dark-disabled"] .hero-media-overlay{background:linear-gradient(90deg,rgba(7,17,27,.95),rgba(7,17,27,.72) 45%,rgba(7,17,27,.25) 100%)}html[data-theme="dark-disabled"] .tcw-poster-wall,html[data-theme="dark-disabled"] .fraud-hub{background:#0b1722}html[data-theme="dark-disabled"] .tcw-trust,html[data-theme="dark-disabled"] .fraud-callout{background:#0e1d2a}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-media{background:url('../assets/premium/tcw-hero-cinematic.png') center/cover no-repeat}.tcw-poster,.fraud-card{transition:none}}

/* =========================================================
   TCW 2026 — PREMIUM PERFORMANCE LAYER
   A restrained visual system: glass, aurora, grid, motion.
   ========================================================= */
:root{
  --tcw-ink:#06111f;
  --tcw-slate:#102238;
  --tcw-cyan:#22d3ee;
  --tcw-blue:#3b82f6;
  --tcw-violet:#8b5cf6;
  --tcw-lime:#a3e635;
  --tcw-glass:rgba(255,255,255,.72);
  --tcw-glass-dark:rgba(8,20,35,.72);
  --tcw-border:rgba(15,54,86,.12);
  --tcw-ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
body{background:
 radial-gradient(circle at 10% 0%,rgba(34,211,238,.09),transparent 28rem),
 radial-gradient(circle at 90% 12%,rgba(139,92,246,.08),transparent 30rem),
 var(--bg)!important;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.32;
 background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
 background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}
.skip-link{position:fixed;left:18px;top:14px;z-index:10000;padding:10px 14px;border-radius:10px;background:#06111f;color:#fff;transform:translateY(-150%);transition:transform .2s}
.skip-link:focus{transform:none}
.nav{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);background:rgba(255,255,255,.72)!important;border-bottom:1px solid rgba(15,54,86,.08)!important;transition:box-shadow .35s var(--tcw-ease),background .35s}
.nav.scrolled{box-shadow:0 14px 40px rgba(3,15,30,.09)}
.brand img{width:42px!important;height:42px!important;object-fit:contain;border-radius:12px;filter:drop-shadow(0 6px 12px rgba(2,132,199,.16))}
.brand-name{font-weight:900!important;letter-spacing:.055em!important}
.menu a{position:relative;transition:color .2s,transform .2s var(--tcw-ease)}
.menu a:not(.btn):after{content:"";position:absolute;left:12px;right:12px;bottom:-8px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--tcw-cyan),var(--tcw-violet));transform:scaleX(0);transform-origin:center;transition:transform .28s var(--tcw-ease)}
.menu a:not(.btn):hover:after,.menu a.active:not(.btn):after{transform:scaleX(1)}
.nav-cta{box-shadow:0 10px 26px rgba(2,132,199,.18)!important}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s var(--tcw-ease),box-shadow .28s,border-color .28s!important}
.btn:before{content:"";position:absolute;inset:-2px;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 48%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--tcw-ease);z-index:-1}
.btn:hover{transform:translateY(-3px)!important;box-shadow:0 18px 42px rgba(2,132,199,.18)!important}
.btn:hover:before{transform:translateX(130%)}
.hero,.page-hero,.portal-hero{isolation:isolate}
.hero:before,.page-hero:before,.portal-hero:before{content:"";position:absolute;width:36rem;height:36rem;right:-12rem;top:-12rem;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.18),rgba(139,92,246,.08) 38%,transparent 70%);filter:blur(8px);animation:tcw-float 10s ease-in-out infinite;pointer-events:none;z-index:-1}
.hero:after,.page-hero:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.2));pointer-events:none;z-index:-1}
@keyframes tcw-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-22px,24px,0) scale(1.05)}}
.card,.panel,.service-card,.feature-card,.stat-card,.fraud-card,.portal-brand-card{position:relative;overflow:hidden;transition:transform .45s var(--tcw-ease),box-shadow .45s var(--tcw-ease),border-color .35s}
.card:before,.panel:before,.service-card:before,.feature-card:before,.stat-card:before,.fraud-card:before,.portal-brand-card:before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(34,211,238,.10),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover:before,.panel:hover:before,.service-card:hover:before,.feature-card:hover:before,.stat-card:hover:before,.fraud-card:hover:before,.portal-brand-card:hover:before{opacity:1}
.card:hover,.panel:hover,.service-card:hover,.feature-card:hover,.stat-card:hover,.fraud-card:hover{transform:translateY(-7px);box-shadow:0 24px 70px rgba(5,25,45,.13)!important;border-color:rgba(14,165,233,.25)!important}
.reveal{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .75s var(--tcw-ease),transform .75s var(--tcw-ease)}
.reveal.visible{opacity:1;transform:none}
.section-head h2,.hero h1,.page-hero h1,.portal-hero h1{text-wrap:balance}
.hero h1,.page-hero h1,.portal-hero h1{font-weight:950;letter-spacing:-.045em}
.gradient{background:linear-gradient(100deg,#0284c7,#06b6d4 42%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow,.kicker{font-size:12px}
.progress{height:3px!important;background:linear-gradient(90deg,var(--tcw-cyan),var(--tcw-blue),var(--tcw-violet))!important;box-shadow:0 0 18px rgba(34,211,238,.45);z-index:9999}
.tcw-trust-section{padding-top:18px!important}
.tcw-trust>div{transition:transform .35s var(--tcw-ease)}
.tcw-trust>div:hover{transform:translateY(-4px)}
.footer{position:relative;overflow:hidden}
.footer:before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.7),rgba(139,92,246,.7),transparent)}
.footer-grid-premium{grid-template-columns:1.45fr repeat(3,1fr)!important}
.footer-grid-premium>div:not(.footer-brand-col){display:flex;flex-direction:column;gap:8px}
.footer-grid-premium h4{margin-bottom:8px}
.footer-grid-premium a{transition:transform .25s var(--tcw-ease),color .2s}
.footer-grid-premium a:hover{transform:translateX(4px)}
.footer-brand-col p{max-width:320px}
.footer-badge{display:inline-flex;width:max-content;margin-top:12px;padding:7px 10px;border:1px solid rgba(34,211,238,.25);border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.13em}
.hamb{transition:transform .25s var(--tcw-ease)}
.hamb:hover{transform:scale(1.06)}
#particles{opacity:.65}
@media(max-width:1100px){.menu{gap:8px!important}.menu a{font-size:12px!important}.footer-grid-premium{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:980px){.menu{backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.menu a:not(.btn):after{display:none}.footer-grid-premium{grid-template-columns:1fr 1fr!important}}
@media(max-width:640px){body:before{background-size:30px 30px}.hero:before,.page-hero:before,.portal-hero:before{width:22rem;height:22rem}.footer-grid-premium{grid-template-columns:1fr!important}.reveal{transition-duration:.55s}.btn{min-height:46px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero:before,.page-hero:before,.portal-hero:before{animation:none}.reveal{opacity:1;transform:none;transition:none}.btn,.card,.panel,.service-card,.feature-card,.stat-card{transition:none!important}.btn:hover,.card:hover,.panel:hover,.service-card:hover,.feature-card:hover,.stat-card:hover{transform:none!important}}
/* Dark mode — keeps the same brand language while preserving contrast. */
html[data-theme="dark-disabled"]{color-scheme:dark}
html[data-theme="dark-disabled"] body{--bg:#06111f;--bg-2:#0a1728;--bg-3:#0d1e32;--card:#0b1a2b;--card-solid:#0b1a2b;--line:#1b3850;--line-strong:#28506c;--text:#edf8ff;--text-2:#c7dce9;--muted:#91adbe;background:radial-gradient(circle at 10% 0%,rgba(34,211,238,.11),transparent 30rem),radial-gradient(circle at 90% 10%,rgba(139,92,246,.11),transparent 30rem),#06111f!important}
html[data-theme="dark-disabled"] body:before{background-image:linear-gradient(rgba(148,163,184,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.035) 1px,transparent 1px)}
html[data-theme="dark-disabled"] .nav{background:rgba(6,17,31,.72)!important;border-color:rgba(148,163,184,.12)!important}
html[data-theme="dark-disabled"] .menu{background:rgba(8,20,35,.94)!important;border-color:#1b3850!important}
html[data-theme="dark-disabled"] .card,html[data-theme="dark-disabled"] .panel,html[data-theme="dark-disabled"] .service-card,html[data-theme="dark-disabled"] .feature-card,html[data-theme="dark-disabled"] .stat-card,html[data-theme="dark-disabled"] .fraud-card,html[data-theme="dark-disabled"] .portal-brand-card{background:rgba(10,25,42,.82)!important;border-color:rgba(148,163,184,.13)!important}
html[data-theme="dark-disabled"] .page-hero,html[data-theme="dark-disabled"] .hero{background:linear-gradient(135deg,#06111f,#0a1b2c 55%,#081522)!important}
html[data-theme="dark-disabled"] h1,html[data-theme="dark-disabled"] h2,html[data-theme="dark-disabled"] h3,html[data-theme="dark-disabled"] h4{color:#f2faff}
html[data-theme="dark-disabled"] .sub,html[data-theme="dark-disabled"] p{color:#a9c0cf}
html[data-theme="dark-disabled"] .footer{background:#030b14!important}
html[data-theme="dark-disabled"] .theme-toggle,html[data-theme="dark-disabled"] .hamb{background:#0b1a2b!important;color:#fff!important;border-color:#23445c!important}

body{opacity:1;transition:opacity .18s ease}
body.page-leaving{opacity:.82}
.asset-missing{visibility:hidden}
.tcw-depth{will-change:transform}

/* =========================================================
   TCW FINAL POLISH — LIGHT ONLY / ULTRA-SMOOTH
   ========================================================= */
html, body { color-scheme: light !important; }
@media (prefers-color-scheme: never) { html, body { color-scheme: light !important; } }
/* Never let OS dark mode alter the palette. */
@media (prefers-color-scheme: never) {
  :root { --bg:#f6f9fc; --bg-2:#fff; --bg-3:#edf6fb; --card:#fff; --card-solid:#fff; --line:#dbe7ef; --line-strong:#b9d2df; --text:#0a1c2a; --text-2:#294355; --muted:#647b8b; --blue:#075985; --blue-2:#0284c7; --blue-3:#38bdf8; --cyan:#0891b2; --success:#16803c; }
  .footer { background:#f4f9fc !important; color:#294355 !important; }
  .footer a { color:#28627d !important; }
  .footer p,.footer span { color:#647b8b !important; }
}
/* Fully rounded, floating navigation shell. */
.nav { padding:14px 0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; }
.nav-inner { min-height:66px; padding:8px 14px 8px 10px; border:1px solid rgba(7,89,133,.12); border-radius:999px; background:rgba(255,255,255,.96); box-shadow:0 10px 34px rgba(8,58,88,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.nav.scrolled { padding:10px 0 !important; }
.nav.scrolled .nav-inner { box-shadow:0 14px 42px rgba(8,58,88,.12); }
.brand img { width:48px !important; height:48px !important; border-radius:50% !important; }
.brand-name { font-size:12px !important; letter-spacing:.1em !important; }
.menu { gap:4px !important; padding:4px; border-radius:999px; }
.menu a { padding:10px 13px !important; border-radius:999px !important; }
.menu a::after { display:none !important; }
.menu a:hover,.menu a.active { background:#edf8fd !important; color:#075985 !important; }
.nav .btn { border-radius:999px !important; padding:11px 17px !important; }
.hamb { border-radius:50% !important; }
/* Remove all intentional page-to-page fade/blink behaviour. */
.page-leaving { opacity:1 !important; }
/* Light footer — no dark strip at the bottom. */
.footer { background:linear-gradient(180deg,#f7fbfd,#edf7fb) !important; color:#294355 !important; border-top:1px solid #dbe7ef !important; }
.footer a { color:#28627d !important; }
.footer p,.footer span { color:#647b8b !important; }
.footer h4 { color:#0a1c2a !important; }
.footer-bottom { border-top:1px solid #dbe7ef !important; }
/* Stable reveal: no invisible content if the browser is slow. */
.reveal { opacity:1; transform:none; }
.tcw-ready .reveal { opacity:1; transform:none; }
/* Softer, cheaper hover effects for buttery scrolling. */
.card,.panel,.service-card,.feature-card,.stat-card,.tcw-poster { will-change:auto !important; }
.card:hover,.panel:hover,.service-card:hover,.feature-card:hover { transform:translateY(-3px); }
/* Center media ring. */
.logo-core { overflow:hidden; isolation:isolate; }
.logo-core .core-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; z-index:1; display:block; }
.logo-core .core-video-overlay { position:absolute; inset:0; border-radius:50%; z-index:2; background:radial-gradient(circle at 50% 45%,transparent 45%,rgba(255,255,255,.12) 72%,rgba(2,132,199,.12) 100%); pointer-events:none; }
.logo-core .core-logo-fallback { position:relative; z-index:3; width:150px !important; height:150px !important; object-fit:contain !important; border-radius:50% !important; background:rgba(255,255,255,.82); padding:8px; box-shadow:0 12px 34px rgba(8,58,88,.15); }
.logo-core.has-video .core-logo-fallback { display:none; }
@media(max-width:980px){ .nav-inner{border-radius:26px !important;padding:8px 10px !important}.menu{border-radius:24px !important;top:calc(100% + 8px) !important}.menu a{border-radius:14px !important}.menu a:hover,.menu a.active{background:#edf8fd !important} }
@media(max-width:640px){ .nav{padding:9px 0 !important}.nav-inner{min-height:60px}.brand img{width:42px !important;height:42px !important}.brand-name{font-size:10px !important}.logo-core{width:220px;height:220px}.logo-core .core-logo-fallback{width:128px !important;height:128px !important} }

/* FINAL FOOTER LIGHT-MODE VISIBILITY FIX */
.footer{background:linear-gradient(180deg,var(--bg-3),var(--bg-2)) !important;color:var(--text) !important;display:block !important;visibility:visible !important;opacity:1 !important;}
.footer-grid{display:grid !important;}
.footer-grid > div{min-width:0;}
.footer-grid > div:not(.footer-brand-col){display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.footer-grid > div:not(.footer-brand-col) a{display:block !important;visibility:visible !important;opacity:1 !important;}
.footer h4,.footer p,.footer a,.footer strong,.footer small,.footer span{color:var(--text);} .footer a{color:var(--muted);}
.footer a:hover{color:var(--blue);}


/* =========================================================
   TCW FINAL LIGHT-ONLY OVERRIDE
   The website never follows the operating-system dark mode.
   ========================================================= */
html,
html[data-theme="dark-disabled"],
html[data-theme="light"] {
  color-scheme: light !important;
  background: #ffffff !important;
}

html body,
html[data-theme="dark-disabled"] body,
html[data-theme="light"] body {
  color-scheme: light !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.12), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(14,165,233,.08), transparent 26%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 72%) !important;
  color: #082033 !important;
}

/* Keep the whole visual system light even when an earlier dark selector wins. */
html[data-theme="dark-disabled"] .nav,
html:not([data-theme]) .nav {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(2,132,199,.14) !important;
}
html[data-theme="dark-disabled"] .menu,
html:not([data-theme]) .menu {
  background: #ffffff !important;
  border-color: #dbe7ef !important;
}
html[data-theme="dark-disabled"] .menu a,
html:not([data-theme]) .menu a {
  color: #173d57 !important;
}
html[data-theme="dark-disabled"] .menu a:hover,
html[data-theme="dark-disabled"] .menu a.active,
html:not([data-theme]) .menu a:hover,
html:not([data-theme]) .menu a.active {
  background: #edf8fd !important;
  color: #075985 !important;
}

html[data-theme="dark-disabled"] .hero,
html[data-theme="dark-disabled"] .page-hero,
html:not([data-theme]) .hero,
html:not([data-theme]) .page-hero {
  background: linear-gradient(135deg, #ffffff, #f7fbff 55%, #eef8fd) !important;
}

html[data-theme="dark-disabled"] .card,
html[data-theme="dark-disabled"] .panel,
html[data-theme="dark-disabled"] .service-card,
html[data-theme="dark-disabled"] .feature-card,
html[data-theme="dark-disabled"] .stat-card,
html[data-theme="dark-disabled"] .fraud-card,
html[data-theme="dark-disabled"] .portal-brand-card,
html:not([data-theme]) .card,
html:not([data-theme]) .panel,
html:not([data-theme]) .service-card,
html:not([data-theme]) .feature-card,
html:not([data-theme]) .stat-card,
html:not([data-theme]) .fraud-card,
html:not([data-theme]) .portal-brand-card {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(2,132,199,.15) !important;
  color: #082033 !important;
}

html[data-theme="dark-disabled"] h1,
html[data-theme="dark-disabled"] h2,
html[data-theme="dark-disabled"] h3,
html[data-theme="dark-disabled"] h4,
html:not([data-theme]) h1,
html:not([data-theme]) h2,
html:not([data-theme]) h3,
html:not([data-theme]) h4 {
  color: #082033 !important;
}
html[data-theme="dark-disabled"] p,
html[data-theme="dark-disabled"] .sub,
html:not([data-theme]) p,
html:not([data-theme]) .sub {
  color: #60788a !important;
}

html[data-theme="dark-disabled"] input,
html[data-theme="dark-disabled"] textarea,
html[data-theme="dark-disabled"] select,
html:not([data-theme]) input,
html:not([data-theme]) textarea,
html:not([data-theme]) select {
  background: #ffffff !important;
  color: #0a1c2a !important;
  border-color: #cbdde7 !important;
}

html[data-theme="dark-disabled"] .footer,
html:not([data-theme]) .footer {
  background: #f3f9fc !important;
  color: #173d57 !important;
  border-top: 1px solid #dbe7ef !important;
}
html[data-theme="dark-disabled"] .footer a,
html:not([data-theme]) .footer a {
  color: #075985 !important;
}
html[data-theme="dark-disabled"] .footer p,
html[data-theme="dark-disabled"] .footer span,
html:not([data-theme]) .footer p,
html:not([data-theme]) .footer span {
  color: #60788a !important;
}

/* Never show a dark mobile menu, modal, or utility control. */
html[data-theme="dark-disabled"] .mobile-menu,
html[data-theme="dark-disabled"] .hamb,
html[data-theme="dark-disabled"] .theme-toggle,
html:not([data-theme]) .mobile-menu,
html:not([data-theme]) .hamb,
html:not([data-theme]) .theme-toggle {
  background: #ffffff !important;
  color: #075985 !important;
  border-color: #cbdde7 !important;
}

/* OS dark-mode media query cannot change the palette. */
@media (prefers-color-scheme: never) {
  html, body {
    color-scheme: light !important;
    background-color: #ffffff !important;
  }
}


/* =========================================================
   TCW HARD LIGHT + PERFORMANCE CONTRACT
   Never inherit OS/browser dark mode. Never switch palette.
   ========================================================= */
:root,
html[data-theme="dark"],
html[data-theme="light"],
html[data-theme="dark-disabled"] {
  color-scheme: light !important;
  --bg:#f5fbff !important;
  --bg-2:#ffffff !important;
  --bg-3:#eef9ff !important;
  --card:rgba(255,255,255,.96) !important;
  --card-solid:#ffffff !important;
  --line:rgba(14,165,233,.16) !important;
  --line-strong:rgba(14,165,233,.34) !important;
  --text:#071a2b !important;
  --text-2:#18344d !important;
  --muted:#60788d !important;
  --blue:#0284c7 !important;
  --blue-2:#0ea5e9 !important;
  --blue-3:#38bdf8 !important;
  --cyan:#06b6d4 !important;
  --white:#ffffff !important;
}
html, body { background:#fff !important; color:#071a2b !important; color-scheme:light !important; }
body { background:
  radial-gradient(circle at 12% 0%,rgba(56,189,248,.10),transparent 28%),
  radial-gradient(circle at 90% 8%,rgba(14,165,233,.07),transparent 26%),
  linear-gradient(180deg,#f7fbff 0%,#fff 72%) !important; }
.hero,.page-hero,.portal-hero,.premium-systems,.tcw-poster-wall,.fraud-hub,.tcw-trust-section,.section,
.section-alt,.contact-section,.services-section,.cloud-section,.datacenter-section,.leadership-section,
.college-section,.journey-section { background-color:transparent !important; color:#071a2b !important; }
.card,.panel,.service-card,.feature-card,.stat-card,.fraud-card,.portal-brand-card,.tcw-trust>div,
.tcw-poster,.company-location,.contact-card,.form-card { background:#fff !important; color:#071a2b !important; }
.footer { background:linear-gradient(180deg,#f7fbfd,#edf7fb) !important; color:#294355 !important; }
.footer h1,.footer h2,.footer h3,.footer h4,.footer strong { color:#0a1c2a !important; }
.footer p,.footer span { color:#647b8b !important; }
.footer a { color:#28627d !important; }
.skip-link { background:#075985 !important; color:#fff !important; }
.hero-media-overlay { background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.70) 45%,rgba(255,255,255,.12) 100%) !important; }
@media (prefers-color-scheme:never) {
  :root { color-scheme:light !important; }
  html,body { background:#fff !important; color:#071a2b !important; }
  .hero,.page-hero,.portal-hero { background:linear-gradient(135deg,#fff,#f7fbff 55%,#eef8fd) !important; }
}
@media (max-width:900px), (pointer:coarse) {
  #particles { display:none !important; }
  .card,.panel,.service-card,.feature-card,.stat-card,.tcw-poster { transition:none !important; }
}
@media (min-width:901px) {
  main > section:not(.hero):not(.page-hero):not(.portal-hero) { content-visibility:auto; contain-intrinsic-size:700px; }
}
img { content-visibility:auto; }


/* =========================================================
   TCW PAGE TRANSITION — CLEAN PREMIUM PORTAL
   No scan lines, grid lines or text caret.
   ========================================================= */
@keyframes tcwPageIn {
  from { opacity: 0; transform: translateY(12px) scale(.995); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
body { animation: tcwPageIn .62s cubic-bezier(.22,1,.36,1) both; }

.tcw-transition {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.18) 0, rgba(4,24,40,.97) 32%, rgba(2,12,22,1) 76%);
  transition: opacity .36s ease;
}
.tcw-transition.active { opacity: 1; pointer-events: all; }

.tcw-transition-glow {
  position: absolute; width: 28vmin; height: 28vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(125,211,252,.95) 0, rgba(34,211,238,.32) 28%, rgba(34,211,238,0) 72%);
  filter: blur(2px);
  transform: scale(.35);
  opacity: 0;
}
.tcw-transition.active .tcw-transition-glow {
  opacity: 1;
  animation: tcwPortalGlow .72s cubic-bezier(.22,1,.36,1) forwards;
}
.tcw-transition-bloom {
  position: absolute; width: 14vmin; height: 14vmin; border-radius: 50%;
  box-shadow: 0 0 90px 35px rgba(34,211,238,.22), 0 0 180px 70px rgba(124,58,237,.16);
  transform: scale(.2);
  opacity: 0;
}
.tcw-transition.active .tcw-transition-bloom {
  animation: tcwPortalBloom .72s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes tcwPortalGlow {
  0% { transform: scale(.35); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(5.8); opacity: 0; }
}
@keyframes tcwPortalBloom {
  0% { transform: scale(.2); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: scale(9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .tcw-char { animation: none !important; opacity: 1; transform: none; filter: none; }
  .tcw-transition, .tcw-transition-glow, .tcw-transition-bloom { transition: none !important; animation: none !important; }
}



/* =========================================================
   NAVBAR FIX: Keep navigation visible while scrolling
   ========================================================= */
header.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 5000 !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Do not let scroll-state styling move the navbar */
header.nav.scrolled {
  top: 0 !important;
  transform: none !important;
}

/* Keep the page content below the fixed navigation */
body {
  scroll-padding-top: 90px;
}

/* =========================================================
   FORCE-STICKY NAVIGATION — FINAL OVERRIDE
   Keeps the main navigation visible while the page scrolls.
   ========================================================= */
html body > header.nav,
body > header.nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483647 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Prevent any page-level animation/transform from affecting the fixed header. */
header.nav,
header.nav * {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

/* Give page content a safe scroll offset without moving the fixed nav. */
html {
    scroll-padding-top: 96px;
}


/* =========================================================
   TCW PRODUCTION STABILITY PATCH — NAV + SCROLL
   ========================================================= */
:root{
  --tcw-nav-height: 82px;
  --tcw-nav-height-mobile: 74px;
}
html{
  scroll-padding-top: var(--tcw-nav-height);
  overflow-x: clip;
}
body{
  overflow-x: clip;
  /* Avoid compositing the whole document; fixed navigation stays viewport-bound. */
  animation: none !important;
}
header.nav,
html body > header.nav{
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: var(--tcw-nav-height) !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
  transform: translate3d(0,0,0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  isolation: isolate !important;
  will-change: transform;
}
header.nav .nav-inner{
  min-height: var(--tcw-nav-height) !important;
}
header.nav.scrolled,
header.nav.scrolled .nav-inner{
  transform: none !important;
}
header.nav.scrolled{
  min-height: var(--tcw-nav-height) !important;
}
/* Keep all navigation controls clickable above page effects. */
header.nav a,
header.nav button{
  position: relative;
  z-index: 2;
}
/* Prevent mobile menu from being clipped by the header. */
@media (max-width:980px){
  :root{--tcw-nav-height:74px}
  html{scroll-padding-top:var(--tcw-nav-height)}
  header.nav{min-height:var(--tcw-nav-height) !important}
  header.nav .nav-inner{min-height:60px !important}
  header.nav .menu{
    z-index: 2147483646 !important;
  }
}
/* Safe anchor positioning for sections reached by hash links. */
[id]{scroll-margin-top:calc(var(--tcw-nav-height) + 14px)}
@media (prefers-reduced-motion:reduce){
  header.nav{will-change:auto}
}

/* =========================================================
   TCW 2026 CROSS-DEVICE NAV + PAGE TRANSITION HARDENING
   ========================================================= */
:root { --tcw-nav-height: 82px; }

/* Native cross-document transitions where supported (Chrome/Edge and
   modern Safari). Older browsers simply ignore this rule. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: tcw-doc-out .28s cubic-bezier(.22,1,.36,1) both;
}
::view-transition-new(root) {
  animation: tcw-doc-in .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tcw-doc-out {
  to { opacity: 0; transform: translateY(-10px) scale(.992); filter: blur(2px); }
}
@keyframes tcw-doc-in {
  from { opacity: 0; transform: translateY(18px) scale(.992); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Keep the fixed header outside the document snapshot so it never jumps
   during a page transition or scroll restoration. */
header.nav { view-transition-name: none !important; }

/* Old-browser fallback transition overlay. */
.tcw-transition { transition: opacity .26s ease !important; }
.tcw-transition.active { opacity: 1 !important; }
.tcw-transition-glow { width: 24vmin; height: 24vmin; }

/* Brand logo: use the tightly cropped transparent artwork so it stays sharp
   and visually fills the compact navbar on small screens. */
header.nav .brand img {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 2px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(7,89,133,.12) !important;
}

/* Touch-safe mobile controls and stable viewport behavior. */
header.nav .hamb {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
}
@media (max-width: 640px) {
  :root { --tcw-nav-height: 74px; }
  header.nav { padding: 8px 0 !important; }
  header.nav .nav-inner {
    min-height: 58px !important;
    padding: 7px 9px !important;
    gap: 7px !important;
  }
  header.nav .brand { gap: 8px !important; max-width: calc(100% - 54px); }
  header.nav .brand img {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }
  header.nav .brand-name {
    font-size: 9px !important;
    letter-spacing: .075em !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header.nav .hamb { width: 44px !important; min-width: 44px !important; height: 44px !important; }
}

/* Prevent accidental horizontal overflow on narrow/older mobile browsers. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* Do not animate the whole page on top of native View Transitions. */
@media (prefers-reduced-motion: no-preference) {
  html.tcw-vt-supported body { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .tcw-transition, .tcw-transition-glow, .tcw-transition-bloom { display:none !important; }
}


/* =========================================================
   TCW MOBILE / SMALL-SCREEN HARDENING — 2026
   Final late overrides for compact phones, iOS Safari and
   older Android browsers. Keep layout fluid; never force a
   fixed desktop-width child into a phone viewport.
   ========================================================= */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-x: none;
}
body {
  min-width: 0;
  width: 100%;
  -webkit-tap-highlight-color: rgba(2,132,199,.12);
}

/* Safe-area aware fixed header. */
header.nav {
  padding-top: max(8px, env(safe-area-inset-top)) !important;
}
header.nav .nav-inner {
  width: min(var(--max), calc(100% - 24px));
  max-width: 100%;
}

/* Compact logo is deliberately the shield mark; company name remains text. */
header.nav .brand img {
  object-fit: contain !important;
  background: #fff !important;
  padding: 2px !important;
  border-radius: 11px !important;
}

/* Never allow long labels/URLs to create horizontal scrolling. */
body :where(h1,h2,h3,h4,h5,h6,p,a,span,li,td,th,button,label) {
  overflow-wrap: anywhere;
  word-break: normal;
}

img, video, canvas, iframe, svg {
  max-width: 100%;
}

@media (max-width: 640px) {
  :root { --tcw-nav-height: 72px; }
  html { scroll-padding-top: calc(var(--tcw-nav-height) + 6px); }
  .container { width: calc(100% - 24px) !important; }
  header.nav { padding-bottom: 6px !important; }
  header.nav .nav-inner {
    min-height: 58px !important;
    padding: 6px 8px !important;
    gap: 7px !important;
    border-radius: 18px !important;
  }
  header.nav .brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: 8px !important;
  }
  header.nav .brand img {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }
  header.nav .brand-name {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(9px, 2.8vw, 12px) !important;
    line-height: 1.05 !important;
    letter-spacing: .02em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header.nav .hamb {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  header.nav .menu {
    top: calc(100% + 6px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100svh - 86px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
    border-radius: 18px !important;
  }
  header.nav .menu a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  header.nav .menu .nav-cta { width: 100%; margin-top: 4px; }

  .hero, .premium-hero { min-height: 100svh; min-height: 100dvh; }
  .hero { padding-top: calc(var(--tcw-nav-height) + 34px) !important; }
  .page-hero { padding-top: calc(var(--tcw-nav-height) + 34px) !important; }
  .hero-grid { min-width: 0 !important; }
  .hero-content, .hero-copy { min-width: 0; }
  .hero-copy h1, .hero h1, .page-hero h1 {
    max-width: 100%;
    font-size: clamp(30px, 9.2vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.025em;
  }
  .hero-copy p, .hero p, .lead {
    max-width: 100%;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
  .actions, .hero-actions {
    width: 100%;
    gap: 10px !important;
  }
  .actions .btn, .hero-actions .btn { width: 100%; min-height: 48px; }

  .hero-visual {
    min-height: min(330px, 82vw) !important;
    height: auto !important;
    margin-top: 6px;
  }
  .orbit {
    width: min(78vw, 300px) !important;
    height: min(78vw, 300px) !important;
  }
  .logo-core {
    width: min(56vw, 210px) !important;
    height: min(56vw, 210px) !important;
  }
  .logo-core img,
  .logo-core .core-logo-fallback {
    width: 68% !important;
    height: 68% !important;
    object-fit: contain !important;
  }
  .float-card { max-width: 42vw; }

  .section { padding: 64px 0 !important; }
  .section-head { margin-bottom: 24px !important; }
  .section-head h2 { font-size: clamp(26px, 7.5vw, 38px) !important; }
  .card, .panel, .cta { padding: 20px !important; border-radius: 18px !important; }
  .card h3 { font-size: 18px; }
  .card p, .checks div { font-size: 14px; line-height: 1.65; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat { padding: 18px 8px !important; }
  .stat strong { font-size: 26px !important; }
  .stat span { font-size: 9px !important; }

  /* Prevent fixed-height media blocks from cropping content on short phones. */
  .person-photo, .founder-main-photo { max-height: 420px; }
  .location-map, .location-map iframe,
  .company-location .location-map,
  .company-location .location-map iframe { height: min(280px, 72vw) !important; min-height: 220px !important; }

  .footer { padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important; }
  .backtop { right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 390px) {
  .container { width: calc(100% - 18px) !important; }
  header.nav .nav-inner { padding-inline: 6px !important; }
  header.nav .brand img { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  header.nav .brand-name { font-size: 9px !important; }
  header.nav .hamb { width: 42px !important; min-width: 42px !important; height: 42px !important; }
  header.nav .menu { left: 9px !important; right: 9px !important; }
  .hero, .premium-hero { min-height: auto; }
  .hero { padding-top: calc(var(--tcw-nav-height) + 24px) !important; padding-bottom: 56px !important; }
  .hero-copy h1, .hero h1, .page-hero h1 { font-size: clamp(28px, 9.5vw, 38px) !important; }
  .lead, .hero-copy p, .hero p { font-size: 14px !important; }
  .hero-visual { min-height: 250px !important; }
  .float-card { padding: 7px 9px !important; font-size: 9px !important; }
  .card, .panel, .cta { padding: 17px !important; }
  .btn { padding-inline: 16px !important; }
}

@media (max-width: 340px) {
  .container { width: calc(100% - 14px) !important; }
  header.nav .brand-name { font-size: 8.5px !important; }
  .hero-copy h1, .hero h1, .page-hero h1 { font-size: 28px !important; }
  .section-head h2 { font-size: 25px !important; }
  .stats { grid-template-columns: 1fr !important; }
  .stat { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .actions .btn, .hero-actions .btn { min-height: 46px; }
}

/* Old browsers: fall back from newer overflow values without changing layout. */
@supports not (min-height: 100svh) {
  .hero, .premium-hero { min-height: 100vh; }
  header.nav .menu { max-height: calc(100vh - 86px); }
}

/* Reduce expensive effects on low-power/touch devices. */
@media (pointer: coarse), (max-width: 900px) {
  .card:hover, .panel:hover, .service-card:hover, .feature-card:hover { transform: none !important; }
  .brand:hover img { transform: none !important; }
  .btn:hover { transform: none !important; }
  .card::before { display: none; }
  .backdrop-filter, [style*="backdrop-filter"] { -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   TCW LOGO + BRAND POLISH — FINAL
   ========================================================= */
header.nav .brand,
.footer .brand {
  display:flex;
  align-items:center;
  min-width:0;
  flex:0 1 auto;
}

header.nav .brand img,
.footer .brand img {
  width:48px !important;
  height:48px !important;
  flex:0 0 48px !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 5px 12px rgba(2,132,199,.18));
}

header.nav .brand:hover img,
.footer .brand:hover img {
  transform:none !important;
  filter:drop-shadow(0 7px 16px rgba(2,132,199,.28));
}

header.nav .brand-name,
.footer .brand-name {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.footer .brand img {
  width:56px !important;
  height:56px !important;
  flex-basis:56px !important;
}

/* Keep the logo visually balanced inside the home-page center media. */
.logo-core .core-logo-fallback {
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 22px rgba(2,132,199,.20));
}

@media (max-width:640px) {
  header.nav .brand img {
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }
  header.nav .brand-name {
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.035em !important;
  }
  .footer .brand img {
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }
}

@media (max-width:390px) {
  header.nav .brand img {
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }
  header.nav .brand-name {
    font-size:9px !important;
    letter-spacing:.02em !important;
  }
}

@media (max-width:340px) {
  header.nav .brand img {
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
  header.nav .brand-name {
    font-size:8.5px !important;
  }
}


/* =========================================================
   TCW FINAL RESPONSIVE + CONTACT FIX — 2026
   Consistent navigation, footer contact details and enquiry
   layout across desktop, Android, iOS and compact phones.
   ========================================================= */

header.nav .nav-inner {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-width:0 !important;
}

header.nav .brand {
  min-width:0 !important;
  max-width:calc(100% - 500px) !important;
}

header.nav .brand-name {
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

header.nav .nav-cta {
  min-height:44px !important;
  height:44px !important;
  padding:0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  font-size:13px !important;
}

.footer-contact a {
  display:block;
  width:max-content;
  max-width:100%;
  overflow-wrap:anywhere;
}

.contact-direct {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.contact-direct-item {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:15px 16px;
  border:1px solid var(--line, rgba(15,54,86,.12));
  border-radius:14px;
  background:rgba(255,255,255,.72);
  text-decoration:none;
}

.contact-direct-label {
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.65;
}

.contact-direct-item strong {
  overflow-wrap:anywhere;
  font-size:clamp(13px,2vw,16px);
}

@media (max-width:980px) {
  header.nav .brand { max-width:calc(100% - 60px) !important; }
  header.nav .nav-cta {
    height:46px !important;
    min-height:46px !important;
    width:100% !important;
    margin-top:4px !important;
  }
}

@media (max-width:640px) {
  header.nav .brand { max-width:calc(100% - 52px) !important; }
  header.nav .nav-cta {
    min-height:48px !important;
    height:48px !important;
    font-size:14px !important;
  }
  .contact-direct {
    grid-template-columns:1fr;
    gap:10px;
  }
  .contact-direct-item {
    padding:14px;
  }
  .footer-contact a {
    line-height:1.6;
    margin-bottom:4px;
  }
}

@media (max-width:390px) {
  header.nav .brand { max-width:calc(100% - 48px) !important; }
  header.nav .nav-cta { font-size:13px !important; }
  .contact-direct-item strong { font-size:13px; }
}

@media (max-width:340px) {
  header.nav .brand { max-width:calc(100% - 46px) !important; }
  header.nav .nav-cta { font-size:12px !important; }
}

/* Make form controls reliable and touch-friendly on iOS/Android. */
#contactForm input,
#contactForm select,
#contactForm textarea,
#contactForm button {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  font:inherit;
}

#contactForm input,
#contactForm select {
  min-height:48px;
}

#contactForm textarea {
  min-height:140px;
  resize:vertical;
}

#contactForm button[type="submit"] {
  min-height:48px;
  cursor:pointer;
}

#contactForm button[type="submit"]:disabled {
  opacity:.65;
  cursor:wait;
}

.form-message.success { color:#087f5b !important; }
.form-message.error { color:#b42318 !important; }

/* =========================================================
   TCW NAVBAR CONSISTENCY + CROSS-DEVICE HARDENING — FINAL
   Keep the navigation and CTA visually consistent on every page.
   ========================================================= */
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body {
  overflow-x: hidden !important;
}

header.nav,
header.nav .nav-inner {
  box-sizing: border-box !important;
}

header.nav .nav-inner {
  min-height: 64px !important;
}

/* One stable CTA size on desktop and mobile; page-specific rules cannot shrink it. */
header.nav .nav-cta,
header.nav .menu > a.nav-cta {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 154px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Same nav link geometry on every page. */
header.nav .menu > a:not(.nav-cta) {
  box-sizing: border-box !important;
  min-height: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Mobile dropdown: preserve the same button size, but fit narrow screens. */
@media (max-width: 980px) {
  header.nav .nav-inner {
    min-height: 58px !important;
  }

  header.nav .menu > a:not(.nav-cta) {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  header.nav .menu > a.nav-cta {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin-top: 4px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 640px) {
  header.nav .nav-inner {
    min-height: 56px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  header.nav .brand img {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  header.nav .brand-name {
    font-size: 10px !important;
    letter-spacing: .03em !important;
  }

  header.nav .menu > a:not(.nav-cta) {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  header.nav .menu > a.nav-cta {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 390px) {
  header.nav .nav-inner {
    min-height: 54px !important;
  }

  header.nav .brand img {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  header.nav .brand-name {
    font-size: 9px !important;
  }

  header.nav .menu > a:not(.nav-cta),
  header.nav .menu > a.nav-cta {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 340px) {
  header.nav .brand img {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  header.nav .brand-name {
    font-size: 8.5px !important;
  }

  header.nav .menu > a:not(.nav-cta),
  header.nav .menu > a.nav-cta {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }
}

/* Prevent iOS form zoom and keep controls visually stable. */
input, select, textarea, button {
  -webkit-text-size-adjust: 100% !important;
}

@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* =========================================================
   FINAL MOBILE MENU BUTTON NORMALIZATION
   The home page used .hamb-lines while secondary pages used a
   Unicode glyph (☰). Normalize every page to the exact same
   44x44 touch target and identical three-line icon.
   ========================================================= */
header.nav .hamb,
header.nav .hamb:hover,
header.nav .hamb:active,
header.nav .hamb:focus {
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 44px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
  transform: none !important;
  scale: 1 !important;
  zoom: 1 !important;
  -webkit-transform: none !important;
  border-radius: 50% !important;
}

header.nav .hamb .hamb-lines {
  width: 20px !important;
  height: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  flex: 0 0 20px !important;
  transform: none !important;
}

header.nav .hamb .hamb-lines i {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 2px !important;
  transform: none !important;
}

/* Keep the icon size identical on every phone width. */
@media (max-width: 390px) {
  header.nav .hamb,
  header.nav .hamb:hover,
  header.nav .hamb:active,
  header.nav .hamb:focus {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px !important;
  }
}
@media (max-width: 340px) {
  header.nav .hamb,
  header.nav .hamb:hover,
  header.nav .hamb:active,
  header.nav .hamb:focus {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px !important;
  }
}


/* =========================================================
   TCW FINAL BUTTON STABILITY + PREMIUM MICRO-ANIMATION
   Never resize the navbar CTA when scrolling, hovering or tapping.
   ========================================================= */
header.nav .nav-cta,
header.nav .nav-cta:hover,
header.nav .nav-cta:active,
header.nav .nav-cta:focus,
header.nav.scrolled .nav-cta,
header.nav.scrolled .nav-cta:hover,
header.nav.scrolled .nav-cta:active {
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  transform: none !important;
  scale: 1 !important;
  zoom: 1 !important;
  line-height: 1 !important;
  font-size: 13px !important;
  flex: 0 0 154px !important;
}
header.nav .nav-cta:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 14px 34px rgba(14,165,233,.30), 0 0 0 1px rgba(125,211,252,.15) inset !important;
}
header.nav .nav-cta:active {
  filter: brightness(.98) !important;
}
header.nav .nav-cta::after {
  content: "";
  position: absolute;
  inset: -40% -80%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.24) 50%, transparent 58%);
  transform: translateX(-55%);
  animation: tcw-nav-shine 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tcw-nav-shine {
  0%,62%,100% { transform: translateX(-55%); }
  78% { transform: translateX(55%); }
}

/* Page-to-page entrance animation, without changing navbar geometry. */
@keyframes tcw-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
main { animation: tcw-page-enter .42s cubic-bezier(.22,1,.36,1) both; }

/* Premium journey video block */


.tcw-video-card video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}
.tcw-video-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,14,27,.03),rgba(4,14,27,.48));
  pointer-events:none;
}

.tcw-social-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px;
  border:1px solid rgba(14,165,233,.15);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(239,248,255,.78));
  box-shadow:0 20px 60px rgba(5,25,45,.08);
}
.tcw-social-card .kicker { margin-bottom:8px; }
.tcw-social-card h3 { margin:0 0 10px; font-size:clamp(22px,3vw,32px); }
.tcw-social-card p { margin:0 0 18px; color:var(--muted); line-height:1.7; }
.tcw-social-slot {
  padding:14px 16px;
  border:1px dashed rgba(14,165,233,.32);
  border-radius:16px;
  background:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.55;
}
.tcw-social-slot strong { display:block; margin-bottom:4px; color:var(--text); }
@media (max-width: 980px) {
  header.nav .nav-cta,
  header.nav .nav-cta:hover,
  header.nav .nav-cta:active,
  header.nav.scrolled .nav-cta { width:100% !important; min-width:0 !important; max-width:none !important; flex:0 0 auto !important; }
  
  .tcw-video-card, .tcw-video-card video { min-height:320px; }
}
@media (max-width: 640px) {
  main { animation-duration:.32s; }
  
  .tcw-video-card, .tcw-video-card video { min-height:240px; }
  .tcw-social-card { padding:20px; border-radius:20px; }
}
@media (prefers-reduced-motion: reduce) {
  main { animation:none !important; }
  header.nav .nav-cta::after { animation:none !important; }
}


/* Instagram Reel embed - responsive */

.tcw-instagram-wrap .instagram-media{margin:0 auto!important;width:100%!important;max-width:540px!important;min-width:280px!important;}
.tcw-social-card{min-width:0;}
@media (max-width:600px){.tcw-instagram-wrap .instagram-media{min-width:280px!important;}}

/* =========================================================
   TCW FINAL NAV CONTROL + PREMIUM CTA ANIMATION
   Desktop: hamburger is hidden. Mobile/tablet: exact 44px control.
   CTA never changes size; animation uses opacity/position only.
   ========================================================= */
header.nav .hamb,
header.nav .hamb:hover,
header.nav .hamb:active,
header.nav .hamb:focus {
  display: none !important;
}

@media (max-width: 980px) {
  header.nav .hamb,
  header.nav .hamb:hover,
  header.nav .hamb:active,
  header.nav .hamb:focus {
    display: grid !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    transform: none !important;
    scale: 1 !important;
  }
}

/* Premium CTA: fixed geometry, no transform/scale animation. */
header.nav .nav-cta,
header.nav .nav-cta:hover,
header.nav .nav-cta:active,
header.nav .nav-cta:focus,
header.nav.scrolled .nav-cta,
header.nav.scrolled .nav-cta:hover,
header.nav.scrolled .nav-cta:active,
header.nav.scrolled .nav-cta:focus {
  position: relative !important;
  overflow: hidden !important;
  transform: none !important;
  scale: 1 !important;
  transition: box-shadow .28s ease, background-color .28s ease, border-color .28s ease, color .28s ease !important;
}

header.nav .nav-cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 32%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg) translateX(0);
  animation: tcw-cta-sweep 4.2s ease-in-out infinite;
}

header.nav .nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
  animation: tcw-cta-pulse 3.6s ease-in-out infinite;
}

header.nav .nav-cta > * {
  position: relative;
  z-index: 1;
}

header.nav .nav-cta:hover {
  box-shadow: 0 10px 28px rgba(0, 150, 255, .24) !important;
}

@keyframes tcw-cta-sweep {
  0%, 58% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  65% { opacity: 1; }
  82%, 100% { transform: skewX(-18deg) translateX(430%); opacity: 0; }
}

@keyframes tcw-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
  50% { box-shadow: 0 0 0 3px rgba(0, 210, 255, .08); }
}

@media (prefers-reduced-motion: reduce) {
  header.nav .nav-cta::before,
  header.nav .nav-cta::after { animation: none !important; }
}


/* =========================================================
   TCW FINAL NAV / BUTTON BUG FIX
   Native links are never blocked. All buttons keep their geometry while
   using visual-only animation effects.
   ========================================================= */
header.nav .nav-cta,
header.nav .nav-cta:hover,
header.nav .nav-cta:active,
header.nav .nav-cta:focus,
header.nav.scrolled .nav-cta,
header.nav.scrolled .nav-cta:hover,
header.nav.scrolled .nav-cta:active,
header.nav.scrolled .nav-cta:focus {
  box-sizing: border-box !important;
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  transform: none !important;
  scale: 1 !important;
  zoom: 1 !important;
  animation: tcw-button-breathe 3.8s ease-in-out infinite !important;
}

/* Visual-only shine: it never changes width/height or intercepts clicks. */
header.nav .nav-cta::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -55% !important;
  width: 38% !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
  transform: skewX(-18deg) translateX(0) !important;
  opacity: 0 !important;
  animation: tcw-button-shine 4.5s ease-in-out infinite !important;
}

header.nav .nav-cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 0 rgba(14,165,233,0) !important;
  animation: tcw-button-glow 3.8s ease-in-out infinite !important;
}

header.nav .nav-cta:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 12px 30px rgba(14,165,233,.28) !important;
}
header.nav .nav-cta:active { filter: brightness(.99) !important; }

/* Keep ordinary buttons responsive too, but never animate their size. */
.btn {
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

@keyframes tcw-button-shine {
  0%, 55%, 100% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  65% { opacity: .95; }
  82% { transform: skewX(-18deg) translateX(430%); opacity: 0; }
}
@keyframes tcw-button-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 0 rgba(14,165,233,0); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 3px rgba(14,165,233,.07); }
}
@keyframes tcw-button-breathe {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.025); }
}

/* Never show the transition overlay as an invisible click-blocking layer. */
.tcw-transition { display: none !important; pointer-events: none !important; }

/* Native page transition when supported; otherwise main/body entry animation
   handles the effect without touching navigation. */
@supports (view-transition-name: root) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: tcw-vt-out .20s ease both; }
  ::view-transition-new(root) { animation: tcw-vt-in .34s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes tcw-vt-out { to { opacity: 0; transform: scale(.998); } }
@keyframes tcw-vt-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  header.nav .nav-cta,
  header.nav .nav-cta:hover,
  header.nav .nav-cta:active,
  header.nav .nav-cta:focus,
  header.nav.scrolled .nav-cta,
  header.nav.scrolled .nav-cta:hover,
  header.nav.scrolled .nav-cta:active,
  header.nav.scrolled .nav-cta:focus {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  header.nav .nav-cta,
  header.nav .nav-cta::before,
  header.nav .nav-cta::after { animation: none !important; }
  .btn:hover, .btn:active { transform: none !important; }
}


/* =========================================================
   TCW FINAL MOBILE MENU HIT-AREA / CLICK FIX
   One reliable 44x44 touch target. The icon itself never steals clicks.
   ========================================================= */
header.nav { z-index: 10000 !important; }
header.nav .nav-inner { position: relative !important; z-index: 10001 !important; }
header.nav .hamb {
  position: relative !important;
  z-index: 10003 !important;
  isolation: isolate !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
header.nav .hamb .hamb-lines,
header.nav .hamb .hamb-lines i,
header.nav .hamb::before {
  pointer-events: none !important;
}
@media (max-width: 980px) {
  header.nav .menu {
    z-index: 10002 !important;
    pointer-events: none !important;
    top: calc(100% + 10px) !important;
    max-height: calc(100dvh - 90px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  header.nav .menu.open {
    pointer-events: auto !important;
  }
  header.nav .menu > a {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}
/* Prevent any page-entry animation from creating a click-blocking layer. */
main, .nav, .nav-inner, .menu, .hamb { isolation: auto; }


/* =========================================================
   TCW FINAL HAMBURGER — HARD 3-LINE RENDER
   Render the icon with CSS pseudo-elements so no browser/font/theme
   can hide the middle line. Stable 44x44 touch target.
   ========================================================= */
header.nav .hamb .hamb-lines {
  position: relative !important;
  width: 20px !important;
  height: 18px !important;
  display: block !important;
  flex: 0 0 20px !important;
  color: #075985 !important;
  background: none !important;
}
header.nav .hamb .hamb-lines i {
  display: none !important;
}
header.nav .hamb .hamb-lines::before,
header.nav .hamb .hamb-lines::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 20px !important;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
  transition: transform .24s ease, top .24s ease, opacity .2s ease !important;
  pointer-events: none !important;
}
header.nav .hamb .hamb-lines::before { top: 1px !important; box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor !important; }
header.nav .hamb .hamb-lines::after { display: none !important; }
header.nav .hamb[aria-expanded="true"] .hamb-lines::before {
  top: 8px !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
}
header.nav .hamb[aria-expanded="true"] .hamb-lines::after {
  display: block !important;
  top: 8px !important;
  transform: rotate(-45deg) !important;
}
header.nav .hamb[aria-expanded="true"] .hamb-lines { color: #075985 !important; }
@media (max-width: 980px) {
  header.nav .hamb,
  header.nav .hamb:hover,
  header.nav .hamb:active,
  header.nav .hamb:focus {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    transform: none !important;
    scale: 1 !important;
  }
}