/* =========================================
   TECH BEARD DIGITAL
   ========================================= */


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


html {
    scroll-behavior: smooth;
}


:root {
    --black: #101828;
    --blue: #1757ff;
    --red: #ef3340;
    --yellow: #ffd84d;
    --white: #f7f8fa;
    --light-gray: #eef1f5;
    --gray: #667085;
}


body {
    background: var(--white);
    color: var(--black);
    font-family: "Space Grotesk", sans-serif;
    overflow-x: hidden;
}


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



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


.nav {
    min-height: 82px;

    padding: 0 28px;

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

    background: var(--white);

    border-bottom: 2px solid var(--black);

    position: relative;
    z-index: 50;
}


.logo {
    display: flex;
    align-items: center;
    transform: translateX(-7px);

    gap: 10px;

    font-family: "DM Mono", monospace;

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 1px;
}




.logo-image {
    width: 55px;
    height: 45px;

    object-fit: contain;

    display: block;

    flex-shrink: 0;
}


.logo-text {
    white-space: nowrap;
}


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


.nav nav {
    display: flex;
    align-items: center;

    gap: 24px;

    font-size: 13px;
    font-weight: 600;
}


.nav nav a {
    transition: 0.2s ease;
}


.nav nav a:hover {
    color: var(--red);
}


.nav-button {
    padding: 10px 16px;

    background: var(--blue);

    color: #ffffff !important;
    font-weight: 700;

    box-shadow: 4px 4px 0 var(--black);
}


.nav-button:hover {
    transform: translate(2px, 2px);

    box-shadow: 2px 2px 0 var(--black);
}



/* =========================================
   SHARED LABELS
   ========================================= */


.tiny-label,
.label {
    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 2px;

    color: var(--blue);

    margin-bottom: 18px;
}




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























.red-line {
    width: 50px;
    height: 4px;

    background: var(--red);

    flex-shrink: 0;
}









/* =========================================
   HERO ART — BEHAVIOR WIREFRAME COMPUTER
   ========================================= */




























































































/* =========================================
   WHY TECH BEARD
   ========================================= */


.different {
    padding: 70px 7% 140px;

    background: var(--white);

    border-bottom: 2px solid var(--black);
}


.different-header {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.5fr 0.5fr;

    gap: 80px;

    align-items: end;
}


.different-header h2 {
    max-width: 900px;

    font-size: clamp(2.8rem, 5vw, 5.5rem);

    line-height: 0.82;

    letter-spacing: -7px;
}


.different-header h2 span {
    display: block;

    color: var(--blue);

    font-family: Georgia, serif;

    font-style: italic;
}


.different-intro {
    max-width: 380px;

    color: var(--gray);

    font-size: 17px;

    line-height: 1.65;
}


.care-grid {
    max-width: 1200px;

    margin: 90px auto 0;

    display: grid;

    /* Deliberate hierarchy: the first card gets the largest footprint,
       the second is next, then the third, with the fourth smallest. */
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: 1.2fr 1fr;

    gap: 34px 22px;

    min-height: 900px;
}


.care-card {
    min-height: 0;
    height: auto;

    padding: 35px;

    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    border: 3px solid var(--black);

    box-shadow: 10px 10px 0 var(--black);

    transition: 0.25s ease;
}


/*
   Deliberate visual hierarchy:
   01 is the largest promise, followed by 02,
   then 03, with 04 carrying the least visual weight.
   Heights are minimums so content can expand naturally
   instead of overflowing into the next row.
*/
.care-card-primary,
.care-card-secondary,
.care-card-tertiary,
.care-card-quaternary {
    min-height: 0;
}


.care-card:hover {
    transform: translate(-5px, -5px);

    box-shadow: 15px 15px 0 var(--black);
}


.care-card-blue {
    background: var(--blue);

    color: white;
}


.care-card-yellow {
    background: var(--yellow);

    color: var(--black);
}


.care-card-red {
    background: var(--red);

    color: white;
}


.care-card-white {
    background: var(--light-gray);

    color: var(--black);
}


.care-number {
    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 2px;
}


.care-icon {
    margin-top: 45px;

    font-size: 65px;

    font-weight: 700;

    line-height: 1;
}


.care-card h3 {
    margin-top: 30px;

    max-width: 450px;

    font-size: clamp(2.2rem, 4vw, 4rem);

    line-height: 0.95;

    letter-spacing: -3px;
}


/* Heading hierarchy follows the card hierarchy. */
.care-card-primary h3 {
    font-size: clamp(2.45rem, 4.4vw, 4.35rem);
}


.care-card-secondary h3 {
    font-size: clamp(2.3rem, 4.1vw, 4.05rem);
}


.care-card-tertiary h3 {
    font-size: clamp(2.15rem, 3.8vw, 3.75rem);
}


.care-card-quaternary h3 {
    font-size: clamp(2rem, 3.5vw, 3.45rem);
}


.care-card p {
    max-width: 480px;

    margin-top: 22px;

    font-size: 16px;

    line-height: 1.6;
}


.care-card strong {
    margin-top: auto;

    padding-top: 35px;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 1.2px;
}


.care-card-blue strong,
.care-card-red strong {
    color: var(--yellow);
}



/* =========================================
   BEHAVIOR SECTION
   ========================================= */


.behavior-section {
    position: relative;

    padding: 95px 7%;

    background: var(--black);

    color: white;

    overflow: hidden;
}


.behavior-intro {
    max-width: 1200px;

    margin: auto;
}


.behavior-intro .label {
    color: var(--yellow);
}


.behavior-intro h2 {
    max-width: 800px;

    font-size: clamp(3rem, 5.5vw, 5.75rem);

    line-height: 0.8;

    letter-spacing: -7px;
}


.behavior-intro h2 span {
    color: var(--red);

    font-family: Georgia, serif;

    font-style: italic;
}


.behavior-grid {
    max-width: 1200px;

    margin: 48px auto 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2px;

    background: #3a4352;
}


.behavior-item {
    min-height: 280px;

    padding: 35px;

    background: var(--black);

    border: 1px solid #3a4352;

    transition: 0.25s ease;
}


.behavior-item:hover {
    background: var(--blue);

    transform: translate(-5px, -5px);
}


.behavior-item span {
    font-family: "DM Mono", monospace;

    color: var(--yellow);

    font-size: 11px;
}


.behavior-item h3 {
    margin-top: 60px;

    font-size: 35px;

    letter-spacing: -2px;
}


.behavior-item p {
    max-width: 400px;

    margin-top: 15px;

    color: #b5bdca;

    line-height: 1.6;
}


.behavior-item:hover p {
    color: white;
}


.behavior-item strong {
    display: block;

    margin-top: 25px;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 1px;

    color: var(--yellow);
}


.behavior-item:hover strong {
    color: white;
}



/* =========================================
   WHAT WE DO
   ========================================= */


.work {
    padding: 75px 7%;

    background: var(--white);
}


.work-header {
    max-width: 1200px;

    margin: auto auto 80px;

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 40px;
}


.work-header h2 {
    font-size: clamp(3rem, 5.5vw, 5.75rem);

    line-height: 0.8;

    letter-spacing: -7px;
}


.work-header h2 span {
    color: var(--red);

    font-family: Georgia, serif;

    font-style: italic;
}


.work-header > p {
    max-width: 350px;

    color: var(--gray);

    font-size: 15px;

    line-height: 1.6;
}


.work-list {
    max-width: 1200px;

    margin: auto;
}


.work-row {
    display: grid;

    grid-template-columns: 80px 1fr 60px;

    align-items: center;

    padding: 38px 0;

    border-top: 2px solid var(--black);

    transition: 0.2s ease;
}


.work-row:last-child {
    border-bottom: 2px solid var(--black);
}


.work-row:hover {
    color: var(--blue);

    padding-left: 25px;
}


.work-number {
    font-family: "DM Mono", monospace;

    font-size: 11px;
}


.work-title h3 {
    font-size: 42px;

    line-height: 1;

    letter-spacing: -2px;
}


.work-title span {
    display: block;

    max-width: 800px;

    margin-top: 10px;

    font-family: "DM Mono", monospace;

    font-size: 15px;

    line-height: 1.7;

    color: var(--gray);
}


.work-arrow {
    font-size: 35px;
}



/* =========================================
   ABOUT
   ========================================= */


.about {
    min-height: 650px;

    padding: 65px 7% 75px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

    background: var(--yellow);

    border-top: 2px solid var(--black);

    border-bottom: 2px solid var(--black);
}


.big-word {
    margin-top: 20px;

    font-size: clamp(3.5rem, 7.2vw, 8rem);

    line-height: 0.78;

    letter-spacing: -6px;

    transform: rotate(-8deg);

    color: var(--blue);

    text-shadow: 8px 8px 0 var(--black);
}


.about-right h2 {
    font-size: clamp(3rem, 6vw, 6rem);

    line-height: 0.85;

    letter-spacing: -5px;

    margin-bottom: 26px;
}


.about-right h2 span {
    color: var(--red);

    font-family: Georgia, serif;

    font-style: italic;
}


.about-right {
    max-width: 650px;
}


.about-right p:not(.label) {
    max-width: 590px;

    margin-bottom: 18px;

    font-size: 17px;

    line-height: 1.55;

    color: #343b46;
}


.about-right .bold-copy {
    font-size: 25px;

    font-weight: 700;

    line-height: 1.25;

    color: var(--black);
}



/* =========================================
   HOME PAGE CALL TO ACTION — DARK TECH REDESIGN
   ========================================= */

.contact {
    --cta-bg: #050a14;
    --cta-panel: rgba(13, 27, 53, 0.72);
    --cta-line: rgba(114, 148, 255, 0.18);
    --cta-blue: #2f6bff;
    --cta-violet: #7c5cff;
    --cta-text: #f8fbff;
    --cta-muted: #b9c3d6;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 55px 7% 122px;
    background:
        radial-gradient(circle at 72% 60%, rgba(35, 88, 255, 0.20), transparent 30%),
        radial-gradient(circle at 88% 36%, rgba(124, 92, 255, 0.15), transparent 28%),
        linear-gradient(135deg, #07111f 0%, #050a14 48%, #02050b 100%);
    color: var(--cta-text);
    text-align: left;
    border-top: 1px solid rgba(132, 156, 220, 0.12);
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to right, transparent, black 28%, black 82%, transparent);
}

.contact-split {
    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
    gap: clamp(50px, 7vw, 110px);
    align-items: center;
}

.contact-copy {
    position: relative;
    z-index: 3;
    max-width: 720px;
}

.contact .label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    color: #5e8cff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
}

.contact .label::after {
    content: "";
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, #5e8cff, transparent);
}

.contact h2 {
    max-width: 760px;
    margin: 0;
    color: var(--cta-text);
    font-size: clamp(3.55rem, 5.2vw, 6.5rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.065em;
    text-wrap: balance;
}

.contact h2 span,
.contact h2 .contact-highlight {
    display: block;
    margin-top: 12px;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #ff2d3f !important;
    -webkit-text-fill-color: #ff2d3f !important;
    font-family: "Space Grotesk", sans-serif;
    font-style: normal;
}

.contact-intro {
    max-width: 600px;
    margin: 34px 0 0;
    color: var(--cta-muted);
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.75;
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 38px;
    min-height: 64px;
    padding: 0 28px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(100deg, #2f6bff, #6c5cff);
    color: #ffffff;
    border: 1px solid rgba(148, 166, 255, 0.55);
    border-radius: 999px;
    box-shadow:
        0 18px 50px rgba(43, 81, 255, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.26);
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.contact-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.18) 48%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.contact-button:hover {
    transform: translateY(-4px);
    filter: brightness(1.06);
    box-shadow:
        0 24px 64px rgba(43, 81, 255, 0.38),
        inset 0 1px 0 rgba(255,255,255,0.30);
}

.contact-button:hover::before {
    transform: translateX(120%);
}

.contact-button-arrow {
    display: none;
}

.contact-visual {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
    perspective: 1000px;
}

.contact-image-shell {
    position: relative;
    z-index: 3;
    width: min(100%, 610px);
    border: 1px solid rgba(110, 142, 255, 0.22);
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(16, 32, 63, 0.74), rgba(4, 9, 18, 0.42));
    box-shadow:
        0 38px 90px rgba(0,0,0,0.40),
        0 0 80px rgba(43, 91, 255, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.08);
    transform: rotateY(-4deg) rotateX(1deg);
}

.contact-image-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(255,255,255,0.06), transparent 32%, transparent 72%, rgba(64,96,255,0.08));
}

.contact-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.contact-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(16px);
    pointer-events: none;
}

.contact-glow-one {
    width: 560px;
    height: 560px;
    right: 2%;
    top: 23%;
    background: radial-gradient(circle, rgba(35, 91, 255, 0.24), transparent 68%);
}

.contact-glow-two {
    width: 420px;
    height: 420px;
    right: 16%;
    bottom: -12%;
    background: radial-gradient(circle, rgba(121, 74, 255, 0.18), transparent 70%);
}

.contact-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(65, 105, 255, 0.22);
    border-radius: 50%;
    pointer-events: none;
}

.contact-orbit-one {
    width: 88%;
    aspect-ratio: 1;
    transform: rotate(-13deg);
}

.contact-orbit-two {
    width: 70%;
    aspect-ratio: 1;
    transform: rotate(22deg);
    border-color: rgba(126, 88, 255, 0.18);
}

.contact-orbit-dot {
    position: absolute;
    z-index: 4;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #4f78ff;
    border: 2px solid #86a2ff;
    box-shadow: 0 0 24px rgba(76, 118, 255, 0.85);
}

.contact-orbit-dot-one {
    top: 15%;
    right: 11%;
}

.contact-orbit-dot-two {
    bottom: 17%;
    left: 5%;
    width: 10px;
    height: 10px;
    background: #8b63ff;
    border-color: #ae93ff;
    box-shadow: 0 0 20px rgba(139, 99, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
    .contact-button,
    .contact-button::before,
    .contact-button-arrow {
        transition: none;
    }
}

/* =========================================
   CONTACT PAGE — COMPACT, FORM-FIRST LAYOUT
   ========================================= */


.contact-page {
    min-height: calc(100vh - 82px);

    /* Tight top spacing so the form is visible quickly. */
    padding: 18px 7% 105px;

    background: var(--light-gray);
}


.contact-page-header {
    max-width: 1200px;

    margin: 0 auto 18px;

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);

    grid-template-areas:
        "label intro"
        "title intro";

    column-gap: clamp(34px, 6vw, 90px);

    row-gap: 7px;

    align-items: end;
}


.contact-page-header .label {
    grid-area: label;

    margin: 0;
}


.contact-page-header h1 {
    grid-area: title;

    max-width: none;

    margin: 0;

    font-size: clamp(2.9rem, 4.3vw, 5rem);

    line-height: 0.92;

    letter-spacing: -4px;

    white-space: nowrap;
}


.contact-page-header h1 span {
    display: inline;

    color: var(--blue);

    font-family: Georgia, serif;

    font-style: italic;
}


.contact-page-header > p:not(.label) {
    grid-area: intro;

    max-width: 470px;

    margin: 0 0 5px;

    font-size: 15px;

    line-height: 1.5;

    color: var(--gray);

    align-self: end;
}


.contact-page-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 300px 1fr;

    gap: 42px;

    align-items: start;
}


.contact-left-column {
    display: block;
}


/* CONTACT INFO CARD */


.contact-info-card {
    padding: 28px;

    background: var(--yellow);

    border: 3px solid var(--black);

    box-shadow: 9px 9px 0 var(--black);
}


.contact-info-number {
    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 2px;

    color: var(--red);
}


.contact-info-card h2 {
    margin-top: 26px;

    font-size: 34px;

    line-height: 0.95;

    letter-spacing: -3px;
}


.contact-info-card p {
    margin-top: 18px;

    font-size: 15px;

    line-height: 1.55;

    color: #343b46;
}


.contact-info-card strong {
    display: block;

    margin-top: 26px;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    line-height: 1.6;

    letter-spacing: 1.5px;
}


/* CONTACT FORM */


.contact-form {
    padding: 40px;

    background: var(--white);

    border: 3px solid var(--black);

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


.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}


.form-group {
    margin-bottom: 22px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1px;
}


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

    padding: 15px;

    background: white;

    border: 2px solid var(--black);

    border-radius: 0;

    outline: none;

    color: var(--black);

    font-family: "Space Grotesk", sans-serif;

    font-size: 16px;

    transition: 0.2s ease;
}


.form-group textarea {
    min-height: 150px;

    resize: vertical;
}


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

    box-shadow: 4px 4px 0 var(--yellow);
}


.form-submit {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    padding: 16px 24px;

    background: var(--blue);

    color: white;

    border: 2px solid var(--black);

    box-shadow: 6px 6px 0 var(--black);

    font-family: "Space Grotesk", sans-serif;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}


.form-submit:hover {
    transform: translate(3px, 3px);

    box-shadow: 3px 3px 0 var(--black);
}


.form-note {
    margin-top: 25px;

    color: var(--gray);

    font-size: 12px;

    line-height: 1.5;
}



/* =========================================
   FAQ PAGE — COMPACT, QUESTION-FIRST LAYOUT
   ========================================= */


.faq-page {
    min-height: 100vh;

    /* Keep the page close to the navigation and get to the FAQ fast. */
    padding: 18px 7% 100px;

    background: var(--light-gray);
}


.faq-hero {
    max-width: 1200px;

    margin: 0 auto 16px;

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);

    grid-template-areas:
        "label intro"
        "title intro";

    column-gap: clamp(34px, 6vw, 90px);

    row-gap: 7px;

    align-items: end;
}


.faq-hero .label {
    grid-area: label;

    margin: 0;

    align-self: end;
}


.faq-hero h1 {
    grid-area: title;

    max-width: none;

    margin: 0;

    font-size: clamp(2.9rem, 4.3vw, 5rem);

    line-height: 0.92;

    letter-spacing: -4px;

    white-space: nowrap;
}


.faq-hero h1 span {
    display: inline;

    color: var(--red);

    font-family: Georgia, serif;

    font-style: italic;
}


.faq-intro {
    grid-area: intro;

    max-width: 470px;

    margin: 0 0 5px;

    font-size: 15px;

    line-height: 1.5;

    color: var(--gray);

    align-self: end;
}


.faq-layout {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 300px 1fr;

    gap: 42px;

    align-items: start;
}



/* FAQ SIDE CARD */


.faq-side-card {
    padding: 28px;

    position: sticky;

    top: 24px;

    background: var(--yellow);

    border: 3px solid var(--black);

    box-shadow: 9px 9px 0 var(--black);
}


.faq-side-number {
    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 2px;

    color: var(--red);
}


.faq-side-card h2 {
    margin-top: 26px;

    font-size: 34px;

    line-height: 0.95;

    letter-spacing: -3px;
}


.faq-side-card p {
    margin-top: 18px;

    color: #343b46;

    font-size: 15px;

    line-height: 1.55;
}


.faq-side-button {
    display: inline-block;

    margin-top: 24px;

    padding: 13px 17px;

    background: var(--black);

    color: white;

    border: 2px solid var(--black);

    box-shadow: 5px 5px 0 var(--red);

    font-weight: 600;

    transition: 0.2s ease;
}


.faq-side-button:hover {
    transform: translate(2px, 2px);

    box-shadow: 3px 3px 0 var(--red);
}



/* FAQ QUESTIONS */


.faq-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.faq-item {
    background: var(--white);

    border: 2px solid var(--black);

    box-shadow: 6px 6px 0 var(--blue);
}


.faq-item summary {
    padding: 20px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    cursor: pointer;

    list-style: none;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.2;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary::after {
    content: "+";

    flex-shrink: 0;

    color: var(--red);

    font-family: "DM Mono", monospace;

    font-size: 28px;

    font-weight: 500;
}


.faq-item[open] summary::after {
    content: "−";
}


.faq-answer {
    padding: 0 22px 24px;

    max-width: 780px;

    color: var(--gray);

    font-size: 16px;

    line-height: 1.7;
}


.faq-answer strong {
    color: var(--black);
}



/* FAQ BOTTOM CTA */


.faq-cta {
    max-width: 1200px;

    margin: 85px auto 0;

    padding: 60px;

    background: var(--blue);

    color: white;

    border: 3px solid var(--black);

    box-shadow: 12px 12px 0 var(--red);
}


.faq-cta .label {
    color: var(--yellow);
}


.faq-cta h2 {
    max-width: 800px;

    font-size: clamp(3rem, 6vw, 6rem);

    line-height: 0.9;

    letter-spacing: -5px;
}


.faq-cta h2 span {
    color: var(--yellow);

    font-family: Georgia, serif;

    font-style: italic;
}


.faq-cta p {
    max-width: 600px;

    margin-top: 25px;

    font-size: 17px;

    line-height: 1.6;
}


.faq-contact-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    margin-top: 35px;

    padding: 16px 22px;

    background: var(--black);

    color: #ffffff;

    border: 2px solid var(--black);

    box-shadow: 6px 6px 0 var(--yellow);

    font-weight: 700;

    transition: 0.2s ease;
}


.faq-contact-button:hover {
    transform: translate(3px, 3px);

    box-shadow: 3px 3px 0 var(--yellow);
}




/* =========================================
   PORTFOLIO PAGE — COMPACT, WORK-FIRST LAYOUT
   ========================================= */



.portfolio-page {
    background: #f2f4f7;
}

body:has(.portfolio-page) {
    background: #f2f4f7;
}

.portfolio-page {
    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;

    padding: 18px 0 100px;

    color: #07111f;
}


.portfolio-hero {
    margin: 0 0 16px;

    display: grid;

    /* Give the headline a defined column and keep the intro safely separate. */
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);

    grid-template-areas:
        "label intro"
        "title intro";

    column-gap: clamp(48px, 7vw, 100px);

    row-gap: 7px;

    align-items: end;
}


.portfolio-hero .label {
    grid-area: label;

    margin: 0;

    color: #276aff;
}


.portfolio-hero h1 {
    grid-area: title;

    min-width: 0;

    max-width: 760px;

    margin: 0;

    color: #07111f;

    font-size: clamp(2.7rem, 3.65vw, 4.25rem);

    line-height: 0.88;

    letter-spacing: -4px;

    white-space: normal;
}


.portfolio-hero h1 span {
    display: block;

    color: #276aff;
}


.portfolio-intro {
    grid-area: intro;

    max-width: 470px;

    margin: 0 0 4px;

    color: #394657;

    font-size: 15px;

    line-height: 1.5;

    align-self: end;
}


.portfolio-projects {
    display: grid;

    gap: 34px;
}


.portfolio-project {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(7, 17, 31, 0.14);

    box-shadow: 8px 8px 0 rgba(7, 17, 31, 0.08);
}


.portfolio-project-image {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    background: #e7ebf0;

    border-right: 1px solid rgba(7, 17, 31, 0.12);
}


.portfolio-project-image img {
    width: 100%;

    height: 100%;

    min-height: 470px;

    display: block;

    object-fit: contain;

    object-position: top center;

    background: #e7ebf0;

    transition: transform 0.35s ease;
}


.portfolio-project:hover .portfolio-project-image img {
    transform: scale(1.02);
}


.portfolio-image-placeholder {
    width: 100%;

    height: 100%;

    min-height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    text-align: center;

    border-right: 1px solid rgba(7, 17, 31, 0.12);
}


.portfolio-image-placeholder span {
    font-family: "DM Mono", monospace;

    font-size: 0.8rem;

    line-height: 1.7;

    opacity: 0.6;
}


.portfolio-project-content {
    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding: 42px;

    background: #ffffff;
}


.portfolio-project-number {
    margin-bottom: 20px;

    color: #394657;

    font-family: "DM Mono", monospace;

    font-size: 0.8rem;

    opacity: 1;
}


.portfolio-project-number span {
    color: #276aff;

    font-weight: 500;
}


.portfolio-project-content h2 {
    margin: 0 0 18px;

    color: #07111f;

    font-size: clamp(1.8rem, 3vw, 2.8rem);

    line-height: 1.05;
}


.portfolio-project-content p {
    margin: 0 0 22px;

    color: #394657;

    line-height: 1.7;
}


.portfolio-services {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 5px;
}


.portfolio-service {
    padding: 8px 12px;

    border: 1px solid rgba(7, 17, 31, 0.18);

    font-family: "DM Mono", monospace;

    font-size: 0.72rem;
}


.portfolio-cta {
    margin-top: 85px;

    padding: 60px 0;

    border-top: 1px solid rgba(7, 17, 31, 0.14);
}


.portfolio-cta .label {
    color: #276aff;
}


.portfolio-cta h2 {
    margin: 18px 0;

    color: #07111f;

    font-size: clamp(2.25rem, 5vw, 4rem);

    line-height: 1;

    letter-spacing: -0.04em;
}


.portfolio-cta h2 span {
    display: block;

    color: #276aff;
}


.portfolio-cta > p:not(.label) {
    max-width: 650px;

    margin-bottom: 30px;

    color: #394657;

    line-height: 1.8;
}


.portfolio-contact-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    padding: 14px 20px;

    background: #276aff;

    color: #ffffff;

    border: 1px solid #276aff;

    box-shadow: 5px 5px 0 #07111f;

    font-family: inherit;

    font-weight: 700;

    text-decoration: none;

    transition: 0.25s ease;
}


.portfolio-contact-button:hover {
    background: #276aff;

    color: #ffffff;

    border-color: #276aff;

    box-shadow: 3px 3px 0 #07111f;

    transform: translate(2px, 2px);
}


@media (max-width: 1100px) and (min-width: 901px) {

    .portfolio-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);

        column-gap: 40px;
    }


    .portfolio-hero h1 {
        font-size: clamp(2.55rem, 3.7vw, 3.65rem);

        letter-spacing: -3px;
    }

}


@media (max-width: 900px) {

    .portfolio-page {
        padding-top: 16px;
    }


    .portfolio-hero {
        grid-template-columns: 1fr;

        grid-template-areas:
            "label"
            "title"
            "intro";

        row-gap: 8px;

        margin-bottom: 18px;
    }


    .portfolio-hero h1 {
        white-space: normal;
    }


    .portfolio-intro {
        max-width: 700px;

        margin: 2px 0 0;
    }


    .portfolio-project {
        grid-template-columns: 1fr;
    }


    .portfolio-project-image,
    .portfolio-project-image img,
    .portfolio-image-placeholder {
        min-height: 380px;
    }


    .portfolio-project-image,
    .portfolio-image-placeholder {
        border-right: 0;

        border-bottom: 1px solid rgba(7, 17, 31, 0.12);
    }

}


@media (max-width: 768px) {

    .portfolio-page {
        width: min(100% - 28px, 1200px);

        padding-top: 14px;
    }


    .portfolio-hero {
        margin-bottom: 16px;
    }


    .portfolio-hero h1 {
        font-size: clamp(2.45rem, 11vw, 3.35rem);

        line-height: 0.92;

        letter-spacing: -3px;
    }


    .portfolio-intro {
        font-size: 14px;

        line-height: 1.45;
    }


    .portfolio-project-content {
        padding: 28px 24px;
    }


    .portfolio-project-image,
    .portfolio-project-image img,
    .portfolio-image-placeholder {
        min-height: 280px;
    }


    .portfolio-cta {
        margin-top: 65px;

        padding: 50px 0;
    }


    .portfolio-cta h2 {
        font-size: clamp(2rem, 10vw, 3.25rem);
    }

}


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


footer {
    padding: 30px 7%;

    background: var(--black);

    color: white;

    display: flex;

    justify-content: space-between;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    letter-spacing: 1px;
}



/* =========================================
   TABLET
   ========================================= */


@media (max-width: 1100px) {

    .nav nav {
        gap: 14px;

        font-size: 11px;
    }

}


@media (max-width: 900px) {


    .nav {
        padding: 0 5%;
    }


    .nav nav {
        gap: 12px;
    }


    .nav nav a:not(.nav-button) {
        display: none;
    }


    .logo-image {
        width: 36px;
        height: 36px;
    }


    


    


    


    .different-header {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .different-intro {
        max-width: 600px;
    }


    .care-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: 0;
    }


    .care-card {
        min-height: 420px;
    }


    .care-card-primary,
    .care-card-secondary,
    .care-card-tertiary,
    .care-card-quaternary {
        min-height: 420px;
    }


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


    .work-header {
        flex-direction: column;

        align-items: start;
    }


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

        gap: 55px;
    }


    .contact-page-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "intro";
        row-gap: 8px;
        margin-bottom: 18px;
    }


    .contact-page-header h1 {
        white-space: normal;
    }


    .contact-page-header > p:not(.label) {
        max-width: 700px;
        margin: 2px 0 0;
    }


    .contact-page-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }


    .faq-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "intro";
        row-gap: 8px;
        margin-bottom: 18px;
    }


    .faq-hero h1 {
        white-space: normal;
    }


    .faq-intro {
        max-width: 700px;
        margin: 2px 0 0;
    }


    .faq-layout {
        grid-template-columns: 1fr;
    }


    .faq-side-card {
        position: static;
    }


    footer {
        flex-direction: column;

        gap: 15px;

        text-align: center;
    }

}



/* =========================================
   MOBILE
   ========================================= */


@media (max-width: 600px) {

    /* CONTACT PAGE */


    .contact-page {
        padding: 16px 7% 75px;
    }


    .contact-page-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "intro";

        row-gap: 7px;

        margin-bottom: 16px;
    }


    .contact-page-header .label {
        margin: 0;
    }


    .contact-page-header h1 {
        font-size: clamp(2.55rem, 12vw, 3.45rem);

        line-height: 0.9;

        letter-spacing: -3px;

        white-space: normal;
    }


    .contact-page-header h1 span {
        display: inline;
    }


    .contact-page-header > p:not(.label) {
        max-width: 100%;

        margin: 1px 0 0;

        font-size: 14px;

        line-height: 1.4;
    }


    .contact-page-grid {
        gap: 24px;
    }


    .contact-info-card {
        padding: 24px;

        box-shadow: 7px 7px 0 var(--black);
    }


    .contact-info-card h2 {
        margin-top: 22px;

        font-size: 31px;
    }


    .contact-info-card p {
        margin-top: 15px;
    }


    .contact-info-card strong {
        margin-top: 22px;
    }


    .contact-form {
        padding: 26px 22px;

        box-shadow: 7px 7px 0 var(--blue);
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }




    .nav {
        min-height: 70px;
    }


    .logo-box {
        width: 32px;
        height: 32px;

        font-size: 11px;
    }


    .logo-image {
        display: none;
    }


    .logo-text {
        font-size: 10px;
    }


    .nav-button {
        padding: 9px 12px;

        font-size: 11px;
    }


    


    


    


    


    


    


    


    .different {
        padding: 65px 7% 100px;
    }


    .different-header h2 {
        font-size: 2.8rem;

        letter-spacing: -3px;
    }


    .care-grid {
        margin-top: 65px;

        gap: 18px;

        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: 0;
    }


    .care-card {
        min-height: 430px;
        height: auto;

        padding: 27px;

        box-shadow: 7px 7px 0 var(--black);
    }


    .care-card-primary,
    .care-card-secondary,
    .care-card-tertiary,
    .care-card-quaternary {
        min-height: 430px;
        height: auto;
    }


    .care-card:hover {
        transform: none;

        box-shadow: 7px 7px 0 var(--black);
    }


    .care-icon {
        margin-top: 35px;

        font-size: 50px;
    }


    .care-card h3 {
        font-size: 2.6rem;

        letter-spacing: -2px;
    }


    .behavior-section {
        padding: 100px 7%;
    }


    .behavior-intro h2 {
        font-size: 3rem;
        letter-spacing: -3px;
    }


    .behavior-item {
        min-height: 230px;
    }


    .behavior-item h3 {
        margin-top: 35px;
    }


    .work {
        padding: 100px 7%;
    }


    .work-header h2 {
        font-size: 3rem;
        letter-spacing: -3px;
    }


    .work-title h3 {
        font-size: 30px;
    }


    .work-row {
        grid-template-columns: 40px 1fr 25px;

        padding: 28px 0;
    }


    .work-title span {
        font-size: 8px;
    }


    .work-row:hover {
        padding-left: 5px;
    }


    .about {
        padding: 60px 7% 65px;
    }


    .big-word {
        font-size: 4.25rem;

        letter-spacing: -4px;
    }


    .about-right h2 {
        letter-spacing: -4px;
    }


    .about-right .bold-copy {
        font-size: 23px;
    }


    .contact {
        padding: 110px 7%;
    }


    .contact h2 {
        font-size: 3.45rem;
        line-height: 0.94;
        letter-spacing: -3px;
    }


    .contact-decoration {
        font-size: 130px;
    }


    .contact {
        padding: 80px 7% 90px;
    }

    .contact-graphic img {
        width: 760px;
        right: -180px;
        opacity: 0.055;
    }


    /* CONTACT PAGE */


    .contact-page {
        padding: 65px 7% 90px;
    }


    .contact-page-header {
        margin-bottom: 45px;
    }


    .contact-page-header h1 {
        font-size: 4rem;

        letter-spacing: -4px;
    }


    .contact-form {
        padding: 25px;

        box-shadow: 7px 7px 0 var(--blue);
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-info-card {
        padding: 28px;

        box-shadow: 7px 7px 0 var(--black);
    }


    .contact-info-card h2 {
        font-size: 34px;
    }


    /* FAQ PAGE */


    .faq-page {
        padding: 16px 7% 75px;
    }


    .faq-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "intro";

        row-gap: 7px;

        margin-bottom: 16px;
    }


    .faq-hero .label {
        margin: 0;
    }


    .faq-hero h1 {
        font-size: clamp(2.55rem, 12vw, 3.45rem);

        line-height: 0.9;

        letter-spacing: -3px;

        white-space: normal;
    }


    .faq-hero h1 span {
        display: inline;
    }


    .faq-intro {
        max-width: 100%;

        margin: 1px 0 0;

        font-size: 14px;

        line-height: 1.4;
    }


    .faq-layout {
        gap: 24px;
    }


    .faq-item {
        box-shadow: 4px 4px 0 var(--blue);
    }


    .faq-item summary {
        padding: 18px;

        font-size: 17px;
    }


    .faq-answer {
        padding: 0 18px 20px;

        font-size: 15px;
    }


    .faq-side-card {
        padding: 24px;

        box-shadow: 7px 7px 0 var(--black);
    }


    .faq-side-card h2 {
        margin-top: 22px;

        font-size: 31px;
    }


    .faq-side-card p {
        margin-top: 15px;
    }


    .faq-side-button {
        margin-top: 20px;
    }


    .faq-cta {
        margin-top: 65px;

        padding: 35px 25px;

        box-shadow: 7px 7px 0 var(--red);
    }


    .faq-cta h2 {
        font-size: 3rem;

        letter-spacing: -3px;
    }



}

/* =========================================
   DARK CTA RESPONSIVE OVERRIDES
   ========================================= */

@media (max-width: 1100px) {
    .contact-split {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
        gap: 46px;
    }

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

@media (max-width: 900px) {
    .contact {
        padding-top: 92px;
        padding-bottom: 96px;
    }

    .contact-split {
        grid-template-columns: 1fr;
        gap: 66px;
    }

    .contact-copy {
        max-width: 760px;
    }

    .contact-visual {
        width: min(100%, 680px);
        min-height: 0;
        margin: 0 auto;
    }

    .contact-image-shell {
        width: min(100%, 580px);
        transform: none;
    }
}

@media (max-width: 600px) {
    .contact {
        padding: 76px 7% 78px;
    }

    .contact .label {
        margin-bottom: 24px;
        font-size: 9px;
    }

    .contact h2 {
        font-size: clamp(3rem, 14vw, 4.25rem);
        line-height: 0.96;
        letter-spacing: -0.055em;
    }

    .contact h2 span {
        margin-top: 8px;
    }

    .contact-intro {
        margin-top: 27px;
        font-size: 16px;
        line-height: 1.65;
    }

    .contact-button {
        width: 100%;
        justify-content: center;
        margin-top: 30px;
        min-height: 60px;
        padding: 0 22px;
        border-radius: 999px;
    }

    .contact-split {
        gap: 48px;
    }

    .contact-image-shell {
        border-radius: 22px;
    }

    .contact-orbit-one {
        width: 94%;
    }

    .contact-orbit-dot-one {
        right: 2%;
    }
}


/* =========================================
   TESTIMONIALS
   ========================================= */

.testimonials {
    position: relative;
    padding: clamp(38px, 4.5vw, 65px) 7% clamp(85px, 9vw, 125px);
    background: #f2f4f7;
    color: var(--black);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 2px solid var(--black);
}

.testimonials::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    top: -280px;
    right: -150px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(23, 87, 255, .16) 0%,
        rgba(23, 87, 255, .06) 45%,
        transparent 72%
    );
    filter: blur(12px);
    z-index: -1;
    pointer-events: none;
}

.testimonials::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    bottom: -280px;
    left: -160px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(239, 51, 64, .13) 0%,
        rgba(239, 51, 64, .04) 45%,
        transparent 72%
    );
    filter: blur(18px);
    z-index: -1;
    pointer-events: none;
}

.testimonials-header {
    max-width: 1200px;
    margin: 0 auto 65px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}

.testimonials-header h2 {
    max-width: 900px;
    margin: 10px 0 0;
    font-size: clamp(3rem, 5.5vw, 5.75rem);
    line-height: 0.8;
    letter-spacing: -7px;
}

.testimonials-header h2 span {
    display: block;
    color: var(--blue);
    font-family: Georgia, serif;
    font-style: italic;
}

.testimonials-intro {
    max-width: 370px;
    margin: 0 0 4px;
    color: var(--gray);
    font-size: 16px;
    line-height: 1.65;
}

.testimonial-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.testimonial-card {
    position: relative;
    min-height: 390px;
    padding: 38px 40px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--white);
    color: var(--black);
    border: 3px solid var(--black);
    overflow: hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.testimonial-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 9px;
}

.testimonial-card-blue {
    box-shadow: 12px 12px 0 var(--blue);
}

.testimonial-card-blue::before {
    background: var(--blue);
}

.testimonial-card-red {
    box-shadow: 12px 12px 0 var(--red);
}

.testimonial-card-red::before {
    background: var(--red);
}

.testimonial-card:hover {
    transform: translate(-4px, -4px);
}

.testimonial-card-blue:hover {
    box-shadow: 16px 16px 0 var(--blue);
}

.testimonial-card-red:hover {
    box-shadow: 16px 16px 0 var(--red);
}

.testimonial-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.testimonial-number {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--gray);
}

.testimonial-mark {
    margin-top: -12px;
    font-family: Georgia, serif;
    font-size: 82px;
    line-height: .8;
    color: var(--blue);
}

.testimonial-card-red .testimonial-mark {
    color: var(--red);
}

.testimonial-card blockquote {
    max-width: 850px;
    margin: 28px 0 42px;
    color: var(--black);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -.5px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 22px;
    border-top: 2px solid var(--black);
}

.testimonial-author strong {
    color: var(--black);
    font-size: 18px;
    font-weight: 700;
}

.testimonial-author span {
    color: var(--gray);
    font-family: "DM Mono", monospace;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 900px) {

    .testimonials-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    .testimonials-intro {
        max-width: 600px;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .testimonial-card {
        min-height: 350px;
    }

}

@media (max-width: 600px) {

    .testimonials {
        padding-left: 20px;
        padding-right: 20px;
    }

    .testimonials-header h2 {
        font-size: 3rem;
        letter-spacing: -3px;
    }

    .testimonial-card {
        min-height: 340px;
        padding: 32px 28px 28px;
    }

    .testimonial-mark {
        font-size: 68px;
    }

    .testimonial-card blockquote {
        font-size: 1.2rem;
        margin: 24px 0 34px;
    }

}

/* =========================================
   TESTIMONIAL REDESIGN — COLOR + DEPTH
   ========================================= */
.testimonials {
    background: #eef2f7;
}

.testimonial-grid {
    max-width: 1200px;
    gap: 34px;
}

.testimonial-card {
    min-height: 420px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.testimonial-card-inner {
    position: relative;
    height: 100%;
    min-height: 420px;
    padding: 34px 38px 32px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 3px solid var(--black);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.testimonial-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.testimonial-card-blue .testimonial-card-inner {
    background: linear-gradient(145deg, #ffffff 0%, #f2f6ff 100%);
    box-shadow: 12px 12px 0 var(--blue);
}

.testimonial-card-blue .testimonial-card-inner::before {
    background: radial-gradient(circle at 100% 0%, rgba(39,106,255,.18), transparent 38%);
}

.testimonial-card-red .testimonial-card-inner {
    background: linear-gradient(145deg, #ffffff 0%, #fff2f2 100%);
    box-shadow: 12px 12px 0 var(--red);
}

.testimonial-card-red .testimonial-card-inner::before {
    background: radial-gradient(circle at 100% 0%, rgba(218,55,55,.16), transparent 38%);
}

.testimonial-card:hover .testimonial-card-inner {
    transform: translate(-5px, -5px);
}

.testimonial-card-blue:hover .testimonial-card-inner {
    box-shadow: 18px 18px 0 var(--blue);
}

.testimonial-card-red:hover .testimonial-card-inner {
    box-shadow: 18px 18px 0 var(--red);
}

.testimonial-card-top,
.testimonial-mark,
.testimonial-card blockquote,
.testimonial-author {
    position: relative;
    z-index: 1;
}

.testimonial-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.testimonial-number {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--black);
}

.testimonial-tag {
    padding: 7px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: "DM Mono", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.testimonial-card-blue .testimonial-tag {
    color: var(--blue);
}

.testimonial-card-red .testimonial-tag {
    color: var(--red);
}

.testimonial-mark {
    align-self: flex-start;
    margin-top: 28px;
    margin-left: -5px;
    font-family: Georgia, serif;
    font-size: 92px;
    line-height: .65;
}

.testimonial-card-blue .testimonial-mark {
    color: var(--blue);
}

.testimonial-card-red .testimonial-mark {
    color: var(--red);
}

.testimonial-card blockquote {
    margin: 22px 0 34px;
    max-width: 700px;
    color: var(--black);
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -.4px;
}

.testimonial-author {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-top: 2px solid rgba(7,17,31,.14);
}

.testimonial-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 2px solid var(--black);
    border-radius: 50%;
    font-family: "DM Mono", monospace;
    font-size: 15px;
    font-weight: 700;
}

.testimonial-card-blue .testimonial-avatar {
    background: var(--blue);
    color: #fff;
}

.testimonial-card-red .testimonial-avatar {
    background: var(--red);
    color: #fff;
}

.testimonial-author strong {
    display: block;
    color: var(--black);
    font-size: 17px;
    line-height: 1.2;
}

.testimonial-author span {
    display: block;
    margin-top: 4px;
    color: var(--gray);
    font-family: "DM Mono", monospace;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card,
    .testimonial-card-inner {
        min-height: 390px;
    }
}

@media (max-width: 600px) {
    .testimonial-card-inner {
        padding: 28px 25px 26px;
        border-radius: 18px;
    }

    .testimonial-mark {
        font-size: 74px;
    }

    .testimonial-card blockquote {
        font-size: 1.18rem;
    }

    .testimonial-tag {
        display: none;
    }
}

/* =========================================
   FINAL CTA IMAGE POSITION FIX
   Keep the keyboard visual centered in
   the right-hand visual area.
   ========================================= */
.contact-image-shell {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 900px) {
    .contact-image-shell {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}


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

footer {
    padding: 34px 7%;
    background: var(--black);
    color: white;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: start;
    gap: 40px;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 1px;
}

.footer-brand,
.footer-contact,
.footer-hours {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.footer-brand strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.footer-brand span {
    opacity: 0.55;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.footer-label {
    color: #5c8cff;
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}

.footer-contact a {
    color: white;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-contact a:hover {
    opacity: 0.65;
}

.footer-hours span:not(.footer-label) {
    opacity: 0.8;
}

@media (max-width: 900px) {
    footer {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .footer-brand,
    .footer-contact,
    .footer-hours {
        align-items: center;
    }
}

/* =========================================
   CONTACT FORM — COMPUTER MONITOR REDESIGN
   Decorative shell only. Formspree fields,
   names, action, method and JavaScript stay
   exactly the same.
   ========================================= */

.computer-monitor {
    position: relative;
    width: 100%;
    padding-bottom: 76px;
    isolation: isolate;
}

.computer-monitor-frame {
    position: relative;
    width: 100%;
    padding: 15px 15px 20px;
    background: linear-gradient(145deg, #182235 0%, #0c1422 55%, #070d18 100%);
    border: 2px solid #050914;
    border-radius: 24px;
    box-shadow:
        0 24px 55px rgba(16, 24, 40, 0.24),
        10px 10px 0 rgba(23, 87, 255, 0.92),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

/* Tiny centered webcam in the top bezel. */
.computer-monitor-frame::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #34435d;
    border: 1px solid #050914;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.025);
}

/* Small power light in the lower bezel. */
.computer-monitor-frame::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4e7dff;
    box-shadow: 0 0 9px rgba(78, 125, 255, 0.8);
}

.computer-screen {
    position: relative;
    overflow: hidden;
    background: #fbfcff;
    border: 1px solid #303b50;
    border-radius: 13px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        inset 0 0 28px rgba(23, 87, 255, 0.035);
}

/* The original form becomes the content of the monitor screen. */
.computer-screen .contact-form {
    width: 100%;
    margin: 0;
    padding: 40px;
    background: #fbfcff;
    border: 0;
    box-shadow: none;
}

/* Keep the success state inside the same computer screen. */
.computer-screen .form-success {
    min-height: 420px;
    margin: 0;
    padding: 48px 40px;
    background: #fbfcff;
    border: 0;
}

/* Monitor neck. */
.computer-monitor::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 25px;
    width: 86px;
    height: 58px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #0a111e 0%, #27344a 50%, #0a111e 100%);
    border-left: 2px solid #050914;
    border-right: 2px solid #050914;
    clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

/* Monitor base. */
.computer-monitor::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 220px;
    height: 18px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #27344a 0%, #0b1320 100%);
    border: 2px solid #050914;
    border-radius: 50% 50% 10px 10px / 70% 70% 10px 10px;
    box-shadow: 0 8px 16px rgba(16, 24, 40, 0.22);
}

@media (max-width: 900px) {
    .computer-monitor {
        width: min(100%, 820px);
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .computer-monitor {
        padding-bottom: 58px;
    }

    .computer-monitor-frame {
        padding: 11px 11px 16px;
        border-radius: 18px;
        box-shadow:
            0 18px 36px rgba(16, 24, 40, 0.20),
            6px 6px 0 rgba(23, 87, 255, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .computer-monitor-frame::before {
        top: 4px;
        width: 5px;
        height: 5px;
    }

    .computer-monitor-frame::after {
        right: 15px;
        bottom: 5px;
    }

    .computer-screen {
        border-radius: 10px;
    }

    .computer-screen .contact-form {
        padding: 25px;
    }

    .computer-screen .form-success {
        min-height: 340px;
        padding: 35px 25px;
    }

    .computer-monitor::before {
        bottom: 19px;
        width: 66px;
        height: 43px;
    }

    .computer-monitor::after {
        bottom: 7px;
        width: 165px;
        height: 14px;
    }
}



/* =========================================
   CONTACT FORM — COMPACT COMPUTER VERSION
   Shorter desktop layout while preserving
   all form fields and Formspree behavior.
   ========================================= */

@media (min-width: 901px) {
    .contact-page {
        padding-top: 14px;
        padding-bottom: 72px;
    }

    .contact-page-header {
        margin-bottom: 12px;
    }

    .contact-quick-info {
        margin-top: 24px;
        margin-bottom: 30px;
    }

    .contact-quick-item {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .contact-page-grid {
        gap: 34px;
    }

    .computer-monitor {
        padding-bottom: 64px;
    }

    .computer-monitor-frame {
        padding: 13px 13px 18px;
        border-radius: 21px;
    }

    .computer-screen .contact-form {
        padding: 28px 30px 26px;
    }

    .computer-screen .form-success {
        min-height: 330px;
        padding: 36px 30px;
    }

    .computer-screen .form-row {
        gap: 16px;
    }

    .computer-screen .form-group {
        margin-bottom: 14px;
    }

    .computer-screen .form-group label {
        margin-bottom: 6px;
        font-size: 9px;
    }

    .computer-screen .form-group input,
    .computer-screen .form-group select,
    .computer-screen .form-group textarea {
        padding: 11px 12px;
        font-size: 14px;
    }

    .computer-screen .form-group textarea {
        min-height: 102px;
    }

    .computer-screen .form-submit {
        padding: 13px 20px;
        font-size: 15px;
    }

    .computer-screen .form-note-combined {
        max-width: 670px;
        margin-top: 15px;
        font-size: 11px;
        line-height: 1.55;
    }

    .computer-monitor::before {
        bottom: 21px;
        height: 49px;
    }

    .computer-monitor::after {
        bottom: 8px;
        height: 16px;
    }
}

@media (max-width: 900px) {
    .form-row-compact {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-note-combined {
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.6;
    }
}

/* =========================================
   HERO WIREFRAME — RAISED POSITION
   Moves the computer graphic upward ~105px
   without changing the graphic or page content.
   ========================================= */
@media (min-width: 1001px) {
    
}

/* =========================================
   ABOUT — TECH MEETS BEHAVIOR TERMINAL
   Keeps the original wording; redesigns only
   section 05 as a computer/workstation scene.
   ========================================= */
.about.about-terminal {
    min-height: 760px;
    padding: 72px 7% 86px;
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(560px, 1.28fr);
    gap: clamp(42px, 6vw, 92px);
    align-items: center;
    background:
        radial-gradient(circle at 76% 46%, rgba(23, 87, 255, .12), transparent 34%),
        linear-gradient(135deg, #ffd84d 0%, #ffe784 100%);
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    overflow: hidden;
}

.about-terminal-heading { align-self: center; }

.about-terminal-heading h2 {
    margin: 22px 0 0;
    max-width: 520px;
    font-size: clamp(3.7rem, 6.4vw, 7rem);
    line-height: .84;
    letter-spacing: -6px;
}

.about-terminal-heading h2 span {
    display: block;
    color: var(--red);
    font-family: Georgia, serif;
    font-style: italic;
}

.about-workstation {
    position: relative;
    width: 100%;
    max-width: 790px;
    margin: 0 auto;
    padding-bottom: 112px;
}

.about-monitor {
    position: relative;
    z-index: 3;
    padding: 14px 14px 19px;
    background: linear-gradient(145deg, #172238, #09111f 62%, #050a12);
    border: 2px solid #050914;
    border-radius: 22px;
    box-shadow: 14px 14px 0 rgba(23, 87, 255, .95), 0 28px 55px rgba(16, 24, 40, .25);
}

.about-monitor-topbar {
    height: 34px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #101b2e;
    border: 1px solid #2b3a54;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.about-monitor-topbar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5f718f;
}

.about-monitor-topbar span:nth-child(1) { background: var(--red); }
.about-monitor-topbar span:nth-child(2) { background: var(--yellow); }
.about-monitor-topbar span:nth-child(3) { background: #54d58b; }

.about-monitor-topbar small {
    margin-left: 8px;
    color: #8ea3c5;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: 1px;
}

.about-monitor-screen {
    min-height: 455px;
    padding: clamp(25px, 3.2vw, 38px);
    background:
        linear-gradient(rgba(23, 87, 255, .035) 1px, transparent 1px),
        #07111f;
    background-size: 100% 28px;
    border: 1px solid #2b3a54;
    border-radius: 0 0 10px 10px;
    color: #dce7f7;
    box-shadow: inset 0 0 35px rgba(23, 87, 255, .08);
}

.about-monitor-screen p {
    max-width: 650px;
    margin: 0 0 14px;
    color: #d5dfed;
    font-family: "DM Mono", monospace;
    font-size: clamp(11px, 1.05vw, 14px);
    line-height: 1.55;
}

.about-monitor-screen .bold-copy {
    color: #ffffff;
    font-size: clamp(12px, 1.15vw, 15px);
    font-weight: 700;
}

.about-terminal-command {
    margin-bottom: 22px;
    color: #72a0ff;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: .5px;
}

.about-terminal-last { margin-bottom: 0 !important; }

.typing-cursor {
    display: inline-block;
    width: 8px;
    height: 1.15em;
    margin-left: 5px;
    vertical-align: -.18em;
    background: #72a0ff;
    animation: aboutCursorBlink .85s steps(1) infinite;
}

@keyframes aboutCursorBlink { 50% { opacity: 0; } }

.about-monitor-neck {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 48px;
    width: 90px;
    height: 72px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #09111f, #2a3850 50%, #09111f);
    clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}

.about-monitor-base {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 37px;
    width: 240px;
    height: 20px;
    transform: translateX(-50%);
    background: linear-gradient(#2a3850, #09111f);
    border: 2px solid #050914;
    border-radius: 50% 50% 9px 9px / 70% 70% 9px 9px;
}

.about-keyboard {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 0;
    width: min(74%, 510px);
    min-height: 74px;
    padding: 12px 15px;
    transform: translateX(-50%) perspective(400px) rotateX(48deg);
    transform-origin: bottom;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    background: #111b2b;
    border: 2px solid #050914;
    border-radius: 9px;
    box-shadow: 0 16px 24px rgba(16, 24, 40, .22);
}

.about-keyboard span {
    height: 13px;
    background: #26354c;
    border: 1px solid #40516c;
    border-radius: 3px;
}

@media (max-width: 1000px) {
    .about.about-terminal {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .about-terminal-heading h2 { max-width: 700px; }
    .about-workstation { max-width: 760px; }
}

@media (max-width: 600px) {
    .about.about-terminal { padding: 58px 7% 68px; }
    .about-terminal-heading h2 { font-size: clamp(3.4rem, 16vw, 5rem); letter-spacing: -4px; }
    .about-workstation { padding-bottom: 82px; }
    .about-monitor { padding: 9px 9px 14px; border-radius: 16px; box-shadow: 7px 7px 0 rgba(23, 87, 255, .95), 0 20px 36px rgba(16,24,40,.2); }
    .about-monitor-topbar { height: 28px; padding: 0 9px; }
    .about-monitor-topbar small { font-size: 7px; }
    .about-monitor-screen { min-height: 0; padding: 20px 17px 22px; background-size: 100% 25px; }
    .about-monitor-screen p { font-size: 10px; line-height: 1.5; margin-bottom: 12px; }
    .about-monitor-screen .bold-copy { font-size: 11px; }
    .about-terminal-command { margin-bottom: 17px; font-size: 10px; }
    .about-monitor-neck { bottom: 35px; width: 62px; height: 48px; }
    .about-monitor-base { bottom: 29px; width: 165px; height: 15px; }
    .about-keyboard { width: 76%; min-height: 55px; padding: 9px; gap: 4px; }
    .about-keyboard span { height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .typing-cursor { animation: none; }
}


/* =========================================
   FAQ CTA — NAVY + WHITE TECH BACKGROUND
   Keeps the abstract orbit / signal artwork,
   removes the purple palette, and uses a
   brighter blue CTA button for contrast.
   ========================================= */

.faq-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 16% 18%, rgba(62, 125, 255, 0.18), transparent 25%),
        radial-gradient(circle at 88% 78%, rgba(48, 101, 210, 0.14), transparent 28%),
        linear-gradient(135deg, #07182f 0%, #0a2142 52%, #0c2a50 100%);
    color: #ffffff;
}

.faq-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.035) 42.2% 42.45%, transparent 42.7% 100%),
        linear-gradient(25deg, transparent 0 68%, rgba(255,255,255,0.025) 68.2% 68.45%, transparent 68.7% 100%);
}

.faq-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 13% 74%, rgba(255,255,255,0.055), transparent 17%),
        radial-gradient(circle at 91% 18%, rgba(255,255,255,0.045), transparent 19%);
    filter: blur(3px);
}

.faq-cta-content {
    position: relative;
    z-index: 3;
}

.faq-tech-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.faq-tech-art svg {
    width: 100%;
    height: 100%;
    display: block;
}

.faq-tech-art .tech-orbits {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.faq-tech-art .tech-signals {
    fill: none;
    stroke: rgba(255, 255, 255, 0.48);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.faq-tech-art .tech-dots {
    fill: rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.42));
}

.faq-tech-art .tech-dot-field {
    fill: rgba(255, 255, 255, 0.42);
}

.faq-tech-art .tech-marks {
    fill: none;
    stroke: rgba(255, 255, 255, 0.34);
    stroke-width: 1.7;
    vector-effect: non-scaling-stroke;
}

/* Quiet navy reading zone behind the CTA copy. */
.faq-cta-content::before {
    content: "";
    position: absolute;
    inset: -28px -42px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 34% 50%,
        rgba(7, 24, 47, 0.96) 0%,
        rgba(7, 24, 47, 0.82) 42%,
        rgba(7, 24, 47, 0.26) 73%,
        transparent 88%
    );
}

/* Preserve the white + yellow typography in this card. */
.faq-cta .label {
    color: var(--yellow);
}

.faq-cta h2,
.faq-cta p {
    color: #ffffff;
}

.faq-cta h2 span {
    color: var(--yellow);
}

/* Brighter brand-blue button so it separates cleanly from navy. */
.faq-cta .faq-contact-button {
    background: #276aff;
    color: #ffffff;
    font-weight: 700;
    border-color: #276aff;
    box-shadow: 6px 6px 0 var(--yellow);
}

.faq-cta .faq-contact-button:hover {
    background: #3d79ff;
    border-color: #3d79ff;
    color: #ffffff;
    box-shadow: 3px 3px 0 var(--yellow);
}

@media (max-width: 768px) {
    .faq-tech-art {
        opacity: 0.72;
    }

    .faq-tech-art svg {
        width: 138%;
        margin-left: -19%;
    }

    .faq-tech-art .tech-signals {
        stroke: rgba(255, 255, 255, 0.36);
    }

    .faq-tech-art .tech-dot-field {
        opacity: 0.55;
    }

    .faq-cta-content::before {
        inset: -18px -20px;
    }
}


/* =========================================
   MOBILE NAVIGATION — HAMBURGER MENU
   Desktop navigation stays unchanged.
   ========================================= */

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

/* Use the same specificity as the site-wide .nav nav rule so the
   mobile menu cannot accidentally appear on desktop. */
.nav .mobile-menu {
    display: none;
}

.mobile-menu-toggle {
    width: 44px;
    height: 42px;
    padding: 9px 10px;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: 3px 3px 0 var(--black);
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    display: block;
    background: var(--black);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-toggle:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--black);
}

@media (max-width: 900px) {
    .nav {
        position: relative;
        min-height: 72px;
        padding: 0 5%;
    }

    .nav .desktop-nav {
        display: none;
    }

    .mobile-nav-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-chat-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 60;
        padding: 8px 5% 18px;
        display: grid;
        gap: 0;
        background: var(--white);
        border-bottom: 2px solid var(--black);
        box-shadow: 0 12px 24px rgba(16, 24, 40, 0.12);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .nav .mobile-menu[aria-hidden="false"] {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav .mobile-menu a {
        padding: 15px 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: "Space Grotesk", sans-serif;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid #d9dde5;
    }

    .nav .mobile-menu a::after {
        content: "↗";
        font-family: "DM Mono", monospace;
        font-size: 13px;
        color: var(--blue);
    }

    .nav .mobile-menu a[href^="#"]::after {
        content: "↓";
    }

    .nav .mobile-menu a:last-child {
        border-bottom: 0;
    }

    .nav .mobile-menu a:hover {
        color: var(--blue);
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 600px) {
    .nav {
        min-height: 70px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .mobile-nav-actions {
        gap: 9px;
    }

    .mobile-chat-button {
        padding: 9px 11px;
        font-size: 10px;
    }

    .mobile-menu-toggle {
        width: 41px;
        height: 39px;
        padding: 8px 9px;
    }

    .nav .mobile-menu {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 900px) {
    .nav nav.mobile-menu a:not(.nav-button) {
        display: flex;
    }
}


/* =========================================
   HOME PAGE — MOBILE POLISH PASS
   Mobile-only refinements. Desktop remains unchanged.
   Keeps all copy, colors, graphics, and content intact.
   ========================================= */

@media (max-width: 600px) {

    /* NAV — keep the brand mark visible while preserving
       Let's Chat + hamburger as the mobile actions. */
    .nav {
        min-height: 70px;
        padding-left: 16px;
        padding-right: 16px;
        gap: 10px;
    }

    .logo {
        min-width: 0;
        gap: 7px;
        transform: none;
    }

    .logo-image {
        display: block !important;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .logo-text {
        min-width: 0;
        font-size: 8.5px;
        line-height: 1.15;
        letter-spacing: 0.55px;
        white-space: nowrap;
    }

    .mobile-nav-actions {
        flex: 0 0 auto;
        gap: 8px;
    }

    .mobile-chat-button {
        padding: 9px 10px;
        font-size: 10px;
    }

    .mobile-menu-toggle {
        width: 40px;
        height: 38px;
        padding: 8px 9px;
    }

    /* HERO — same content and artwork, but less empty vertical space. */
    

    

    

    

    

    

    

    /* WHY TECH BEARD — remove tall forced card heights and tighten spacing. */
    .different {
        padding: 54px 7% 66px;
    }

    .different-header {
        gap: 24px;
    }

    .different-header h2 {
        font-size: clamp(2.55rem, 12vw, 3.15rem);
        line-height: 0.86;
        letter-spacing: -3px;
    }

    .different-intro {
        font-size: 15px;
        line-height: 1.55;
    }

    .care-grid {
        margin-top: 42px;
        gap: 16px;
    }

    .care-card,
    .care-card-primary,
    .care-card-secondary,
    .care-card-tertiary,
    .care-card-quaternary {
        min-height: 0 !important;
        height: auto;
    }

    .care-card {
        padding: 23px;
        box-shadow: 6px 6px 0 var(--black);
    }

    .care-card:hover {
        transform: none;
        box-shadow: 6px 6px 0 var(--black);
    }

    .care-icon {
        margin-top: 24px;
        font-size: 44px;
    }

    .care-card h3,
    .care-card-primary h3,
    .care-card-secondary h3,
    .care-card-tertiary h3,
    .care-card-quaternary h3 {
        margin-top: 20px;
        font-size: clamp(2rem, 10vw, 2.5rem);
        line-height: 0.98;
        letter-spacing: -2px;
    }

    .care-card p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.55;
    }

    .care-card strong {
        margin-top: 0;
        padding-top: 20px;
        font-size: 9px;
        line-height: 1.4;
    }

    /* WHY PEOPLE CLICK AWAY — compact cards without removing content. */
    .behavior-section {
        padding: 62px 7% 66px;
    }

    .behavior-intro h2 {
        font-size: clamp(2.65rem, 12.5vw, 3.2rem);
        line-height: 0.86;
        letter-spacing: -3px;
    }

    .behavior-grid {
        margin-top: 38px;
    }

    .behavior-item {
        min-height: 0;
        padding: 24px 22px;
    }

    .behavior-item h3 {
        margin-top: 25px;
        font-size: 30px;
    }

    .behavior-item p {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.55;
    }

    .behavior-item strong {
        margin-top: 18px;
    }

    /* SERVICES — retain every row, just reduce vertical bulk. */
    .work {
        padding: 62px 7% 66px;
    }

    .work-header {
        margin-bottom: 44px;
        gap: 20px;
    }

    .work-header h2 {
        font-size: clamp(2.65rem, 12.5vw, 3.2rem);
        line-height: 0.86;
        letter-spacing: -3px;
    }

    .work-header > p {
        font-size: 14px;
        line-height: 1.55;
    }

    .work-row {
        grid-template-columns: 32px 1fr 24px;
        gap: 8px;
        padding: 21px 0;
    }

    .work-title h3 {
        font-size: 28px;
        letter-spacing: -1.5px;
    }

    .work-title span {
        margin-top: 8px;
        font-size: 9px;
        line-height: 1.55;
    }

    .work-arrow {
        font-size: 26px;
    }

    /* ABOUT TERMINAL — keep the workstation graphic, but make it occupy
       less vertical space on a phone. */
    .about.about-terminal {
        padding: 52px 7% 58px;
        gap: 30px;
    }

    .about-terminal-heading h2 {
        font-size: clamp(3rem, 14vw, 4rem);
        line-height: 0.86;
        letter-spacing: -3.5px;
    }

    .about-workstation {
        width: 100%;
        padding-bottom: 66px;
        transform: scale(0.92);
        transform-origin: top center;
        margin-bottom: -28px;
    }

    .about-monitor-screen {
        padding: 18px 15px 20px;
    }

    .about-monitor-screen p {
        margin-bottom: 10px;
        line-height: 1.45;
    }

    .about-terminal-command {
        margin-bottom: 14px;
    }

    /* FINAL DARK CTA — same design, less mobile padding and gap. */
    .contact {
        padding: 58px 7% 62px;
    }

    .contact .label {
        margin-bottom: 20px;
    }

    .contact h2 {
        font-size: clamp(2.85rem, 13vw, 3.8rem);
        line-height: 0.96;
    }

    .contact-intro {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.55;
    }

    .contact-button {
        margin-top: 26px;
    }

    .contact-split {
        gap: 36px;
    }
}

/* =========================================
   MOBILE COMPACTION PASS — SECTIONS 02, 03, 06 + 07
   Mobile only. Desktop and Sections 04/05 remain unchanged.
   Keeps all written content while reducing vertical scrolling.
   ========================================= */
@media (max-width: 600px) {

    /* SECTION 02 — WHY TECH BEARD
       Turn tall cards into tighter feature cards. */
    .different {
        padding-top: 46px;
        padding-bottom: 52px;
    }

    .care-grid {
        margin-top: 30px;
        gap: 12px;
    }

    .care-card,
    .care-card-primary,
    .care-card-secondary,
    .care-card-tertiary,
    .care-card-quaternary {
        min-height: 0 !important;
        height: auto !important;
    }

    .care-card {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 0;
        padding: 18px 18px 17px;
        box-shadow: 5px 5px 0 var(--black);
    }

    .care-card:hover {
        transform: none;
        box-shadow: 5px 5px 0 var(--black);
    }

    .care-number {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        font-size: 9px;
    }

    .care-icon {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin-top: 9px;
        font-size: 26px;
        line-height: 1;
    }

    .care-card h3,
    .care-card-primary h3,
    .care-card-secondary h3,
    .care-card-tertiary h3,
    .care-card-quaternary h3 {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        margin-top: 0;
        font-size: clamp(1.55rem, 7.6vw, 2rem);
        line-height: 0.98;
        letter-spacing: -1.5px;
    }

    .care-card p,
    .care-card strong {
        grid-column: 1 / -1;
    }

    .care-card p {
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.45;
    }

    .care-card strong {
        margin-top: 0;
        padding-top: 13px;
        font-size: 8px;
        line-height: 1.35;
    }

    /* SECTION 03 — WHY PEOPLE CLICK AWAY
       Compact each issue into a short mobile feature row. */
    .behavior-section {
        padding-top: 50px;
        padding-bottom: 52px;
    }

    .behavior-grid {
        margin-top: 28px;
        gap: 1px;
    }

    .behavior-item {
        min-height: 0 !important;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 10px;
        padding: 17px 17px 18px;
    }

    .behavior-item > span {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        font-size: 9px;
    }

    .behavior-item h3 {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        align-self: center;
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .behavior-item p,
    .behavior-item strong {
        grid-column: 1 / -1;
    }

    .behavior-item p {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.45;
    }

    .behavior-item strong {
        margin-top: 12px;
        font-size: 8px;
        line-height: 1.35;
    }

    /* SECTION 06 — TESTIMONIALS
       Keep both reviews and all copy, but remove the tall-card feel. */
    .testimonials {
        padding: 48px 20px 56px;
    }

    .testimonials-header {
        gap: 18px;
        margin-bottom: 28px;
    }

    .testimonials-header h2 {
        font-size: clamp(2.55rem, 12vw, 3rem);
        line-height: 0.86;
        letter-spacing: -3px;
    }

    .testimonials-intro {
        font-size: 14px;
        line-height: 1.5;
    }

    .testimonial-grid {
        gap: 16px;
    }

    .testimonial-card,
    .testimonial-card-inner {
        min-height: 0 !important;
        height: auto;
    }

    .testimonial-card-inner {
        padding: 20px 20px 19px;
        border-radius: 14px;
    }

    .testimonial-card-blue .testimonial-card-inner {
        box-shadow: 7px 7px 0 var(--blue);
    }

    .testimonial-card-red .testimonial-card-inner {
        box-shadow: 7px 7px 0 var(--red);
    }

    .testimonial-card:hover .testimonial-card-inner {
        transform: none;
    }

    .testimonial-card-blue:hover .testimonial-card-inner {
        box-shadow: 7px 7px 0 var(--blue);
    }

    .testimonial-card-red:hover .testimonial-card-inner {
        box-shadow: 7px 7px 0 var(--red);
    }

    .testimonial-mark {
        margin-top: 15px;
        font-size: 52px;
        line-height: 0.6;
    }

    .testimonial-card blockquote {
        margin: 13px 0 19px;
        font-size: 1rem;
        line-height: 1.42;
    }

    .testimonial-author {
        padding-top: 14px;
        gap: 10px;
    }

    .testimonial-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 13px;
    }

    .testimonial-author strong {
        font-size: 15px;
    }

    .testimonial-author span {
        margin-top: 2px;
        font-size: 8px;
        line-height: 1.35;
    }

    /* SECTION 07 — FINAL CTA
       Keep the graphic, but make the visual substantially smaller on phones. */
    .contact-split {
        gap: 22px;
    }

    .contact-visual {
        min-height: 275px !important;
    }

    .contact-image-shell {
        width: min(82vw, 350px) !important;
        height: auto !important;
        max-width: 350px;
    }

    .contact-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-orbit-one {
        width: 68% !important;
    }

    .contact-orbit-two {
        width: 42% !important;
    }
}


/* =========================================
   SECTION 07 — MOBILE HEIGHT + GRAPHIC FIX
   Mobile only. Desktop and Sections 01–06 remain unchanged.
   ========================================= */
@media (max-width: 600px) {
    .contact {
        padding-top: 44px;
        padding-bottom: 48px;
    }

    .contact-split {
        gap: 10px;
    }

    .contact-visual {
        width: 100%;
        min-height: 180px !important;
        height: 180px;
        margin: 0 auto;
    }

    .contact-image-shell {
        width: min(58vw, 235px) !important;
        max-width: 235px !important;
        height: auto !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) !important;
        border-radius: 16px;
    }

    .contact-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .contact-orbit-one {
        width: 52% !important;
    }

    .contact-orbit-two {
        width: 32% !important;
    }

    .contact-orbit-dot {
        transform: scale(0.72);
    }
}


/* =========================================
   HERO — CORRECTED MOBILE LAYOUT
   Mobile only.
   Keeps ONE CTA/phone block.
   Desktop hero remains exactly as before.
   Mobile order:
   headline -> description -> centered computer -> CTA -> phone
   ========================================= */
@media (max-width: 600px) {

    

    /*
       Remove only the hero-title wrapper box on mobile so its
       existing children can be placed around the artwork without
       duplicating any HTML.
    */
    

    

    

    

    

    

    

    

    

    /*
       The artwork is now a normal mobile-flow element instead of
       sitting on top of the description. Extra top clearance keeps
       it completely separated from the final sentence.
    */
    

    

    

    

    /*
       This is the SAME original CTA/phone block — not a second copy.
       It simply moves below the artwork on mobile.
    */
    

    

    
}


/* MOBILE HERO — spacing-only correction
   Adds clear separation between the description and computer graphic.
   No other desktop or mobile styling is changed. */
@media (max-width: 600px) {
    
}

/* =========================================
   REQUESTED POLISH — SEPTEMBER 05, 2026
   Only the four approved changes below.
   ========================================= */

/* 2) SECTION 02 — desktop only:
   tighten the space between "GOOD SERVICE AFTER LAUNCH"
   and the card grid. */
@media (min-width: 901px) {
    .care-grid {
        margin-top: 58px;
    }
}

/* 3) SECTION 04 — services are informational, not clickable:
   remove the hover movement/highlight cue while keeping the rows unchanged. */
.work-row:hover {
    color: inherit;
    padding-left: 0;
}

/* 4) SECTION 05 — mobile only:
   make the section less vertically long by tightening surrounding spacing
   and the workstation footprint. Text inside the monitor keeps its readable
   mobile font sizing. */
@media (max-width: 600px) {
    .about.about-terminal {
        padding-top: 44px;
        padding-bottom: 46px;
        gap: 18px;
    }

    .about-terminal-heading .label {
        margin-bottom: 12px;
    }

    .about-workstation {
        width: 100%;
        padding-bottom: 52px;
        transform: scale(0.86);
        transform-origin: top center;
        margin-top: -4px;
        margin-bottom: -50px;
    }

    .about-monitor-screen {
        padding-top: 16px;
        padding-bottom: 17px;
    }

    .about-monitor-screen p {
        margin-bottom: 8px;
        /* Deliberately do not reduce font-size here. */
    }

    .about-terminal-command {
        margin-bottom: 10px;
    }

    .about-monitor-neck {
        height: 42px;
    }

    .about-keyboard {
        min-height: 49px;
        padding-top: 7px;
        padding-bottom: 7px;
    }
}



/* =========================================
   HERO PHOTO — FINAL OVERRIDE
   Uses back.png and replaces the old wireframe computer.
   ========================================= */





/* Fade the left edge into the light hero so the text stays readable. */




@media (max-width: 1000px) {
    
}

@media (max-width: 600px) {
    

    

    
}

/* =========================================
   GLOBAL NAV — DARK NAVY
   Desktop + mobile / all pages using this stylesheet
   ========================================= */

.nav {
    background: #0b1730;
    color: #f7f9fc;
    border-bottom-color: #172a4d;
}

/* Company name */
.nav .logo,
.nav .logo-text {
    color: #ffffff;
}

/* Preserve the branded blue portion of the company name, but brighten it
   enough to remain visible against navy. */
.nav .blue-text {
    color: #78a0ff;
}

/* Main navigation links */
.nav nav a:not(.nav-button) {
    color: #d8e0ed;
}

.nav nav a:not(.nav-button):hover {
    color: #ffffff;
}

/* Keep the primary CTA blue and make it stand clearly off the navy bar. */
.nav .nav-button {
    background: #2f6bff;
    color: #ffffff !important;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 4px 4px 0 #020817;
}

.nav .nav-button:hover {
    background: #477cff;
    color: #ffffff !important;
    box-shadow: 2px 2px 0 #020817;
}

/* If the mobile menu uses a menu/hamburger control, keep it visible too. */
.nav button,
.nav .menu-toggle,
.nav .nav-toggle,
.nav .hamburger {
    color: #ffffff;
}

.nav .menu-toggle span,
.nav .nav-toggle span,
.nav .hamburger span {
    background: #ffffff;
}

/* Mobile nav panels/expanded menus inherit the same navy treatment. */
@media (max-width: 900px) {
    .nav,
    .nav nav {
        background-color: #0b1730;
    }

    .nav nav a:not(.nav-button) {
        color: #e3e9f2;
    }

    .nav .nav-button {
        background: #2f6bff;
        color: #ffffff !important;
    }
}

/* =========================================
   GLOBAL NAV LOGO VISIBILITY FIX
   Keeps the dark navy navbar while giving the existing
   logo artwork enough contrast on desktop and mobile.
   ========================================= */

.nav .logo {
    color: #ffffff;
}

.nav .logo-image {
    width: 58px;
    height: 48px;
    padding: 4px;
    box-sizing: border-box;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(2, 8, 23, 0.22);
    filter: none;
    opacity: 1;
}

.nav .logo-text {
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

@media (max-width: 600px) {
    .nav .logo-image {
        display: block !important;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        padding: 3px;
        border-radius: 7px;
    }

    .nav .logo-text {
        color: #ffffff;
        font-size: 8.5px;
    }
}

/* =========================================
   MOBILE HERO — FINAL STRUCTURAL FIX
   On mobile, back.png is the HERO BACKGROUND itself.
   The separate hero-art image is completely disabled.
   ========================================= */
@media (max-width: 600px) {

    

    /*
       This is the key structural change:
       the old image element cannot create a separate strip anymore.
    */
    

    /* Restore normal document flow after the earlier display:contents rule. */
    

    

    

    

    

    

    

    

    

    

    

    
}

/* =========================================================
   HERO FINAL FIX
   The old hero image element has been removed from the HTML.
   back.png is now rendered only through the hero pseudo-element.
   ========================================================= */







/* Kill every legacy hero-art layout rule because that element no longer exists. */


@media (max-width: 600px) {
    

    /* The image is now ONE continuous background layer across the whole hero. */
    

    /* Undo the old display:contents mobile experiment. */
    

    

    

    

    

    

    

    

    

    

    

    
}


/* =========================================================
   HERO — FINAL COMPACT MOBILE LAYOUT
   Desktop stays unchanged.
   On mobile:
   - more space below the navbar
   - no separate hero image element
   - no giant image-only area below the content
   - back.png is a decorative layer only and does not create height
   ========================================================= */







/* The old artwork has been retired completely. */


@media (max-width: 600px) {

    

    /*
       IMPORTANT:
       The photo is absolutely positioned and only occupies the
       lower-right portion of the hero. It contributes ZERO height,
       so it cannot create the giant empty picture area.
    */
    

    

    

    

    

    

    

    

    

    

    

    

    
}

/* =========================================================
   HERO — CLEAN REBUILD
   This is now the ONLY hero layout in this stylesheet.
   back.png is decorative and never creates document height.
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;
    min-height: 640px;
    padding: 30px 7% 55px;
    overflow: hidden;
    background: #eef5ff;
    border-bottom: 2px solid var(--black);
}

.hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            #eef5ff 0%,
            rgba(238, 245, 255, 0.84) 10%,
            rgba(238, 245, 255, 0.30) 34%,
            rgba(238, 245, 255, 0) 54%
        ),
        url("back.png");
    background-size: 100% 100%, cover;
    background-position: center, 67% center;
    background-repeat: no-repeat;
}

.hero-top,
.hero-title,
.hero-credibility,
.hero-statement,
.hero-cta-wrap {
    position: relative;
    z-index: 2;
}

.hero-top {
    display: flex;
    justify-content: space-between;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--gray);
}

.hero-title {
    padding-top: 35px;
    max-width: 760px;
}

.hero-credibility {
    margin-top: -6px;
    margin-bottom: 22px;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--gray);
}

.hero h1 {
    margin: 0;
    font-size: clamp(3.8rem, 7.2vw, 8rem);
    line-height: 0.84;
    letter-spacing: -6px;
    font-weight: 700;
}

.hero h1 span {
    display: block;
    color: var(--blue);
    margin-left: 8%;
}

.hero h1 em {
    display: block;
    color: var(--red);
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: normal;
    transform: rotate(-2deg);
    margin-left: 15%;
}

.hero-statement {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    margin-left: 8%;
    max-width: 440px;
}

.hero-statement .red-line {
    width: 50px;
    height: 4px;
    background: var(--red);
    flex: 0 0 50px;
}

.hero-statement p {
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    color: var(--gray);
}

.hero-cta-wrap {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-weight: 700;
}

.hero-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Mono", monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--gray);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-phone:hover {
    color: var(--blue);
}

.hero-phone-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: 0 0 auto;
}

/* Tablet */
@media (max-width: 900px) and (min-width: 601px) {
    .hero {
        min-height: 620px;
        padding: 36px 7% 48px;
    }

    .hero::before {
        width: 62%;
        opacity: 0.82;
    }

    .hero-title {
        max-width: 650px;
    }
}

/* Mobile — content determines hero height. No image-only tail. */
@media (max-width: 600px) {
    .hero {
        min-height: 0;
        height: auto;
        padding: 52px 7% 30px;
        background: #eef5ff;
    }

    .hero::before {
        top: 0;
        right: -16%;
        bottom: 0;
        width: 92%;
        height: 100%;
        opacity: 0.78;
        background:
            linear-gradient(
                90deg,
                #eef5ff 0%,
                rgba(238, 245, 255, 0.96) 30%,
                rgba(238, 245, 255, 0.74) 57%,
                rgba(238, 245, 255, 0.30) 100%
            ),
            linear-gradient(
                180deg,
                rgba(238, 245, 255, 0.45) 0%,
                rgba(238, 245, 255, 0.08) 58%,
                rgba(238, 245, 255, 0.18) 100%
            ),
            url("back.png");
        background-size: 100% 100%, 100% 100%, cover;
        background-position: center, center, 72% center;
        background-repeat: no-repeat;
    }

    .hero-top {
        gap: 10px;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .hero-top span:last-child {
        text-align: right;
    }

    .hero-title {
        padding-top: 24px;
        max-width: 100%;
    }

    .hero-credibility {
        margin: 0 0 16px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .hero h1 {
        font-size: clamp(3rem, 14.4vw, 3.75rem);
        line-height: 0.86;
        letter-spacing: -2.8px;
    }

    .hero h1 span {
        margin-left: 0;
    }

    .hero h1 em {
        margin-left: 5%;
    }

    .hero-statement {
        margin: 22px 0 0;
        max-width: 100%;
        gap: 14px;
        align-items: flex-start;
    }

    .hero-statement .red-line {
        width: 42px;
        flex-basis: 42px;
        margin-top: 8px;
    }

    .hero-statement p {
        font-size: 15px;
        line-height: 1.45;
    }

    .hero-cta-wrap {
        margin-top: 22px;
        gap: 15px;
    }

    .hero-phone {
        font-size: 14px;
        line-height: 1.3;
    }

    .hero-phone-icon {
        width: 16px;
        height: 16px;
    }
}

/* =========================================================
   MOBILE HERO — NATURAL READABILITY FIX
   No box. No local overlay band.
   We modify the existing background image layer itself.
   Desktop/tablet unchanged.
   ========================================================= */
@media (max-width: 700px) {

    .hero::before {
        opacity: 1 !important;

        background:
            linear-gradient(
                90deg,
                rgba(238,245,255,1.00) 0%,
                rgba(238,245,255,0.99) 18%,
                rgba(238,245,255,0.95) 36%,
                rgba(238,245,255,0.82) 52%,
                rgba(238,245,255,0.54) 68%,
                rgba(238,245,255,0.18) 86%,
                rgba(238,245,255,0.00) 100%
            ),
            linear-gradient(
                180deg,
                rgba(238,245,255,0.34) 0%,
                rgba(238,245,255,0.18) 48%,
                rgba(238,245,255,0.08) 100%
            ),
            url("back.png") !important;

        background-size: 100% 100%, 100% 100%, cover !important;
        background-position: center, center, 74% center !important;
        background-repeat: no-repeat !important;
    }

    .hero .hero-statement {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
    }

    .hero .hero-statement::before,
    .hero .hero-statement::after {
        content: none !important;
        display: none !important;
    }

    .hero .hero-statement p {
        color: #243149 !important;
        -webkit-text-fill-color: #243149 !important;
        font-weight: 500 !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }
}

/* =========================================================
   MOBILE HERO — MORE BREATHING ROOM
   Mobile only. Desktop/tablet unchanged.
   ========================================================= */
@media screen and (max-width: 700px) {

    /* More room between the small top label and the headline. */
    .hero .hero-title {
        padding-top: 34px !important;
    }

    /* Give the three headline lines a little more vertical separation. */
    .hero h1 {
        line-height: 0.93 !important;
    }

    /* More space after PEOPLE before the supporting sentence. */
    .hero .hero-statement {
        margin-top: 34px !important;
    }

    /* Open up the supporting copy itself slightly. */
    .hero .hero-statement p {
        line-height: 1.58 !important;
    }

    /* More breathing room before the CTA. */
    .hero .hero-cta-wrap {
        margin-top: 30px !important;
        gap: 22px !important;
    }

    /* Slightly more room at the bottom after the phone number. */
    .hero {
        padding-bottom: 38px !important;
    }
}

/* =========================================================
   MOBILE HERO — SPACING REFINEMENT V2
   Mobile only. Desktop/tablet unchanged.
   ========================================================= */
@media screen and (max-width: 700px) {

    /* More breathing room between HUMAN-CENTERED... and WEBSITES. APPS. */
    .hero .hero-title {
        padding-top: 46px !important;
    }

    /* Keep the headline comfortably spaced without becoming loose. */
    .hero h1 {
        line-height: 0.95 !important;
    }

    /* Slightly more room after PEOPLE. */
    .hero .hero-statement {
        margin-top: 38px !important;
    }

    /* Keep the supporting copy airy. */
    .hero .hero-statement p {
        line-height: 1.60 !important;
    }

    /* A touch more room before the CTA. */
    .hero .hero-cta-wrap {
        margin-top: 32px !important;
        gap: 24px !important;
    }

    /*
       Remove the awkward background-only tail after the phone number.
       The hero ends shortly after its final content instead of reserving
       extra image space.
    */
    .hero {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 18px !important;
    }
}

/* =========================================
   DESKTOP NAV — COMPACT GLOBAL SIZE
   Applies to all pages using this stylesheet.
   Mobile/tablet navigation is unchanged.
   ========================================= */
@media (min-width: 901px) {
    .nav {
        min-height: 68px;
        padding-left: 22px;
        padding-right: 22px;
    }

    .nav .logo {
        gap: 8px;
        transform: translateX(-4px);
    }

    .nav .logo-image {
        width: 50px;
        height: 42px;
        padding: 3px;
        border-radius: 7px;
    }

    .nav .logo-text {
        font-size: 12px;
        letter-spacing: 0.8px;
    }

    .nav nav {
        gap: 20px;
        font-size: 12px;
    }

    .nav .nav-button {
        padding: 8px 14px;
    }
}

/* =========================================
   DESKTOP/LAPTOP HERO — ABOVE-THE-FOLD CTA
   Mobile/tablet remain unchanged.
   ========================================= */
@media (min-width: 901px) {
    .hero {
        min-height: 560px !important;
        padding-top: 22px !important;
        padding-bottom: 34px !important;
    }

    .hero-title {
        padding-top: 24px !important;
    }

    .hero-credibility {
        margin-bottom: 16px !important;
    }

    .hero h1 {
        line-height: 0.82 !important;
    }

    .hero-statement {
        margin-top: 18px !important;
    }

    .hero-cta-wrap {
        margin-top: 14px !important;
        gap: 14px !important;
    }

    .hero-phone {
        margin-top: 0 !important;
    }
}

/* =========================================
   DESKTOP HERO CTA — COHESIVE CONTACT ROW
   Desktop/laptop only. Mobile/tablet unchanged.
   ========================================= */
@media (min-width: 901px) {
    .hero-cta-wrap {
        flex-direction: row !important;
        align-items: center !important;
        gap: 24px !important;
    }

    .hero-phone {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 !important;

        font-family: "Space Grotesk", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        color: #536074 !important;
        white-space: nowrap;
    }

    .hero-phone-icon {
        width: 15px !important;
        height: 15px !important;
        opacity: 0.78;
    }

    .hero-phone-label {
        color: #7a8596;
        font-weight: 500;
    }

    .hero-phone-number {
        color: #273348;
        font-weight: 700;
    }

    .hero-phone:hover .hero-phone-label,
    .hero-phone:hover .hero-phone-number {
        color: var(--blue);
    }
}

/* =========================================
   TESTIMONIALS — NAVY / WHITE / GOLD / SILVER
   Refined review cards with restrained legacy-color accents.
   ========================================= */

.testimonials {
    background:
        radial-gradient(circle at 92% 12%, rgba(196, 161, 74, .10), transparent 30%),
        radial-gradient(circle at 7% 88%, rgba(132, 146, 166, .10), transparent 32%),
        #f5f6f8 !important;
    color: #0b1730 !important;
    border-bottom: 1px solid rgba(11, 23, 48, .28) !important;
}

.testimonials::before {
    width: 520px !important;
    height: 520px !important;
    top: -300px !important;
    right: -180px !important;
    background: radial-gradient(
        circle,
        rgba(196, 161, 74, .14) 0%,
        rgba(196, 161, 74, .05) 44%,
        transparent 72%
    ) !important;
    filter: blur(20px) !important;
}

.testimonials::after {
    width: 440px !important;
    height: 440px !important;
    bottom: -270px !important;
    left: -160px !important;
    background: radial-gradient(
        circle,
        rgba(126, 141, 162, .14) 0%,
        rgba(126, 141, 162, .05) 46%,
        transparent 72%
    ) !important;
    filter: blur(22px) !important;
}

.testimonials-header h2 {
    color: #0b1730 !important;
}

.testimonials-intro {
    color: #5f6b7a !important;
}

.testimonial-grid {
    gap: 34px !important;
}

.testimonial-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.testimonial-card-inner {
    position: relative !important;
    min-height: 420px !important;
    height: 100% !important;
    padding: 36px 38px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(247,248,250,1) 100%) !important;
    border: 1px solid rgba(11, 23, 48, .24) !important;
    border-radius: 12px !important;
    box-shadow:
        0 18px 42px rgba(11, 23, 48, .09),
        0 3px 10px rgba(11, 23, 48, .05) !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}

.testimonial-card-inner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(
        90deg,
        #b9933f 0%,
        #d1b665 38%,
        #aeb7c3 72%,
        rgba(174, 183, 195, .18) 100%
    ) !important;
    pointer-events: none !important;
}

.testimonial-card-inner::after {
    content: "" !important;
    position: absolute !important;
    width: 180px !important;
    height: 180px !important;
    right: -85px !important;
    top: -90px !important;
    border-radius: 50% !important;
    background: radial-gradient(
        circle,
        rgba(196, 161, 74, .10),
        transparent 70%
    ) !important;
    pointer-events: none !important;
}

.testimonial-card-blue .testimonial-card-inner,
.testimonial-card-red .testimonial-card-inner {
    background:
        linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(247,248,250,1) 100%) !important;
    box-shadow:
        0 18px 42px rgba(11, 23, 48, .09),
        0 3px 10px rgba(11, 23, 48, .05) !important;
}

.testimonial-card:hover .testimonial-card-inner,
.testimonial-card-blue:hover .testimonial-card-inner,
.testimonial-card-red:hover .testimonial-card-inner {
    transform: translateY(-4px) !important;
    border-color: rgba(185, 147, 63, .52) !important;
    box-shadow:
        0 24px 52px rgba(11, 23, 48, .13),
        0 5px 14px rgba(11, 23, 48, .06) !important;
}

.testimonial-card-top {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.testimonial-number {
    color: #0b1730 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
}

.testimonial-tag,
.testimonial-card-blue .testimonial-tag,
.testimonial-card-red .testimonial-tag {
    padding: 7px 10px !important;
    color: #8a6a28 !important;
    background: rgba(196, 161, 74, .08) !important;
    border: 1px solid rgba(185, 147, 63, .46) !important;
    border-radius: 999px !important;
    font-family: "DM Mono", monospace !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.testimonial-mark,
.testimonial-card-blue .testimonial-mark,
.testimonial-card-red .testimonial-mark {
    position: relative !important;
    z-index: 2 !important;
    align-self: flex-start !important;
    margin-top: 28px !important;
    margin-left: -4px !important;
    color: #b9933f !important;
    font-family: Georgia, serif !important;
    font-size: 88px !important;
    line-height: .65 !important;
    opacity: .9 !important;
}

.testimonial-card blockquote {
    position: relative !important;
    z-index: 2 !important;
    margin: 22px 0 34px !important;
    color: #13203a !important;
    font-size: clamp(1.25rem, 1.8vw, 1.65rem) !important;
    line-height: 1.52 !important;
    font-weight: 500 !important;
    letter-spacing: -.35px !important;
}

.testimonial-author {
    position: relative !important;
    z-index: 2 !important;
    margin-top: auto !important;
    padding-top: 20px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 13px !important;
    border-top: 1px solid rgba(126, 141, 162, .38) !important;
}

.testimonial-avatar,
.testimonial-card-blue .testimonial-avatar,
.testimonial-card-red .testimonial-avatar {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    display: grid !important;
    place-items: center !important;
    color: #0b1730 !important;
    background:
        linear-gradient(145deg, #ffffff 0%, #e5e9ef 100%) !important;
    border: 2px solid rgba(185, 147, 63, .72) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 3px #f7f8fa !important;
    font-family: "DM Mono", monospace !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.testimonial-author strong {
    color: #0b1730 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.testimonial-author span {
    color: #7b8797 !important;
    font-family: "DM Mono", monospace !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
    letter-spacing: .9px !important;
    text-transform: uppercase !important;
}

/* Small restrained hints of the original palette. */
.testimonial-card-blue .testimonial-number::after {
    content: "" !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    margin-left: 8px !important;
    border-radius: 50% !important;
    background: #4e73c7 !important;
    vertical-align: middle !important;
}

.testimonial-card-red .testimonial-number::after {
    content: "" !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    margin-left: 8px !important;
    border-radius: 50% !important;
    background: #b85a5a !important;
    vertical-align: middle !important;
}

@media (max-width: 900px) {
    .testimonial-card-inner {
        min-height: 370px !important;
    }
}

@media (max-width: 600px) {
    .testimonial-card-inner {
        min-height: 340px !important;
        padding: 30px 26px 27px !important;
        border-radius: 10px !important;
    }

    .testimonial-mark,
    .testimonial-card-blue .testimonial-mark,
    .testimonial-card-red .testimonial-mark {
        font-size: 72px !important;
    }

    .testimonial-card blockquote {
        margin: 20px 0 30px !important;
        font-size: 1.18rem !important;
    }
}

/* =========================================
   TESTIMONIALS — EDITORIAL NAVY / GOLD / SILVER
   Replaces the old boxed-card visual language.
   ========================================= */

.testimonials-editorial {
    position: relative;
    overflow: hidden;
    padding: clamp(84px, 9vw, 132px) 7%;
    background:
        radial-gradient(circle at 86% 18%, rgba(196, 161, 74, .12), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(179, 188, 201, .08), transparent 30%),
        #081426 !important;
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(203, 211, 221, .18) !important;
}

.testimonials-editorial::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -250px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(202, 165, 80, .14) 0%,
        rgba(202, 165, 80, .05) 42%,
        transparent 72%
    );
    filter: blur(14px);
    pointer-events: none;
}

.testimonials-editorial::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -230px;
    bottom: -280px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(174, 184, 198, .10) 0%,
        rgba(174, 184, 198, .04) 45%,
        transparent 72%
    );
    filter: blur(18px);
    pointer-events: none;
}

.testimonials-editorial-header,
.testimonial-editorial-list {
    position: relative;
    z-index: 2;
}

.testimonials-editorial-header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    column-gap: clamp(50px, 8vw, 120px);
    row-gap: 22px;
    align-items: end;
    margin-bottom: clamp(76px, 9vw, 120px);
}

.testimonials-editorial-kicker {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: #c7ced8;
}

.testimonials-editorial-rule {
    width: 92px;
    height: 1px;
    background: linear-gradient(90deg, #c5a04f 0%, #d7bd77 100%);
}

.testimonials-editorial h2 {
    margin: 0;
    color: #ffffff !important;
    font-size: clamp(3.6rem, 7vw, 7.2rem);
    line-height: .9;
    letter-spacing: -4px;
    font-weight: 700;
}

.testimonials-editorial-intro {
    margin: 0 0 8px;
    max-width: 520px;
    color: #aeb8c6 !important;
    font-size: 16px;
    line-height: 1.7;
}

.testimonial-editorial-list {
    display: flex;
    flex-direction: column;
}

.testimonial-editorial {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
    width: min(100%, 1040px);
}

.testimonial-editorial-left {
    align-self: flex-start;
}

.testimonial-editorial-right {
    align-self: flex-end;
    width: min(92%, 940px);
}

.testimonial-editorial-number {
    padding-top: 18px;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #c5a04f;
}

.testimonial-editorial-copy {
    position: relative;
    padding-left: clamp(26px, 3vw, 42px);
    border-left: 1px solid rgba(195, 204, 216, .28);
}

.testimonial-editorial-mark {
    position: absolute;
    left: clamp(26px, 3vw, 42px);
    top: -8px;
    font-family: Georgia, serif;
    font-size: clamp(76px, 8vw, 112px);
    line-height: .72;
    color: #c5a04f;
    opacity: .96;
}

.testimonial-editorial blockquote {
    margin: 0;
    padding-top: clamp(74px, 7vw, 96px);
    max-width: 880px;
    color: #f8fafc;
    font-size: clamp(1.55rem, 2.5vw, 2.6rem);
    line-height: 1.38;
    font-weight: 500;
    letter-spacing: -.7px;
}

.testimonial-editorial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.testimonial-editorial-monogram {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    border-radius: 50%;
    border: 1px solid rgba(209, 176, 98, .78);
    color: #f5e8c3;
    background:
        linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    font-family: "DM Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.02);
}

.testimonial-editorial-author strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.testimonial-editorial-author span {
    display: block;
    margin-top: 4px;
    color: #96a2b2;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.testimonial-editorial-divider {
    width: min(100%, 1180px);
    height: 1px;
    margin: clamp(56px, 7vw, 88px) auto;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(197, 160, 79, .55) 16%,
        rgba(183, 192, 204, .26) 50%,
        rgba(197, 160, 79, .42) 84%,
        transparent 100%
    );
}

@media (max-width: 900px) {
    .testimonials-editorial-header {
        grid-template-columns: 1fr;
    }

    .testimonials-editorial-intro {
        max-width: 650px;
    }

    .testimonial-editorial,
    .testimonial-editorial-right {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .testimonials-editorial {
        padding: 72px 7% 78px;
    }

    .testimonials-editorial-header {
        margin-bottom: 62px;
    }

    .testimonials-editorial h2 {
        font-size: clamp(3.15rem, 15vw, 4.4rem);
        letter-spacing: -2.6px;
    }

    .testimonials-editorial-kicker {
        align-items: flex-start;
        gap: 12px;
        font-size: 8px;
        letter-spacing: 1.1px;
    }

    .testimonials-editorial-rule {
        width: 58px;
        margin-top: 5px;
    }

    .testimonial-editorial {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 18px;
    }

    .testimonial-editorial-number {
        font-size: 9px;
        padding-top: 10px;
    }

    .testimonial-editorial-copy {
        padding-left: 20px;
    }

    .testimonial-editorial-mark {
        left: 20px;
        font-size: 70px;
    }

    .testimonial-editorial blockquote {
        padding-top: 62px;
        font-size: 1.36rem;
        line-height: 1.46;
    }

    .testimonial-editorial-author {
        margin-top: 28px;
    }

    .testimonial-editorial-divider {
        margin: 54px 0;
    }
}

/* =========================================
   TESTIMONIALS — COMPACT LIGHT LAYOUT
   Warm white / navy / gold / silver.
   ========================================= */

.testimonials-compact {
    position: relative;
    overflow: hidden;
    padding: 68px 7% 72px !important;
    background:
        linear-gradient(180deg, #faf9f6 0%, #f3f4f6 100%) !important;
    color: #0b1730 !important;
    border-bottom: 1px solid rgba(11, 23, 48, .16) !important;
}

.testimonials-compact::before,
.testimonials-compact::after {
    content: none !important;
    display: none !important;
}

.testimonials-compact-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    gap: 36px;
    align-items: end;
    margin-bottom: 34px;
}

.testimonials-compact-header .label {
    margin-bottom: 12px;
    color: #8a6a28 !important;
}

.testimonials-compact-header h2 {
    margin: 0;
    color: #0b1730 !important;
    font-size: clamp(3rem, 5.6vw, 5.8rem);
    line-height: .9;
    letter-spacing: -3px;
}

.testimonials-compact-intro {
    margin: 0 0 6px;
    color: #667182 !important;
    font-size: 15px;
    line-height: 1.6;
}

.testimonial-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.testimonial-compact-card {
    position: relative;
    min-height: 315px;
    padding: 30px 30px 26px;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,248,250,.98));
    border: 1px solid rgba(146, 156, 170, .45);
    border-radius: 10px;
    box-shadow:
        0 10px 26px rgba(11, 23, 48, .06);
    overflow: hidden;
}

.testimonial-compact-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #b58b32 0%,
        #d2b66f 46%,
        #aeb6c2 100%
    );
}

.testimonial-compact-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.testimonial-compact-number {
    margin-top: 4px;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #8c6b29;
}

.testimonial-compact-mark {
    margin-top: -6px;
    font-family: Georgia, serif;
    font-size: 62px;
    line-height: .75;
    color: #b58b32;
}

.testimonial-compact-card blockquote {
    margin: 18px 0 28px;
    color: #14213a;
    font-size: clamp(1.12rem, 1.5vw, 1.38rem);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -.2px;
}

.testimonial-compact-author {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(157, 168, 183, .4);
}

.testimonial-compact-monogram {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0b1730;
    background: #f8f9fb;
    border: 1px solid rgba(181, 139, 50, .72);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    font-weight: 700;
}

.testimonial-compact-author strong {
    display: block;
    color: #0b1730;
    font-size: 15px;
    font-weight: 700;
}

.testimonial-compact-author span {
    display: block;
    margin-top: 3px;
    color: #7a8595;
    font-family: "DM Mono", monospace;
    font-size: 8.5px;
    line-height: 1.4;
    letter-spacing: .7px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .testimonials-compact-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .testimonial-compact-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-compact-card {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .testimonials-compact {
        padding: 58px 7% 62px !important;
    }

    .testimonials-compact-header {
        margin-bottom: 26px;
    }

    .testimonials-compact-header h2 {
        font-size: clamp(3rem, 14vw, 4.2rem);
        letter-spacing: -2.2px;
    }

    .testimonial-compact-card {
        padding: 26px 24px 24px;
    }

    .testimonial-compact-card blockquote {
        font-size: 1.08rem;
    }
}



/* =========================================
   CLIENT REVIEWS — HERO-TONE LIGHT BLUE
   ========================================= */
.testimonials-compact {
    background:
        linear-gradient(
            180deg,
            #eef5ff 0%,
            #e9f1fb 100%
        ) !important;
}

/* =========================================
   GLOBAL COLOR REFINEMENT
   Primary palette: navy / white / gold / silver
   Red + bright blue remain only as small accents.
   COLOR ONLY — no layout, sizing, or content changes.
   ========================================= */

:root {
    --brand-navy: #0b1730;
    --brand-navy-deep: #07111f;
    --brand-gold: #b8923f;
    --brand-gold-light: #d6bd78;
    --brand-silver: #aeb7c3;
    --brand-silver-light: #eef1f5;
    --brand-white: #f8fafc;
    --brand-muted: #687487;
}

/* Shared small labels: move away from bright primary blue. */
.tiny-label,
.label {
    color: var(--brand-gold) !important;
}

/* Keep the hero recognizable, but make red a smaller accent. */
.hero .hero-credibility,
.hero-top {
    color: #687487 !important;
}

.hero-statement .red-line,
.red-line {
    background: var(--brand-gold) !important;
}

/* WHY TECH BEARD */
.different {
    background: #f8fafc !important;
    border-bottom-color: rgba(11, 23, 48, .34) !important;
}

.different-header h2 span {
    color: var(--brand-navy) !important;
}

/* Four promise cards: same structure, completely revised palette. */
.care-card {
    border-color: #0b1730 !important;
    box-shadow: 10px 10px 0 rgba(11, 23, 48, .92) !important;
}

.care-card:hover {
    box-shadow: 15px 15px 0 rgba(11, 23, 48, .92) !important;
}

/* 01 — navy */
.care-card-blue {
    background: #0b1730 !important;
    color: #ffffff !important;
}

.care-card-blue .care-number,
.care-card-blue .care-icon,
.care-card-blue strong {
    color: #d6bd78 !important;
}

/* 02 — silver, replacing the bright yellow block */
.care-card-yellow {
    background:
        linear-gradient(145deg, #eef1f5 0%, #dfe4ea 100%) !important;
    color: #0b1730 !important;
}

.care-card-yellow .care-number,
.care-card-yellow .care-icon,
.care-card-yellow strong {
    color: #8b6a27 !important;
}

/* 03 — clean white / silver */
.care-card-white {
    background: #f8fafc !important;
    color: #0b1730 !important;
}

.care-card-white .care-number,
.care-card-white .care-icon,
.care-card-white strong {
    color: #758195 !important;
}

/* 04 — warm champagne/gold-neutral instead of dominant red */
.care-card-red {
    background:
        linear-gradient(145deg, #d8c28a 0%, #b9974c 100%) !important;
    color: #0b1730 !important;
}

.care-card-red .care-number,
.care-card-red .care-icon,
.care-card-red strong {
    color: #0b1730 !important;
}

/* THE PROBLEM — keep dark contrast but shift accents to gold/silver. */
.behavior-section {
    background: #0b1730 !important;
    color: #ffffff !important;
}

.behavior-intro .label,
.behavior-item span,
.behavior-item strong {
    color: #d6bd78 !important;
}

.behavior-intro h2 span {
    color: #c6ced9 !important;
}

.behavior-grid {
    background: #34425a !important;
}

.behavior-item {
    background: #0b1730 !important;
    border-color: #34425a !important;
}

.behavior-item:hover {
    background: #142541 !important;
}

.behavior-item:hover strong {
    color: #d6bd78 !important;
}

/* SERVICES — navy/gold instead of red-dominant emphasis. */
.work {
    background: #f8fafc !important;
}

.work-header h2 span {
    color: #b8923f !important;
}

.work-row {
    border-color: #0b1730 !important;
}

.work-row:hover {
    color: #8b6a27 !important;
}

/* ABOUT / TECH MEETS BEHAVIOR
   Remove the bright yellow background completely. */
.about.about-terminal {
    background:
        radial-gradient(circle at 76% 46%, rgba(184, 146, 63, .10), transparent 34%),
        linear-gradient(135deg, #f4f6f9 0%, #e4e9ef 100%) !important;
    border-top-color: #0b1730 !important;
    border-bottom-color: #0b1730 !important;
}

.about-terminal-heading h2 {
    color: #0b1730 !important;
}

.about-terminal-heading h2 span {
    color: #b8923f !important;
}

.about-monitor {
    background: linear-gradient(145deg, #172238, #09111f 62%, #050a12) !important;
    border-color: #050914 !important;
    box-shadow:
        14px 14px 0 rgba(184, 146, 63, .92),
        0 28px 55px rgba(16, 24, 40, .25) !important;
}

.about-monitor-topbar {
    background: #101b2e !important;
    border-color: #39465a !important;
}

.about-monitor-topbar span {
    background: #aeb7c3 !important;
}

.about-monitor-topbar span:nth-child(1) {
    background: #b8923f !important;
}

.about-monitor-topbar span:nth-child(2) {
    background: #c5ccd6 !important;
}

.about-monitor-topbar span:nth-child(3) {
    background: #748198 !important;
}

.about-monitor-topbar small {
    color: #aeb7c3 !important;
}

.about-monitor-screen {
    background:
        linear-gradient(rgba(214, 189, 120, .025) 1px, transparent 1px),
        #07111f !important;
    border-color: #39465a !important;
    color: #e5eaf0 !important;
    box-shadow: inset 0 0 35px rgba(184, 146, 63, .06) !important;
}

.about-monitor-screen p {
    color: #d5dce6 !important;
}

.about-terminal-command,
.typing-cursor {
    color: #d6bd78 !important;
    background-color: #d6bd78 !important;
}

/* Preserve the mobile monitor shape while changing only its shadow color. */
@media (max-width: 600px) {
    .about-monitor {
        box-shadow:
            7px 7px 0 rgba(184, 146, 63, .92),
            0 20px 36px rgba(16, 24, 40, .20) !important;
    }
}

/* CLIENT REVIEWS — retain the light hero-family blue background,
   but keep all details navy/gold/silver. */
.testimonials-compact {
    background:
        linear-gradient(180deg, #eef5ff 0%, #e9f1fb 100%) !important;
}

.testimonials-compact-header .label {
    color: #8b6a27 !important;
}

.testimonial-compact-card {
    background:
        linear-gradient(145deg, #ffffff 0%, #f6f8fb 100%) !important;
    border-color: rgba(126, 141, 162, .48) !important;
}

.testimonial-compact-card::before {
    background: linear-gradient(
        90deg,
        #b8923f 0%,
        #d6bd78 48%,
        #aeb7c3 100%
    ) !important;
}

.testimonial-compact-number,
.testimonial-compact-mark {
    color: #9b772f !important;
}

.testimonial-compact-monogram {
    border-color: rgba(184, 146, 63, .72) !important;
}

/* Bottom CTA and footer: deepen into the same navy family
   and replace purple-heavy highlights with gold/silver. */
.contact {
    --cta-bg: #07111f !important;
    --cta-panel: rgba(11, 23, 48, .74) !important;
    --cta-line: rgba(184, 146, 63, .18) !important;
    --cta-blue: #b8923f !important;
    --cta-violet: #aeb7c3 !important;
    --cta-text: #f8fafc !important;
    --cta-muted: #b8c0cc !important;
    background:
        radial-gradient(circle at 72% 60%, rgba(184, 146, 63, .13), transparent 30%),
        radial-gradient(circle at 88% 36%, rgba(174, 183, 195, .10), transparent 28%),
        linear-gradient(135deg, #0b1730 0%, #07111f 52%, #040913 100%) !important;
}

.contact .label {
    color: #d6bd78 !important;
}

.contact .label::after {
    background: linear-gradient(90deg, #b8923f, transparent) !important;
}

.contact-highlight {
    color: #d6bd78 !important;
    -webkit-text-fill-color: #d6bd78 !important;
}

.contact-button {
    background: #b8923f !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-color: #b8923f !important;
}

.contact-button:hover {
    background: #d0b266 !important;
    color: #ffffff !important;
    border-color: #d0b266 !important;
}

footer {
    background: #07111f !important;
    color: #f8fafc !important;
}

.footer-label {
    color: #d6bd78 !important;
}

/* =========================================
   BALANCED SITE PALETTE
   Navy / white / gold / silver remain primary.
   Red + blue return as controlled accents.
   No layout, spacing, sizing, or content changes.
   ========================================= */

/* HERO — keep current hero palette; restore the statement dash to black. */
.hero-statement .red-line,
.red-line {
    background: #111111 !important;
}

/* =========================================
   SECTION 02 — WHY TECH BEARD
   Keep the section light; restore blue/red as small accents only.
   ========================================= */

.different-header h2 span {
    color: #2f6bff !important;
}

/* Card 01: navy base with blue detail. */
.care-card-blue .care-number,
.care-card-blue .care-icon {
    color: #78a0ff !important;
}

.care-card-blue strong {
    color: #d6bd78 !important;
}

/* Card 02: silver base; gold remains the main accent. */
.care-card-yellow .care-number,
.care-card-yellow .care-icon,
.care-card-yellow strong {
    color: #8b6a27 !important;
}

/* Card 03: white base with restrained blue detail. */
.care-card-white .care-number,
.care-card-white .care-icon {
    color: #2f6bff !important;
}

.care-card-white strong {
    color: #6f7b8e !important;
}

/* Card 04: warm neutral/gold base with restrained red detail. */
.care-card-red .care-number,
.care-card-red .care-icon {
    color: #b53b3b !important;
}

.care-card-red strong {
    color: #0b1730 !important;
}

/* =========================================
   SECTION 03 — THE PROBLEM
   Dark navy remains the base.
   CLICK AWAY returns to red.
   Numbers alternate gold and blue.
   ========================================= */

.behavior-intro h2 span {
    color: #e24a4a !important;
}

.behavior-item span {
    color: #d6bd78 !important;
}

.behavior-item:nth-child(even) span {
    color: #78a0ff !important;
}

.behavior-item strong {
    color: #d6bd78 !important;
}

.behavior-item:nth-child(2) strong,
.behavior-item:nth-child(4) strong {
    color: #9db8ff !important;
}

/* =========================================
   SECTION 04 — SERVICES
   Keep light background; restore red headline accent.
   Use small blue/gold details in the list.
   ========================================= */

.work-header h2 span {
    color: #d94545 !important;
}

.work-number {
    color: #2f6bff !important;
}

.work-row:nth-child(even) .work-number {
    color: #9a762f !important;
}

.work-arrow {
    color: #9a762f !important;
}

.work-row:nth-child(odd) .work-arrow {
    color: #2f6bff !important;
}

.work-row:hover {
    color: inherit !important;
}

.work-row:hover .work-title h3 {
    color: #0b1730 !important;
}

.work-row:hover .work-arrow {
    transform: translateX(4px);
}

/* =========================================
   SECTION 05 — TECH MEETS BEHAVIOR
   Full makeover: navy section, bright computer,
   controlled red + blue + gold accents.
   ========================================= */

.about.about-terminal {
    background:
        radial-gradient(circle at 82% 24%, rgba(47, 107, 255, .13), transparent 30%),
        radial-gradient(circle at 18% 82%, rgba(184, 146, 63, .09), transparent 28%),
        #0b1730 !important;
    color: #f8fafc !important;
    border-top-color: #243653 !important;
    border-bottom-color: #243653 !important;
}

.about-terminal-heading .label {
    color: #d6bd78 !important;
}

.about-terminal-heading h2 {
    color: #f8fafc !important;
}

.about-terminal-heading .about-behavior-accent {
    color: #e24a4a !important;
}

/* Computer body: nearly black navy with restrained blue edge light. */
.about-monitor {
    background: linear-gradient(145deg, #111d32, #07111f 62%, #040913) !important;
    border-color: #020711 !important;
    box-shadow:
        0 0 0 1px rgba(120, 160, 255, .22),
        0 0 28px rgba(47, 107, 255, .16),
        14px 14px 0 rgba(184, 146, 63, .82),
        0 30px 58px rgba(0, 0, 0, .32) !important;
}

.about-monitor-topbar {
    background: #111d32 !important;
    border-color: #31415b !important;
}

.about-monitor-topbar span:nth-child(1) {
    background: #e24a4a !important;
}

.about-monitor-topbar span:nth-child(2) {
    background: #d6bd78 !important;
}

.about-monitor-topbar span:nth-child(3) {
    background: #78a0ff !important;
}

.about-monitor-topbar small {
    color: #c4ccd8 !important;
}

/* Light screen so it clearly separates from the navy section. */
.about-monitor-screen {
    background:
        linear-gradient(rgba(47, 107, 255, .045) 1px, transparent 1px),
        #eef5ff !important;
    border-color: #aeb7c3 !important;
    color: #13203a !important;
    box-shadow:
        inset 0 0 34px rgba(47, 107, 255, .08),
        0 0 24px rgba(120, 160, 255, .12) !important;
}

.about-monitor-screen p {
    color: #243149 !important;
}

.about-monitor-screen .bold-copy {
    color: #0b1730 !important;
}

.about-terminal-command {
    color: #2f6bff !important;
    background: transparent !important;
}

.typing-cursor {
    background-color: #e24a4a !important;
    color: #e24a4a !important;
}

.about-monitor-neck,
.about-monitor-base,
.about-keyboard {
    background-color: #101b2e !important;
}

.about-keyboard span {
    background: #263750 !important;
    border-color: #41526a !important;
}

/* Preserve the existing mobile geometry; only rebalance its shadow colors. */
@media (max-width: 600px) {
    .about-monitor {
        box-shadow:
            0 0 0 1px rgba(120, 160, 255, .20),
            0 0 22px rgba(47, 107, 255, .12),
            7px 7px 0 rgba(184, 146, 63, .82),
            0 22px 38px rgba(0, 0, 0, .28) !important;
    }
}

/* =========================================
   GLOBAL SMALL ACCENT BALANCE
   Keep gold primary, but allow subtle blue/red cues.
   ========================================= */

.testimonial-compact-number {
    color: #9a762f !important;
}

.testimonial-compact-card:nth-child(2) .testimonial-compact-number {
    color: #2f6bff !important;
}

.testimonial-compact-mark {
    color: #b58b32 !important;
}

.footer-contact a:hover {
    color: #78a0ff !important;
}

/* =========================================
   FINAL SPACING + ACCENT REFINEMENT
   Hero intentionally untouched.
   ========================================= */

/* -----------------------------------------
   SECTION 02 — WHY TECH BEARD
   Tighten vertical footprint without changing typography/content.
   ----------------------------------------- */
.different {
    padding-top: 58px !important;
    padding-bottom: 92px !important;
}

.care-grid {
    margin-top: 62px !important;
    min-height: 720px !important;
    gap: 28px 22px !important;
}

.care-card {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.care-icon {
    margin-top: 34px !important;
}

.care-card h3 {
    margin-top: 24px !important;
}

.care-card p {
    margin-top: 17px !important;
}

.care-card strong {
    padding-top: 26px !important;
}

/* Restore BUILT TO BE DIFFERENT to red.
   04 + star are white; bottom statement stays gold. */
.care-card-red {
    background: #ef3340 !important;
    color: #ffffff !important;
}

.care-card-red .care-number,
.care-card-red .care-icon {
    color: #ffffff !important;
}

.care-card-red h3,
.care-card-red p {
    color: #ffffff !important;
}

.care-card-red strong {
    color: #d6bd78 !important;
}

/* -----------------------------------------
   SECTION 03 — THE PROBLEM
   Shorter scroll, same design and typography.
   ----------------------------------------- */
.behavior-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.behavior-grid {
    margin-top: 38px !important;
}

.behavior-item {
    min-height: 238px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.behavior-item h3 {
    margin-top: 42px !important;
}

.behavior-item strong {
    margin-top: 20px !important;
}

/* -----------------------------------------
   SECTION 04 — SERVICES
   Tighten spacing; all numbers + arrows use one blue.
   ----------------------------------------- */
.work {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.work-header {
    margin-bottom: 52px !important;
}

.work-row {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
}

.work-number,
.work-row:nth-child(even) .work-number {
    color: #2f6bff !important;
}

.work-arrow,
.work-row:nth-child(odd) .work-arrow,
.work-row:nth-child(even) .work-arrow {
    color: #2f6bff !important;
}

.work-header h2 span {
    color: #d94545 !important;
}

/* -----------------------------------------
   SECTION 05 — TECH MEETS BEHAVIOR
   Navy remains. Add real separation between heading and computer,
   while also reducing excess vertical height.
   ----------------------------------------- */
.about.about-terminal {
    min-height: 680px !important;
    padding-top: 56px !important;
    padding-bottom: 64px !important;
    grid-template-columns: minmax(330px, .78fr) minmax(520px, 1.22fr) !important;
    gap: clamp(64px, 7.5vw, 118px) !important;
}

.about-terminal-heading {
    position: relative;
    z-index: 6;
    padding-right: 12px;
}

.about-terminal-heading h2 {
    position: relative;
    z-index: 6;
}

.about-workstation {
    z-index: 2;
    padding-bottom: 92px !important;
}

.about-monitor-screen {
    min-height: 420px !important;
}

/* -----------------------------------------
   SECTION 06 — CLIENT REVIEWS
   Keep the light blue treatment, just reduce dead space.
   ----------------------------------------- */
.testimonials-compact {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
}

.testimonials-compact-header {
    margin-bottom: 28px !important;
}

.testimonial-compact-card {
    min-height: 292px !important;
    padding-top: 27px !important;
    padding-bottom: 24px !important;
}

.testimonial-compact-card blockquote {
    margin-top: 14px !important;
    margin-bottom: 22px !important;
}

.testimonial-compact-author {
    padding-top: 15px !important;
}

/* -----------------------------------------
   FINAL CTA
   Same design/content, reduced vertical footprint.
   !important is used because this page also contains later inline CTA CSS.
   ----------------------------------------- */
.contact {
    padding-top: 48px !important;
    padding-bottom: 88px !important;
}

.contact .label {
    margin-bottom: 24px !important;
}

.contact-intro {
    margin-top: 26px !important;
}

.contact-button {
    margin-top: 30px !important;
}

.contact-visual {
    min-height: 500px !important;
}

/* -----------------------------------------
   RESPONSIVE TIGHTENING
   Hero remains completely untouched.
   ----------------------------------------- */
@media (max-width: 1000px) {
    .about.about-terminal {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    .about-terminal-heading {
        padding-right: 0;
    }
}

@media (max-width: 900px) {
    .different {
        padding-top: 52px !important;
        padding-bottom: 72px !important;
    }

    .care-grid {
        margin-top: 50px !important;
        min-height: 0 !important;
    }

    .behavior-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .work {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .work-header {
        margin-bottom: 42px !important;
    }

    .contact {
        padding-top: 44px !important;
        padding-bottom: 72px !important;
    }

    .contact-visual {
        min-height: 440px !important;
    }
}

@media (max-width: 600px) {
    .different {
        padding-top: 46px !important;
        padding-bottom: 58px !important;
    }

    .care-grid {
        margin-top: 42px !important;
        gap: 24px !important;
    }

    .care-card {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }

    .care-icon {
        margin-top: 28px !important;
    }

    .behavior-section {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .behavior-grid {
        margin-top: 32px !important;
    }

    .behavior-item {
        min-height: 0 !important;
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }

    .behavior-item h3 {
        margin-top: 34px !important;
    }

    .work {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .work-header {
        margin-bottom: 34px !important;
    }

    .work-row {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .about.about-terminal {
        padding-top: 50px !important;
        padding-bottom: 56px !important;
        gap: 32px !important;
    }

    .about-workstation {
        padding-bottom: 78px !important;
    }

    .about-monitor-screen {
        min-height: 0 !important;
    }

    .testimonials-compact {
        padding-top: 50px !important;
        padding-bottom: 54px !important;
    }

    .testimonials-compact-header {
        margin-bottom: 24px !important;
    }

    .testimonial-compact-card {
        min-height: 0 !important;
    }

    .contact {
        padding-top: 42px !important;
        padding-bottom: 62px !important;
    }

    .contact-visual {
        min-height: 340px !important;
    }
}

/* =========================================
   SILVER-GRAY ACCENT REFINEMENT
   Gold becomes rare; hero and layout remain untouched.
   ========================================= */

:root {
    --accent-silver: #aeb7c3;
    --accent-silver-light: #c9d0da;
    --accent-silver-dark: #7f8a9a;
}

/* Small section labels after the hero: silver-gray instead of gold. */
.different .label,
.behavior-section .label,
.work .label,
.about.about-terminal .label,
.testimonials-compact .label,
.contact .label {
    color: var(--accent-silver) !important;
}

/* Keep Section 2 heading accent blue. */
.different-header h2 span {
    color: #2f6bff !important;
}

/* Section 2 — card 02 checkmark + number: silver-gray. */
.care-card-yellow .care-number,
.care-card-yellow .care-icon {
    color: var(--accent-silver-dark) !important;
}

/* Keep the card's supporting line neutral/silver too. */
.care-card-yellow strong {
    color: var(--accent-silver-dark) !important;
}

/* Section 3 — retain red CLICK AWAY and blue/gold behavior accents elsewhere,
   but the section label itself is silver-gray. */
.behavior-intro .label {
    color: var(--accent-silver) !important;
}

/* Section 4 — label silver; numbers/arrows stay blue; USEFUL STUFF stays red. */
.work .label {
    color: var(--accent-silver) !important;
}

/* Section 5 — remove gold from the computer framing/shadow. */
.about-terminal-heading .label {
    color: var(--accent-silver) !important;
}

.about-monitor {
    box-shadow:
        0 0 0 1px rgba(174, 183, 195, .24),
        0 0 24px rgba(120, 160, 255, .14),
        12px 12px 0 rgba(174, 183, 195, .34),
        0 30px 58px rgba(0, 0, 0, .32) !important;
}

.about-monitor-topbar span:nth-child(2) {
    background: var(--accent-silver-light) !important;
}

/* Preserve the red + blue terminal accents. */
.about-monitor-topbar span:nth-child(1) {
    background: #e24a4a !important;
}

.about-monitor-topbar span:nth-child(3) {
    background: #78a0ff !important;
}

@media (max-width: 600px) {
    .about-monitor {
        box-shadow:
            0 0 0 1px rgba(174, 183, 195, .22),
            0 0 20px rgba(120, 160, 255, .12),
            7px 7px 0 rgba(174, 183, 195, .30),
            0 22px 38px rgba(0, 0, 0, .28) !important;
    }
}

/* Section 6 — replace all remaining gold accents with silver-gray. */
.testimonials-compact-header .label {
    color: var(--accent-silver-dark) !important;
}

.testimonial-compact-card::before {
    background: linear-gradient(
        90deg,
        #aeb7c3 0%,
        #d5dae2 48%,
        #8f9aaa 100%
    ) !important;
}

.testimonial-compact-number,
.testimonial-compact-card:nth-child(2) .testimonial-compact-number {
    color: var(--accent-silver-dark) !important;
}

.testimonial-compact-mark {
    color: var(--accent-silver) !important;
}

.testimonial-compact-monogram {
    border-color: rgba(174, 183, 195, .82) !important;
    color: #0b1730 !important;
}

/* =========================================
   CONTRAST + SECTION 05 ALIGNMENT + SECTION 06 REFRESH
   Scoped changes only.
   ========================================= */

/* 1) Improve silver-label contrast.
   Darker gunmetal silver on light sections; lighter silver on dark sections. */
.different .label,
.work .label,
.testimonials-compact .label {
    color: #5f6b7a !important;
}

.behavior-section .label,
.about.about-terminal .label,
.contact .label {
    color: #c2c9d3 !important;
}

/* 2) Section 05 — nudge only BEHAVIOR. left for better optical alignment. */
.about-terminal-heading .about-behavior-accent {
    position: relative;
    left: -7px;
}

/* =========================================
   3) SECTION 06 — CLIENT REVIEWS REFRESH
   Keep pale background, preserve copy, add stronger editorial character.
   ========================================= */

.testimonials-compact {
    position: relative;
    background:
        radial-gradient(circle at 12% 14%, rgba(47, 107, 255, .07), transparent 24%),
        linear-gradient(180deg, #eef5ff 0%, #e9f1fb 100%) !important;
    color: #0b1730 !important;
}

.testimonials-compact-header {
    align-items: end;
}

.testimonials-compact-header h2 {
    color: #0b1730 !important;
    position: relative;
}

.testimonials-compact-header h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 14px;
    background: #ef3340;
}

.testimonials-compact-intro {
    color: #5f6b7a !important;
}

/* Open editorial treatment: stronger top line, no generic soft-card feel. */
.testimonial-compact-grid {
    position: relative;
    gap: 28px;
}

.testimonial-compact-card {
    position: relative;
    min-height: 300px !important;
    padding: 30px 30px 26px !important;
    background: rgba(255, 255, 255, .72) !important;
    border: 0 !important;
    border-top: 2px solid #0b1730 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

/* Remove the old metallic strip. */
.testimonial-compact-card::before {
    content: none !important;
    display: none !important;
}

/* Strong editorial quote marks. */
.testimonial-compact-mark {
    position: relative;
    top: -2px;
    color: #2f6bff !important;
    font-size: 72px !important;
    line-height: .7 !important;
    opacity: .95;
}

/* Alternate one restrained red accent so the section echoes the hero palette. */
.testimonial-compact-card:nth-child(2) .testimonial-compact-mark {
    color: #ef3340 !important;
}

.testimonial-compact-number,
.testimonial-compact-card:nth-child(2) .testimonial-compact-number {
    color: #6b7686 !important;
}

.testimonial-compact-card blockquote {
    max-width: 92%;
    margin: 16px 0 26px !important;
    color: #14213a !important;
    font-size: clamp(1.16rem, 1.55vw, 1.42rem) !important;
    line-height: 1.48 !important;
    font-weight: 600 !important;
    letter-spacing: -.25px;
}

.testimonial-compact-author {
    border-top: 1px solid rgba(11, 23, 48, .18) !important;
    padding-top: 16px !important;
}

.testimonial-compact-monogram {
    border: 1px solid #7d8897 !important;
    background: #f8fafc !important;
    color: #0b1730 !important;
    box-shadow: none !important;
}

.testimonial-compact-author strong {
    color: #0b1730 !important;
}

.testimonial-compact-author span {
    color: #667282 !important;
}

/* Give the two columns a little visual separation without boxing them in. */
.testimonial-compact-card:first-child {
    padding-right: 42px !important;
}

.testimonial-compact-card:nth-child(2) {
    padding-left: 42px !important;
}

.testimonial-compact-card:nth-child(2)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: rgba(11, 23, 48, .18);
}

@media (max-width: 900px) {
    .testimonial-compact-card:first-child,
    .testimonial-compact-card:nth-child(2) {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .testimonial-compact-card:nth-child(2)::after {
        content: none;
        display: none;
    }

    .testimonial-compact-card {
        border-top: 2px solid #0b1730 !important;
    }
}

@media (max-width: 600px) {
    .about-terminal-heading .about-behavior-accent {
        left: -4px;
    }

    .testimonial-compact-card {
        min-height: 0 !important;
        padding: 26px 24px 24px !important;
    }

    .testimonial-compact-card blockquote {
        max-width: 100%;
        font-size: 1.08rem !important;
    }

    .testimonial-compact-mark {
        font-size: 62px !important;
    }
}

/* =========================================
   SECTION 06 — FULL REVIEW CARD OUTLINE
   Same layout/content; replace top-only rule with full dark outline.
   ========================================= */
.testimonial-compact-card {
    border: 2px solid #0b1730 !important;
    border-top: 2px solid #0b1730 !important;
}

/* =========================================
   FAQ PAGE — SILVER / BLUE REFINEMENT
   Scoped to FAQ only.
   ========================================= */

/* 1) FAQ hero label:
   match the readable muted gunmetal-gray labels used on light homepage sections. */
.faq-hero .label {
    color: #5f6b7a !important;
}

/* 2) "01 / NEED TO KNOW" side card:
   remove yellow and use a quiet light silver / blue-gray treatment. */
.faq-side-card {
    background:
        linear-gradient(145deg, #f4f7fb 0%, #e6ebf2 100%) !important;
    color: #0b1730 !important;
    border-color: #0b1730 !important;
    box-shadow: 8px 8px 0 rgba(11, 23, 48, .92) !important;
}

.faq-side-number {
    color: #5f6b7a !important;
}

.faq-side-card h2 {
    color: #0b1730 !important;
}

.faq-side-card p {
    color: #4f5b6b !important;
}

.faq-side-button {
    background: #0b1730 !important;
    color: #ffffff !important;
    border-color: #0b1730 !important;
    box-shadow: 5px 5px 0 #2f6bff !important;
}

.faq-side-button:hover {
    box-shadow: 3px 3px 0 #2f6bff !important;
}

/* 3) Bottom "STILL WONDERING?" CTA:
   keep navy tech character, but make the section substantially shorter
   and remove every yellow/gold accent. */
.faq-cta {
    margin-top: 58px !important;
    padding: 40px 48px !important;
    background:
        radial-gradient(circle at 16% 18%, rgba(62, 125, 255, 0.16), transparent 24%),
        radial-gradient(circle at 88% 78%, rgba(174, 183, 195, 0.10), transparent 27%),
        linear-gradient(135deg, #07182f 0%, #0a2142 52%, #0c2a50 100%) !important;
    color: #ffffff !important;
    border-color: #0b1730 !important;
    box-shadow: 10px 10px 0 rgba(11, 23, 48, .94) !important;
}

.faq-cta-content::before {
    inset: -18px -28px !important;
}

.faq-cta .label {
    color: #c2c9d3 !important;
}

.faq-cta h2 {
    max-width: 780px !important;
    font-size: clamp(2.65rem, 5.1vw, 5rem) !important;
    line-height: .9 !important;
}

.faq-cta h2 span {
    color: #2f6bff !important;
}

.faq-cta p {
    margin-top: 18px !important;
    color: #e3e8ef !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

.faq-cta .faq-contact-button {
    margin-top: 24px !important;
    background: #276aff !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-color: #276aff !important;
    box-shadow: 5px 5px 0 #aeb7c3 !important;
}

.faq-cta .faq-contact-button:hover {
    background: #3d79ff !important;
    border-color: #3d79ff !important;
    color: #ffffff !important;
    box-shadow: 3px 3px 0 #aeb7c3 !important;
}

/* Change the lower tech-art accents away from gold/yellow as well. */
.faq-tech-art .tech-orbits {
    stroke: rgba(201, 208, 218, .22) !important;
}

.faq-tech-art .tech-signals {
    stroke: rgba(120, 160, 255, .48) !important;
}

.faq-tech-art .tech-dots {
    fill: rgba(201, 208, 218, .92) !important;
    filter: drop-shadow(0 0 7px rgba(120, 160, 255, .34)) !important;
}

.faq-tech-art .tech-dot-field {
    fill: rgba(201, 208, 218, .38) !important;
}

.faq-tech-art .tech-marks {
    stroke: rgba(201, 208, 218, .34) !important;
}

@media (max-width: 768px) {
    .faq-cta {
        margin-top: 46px !important;
        padding: 34px 28px !important;
    }

    .faq-cta-content::before {
        inset: -14px -16px !important;
    }

    .faq-cta h2 {
        font-size: clamp(2.45rem, 11vw, 4rem) !important;
    }
}

/* =========================================
   CONTACT PAGE — REFINED CONTACT DETAILS
   Scoped to the contact page only.
   ========================================= */

/* 1) LET'S TALK — use the same readable muted gray used elsewhere. */
.contact-page-header .label {
    color: #5f6b7a !important;
}

/* 2) 01 / START HERE — match the finished FAQ silver / blue-gray card. */
.contact-info-card {
    background:
        linear-gradient(145deg, #f4f7fb 0%, #e6ebf2 100%) !important;
    color: #0b1730 !important;
    border-color: #0b1730 !important;
    box-shadow: 8px 8px 0 rgba(11, 23, 48, .92) !important;
}

.contact-info-number {
    color: #5f6b7a !important;
}

.contact-info-card h2 {
    color: #0b1730 !important;
}

.contact-info-card p {
    color: #4f5b6b !important;
}

.contact-info-card strong {
    color: #0b1730 !important;
}

/* 3) Quick contact strip — stronger structure, restrained brand accents. */
.contact-quick-info {
    background: rgba(255, 255, 255, .62) !important;
    border: 1px solid rgba(11, 23, 48, .24) !important;
    box-shadow: 0 10px 26px rgba(11, 23, 48, .05);
}

.contact-quick-item {
    position: relative;
    background: transparent;
}

.contact-quick-item + .contact-quick-item {
    border-left-color: rgba(11, 23, 48, .18) !important;
}

.contact-quick-icon {
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 6px;
    font-weight: 700;
}

/* Phone: blue accent. */
.contact-quick-item:nth-child(1) .contact-quick-icon {
    color: #2f6bff !important;
    border-color: rgba(47, 107, 255, .48) !important;
    background: rgba(47, 107, 255, .07) !important;
}

/* Email: restrained red accent. */
.contact-quick-item:nth-child(2) .contact-quick-icon {
    color: #d94545 !important;
    border-color: rgba(217, 69, 69, .42) !important;
    background: rgba(217, 69, 69, .06) !important;
}

/* Hours: quiet silver/navy accent. */
.contact-quick-item:nth-child(3) .contact-quick-icon {
    color: #5f6b7a !important;
    border-color: rgba(95, 107, 122, .42) !important;
    background: rgba(174, 183, 195, .12) !important;
}

.contact-quick-label {
    color: #667282 !important;
    opacity: 1 !important;
}

.contact-quick-value,
.contact-quick-item a {
    color: #0b1730 !important;
}

.contact-quick-item a:hover {
    color: #2f6bff !important;
}

@media (max-width: 900px) {
    .contact-quick-item + .contact-quick-item {
        border-left: none !important;
        border-top: 1px solid rgba(11, 23, 48, .18) !important;
    }
}

/* =========================================
   PORTFOLIO PAGE — FINAL REFINEMENT
   Scoped to the projects page only.
   ========================================= */

/* Top and bottom labels: same readable muted silver-gray as other pages. */
.portfolio-hero .label,
.portfolio-cta .label {
    color: #5f6b7a !important;
}

/* Bring the projects title up to the visual scale of the FAQ/contact headings. */
.portfolio-hero h1 {
    max-width: 900px !important;
    font-size: clamp(3.35rem, 5.35vw, 5.85rem) !important;
    line-height: .88 !important;
    letter-spacing: -0.055em !important;
}

/* With the separate Human-Focused blocks removed, tighten each project row. */
.portfolio-project {
    padding-top: clamp(42px, 5.6vw, 72px) !important;
    padding-bottom: clamp(42px, 5.6vw, 72px) !important;
}

.portfolio-projects {
    gap: 0 !important;
}

.portfolio-human-solution {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

.portfolio-human-solution strong {
    display: block;
    margin-bottom: 7px;
    color: #0b1730;
    font-family: "DM Mono", monospace;
    font-size: .74rem;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Center and tighten the final CTA. */
.portfolio-cta {
    margin-top: 54px !important;
    padding-top: 46px !important;
    padding-bottom: 28px !important;
    text-align: center !important;
}

.portfolio-cta .label {
    margin-left: auto !important;
    margin-right: auto !important;
}

.portfolio-cta h2 {
    margin: 14px auto 16px !important;
}

.portfolio-cta > p:not(.label) {
    max-width: 650px !important;
    margin: 0 auto 24px !important;
}

.portfolio-contact-button {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 800px) {
    .portfolio-hero h1 {
        font-size: clamp(3rem, 10.5vw, 4.9rem) !important;
    }

    .portfolio-project {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    .portfolio-cta {
        margin-top: 42px !important;
        padding-top: 40px !important;
        padding-bottom: 24px !important;
    }
}

@media (max-width: 600px) {
    .portfolio-hero h1 {
        font-size: clamp(2.75rem, 13vw, 4rem) !important;
    }

    .portfolio-project {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }

    .portfolio-cta {
        margin-top: 34px !important;
        padding-top: 34px !important;
        padding-bottom: 18px !important;
    }
}

/* =========================================
   SHARED PILL BUTTONS
   Every primary action button matches.
   Icon-only controls (hamburger, sliders) stay circular.
   ========================================= */
.nav-button,
.mobile-chat-button,
.hero-cta,
.contact-button,
.faq-side-button,
.faq-contact-button,
.portfolio-contact-button,
.form-submit {
    border-radius: 999px !important;
}

.nav-button,
.hero-cta,
.contact-button,
.faq-contact-button,
.portfolio-contact-button,
.form-submit {
    color: #ffffff !important;
    font-weight: 700 !important;
}