:root {
            --navy: #163f6f;
            --navy-dark: #0d2e52;
            --blue: #4b82bd;
            --blue-light: #edf4fa;

            --red: #c82231;
            --red-dark: #a71926;

            --gold: #e5b33f;
            --gold-dark: #ca982b;

            --white: #ffffff;
            --off-white: #f7f8fa;
            --gray-100: #f1f2f4;
            --gray-200: #e1e4e8;
            --gray-400: #9aa2aa;
            --gray-600: #646b72;
            --gray-800: #30343a;

            --max-width: 1220px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--white);

            font-family: Arial, Helvetica, sans-serif;
            color: var(--gray-800);
            line-height: 1.55;
        }

        a {
            color: var(--navy);
            text-decoration: none;
        }

        a:hover,
        a:focus {
            text-decoration: underline;
        }

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

        button,
        input {
            font: inherit;
        }

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

        /* =========================================================
           TOP UTILITY BAR
           ========================================================= */

        .utility-bar {
            background: var(--blue);
            color: var(--white);
            font-size: 0.76rem;
        }

        .utility-inner {
            min-height: 34px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .utility-links,
        .social-links {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .utility-bar a {
            color: var(--white);
            font-weight: 700;
        }

        /* =========================================================
           MASTHEAD
           ========================================================= */

        .site-header {
            background: var(--white);
        }

        .masthead {
            min-height: 126px;

            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 30px;
        }

        .site-brand {
            grid-column: 2;
            text-align: center;
        }

        .brand-mark {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .flag-lines {
            width: 58px;
        }

        .flag-lines span {
            display: block;
            height: 4px;
            margin: 4px 0;
            background: var(--red);
            transform: skewX(-25deg);
        }

        .flag-lines span:nth-child(2) {
            width: 48px;
        }

        .flag-lines span:nth-child(3) {
            width: 38px;
        }

        .site-title {
            margin: 0;

            font-family: Georgia, "Times New Roman", serif;
            font-size: 2.25rem;
            line-height: 1;

            color: var(--navy-dark);
            letter-spacing: 0.025em;
            text-transform: uppercase;
        }

        .tagline {
            margin: 8px 0 0;

            color: var(--red);
            font-size: 0.81rem;
            font-weight: 800;
            letter-spacing: 0.075em;
            text-transform: uppercase;
        }

        .header-actions {
            justify-self: end;

            display: flex;
            gap: 10px;
        }

        .btn {
            display: inline-block;

            border: 0;
            padding: 10px 22px;

            background: var(--red);
            color: var(--white);

            font-family: Georgia, "Times New Roman", serif;
            font-weight: 700;
            text-align: center;

            cursor: pointer;
        }

        .btn:hover,
        .btn:focus {
            background: var(--red-dark);
            text-decoration: none;
        }

        /* =========================================================
           PRIMARY NAVIGATION
           ========================================================= */

        .primary-nav {
            background: var(--navy);
            border-bottom: 4px solid var(--red);
        }

        .nav-inner {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 20px;
        }

        .nav-list {
            display: flex;
            flex-wrap: wrap;

            margin: 0;
            padding: 0;

            list-style: none;
        }

        .nav-list a {
            display: block;

            padding: 14px 15px;

            color: var(--white);

            font-size: 0.81rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .nav-list a:hover,
        .nav-list a:focus {
            background: var(--navy-dark);
            text-decoration: none;
        }

        .search-box {
            display: flex;
            align-items: center;
            min-width: 260px;
        }

        .search-box input {
            width: 100%;

            padding: 8px 11px;

            border: 1px solid #42658a;
            background: var(--navy-dark);
            color: var(--white);
        }

        .search-box input::placeholder {
            color: #b9c7d4;
        }

        /* =========================================================
           THREE COLUMN MAIN AREA
           ========================================================= */

        .main-layout {
            display: grid;
            grid-template-columns: 195px minmax(0, 1fr) 270px;
            gap: 30px;

            padding-top: 30px;
            padding-bottom: 45px;
        }

        /* =========================================================
           LEFT SIDEBAR
           ========================================================= */

        .left-sidebar {
            font-size: 0.81rem;
        }

        .left-sidebar h2 {
            margin: 0 0 12px;

            color: var(--navy-dark);
            font-size: 1rem;
        }

        .left-sidebar h3 {
            margin: 22px 0 7px;

            color: var(--gray-800);
            font-size: 0.88rem;
        }

        .left-sidebar ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .left-sidebar li {
            border-top: 1px solid var(--gray-200);
        }

        .left-sidebar a {
            display: block;

            padding: 9px 2px;

            color: #5a6067;
            text-transform: uppercase;
        }

        .left-sidebar a:hover {
            color: var(--red);
            text-decoration: none;
        }

        /* =========================================================
           HERO
           ========================================================= */

        .hero-image {
            position: relative;

            min-height: 390px;
            overflow: hidden;

            background:
                linear-gradient(
                    rgba(12, 41, 73, 0.05),
                    rgba(12, 41, 73, 0.50)
                ),
                url("../images/capitol-tech-workers.jpg") center / cover no-repeat;
        }

        .hero-overlay {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;

            padding: 26px;

            color: var(--white);
            background: linear-gradient(
                transparent,
                rgba(5, 24, 43, 0.92)
            );
        }

        .hero-label {
            display: inline-block;

            margin-bottom: 8px;
            padding: 4px 8px;

            background: var(--red);
            color: var(--white);

            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .hero-overlay h1 {
            margin: 0 0 8px;

            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2rem, 4vw, 3rem);
            line-height: 1.06;
        }

        .hero-overlay p {
            margin: 0;
            max-width: 720px;

            font-size: 1rem;
        }

        /* =========================================================
           INTRO COPY
           ========================================================= */

        .intro-copy {
            padding-top: 22px;

            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.03rem;
        }

        .intro-copy .lead {
            font-size: 1.19rem;
        }

        .intro-copy p {
            margin: 0 0 17px;
        }

        .mission-callout {
            margin: 28px 0;
            padding: 22px 24px;

            border-left: 5px solid var(--red);
            background: var(--blue-light);
        }

        .mission-callout h2 {
            margin: 0 0 8px;

            color: var(--navy-dark);
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.45rem;
        }

        /* =========================================================
           METRICS
           ========================================================= */

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;

            margin: 25px 0 30px;
        }

        .metric {
            padding: 18px 12px;

            border-top: 4px solid var(--navy);
            background: var(--gray-100);

            text-align: center;
        }

        .metric-number {
            display: block;

            color: var(--navy-dark);

            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.85rem;
            font-weight: 700;
        }

        .metric-label {
            display: block;

            margin-top: 3px;

            color: var(--gray-600);
            font-size: 0.73rem;
            font-weight: 800;
            letter-spacing: 0.045em;
            text-transform: uppercase;
        }

        .placeholder-note {
            margin-top: 8px;

            color: var(--gray-600);
            font-size: 0.72rem;
            text-align: center;
        }

        /* =========================================================
           RIGHT SIDEBAR
           ========================================================= */

        .right-sidebar {
            border-top: 1px solid var(--gray-200);
        }

        .sidebar-card {
            padding: 20px 0 24px;
            border-bottom: 1px solid var(--gray-200);
        }

        .sidebar-card h2 {
            margin: 0 0 8px;

            color: var(--navy-dark);

            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.18rem;
        }

        .sidebar-card p {
            margin-bottom: 12px;
            font-size: 0.89rem;
        }

        .sidebar-button {
            display: block;

            width: 100%;
            padding: 11px 12px;

            background: var(--gold);
            color: var(--navy-dark);

            font-size: 0.82rem;
            font-weight: 900;
            text-align: center;
            text-transform: uppercase;
        }

        .sidebar-button:hover {
            background: var(--gold-dark);
            text-decoration: none;
        }

        .sidebar-button.red {
            background: var(--red);
            color: var(--white);
        }

        .sidebar-button.red:hover {
            background: var(--red-dark);
        }

        /* =========================================================
           LOWER HOMEPAGE CONTENT
           ========================================================= */

        .full-width-section {
            border-top: 1px solid var(--gray-200);
            background: var(--off-white);
        }

        .section-inner {
            padding-top: 38px;
            padding-bottom: 42px;
        }

        .section-heading {
            margin: 0 0 8px;

            color: var(--navy-dark);

            font-family: Georgia, "Times New Roman", serif;
            font-size: 2rem;
        }

        .section-subtitle {
            max-width: 760px;
            margin: 0 0 25px;

            color: var(--gray-600);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .feature-card {
            padding: 22px;

            border: 1px solid var(--gray-200);
            border-top: 5px solid var(--navy);

            background: var(--white);
        }

        .feature-card h3 {
            margin: 0 0 10px;

            color: var(--navy-dark);

            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.25rem;
        }

        .feature-card p {
            font-size: 0.9rem;
        }

        .feature-link {
            font-size: 0.83rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        /* =========================================================
           COMPANY TRACKER
           ========================================================= */

        .company-section {
            padding-top: 42px;
            padding-bottom: 45px;
        }

        .company-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;

            margin-top: 22px;
        }

        .company-card {
            padding: 18px 12px;

            border: 1px solid var(--gray-200);
            background: var(--white);

            color: var(--navy-dark);

            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.05rem;
            font-weight: 700;
            text-align: center;
        }

        .company-card span {
            display: block;

            margin-top: 6px;

            color: var(--gray-600);

            font-family: Arial, Helvetica, sans-serif;
            font-size: 0.68rem;
            font-weight: 700;

            text-transform: uppercase;
        }

        /* =========================================================
           SURVEY PREVIEW
           ========================================================= */

        .survey-section {
            background: var(--navy-dark);
            color: var(--white);
        }

        .survey-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 45px;
            align-items: center;

            padding-top: 45px;
            padding-bottom: 45px;
        }

        .survey-section h2 {
            margin-top: 0;

            font-family: Georgia, "Times New Roman", serif;
            font-size: 2rem;
        }

        .survey-results {
            padding: 22px;
            background: var(--white);
            color: var(--gray-800);
        }

        .survey-row {
            margin-bottom: 15px;
        }

        .survey-label {
            display: flex;
            justify-content: space-between;

            margin-bottom: 4px;

            font-size: 0.84rem;
            font-weight: 700;
        }

        .survey-bar {
            height: 10px;
            background: var(--gray-200);
        }

        .survey-fill {
            height: 100%;
            background: var(--blue);
        }

        /* =========================================================
           MEMBERSHIP
           ========================================================= */

        .membership-section {
            padding-top: 45px;
            padding-bottom: 45px;
        }

        .membership-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;

            margin-top: 25px;
        }

        .membership-card {
            padding: 26px;

            border: 1px solid var(--gray-200);
            background: var(--white);
        }

        .membership-card.active {
            border-top: 6px solid var(--red);
        }

        .membership-card.disabled {
            opacity: 0.45;
            background: var(--gray-100);
        }

        .membership-card h3 {
            margin: 0;

            color: var(--navy-dark);

            font-family: Georgia, "Times New Roman", serif;
            font-size: 1.45rem;
        }

        .membership-price {
            margin: 10px 0;

            color: var(--red);

            font-size: 1.3rem;
            font-weight: 800;
        }

        .membership-card ul {
            padding-left: 20px;
            font-size: 0.88rem;
        }

        .coming-soon {
            display: inline-block;

            margin-top: 10px;
            padding: 5px 8px;

            background: var(--gray-400);
            color: var(--white);

            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        /* =========================================================
           FOOTER
           ========================================================= */

        .site-footer {
            border-top: 6px solid var(--red);
            background: var(--navy-dark);
            color: var(--white);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 40px;

            padding-top: 38px;
            padding-bottom: 36px;
        }

        .site-footer h2,
        .site-footer h3 {
            font-family: Georgia, "Times New Roman", serif;
        }

        .site-footer h2 {
            margin-top: 0;
        }

        .site-footer ul {
            margin: 0;
            padding: 0;

            list-style: none;
        }

        .site-footer li {
            margin-bottom: 7px;
        }

        .site-footer a {
            color: var(--white);
        }

        .copyright {
            padding: 14px 0;

            border-top: 1px solid rgba(255, 255, 255, 0.16);

            color: #c9d3dd;
            font-size: 0.76rem;
        }

        /* =========================================================
           RESPONSIVE
           ========================================================= */

        @media (max-width: 1020px) {
            .masthead {
                grid-template-columns: 1fr auto;
            }

            .site-brand {
                grid-column: 1;
                text-align: left;
            }

            .main-layout {
                grid-template-columns: 185px 1fr;
            }

            .right-sidebar {
                grid-column: 1 / -1;

                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 22px;
            }

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

        @media (max-width: 760px) {
            .utility-inner,
            .masthead,
            .nav-inner {
                display: block;
            }

            .utility-inner {
                padding: 8px 0;
            }

            .utility-links {
                margin-top: 6px;
                flex-wrap: wrap;
            }

            .masthead {
                padding: 22px 0;
            }

            .site-brand {
                text-align: center;
            }

            .header-actions {
                justify-content: center;
                margin-top: 18px;
            }

            .nav-list {
                display: block;
            }

            .search-box {
                min-width: 0;
                padding: 10px;
            }

            .main-layout {
                display: block;
            }

            .left-sidebar {
                margin-bottom: 30px;
            }

            .right-sidebar {
                display: block;
                margin-top: 35px;
            }

            .feature-grid,
            .metric-grid,
            .membership-grid,
            .survey-grid,
            .footer-grid {
                grid-template-columns: 1fr;
            }

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

            .hero-image {
                min-height: 450px;
            }
        }

        @media (max-width: 480px) {
            .container {
                width: min(var(--max-width), calc(100% - 24px));
            }

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

            .site-title {
                font-size: 1.75rem;
            }
        }
    
.survey-fill { width: 0; }

/* Shared logo, page notices, and contact details */
.brand-home { display: block; color: var(--navy-dark); }
.site-logo { display: block; width: 100%; max-width: 540px; height: 126px; margin: 0 auto; object-fit: contain; pointer-events: none; }
.logo-fallback { display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center; }
.masthead { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.site-brand { grid-column: 1; width: 100%; max-width: 540px; justify-self: center; }
.mailing-address { margin: 20px 0 16px; font-style: normal; line-height: 1.7; }
.contact-button { font-size: .9rem; }
.page-content { max-width: 900px; padding-top: 55px; padding-bottom: 65px; min-height: 46vh; }
.page-eyebrow { color: var(--red); font-weight: bold; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.page-content h1 { margin: 10px 0 20px; font-family: Georgia, serif; color: var(--navy-dark); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
.development-notice { padding: 26px; border-left: 5px solid var(--red); background: var(--blue-light); margin-bottom: 26px; }
.development-notice h2 { color: var(--navy-dark); margin-top: 0; font-family: Georgia, serif; }
.development-notice p:last-child { margin-bottom: 0; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (max-width: 760px) { .site-brand { margin: 0 auto; } .site-logo { height: 110px; } .page-content { padding-top: 32px; } }
@media (max-width: 480px) { .site-logo { height: 100px; } }

/* Keep the production logo proportional at every viewport size. */
.site-logo { width: 100%; height: auto; max-width: 540px; object-fit: contain; pointer-events: auto; }

/* Featured YouTube carousel */
.video-carousel { border: 1px solid var(--gray-200); background: var(--white); min-width: 0; }
.carousel-slide[hidden], .carousel-controls[hidden] { display: none; }
.carousel-media { background: var(--navy-dark); }
.carousel-media > div, .carousel-video-link { display: block; position: relative; aspect-ratio: 16 / 9; }
.carousel-thumbnail { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.carousel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 68px; height: 48px; border-radius: 10px; background: #c82231; color: white; font-size: 26px; box-shadow: 0 2px 12px #0006; }
.carousel-watch { position: absolute; bottom: 12px; right: 12px; padding: 6px 10px; background: #0d2e52ed; color: white; font-size: .8rem; font-weight: bold; }
.carousel-video-link:hover .carousel-play, .carousel-video-link:focus-visible .carousel-play { background: var(--red-dark); }
.carousel-copy { padding: 22px 24px 12px; }
.carousel-eyebrow { margin: 0 0 8px; color: var(--red); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.carousel-copy h1, .carousel-copy h2 { margin: 0 0 15px; font-family: Georgia, serif; font-size: clamp(1.55rem, 2.6vw, 2.4rem); line-height: 1.15; color: var(--navy-dark); overflow-wrap: anywhere; }
.carousel-copy > p:not(.carousel-eyebrow) { font-family: Georgia, serif; font-size: 1rem; line-height: 1.65; margin: 0 0 16px; }
.carousel-copy .carousel-source { padding-top: 14px; border-top: 1px solid var(--gray-200); overflow-wrap: anywhere; }
.carousel-source a { text-decoration: underline; font-family: Arial, sans-serif; font-size: .82rem; }
.carousel-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 14px 12px; border-top: 1px solid var(--gray-200); background: var(--off-white); }
.carousel-selectors { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.carousel-controls button { min-width: 36px; min-height: 44px; padding: 5px 8px; border: 1px solid var(--gray-200); color: var(--navy-dark); background: white; cursor: pointer; font-weight: bold; }
.carousel-controls button[aria-current="true"] { background: var(--navy); color: white; border-color: var(--navy); }
.carousel-controls button:hover { border-color: var(--red); }
.carousel-controls button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.carousel-controls .carousel-toggle { min-width: 64px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.thumbnail-unavailable { min-height: 200px; }
@media (max-width: 480px) { .carousel-copy { padding: 18px 16px 8px; } .carousel-controls { gap: 6px; } .carousel-selectors { order: 2; flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }