:root {
    --bg-dark: #1a1a1d;
    --primary: #0040a8;
    --primary-deep: #013081;
    --ink: #ffffff;
    --ink-dim: #d9e5ff;
    --line: rgba(255, 255, 255, 0.28);
    --card-bg: #d7e8ef;

    /* Spacing "Sweet Spot" Variables */
    --dt-container-width: 94vw;   /* Desktop: Width allocated to content (Higher = smaller side margins) */
    --dt-container-max: 1200px;  /* Desktop: Maximum content width */
    --dt-card-padding: 16px;      /* Desktop: Internal padding for cards */
    --dt-section-gap: 80px;       /* Desktop: Vertical spacing between sections */
    --dt-hero-content-top: 64px;  /* Desktop: Distance of headline from top edge */
    --dt-hero-card-bottom: 24px;  /* Desktop: Distance of card from bottom edge */
    --hero-min-height: 872px;     /* Overall height of the hero section */
    
    /* Hero Slope & Width Tuning (Sweet Spot Tuning) */
    --dt-hero-slope-x1: 28%;        /* Desktop: Top-left x-coordinate of the slant (Decrease to shift left) */
    --dt-hero-slope-x2: 0%;        /* Desktop: Bottom-left x-coordinate of the slant */
    --dt-hero-image-width: 152%;  /* Desktop: Overall width of the image container */
    --dt-hero-image-offset: -2%; /* Desktop: Negative margin to pull image left over blue area */

    /* Gomikan Card Image Tuning (Sweet Spot Tuning) */
    --dt-card-img-zoom: 160%;      /* Increase to zoom in on subject */
    --dt-card-img-x: 100%;         /* Horizontal position (Decrease to shift left) */
    --dt-card-img-y: 20%;         /* Vertical position (Decrease to shift up) */
    
    --sp-card-img-zoom: 180%;     /* Mobile zoom */
    --sp-card-img-x: 100%;         /* Mobile Horizontal */
    --sp-card-img-y: 20%;         /* Mobile Vertical */

    --sp-hero-slope-y1: 12%;      /* Mobile: Top-left y-coordinate (Decrease to make slant flatter) */
    --sp-hero-slope-x1: 0%;       /* Mobile: Top-left x-coordinate */

    --sp-hero-card-pullup: -140px; /* Mobile: How much the card overlaps the image */

    /* Mobile Hero Image Tuning (Sweet Spot Tuning) */
    --sp-hero-image-width: 152%;  /* Mobile: Image width (Increase to zoom) */
    --sp-hero-image-offset: -2%;   /* Mobile: Horizontal nudge */

    --sp-container-px: 20px;      /* Mobile: Standard side margins */
    --sp-card-padding: 16px;      /* Mobile: Internal padding for the hero card */

    /* Button "Sweet Spot" Variables */
    --dt-btn-width: 300px;        /* Desktop: Width of the yellow hero button */
    --sp-btn-width: 92%;         /* Mobile: Width of the yellow hero button */

    /* Footer Configuration (Sweet Spot Tuning) */
    --footer-bg-color: #00358F;
    --footer-brand-size: 32px;      /* Brand name 'Canopus' */
    --header-logo-height: 54px;      /* New: Header logo (Desktop) */
    --header-padding-y: 6px;        /* New: Navbar height tuning (Desktop) */
    --header-bg: #00358F;            /* New: Navbar color tuning */
    --sp-header-logo-height: 62px;   /* New: Header logo (Mobile) */
    --sp-header-padding-y: 10px;     /* New: Navbar height tuning (Mobile) */
    --sp-header-logo-px: 6px;        /* New: Mobile logo horizontal offset (increase to shift right) */
    --sp-hamburger-width: 52px;      /* New: Hamburger line length */
    --sp-hamburger-height: 2.5px;    /* New: Hamburger line thickness */
    --sp-hamburger-gap: 16px;         /* New: Separation between lines */
    --sp-hamburger-pr: 0px;          /* New: Hamburger right padding/offset */
    --logo-split-point: 83%;        /* New: Tune this to separate orb and text */
    --header-logo-filter: none;     /* Deprecated for selective filtering */
    --footer-address-size: 17px;    /* Desktop */
    --footer-nav-title-size: 17px;  /* Desktop */
    --footer-nav-link-size: 17px;   /* Desktop */
    --footer-nav-sublink-size: 17px; /* Desktop */
    --footer-logo-height: 120px;    /* Height of the image-based logo */
    --breadcrumb-size: 18px;        /* Tunable breadcrumb text size */
    --sp-breadcrumb-size: 16px;

    /* Navbar "Sweet Spot" Configuration (Desktop) */
    --nav-link-padding-y: 8px;      /* Vertical space inside the link (affects underline distance) */
    --nav-underline-height: 4px;    /* Thickness of the hover underline */
    --nav-underline-offset: 0px;    /* Extra distance from the bottom (0px = edge of padding) */

    /* Mobile Footer Tuning (Sweet Spot Tuning) */
    --sp-footer-address-size: 15px;
    --sp-footer-nav-title-size: 15px;
    --sp-footer-nav-link-size: 15px;
    --sp-footer-nav-sublink-size: 15px;
    --sp-footer-logo-height: 80px;
    --sp-footer-padding-left: 30px; /* New: Tune the left padding for HOME and 会社情報 here! */

    /* Contact CTA Tuning (Sweet Spot Configuration) */
    --contact-padding-top: 120px;      /* New: Space above the watermark */
    --contact-watermark-size: 100px;
    --contact-watermark-top: -28%;
    --contact-watermark-opacity: 1;
    --contact-title-size: 32px;
    --contact-info-size: 20px;
    --contact-btn-font-size: 20px;
    --contact-btn-border: 1px solid #00358F;
    --contact-btn-padding-y: 15px;
    --contact-btn-padding-x: 10px;
    --contact-btn-min-width: 180px;
    --contact-btn-radius: 7px;
    --contact-panel-width: 1000px; /* Increase this to make the blue card wider if needed */

    /* Mobile Contact CTA Tuning */
    --sp-contact-padding-top: 90px;   /* New: Mobile space above the watermark */
    --sp-contact-info-size: 16px;
    --sp-contact-btn-font-size: 16px;
    --sp-contact-btn-padding-y: 10px;
    --sp-contact-btn-padding-x: 10px;
    --sp-contact-btn-min-width: 50%;
    --sp-contact-panel-width: 82vw;

    /* ========== GLOBAL BACKGROUND MASK CONFIGURATION (Desktop) ========== */
    --mask-bg-width: 113vw;           /* Width of the mask image */
    --mask-bg-height: 76vw;          /* Height of the mask image */
    --mask-bg-top: -64vw;            /* Y-position (negative = higher) */
    --mask-bg-left: -34.8vw;         /* X-position (negative = more left) */
    --mask-bg-rotate: -13deg;        /* Rotation angle */
    --mask-bg-opacity: 0.85;         /* Transparency */
    --mask-bg-container-height: 1000px; /* How tall the cropping container is */

    /* ========== GLOBAL BACKGROUND MASK CONFIGURATION (Mobile SP) ========== */
    --sp-mask-bg-width: 163vw;
    --sp-mask-bg-height: 66vw;
    --sp-mask-bg-top: -46vw;
    --sp-mask-bg-left: -44.8vw;
    --sp-mask-bg-rotate: -43deg;
    --sp-mask-bg-opacity: 0.85;      /* Mobile Transparency */
    --sp-mask-bg-container-height: 800px; /* Mobile Container Height */

    /* ========== SUBPAGE HERO TUNING ========== */
    --subpage-hero-bg-img: url('../images/subpage-hero-bg.png');    /* DESKTOP image name */
    --sp-subpage-hero-bg-img: url('../images/subpage-hero-bg-sp.png'); /* MOBILE image name */
    --subpage-hero-height: 162px;
    --subpage-hero-bg-size: cover;
    --subpage-hero-bg-pos: center;
    --subpage-hero-opacity: 1;

    --sp-subpage-hero-height: 162px;
    --sp-subpage-hero-bg-size: cover;
    --sp-subpage-hero-bg-pos: center;
}

/* Utility for mobile-only line breaks */
.sp-br {
    display: none;
}
@media (max-width: 900px) {
    .sp-br {
        display: block;
    }
}

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

html,
body {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    background: radial-gradient(circle at 20% 0%, #26272b 0%, var(--bg-dark) 42%, #131316 100%);
    color: var(--ink);
    line-height: 1.55;
}

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

.site-shell {
    width: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: var(--primary);
}

/* ========== SUBPAGE HERO ========== */
.subpage-hero {
    position: relative;
    z-index: 10; /* Ensures breadcrumb stays above the background mask */
    min-height: var(--subpage-hero-height);
    background-image: var(--subpage-hero-bg-img);
    background-size: var(--subpage-hero-bg-size);
    background-position: var(--subpage-hero-bg-pos);
    background-repeat: no-repeat;
    /* Gap fix: removed border-top */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin-top: -1px; /* SUBTLE PULL UP TO REMOVE THE GAP */
}

.subpage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(169, 176, 194, 0.4) 0%, rgba(157, 168, 191, 0.4) 100%);
    z-index: -1;
    opacity: var(--subpage-hero-opacity);
}

.subpage-hero-inner {
    width: min(1100px, 90vw);
    margin: 0 auto;
    min-height: var(--subpage-hero-height);
    display: flex;
    align-items: center;
}

.subpage-breadcrumb {
    font-size: var(--breadcrumb-size);
    color: #273447;
    font-weight: 700;
}

/* ========== COMMON PAGE LAYOUT ========== */
.service-page,
.vbx-page,
.ccs-page,
.bpo-page {
    position: relative;
    background: #F8FAFC;
    color: #1f2a3c;
    overflow: hidden;
}

.service-intro,
.vbx-intro,
.ccs-intro {
    position: relative;
    text-align: center;
    padding: 92px 16px 104px;
}

.service-intro::before,
.vbx-intro::before,
.ccs-intro::before {
    display: none !important; /* Replaced by bpo-mask-bg.png image mask */
}

/* ========== GLOBAL IMAGE-BASED BACKGROUND MASK ========== */
/*
 * This replaces the old CSS mesh with the bpo-mask-bg.png image.
 * Tune the variables in :root above to control all pages at once.
 * Excluded from index.html (no mask div present).
 */
.global-header-mask,
.bpo-header-mask,
.cocreate-header-mask,
.venous-header-mask {
    position: absolute;
    width: 100%;
    height: var(--mask-bg-container-height);
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden; /* Crucial: crops the rotated image */
}

.global-header-mask::before,
.bpo-header-mask::before,
.cocreate-header-mask::before,
.venous-header-mask::before {
    content: "";
    position: absolute;
    width: var(--mask-bg-width);
    height: var(--mask-bg-height);
    top: var(--mask-bg-top);
    left: var(--mask-bg-left);
    transform-origin: center center;
    transform: rotate(var(--mask-bg-rotate));
    background: url('../images/bpo-mask-bg.png') no-repeat center/cover;
    opacity: var(--mask-bg-opacity);
}

/* Mobile overrides for the mask */
@media (max-width: 900px) {
    .global-header-mask,
    .bpo-header-mask,
    .cocreate-header-mask,
    .venous-header-mask {
        height: var(--sp-mask-bg-container-height);
    }

    .global-header-mask::before,
    .bpo-header-mask::before,
    .cocreate-header-mask::before,
    .venous-header-mask::before {
        width: var(--sp-mask-bg-width);
        height: var(--sp-mask-bg-height);
        top: var(--sp-mask-bg-top);
        left: var(--sp-mask-bg-left);
        transform: rotate(var(--sp-mask-bg-rotate));
        opacity: var(--sp-mask-bg-opacity);
    }

    /* ========== SUBPAGE HERO MOBILE OVERRIDES ========== */
    .subpage-hero {
        min-height: var(--sp-subpage-hero-height);
        background-image: var(--sp-subpage-hero-bg-img);
        background-size: var(--sp-subpage-hero-bg-size);
        background-position: var(--sp-subpage-hero-bg-pos);
    }

    .subpage-hero-inner {
        min-height: var(--sp-subpage-hero-height);
    }
}

.service-title,
.vbx-title,
.ccs-title {
    position: relative;
    font-size: clamp(34px, 3.1vw, 52px);
    font-weight: 800;
    letter-spacing: 0.01em;
}

.service-lead,
.vbx-lead,
.ccs-lead {
    position: relative;
    margin: 26px auto 0;
    width: min(760px, 92vw);
    font-size: clamp(20px, 1.25vw, 24px);
    line-height: 1.55;
}

/* ========== SERVICES GRID ========== */
.service-services,
.vbx-services,
.ccs-services {
    padding: 0 0 26px;
}

.service-services-inner,
.vbx-services-inner,
.ccs-services-inner {
    width: min(1320px, 92vw);
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

.service-card,
.vbx-service-card,
.ccs-service-card {
    background: #d4dfef;
    padding: 0 14px 14px;
}

.service-card-title,
.vbx-service-title,
.ccs-service-title {
    height: 48px;
    margin: 0 auto;
    width: min(1060px, 96%);
    border-radius: 6px;
    background: #0a46a6;
    color: #fff;
    font-size: clamp(28px, 2.05vw, 34px);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-12px);
}

.service-card-body,
.vbx-service-body,
.ccs-service-body {
    padding: 12px 26px 8px;
    display: grid;
    grid-template-columns: 330px 1fr;
    align-items: center;
    gap: 20px;
}

.service-image,
.vbx-service-image,
.ccs-service-image {
    width: 330px;
    aspect-ratio: 1.75;
    border: 1px solid rgba(39, 58, 90, 0.14);
    background-size: cover;
    background-position: center;
}

.service-copy,
.vbx-service-copy,
.ccs-service-copy {
    font-size: clamp(16px, 1.18vw, 22px);
    line-height: 1.45;
    color: #2f3b4f;
}

.service-btn-group,
.vbx-button-group,
.ccs-pill-list {
    list-style: none;
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 6px 8px 0;
}

.service-btn,
.vbx-btn,
.ccs-pill-list li {
    min-width: 220px;
    height: 46px;
    padding: 0 18px;
    border-radius: 3px;
    background: #0a46a6;
    color: #fff;
    font-size: clamp(16px, 1.08vw, 20px);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

/* ========== VOICES SECTION ========== */
.service-voices,
.vbx-voices,
.ccs-voices {
    position: relative;
    padding: 56px 0 104px;
}

.service-voices::after,
.vbx-voices::after,
.ccs-voices::after {
    content: "";
    position: absolute;
    right: -210px;
    bottom: -300px;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: rgba(194, 204, 219, 0.8);
}

.service-voices-inner,
.vbx-voices-inner,
.ccs-voices-inner {
    position: relative;
    z-index: 1;
    width: min(1160px, 92vw);
    margin: 0 auto;
}

.service-voices-title,
.vbx-voices-title,
.ccs-voices-title {
    text-align: center;
    font-size: clamp(36px, 3.2vw, 56px);
    font-weight: 800;
    letter-spacing: 0.01em;
}

.service-voice-grid,
.vbx-voice-grid,
.ccs-voice-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 38px;
    align-items: center;
}

.service-person,
.vbx-person-illust,
.ccs-person-illust {
    width: 190px;
    height: 318px;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(180deg, #f9fbff 0%, #d5dce8 100%);
    border-radius: 30px;
    border: 2px solid #6d7990;
    box-shadow: 0 16px 30px rgba(31, 47, 75, 0.16);
}

.service-voice-list,
.vbx-voice-list,
.ccs-voice-list {
    list-style: none;
    display: grid;
    gap: 18px;
}

.service-voice-item,
.vbx-voice-item,
.ccs-voice-item {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 10px;
    align-items: start;
}

.service-voice-number,
.vbx-voice-number,
.ccs-voice-number {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #6597eb;
    color: #1f3557;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
}

.service-voice-copy h3,
.vbx-voice-copy h3,
.ccs-voice-copy h3 {
    font-size: clamp(18px, 1.95vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    color: #2f3a3f;
}

.service-voice-copy p,
.vbx-voice-copy p,
.ccs-voice-copy p {
    margin-top: 4px;
    font-size: clamp(14px, 1.15vw, 20px);
    line-height: 1.4;
    color: #374449;
}

/* ========== STRENGTHS SECTION ========== */
.service-strengths,
.vbx-strengths,
.ccs-strengths {
    position: relative;
    padding: 82px 0 64px;
}

.service-strengths::before,
.vbx-strengths::before,
.ccs-strengths::before {
    content: "";
    position: absolute;
    left: -150px;
    top: 116px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(190, 204, 224, 0.45);
}

.service-strengths::after,
.vbx-strengths::after,
.ccs-strengths::after {
    content: "";
    position: absolute;
    right: -140px;
    top: 10px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(190, 204, 224, 0.28);
}

.service-strengths-inner,
.vbx-strengths-inner,
.ccs-strengths-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, 92vw);
    margin: 0 auto;
}

.service-strengths-title,
.vbx-strengths-title,
.ccs-section-title {
    text-align: center;
    font-size: clamp(44px, 3.4vw, 62px);
    color: #1f2a3c;
    font-weight: 800;
}

.service-strengths-lead,
.vbx-strengths-lead,
.ccs-section-lead {
    text-align: center;
    margin: 24px auto 48px;
    width: min(1080px, 92vw);
    font-size: clamp(18px, 1.4vw, 34px);
    line-height: 1.55;
    color: #212d3d;
}

.service-features-grid,
.vbx-features-grid,
.ccs-strength-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.service-feature-card,
.vbx-feature-card,
.ccs-strength-card {
    border: 1px solid #7f8b99;
    border-radius: 6px;
    background: rgba(236, 238, 242, 0.88);
    padding: 20px 16px 18px;
}

.service-feature-number,
.vbx-feature-number,
.ccs-strength-card h3 {
    text-align: center;
    font-size: clamp(18px, 1.4vw, 24px);
    font-weight: 700;
    color: #394348;
    line-height: 1.2;
    margin-bottom: 8px;
}

.service-feature-icon,
.vbx-feature-icon,
.ccs-strength-icon {
    height: 190px;
    margin: 14px auto 12px;
    border-radius: 4px;
    border: 1px solid rgba(30, 63, 113, 0.2);
    background-color: #eef3fb;
}

.service-feature-text,
.vbx-feature-text,
.ccs-strength-card p {
    font-size: clamp(14px, 0.98vw, 19px);
    line-height: 1.48;
    color: #3a4654;
}

@media (max-width: 900px) {
    .site-shell {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .subpage-hero {
        min-height: 88px;
    }

    .subpage-hero-inner {
        min-height: 88px;
        width: 92vw;
    }

    .subpage-breadcrumb {
        font-size: var(--sp-breadcrumb-size);
    }

    .subpage-hero {
        background-image: var(--sp-subpage-hero-bg-img);
    }

    .service-intro,
    .vbx-intro,
    .ccs-intro {
        padding: 42px 14px 48px; /* More compact per Screenshot 2 */
    }

    .service-intro::before,
    .vbx-intro::before,
    .ccs-intro::before {
        width: 100%;
        height: 132px;
    }

    .service-title,
    .vbx-title {
        font-size: clamp(28px, 6vw, 36px); /* Sane size for mobile/tablet */
    }

    .ccs-title {
        font-size: clamp(28px, 6vw, 36px);
    }

    .service-lead,
    .vbx-lead,
    .ccs-lead {
        margin-top: 14px;
        width: min(90vw, 720px);
        font-size: clamp(14px, 3.5vw, 18px); /* Sane size for lead text */
        line-height: 1.45;
    }

    .service-services,
    .vbx-services,
    .ccs-services {
        padding-bottom: 14px;
    }

    .service-services-inner,
    .vbx-services-inner,
    .ccs-services-inner {
        width: min(86vw, 620px);
        gap: 38px;
    }

    .service-card,
    .vbx-service-card,
    .ccs-service-card {
        padding: 0 14px 18px;
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        grid-template-areas:
            "title title"
            "image image"
            "pills copy";
        column-gap: 18px;
    }

    .service-card-title,
    .vbx-service-title,
    .ccs-service-title {
        grid-area: title;
        height: 42px;
        width: 98%;
        transform: translateY(-14px);
        font-size: 48px;
    }

    .service-card-body,
    .vbx-service-body,
    .ccs-service-body {
        padding: 2px 0 4px;
        display: contents;
    }

    .service-image,
    .vbx-service-image,
    .ccs-service-image {
        grid-area: image;
        width: min(64%, 440px);
        margin: 0 auto 10px;
    }

    .service-copy,
    .vbx-service-copy,
    .ccs-service-copy {
        grid-area: copy;
        font-size: 42px;
        line-height: 1.2;
        align-self: center;
    }

    .service-btn-group,
    .vbx-button-group,
    .ccs-pill-list {
        grid-area: pills;
        gap: 8px;
        justify-content: flex-start;
        padding: 0;
        display: grid;
    }

    .service-btn,
    .vbx-btn,
    .ccs-pill-list li {
        width: 100%;
        min-width: 0;
        height: 44px;
        font-size: 34px;
        padding: 0 10px;
        justify-content: flex-start;
    }

    .service-voices,
    .vbx-voices,
    .ccs-voices {
        padding: 46px 0 68px;
    }

    .service-voices::after,
    .vbx-voices::after,
    .ccs-voices::after {
        width: 360px;
        height: 360px;
        right: -186px;
        bottom: -120px;
    }

    .service-voices-inner,
    .vbx-voices-inner,
    .ccs-voices-inner {
        width: min(86vw, 620px);
    }

    .service-voices-title,
    .vbx-voices-title,
    .ccs-voices-title {
        font-size: 76px;
    }

    .service-voice-grid,
    .vbx-voice-grid,
    .ccs-voice-grid {
        margin-top: 28px;
        grid-template-columns: 150px 1fr;
        gap: 16px;
        align-items: center;
    }

    .service-strengths,
    .vbx-strengths,
    .ccs-strengths {
        padding: 42px 0 36px;
    }

    .service-strengths::before,
    .vbx-strengths::before,
    .ccs-strengths::before,
    .service-strengths::after,
    .vbx-strengths::after,
    .ccs-strengths::after {
        display: none;
    }

    .service-strengths-inner,
    .vbx-strengths-inner,
    .ccs-strengths-inner {
        width: min(92vw, 360px);
    }

    .service-strengths-title,
    .vbx-strengths-title,
    .ccs-section-title {
        font-size: 30px;
    }

    .service-strengths-lead,
    .vbx-strengths-lead,
    .ccs-section-lead {
        margin: 12px auto 18px;
        font-size: 11px;
        line-height: 1.45;
    }

    .service-features-grid,
    .vbx-features-grid,
    .ccs-strength-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-feature-card,
    .vbx-feature-card,
    .ccs-strength-card {
        padding: 12px 10px;
    }

    .service-feature-number,
    .vbx-feature-number,
    .ccs-strength-card h3 {
        font-size: 18px;
    }

    .service-feature-icon,
    .vbx-feature-icon,
    .ccs-strength-icon {
        height: 112px;
        margin: 10px auto 8px;
    }

    .service-feature-text,
    .vbx-feature-text,
    .ccs-strength-card p {
        font-size: 10px;
        line-height: 1.35;
    }
}

@media (max-width: 560px) {
    .service-intro,
    .vbx-intro,
    .ccs-intro {
        padding: 44px 14px 54px;
    }

    .service-title,
    .vbx-title {
        font-size: 22px;
    }

    .ccs-title {
        font-size: 34px;
    }

    .service-lead,
    .vbx-lead,
    .ccs-lead {
        margin-top: 14px;
        width: min(92vw, 360px);
        font-size: 16px;
        line-height: 1.6;
    }

    .service-services-inner,
    .vbx-services-inner,
    .ccs-services-inner {
        width: min(92vw, 360px);
        gap: 16px;
    }

    .service-card,
    .vbx-service-card,
    .ccs-service-card {
        padding: 0 8px 10px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "image"
            "pills"
            "copy";
        gap: 8px;
    }

    .service-card-title,
    .vbx-service-title,
    .ccs-service-title {
        height: 32px;
        width: 96%;
        transform: translateY(-8px);
        font-size: 16px;
    }

    .service-image,
    .vbx-service-image,
    .ccs-service-image {
        width: 100%;
        margin-bottom: 0;
    }

    .service-btn-group,
    .vbx-button-group,
    .ccs-pill-list {
        gap: 6px;
        grid-template-columns: repeat(1, 1fr);
    }

    .service-btn,
    .vbx-btn,
    .ccs-pill-list li {
        height: 30px;
        font-size: 11px;
        justify-content: center;
    }

    .service-copy,
    .vbx-service-copy,
    .ccs-service-copy {
        font-size: 11px;
        line-height: 1.45;
    }
}

/* ========== HEADER ========== */
.main-header {
    position: relative;
    z-index: 900;
    background: var(--header-bg);
    padding: var(--header-padding-y) 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.header-inner {
    width: min(1320px, 92vw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.logo-split-wrap {
    position: relative;
    display: inline-flex;
    pointer-events: none;
}

.logo-split-wrap img {
    height: 100%;
    width: auto;
    display: block;
}

.logo-layer-orb {
    clip-path: inset(0 0 calc(100% - var(--logo-split-point)) 0);
}

.logo-layer-text {
    position: absolute;
    inset: 0;
    clip-path: inset(var(--logo-split-point) 0 0 0);
    filter: brightness(0) invert(1);
}

.header-logo-dt {
    height: var(--header-logo-height);
    width: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.header-logo-sp {
    display: none;
}

.brand-orb {
    display: none; /* Deprecated in favor of images! */
}

.brand-name {
    display: none; /* Deprecated in favor of images! */
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: var(--sp-hamburger-gap);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.menu-toggle span {
    width: var(--sp-hamburger-width);
    height: var(--sp-hamburger-height);
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    justify-content: flex-end;
    flex: 1;
    margin-left: 40px;
}

/* Nav link styles are now scoped to .desktop-nav-links and .mobile-nav-links-wrap */

/* ========== CONTACT CTA ========== */
.contact-cta {
    background: #ffffff;
    padding: var(--contact-padding-top) 16px 80px;
    position: relative;
    overflow: hidden;
}

.contact-cta::before {
    display: none;
}

.section-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 40px;
    width: min(1200px, 92vw);
    margin-left: auto;
    margin-right: auto;
}

.section-watermark {
    display: block;
    font-size: var(--contact-watermark-size);
    font-weight: 800;
    color: #e5e9f0;
    position: absolute;
    top: var(--contact-watermark-top);
    left: 50%;
    transform: translate(-50%, -40%);
    z-index: 0;
    letter-spacing: 0.05em;
    pointer-events: none;
    line-height: 1;
    margin-bottom: 0;
    opacity: var(--contact-watermark-opacity);
}

.section-head h2 {
    font-size: var(--contact-title-size);
    font-weight: 700;
    color: #1a233a;
    position: relative;
    z-index: 1;
}

.contact-panel {
    background-color: #d8eff3; /* Matching the light cyan */
    max-width: var(--contact-panel-width);
    margin: 0 auto;
    padding: 50px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    text-align: left;
}

.contact-meta {
    display: grid;
    grid-template-columns: minmax(4.5em, auto) min-content auto; /* Perfect key:value align */
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
    text-align: left;
    margin-bottom: 0;
}

.contact-meta span {
    font-size: var(--contact-info-size);
    color: #333;
    font-weight: 400;
    line-height: 1.4;
}

.contact-label {
    text-align: right; /* Keeps colons aligned without spreading the characters! */
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #1a233a;
    padding: var(--contact-btn-padding-y) var(--contact-btn-padding-x);
    border: var(--contact-btn-border);
    border-radius: var(--contact-btn-radius);
    font-size: var(--contact-btn-font-size);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
    box-shadow: none;
    min-width: var(--contact-btn-min-width); /* Tunable min-width */
}

.contact-btn:hover {
    background: #316298;
    color: #fff;
    transform: none;
    box-shadow: none;
}

/* ========== FOOTER ========== */
.site-footer {
    background: var(--footer-bg-color);
    padding: 60px 16px 40px;
    border-top: none;
}

.footer-inner {
    width: min(1200px, 92vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
}

.footer-brand-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 12px;
}

.footer-logo-dt {
    height: var(--footer-logo-height);
    width: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.footer-logo-sp {
    display: none; /* Hidden by default */
}

.footer-brand-block p {
    font-size: var(--footer-address-size);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-weight: 400;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-links-grid ul {
    list-style: none;
}

.footer-links-grid li {
    margin-bottom: 14px;
}

.footer-links-grid a {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--footer-nav-link-size);
    font-weight: 400;
    transition: color 0.3s ease;
    line-height: 1.6;
    text-decoration: none;
}

.footer-links-grid a.footer-sublink {
    font-size: var(--footer-nav-sublink-size);
}

.footer-links-grid a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-links-grid li:first-child a {
    font-weight: 700;
    color: #fff;
    font-size: var(--footer-nav-title-size);
    text-decoration: none;
}

/* ========== MOBILE NAV OVERLAY (always present, hidden by default) ========== */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 80vw);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
}

.main-nav.open .mobile-nav-overlay {
    right: 0;
}

/* Dim backdrop when open */
.main-nav.open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
}

.mobile-nav-brand-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e0e4ea;
}

.mobile-nav-brand-area .brand {
    padding: 0;
}

.mobile-nav-brand-area .brand-orb {
    width: 32px;
    height: 32px;
}

.brand-name-overlay {
    display: none; /* Deprecated in favor of images! */
}

.mobile-nav-links-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.menu-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #0a46a6;
    letter-spacing: 0.04em;
}

.close-icon {
    font-size: 20px;
    line-height: 1;
}

.mobile-nav-links-wrap {
    display: flex;
    flex-direction: column;
}

.mobile-nav-links-wrap a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #1a233a;
    border-bottom: 1px solid #eef0f4;
    transition: background 0.2s ease;
}

.mobile-nav-links-wrap a:hover {
    background: #f4f6fa;
}

.mobile-nav-links-wrap a.sub-link {
    padding-left: 32px;
    font-size: 14px;
    font-weight: 500;
    color: #3a4a6b;
}

/* Desktop nav links — visible on desktop, hidden on mobile */
.desktop-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
}

.desktop-nav-links a {
    color: #fff;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: var(--nav-link-padding-y) 0;
    position: relative;
    transition: opacity 0.2s ease;
}

.desktop-nav-links a::after {
    content: "";
    position: absolute;
    bottom: var(--nav-underline-offset);
    left: 0;
    width: 0;
    height: var(--nav-underline-height);
    background: #fff;
    transition: width 0.3s ease;
}

.desktop-nav-links a:hover::after,
.desktop-nav-links a.active::after {
    width: 100%;
}

/* Dropdown Menu Styles */
.nav-item.has-dropdown {
    position: relative;
    padding: 0;
}

.nav-item.has-dropdown > a {
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: max-content;
    min-width: 200px;
    background: rgba(0, 55, 143, 0.98);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px 24px !important;
    font-size: 14px !important;
    text-align: left;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.dropdown-menu a::after {
    display: none !important; /* Remove the underline from dropdown items */
}

.desktop-nav-links a.cta {
    background: #fff;
    color: #003788;
    padding: 10px 18px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    transition: background 0.3s ease;
}

.desktop-nav-links a.cta:hover {
    background: #eef2f8;
}

.desktop-nav-links a.cta::after {
    display: none !important;
}

.cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 900;
}

/* ========== HEADER/FOOTER RESPONSIVE ========== */
@media (max-width: 900px) {
    .main-header {
        padding: var(--sp-header-padding-y) 0;
    }

    .header-inner {
        width: 92vw;
    }

    /* Hide old nav link styles, show hamburger */
    .desktop-nav-links {
        display: none;
    }

    .main-nav {
        margin-left: 0;
        flex: none;
    }

    .menu-toggle {
        display: flex;
        z-index: 10;
        margin-left: auto;
        margin-right: var(--sp-hamburger-pr);
    }

    .footer-inner {
        display: flex;
        flex-direction: column-reverse;
        gap: 60px;
        align-items: center;
    }

    .footer-brand-block {
        align-items: center;
        text-align: center;
    }

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

    .footer-links-grid {
        display: block;
        column-count: 2;
        column-gap: 20px;
        width: 100%;
    }

    .footer-links-grid ul {
        break-inside: avoid;
        margin-bottom: 30px;
    }

    .footer-links-grid ul:last-child {
        margin-bottom: 0;
    }

    .contact-panel {
        width: var(--sp-contact-panel-width); /* Now tunable */
        margin: 0 auto;
        padding: 50px 20px 40px;
        flex-direction: column-reverse;
        gap: 30px;
        text-align: center;
    }

    .contact-cta {
        padding-top: var(--sp-contact-padding-top);
    }

    .contact-btn {
        width: auto; /* Allow min-width to take over */
        min-width: var(--sp-contact-btn-min-width);
        max-width: none;
    }

    .section-watermark {
        font-size: 70px;
         --contact-watermark-top: -10%;
    }

    .contact-meta {
        display: grid;
        justify-content: center; /* Centers the whole grid block! */
        gap: 8px;
        margin-bottom: 20px;
        text-align: left; /* Keep internal labels/values aligned! */
    }
}

/* Hide overlay on desktop */
@media (min-width: 901px) {
    .mobile-nav-overlay {
        display: none;
    }

    .menu-toggle {
        display: none;
    }
}

@media (max-width: 560px) {
    .header-logo-dt {
        display: none;
    }

    .header-logo-sp {
        display: block;
        height: var(--sp-header-logo-height);
    }

    .brand-orb {
        display: none;
    }

    .brand-name {
        display: none;
    }

    .brand {
        gap: 6px;
        padding-left: var(--sp-header-logo-px);
    }

    .section-head h2 {
        font-size: 28px;
    }

    .section-watermark {
        font-size: 60px;
    }

    .contact-panel {
        padding: 40px 16px 30px;
    }

    .contact-meta span {
        font-size: var(--sp-contact-info-size);
    }

    .contact-btn {
        padding: var(--sp-contact-btn-padding-y) var(--sp-contact-btn-padding-x);
        font-size: var(--sp-contact-btn-font-size);
        min-width: var(--sp-contact-btn-min-width);
    }

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

    .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 20px;
        text-align: left;
    }

    .footer-links-grid ul:nth-child(1),
    .footer-links-grid ul:nth-child(3) {
        padding-left: var(--sp-footer-padding-left);
    }

    .footer-links-grid ul:last-child {
        grid-column: 1 / -1;
    }

    .footer-logo-dt {
        display: none; /* Hide Desktop logo */
    }

    .footer-logo-sp {
        display: block; /* Show Mobile logo */
        height: var(--sp-footer-logo-height);
        width: auto;
        margin: 0 auto;
    }

    .footer-brand-block p {
        font-size: var(--sp-footer-address-size);
    }

    .footer-links-grid a {
        font-size: var(--sp-footer-nav-link-size);
    }

    .footer-links-grid a.footer-sublink {
        font-size: var(--sp-footer-nav-sublink-size);
    }

    .footer-links-grid li:first-child a {
        font-size: var(--sp-footer-nav-title-size);
    }
}