/* =========================================================
   YXE WEB STUDIOS — SEO SERVICES
   Independent stylesheet | Blue edition
   The outer page never scrolls. Only .seo-right scrolls.
   ========================================================= */

:root {
    --navy: #030b13;
    --navy-mid: #071c2b;
    --navy-soft: #103348;
    --blue: #079ced;
    --blue-bright: #32b5ff;
    --blue-light: #dff3ff;
    --blue-pale: #eef8ff;
    --blue-ice: #cdeafc;
    --ink: #071927;
    --muted: #466477;
    --line: #bcd8e9;
    --header: 64px;
}

/* 01 — RESET & LOCKED APP SHELL */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.seo-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--navy);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.seo-page a { color: inherit; }
body.seo-page button,
body.seo-page input,
body.seo-page textarea { font: inherit; }
body.seo-page button { cursor: pointer; }

.seo-skip {
    position: fixed;
    top: -90px;
    left: 12px;
    z-index: 2000;
    padding: 12px 16px;
    background: #fff;
    color: var(--ink);
}

.seo-skip:focus { top: 12px; }

/* 02 — YXE HEADER */
.site-header {
    position: relative;
    z-index: 1000;
    flex: 0 0 var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: var(--header);
    padding: 0 clamp(20px, 2vw, 38px);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: #020b12;
    color: #fff;
}

.site-header .brand {
    display: flex;
    align-items: center;
    max-width: 215px;
    flex-shrink: 0;
}

.site-header .brand img {
    width: clamp(145px, 10vw, 215px);
    height: auto;
    max-height: 49px;
    object-fit: contain;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: clamp(15px, 2vw, 37px);
    height: 100%;
}

.site-header nav > a:not(.header-cta),
.site-header .nav-dropdown-toggle {
    color: #eef4f9;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-header nav > a:hover,
.site-header .nav-dropdown-toggle:hover { color: var(--blue-bright); }

.site-header .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 14px 19px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 40px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.site-header .header-cta:hover { background: #fff; color: var(--navy); }

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border: 0;
    background: none;
}

.dropdown-arrow {
    font-size: 10px;
    letter-spacing: 0;
    transition: transform .25s;
}

.nav-dropdown.is-open .dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: -22px;
    min-width: 230px;
    padding: 10px;
    border: 1px solid #254359;
    border-radius: 0 0 12px 12px;
    background: #071725;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}

.nav-dropdown-menu a {
    display: block;
    padding: 14px 12px;
    border-radius: 5px;
    color: #e5f0fb;
    font-size: 12px;
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="page"] {
    background: #102d43;
    color: #59c5ff;
}

.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.seo-mobile-nav { display: none; }

/* 03 — FIXED SPLIT FRAME */
.seo-split {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 52% minmax(0, 48%);
    height: auto;
    min-height: 0;
    overflow: hidden;
}

/* 04 — LEFT: BLUE TYPOGRAPHIC SCENE */
.seo-left {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(140deg, #0864aa 0%, #087fd0 46%, #15a3ee 100%);
    color: #fff;
}

.seo-left::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(130deg, transparent 30%, rgba(0, 17, 44, .12));
}

.seo-left-kicker {
    position: absolute;
    z-index: 2;
    top: clamp(25px, 4.2vw, 65px);
    left: clamp(18px, 3.2vw, 60px);
    right: clamp(18px, 3.2vw, 60px);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.seo-word-window {
    position: absolute;
    top: 17%;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 64%;
    overflow: hidden;
}

.seo-giant-word {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(190px, 26vw, 560px);
    font-weight: 900;
    letter-spacing: -.1em;
    line-height: .78;
    white-space: nowrap;
    transform: translate3d(4%, 0, 0);
    will-change: transform;
    user-select: none;
}

.seo-word-dot { color: #9ee5ff; }

.seo-left-bottom {
    position: absolute;
    z-index: 2;
    bottom: clamp(26px, 5vw, 68px);
    left: clamp(18px, 3.2vw, 60px);
    right: clamp(18px, 3.2vw, 60px);
}

.seo-side-number {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.seo-left-bottom p {
    margin: 18px 0 24px;
    font-size: clamp(19px, 2.1vw, 30px);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.seo-left-progress {
    width: min(260px, 70%);
    height: 2px;
    background: rgba(255, 255, 255, .28);
}

.seo-left-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #fff;
}

.seo-left-edge {
    position: absolute;
    right: 24px;
    bottom: 32px;
    writing-mode: vertical-rl;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

/* 05 — RIGHT: THE ONLY SCROLLING AREA */
.seo-right {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-color: #85b7d4 var(--blue-pale);
    scrollbar-width: thin;
    background: var(--blue-pale);
}

.seo-right:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -3px;
}

.seo-right-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 25px clamp(24px, 4vw, 80px) 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
}

.seo-block {
    min-height: 75vh;
    padding: clamp(65px, 7vw, 145px) clamp(24px, 4vw, 80px);
    border-bottom: 1px solid var(--line);
}

.seo-section-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(28px, 3.5vw, 65px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
}

.seo-asterisk { color: var(--blue); font-size: 28px; }

.seo-block h1,
.seo-block h2 {
    max-width: 950px;
    margin: 0 0 40px;
    font-size: clamp(54px, 5.3vw, 103px);
    font-weight: 800;
    letter-spacing: -.075em;
    line-height: .94;
}

.seo-block h1 em,
.seo-block h2 em {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -.065em;
}

.seo-block p {
    max-width: 660px;
    font-size: clamp(16px, 1.35vw, 22px);
    line-height: 1.55;
}

/* 06 — INTRO */
.seo-intro {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-top: clamp(80px, 8vw, 170px);
}

.seo-intro h1 { font-size: clamp(60px, 5.8vw, 116px); }
.seo-intro .seo-lead { margin-bottom: 40px; }

.seo-pill {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    max-width: 100%;
    padding: 17px 23px;
    border-radius: 45px;
    background: var(--navy-mid);
    color: #fff !important;
    font-size: 13px;
    text-decoration: none;
    transition: background .2s;
}

.seo-pill:hover { background: #076dab; }

.seo-intro-foot {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 70px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.seo-intro-foot span:last-child { font-size: 27px; }

/* 07 — SEARCH VISUAL */
.seo-feature h2,
.seo-services-list h2,
.seo-contact h2 { margin-top: 45px; }

.seo-visual {
    position: relative;
    width: 100%;
    min-height: 290px;
    overflow: hidden;
    border-radius: 14px;
}

.seo-visual-search {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: clamp(18px, 2.5vw, 40px);
    background: radial-gradient(circle at 80% 15%, #fff 0%, transparent 50%), var(--blue-ice);
}

.seo-search-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 22px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 9px 30px rgba(6, 81, 137, .14);
    font-size: 15px;
}

.seo-search-icon { font-size: 28px; }
.seo-search-key { margin-left: auto; }

.seo-search-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #f8fcff;
    box-shadow: 0 5px 17px rgba(6, 61, 104, .1);
}

.seo-search-result--active { background: #083e66; color: #fff; }
.seo-search-result span,
.seo-search-result small { font-size: 11px; letter-spacing: .06em; }
.seo-search-result strong { font-size: clamp(16px, 1.55vw, 24px); letter-spacing: -.03em; }

/* 08 — SERVICES INDEX */
.seo-services-list { background: #e0f1fc; }

.seo-service-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: 18px;
    padding: 26px 0;
    border-top: 1px solid #a9cee5;
}

.seo-service-row:last-child { border-bottom: 1px solid #a9cee5; }
.seo-service-row > span { font-size: 12px; font-weight: 700; }

.seo-service-row h3 {
    margin: 0 0 12px;
    font-size: clamp(25px, 2.3vw, 42px);
    letter-spacing: -.055em;
    line-height: 1.1;
}

.seo-service-row p { margin: 0; max-width: 560px; font-size: 15px; }

/* 09 — DATA / DARK CONTRAST */
.seo-feature-dark {
    border-color: #294b65;
    background: #061c2b;
    color: #fff;
}

.seo-feature-dark p { color: #d0e3ec; }

.seo-visual-chart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 370px;
    padding: 30px;
    background: #103348;
}

.seo-chart-label,
.seo-chart-disclaimer { font-size: 11px; letter-spacing: .16em; }

.seo-bars {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    width: 100%;
    max-width: 580px;
    height: 190px;
}

.seo-bars i { flex: 1; height: 22%; border-radius: 5px 5px 0 0; background: #49a9d8; }
.seo-bars i:nth-child(2) { height: 35%; background: #64c4eb; }
.seo-bars i:nth-child(3) { height: 31%; background: #3494c6; }
.seo-bars i:nth-child(4) { height: 48%; }
.seo-bars i:nth-child(5) { height: 46%; background: #64c4eb; }
.seo-bars i:nth-child(6) { height: 62%; }
.seo-bars i:nth-child(7) { height: 75%; }
.seo-bars i:nth-child(8) { height: 90%; background: #b3e8fe; }

/* 10 — FAQ */
.seo-questions { background: #d5ebfa; }
.seo-questions details { border-top: 1px solid #9fbfd3; }
.seo-questions details:last-child { border-bottom: 1px solid #9fbfd3; }

.seo-questions summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(17px, 1.5vw, 24px);
    font-weight: 600;
    letter-spacing: -.03em;
}

.seo-questions summary::-webkit-details-marker { display: none; }
.seo-questions summary span { font-size: 28px; font-weight: 300; }
.seo-questions details[open] summary span { transform: rotate(45deg); }
.seo-questions details p { margin: 0 0 26px; font-size: 16px; }

/* 11 — CONTACT FORM */
.seo-contact { background: #f4fbff; }
.seo-contact h2 { font-size: clamp(55px, 5.2vw, 97px); }
.seo-form { margin-top: 50px; }

.seo-form label {
    display: block;
    margin-bottom: 24px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.seo-form input,
.seo-form textarea {
    display: block;
    width: 100%;
    margin-top: 11px;
    padding: 13px 0 16px;
    border: 0;
    border-bottom: 1px solid #97b9ce;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 16px;
    letter-spacing: normal;
    text-transform: none;
}

.seo-form input:focus,
.seo-form textarea:focus { border-bottom: 2px solid var(--blue); }

.seo-fields-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.seo-submit {
    display: flex;
    align-items: center;
    gap: 45px;
    padding: 18px 25px;
    border: 0;
    border-radius: 50px;
    background: var(--navy-mid);
    color: #fff;
    font-size: 13px;
}

.seo-submit:hover { background: #086da9; }

.seo-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.seo-notice { margin: 20px 0; padding: 14px; border: 1px solid; }
.seo-notice-good { background: #e1ffed; color: #13653a; }
.seo-notice-error { background: #ffe4e6; color: #9c1721; }
.seo-direct { font-size: 14px !important; }
.seo-direct a { text-decoration: underline; }

.seo-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 28px clamp(24px, 4vw, 80px);
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    letter-spacing: .07em;
}

.seo-footer a { text-decoration: none; }

/* 12 — LAPTOPS */
@media (max-width: 1100px) {
    .site-header nav { gap: 17px; }
    .site-header .header-cta { gap: 9px; padding: 12px; }
    .seo-split { grid-template-columns: 48% minmax(0, 52%); }
    .seo-block h1,
    .seo-block h2 { font-size: clamp(48px, 5.4vw, 80px); }
    .seo-left-edge { display: none; }
}

/* 13 — MOBILE: BOTH SCENES STILL FIXED; RIGHT SIDE SCROLLS */
@media (max-width: 850px) {
    :root { --header: 65px; }

    .site-header { padding: 0 20px; }

    .seo-mobile-nav {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border: 1px solid #4d6576;
        border-radius: 25px;
        background: none;
        color: #fff;
        font-size: 12px;
    }

    .site-header nav {
        position: absolute;
        top: var(--header);
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        max-height: calc(100dvh - var(--header));
        overflow-y: auto;
        padding: 18px 22px 24px;
        background: #061521;
    }

    .site-header nav.is-open { display: flex; }
    .site-header nav > a:not(.header-cta),
    .site-header .nav-dropdown-toggle { padding: 15px 0; font-size: 12px; }

    .nav-dropdown { display: block; height: auto; }
    .nav-dropdown-toggle { width: 100%; justify-content: space-between; }

    .nav-dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        margin: 0 0 8px;
        padding: 4px 10px;
        border: 0;
        background: #102738;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
    .site-header .header-cta { justify-content: space-between; margin-top: 10px; }

    .seo-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(145px, 32%) minmax(0, 1fr);
    }

    .seo-left { height: 100%; }
    .seo-word-window { top: 8%; height: 68%; }
    .seo-left .seo-giant-word { font-size: clamp(145px, 25vw, 310px); }
    .seo-left-kicker { top: 14px; }
    .seo-left-bottom { bottom: 10px; }
    .seo-left-bottom p { max-width: 90%; margin: 6px 0 0; font-size: 14px; }
    .seo-left-progress,
    .seo-left-edge { display: none; }

    .seo-block { min-height: 0; padding: 75px 6vw; }
    .seo-intro { min-height: 0; }
    .seo-block h1,
    .seo-block h2 { font-size: clamp(52px, 9vw, 88px); }
    .seo-right-topline { padding: 25px 6vw 0; }
    .seo-footer { padding: 25px 6vw; }
}

@media (max-width: 500px) {
    .seo-split { grid-template-rows: minmax(125px, 27%) minmax(0, 1fr); }
    .seo-left-kicker { left: 20px; right: 20px; font-size: 9px; }
    .seo-word-window { top: 10%; height: 73%; }
    .seo-left .seo-giant-word { font-size: clamp(130px, 34vw, 200px); }
    .seo-left-bottom { bottom: 8px; left: 20px; }
    .seo-left-bottom p { display: none; }
    .seo-block { padding: 60px 22px; }
    .seo-block h1,
    .seo-block h2 { font-size: clamp(49px, 12vw, 67px); }
    .seo-right-topline { padding: 20px 22px 0; font-size: 9px; }
    .seo-right-topline span:last-child { display: none; }
    .seo-fields-two { grid-template-columns: 1fr; gap: 0; }
    .seo-search-result strong { font-size: 18px; }
    .seo-search-result { padding: 13px; }
    .seo-visual-search { padding: 16px; }
    .seo-service-row { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 8px; }
}

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

    .seo-giant-word { transform: translate3d(0, 0, 0) !important; }
}
/* =========================================================
   YXE WEB STUDIOS
   GLOBAL STICKY HEADER
   KEEP NAVIGATION VISIBLE AT ALL TIMES
========================================================= */

.site-header {
    position: fixed !important;

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

    width: 100%;
    z-index: 9999;

    /* Keep the original dark YXE header */
    background: rgba(3, 11, 19, 0.97);

    /* Subtle glass effect */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

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

/* Keep dropdown above the content */
.site-header .nav-dropdown-menu {
    z-index: 10000;
}

/* Make sure dropdowns aren't clipped */
.site-header,
.site-header nav {
    overflow: visible;
}