:root {
    --navy: #082b56;
    --navy-deep: #031f3d;
    --ink: #102744;
    --muted: #62748b;
    --line: #dde8f3;
    --soft: #f5f9fd;
    --white: #ffffff;
    --shadow: 0 18px 50px rgba(9, 52, 96, .10);
    --shadow-soft: 0 10px 28px rgba(9, 52, 96, .08);
}

* { box-sizing: border-box; }

html { scroll-padding-top: 100px; }

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    padding: 16px 0;
    background: rgba(248, 252, 255, .86);
    backdrop-filter: blur(16px);
    transition: .25s ease;
}
.site-header.is-scrolled {
    box-shadow: 0 8px 28px rgba(7, 46, 84, .08);
    border-bottom: 1px solid rgba(220, 233, 244, .9);
}
.nav-shell {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0 22px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(221,232,243,.9);
    box-shadow: 0 8px 30px rgba(9,52,96,.06);
    border-radius: 14px;
}
.brand { flex: 0 0 auto; }
.brand-logo { width: 176px; height: auto; }
.brand-logo-uploaded { max-width: 190px; max-height: 50px; object-fit: contain; }

.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-left: auto;
}
.desktop-nav a {
    position: relative;
    font-size: 14px;
    font-weight: 650;
    color: #1b3858;
}
.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -9px;
    height: 2px;
    background: var(--brand);
    transition: .2s ease;
}
.desktop-nav a:hover::after { left: 0; right: 0; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 750;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 25%, transparent);
}
.btn-outline {
    color: var(--brand-2);
    background: #fff;
    border-color: color-mix(in srgb, var(--brand) 45%, #dbe9f5);
}
.btn-white { background: #fff; color: var(--brand-2); }
.btn-dark { color: #fff; background: var(--navy-deep); }
.btn-nav { min-height: 42px; padding: 0 16px; }
.btn-nav svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 10px;
}
.menu-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    margin: 5px 0;
    border-radius: 99px;
}
.mobile-nav { display: none; }

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 54px 0 64px;
    background:
        radial-gradient(circle at 84% 25%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 24%),
        linear-gradient(180deg, #f8fbff, #fff);
}
.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 54px;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 800;
}
.eyebrow.light { color: #cbe8ff; }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid #d6e9fb;
    border-radius: 999px;
    background: #edf7ff;
    color: var(--brand-2);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-copy h1 {
    max-width: 680px;
    margin: 18px 0 16px;
    color: #082e5f;
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.hero-description {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}
.coming-message {
    max-width: 650px;
    margin: 14px 0 0;
    color: #3a5874;
    font-size: 15px;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.hero-mini-services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 28px;
}
.hero-mini-services span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #35536e;
    font-size: 13px;
    font-weight: 650;
}
.hero-mini-services i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}
.countdown {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.countdown > div {
    min-width: 76px;
    padding: 12px 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #dceaf6;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}
.countdown strong {
    display: block;
    color: var(--navy);
    font-size: 24px;
    line-height: 1;
}
.countdown span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.hero-visual {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.visual-arc {
    position: absolute;
    inset: 18px -70px 0 20px;
    border-radius: 50% 0 0 0;
    background: linear-gradient(135deg, #e8f4ff, color-mix(in srgb, var(--brand) 16%, #fff));
    transform: skewX(-5deg);
}
.hero-photo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 475px;
    object-fit: cover;
    object-position: center;
    border-radius: 180px 16px 16px 16px;
    box-shadow: 0 28px 60px rgba(7, 58, 109, .16);
}
.hero-illustration { padding: 24px 30px 0; background: linear-gradient(145deg, #e9f5ff, #fefefe); }
.floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    background: rgba(255,255,255,.94);
    border: 1px solid #dfeaf4;
    border-radius: 13px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}
.floating-card-a { left: -28px; bottom: 82px; }
.floating-card-b { right: -12px; top: 72px; }
.floating-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--brand);
    font-weight: 900;
}
.floating-card strong, .floating-card small { display: block; }
.floating-card strong { color: var(--navy); font-size: 13px; }
.floating-card small { color: var(--muted); font-size: 10px; }
.dot-pattern {
    position: absolute;
    z-index: 3;
    left: -42px;
    bottom: 14px;
    width: 120px;
    height: 76px;
    opacity: .7;
    background-image: radial-gradient(var(--brand) 1.4px, transparent 1.4px);
    background-size: 10px 10px;
}

.section { padding: 78px 0; }
.section-soft { background: var(--soft); }
.section-compact { padding: 34px 0; }
.section-heading { max-width: 760px; margin-bottom: 34px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.section-heading h2,
.about-copy h2 {
    margin: 7px 0 10px;
    color: var(--navy);
    font-size: clamp(30px, 3.3vw, 44px);
    line-height: 1.12;
    letter-spacing: -.035em;
}
.section-heading p { margin: 0; color: var(--muted); }
.split-heading {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
}
.text-link {
    color: var(--brand);
    font-weight: 800;
    white-space: nowrap;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.service-card {
    min-height: 236px;
    padding: 22px 16px;
    text-align: center;
    border: 1px solid #e2ebf4;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    transition: .25s ease;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #cfe2f4; }
.icon-bubble {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border-radius: 50%;
    color: var(--brand);
    background: #edf6ff;
}
.icon-bubble svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.service-card h3 { margin: 0 0 9px; color: var(--navy); font-size: 15px; }
.service-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.stats-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 24px;
    padding: 24px 10px;
    color: #fff;
    background: linear-gradient(110deg, #093f80, var(--brand), #0754a5);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(5, 68, 130, .22);
}
.stats-bar div { text-align: center; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.2); }
.stats-bar div:last-child { border-right: 0; }
.stats-bar strong { display: block; font-size: 31px; line-height: 1.1; }
.stats-bar span { font-size: 11px; opacity: .86; }

.about-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 70px;
    align-items: center;
}
.about-visual { position: relative; min-height: 460px; }
.building-card {
    width: 88%;
    height: 420px;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: var(--shadow);
    background: #dfefff;
}
.building-card img { width: 100%; height: 100%; object-fit: cover; }
.about-badge {
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 240px;
    padding: 22px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, var(--brand), #0a4fa7);
    box-shadow: 0 20px 42px rgba(3, 72, 144, .24);
}
.about-badge > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
}
.about-badge strong { display: block; font-size: 15px; line-height: 1.25; }
.about-badge small { display: block; margin-top: 9px; opacity: .82; }
.rich-copy { color: var(--muted); }
.rich-copy p { margin: 0 0 12px; }
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 28px;
    margin-top: 30px;
}
.benefit-grid > div { display: flex; gap: 13px; }
.mini-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--brand);
    background: #e9f4ff;
    font-weight: 900;
}
.benefit-grid strong { display: block; color: var(--navy); font-size: 14px; }
.benefit-grid p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-label {
    display: block;
    margin-bottom: 22px;
    text-align: center;
    color: var(--brand);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.partner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 38px;
}
.partner-logo img { max-width: 120px; max-height: 34px; filter: grayscale(1); opacity: .76; }
.partner-name {
    color: #526b84;
    font-weight: 800;
    font-size: 15px;
    opacity: .82;
}

.product-grid, .blog-grid, .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.product-card, .blog-card, .testimonial-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2ebf4;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    transition: .25s ease;
}
.product-card:hover, .blog-card:hover, .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-media, .blog-image {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: #edf6ff;
}
.product-media img, .blog-image img { width: 100%; height: 100%; object-fit: cover; }
.product-placeholder, .blog-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.9), transparent 25%),
        linear-gradient(145deg, #e1f2ff, #c9e6ff);
}
.product-placeholder span, .blog-placeholder span {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 24px;
    color: #fff;
    background: var(--brand);
    font-size: 30px;
    font-weight: 900;
    box-shadow: 0 16px 32px rgba(8,116,209,.22);
}
.product-placeholder.large { min-height: 420px; }
.featured-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.product-body, .blog-body { padding: 22px; }
.product-body h3, .product-body h2, .blog-body h3, .blog-body h2 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.25;
}
.product-body p, .blog-body p { color: var(--muted); font-size: 14px; }
.product-body a, .blog-body a {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 6px;
    color: var(--brand);
    font-weight: 800;
    font-size: 13px;
}
.price { display: block; margin: 12px 0; color: var(--navy); }
.section-action { margin-top: 30px; text-align: center; }

.testimonial-section { background: #fff; }
.testimonial-card { padding: 26px; }
.quote-mark { color: var(--brand); font-size: 54px; font-family: Georgia, serif; line-height: .75; }
.testimonial-card > p { min-height: 90px; color: #5f7187; font-size: 14px; }
.person { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.person img, .avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    object-fit: cover;
    border-radius: 50%;
}
.avatar { display: grid; place-items: center; background: #e6f3ff; color: var(--brand); font-weight: 850; }
.person strong, .person small { display: block; }
.person strong { color: var(--navy); font-size: 13px; }
.person small { color: var(--muted); font-size: 11px; }

.contact-section { padding-top: 40px; }
.contact-shell {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 40px;
    padding: 42px;
    color: #fff;
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 16%, rgba(76,176,255,.32), transparent 28%),
        linear-gradient(125deg, #07356b, var(--brand-2), var(--brand));
    box-shadow: 0 26px 60px rgba(4, 54, 106, .2);
}
.contact-copy h2 { margin: 8px 0 12px; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08; letter-spacing: -.035em; }
.contact-copy p { color: #dcecff; }
.contact-form {
    padding: 24px;
    color: var(--ink);
    background: rgba(255,255,255,.96);
    border-radius: 14px;
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid label { display: block; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; color: #3d5873; }
.form-grid input, .form-grid textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d7e4ef;
    border-radius: 8px;
    outline: none;
    background: #fff;
}
.form-grid input:focus, .form-grid textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.contact-form .btn { margin-top: 16px; }
.form-notice { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 12px; }
.form-notice.success { background: #eaf9ef; color: #24623c; }
.form-notice.error { background: #fff0f0; color: #8c3434; }

.site-footer {
    padding: 58px 0 22px;
    color: #d7e5f3;
    background: linear-gradient(135deg, #052d59, #041f3d);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr .95fr 1.05fr;
    gap: 42px;
}
.footer-brand img { max-width: 180px; max-height: 54px; object-fit: contain; }
.footer-grid p { color: #aac1d7; font-size: 13px; }
.footer-grid h3 { margin: 0 0 16px; color: #fff; font-size: 14px; }
.footer-grid > div > a:not(.footer-brand), .footer-grid > div > p {
    display: block;
    margin: 8px 0;
    font-size: 13px;
}
.socials { display: flex; gap: 8px; margin-top: 17px; }
.socials a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}
.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.newsletter-form input {
    min-width: 0;
    padding: 10px 11px;
    border: 0;
    border-radius: 7px;
}
.newsletter-form button {
    border: 0;
    border-radius: 7px;
    padding: 0 14px;
    color: #fff;
    background: var(--brand);
    font-weight: 750;
    font-size: 12px;
}
.form-success { color: #92efb3; }
.form-error { color: #ffb7b7; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.16);
    font-size: 11px;
    color: #9eb7cf;
}

.page-hero, .article-hero, .product-detail-hero {
    padding: 80px 0 64px;
    background:
        radial-gradient(circle at 85% 15%, rgba(8,116,209,.12), transparent 28%),
        linear-gradient(180deg, #f4faff, #fff);
}
.page-hero h1, .article-hero h1, .product-detail-hero h1 {
    max-width: 900px;
    margin: 10px 0 14px;
    color: var(--navy);
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: -.04em;
}
.page-hero p, .article-hero p, .product-detail-hero p { max-width: 740px; color: var(--muted); font-size: 17px; }
.article-narrow { max-width: 850px; }
.back-link { display: inline-block; margin-bottom: 20px; color: var(--brand); font-weight: 800; font-size: 13px; }
.article-hero small { color: var(--muted); }
.article-cover { width: 100%; max-height: 500px; margin-top: 38px; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow); }
.article-content {
    padding: 46px 0 30px;
    color: #405870;
    font-size: 17px;
    line-height: 1.85;
}
.article-content h2, .article-content h3 { color: var(--navy); line-height: 1.2; }
.article-content a { color: var(--brand); text-decoration: underline; }
.article-content ul, .article-content ol { padding-left: 24px; }
.product-detail-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 60px; align-items: center; }
.detail-image img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
.detail-price { display: block; margin-top: 18px; color: var(--navy); font-size: 28px; }
.pagination-shell { margin-top: 34px; }

.empty-state {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed #cbdbea;
    border-radius: 14px;
    background: #f8fbfe;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
    .desktop-nav { display: none; }
    .menu-toggle { display: block; }
    .mobile-nav {
        position: fixed;
        inset: 97px 20px auto;
        z-index: 1001;
        display: grid;
        gap: 4px;
        padding: 18px;
        border: 1px solid #dce8f3;
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--shadow);
        transform: translateY(-15px);
        opacity: 0;
        pointer-events: none;
        transition: .2s ease;
    }
    .mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .mobile-nav a { padding: 11px 10px; font-weight: 700; }
    .mobile-nav .btn { margin-top: 8px; color: #fff; }

    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { max-width: 780px; }
    .hero-visual { min-height: 460px; }
    .hero-photo { height: 440px; }
    .service-grid { grid-template-columns: repeat(3, 1fr); }
    .about-grid { gap: 42px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .container { width: min(100% - 28px, 1180px); }
    .site-header { padding: 10px 0; }
    .nav-shell { min-height: 60px; padding: 0 14px; }
    .brand-logo { width: 145px; }
    .btn-nav { display: none; }
    .mobile-nav { inset: 79px 14px auto; }

    .hero-section { padding: 34px 0 48px; }
    .hero-copy h1 { font-size: clamp(38px, 12vw, 54px); }
    .hero-description { font-size: 16px; }
    .hero-visual { min-height: 370px; }
    .hero-photo { height: 355px; border-radius: 110px 14px 14px 14px; }
    .visual-arc { inset: 20px -30px 0 8px; }
    .floating-card-b { top: 35px; right: -4px; }
    .floating-card-a { left: -4px; bottom: 32px; }
    .floating-card { padding: 10px 12px; }
    .dot-pattern { display: none; }

    .countdown { display: grid; grid-template-columns: repeat(4, 1fr); }
    .countdown > div { min-width: 0; padding: 10px 5px; }
    .countdown strong { font-size: 20px; }

    .section { padding: 58px 0; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card { min-height: 220px; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 10px; }
    .stats-bar div { padding: 16px 6px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
    .stats-bar div:last-child { grid-column: 1 / -1; border-bottom: 0; }
    .stats-bar strong { font-size: 27px; }

    .about-grid { grid-template-columns: 1fr; }
    .about-visual { min-height: 385px; }
    .building-card { height: 350px; }
    .about-badge { width: 210px; padding: 16px; }
    .benefit-grid { grid-template-columns: 1fr; }

    .product-grid, .blog-grid, .testimonial-grid { grid-template-columns: 1fr; }
    .testimonial-card > p { min-height: auto; }
    .split-heading { align-items: start; flex-direction: column; }

    .contact-shell { grid-template-columns: 1fr; padding: 26px 18px; }
    .contact-form { padding: 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid label.full { grid-column: auto; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; }
    .newsletter-form { grid-template-columns: 1fr; }
    .newsletter-form button { min-height: 40px; }

    .product-detail-grid { grid-template-columns: 1fr; gap: 30px; }
    .page-hero, .article-hero, .product-detail-hero { padding: 56px 0 46px; }
}

@media (max-width: 480px) {
    .service-grid { grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; }
    .hero-mini-services { display: grid; grid-template-columns: repeat(2, 1fr); }
    .floating-card-b { display: none; }
}
nav[role="navigation"] { margin-top: 24px; }
nav[role="navigation"] > div { gap: 12px; }
nav[role="navigation"] a,
nav[role="navigation"] span {
    border-radius: 8px;
}
nav[role="navigation"] svg { width: 18px; height: 18px; }

/* ============================================================
   VISITALENTA COMING SOON — glass corporate theme
   ============================================================ */
.glass-panel,
.glass-chip {
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(242,249,255,.55));
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 22px 60px rgba(11, 72, 128, .12), inset 0 1px 0 rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.cs-hero {
    position: relative;
    min-height: 790px;
    overflow: hidden;
    padding: 142px 0 92px;
    background:
        radial-gradient(circle at 18% 18%, rgba(106,190,255,.22), transparent 33%),
        radial-gradient(circle at 86% 24%, rgba(62,145,237,.18), transparent 34%),
        linear-gradient(135deg, #f8fcff 0%, #eff8ff 48%, #fbfdff 100%);
}
.cs-grid-bg {
    position: absolute;
    inset: 0;
    opacity: .34;
    background-image: linear-gradient(rgba(17,97,166,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17,97,166,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 78%);
}
.cs-orb { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.cs-orb-a { width: 370px; height: 370px; right: -110px; top: 90px; background: rgba(73,167,247,.18); }
.cs-orb-b { width: 260px; height: 260px; left: -105px; bottom: 70px; background: rgba(72,159,237,.13); }
.cs-orb-c { width: 92px; height: 92px; right: 44%; top: 150px; background: rgba(255,255,255,.72); box-shadow: 0 20px 80px rgba(50,134,215,.18); }
.cs-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .96fr 1.04fr; gap: 64px; align-items: center; }
.cs-copy h1 { max-width: 720px; margin: 18px 0 20px; color: var(--navy); font-size: clamp(48px, 5.3vw, 78px); line-height: .99; letter-spacing: -.052em; }
.cs-copy h1::first-line { color: var(--navy); }
.cs-kicker { width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; color: var(--brand); font-size: 11px; font-weight: 850; letter-spacing: .075em; }
.cs-lead { max-width: 660px; margin: 0; color: #496983; font-size: 18px; line-height: 1.72; }
.cs-note { max-width: 650px; margin: 13px 0 0; color: #71889e; font-size: 14px; line-height: 1.7; }
.cs-countdown { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cs-countdown > div { min-width: 78px; padding: 13px 12px 11px; text-align: center; border-radius: 17px; }
.cs-countdown strong { display: block; color: var(--navy); font-size: 25px; line-height: 1; }
.cs-countdown span { display: block; margin-top: 6px; color: #7289a0; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cs-btn { min-height: 50px; padding-inline: 20px; }
.cs-trustline { display: flex; align-items: center; gap: 13px; margin-top: 30px; color: #46647f; }
.cs-trustline > span:last-child strong, .cs-trustline > span:last-child small { display: block; }
.cs-trustline strong { color: #264b6e; font-size: 12px; }
.cs-trustline small { margin-top: 2px; color: #7e93a6; font-size: 10px; }
.cs-avatars { display: flex; }
.cs-avatars i { width: 32px; height: 32px; display: grid; place-items: center; margin-left: -7px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--brand), #0b4f9b); font-style: normal; font-size: 8px; font-weight: 900; box-shadow: 0 7px 18px rgba(16,90,156,.16); }
.cs-avatars i:first-child { margin-left: 0; }

.cs-visual { position: relative; min-height: 570px; display: grid; place-items: center; }
.cs-visual-halo { position: absolute; width: 560px; height: 560px; border-radius: 48% 52% 54% 46% / 48% 45% 55% 52%; background: linear-gradient(145deg, rgba(146,210,255,.4), rgba(255,255,255,.12)); animation: csMorph 12s ease-in-out infinite alternate; }
.cs-visual-frame { position: relative; z-index: 2; width: min(100%, 600px); padding: 16px; border-radius: 32px; transform: rotate(1deg); }
.cs-visual-label { display: block; padding: 4px 6px 12px; color: #6d88a1; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.cs-illustration { width: 100%; display: block; border-radius: 22px; box-shadow: 0 20px 45px rgba(23,75,122,.11); }
.cs-visual-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 6px 3px; color: #6b859d; font-size: 10px; }
.cs-visual-footer > div { display: flex; align-items: center; gap: 7px; color: #365f81; }
.cs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #21b573; box-shadow: 0 0 0 5px rgba(33,181,115,.12); }
.cs-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 17px; animation: csFloat 5.8s ease-in-out infinite; }
.cs-float-a { left: -18px; bottom: 78px; }
.cs-float-b { right: -18px; top: 92px; animation-delay: -1.8s; }
.cs-float-c { left: 28px; top: 32px; animation-delay: -3.2s; }
.cs-float-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--brand), #0754a8); font-weight: 900; }
.cs-float strong, .cs-float small { display: block; }
.cs-float strong { color: var(--navy); font-size: 11px; }
.cs-float small { color: #7890a4; font-size: 9px; margin-top: 2px; }

.cs-section { position: relative; padding: 82px 0; background: #fff; }
.cs-section .section-heading h2 { max-width: 920px; margin-inline: auto; }
.cs-service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cs-service-card { position: relative; min-height: 236px; padding: 21px 17px 42px; overflow: hidden; border-color: rgba(203,223,239,.72); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.cs-service-card::after { content: ''; position: absolute; width: 130px; height: 130px; right: -75px; bottom: -82px; border-radius: 50%; background: rgba(45,149,239,.09); transition: .28s ease; }
.cs-service-card:hover { transform: translateY(-7px); border-color: rgba(121,186,239,.7); box-shadow: 0 24px 55px rgba(11,72,128,.14); }
.cs-service-card:hover::after { transform: scale(1.28); }
.cs-service-card .icon-bubble { margin: 0 0 17px; }
.cs-service-card h3 { margin: 0 0 9px; color: var(--navy); font-size: 15px; }
.cs-service-card p { margin: 0; color: #698095; font-size: 11px; line-height: 1.65; }
.cs-card-arrow { position: absolute; left: 18px; bottom: 15px; color: var(--brand); font-size: 18px; font-weight: 900; }
.cs-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 24px; padding: 22px 8px; color: #fff; background: linear-gradient(110deg, rgba(8,63,128,.96), rgba(8,116,209,.94), rgba(6,72,145,.96)); border-color: rgba(255,255,255,.2); }
.cs-stats > div { text-align: center; padding: 4px 18px; border-right: 1px solid rgba(255,255,255,.18); }
.cs-stats > div:last-child { border-right: 0; }
.cs-stats strong { display: block; font-size: 30px; line-height: 1.05; }
.cs-stats span { display: block; margin-top: 5px; font-size: 10px; opacity: .82; }

.cs-about { overflow: hidden; background: linear-gradient(145deg, #eff8ff, #fbfdff); }
.cs-about::before { content: ''; position: absolute; width: 460px; height: 460px; left: -180px; top: -170px; border-radius: 50%; background: rgba(110,190,255,.14); }
.cs-about-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 64px; align-items: center; }
.cs-about-card { position: relative; padding: 18px; border-radius: 28px; }
.cs-about-art { height: 430px; overflow: hidden; border-radius: 20px; background: #dbeeff; }
.cs-about-art img { width: 100%; height: 100%; object-fit: cover; }
.cs-about-badge { position: absolute; right: -24px; bottom: 42px; width: 245px; display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, rgba(8,116,209,.94), rgba(5,74,153,.96)); border-color: rgba(255,255,255,.3); }
.cs-about-badge > span { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
.cs-about-badge strong, .cs-about-badge small { display: block; }
.cs-about-badge strong { font-size: 12px; line-height: 1.35; }
.cs-about-badge small { margin-top: 5px; font-size: 9px; opacity: .75; }
.cs-about-copy h2 { margin: 8px 0 13px; color: var(--navy); font-size: clamp(34px, 4vw, 50px); line-height: 1.08; letter-spacing: -.04em; }
.cs-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
.cs-benefits > div { min-height: 152px; padding: 17px; border-radius: 18px; }
.cs-benefits span { display: inline-grid; width: 31px; height: 31px; place-items: center; margin-bottom: 10px; border-radius: 9px; color: var(--brand); background: #e5f3ff; font-size: 9px; font-weight: 900; }
.cs-benefits strong { display: block; color: var(--navy); font-size: 13px; }
.cs-benefits p { margin: 6px 0 0; color: #71889d; font-size: 10px; line-height: 1.6; }

.cs-contact-section { padding-top: 54px; background: #fff; }
.cs-contact-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr; gap: 34px; align-items: center; padding: 38px 42px; border-radius: 28px; color: #fff; background: linear-gradient(120deg, rgba(6,61,125,.97), rgba(8,116,209,.94)); border-color: rgba(255,255,255,.2); }
.cs-contact-card::after { content: ''; position: absolute; width: 240px; height: 240px; right: -80px; top: -100px; border-radius: 50%; background-image: radial-gradient(rgba(255,255,255,.25) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: .55; }
.cs-contact-card > * { position: relative; z-index: 2; }
.cs-contact-card .eyebrow { color: #a9d7ff; }
.cs-contact-card h2 { max-width: 760px; margin: 8px 0 9px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.cs-contact-card p { max-width: 720px; margin: 0; color: rgba(255,255,255,.75); }
.cs-contact-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.btn-light { color: #0a4d91; background: #fff; border-color: #fff; }
.btn-light:hover { transform: translateY(-2px); background: #f3f9ff; }
.joglo-credit strong { color: #d7ebff; font-weight: 800; }

@keyframes csFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes csMorph { 0% { border-radius: 48% 52% 54% 46% / 48% 45% 55% 52%; transform: rotate(0deg); } 100% { border-radius: 55% 45% 47% 53% / 53% 57% 43% 47%; transform: rotate(4deg); } }

@media (max-width: 1180px) {
    .cs-hero-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .cs-service-grid { grid-template-columns: repeat(3, 1fr); }
    .cs-float-a { left: 0; }
    .cs-float-b { right: 0; }
}
@media (max-width: 900px) {
    .cs-hero { min-height: auto; padding: 118px 0 72px; }
    .cs-hero-grid, .cs-about-grid, .cs-contact-card { grid-template-columns: 1fr; }
    .cs-copy { text-align: center; }
    .cs-kicker { margin-inline: auto; }
    .cs-lead, .cs-note { margin-inline: auto; }
    .cs-actions, .cs-trustline { justify-content: center; }
    .cs-visual { min-height: 510px; max-width: 690px; width: 100%; margin: 10px auto 0; }
    .cs-stats { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
    .cs-stats > div:nth-child(3), .cs-stats > div:last-child { border-right: 0; }
    .cs-about-card { max-width: 660px; width: 100%; margin: 0 auto; }
    .cs-about-badge { right: 12px; }
    .cs-contact-actions { max-width: 420px; }
}
@media (max-width: 640px) {
    .cs-hero { padding-top: 105px; }
    .cs-copy h1 { font-size: clamp(42px, 13vw, 58px); }
    .cs-lead { font-size: 16px; }
    .cs-countdown { justify-content: center; }
    .cs-countdown > div { min-width: 67px; padding-inline: 8px; }
    .cs-actions .btn { width: 100%; justify-content: center; }
    .cs-trustline { align-items: flex-start; text-align: left; }
    .cs-visual { min-height: 420px; }
    .cs-visual-frame { padding: 10px; border-radius: 24px; }
    .cs-visual-halo { width: 410px; height: 410px; }
    .cs-float { padding: 9px 10px; }
    .cs-float-c { left: 2px; top: -3px; }
    .cs-float-a { left: 0; bottom: 12px; }
    .cs-float-b { right: 0; top: 70px; }
    .cs-float-icon { width: 29px; height: 29px; }
    .cs-service-grid { grid-template-columns: 1fr; }
    .cs-service-card { min-height: 185px; }
    .cs-stats { grid-template-columns: repeat(2, 1fr); }
    .cs-stats > div { border-right: 0; }
    .cs-stats > div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); }
    .cs-stats > div:last-child { grid-column: 1 / -1; border-right: 0; }
    .cs-about-art { height: 340px; }
    .cs-about-badge { position: relative; right: auto; bottom: auto; width: auto; margin-top: -72px; margin-inline: 16px; }
    .cs-benefits { grid-template-columns: 1fr; }
    .cs-contact-card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-float, .cs-visual-halo { animation: none !important; }
}

/* =========================================================
   SERVICE COMMERCE / PAGE BUILDER / PROMO / LIVE CHAT (v3)
   ========================================================= */
.narrow { width: min(820px, 100%); margin-inline: auto; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:24px; color:#6c8096; font-size:13px; }
.breadcrumbs a:hover { color:var(--brand); }
.catalog-hero { padding:72px 0 58px; background:linear-gradient(180deg,#f4f9ff 0,#fff 100%); border-bottom:1px solid #edf3f8; text-align:center; }
.catalog-hero h1 { max-width:900px; margin:12px auto 14px; font-size:clamp(38px,5vw,64px); line-height:1.03; letter-spacing:-.04em; color:#082e5f; }
.catalog-hero p { max-width:760px; margin:0 auto; color:var(--muted); font-size:17px; }
.catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.catalog-service-card { position:relative; display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:start; padding:28px; border:1px solid #dfeaf4; border-radius:18px; background:linear-gradient(145deg,#fff,#f8fbff); box-shadow:var(--shadow-soft); transition:.25s ease; }
.catalog-service-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--service-accent) 40%,#dfeaf4); box-shadow:0 24px 50px rgba(9,52,96,.12); }
.catalog-service-card h2 { margin:5px 0 8px; color:#082e5f; font-size:24px; }
.catalog-service-card p { margin:0 0 12px; color:var(--muted); }
.catalog-service-card small { color:#7990a6; }
.catalog-kicker { color:var(--service-accent,var(--brand)); font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.catalog-arrow { align-self:center; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#edf6ff; color:var(--service-accent,var(--brand)); font-weight:900; transition:.2s ease; }
.catalog-service-card:hover .catalog-arrow { transform:translateX(3px); background:var(--service-accent,var(--brand)); color:#fff; }

.service-category-hero { position:relative; overflow:hidden; padding:64px 0; background:radial-gradient(circle at 82% 20%,color-mix(in srgb,var(--service-accent) 14%,transparent),transparent 30%),linear-gradient(180deg,#f7fbff,#fff); }
.service-category-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.service-category-grid h1 { margin:12px 0 14px; font-size:clamp(42px,5vw,66px); line-height:1.02; letter-spacing:-.04em; color:#082e5f; }
.service-category-grid p { max-width:680px; color:var(--muted); font-size:18px; }
.service-category-visual { min-height:330px; display:grid; place-items:center; text-align:center; padding:36px; overflow:hidden; }
.service-category-visual img { width:100%; height:330px; object-fit:cover; border-radius:16px; }
.service-category-visual strong { font-size:24px; color:#082e5f; margin-top:14px; }
.service-category-visual span { color:var(--muted); }
.service-big-icon { width:110px; height:110px; display:grid; place-items:center; border-radius:30px; background:linear-gradient(145deg,#fff,#eaf5ff); color:var(--service-accent); box-shadow:0 18px 40px rgba(8,65,120,.12); }
.service-big-icon svg { width:58px; height:58px; }

.subservice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.subservice-card { overflow:hidden; display:flex; flex-direction:column; min-height:100%; border:1px solid #e0ebf5; border-radius:18px; background:#fff; box-shadow:0 12px 34px rgba(10,53,95,.07); transition:.25s ease; }
.subservice-card:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(10,53,95,.12); border-color:#c4def5; }
.subservice-media { position:relative; min-height:170px; background:linear-gradient(145deg,#eff7ff,#f9fcff); }
.subservice-media img { width:100%; height:190px; object-fit:cover; }
.subservice-placeholder { height:190px; display:grid; place-items:center; color:var(--brand); }
.subservice-placeholder svg { width:64px; height:64px; }
.promo-chip { display:inline-flex; align-items:center; width:max-content; padding:6px 10px; border-radius:999px; background:#ffeff0; color:#c52235; font-size:11px; font-weight:850; letter-spacing:.05em; }
.subservice-media .promo-chip { position:absolute; top:14px; left:14px; }
.promo-chip.neutral { background:#eaf5ff; color:#176bb3; }
.subservice-body { display:flex; flex-direction:column; flex:1; padding:22px; }
.subservice-body h3 { margin:5px 0 8px; font-size:21px; color:#0b315c; }
.subservice-body p { margin:0 0 15px; color:var(--muted); }
.service-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:7px 0 12px; }
.service-price small { width:100%; color:#6d8297; }
.service-price del { color:#9aaaba; font-size:13px; }
.service-price strong { font-size:22px; color:#083568; }
.service-price span { color:#70859a; font-size:12px; }
.subservice-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px; }
.subservice-meta span { padding:5px 8px; border-radius:7px; background:#f4f8fc; color:#607991; font-size:11px; }
.subservice-link { display:inline-flex; margin-top:16px; color:var(--brand); font-size:13px; font-weight:800; }

.detail-hero { padding:44px 0 66px; background:radial-gradient(circle at 86% 25%,rgba(38,149,255,.12),transparent 24%),linear-gradient(180deg,#f6fbff,#fff); border-bottom:1px solid #eaf2f8; }
.detail-hero-grid { display:grid; grid-template-columns:1fr 360px; gap:54px; align-items:center; }
.detail-hero h1 { margin:13px 0 15px; max-width:780px; font-size:clamp(42px,5vw,68px); line-height:1.02; letter-spacing:-.045em; color:#082e5f; }
.detail-tagline { max-width:720px; margin:0; color:#60758c; font-size:18px; }
.detail-badge { display:inline-flex; margin-left:10px; padding:5px 9px; border-radius:999px; background:#eaf5ff; color:#0a6ac5; font-size:11px; font-weight:850; }
.detail-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.detail-meta span { padding:8px 11px; background:#fff; border:1px solid #dce9f4; border-radius:9px; color:#506b84; font-size:13px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.detail-price-card { padding:28px; border-radius:20px; }
.detail-price-card h3 { margin:12px 0 16px; color:#0a335e; }
.detail-price-card > small { display:block; color:#70859a; }
.detail-price-card del { display:block; margin:7px 0 -2px; color:#a3afbc; }
.detail-price-card > strong { display:block; margin:4px 0; font-size:34px; color:#073d77; letter-spacing:-.03em; }
.detail-price-card > span { color:#657c92; }
.detail-price-card p { margin:14px 0 0; color:#72869a; font-size:12px; }
.custom-price { font-size:23px !important; }
.promo-code { display:inline-flex; gap:6px; align-items:center; margin-top:14px; padding:8px 11px; border:1px dashed #95c9f4; border-radius:9px; background:#f0f8ff; color:#29638f; font-size:12px; }
.promo-code.large { font-size:15px; padding:12px 16px; }
.detail-intro { padding-bottom:20px; }

.builder-section { padding:58px 0; }
.builder-section:nth-of-type(even) { background:#fbfdff; }
.builder-box { padding:0; }
.builder-box.style-glass, .builder-box.style-soft, .builder-box.style-dark, .builder-box.style-gradient { padding:34px; border-radius:20px; }
.style-glass { background:rgba(255,255,255,.74); border:1px solid rgba(203,224,242,.85); box-shadow:0 18px 50px rgba(9,52,96,.08); backdrop-filter:blur(18px); }
.style-soft { background:#f2f8fd; border:1px solid #e1edf7; }
.style-dark { background:#062c54; color:#fff; }
.style-dark h2,.style-dark h3,.style-dark p,.style-dark .rich-copy { color:#fff; }
.style-gradient { color:#fff; background:linear-gradient(135deg,#07539a,#0a80e2); box-shadow:0 20px 44px rgba(4,86,158,.18); }
.builder-hero { background:linear-gradient(180deg,#fff,#f6fbff); }
.builder-hero-grid { display:grid; grid-template-columns:1fr .9fr; gap:48px; align-items:center; }
.builder-hero-grid h2, .builder-image-text h2, .builder-box h2 { margin:8px 0 14px; font-size:clamp(32px,4vw,48px); line-height:1.08; color:#082e5f; }
.builder-hero-grid p { color:var(--muted); font-size:17px; }
.builder-media { overflow:hidden; border-radius:20px; }
.builder-media img { width:100%; max-height:480px; object-fit:cover; }
.builder-image-text { display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
.builder-image-text.image-right .builder-media { order:2; }
.builder-feature-grid { display:grid; gap:16px; }
.builder-feature-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.builder-feature-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.builder-feature-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.builder-feature-card { padding:24px; border-radius:16px; }
.builder-feature-card h3 { margin:12px 0 7px; color:#0a345f; }
.builder-feature-card p { margin:0; color:#687d92; }
.builder-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:12px; background:#e9f5ff; color:var(--brand); font-size:21px; font-weight:800; }
.process-section { background:#f7fbff; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step; }
.process-grid article { position:relative; padding:26px 22px; border-top:2px solid #cce5f8; }
.process-grid article::before { content:""; position:absolute; top:-6px; left:22px; width:10px; height:10px; border-radius:50%; background:var(--brand); }
.process-grid article > span { color:var(--brand); font-size:12px; font-weight:850; }
.process-grid h3 { margin:8px 0; color:#0b335e; }
.process-grid p { margin:0; color:#6a8095; font-size:14px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.pricing-card { position:relative; padding:28px; border:1px solid #dce8f3; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(9,52,96,.07); }
.pricing-card.featured { transform:translateY(-8px); border-color:#8bc6f5; box-shadow:0 22px 48px rgba(9,104,185,.15); }
.pricing-card h3 { margin:12px 0 4px; color:#082f5a; font-size:22px; }
.pricing-card > p { color:#6f8295; min-height:44px; }
.pricing-card del { display:block; color:#9daab7; }
.package-price { display:block; margin:4px 0 16px; font-size:27px; color:#083b70; }
.pricing-card ul { min-height:130px; padding:0; list-style:none; }
.pricing-card li { margin:8px 0; color:#586f85; font-size:14px; }
.pricing-card .btn { width:100%; }
.requirements-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.requirements-list article { display:flex; gap:13px; padding:20px; background:#fff; border:1px solid #dceaf5; border-radius:14px; }
.requirements-list article > span { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:50%; background:#eaf6ff; color:var(--brand); }
.requirements-list h3 { margin:0 0 5px; color:#0a345f; }
.requirements-list p { margin:0; color:#6b7f93; }
.builder-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; overflow:hidden; border-radius:18px; }
.builder-stats > div { padding:26px; text-align:center; background:rgba(255,255,255,.08); }
.builder-stats strong { display:block; font-size:32px; }
.builder-stats span { display:block; margin-top:5px; font-size:12px; opacity:.84; }
.faq-list { display:grid; gap:10px; }
.faq-list details { padding:0 20px; border:1px solid #dfeaf4; border-radius:13px; background:#fff; }
.faq-list summary { display:flex; justify-content:space-between; gap:20px; padding:18px 0; cursor:pointer; color:#0b335e; font-weight:750; }
.faq-list summary::marker { content:""; }
.faq-list details p { margin:0 0 18px; color:#667d92; }
.builder-testimonial { margin:0; padding:36px; border-radius:20px; }
.builder-testimonial > span { font-size:64px; line-height:.5; color:var(--brand); }
.builder-testimonial > p { font-size:21px; color:#244663; }
.builder-testimonial footer { display:flex; flex-direction:column; }
.builder-testimonial small { color:#75899d; }
.builder-cta { padding:44px; border-radius:20px; text-align:center; }
.builder-cta h2 { max-width:780px; margin:9px auto 12px; color:inherit; font-size:clamp(32px,4vw,48px); }
.builder-cta p { max-width:680px; margin:0 auto 22px; opacity:.9; }
.btn-outline.light { color:#fff; border-color:rgba(255,255,255,.55); background:transparent; }

.inquiry-section { background:linear-gradient(180deg,#f4f9fd,#fff); }
.inquiry-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; }
.inquiry-grid h2 { margin:10px 0 12px; color:#082f5a; font-size:clamp(32px,4vw,46px); }
.inquiry-grid > div > p { color:#667d92; }
.inquiry-trust { display:grid; gap:8px; margin-top:22px; color:#496b87; }
.inquiry-form { padding:28px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.inquiry-form label { display:grid; gap:6px; margin-bottom:14px; color:#31516d; font-size:13px; font-weight:700; }
.inquiry-form input,.inquiry-form textarea { width:100%; padding:12px 13px; border:1px solid #d6e4ef; border-radius:9px; background:#fff; outline:none; }
.inquiry-form input:focus,.inquiry-form textarea:focus { border-color:#81bee9; box-shadow:0 0 0 3px rgba(45,148,222,.1); }
.form-success { color:#147846; }
.form-error { color:#b22633; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.related-grid a { padding:22px; border:1px solid #dbe8f3; border-radius:14px; background:#fff; }
.related-grid strong { color:#0a345f; }
.related-grid p { color:#6b8094; }
.related-grid span { color:var(--brand); font-size:13px; font-weight:800; }

.promo-ribbon { position:relative; z-index:900; background:linear-gradient(90deg,#062d58,#0879d8); color:#fff; }
.promo-ribbon-inner { min-height:42px; display:flex; align-items:center; justify-content:center; gap:13px; font-size:13px; }
.promo-ribbon-badge { padding:4px 8px; border-radius:999px; background:#fff; color:#0a5da9; font-size:10px; font-weight:900; }
.promo-ribbon a { color:#fff; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.promo-countdown { padding:4px 7px; border-radius:6px; background:rgba(255,255,255,.14); font-variant-numeric:tabular-nums; font-weight:800; }
.promo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.promo-card { display:grid; grid-template-columns:190px 1fr; gap:20px; overflow:hidden; border:1px solid #dfeaf4; border-radius:18px; background:#fff; box-shadow:var(--shadow-soft); }
.promo-card img { width:100%; height:100%; min-height:200px; object-fit:cover; }
.promo-card > div { padding:24px; }
.promo-card h2 { margin:10px 0 8px; color:#0b335e; }
.promo-card p { color:#6b8094; }
.promo-card code { display:inline-flex; padding:6px 8px; background:#eef7ff; border-radius:7px; color:#0d68b2; }
.promo-card small { display:block; margin-top:12px; color:#8495a5; }
.promo-detail-hero { padding:86px 0; text-align:center; background:radial-gradient(circle at 50% 0,rgba(55,165,255,.18),transparent 35%),linear-gradient(180deg,#f3f9ff,#fff); }
.promo-detail-hero h1 { margin:14px 0; font-size:clamp(42px,5vw,66px); color:#082e5f; }
.promo-detail-hero p { color:#657b91; font-size:18px; }
.flash-clock { display:flex; flex-direction:column; width:max-content; margin:18px auto 0; padding:15px 20px; border-radius:13px; background:#082f5a; color:#fff; }
.flash-clock span { font-size:28px; font-weight:850; font-variant-numeric:tabular-nums; }
.promo-terms { margin-top:44px; padding:28px; border-radius:16px; background:#f7fbff; border:1px solid #e1edf7; }

.live-chat { position:fixed; right:22px; bottom:22px; z-index:1500; }
.live-chat-trigger { min-width:88px; height:50px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 16px 34px rgba(4,74,136,.26); font-weight:800; cursor:pointer; }
.live-chat-dot { width:9px; height:9px; border-radius:50%; background:#a9b7c4; }
.live-chat-dot.online { background:#48df8a; box-shadow:0 0 0 4px rgba(72,223,138,.17); }
.live-chat-panel { position:absolute; right:0; bottom:62px; width:min(380px,calc(100vw - 28px)); overflow:hidden; visibility:hidden; opacity:0; transform:translateY(10px) scale(.98); transition:.2s ease; border:1px solid #d7e5f0; border-radius:18px; background:#fff; box-shadow:0 28px 70px rgba(5,42,78,.2); }
.live-chat-panel.is-open { visibility:visible; opacity:1; transform:none; }
.live-chat-panel header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:linear-gradient(135deg,#063c73,#087bd8); color:#fff; }
.live-chat-panel header div { display:flex; flex-direction:column; }
.live-chat-panel header small { opacity:.82; }
.live-chat-panel header button { border:0; background:transparent; color:#fff; font-size:26px; cursor:pointer; }
.live-chat-start { padding:20px; }
.live-chat-start p { margin:0 0 15px; color:#5f7489; }
.live-chat-start form { display:grid; gap:9px; }
.live-chat-start input,.live-chat-compose textarea { width:100%; padding:11px 12px; border:1px solid #d9e5ef; border-radius:9px; resize:none; }
.live-chat-room { background:#f7fbff; }
.live-chat-messages { height:320px; overflow:auto; display:flex; flex-direction:column; gap:9px; padding:17px; }
.chat-message { max-width:82%; padding:10px 12px; border-radius:12px; background:#fff; color:#34536e; box-shadow:0 5px 15px rgba(7,49,89,.05); }
.chat-message.visitor { align-self:flex-end; background:#0875d1; color:#fff; }
.chat-message.system { align-self:center; max-width:94%; text-align:center; background:#eaf5ff; color:#4b6e8c; font-size:12px; }
.chat-message small { display:block; margin-top:4px; opacity:.68; font-size:10px; }
.live-chat-compose { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; border-top:1px solid #dce9f3; background:#fff; }
.live-chat-compose button { padding:0 14px; border:0; border-radius:9px; background:var(--brand); color:#fff; font-weight:800; cursor:pointer; }
.live-chat-error { padding:10px 14px; background:#fff0f1; color:#a82735; font-size:12px; }

@media (max-width: 980px) {
    .catalog-grid,.subservice-grid,.pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .service-category-grid,.detail-hero-grid,.builder-hero-grid,.builder-image-text,.inquiry-grid { grid-template-columns:1fr; }
    .detail-price-card { max-width:520px; }
    .builder-image-text.image-right .builder-media { order:0; }
    .builder-feature-grid.cols-4,.builder-feature-grid.cols-3 { grid-template-columns:repeat(2,1fr); }
    .process-grid { grid-template-columns:repeat(2,1fr); }
    .related-grid { grid-template-columns:1fr; }
    .promo-ribbon-inner { flex-wrap:wrap; padding:8px 0; }
    .promo-grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
    .catalog-hero { padding:50px 0 40px; }
    .catalog-grid,.subservice-grid,.pricing-grid,.builder-feature-grid.cols-2,.builder-feature-grid.cols-3,.builder-feature-grid.cols-4,.requirements-list,.process-grid,.form-grid { grid-template-columns:1fr; }
    .catalog-service-card { grid-template-columns:52px 1fr; padding:21px; }
    .catalog-arrow { display:none; }
    .service-category-hero,.detail-hero { padding:38px 0 48px; }
    .service-category-grid { gap:30px; }
    .service-category-visual { min-height:230px; }
    .detail-hero-grid { gap:26px; }
    .detail-hero h1 { font-size:40px; }
    .builder-section { padding:42px 0; }
    .builder-cta { padding:30px 20px; }
    .promo-card { grid-template-columns:1fr; }
    .promo-card img { min-height:150px; max-height:220px; }
    .promo-ribbon-inner { justify-content:flex-start; }
    .promo-ribbon-inner strong { width:100%; }
    .live-chat { right:14px; bottom:14px; }
}
.tracking-form { padding:28px; margin-bottom:22px; }
.tracking-result { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:28px; border:1px solid #dce9f3; border-radius:18px; background:#fff; box-shadow:var(--shadow-soft); }
.tracking-result h2 { margin:5px 0; color:#0a345f; }
.tracking-result p { margin:0; color:#6b8094; }
.tracking-status { padding:8px 11px; border-radius:999px; background:#eaf5ff; color:#1268ad; font-size:12px; font-weight:850; }
.tracking-status.status-won { background:#e7f8ef; color:#19764b; }
.tracking-status.status-lost { background:#f3f3f3; color:#737d86; }
.tracking-timeline { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.tracking-timeline span { position:relative; padding-top:19px; color:#8b9baa; font-size:12px; text-align:center; border-top:3px solid #dfe8ef; }
.tracking-timeline span.done { color:#1b669e; border-color:#1590dc; font-weight:750; }
.tracking-result.not-found { display:block; text-align:center; }
@media(max-width:640px){.tracking-result{grid-template-columns:1fr}.tracking-timeline{grid-template-columns:1fr}.tracking-timeline span{text-align:left;padding:9px 0 9px 15px;border-top:0;border-left:3px solid #dfe8ef}.tracking-timeline span.done{border-color:#1590dc}}
.service-tools { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; padding:18px 20px; border:1px solid #dfeaf4; border-radius:14px; background:#f8fbff; }
.service-tools div { display:flex; flex-direction:column; }
.service-tools strong { color:#0a345f; }
.service-tools span { color:#7b8fa2; font-size:12px; }
.service-tools input { width:min(420px,100%); padding:12px 14px; border:1px solid #d5e4f0; border-radius:10px; background:#fff; outline:none; }
.service-search-empty { margin-top:18px; }
@media(max-width:640px){.service-tools{align-items:stretch;flex-direction:column}.service-tools input{width:100%}}
/* =============================
   V4 Client Area / Business Suite
   ============================= */
.portal-body{margin:0;background:#f4f8fc;color:#183451;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.portal-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.portal-sidebar{position:sticky;top:0;height:100vh;padding:26px 20px 20px;background:linear-gradient(180deg,#082e5d 0%,#041f3e 100%);color:#fff;display:flex;flex-direction:column;overflow:auto;z-index:20}
.portal-brand{display:flex;align-items:center;min-height:52px;padding:0 8px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.portal-brand img{max-width:172px;max-height:44px;object-fit:contain}
.portal-company{padding:22px 10px 14px;display:grid;gap:3px}.portal-company small{font-size:10px;letter-spacing:.12em;color:#8fd0ff;font-weight:800}.portal-company strong{font-size:15px}.portal-company span{font-size:12px;color:#a9bdd2}
.portal-nav{display:grid;gap:4px;margin-top:8px}.portal-nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:#c9d8e8;font-size:13px;font-weight:650;transition:.2s}.portal-nav a:hover,.portal-nav a.active{background:rgba(255,255,255,.11);color:#fff}.portal-nav a.active{box-shadow:inset 3px 0 0 #39a7ff}.portal-nav a:first-letter{color:#8ed0ff}
.portal-sidebar-bottom{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:4px}.portal-sidebar-bottom a,.portal-sidebar-bottom button{width:100%;display:block;padding:9px 10px;border:0;background:transparent;color:#a9bdd2;text-align:left;font-size:12px;cursor:pointer;border-radius:8px}.portal-sidebar-bottom a:hover,.portal-sidebar-bottom button:hover{color:#fff;background:rgba(255,255,255,.08)}
.portal-main{min-width:0}.portal-topbar{position:sticky;top:0;z-index:15;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 34px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid #dce8f3}.portal-topbar h1{margin:2px 0 0;font-size:24px;letter-spacing:-.02em;color:#0b315e}.portal-mobile-title{font-size:10px;color:#64809b;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.portal-top-actions{display:flex;align-items:center;gap:12px}.portal-icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid #d7e5f2;border-radius:11px;background:#fff;color:var(--brand);font-weight:900}.portal-user-chip{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;background:#fff;border:1px solid #dce8f3;border-radius:12px}.portal-user-chip>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:800}.portal-user-chip div{display:grid}.portal-user-chip strong{font-size:12px}.portal-user-chip small{font-size:10px;color:#708399}
.portal-content{padding:30px 34px 50px;max-width:1500px;margin:0 auto}.portal-footer{text-align:center;padding:22px 30px 34px;color:#7890a7;font-size:11px}
.portal-alert{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:13px}.portal-alert.success{background:#e9f8ef;color:#176b3e;border:1px solid #bfe8cf}.portal-alert.error{background:#fff0f0;color:#9a2b2b;border:1px solid #f2c8c8}.portal-alert ul{margin:7px 0 0;padding-left:18px}
.portal-welcome{padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(233,246,255,.85));border:1px solid #dceaf6;border-radius:18px;box-shadow:0 16px 40px rgba(8,47,86,.07)}.portal-welcome h2{margin:5px 0;font-size:27px;color:#08315e}.portal-welcome p{margin:0;color:#647c94}
.portal-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.portal-stat{padding:20px;border-radius:15px;background:#fff;border:1px solid #dfeaf4;box-shadow:0 8px 24px rgba(8,47,86,.05);display:grid;gap:3px}.portal-stat span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#71879c;font-weight:800}.portal-stat strong{font-size:30px;line-height:1;color:#0b4c8f;margin:6px 0}.portal-stat small{color:#8798a9;font-size:11px}
.portal-grid-2,.portal-tabs-grid,.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.portal-card{background:#fff;border:1px solid #dde9f3;border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(8,47,86,.045);min-width:0}.portal-card h3{margin:0 0 14px;color:#0b315e;font-size:18px}.portal-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}.portal-card-head h3{margin:2px 0 0}.portal-card-head>a{font-size:12px;color:var(--brand);font-weight:750}.portal-card .eyebrow{font-size:10px}
.portal-project-row{display:grid;grid-template-columns:1fr 150px;gap:20px;align-items:center;padding:14px 0;border-top:1px solid #edf2f7}.portal-project-row:first-of-type{border-top:0}.portal-project-row>div:first-child{display:grid;gap:3px}.portal-project-row strong{font-size:13px}.portal-project-row span{font-size:11px;color:#7990a7}.mini-progress{display:grid;gap:5px}.mini-progress b{font-size:12px;color:#165f9f;text-align:right}.mini-progress i,.progress-line i{display:block;height:7px;background:#eaf1f7;border-radius:99px;overflow:hidden}.mini-progress em,.progress-line em{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#45b8ff);border-radius:99px}
.notification-row{display:flex;gap:12px;padding:12px 0;border-top:1px solid #edf2f7}.notification-row:first-of-type{border-top:0}.notification-row>span{flex:0 0 8px;width:8px;height:8px;margin-top:7px;border-radius:50%;background:#c5d4e0}.notification-row.unread>span{background:#1487dd;box-shadow:0 0 0 4px #e6f4ff}.notification-row>div{display:grid;gap:2px}.notification-row strong{font-size:12px}.notification-row p{margin:0;color:#698198;font-size:11px}.notification-row small{font-size:10px;color:#9aabba}.notification-list-large .notification-row{padding:17px 4px}
.portal-empty{padding:18px 0;color:#8b9cad;font-size:13px;text-align:center}.portal-page-intro,.portal-detail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}.portal-page-intro h2,.portal-detail-head h2{margin:3px 0 4px;color:#0a315f;font-size:27px}.portal-page-intro p,.portal-detail-head p{margin:0;color:#6a8196}.back-link{display:inline-block;margin-bottom:8px;color:#64809a;font-size:12px;font-weight:700}.detail-head-actions{display:flex;gap:10px;align-items:center}
.portal-table-wrap{overflow:auto}.portal-table{width:100%;border-collapse:collapse;min-width:700px}.portal-table th{padding:10px 12px;text-align:left;border-bottom:1px solid #dce8f2;color:#71859a;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.portal-table td{padding:14px 12px;border-bottom:1px solid #edf2f6;font-size:12px;vertical-align:top}.portal-table td>a{color:var(--brand);font-weight:750}.portal-table tbody tr:hover{background:#f9fcff}.table-sub{display:block;color:#7d91a5;margin-top:4px;max-width:420px}
.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:99px;background:#eef4f8;color:#567086;font-size:10px;font-weight:800;text-transform:capitalize;white-space:nowrap}.status-badge.large{font-size:11px;padding:7px 11px}.status-badge.completed,.status-badge.paid,.status-badge.accepted,.status-badge.verified,.status-badge.confirmed,.status-badge.resolved{background:#e5f7ed;color:#197044}.status-badge.in_progress,.status-badge.sent,.status-badge.partial,.status-badge.pending,.status-badge.requested,.status-badge.pending_confirmation{background:#e8f3ff;color:#1769ab}.status-badge.waiting_client,.status-badge.unpaid,.status-badge.pending_quote,.status-badge.overdue,.status-badge.urgent{background:#fff1df;color:#9b5c0d}.status-badge.cancelled,.status-badge.rejected,.status-badge.closed{background:#ffeaea;color:#9d3535}
.project-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{display:block;padding:20px;background:#fff;border:1px solid #dde9f3;border-radius:16px;box-shadow:0 10px 28px rgba(8,47,86,.05);transition:.2s}.project-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(8,47,86,.09)}.project-card-head{display:flex;justify-content:space-between;align-items:center}.project-card-head small{color:#8699aa}.project-card h3{margin:16px 0 7px;font-size:18px;color:#0b315e}.project-card p{min-height:54px;margin:0 0 16px;color:#6b8196;font-size:12px}.progress-line{display:grid;gap:7px}.progress-line>div{display:flex;justify-content:space-between;font-size:11px}.project-card-meta{display:flex;justify-content:space-between;gap:12px;margin-top:15px;padding-top:12px;border-top:1px solid #eef2f6;font-size:10px;color:#7a8fa2}
.portal-project-hero{padding:28px;border-radius:18px;background:linear-gradient(135deg,#082e5d,#0a64ad);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:40px;box-shadow:0 18px 40px rgba(4,42,80,.15)}.portal-project-hero .back-link,.portal-project-hero p{color:#c7dced}.portal-project-hero h2{font-size:30px;margin:8px 0 6px}.project-hero-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:17px}.project-hero-meta span{font-size:11px;color:#b9d1e6}.project-hero-meta b{color:#fff}.project-progress-circle{--p:0;flex:0 0 132px;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at center,#0a4f8b 58%,transparent 59%),conic-gradient(#65d0ff calc(var(--p)*1%),rgba(255,255,255,.18) 0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.project-progress-circle strong{font-size:26px}.project-progress-circle span{font-size:10px;color:#c8dced}
.timeline-list{display:grid}.timeline-item{position:relative;display:grid;grid-template-columns:20px 1fr;gap:12px;padding:0 0 18px}.timeline-item:before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:2px;background:#e0eaf3}.timeline-item:last-child:before{display:none}.timeline-item>i{width:16px;height:16px;border-radius:50%;background:#dbe8f2;border:4px solid #f6fafd;z-index:1}.timeline-item.completed>i{background:#25a665}.timeline-item.in_progress>i{background:#1689df}.timeline-title{display:flex;justify-content:space-between;gap:15px}.timeline-title strong{font-size:12px}.timeline-title span{font-size:10px;color:#7890a5}.timeline-item p{margin:4px 0;color:#6a8196;font-size:11px}.timeline-item small{color:#9aabba;font-size:10px}
.task-list{display:grid;gap:8px}.task-row{display:flex;gap:10px;padding:10px;background:#f8fbfd;border-radius:10px}.task-check{width:20px;height:20px;border-radius:6px;border:1px solid #bfd0df;display:grid;place-items:center;color:#fff;font-size:11px}.task-check.done{background:#22a365;border-color:#22a365}.task-row>div{display:grid}.task-row strong{font-size:11px}.task-row small{font-size:10px;color:#8395a6}
.file-list{display:grid}.file-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-top:1px solid #edf2f6}.file-row:first-child{border-top:0}.file-row>div{display:grid}.file-row strong{font-size:12px}.file-row small{color:#7e91a4;font-size:10px}.file-row>a{font-size:11px;color:var(--brand);font-weight:750}.file-list.large .file-row{padding:16px 5px}.mini-upload{margin-top:15px;padding-top:15px;border-top:1px solid #e8eef4;display:grid;gap:8px}.mini-upload input,.mini-upload textarea{width:100%;padding:9px 10px;border:1px solid #d7e4ef;border-radius:8px}.mini-upload label{display:grid;gap:5px;font-size:11px;font-weight:700}
.update-list{display:grid;gap:14px}.update-list article{padding-left:14px;border-left:2px solid #cfe5f7}.update-list article span{font-size:9px;color:#97a9b9}.update-list article strong{display:block;margin:2px 0;font-size:12px}.update-list article p{margin:4px 0;color:#6b8195;font-size:11px}.update-list article b{font-size:10px;color:var(--brand)}
.message-thread{display:grid;gap:10px;max-height:420px;overflow:auto;padding:4px}.message-bubble{max-width:76%;padding:12px 14px;border-radius:5px 14px 14px 14px;background:#f1f6fa}.message-bubble.mine{justify-self:end;background:#e4f3ff;border-radius:14px 5px 14px 14px}.message-bubble>div{display:flex;gap:12px;justify-content:space-between}.message-bubble strong{font-size:10px}.message-bubble small{font-size:9px;color:#8497a9}.message-bubble p{margin:5px 0 0;font-size:12px;white-space:pre-wrap}.message-bubble>a{font-size:10px;color:var(--brand);font-weight:700}.message-form{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #e8eef4}.message-form textarea{width:100%;padding:12px;border:1px solid #d5e3ee;border-radius:10px;resize:vertical}.message-form>div{display:flex;justify-content:space-between;align-items:center;gap:12px}.ticket-thread{min-height:220px}
.portal-form{display:grid;gap:14px}.portal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.portal-form label,.mini-upload label{display:grid;gap:6px;color:#39526b;font-size:11px;font-weight:700}.portal-form input,.portal-form textarea,.portal-form select{width:100%;padding:11px 12px;border:1px solid #d4e2ed;background:#fff;border-radius:9px;outline:none;color:#183451}.portal-form input:focus,.portal-form textarea:focus,.portal-form select:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}.check-row{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:8px!important;font-weight:500!important}.check-row input{width:auto!important;margin-top:3px}.check-row a{color:var(--brand);font-weight:700}.btn-block{width:100%}.btn-sm{min-height:36px;padding:0 13px;font-size:11px}.form-row-between{display:flex;justify-content:space-between;align-items:center;font-size:11px}.form-row-between>a,.auth-switch a{color:var(--brand);font-weight:750}.form-card{max-width:850px}
.checkout-grid{grid-template-columns:.9fr 1.1fr}.checkout-price{display:grid;gap:4px;padding:18px;margin:20px 0;background:#f1f8fe;border-radius:13px}.checkout-price small,.checkout-price span{font-size:11px;color:#6f8598}.checkout-price strong{font-size:27px;color:#0a4f91}.checkout-meta{margin:0;padding-left:18px;color:#688095;font-size:12px}.money-lines,.quote-total{display:grid;gap:9px}.money-lines>div,.quote-total>div{display:flex;justify-content:space-between;gap:20px;font-size:12px}.money-lines .total,.quote-total .grand{padding-top:12px;margin-top:6px;border-top:1px solid #dce6ef;font-size:16px}.money-lines .total strong,.quote-total .grand strong{color:#0a4f91;font-size:20px}.quote-total{max-width:420px;margin:20px 0 0 auto}.detail-list{display:grid;gap:10px}.detail-list>div{display:grid;grid-template-columns:130px 1fr;gap:15px;padding-bottom:8px;border-bottom:1px solid #edf2f6}.detail-list dt{font-size:10px;color:#8093a4}.detail-list dd{margin:0;font-size:12px;font-weight:700}.detail-list a{color:var(--brand)}.quote-action-box{display:flex;justify-content:space-between;align-items:center;gap:25px}.quote-action-box>div:last-child{display:flex;gap:9px}.bank-box{display:grid;gap:3px;margin-top:15px;padding:15px;background:#f1f8fe;border:1px dashed #a8cae5;border-radius:11px}.bank-box span,.bank-box small{font-size:11px;color:#688096}.bank-box strong{font-size:20px;letter-spacing:.04em;color:#0a4f91}
.appointment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.appointment-card{padding:19px;border-radius:15px;background:#fff;border:1px solid #dce8f2;box-shadow:0 10px 28px rgba(8,47,86,.045)}.appointment-card>div{display:flex;justify-content:space-between;align-items:center}.appointment-card h3{margin:15px 0 6px;color:#0b315e}.appointment-card p{margin:0 0 10px;color:#6d8295;font-size:12px}.appointment-card>span{font-size:10px;text-transform:uppercase;font-weight:800;color:#678197}.appointment-card .btn{margin-top:13px}.profile-save{display:flex;align-items:flex-end;justify-content:flex-end}.portal-grid-2>form{display:contents}
.member-auth-body{margin:0;min-height:100vh;background:#f2f8fd;font-family:Inter,ui-sans-serif,system-ui;color:#183451;overflow-x:hidden}.member-auth-bg{position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,rgba(14,130,218,.16),transparent 28%),radial-gradient(circle at 80% 70%,rgba(48,185,255,.13),transparent 30%),linear-gradient(135deg,#f7fbff,#edf7ff);z-index:-1}.member-auth-shell{min-height:100vh;display:grid;place-items:center;align-content:center;padding:40px 20px}.member-auth-brand{margin-bottom:22px}.member-auth-brand img{width:190px;max-height:55px;object-fit:contain}.member-auth-card{width:min(560px,100%);padding:32px;background:rgba(255,255,255,.88);border:1px solid rgba(215,232,245,.95);border-radius:20px;box-shadow:0 25px 70px rgba(8,47,86,.12);backdrop-filter:blur(20px)}.member-auth-card h1{margin:7px 0 8px;color:#08315e;font-size:28px}.member-auth-card>p{margin:0 0 22px;color:#6b8195;font-size:13px}.member-auth-footer{margin-top:18px;color:#8094a6;font-size:10px}.auth-switch{text-align:center!important;margin:17px 0 0!important}
.content-page-hero,.case-detail-hero{padding:70px 0 58px;background:linear-gradient(180deg,#f4faff,#fff);text-align:center}.content-page-hero h1,.case-detail-hero h1{margin:10px auto 10px;color:#082f5c;font-size:clamp(38px,5vw,60px);line-height:1.05;max-width:900px}.content-page-hero p,.case-detail-hero p{max-width:760px;margin:0 auto;color:#647b91;font-size:16px}.legal-copy{font-size:15px;line-height:1.8}.legal-copy h2{margin-top:32px;color:#0b315e}.faq-page{max-width:920px}.faq-category{margin-bottom:36px}.faq-category h2{color:#0b315e}.faq-item{border:1px solid #dce8f2;border-radius:12px;background:#fff;margin:9px 0;overflow:hidden}.faq-item summary{cursor:pointer;padding:16px 18px;font-weight:750;color:#173b62}.faq-item>div{padding:0 18px 18px;color:#62798e;font-size:14px}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.case-card{display:block;overflow:hidden;border:1px solid #dce8f2;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(8,47,86,.05)}.case-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.case-card>div{padding:20px}.case-card span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-weight:800}.case-card h3{margin:7px 0;color:#0b315e}.case-card p{font-size:13px;color:#647b91}.case-card b{font-size:12px;color:var(--brand)}.case-detail-hero small{display:block;margin-top:15px;color:#768b9f}.case-stats{background:#073664;color:#fff}.case-stats>.container{display:grid;grid-template-columns:repeat(4,1fr)}.case-stats .container>div{text-align:center;padding:26px;border-right:1px solid rgba(255,255,255,.14)}.case-stats strong{display:block;font-size:28px}.case-stats span{font-size:11px;color:#bcd3e8}.case-story{display:grid;gap:18px}.case-story article{padding:28px;border:1px solid #dce8f2;border-radius:16px;background:#fff}.case-story h2{margin:5px 0 12px;color:#0b315e}
.member-order-cta{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}.client-area-link{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid #d8e6f2;border-radius:9px;color:#1d5f99!important;background:#fff}.client-area-link:hover{background:#f2f8fd}
@media(max-width:1100px){.portal-shell{grid-template-columns:230px 1fr}.portal-stat-grid{grid-template-columns:repeat(2,1fr)}.project-card-grid,.appointment-grid,.case-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.portal-shell{display:block}.portal-sidebar{position:relative;width:100%;height:auto;padding:14px}.portal-brand{justify-content:center}.portal-company{display:none}.portal-nav{grid-template-columns:repeat(4,1fr);overflow:auto;padding-bottom:4px}.portal-nav a{min-width:145px;justify-content:center}.portal-sidebar-bottom{display:none}.portal-topbar{padding:14px 18px}.portal-user-chip div{display:none}.portal-content{padding:20px 16px 40px}.portal-grid-2,.portal-tabs-grid,.checkout-grid{grid-template-columns:1fr}.project-card-grid,.appointment-grid,.case-grid{grid-template-columns:1fr 1fr}.portal-project-hero{align-items:flex-start}.portal-page-intro,.portal-detail-head{align-items:flex-start;flex-direction:column}.detail-head-actions{width:100%;justify-content:space-between}}
@media(max-width:560px){.portal-stat-grid,.project-card-grid,.appointment-grid,.case-grid,.portal-form-grid{grid-template-columns:1fr}.portal-welcome{align-items:flex-start;flex-direction:column}.portal-project-row{grid-template-columns:1fr}.portal-project-hero{flex-direction:column}.project-progress-circle{width:110px;height:110px;flex-basis:110px}.quote-action-box{align-items:flex-start;flex-direction:column}.message-bubble{max-width:92%}.member-auth-card{padding:24px}.portal-nav{grid-template-columns:repeat(2,1fr)}.portal-topbar h1{font-size:19px}.portal-content{padding-top:16px}.portal-card{padding:17px}.portal-project-hero{padding:22px}.case-stats>.container{grid-template-columns:repeat(2,1fr)}}
.approval-list{display:grid;gap:12px}.approval-row{display:grid;grid-template-columns:1fr minmax(300px,.7fr);gap:18px;padding:15px;border:1px solid #e1eaf2;border-radius:12px;background:#fbfdff}.approval-row strong{display:block;margin:7px 0 4px;color:#173b62}.approval-row p{margin:0 0 7px;color:#677f94;font-size:12px}.approval-row a{font-size:11px;color:var(--brand);font-weight:750}.approval-row small{display:block;margin-top:7px;color:#657d92}.approval-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.approval-actions form{display:grid;gap:7px}.approval-actions textarea{width:100%;padding:9px;border:1px solid #d7e4ee;border-radius:8px;font-size:11px}.team-list{display:grid}.team-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf2f6}.team-avatar{width:40px;height:40px;border-radius:11px;background:#e8f4ff;color:#1468aa;display:grid;place-items:center;font-weight:800}.team-row>div:nth-child(2){display:grid}.team-row strong{font-size:12px}.team-row small{font-size:10px;color:#7d91a5}.team-row>div:last-child{display:grid;justify-items:end;gap:4px}.link-button{border:0;background:transparent;color:var(--brand);font-size:10px;font-weight:750;cursor:pointer}@media(max-width:700px){.approval-row{grid-template-columns:1fr}.approval-actions{grid-template-columns:1fr}.team-row{grid-template-columns:42px 1fr}.team-row>div:last-child{grid-column:2;justify-items:start}}
.message-attachment{display:inline-flex;margin-top:7px;font-size:11px;font-weight:750;color:var(--brand);text-decoration:none}.message-attachment:hover{text-decoration:underline}.team-grid{align-items:start}.form-hint{margin:-2px 0 6px;color:#7a8fa2;font-size:11px}

/* ============================================================
   V6 — profile pages, contextual landing navigation & transitions
   ============================================================ */
.desktop-nav a[aria-current="page"] { color: var(--brand); }
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.section-action.align-left { text-align: left; }

.footer-grid-v6 { grid-template-columns: 1.2fr .68fr .85fr .95fr 1fr; gap: 34px; }
.footer-link-list a { display:block; margin:8px 0; font-size:13px; color:#d7e5f3; }
.footer-link-list a:hover { color:#fff; transform:translateX(2px); }
.footer-bottom-v6 { justify-content:space-between; }

.profile-page-hero { position:relative; overflow:hidden; padding:118px 0 84px; background:linear-gradient(180deg,#eef8ff,#fff); }
.profile-page-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.profile-page-hero h1 { margin:12px 0 18px; color:var(--navy); font-size:clamp(46px,6vw,72px); line-height:1.02; letter-spacing:-.05em; }
.profile-page-hero p { max-width:690px; color:#607a91; font-size:17px; line-height:1.75; }
.profile-page-orb { position:absolute; border-radius:50%; filter:blur(1px); pointer-events:none; }
.profile-page-orb-a { width:430px; height:430px; right:-100px; top:30px; background:rgba(80,171,245,.13); }
.profile-page-orb-b { width:240px; height:240px; left:-90px; bottom:-90px; background:rgba(8,116,209,.08); }
.profile-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.profile-visual-card { min-height:430px; padding:28px; border-radius:28px; display:flex; flex-direction:column; justify-content:center; }
.profile-visual-card img { width:100%; max-height:340px; object-fit:contain; }
.profile-visual-caption { display:grid; gap:3px; margin-top:18px; color:#0b315e; }
.profile-visual-caption span { color:#738a9f; font-size:12px; }
.profile-story-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:start; }
.profile-story-grid .section-heading { margin:0; }
.profile-rich-copy { color:#506a81; font-size:16px; line-height:1.85; }
.profile-rich-copy h2 { color:#0b315e; margin:0 0 12px; }
.profile-values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.profile-value-card { padding:25px; border:1px solid #dce8f2; border-radius:17px; background:#fff; box-shadow:0 12px 34px rgba(8,47,86,.05); }
.profile-value-card>span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#eaf5ff; color:var(--brand); font-size:11px; font-weight:900; }
.profile-value-card h3 { margin:17px 0 8px; color:#0b315e; font-size:17px; }
.profile-value-card p { margin:0; color:#687f94; font-size:13px; line-height:1.65; }
.profile-stats { margin-top:26px; }
.profile-logo-strip { background:#fff; }
.profile-cta-section { padding-top:35px; }

.contact-hero-grid { grid-template-columns:.85fr 1.15fr; }
.contact-channel-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.contact-channel { min-height:145px; display:flex; flex-direction:column; justify-content:center; padding:22px; border-radius:18px; color:#173c63; }
.contact-channel>span { width:38px; height:38px; display:grid; place-items:center; margin-bottom:14px; border-radius:11px; background:#e6f3ff; color:var(--brand); font-weight:900; }
.contact-channel small { color:#7c90a4; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:850; }
.contact-channel strong { margin-top:5px; color:#0b315e; font-size:13px; line-height:1.45; }
.contact-detail-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:62px; align-items:start; }
.contact-detail-copy h2 { margin:9px 0 14px; color:#0b315e; font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-.035em; }
.contact-process-list { display:grid; gap:13px; margin-top:30px; }
.contact-process-list>div { display:grid; grid-template-columns:48px 1fr; gap:14px; padding:16px; border:1px solid #dce8f2; border-radius:14px; background:#fff; }
.contact-process-list>div>span { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:#eaf5ff; color:var(--brand); font-size:11px; font-weight:900; }
.contact-process-list strong { color:#0b315e; }
.contact-process-list p { margin:4px 0 0; color:#70869a; font-size:12px; line-height:1.55; }
.contact-page-form { padding:30px; border:1px solid #dce8f2; box-shadow:0 18px 50px rgba(8,47,86,.08); border-radius:18px; }
.form-head { margin-bottom:22px; }
.form-head h3 { margin:7px 0 6px; color:#0b315e; font-size:26px; }
.form-head p { margin:0; color:#72879b; font-size:13px; }
.contact-faq-list { margin-top:25px; }

.homepage-products, .homepage-cases, .homepage-insights { scroll-margin-top:120px; }
.homepage-partners { border-top:1px solid #e7f0f8; border-bottom:1px solid #e7f0f8; }

/* Never leave an entire page visually blank while navigation is changing. */
.page-main { animation:pageEnter .42s cubic-bezier(.2,.72,.2,1) both; }
@keyframes pageEnter { from { opacity:.18; transform:translateY(8px); } to { opacity:1; transform:none; } }
.page-transition { position:fixed; inset:0; z-index:99999; pointer-events:none; visibility:hidden; overflow:hidden; }
.page-transition::before { content:''; position:absolute; inset:0; transform:translateX(-102%); background:linear-gradient(115deg,#052f60,#0874d1 60%,#53b6ff); transition:transform .22s cubic-bezier(.7,0,.3,1); }
.page-transition span { position:absolute; left:50%; top:50%; z-index:2; width:30px; height:30px; margin:-15px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; opacity:0; animation:pageSpin .75s linear infinite; }
body.page-leaving .page-transition { visibility:visible; }
body.page-leaving .page-transition::before { transform:translateX(0); }
body.page-leaving .page-transition span { opacity:1; transition:opacity .08s .1s; }
@keyframes pageSpin { to { transform:rotate(360deg); } }
body.page-leaving { overflow:hidden; }

/* Common cards on secondary pages receive the same motion language. */
.reveal-auto { opacity:0; transform:translateY(14px); transition:opacity .52s ease,transform .52s ease; }
.reveal-auto.is-visible { opacity:1; transform:none; }

@media(max-width:1180px){
    .footer-grid-v6 { grid-template-columns:1.2fr repeat(2,1fr); }
    .footer-grid-v6>div:last-child { grid-column:2 / 4; }
    .profile-values-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px){
    .profile-page-grid,.profile-story-grid,.contact-hero-grid,.contact-detail-grid { grid-template-columns:1fr; gap:36px; }
    .profile-page-hero { padding:86px 0 60px; }
    .profile-visual-card { min-height:340px; }
}
@media(max-width:760px){
    .footer-grid-v6 { grid-template-columns:1fr; }
    .footer-grid-v6>div:last-child { grid-column:auto; }
    .profile-values-grid,.contact-channel-grid { grid-template-columns:1fr; }
    .profile-page-hero h1 { font-size:clamp(40px,13vw,56px); }
    .profile-visual-card { min-height:280px; }
    .contact-page-form { padding:22px; }
}
@media(prefers-reduced-motion:reduce){
    .page-main,.reveal,.reveal-auto,.page-transition::before,.page-transition span { animation:none!important; transition:none!important; transform:none!important; opacity:1!important; }
    .page-transition { display:none!important; }
}
section[id] { scroll-margin-top: 118px; }

/* V9 operational client area */
.portal-sidebar-mobile-head{display:none}.portal-menu-button{display:none;border:0;background:transparent;color:#0b315e;font-size:24px;cursor:pointer}.portal-top-title{display:flex;align-items:center;gap:12px}.portal-notification-button{position:relative}.portal-notification-button em,.portal-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e73647;color:#fff;font-size:9px;font-style:normal;font-weight:800}.portal-notification-button em{position:absolute;right:-5px;top:-5px;border:2px solid #fff}.portal-nav-badge{margin-left:auto}.portal-mobile-backdrop{display:none}.portal-live-toast{position:fixed;right:22px;top:22px;z-index:2100;min-width:260px;max-width:360px;padding:14px 16px;border-radius:13px;background:#0b315e;color:#fff;box-shadow:0 20px 50px rgba(3,40,78,.22);border:1px solid rgba(255,255,255,.12)}.portal-live-toast strong,.portal-live-toast span{display:block}.portal-live-toast span{margin-top:3px;color:#c8d8e8;font-size:11px}.project-filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.project-filter-tabs a{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #dce8f2;border-radius:999px;background:#fff;color:#60788e;font-size:11px;font-weight:700}.project-filter-tabs a.active{background:#0b5faf;color:#fff;border-color:#0b5faf}.project-filter-tabs b{display:inline-flex;min-width:20px;height:20px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:rgba(9,94,173,.1);font-size:9px}.project-filter-tabs a.active b{background:rgba(255,255,255,.18)}.project-pic-line{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px;padding:9px 10px;background:#f6faff;border-radius:8px;color:#6c8297;font-size:10px}.project-pic-line strong{color:#153d68}.project-card{position:relative}.project-unread{position:absolute;right:14px;top:50px;padding:5px 8px;border-radius:999px;background:#eaf5ff;color:#086fc9;font-size:9px;font-weight:800}.message-thread{scroll-behavior:smooth}.portal-topbar{position:sticky;top:0;z-index:15;background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}
@media(max-width:820px){body.portal-menu-open{overflow:hidden}.portal-sidebar{position:fixed;left:0;top:0;bottom:0;width:min(330px,86vw);height:100dvh;transform:translateX(-105%);transition:transform .22s ease;padding:16px 15px 18px;z-index:2000;box-shadow:22px 0 55px rgba(4,31,62,.2)}body.portal-menu-open .portal-sidebar{transform:none}.portal-mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(4,22,41,.38);backdrop-filter:blur(2px);z-index:1990;opacity:0;pointer-events:none;transition:.2s}body.portal-menu-open .portal-mobile-backdrop{opacity:1;pointer-events:auto}.portal-sidebar-mobile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px 10px;border-bottom:1px solid rgba(255,255,255,.1);font-size:11px;color:#bcd0e3}.portal-sidebar-mobile-head button{border:0;background:transparent;color:#fff;font-size:25px}.portal-brand{justify-content:flex-start}.portal-company{display:block}.portal-nav{display:grid;grid-template-columns:1fr;overflow:visible}.portal-nav a{min-width:0;justify-content:flex-start}.portal-sidebar-bottom{display:grid}.portal-menu-button{display:inline-flex}.portal-main{min-width:0}.portal-topbar{padding:12px 14px}.portal-content{padding:18px 14px 36px}.portal-user-chip div{display:none}.portal-top-actions{gap:8px}.portal-live-toast{left:14px;right:14px;top:14px;min-width:0;max-width:none}.project-filter-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.project-filter-tabs a{white-space:nowrap}.project-card-grid{grid-template-columns:1fr}.portal-project-hero{padding:18px}.portal-tabs-grid,.portal-grid-2{grid-template-columns:1fr}.message-form>div{align-items:stretch;flex-direction:column}.message-form input[type=file]{max-width:100%}}
@media(max-width:560px){.portal-topbar h1{font-size:17px}.portal-mobile-title{font-size:9px}.portal-card{border-radius:13px}.project-card{padding:16px}.portal-project-hero{border-radius:14px}.portal-project-hero h2{font-size:24px}.project-hero-meta{display:grid;grid-template-columns:1fr}.message-bubble{max-width:94%}}
.live-chat-trigger{position:relative}.live-chat-unread{position:absolute;right:-4px;top:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e73546;color:#fff;border:2px solid #fff;font-size:9px;font-style:normal;font-weight:900;display:inline-flex;align-items:center;justify-content:center}.live-chat-trigger.has-unread{animation:chatPulse 1.8s ease-in-out infinite}@keyframes chatPulse{0%,100%{box-shadow:0 16px 34px rgba(4,74,136,.26)}50%{box-shadow:0 16px 42px rgba(8,116,209,.46)}}


/* =============================
   V10 Client Area UI / Responsive refinement
   ============================= */
.portal-body{
    --portal-sidebar:244px;
    --portal-content-max:1460px;
    --portal-border:#dce8f2;
    --portal-muted:#6f8499;
    --portal-heading:#0b315e;
    background:#f3f7fb;
    overflow-x:hidden;
    font-size:14px;
}
.portal-shell{grid-template-columns:var(--portal-sidebar) minmax(0,1fr);min-height:100dvh}
.portal-sidebar{height:100dvh;padding:22px 16px 18px;background:linear-gradient(180deg,#0a3b73 0%,#05284e 58%,#031d38 100%);overflow-y:auto;overflow-x:hidden}
.portal-brand{min-height:58px;padding:2px 8px 18px;border-bottom:1px solid rgba(255,255,255,.10)}
.portal-brand img{width:156px;max-width:100%;height:auto;max-height:42px;object-fit:contain;object-position:left center}
.portal-company{padding:18px 10px 11px;gap:3px}
.portal-company small{font-size:9px;letter-spacing:.13em;color:#86c9ff}
.portal-company strong{font-size:14px;line-height:1.35}
.portal-company span{font-size:11px;color:#afc3d7}
.portal-nav{gap:1px;margin-top:8px}
.portal-nav a{position:relative;min-height:40px;gap:11px;padding:9px 10px;border-radius:0;background:transparent;color:#cbd9e8;font-size:12px;font-weight:650;box-shadow:none}
.portal-nav a b{width:17px;display:inline-grid;place-items:center;color:#8bcfff;font-size:12px;font-weight:800}
.portal-nav a:hover{background:linear-gradient(90deg,rgba(60,169,255,.10),rgba(60,169,255,0));color:#fff}
.portal-nav a.active{background:linear-gradient(90deg,rgba(53,164,255,.16),rgba(53,164,255,0));color:#fff;box-shadow:none}
.portal-nav a.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:0;background:#4bb8ff}
.portal-nav a.active b{color:#69c5ff}
.portal-sidebar-bottom{padding-top:14px;margin-top:auto}
.portal-sidebar-bottom a,.portal-sidebar-bottom button{padding:8px 10px;border-radius:0;font-size:11px}
.portal-sidebar-bottom a:hover,.portal-sidebar-bottom button:hover{background:linear-gradient(90deg,rgba(255,255,255,.07),transparent)}
.portal-main{min-width:0;min-height:100dvh;display:flex;flex-direction:column}
.portal-topbar{min-height:74px;padding:13px clamp(20px,2.5vw,38px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--portal-border)}
.portal-topbar h1{margin:3px 0 0;color:var(--portal-heading);font-size:22px;line-height:1.2;letter-spacing:-.02em}
.portal-mobile-title{font-size:9px;letter-spacing:.13em;color:#6c849c}
.portal-top-actions{gap:9px}
.portal-icon-btn{width:40px;height:40px;border-radius:10px}
.portal-user-chip{min-height:44px;padding:5px 11px 5px 5px;border-radius:11px}
.portal-user-chip>span{width:34px;height:34px;border-radius:9px}
.portal-user-chip strong{font-size:11px}.portal-user-chip small{font-size:9px}
.portal-content{box-sizing:border-box;flex:1;width:100%;max-width:var(--portal-content-max);padding:28px clamp(22px,2.5vw,40px) 34px;margin:0 auto}
.portal-content>*{min-width:0}
.portal-footer{box-sizing:border-box;width:100%;margin-top:auto;padding:0 clamp(22px,2.5vw,40px) 22px;color:#7c90a3;font-size:10px;text-align:initial}
.portal-footer-inner{width:100%;max-width:var(--portal-content-max);margin:0 auto;padding-top:15px;border-top:1px solid #dbe7f0;display:flex;align-items:center;justify-content:space-between;gap:18px}
.portal-footer-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}.portal-clock{font-variant-numeric:tabular-nums}.portal-footer-separator{color:#b7c5d1}
.portal-welcome{padding:24px 26px;border-radius:14px;box-shadow:0 10px 26px rgba(8,47,86,.045)}
.portal-welcome .eyebrow,.portal-card .eyebrow,.portal-detail-head .eyebrow,.portal-page-intro .eyebrow{font-size:9px;letter-spacing:.12em}
.portal-welcome h2{margin:6px 0 5px;font-size:25px;line-height:1.2}.portal-welcome p{font-size:13px;line-height:1.55}
.portal-stat-grid{gap:12px;margin:16px 0}.portal-stat{padding:17px 18px;border-radius:12px;box-shadow:0 6px 18px rgba(8,47,86,.035)}
.portal-stat span{font-size:9px;letter-spacing:.09em}.portal-stat strong{font-size:27px}.portal-stat small{font-size:10px}
.portal-grid-2,.portal-tabs-grid,.checkout-grid{gap:14px;margin:14px 0}
.portal-card{width:100%;box-sizing:border-box;padding:20px;border-radius:13px;border-color:var(--portal-border);box-shadow:0 7px 22px rgba(8,47,86,.035)}
.portal-card h3{font-size:16px;line-height:1.3}.portal-card-head{margin-bottom:12px}.portal-card-head>a{font-size:11px}
.portal-page-intro,.portal-detail-head{align-items:center;margin-bottom:18px}
.portal-page-intro h2,.portal-detail-head h2{margin:4px 0 5px;font-size:25px;line-height:1.18;letter-spacing:-.02em}.portal-page-intro p,.portal-detail-head p{font-size:12px;line-height:1.55}
.form-card{width:100%;max-width:1180px;margin-right:auto}
.portal-form{gap:15px}.portal-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 14px}
.portal-form label,.portal-form-grid label,.portal-filter-grid label,.mini-upload label{display:grid;gap:6px;color:#405a72;font-size:11px;line-height:1.35;font-weight:750}
.portal-form input,.portal-form textarea,.portal-form select,.portal-form-grid input,.portal-form-grid textarea,.portal-form-grid select,.portal-filter-grid input,.portal-filter-grid select{box-sizing:border-box;width:100%;min-height:42px;padding:10px 12px;border:1px solid #d3e1ec;border-radius:8px;background:#fff;color:#183451;font:inherit;font-size:12px;outline:none;transition:border-color .16s,box-shadow .16s,background .16s}
.portal-form textarea,.portal-form-grid textarea{min-height:112px;resize:vertical;line-height:1.55}
.portal-form input:focus,.portal-form textarea:focus,.portal-form select:focus,.portal-form-grid input:focus,.portal-form-grid textarea:focus,.portal-form-grid select:focus,.portal-filter-grid input:focus,.portal-filter-grid select:focus{border-color:#5aaae6;box-shadow:0 0 0 3px rgba(8,116,209,.08)}
.portal-form input[type=file],.portal-form-grid input[type=file]{padding:7px 9px;background:#fbfdff}
.portal-filter-grid{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(170px,1fr) minmax(170px,1fr) auto;gap:14px;align-items:end}
.portal-filter-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-height:42px}
.portal-filter-actions .btn{min-width:84px}
.portal-table-wrap{width:100%;max-width:100%;overflow:auto;border-radius:8px;-webkit-overflow-scrolling:touch}
.portal-table{width:100%;min-width:760px;table-layout:auto}
.portal-table th{padding:11px 12px;font-size:9px;letter-spacing:.085em;white-space:nowrap}.portal-table td{padding:13px 12px;font-size:11px;line-height:1.45}.portal-table tbody tr:last-child td{border-bottom:0}
.portal-empty{font-size:11px;padding:22px 10px}
.status-badge{font-size:9px;padding:5px 8px}
.live-chat{right:24px;bottom:22px}.live-chat-trigger{height:46px;min-width:92px;border-radius:12px;box-shadow:0 12px 28px rgba(4,74,136,.22)}
.live-chat-panel{bottom:56px;border-radius:14px}.live-chat-panel header{padding:14px 16px}.live-chat-start{padding:18px}.live-chat-start p{font-size:12px;line-height:1.55}.live-chat-messages{height:min(360px,45vh)}
@media(max-width:1180px){.portal-body{--portal-sidebar:226px}.portal-content{padding-left:24px;padding-right:24px}.portal-footer{padding-left:24px;padding-right:24px}.portal-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-filter-actions{justify-content:flex-start}}
@media(max-width:900px){.portal-shell{display:block}.portal-sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,86vw);height:100dvh;transform:translateX(-105%);transition:transform .22s ease;padding:16px 14px 18px;z-index:2000;box-shadow:22px 0 55px rgba(4,31,62,.2)}body.portal-menu-open .portal-sidebar{transform:none}.portal-mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(4,22,41,.38);backdrop-filter:blur(2px);z-index:1990;opacity:0;pointer-events:none;transition:.2s}body.portal-menu-open .portal-mobile-backdrop{opacity:1;pointer-events:auto}.portal-sidebar-mobile-head{display:flex}.portal-menu-button{display:inline-flex}.portal-main{width:100%}.portal-topbar{padding:11px 16px}.portal-content{padding:20px 16px 28px}.portal-footer{padding:0 16px 18px}.portal-user-chip div{display:none}.portal-brand{justify-content:flex-start}.portal-company{display:block}.portal-nav{display:grid;grid-template-columns:1fr;overflow:visible}.portal-nav a{min-width:0;justify-content:flex-start}.portal-sidebar-bottom{display:grid}.portal-grid-2,.portal-tabs-grid,.checkout-grid{grid-template-columns:1fr}.form-card{max-width:none}.project-card-grid{grid-template-columns:1fr}.portal-project-hero{padding:18px}.portal-footer-inner{align-items:flex-start;flex-direction:column;gap:5px}.portal-footer-meta{justify-content:flex-start;white-space:normal}.live-chat{right:14px;bottom:14px}}
@media(max-width:640px){.portal-topbar h1{font-size:18px}.portal-mobile-title{font-size:8px}.portal-content{padding:16px 12px 24px}.portal-footer{padding:0 12px 16px}.portal-card{padding:16px;border-radius:11px}.portal-welcome{padding:19px;align-items:flex-start;flex-direction:column}.portal-welcome h2{font-size:22px}.portal-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.portal-stat{padding:14px}.portal-stat strong{font-size:24px}.portal-form-grid,.portal-filter-grid{grid-template-columns:1fr}.portal-filter-actions{justify-content:flex-start}.portal-filter-actions .btn{flex:1}.portal-detail-head,.portal-page-intro{align-items:flex-start;flex-direction:column}.detail-head-actions{width:100%;justify-content:flex-start}.portal-table-wrap{margin-left:-4px;margin-right:-4px;width:calc(100% + 8px)}.portal-table{min-width:680px}.portal-footer-meta{display:grid;gap:3px}.portal-footer-separator{display:none}.live-chat-panel{width:min(360px,calc(100vw - 24px))}.live-chat-trigger{min-width:48px;padding:0 13px}.live-chat-trigger>span:nth-child(2){display:none}}
@media(max-width:420px){.portal-stat-grid{grid-template-columns:1fr 1fr}.portal-stat{min-width:0}.portal-top-actions{gap:6px}.portal-icon-btn{width:38px;height:38px}.portal-user-chip{padding:4px}.portal-user-chip>span{width:32px;height:32px}.portal-table{min-width:620px}}

/* ============================================================
   V12 — calmer typography, authenticated client marker & popup
   ============================================================ */
body{font-weight:var(--body-weight,400)}
strong,b{font-weight:600}
h1,h2,h3,h4,h5,h6{font-weight:var(--heading-weight,650)}
.hero-copy h1,.cs-copy h1,.page-hero h1,.article-hero h1,.article-heading-copy h1,.product-detail-hero h1,.catalog-hero h1,.service-category-grid h1,.detail-hero h1,.content-page-hero h1,.case-detail-hero h1,.profile-page-hero h1,.contact-page-hero h1{font-weight:var(--heading-weight,650);font-size:clamp(2.25rem,4.35vw,4rem);letter-spacing:-.036em}
.section-heading h2,.cs-about-copy h2,.contact-copy h2,.contact-detail-copy h2,.builder-hero-grid h2,.builder-image-text h2,.builder-box h2,.case-story h2,.faq-category h2,.builder-cta h2{font-weight:var(--heading-weight,650);font-size:clamp(1.7rem,2.8vw,2.75rem);letter-spacing:-.024em}
.page-main h3,.portal-content h3,.service-card h3,.cs-service-card h3,.product-body h3,.blog-body h3,.subservice-body h3,.catalog-service-card h2{font-weight:600}
.page-main :is(p,li,dd),.article-content-v8,.rich-copy{font-weight:var(--body-weight,400)}
.desktop-nav a,.nav-parent-link,.mobile-nav a{font-weight:var(--nav-weight,600)}
.btn,.newsletter-form button,.live-chat-trigger,.live-chat-compose button{font-weight:var(--button-weight,600)}
.form-grid span,.inquiry-form label,.portal-form label,.portal-form-grid label,.portal-filter-grid label,.mini-upload label{font-weight:var(--label-weight,600)}
.eyebrow,.strip-label,.catalog-kicker,.article-category,.nav-feature-label{font-weight:600}
.nav-mega-head strong,.nav-service-parent strong,.nav-menu-card strong,.footer-grid h3,.sidebar-widget h3,.sidebar-search label{font-weight:600}
.nav-feature-card strong,.article-author-card h3{font-weight:650}
.stats-bar strong,.cs-stats strong,.portal-stat strong{font-weight:700}
.back-link,.subservice-link,.product-body a,.blog-body a,.article-tags a,.article-author-card a{font-weight:600}
.article-content-v8 h2{font-weight:650}.article-content-v8 h3{font-weight:600}
.article-author-mini strong,.sidebar-recent-list strong{font-weight:600}
.article-share-card>small,.article-share-buttons a,.article-share-buttons button{font-weight:600}

/* Consistent secondary-page spacing and surfaces. */
.page-main>section:not(.hero-section):not(.cs-hero):not(.catalog-hero):not(.content-page-hero):not(.article-hero-v8):not(.product-detail-hero):not(.case-detail-hero):not(.service-category-hero):not(.detail-hero){color:var(--text)}
.catalog-service-card,.subservice-card,.promo-card,.product-card,.blog-card,.testimonial-card,.case-card,.contact-page-form,.faq-list details{border-radius:var(--ui-radius);box-shadow:0 10px 30px color-mix(in srgb,var(--text) 5%,transparent)}
.builder-cta.style-gradient,.cs-contact-card,.sidebar-service-cta{color:#fff;background:linear-gradient(135deg,var(--brand-2),var(--brand))}
.builder-cta.style-gradient :is(h2,p,.eyebrow),.cs-contact-card :is(h2,p,.eyebrow){color:#fff!important}
.builder-cta.style-gradient p,.cs-contact-card p{opacity:.88}

/* Logged-in Client Area marker in public header. */
.client-area-authenticated{display:inline-flex!important;align-items:center;gap:8px;min-height:42px;padding:5px 10px 5px 6px!important;border:1px solid color-mix(in srgb,var(--success) 30%,var(--border))!important;border-radius:calc(var(--ui-radius) - 4px);background:color-mix(in srgb,var(--success) 6%,var(--surface));color:var(--text)!important}
.client-area-authenticated::after{display:none!important}
.client-login-avatar{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;font-size:.76rem;font-weight:650}
.client-login-copy{display:grid;gap:0;line-height:1.12}.client-login-copy strong{font-size:.78rem;font-weight:600}.client-login-copy small{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.66rem;font-weight:400}
.client-login-status{width:8px;height:8px;flex:0 0 auto;border:2px solid var(--surface);border-radius:50%;background:var(--success);box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 18%,transparent)}
.mobile-client-authenticated{display:flex!important;align-items:center!important;gap:10px!important}.mobile-client-authenticated>span:nth-child(2){display:grid;gap:2px}.mobile-client-authenticated strong{font-size:.94rem;font-weight:600}.mobile-client-authenticated small{display:block;color:var(--muted);font-size:.76rem;font-weight:400}

/* Global information / promotion popup. */
body.popup-open{overflow:hidden}
.global-popup[hidden]{display:none!important}
.global-popup{position:fixed;inset:0;z-index:120000;display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .22s ease}
.global-popup.is-open{opacity:1;pointer-events:auto}
.global-popup-backdrop{position:absolute;inset:0;background:rgba(5,16,30,.58);backdrop-filter:blur(7px)}
.global-popup-card{position:relative;z-index:1;width:min(880px,calc(100vw - 40px));max-height:min(760px,calc(100dvh - 48px));overflow:auto;display:grid;grid-template-columns:minmax(250px,.86fr) minmax(0,1.14fr);border:1px solid var(--border);border-radius:calc(var(--ui-radius) + 6px);background:var(--surface);color:var(--text);box-shadow:0 34px 90px rgba(3,22,43,.28);transform:translateY(18px) scale(.985);transition:transform .25s cubic-bezier(.2,.75,.2,1)}
.global-popup.is-open .global-popup-card{transform:none}
.global-popup-card.no-image,.global-popup-card.popup-layout-centered,.global-popup-card.popup-layout-compact{grid-template-columns:1fr}
.global-popup-card.popup-layout-compact{width:min(620px,calc(100vw - 40px))}
.global-popup-media{min-height:360px;background:color-mix(in srgb,var(--brand) 8%,var(--surface));overflow:hidden}.global-popup-media img{width:100%;height:100%;min-height:360px;object-fit:cover}
.global-popup-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,4vw,46px)}
.popup-layout-centered .global-popup-content{text-align:center;align-items:center;padding:clamp(32px,5vw,58px)}
.popup-layout-centered .global-popup-copy{max-width:640px}.popup-layout-compact .global-popup-content{padding:28px 30px}
.global-popup-eyebrow{display:inline-flex;width:max-content;margin-bottom:10px;color:var(--brand);font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.global-popup-content h2{margin:0;color:var(--text);font-size:clamp(1.7rem,3vw,2.65rem);font-weight:var(--heading-weight,650);line-height:1.08;letter-spacing:-.028em}
.global-popup-copy{margin:14px 0 0;color:var(--muted);font-size:.98rem;line-height:1.7;font-weight:var(--body-weight,400)}
.rich-popup-copy>*:first-child{margin-top:0}.rich-popup-copy>*:last-child{margin-bottom:0}.rich-popup-copy p{color:inherit}.rich-popup-copy a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.global-popup-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.global-popup-actions .btn{min-height:44px}
.global-popup-close{position:absolute;right:14px;top:14px;z-index:4;width:38px;height:38px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--text);font-size:24px;font-weight:400;line-height:1;cursor:pointer;backdrop-filter:blur(10px)}
.global-popup-promo-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:16px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--brand) 7%,var(--surface));color:var(--muted);font-size:.82rem}.global-popup-promo-meta strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.popup-theme-brand{border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}.popup-theme-brand .global-popup-content{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 6%,var(--surface)),var(--surface))}
.popup-theme-dark{--popup-local-bg:#0b1726;--popup-local-text:#eef6ff;--popup-local-muted:#afc2d5;background:var(--popup-local-bg);color:var(--popup-local-text);border-color:#263b51}.popup-theme-dark .global-popup-content h2{color:var(--popup-local-text)}.popup-theme-dark .global-popup-copy{color:var(--popup-local-muted)}.popup-theme-dark .global-popup-close{background:#15283c;color:#fff;border-color:#31465b}.popup-theme-dark .global-popup-promo-meta{background:#10253a;border-color:#29445e}.popup-theme-dark .global-popup-promo-meta strong{color:#fff}
.popup-theme-soft{background:color-mix(in srgb,var(--surface) 84%,var(--page-bg))}

@media(max-width:980px){
    .desktop-nav{gap:18px}.client-login-copy small{display:none}.client-area-authenticated{padding-right:8px!important}
}
@media(max-width:760px){
    .global-popup{padding:14px}.global-popup-card{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 28px);grid-template-columns:1fr}.global-popup-media{min-height:190px;max-height:240px}.global-popup-media img{min-height:190px;max-height:240px}.global-popup-content{padding:26px 22px}.global-popup-content h2{font-size:clamp(1.55rem,7vw,2rem)}.global-popup-actions{display:grid;grid-template-columns:1fr}.global-popup-actions .btn{width:100%}
    .hero-copy h1,.cs-copy h1,.page-hero h1,.article-hero h1,.article-heading-copy h1,.product-detail-hero h1,.catalog-hero h1,.service-category-grid h1,.detail-hero h1,.content-page-hero h1,.case-detail-hero h1{font-size:clamp(2rem,10vw,3rem)}
}
@media(prefers-reduced-motion:reduce){.global-popup,.global-popup-card{transition:none!important}}

/* V13 — unified service/order/project/payment flow */
.portal-muted,.table-muted{color:#71879a}.form-error{display:block;margin-top:7px;color:#c73d4f;font-size:11px}.portal-info-box{padding:15px 16px;border:1px solid #d9e7f2;border-radius:12px;background:#f7fbff;color:#49677f}.portal-info-box p{margin:.35rem 0 0}.payment-method-fieldset{margin:4px 0 16px;padding:0;border:0}.payment-method-fieldset legend{margin-bottom:9px;color:#173c64;font-size:12px;font-weight:700}.payment-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payment-method-card{position:relative;display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid #d8e5ef;border-radius:12px;background:#fff;cursor:pointer;transition:.18s}.payment-method-card:hover{border-color:#9fc8e8;box-shadow:0 8px 24px rgba(7,73,128,.06)}.payment-method-card:has(input:checked){border-color:var(--brand);background:#f4faff;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 11%,transparent)}.payment-method-card input{margin-top:3px;accent-color:var(--brand)}.payment-method-copy{display:grid;gap:4px}.payment-method-copy b{font-size:13px;color:#143b66}.payment-method-copy small{font-size:11px;line-height:1.45;color:#71879a}.selected-payment-method{border-left:3px solid var(--brand)}.gateway-payment-card{border:1px solid rgba(8,116,209,.25);background:linear-gradient(135deg,#f8fcff,#edf7ff)}.gateway-payment-row,.order-project-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}.gateway-payment-row h3,.order-project-summary h3{margin:.25rem 0}.gateway-payment-row p,.order-project-summary p{margin:0;color:#61748c}.order-project-bridge{background:linear-gradient(135deg,#fbfdff,#f1f8ff)}.progress-line.large{margin-top:18px}.project-order-ref{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:0 0 10px;padding:9px 10px;border-radius:8px;background:#f7f9fc;color:#6d8193;font-size:10px}.project-order-ref b{color:#173f69}.project-order-ref em{font-style:normal;color:#0a6b50;font-weight:700}.quote-payment-confirmation{align-items:flex-start}.quote-action-stack{display:grid!important;min-width:min(420px,100%);gap:10px!important}.compact-form{gap:8px}.portal-table .table-sub{display:block;margin-top:3px;color:#7b8fa1;font-size:10px}.status-badge.pending_payment{background:#fff2d8;color:#8a5b00}.status-badge.paid,.status-badge.verified{background:#e7f7ef;color:#0b7655}.status-badge.unpaid,.status-badge.rejected{background:#fdecef;color:#a73143}.status-badge.partial{background:#fff3da;color:#956100}
@media(max-width:760px){.payment-method-grid{grid-template-columns:1fr}.gateway-payment-row,.order-project-summary{align-items:flex-start;flex-direction:column}.quote-action-stack{min-width:0;width:100%}}

/* ============================================================
   V14 — contrast-safe theme system, project detail tabs, UI polish
   ============================================================ */

/* Global typography and theme surfaces */
html,body{background:var(--page-bg);color:var(--text)}
body{font-family:var(--font-body);font-size:var(--base-font-size);font-weight:var(--body-weight)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--heading-weight);color:var(--text)}
.container{width:min(var(--content-max),calc(100% - 40px))}
.page-main{background:var(--page-bg);color:var(--text)}
.section,.builder-section,.detail-intro,.inquiry-section,.profile-logo-strip,.testimonial-section,.cs-section{color:var(--text)}
.section-soft,.process-section,.inquiry-section{background:color-mix(in srgb,var(--surface) 82%,var(--page-bg))}
.section-heading h2,.section-heading h3{color:var(--text)}
.section-heading p,.rich-copy,.legal-copy,.profile-rich-copy{color:var(--muted)}

/* Header/navigation always uses a readable surface pair. */
.site-header{background:color-mix(in srgb,var(--page-bg) 86%,transparent)}
.site-header.is-scrolled{border-bottom-color:var(--border);box-shadow:0 8px 28px color-mix(in srgb,var(--text) 8%,transparent)}
.nav-shell{background:color-mix(in srgb,var(--surface-raised) 94%,transparent);border-color:var(--border);box-shadow:0 8px 30px color-mix(in srgb,var(--text) 6%,transparent)}
.desktop-nav a{color:var(--surface-text);font-weight:var(--nav-weight)}
.desktop-nav a[aria-current="page"]{color:var(--brand)}
.menu-toggle span{background:var(--surface-text)}
.mobile-nav{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}

/* Buttons: contrast is derived from the configured palette at runtime. */
.btn{font-weight:var(--button-weight)}
.btn-primary{color:var(--on-brand-gradient)!important;background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));border-color:color-mix(in srgb,var(--brand-safe-a) 72%,var(--border));box-shadow:0 10px 24px color-mix(in srgb,var(--brand-safe-a) 24%,transparent)}
.btn-primary:hover{filter:brightness(.98)}
.btn-outline{color:var(--brand);background:var(--surface-raised);border-color:color-mix(in srgb,var(--brand) 42%,var(--border))}
.btn-white{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}
.btn-dark{background:var(--brand-safe-b);color:var(--on-brand-gradient)}
.btn-outline.light{color:var(--on-brand-gradient);border-color:color-mix(in srgb,var(--on-brand-gradient) 52%,transparent);background:transparent}

/* Generic card/surface normalization. */
:is(.service-card,.cs-service-card,.product-card,.blog-card,.testimonial-card,.case-card,.catalog-service-card,.subservice-card,.pricing-card,.builder-feature-card,.requirements-list article,.faq-list details,.contact-page-form,.contact-process-list>div,.profile-value-card,.contact-channel,.tracking-result,.glass-panel,.style-glass,.style-soft){background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}
:is(.service-card,.cs-service-card,.product-card,.blog-card,.testimonial-card,.case-card,.catalog-service-card,.subservice-card,.pricing-card,.builder-feature-card,.requirements-list article,.faq-list details,.contact-page-form,.contact-process-list>div,.profile-value-card,.contact-channel) :is(h2,h3,h4,strong,summary){color:var(--surface-text)}
:is(.service-card,.cs-service-card,.product-card,.blog-card,.testimonial-card,.case-card,.catalog-service-card,.subservice-card,.pricing-card,.builder-feature-card,.requirements-list article,.faq-list details,.contact-page-form,.contact-process-list>div,.profile-value-card,.contact-channel) :is(p,small){color:var(--surface-muted)}

/* Public service/catalog pages. */
.catalog-hero,.service-category-hero,.detail-hero,.content-page-hero,.case-detail-hero,.profile-page-hero{background:radial-gradient(circle at 84% 20%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 30%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 74%,var(--page-bg)),var(--page-bg));border-color:var(--border)}
.catalog-hero h1,.service-category-grid h1,.detail-hero h1,.content-page-hero h1,.case-detail-hero h1,.profile-page-hero h1{color:var(--text)}
.catalog-hero p,.service-category-grid p,.detail-tagline,.content-page-hero p,.case-detail-hero p,.profile-page-hero p{color:var(--muted)}
.detail-meta span,.subservice-meta span,.promo-code,.service-tools{background:var(--surface-raised);color:var(--surface-muted);border-color:var(--border)}
.detail-price-card{background:var(--surface-raised);color:var(--surface-text);border:1px solid var(--border)}
.detail-price-card h3,.detail-price-card>strong{color:var(--surface-text)}
.detail-price-card>small,.detail-price-card>span,.detail-price-card p{color:var(--surface-muted)}
.builder-hero{background:linear-gradient(180deg,var(--page-bg),color-mix(in srgb,var(--surface) 76%,var(--page-bg)))}
.builder-hero-grid h2,.builder-image-text h2,.builder-box h2,.builder-feature-card h3,.process-grid h3,.requirements-list h3,.faq-list summary,.inquiry-grid h2{color:var(--text)}
.builder-hero-grid p,.builder-feature-card p,.process-grid p,.requirements-list p,.faq-list details p,.inquiry-grid>div>p,.inquiry-trust{color:var(--muted)}
.builder-icon,.subservice-placeholder,.catalog-arrow,.contact-channel>span,.profile-value-card>span{background:color-mix(in srgb,var(--brand) 10%,var(--surface-raised));color:var(--brand)}
.inquiry-form{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}
.inquiry-form label{color:var(--surface-text);font-weight:var(--label-weight)}
.inquiry-form input,.inquiry-form textarea,.service-tools input{background:var(--page-bg);color:var(--text);border-color:var(--border)}
.inquiry-form input::placeholder,.inquiry-form textarea::placeholder,.service-tools input::placeholder{color:var(--muted)}

/* Critical colored sections. Their text color is calculated from the actual configured palette. */
.builder-cta.style-gradient,.style-gradient,.cs-contact-card,.sidebar-service-cta,.builder-stats.style-gradient,.stats-bar,.case-stats{background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient)}
.builder-cta.style-dark,.style-dark{background:var(--brand-safe-b);color:var(--on-brand-gradient)}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.style-gradient,.style-dark,.cs-contact-card,.sidebar-service-cta,.builder-stats.style-gradient,.stats-bar,.case-stats) :is(h1,h2,h3,h4,strong,.eyebrow){color:var(--on-brand-gradient)!important}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.style-gradient,.style-dark,.cs-contact-card,.sidebar-service-cta) p{color:var(--on-brand-gradient)!important;opacity:.86}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.style-gradient,.style-dark,.cs-contact-card) .eyebrow.light{color:var(--on-brand-gradient)!important;opacity:.78}
.builder-cta.style-gradient .btn-white,.builder-cta.style-dark .btn-white,.cs-contact-card .btn-white{background:var(--on-brand-gradient);color:var(--brand-safe-b);border-color:color-mix(in srgb,var(--on-brand-gradient) 78%,transparent)}

/* Footer follows configured footer color but never sacrifices contrast. */
.site-footer{background:var(--footer-bg);color:var(--on-footer)}
.footer-grid h3,.footer-bottom,.joglo-credit{color:var(--on-footer)}
.footer-grid p,.footer-link-list a,.footer-grid>div>a:not(.footer-brand),.footer-grid>div>p{color:var(--footer-text)}
.footer-link-list a:hover,.footer-grid>div>a:not(.footer-brand):hover{color:var(--on-footer)}
.newsletter-form input{background:color-mix(in srgb,var(--on-footer) 9%,transparent);color:var(--on-footer);border-color:color-mix(in srgb,var(--on-footer) 24%,transparent)}
.newsletter-form input::placeholder{color:color-mix(in srgb,var(--on-footer) 66%,transparent)}
.newsletter-form button{background:var(--brand-safe-a);color:var(--on-brand);font-weight:var(--button-weight)}

/* Live chat also follows the brand palette. */
.live-chat-trigger{background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient)}
.live-chat-panel{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}
.live-chat-panel header{background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient)}
.live-chat-start p,.chat-message small{color:var(--surface-muted)}
.chat-message{background:color-mix(in srgb,var(--brand) 7%,var(--surface-raised));color:var(--surface-text)}

/* Client Area theme bridge. */
.portal-body{--portal-border:var(--border);--portal-muted:var(--muted);--portal-heading:var(--text);background:var(--page-bg);color:var(--text);font-family:var(--font-body);font-weight:var(--body-weight)}
.portal-sidebar{background:linear-gradient(180deg,var(--brand-safe-b) 0%,color-mix(in srgb,var(--brand-safe-b) 82%,#000) 62%,color-mix(in srgb,var(--brand-safe-a) 64%,#000) 100%);color:var(--on-brand-gradient)}
.portal-brand{border-color:color-mix(in srgb,var(--on-brand-gradient) 14%,transparent)}
.portal-company small,.portal-company strong,.portal-company span{color:var(--on-brand-gradient)}
.portal-company small,.portal-company span{opacity:.72}
.portal-nav a{color:color-mix(in srgb,var(--on-brand-gradient) 78%,transparent);font-weight:var(--nav-weight)}
.portal-nav a b{color:color-mix(in srgb,var(--on-brand-gradient) 76%,var(--brand))}
.portal-nav a:hover,.portal-nav a.active{color:var(--on-brand-gradient);background:color-mix(in srgb,var(--on-brand-gradient) 10%,transparent)}
.portal-nav a.active::before{background:var(--on-brand-gradient)}
.portal-nav a.active b{color:var(--on-brand-gradient)}
.portal-sidebar-bottom{border-color:color-mix(in srgb,var(--on-brand-gradient) 14%,transparent)}
.portal-sidebar-bottom a,.portal-sidebar-bottom button{color:color-mix(in srgb,var(--on-brand-gradient) 72%,transparent)}
.portal-sidebar-bottom a:hover,.portal-sidebar-bottom button:hover{color:var(--on-brand-gradient)}
.portal-topbar{background:color-mix(in srgb,var(--surface-raised) 94%,transparent);border-color:var(--border)}
.portal-topbar h1,.portal-user-chip strong{color:var(--surface-text)}
.portal-mobile-title,.portal-user-chip small{color:var(--surface-muted)}
.portal-icon-btn,.portal-user-chip{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}
.portal-icon-btn{color:var(--brand)}
.portal-user-chip>span{background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient)}
.portal-footer{color:var(--muted)}
.portal-footer-inner{border-color:var(--border)}
.portal-card,.portal-stat,.portal-welcome,.appointment-card,.portal-info-box,.payment-method-card,.project-order-ref{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border);box-shadow:0 7px 22px color-mix(in srgb,var(--text) 4%,transparent)}
.portal-card h3,.portal-stat strong,.portal-welcome h2,.portal-page-intro h2,.portal-detail-head h2,.appointment-card h3,.payment-method-copy b,.project-order-ref b{color:var(--surface-text)}
.portal-card :is(p,small),.portal-stat :is(span,small),.portal-welcome p,.portal-page-intro p,.portal-detail-head p,.appointment-card p,.payment-method-copy small,.project-order-ref{color:var(--surface-muted)}
.portal-card .eyebrow,.portal-welcome .eyebrow,.portal-page-intro .eyebrow,.portal-detail-head .eyebrow{color:var(--brand)}
.portal-form label,.portal-form-grid label,.portal-filter-grid label,.mini-upload label{color:var(--surface-text);font-weight:var(--label-weight)}
.portal-form input,.portal-form textarea,.portal-form select,.portal-form-grid input,.portal-form-grid textarea,.portal-form-grid select,.portal-filter-grid input,.portal-filter-grid select,.mini-upload input,.mini-upload textarea,.approval-actions textarea,.message-form textarea{background:var(--page-bg);color:var(--text);border-color:var(--border)}
.portal-form input::placeholder,.portal-form textarea::placeholder,.portal-form-grid input::placeholder,.portal-form-grid textarea::placeholder,.portal-filter-grid input::placeholder,.mini-upload input::placeholder,.mini-upload textarea::placeholder,.approval-actions textarea::placeholder,.message-form textarea::placeholder{color:var(--muted)}
.portal-table th{color:var(--surface-muted);border-color:var(--border)}
.portal-table td{color:var(--surface-text);border-color:color-mix(in srgb,var(--border) 72%,transparent)}
.portal-empty{color:var(--surface-muted)}
.portal-project-row,.task-row,.project-pic-line{background:color-mix(in srgb,var(--brand) 5%,var(--surface-raised));color:var(--surface-text)}
.task-row small,.timeline-title span,.timeline-item p,.timeline-item small,.file-row small,.update-list article span,.update-list article p,.message-bubble small{color:var(--surface-muted)}
.timeline-item:before{background:var(--border)}
.timeline-item>i{border-color:var(--surface-raised);background:color-mix(in srgb,var(--border) 80%,var(--surface-raised))}
.file-row,.mini-upload,.message-form{border-color:var(--border)}
.message-bubble{background:color-mix(in srgb,var(--brand) 6%,var(--surface-raised));color:var(--surface-text)}
.message-bubble.mine{background:color-mix(in srgb,var(--brand) 13%,var(--surface-raised))}
.approval-row{background:var(--surface-raised);border-color:var(--border);color:var(--surface-text)}
.approval-row strong{color:var(--surface-text)}
.approval-row p,.approval-row small{color:var(--surface-muted)}

/* Project hero gets the same guaranteed contrast as public CTA sections. */
.portal-project-hero{background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient);box-shadow:0 18px 40px color-mix(in srgb,var(--brand-safe-b) 22%,transparent)}
.portal-project-hero h2,.portal-project-hero .back-link,.portal-project-hero p,.project-hero-meta span,.project-hero-meta b,.project-hero-meta a{color:var(--on-brand-gradient)}
.portal-project-hero .back-link,.portal-project-hero p,.project-hero-meta span{opacity:.78}
.portal-project-hero .status-badge{opacity:1}
.project-progress-circle{background:radial-gradient(circle at center,color-mix(in srgb,var(--brand-safe-b) 78%,#000) 58%,transparent 59%),conic-gradient(var(--on-brand-gradient) calc(var(--p)*1%),color-mix(in srgb,var(--on-brand-gradient) 20%,transparent) 0);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-brand-gradient) 20%,transparent)}
.project-progress-circle strong,.project-progress-circle span{color:var(--on-brand-gradient)}

/* Status colors use the matching foreground pair instead of fixed text colors. */
.status-badge.paid,.status-badge.verified,.status-badge.completed,.status-badge.approved{background:var(--success);color:var(--on-success)}
.status-badge.pending,.status-badge.pending_payment,.status-badge.waiting,.status-badge.partial{background:var(--warning);color:var(--on-warning)}
.status-badge.unpaid,.status-badge.rejected,.status-badge.cancelled,.status-badge.failed{background:var(--danger);color:var(--on-danger)}
.status-badge.in_progress,.status-badge.confirmed,.status-badge.active{background:var(--brand-safe-a);color:var(--on-brand)}

/* Project detail: compact tabbed information architecture. */
.project-detail-tabs{display:flex;gap:7px;align-items:center;overflow-x:auto;margin:16px 0 14px;padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);scrollbar-width:thin}
.project-detail-tabs button{flex:0 0 auto;min-height:38px;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:0;border-radius:8px;background:transparent;color:var(--surface-muted);font:inherit;font-size:11px;font-weight:var(--nav-weight);cursor:pointer;transition:background .16s,color .16s,box-shadow .16s}
.project-detail-tabs button:hover{background:color-mix(in srgb,var(--brand) 6%,var(--surface-raised));color:var(--surface-text)}
.project-detail-tabs button[aria-selected="true"]{background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient);box-shadow:0 6px 16px color-mix(in srgb,var(--brand-safe-a) 18%,transparent)}
.project-detail-tabs button b{min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:color-mix(in srgb,currentColor 10%,transparent);font-size:9px;font-weight:700}
.project-detail-tabs button[aria-selected="true"] b{background:color-mix(in srgb,var(--on-brand-gradient) 18%,transparent)}
.project-tabs-shell.is-ready [data-project-panel]{display:none}
.project-tabs-shell.is-ready [data-project-panel].is-active{display:block;animation:projectPanelIn .18s ease both}
@keyframes projectPanelIn{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.project-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.project-panel-stack{display:grid;gap:14px}
.project-tab-section{margin:0}
.project-tab-section+.project-tab-section{margin-top:14px}
.project-tab-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.project-tab-intro h3{margin:2px 0 0}

/* Page transition/popup fail-safe: no invisible overlay may dim a page. */
.global-popup[hidden],.global-popup:not(.is-open){pointer-events:none}
body:not(.popup-open) .global-popup:not(.is-open) .global-popup-backdrop{display:none}
body:not(.page-leaving) .page-transition{visibility:hidden!important;pointer-events:none!important}

/* Dark theme-specific cleanup for formerly hard-coded light components. */
html[data-theme="dark"] :is(.nav-shell,.portal-topbar,.portal-card,.portal-stat,.portal-welcome,.portal-icon-btn,.portal-user-chip,.detail-price-card,.inquiry-form,.service-tools,.catalog-service-card,.subservice-card,.product-card,.blog-card,.testimonial-card,.case-card,.pricing-card,.faq-list details,.contact-page-form,.profile-value-card,.contact-channel){box-shadow:0 8px 26px rgba(0,0,0,.18)}
html[data-theme="dark"] .style-glass{background:color-mix(in srgb,var(--surface-raised) 86%,transparent);border-color:var(--border)}
html[data-theme="dark"] .page-transition::before{background:linear-gradient(115deg,var(--brand-safe-b),var(--brand-safe-a))}

@media(max-width:900px){
    .project-panel-grid{grid-template-columns:1fr}
    .project-detail-tabs{margin-left:-2px;margin-right:-2px}
}
@media(max-width:640px){
    .container{width:min(var(--content-max),calc(100% - 24px))}
    .project-detail-tabs{position:relative;border-radius:10px;padding:4px}
    .project-detail-tabs button{min-height:36px;padding:7px 11px;font-size:10px}
    .portal-project-hero{gap:18px}
}
@media(prefers-reduced-motion:reduce){
    .project-tabs-shell.is-ready [data-project-panel].is-active{animation:none}
}

/* ========================================================================
   V14.1 — COMPLETE THEME-SAFE NAVIGATION, BLOG, PROMO & CONTENT POLISH
   Ensures components introduced in V8-V13 do not fall back to browser or
   legacy hard-coded colors when the administrator changes the palette.
   ======================================================================== */

/* Header mega menu ------------------------------------------------------- */
.desktop-nav-v8{display:flex;align-items:center;gap:5px;min-width:0}
.nav-menu-item{position:relative;display:flex;align-items:center}
.nav-menu-label-row{display:flex;align-items:center;min-height:42px}
.nav-parent-link{display:inline-flex;align-items:center;gap:6px;padding:10px 8px;border-radius:8px;color:var(--surface-text);font-size:.84rem;font-weight:var(--nav-weight);line-height:1;text-decoration:none;transition:color .16s ease,background .16s ease}
.nav-parent-link em{display:inline-grid;place-items:center;min-height:17px;padding:2px 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.58rem;font-style:normal;font-weight:700;letter-spacing:.035em;text-transform:uppercase}
.nav-parent-link:hover,.nav-parent-link[aria-current="page"]{color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent)}
.nav-dropdown-toggle{width:27px;height:30px;display:grid;place-items:center;margin-left:-5px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--surface-muted);cursor:pointer;transition:.16s ease}
.nav-dropdown-toggle:hover,.nav-dropdown-toggle[aria-expanded="true"]{background:color-mix(in srgb,var(--brand) 7%,transparent);color:var(--brand)}
.nav-dropdown-toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.nav-dropdown-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-mega-panel{position:fixed;left:50%;top:calc(var(--header-height,72px) + 10px);z-index:80;width:min(980px,calc(100vw - 32px));transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-menu-item.is-open .nav-mega-panel,.nav-menu-item:hover>.nav-mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-mega-inner{display:grid;grid-template-columns:1fr;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface-raised) 97%,transparent);color:var(--surface-text);box-shadow:0 26px 70px color-mix(in srgb,var(--text) 16%,transparent);backdrop-filter:blur(18px)}
.nav-mega-inner.has-featured{grid-template-columns:minmax(0,1fr) 260px}
.nav-mega-main{min-width:0;padding:20px}
.nav-mega-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.nav-mega-head>div{display:grid;gap:4px}
.nav-mega-head small{color:var(--brand);font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.nav-mega-head strong{max-width:610px;color:var(--surface-text);font-size:.92rem;line-height:1.45}
.nav-mega-head>a{flex:0 0 auto;color:var(--brand);font-size:.72rem;font-weight:650;text-decoration:none}
.nav-service-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px}
.nav-service-group{min-width:0;padding:8px 0}
.nav-service-parent,.nav-menu-card{color:var(--surface-text);text-decoration:none}
.nav-service-parent{display:flex;align-items:flex-start;gap:10px;margin-bottom:7px}
.nav-item-icon{width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:color-mix(in srgb,var(--brand) 9%,var(--surface-raised));color:var(--brand);font-size:.58rem;font-weight:750;letter-spacing:.02em}
.nav-service-parent>span:last-child,.nav-menu-card>span:nth-child(2){min-width:0;display:grid;gap:2px}
.nav-service-parent strong,.nav-menu-card strong{color:var(--surface-text);font-size:.76rem;line-height:1.3}
.nav-service-parent small,.nav-menu-card small{display:-webkit-box;overflow:hidden;color:var(--surface-muted);font-size:.61rem;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nav-sub-link{display:block;margin-left:41px;padding:4px 0;color:var(--surface-muted);font-size:.66rem;text-decoration:none;transition:color .14s ease,transform .14s ease}
.nav-sub-link:hover{color:var(--brand);transform:translateX(2px)}
.nav-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nav-menu-card{display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:start;gap:10px;padding:11px;border:1px solid transparent;border-radius:11px;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.nav-menu-card>i{align-self:center;color:var(--brand);font-size:.75rem;font-style:normal}
.nav-menu-card:hover{background:color-mix(in srgb,var(--brand) 5%,var(--surface-raised));border-color:color-mix(in srgb,var(--brand) 13%,var(--border));transform:translateY(-1px)}
.nav-feature-card{position:relative;isolation:isolate;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:24px;overflow:hidden;background:linear-gradient(145deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient);text-decoration:none}
.nav-feature-card::after{content:"";position:absolute;inset:auto -50px -65px auto;width:190px;height:190px;border-radius:50%;background:color-mix(in srgb,var(--on-brand-gradient) 8%,transparent);z-index:-1}
.nav-feature-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.15;mix-blend-mode:luminosity;z-index:-2}
.nav-feature-label{align-self:flex-start;padding:4px 7px;border:1px solid color-mix(in srgb,var(--on-brand-gradient) 30%,transparent);border-radius:999px;color:var(--on-brand-gradient);font-size:.55rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.nav-feature-card strong{color:var(--on-brand-gradient);font-size:1.12rem;line-height:1.25}
.nav-feature-card p{margin:0;color:color-mix(in srgb,var(--on-brand-gradient) 82%,transparent);font-size:.69rem;line-height:1.55}
.nav-feature-cta{margin-top:6px;color:var(--on-brand-gradient);font-size:.67rem;font-weight:650}

/* Authenticated client indicator stays readable regardless of brand hue. */
.client-area-authenticated{padding:5px 8px!important;background:color-mix(in srgb,var(--brand) 5%,var(--surface-raised));border-color:color-mix(in srgb,var(--brand) 18%,var(--border))!important}
.client-login-copy{display:grid;gap:1px;line-height:1.05}
.client-login-copy strong{color:var(--surface-text);font-size:.69rem;font-weight:650}
.client-login-copy small{max-width:118px;overflow:hidden;color:var(--surface-muted);font-size:.55rem;text-overflow:ellipsis;white-space:nowrap}
.client-login-status{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 14%,transparent)}

/* Mobile navigation ----------------------------------------------------- */
.mobile-nav-v8{color:var(--surface-text)}
.mobile-nav-v8 .mobile-menu-item{border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.mobile-nav-v8 .mobile-menu-row{display:flex;align-items:center;gap:6px}
.mobile-nav-v8 .mobile-menu-row>a{flex:1;color:var(--surface-text);font-weight:var(--nav-weight)}
.mobile-nav-v8 .mobile-submenu-toggle{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:9px;background:color-mix(in srgb,var(--brand) 6%,transparent);color:var(--brand)}
.mobile-nav-v8 .mobile-submenu{display:none;padding:0 0 10px 12px}
.mobile-nav-v8 .mobile-menu-item.is-open .mobile-submenu{display:grid;gap:2px}
.mobile-nav-v8 .mobile-submenu a{padding:8px 10px;border-radius:8px;color:var(--surface-muted);font-size:.8rem;text-decoration:none}
.mobile-nav-v8 .mobile-submenu a:hover{background:color-mix(in srgb,var(--brand) 6%,transparent);color:var(--brand)}

/* Blog / insight detail ------------------------------------------------ */
.article-page-v8{background:var(--page-bg);color:var(--text)}
.article-hero-v8{padding:58px 0 44px;background:radial-gradient(circle at 86% 18%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 28%),linear-gradient(180deg,color-mix(in srgb,var(--brand) 3%,var(--page-bg)),var(--page-bg));border-bottom:1px solid var(--border)}
.article-header-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:36px;align-items:end}
.article-heading-copy{min-width:0}
.article-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:17px;color:var(--muted);font-size:.72rem}
.article-breadcrumb a{color:var(--brand);text-decoration:none}
.article-category{display:inline-flex;align-items:center;gap:6px;margin-bottom:11px;color:var(--brand);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.article-heading-copy h1{max-width:900px;margin:0;color:var(--text);font-size:clamp(2.15rem,4.6vw,4.25rem);font-weight:var(--heading-weight);letter-spacing:-.045em;line-height:1.03}
.article-lead{max-width:760px;margin:17px 0 0;color:var(--muted);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.72}
.article-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.article-author-mini{display:flex;align-items:center;gap:9px;color:var(--text)}
.article-author-mini>span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient);font-size:.68rem;font-weight:700}
.article-author-mini>div{display:grid;gap:1px}
.article-author-mini strong{color:var(--text);font-size:.76rem}
.article-author-mini small,.article-meta-facts{color:var(--muted);font-size:.66rem}
.article-meta-facts{display:flex;flex-wrap:wrap;gap:8px}
.article-share-card{padding:15px;border:1px solid var(--border);border-radius:13px;background:var(--surface-raised);color:var(--surface-text);box-shadow:0 9px 24px color-mix(in srgb,var(--text) 5%,transparent)}
.article-share-card>small{display:block;margin-bottom:9px;color:var(--surface-muted);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase}
.article-share-buttons{display:flex;flex-wrap:wrap;gap:6px}
.article-share-buttons a,.article-share-buttons button{min-height:32px;display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:var(--page-bg);color:var(--surface-text);font:inherit;font-size:.62rem;text-decoration:none;cursor:pointer}
.article-share-buttons a:hover,.article-share-buttons button:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--border));color:var(--brand)}
.article-cover-wrap{width:min(var(--content-max),calc(100% - 40px));margin:28px auto 0}
.article-cover-wrap img{width:100%;max-height:580px;display:block;object-fit:cover;border:1px solid var(--border);border-radius:var(--ui-radius);box-shadow:0 22px 56px color-mix(in srgb,var(--text) 9%,transparent)}
.article-layout-v8{width:min(var(--content-max),calc(100% - 40px));display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:42px;align-items:start;margin:46px auto 72px}
.article-main-column{min-width:0}
.article-content-v8{color:var(--text);font-size:1rem;line-height:1.82}
.article-content-v8>*:first-child{margin-top:0}
.article-content-v8 p,.article-content-v8 li{color:var(--text)}
.article-content-v8 h2,.article-content-v8 h3,.article-content-v8 h4{color:var(--text);letter-spacing:-.02em}
.article-content-v8 h2{margin:2.2em 0 .7em;font-size:1.65rem}
.article-content-v8 h3{margin:1.8em 0 .6em;font-size:1.25rem}
.article-content-v8 a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
.article-content-v8 blockquote{margin:28px 0;padding:18px 22px;border-left:3px solid var(--brand);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--brand) 5%,var(--surface-raised));color:var(--surface-text)}
.article-content-v8 :is(img,video,iframe){max-width:100%;border-radius:12px}
.article-content-v8 table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.article-content-v8 :is(th,td){padding:10px 12px;border:1px solid var(--border);text-align:left}
.article-content-v8 th{background:color-mix(in srgb,var(--brand) 6%,var(--surface-raised));color:var(--surface-text)}
.article-tags{display:flex;flex-wrap:wrap;gap:7px;margin:28px 0;padding-top:20px;border-top:1px solid var(--border)}
.article-tags a{padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--brand) 7%,var(--surface-raised));color:var(--brand);font-size:.68rem;text-decoration:none}
.article-author-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;margin-top:28px;padding:22px;border:1px solid var(--border);border-radius:14px;background:var(--surface-raised);color:var(--surface-text)}
.article-author-avatar{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient);font-size:1rem;font-weight:700}
.article-author-card small{color:var(--brand);font-size:.59rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.article-author-card h3{margin:3px 0;color:var(--surface-text);font-size:1.05rem}
.article-author-card p{margin:4px 0 0;color:var(--surface-muted);font-size:.76rem;line-height:1.62}
.article-sidebar{min-width:0}
.article-sidebar-sticky{position:sticky;top:96px;display:grid;gap:13px}
.sidebar-search,.sidebar-widget{padding:17px;border:1px solid var(--border);border-radius:13px;background:var(--surface-raised);color:var(--surface-text);box-shadow:0 8px 22px color-mix(in srgb,var(--text) 4%,transparent)}
.sidebar-search label,.sidebar-widget h3{display:block;margin:0 0 10px;color:var(--surface-text);font-size:.76rem}
.sidebar-search form{display:flex;gap:6px}
.sidebar-search input{min-width:0;flex:1;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--page-bg);color:var(--text);font:inherit;font-size:.7rem}
.sidebar-search button{width:34px;border:0;border-radius:8px;background:var(--brand-safe-a);color:var(--on-brand);cursor:pointer}
.sidebar-category-list,.sidebar-recent-list{display:grid;gap:0}
.sidebar-category-list a,.sidebar-recent-list a{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);color:var(--surface-text);font-size:.68rem;text-decoration:none}
.sidebar-category-list a:first-child,.sidebar-recent-list a:first-child{border-top:0}
.sidebar-category-list span{color:var(--surface-muted)}
.sidebar-recent-list a{display:grid;justify-content:stretch}
.sidebar-recent-list small{color:var(--surface-muted);font-size:.58rem}
.sidebar-recent-list strong{color:var(--surface-text);font-size:.68rem;line-height:1.4}
.sidebar-service-cta{padding:20px;border-radius:14px;background:linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a));color:var(--on-brand-gradient);box-shadow:0 16px 35px color-mix(in srgb,var(--brand-safe-b) 18%,transparent)}
.sidebar-service-cta :is(h3,p,small,strong,a){color:var(--on-brand-gradient)}
.sidebar-service-cta p{opacity:.82;line-height:1.55}
.sidebar-service-cta a{display:inline-flex;margin-top:8px;font-weight:650;text-decoration:none}

/* Related content, promos and tracking ---------------------------------- */
.blog-card,.product-card,.case-card,.promo-card{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}
.blog-card :is(h2,h3,strong),.product-card :is(h2,h3,strong),.case-card :is(h2,h3,strong),.promo-card h2{color:var(--surface-text)}
.blog-card :is(p,small),.product-card :is(p,small),.case-card :is(p,small),.promo-card :is(p,small){color:var(--surface-muted)}
.promo-card code{background:color-mix(in srgb,var(--brand) 8%,var(--surface-raised));color:var(--brand)}
.promo-chip{background:color-mix(in srgb,var(--accent) 12%,var(--surface-raised));color:var(--accent)}
.promo-chip.neutral{background:color-mix(in srgb,var(--brand) 8%,var(--surface-raised));color:var(--brand)}
.tracking-result{background:var(--surface-raised);color:var(--surface-text);border-color:var(--border)}
.tracking-result :is(h2,h3,strong){color:var(--surface-text)}
.tracking-result p{color:var(--surface-muted)}
.tracking-status{background:color-mix(in srgb,var(--brand) 11%,var(--surface-raised));color:var(--brand)}
.tracking-status.status-won{background:color-mix(in srgb,var(--success) 18%,var(--surface-raised));color:var(--success)}
.tracking-status.status-lost{background:color-mix(in srgb,var(--danger) 12%,var(--surface-raised));color:var(--danger)}
.tracking-timeline span{color:var(--surface-muted);border-color:var(--border)}
.tracking-timeline span.done{color:var(--surface-text);border-color:var(--success)}

/* Generic content guardrails ------------------------------------------- */
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) :is(h1,h2,h3,h4,strong,b,p,small,span:not(.status-badge),a){color:inherit}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) p{opacity:.84}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) .btn:not(.btn-white):not(.btn-light){border-color:color-mix(in srgb,currentColor 28%,transparent)}

/* Project details: make tabbed page compact instead of four tall blocks. */
.project-tabs-shell{width:100%;max-width:var(--portal-content-max,1180px);margin:0 auto}
.project-tabs-shell .portal-project-hero{margin-bottom:0}
.project-tabs-shell [data-project-panel]{min-width:0}
.project-tabs-shell .portal-card{padding:18px}
.project-tabs-shell .portal-card-head{margin-bottom:12px}
.project-tabs-shell .portal-card-head h3,.project-tab-intro h3{font-size:1rem;font-weight:650}
.project-tabs-shell .eyebrow{font-size:.6rem;font-weight:700;letter-spacing:.11em}
.project-tabs-shell .timeline-item,.project-tabs-shell .task-row{padding-top:10px;padding-bottom:10px}
.project-tabs-shell .portal-empty{min-height:90px;display:grid;place-items:center;text-align:center}
.project-tabs-shell .file-list.large{max-height:380px;overflow:auto}
.project-tabs-shell .update-list{max-height:440px;overflow:auto;padding-right:4px}
.project-tabs-shell .ticket-thread{min-height:230px;max-height:420px}
.project-tabs-shell .mini-upload{margin-top:14px;padding:14px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--brand) 2%,var(--surface-raised));border-radius:11px}

/* Stop legacy opacity/filter effects from lowering readable contrast. */
.portal-main,.site-main,.article-page-v8,.catalog-hero,.section,.site-footer{filter:none}
body:not(.popup-open) :is(.portal-main,.site-main,.site-footer,.nav-shell){opacity:1}

@media(max-width:1020px){
    .nav-mega-panel{width:min(900px,calc(100vw - 24px))}
    .nav-mega-inner.has-featured{grid-template-columns:minmax(0,1fr) 230px}
    .nav-service-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
    .article-layout-v8{grid-template-columns:minmax(0,1fr) 250px;gap:28px}
}
@media(max-width:860px){
    .desktop-nav-v8{display:none}
    .article-header-grid,.article-layout-v8{grid-template-columns:1fr}
    .article-share-card{max-width:520px}
    .article-sidebar-sticky{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
    .sidebar-service-cta{grid-column:1/-1}
}
@media(max-width:640px){
    .article-hero-v8{padding:38px 0 30px}
    .article-header-grid{gap:22px}
    .article-heading-copy h1{font-size:clamp(2rem,10vw,3rem)}
    .article-cover-wrap,.article-layout-v8{width:calc(100% - 24px)}
    .article-layout-v8{margin-top:30px;gap:25px}
    .article-content-v8{font-size:.94rem;line-height:1.75}
    .article-author-card{grid-template-columns:48px 1fr;padding:17px}
    .article-author-avatar{width:48px;height:48px}
    .article-sidebar-sticky{grid-template-columns:1fr}
    .sidebar-service-cta{grid-column:auto}
    .project-tabs-shell .portal-card{padding:14px}
}


/* ============================================================
   V15 — logo state + CTA contrast + overlay hardening
   ============================================================ */

/* Theme-aware public/auth logo stack: exactly one logo may render. */
.brand-logo-stack{
    position:relative;
    display:inline-grid;
    align-items:center;
    justify-items:start;
    line-height:0;
}
.brand-logo-stack>.theme-logo{
    grid-area:1 / 1;
    margin:0;
}
html[data-theme="light"] .brand-logo-stack>.theme-logo-dark,
html:not([data-theme="dark"]) .brand-logo-stack>.theme-logo-dark{
    display:none!important;
}
html[data-theme="dark"] .brand-logo-stack>.theme-logo-light{
    display:none!important;
}
html[data-theme="dark"] .brand-logo-stack>.theme-logo-dark,
html[data-theme="light"] .brand-logo-stack>.theme-logo-light{
    display:block!important;
}

/* Client sidebar has a permanently dark surface, therefore one dedicated
   dark-background logo is rendered rather than theme-stacking two images. */
.portal-logo-stack{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    min-height:44px;
    line-height:0;
}
.portal-logo-image{
    display:block!important;
    width:auto!important;
    max-width:min(168px,100%)!important;
    height:auto!important;
    max-height:44px!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:left center!important;
}

/* CTA/readability contract. These blocks can never become white-on-white.
   CTA surfaces are brand-derived but automatically darkened in PHP until
   white text reaches the minimum contrast target. */
.builder-cta.style-gradient,
.builder-cta.style-dark,
.cs-contact-card,
.sidebar-service-cta,
.nav-feature-card{
    background:linear-gradient(135deg,var(--cta-safe-b),var(--cta-safe-a))!important;
    color:var(--on-cta)!important;
    border-color:color-mix(in srgb,var(--on-cta) 18%,transparent)!important;
}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card)
:is(h1,h2,h3,h4,h5,h6,p,small,strong,b,.eyebrow,span:not(.status-badge)){
    color:var(--on-cta)!important;
}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) p,
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) small{
    opacity:.86;
}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card) .btn-white{
    background:#fff!important;
    color:var(--cta-safe-b)!important;
    border-color:rgba(255,255,255,.72)!important;
}
:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card) .btn-outline.light{
    background:transparent!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.55)!important;
}

/* The contact CTA shown near the footer must retain a visible brand panel,
   even when it also carries glass/surface utility classes. */
.cs-contact-card.glass-panel,
.cs-contact-card.style-glass,
.cs-contact-card.style-soft{
    background:linear-gradient(135deg,var(--cta-safe-b),var(--cta-safe-a))!important;
}

/* Hard fail-safe against stale backdrops after navigation/BFCache. */
.global-popup[hidden],
.global-popup:not(.is-open),
body:not(.popup-open) .global-popup{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
}
@media (min-width:901px){
    .portal-mobile-backdrop{
        display:none!important;
        opacity:0!important;
        pointer-events:none!important;
        visibility:hidden!important;
    }
}

/* Keep public/client logos from inheriting legacy image sizing twice. */
.site-brand .brand-logo-stack,
.member-auth-brand .brand-logo-stack{
    min-width:0;
}
.site-brand .brand-logo-stack img{
    max-height:50px;
    object-fit:contain;
    object-position:left center;
}

/* Protect high-level light surfaces from accidental inherited white text. */
html[data-theme="light"] :is(.nav-shell,.portal-topbar,.portal-card,.portal-stat,.portal-welcome,.portal-user-chip,.portal-icon-btn){
    color:var(--surface-text)!important;
}
html[data-theme="light"] :is(.portal-card,.portal-stat,.portal-welcome) :is(h1,h2,h3,h4,strong,b){
    color:var(--surface-text)!important;
}
html[data-theme="light"] :is(.portal-card,.portal-stat,.portal-welcome) :is(p,small,span:not(.status-badge):not(.eyebrow)){
    color:var(--surface-muted);
}

/* V15.1 server-safe visual hotfix */
.brand-logo-stack{position:relative;display:inline-grid;align-items:center;justify-items:start;line-height:0}.brand-logo-stack>.theme-logo{grid-area:1/1;margin:0}html[data-theme="light"] .brand-logo-stack>.theme-logo-dark,html:not([data-theme="dark"]) .brand-logo-stack>.theme-logo-dark{display:none!important}html[data-theme="dark"] .brand-logo-stack>.theme-logo-light{display:none!important}html[data-theme="dark"] .brand-logo-stack>.theme-logo-dark,html[data-theme="light"] .brand-logo-stack>.theme-logo-light{display:block!important}.portal-logo-stack{position:relative;display:grid;align-items:center;justify-items:start;width:100%;min-height:44px;line-height:0}.portal-logo-stack>.theme-logo{grid-area:1/1;display:block;width:auto!important;max-width:min(168px,100%)!important;height:auto!important;max-height:44px!important;margin:0!important;object-fit:contain!important;object-position:left center!important}.portal-logo-stack>.theme-logo-light{display:none!important}.portal-logo-stack>.theme-logo-dark{display:block!important}.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card{background:linear-gradient(rgba(4,22,42,.52),rgba(4,22,42,.52)),linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a))!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important}:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) :is(h1,h2,h3,h4,h5,h6,p,small,strong,b,.eyebrow,span:not(.status-badge)){color:#fff!important}:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) p,:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card,.sidebar-service-cta,.nav-feature-card) small{opacity:.9}:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card) .btn-white{background:#fff!important;color:#0b2440!important;border-color:rgba(255,255,255,.8)!important}:is(.builder-cta.style-gradient,.builder-cta.style-dark,.cs-contact-card) .btn-outline.light{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.58)!important}.global-popup[hidden],.global-popup:not(.is-open),body:not(.popup-open) .global-popup{display:none!important;opacity:0!important;pointer-events:none!important}@media (min-width:901px){.portal-mobile-backdrop{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}}


/* ============================================================
   V15.2 — auth redirect visual deployment + stable menu/contrast hotfix
   ============================================================ */

/* Mega menu stays reachable when the pointer moves from the header to the panel. */
.site-header,.nav-shell,.desktop-nav-v8,.nav-menu-item{overflow:visible}
.nav-mega-panel{
    top:var(--header-menu-top,104px)!important;
    z-index:1200!important;
}
.nav-mega-panel::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-18px;
    height:18px;
    background:transparent;
}
.nav-menu-item.is-open>.nav-mega-panel,
.nav-menu-item:focus-within>.nav-mega-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}

/* Header/menu layers must sit above page sections and decorative overlays. */
.site-header{z-index:5000!important}
.nav-shell{position:relative;z-index:1}
.page-main{position:relative;z-index:0}

/* Guarantee readable CTA content even when an admin chooses very light brand colors. */
.cs-contact-card,
.builder-cta.style-gradient,
.builder-cta.style-dark,
.sidebar-service-cta,
.nav-feature-card{
    background:
        linear-gradient(rgba(4,20,38,.62),rgba(4,20,38,.62)),
        linear-gradient(135deg,var(--brand-safe-b),var(--brand-safe-a))!important;
    color:#fff!important;
}
:is(.cs-contact-card,.builder-cta.style-gradient,.builder-cta.style-dark,.sidebar-service-cta,.nav-feature-card)
:is(h1,h2,h3,h4,h5,h6,p,small,strong,b,.eyebrow,span:not(.status-badge)){
    color:#fff!important;
}
:is(.cs-contact-card,.builder-cta.style-gradient,.builder-cta.style-dark,.sidebar-service-cta,.nav-feature-card) p,
:is(.cs-contact-card,.builder-cta.style-gradient,.builder-cta.style-dark,.sidebar-service-cta,.nav-feature-card) small{
    opacity:.88!important;
}
.cs-contact-card .btn-light,
.cs-contact-card .btn-white,
.builder-cta.style-gradient .btn-white,
.builder-cta.style-dark .btn-white{
    background:#fff!important;
    color:#102d4c!important;
    border-color:rgba(255,255,255,.82)!important;
}

/* Light cards can never inherit white text from a colored parent. */
html[data-theme="light"] :is(.glass-panel,.style-glass,.style-soft,.portal-card,.portal-stat,.portal-welcome,.contact-page-form,.contact-process-list>div):not(.cs-contact-card):not(.sidebar-service-cta){
    color:var(--surface-text)!important;
}
html[data-theme="light"] :is(.glass-panel,.style-glass,.style-soft,.portal-card,.portal-stat,.portal-welcome,.contact-page-form,.contact-process-list>div):not(.cs-contact-card):not(.sidebar-service-cta)
:is(h1,h2,h3,h4,h5,h6,strong,b,label,summary){
    color:var(--surface-text)!important;
}
html[data-theme="light"] :is(.glass-panel,.style-glass,.style-soft,.portal-card,.portal-stat,.portal-welcome,.contact-page-form,.contact-process-list>div):not(.cs-contact-card):not(.sidebar-service-cta)
:is(p,small,span:not(.status-badge):not(.eyebrow)){
    color:var(--surface-muted)!important;
}

/* Member portal remains readable after a custom public theme is applied. */
.portal-main{background:var(--page-bg);color:var(--text)}
.portal-content{color:var(--text)}
.portal-card,.portal-stat,.portal-welcome{background:var(--surface-raised);border-color:var(--border)}
.portal-card :is(h1,h2,h3,h4,strong,b),.portal-stat :is(h1,h2,h3,h4,strong,b),.portal-welcome :is(h1,h2,h3,h4,strong,b){color:var(--surface-text)!important}
.portal-card :is(p,small),.portal-stat :is(p,small),.portal-welcome :is(p,small){color:var(--surface-muted)!important}

@media(max-width:860px){
    .nav-mega-panel{display:none!important}
}