:root{--bg:#f8fafc;--white:#fff;--primary:#0f172a;--secondary:#475569;--accent:#0ea5e9;--border:#e2e8f0;--light:#f1f5f9;--gradient:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%);--shadow:0 20px 60px rgba(15,23,42,.07)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Montserrat,system-ui,sans-serif;background:var(--bg);color:var(--primary);line-height:1.7;overflow-x:hidden}img{max-width:100%;display:block}.container{width:min(1400px,92%);margin:0 auto}
header{position:fixed;inset:0 0 auto 0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,232,240,.75)}.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:2rem}.logo-wrapper{display:flex;align-items:center;gap:2.4rem;text-decoration:none;flex-shrink:0}.logo{color:var(--accent);font-size:1.65rem;font-weight:900;letter-spacing:.6px;white-space:nowrap;line-height:1}.logo span{color:var(--primary)}.logo-subtitle{color:var(--secondary);font-size:.84rem;font-weight:600;letter-spacing:.2px;white-space:nowrap;position:relative;padding-left:2.2rem}.logo-subtitle:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:2.2rem;background:linear-gradient(to bottom,transparent,rgba(148,163,184,.65),transparent)}
nav{display:flex;align-items:center;gap:1.8rem}nav a{text-decoration:none;color:var(--secondary);font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.9px;position:relative}nav a:after{content:"";position:absolute;left:0;bottom:-.45rem;width:0;height:2px;background:var(--gradient);transition:width .25s}nav a:hover,nav a.active{color:var(--primary)}nav a:hover:after,nav a.active:after{width:100%}.mobile-btn{display:none;border:0;background:transparent;color:var(--primary);font-size:1.8rem;cursor:pointer}
.hero,.sub-hero{position:relative;color:var(--white);background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--primary)}.hero:before,.sub-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.88) 0%,rgba(15,23,42,.73) 50%,rgba(15,23,42,.55) 100%)}.hero>.container,.sub-hero>.container{position:relative;z-index:2}.hero{min-height:100vh;display:flex;align-items:center;padding:9rem 0 6rem}.sub-hero{min-height:560px;display:flex;align-items:center;padding:12rem 0 7rem}.hero-home{background-image:url("../bilder/startseite.jpg")}.hero-service{background-image:url("../bilder/service.jpg")}.hero-about{background-image:url("../bilder/ueber-uns.jpg")}.hero-references{background-image:url("../bilder/referenzen.jpg")}.hero-contact{background-image:url("../bilder/kontakt.jpg")}
.hero-content{max-width:920px}.eyebrow,.hero-badge{display:inline-flex;color:#7dd3fc;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.32);border-radius:999px;padding:.72rem 1.15rem;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:2rem}.hero h1,.sub-hero h1{font-size:clamp(2.7rem,6vw,5.3rem);line-height:1.04;letter-spacing:-3px;font-weight:900;margin-bottom:1.6rem;max-width:980px}.hero p,.sub-hero p{color:#cbd5e1;font-size:1.18rem;max-width:790px;margin-bottom:2.4rem}.hero-tech{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:3rem}.hero-tech span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);padding:.72rem .95rem;border-radius:8px;font-size:.88rem;font-weight:700}
section{padding:7rem 0}.section-white{background:var(--white)}.section-dark{background:var(--primary);color:var(--white)}.section-title{max-width:850px;margin-bottom:4rem}.section-title span{color:var(--accent);font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:2px;display:inline-block;margin-bottom:1rem}.section-title h2{font-size:clamp(2.1rem,4vw,3.65rem);line-height:1.1;letter-spacing:-2px;margin-bottom:1.2rem}.section-title p{color:var(--secondary);font-size:1.08rem}.section-dark p{color:#cbd5e1}
.actions{display:flex;flex-wrap:wrap;gap:1rem}.btn-primary,.btn-secondary{min-height:52px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:7px;padding:.95rem 1.65rem;font-weight:800;transition:.25s}.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 14px 32px rgba(14,165,233,.28)}.btn-primary:hover{transform:translateY(-3px)}.btn-secondary{color:#fff;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.trust-bar{position:relative;z-index:5;margin-top:-4rem;padding:0}.trust-grid,.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}.trust-grid{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:2rem}.trust-item{color:var(--secondary);font-size:.95rem}.trust-item strong{display:block;color:var(--primary);font-size:1.08rem;margin-bottom:.35rem}
.grid-2,.grid-3,.grid-4{display:grid;gap:2rem}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.project-card,.reference-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:2.5rem;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.25s}.card:before,.project-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:var(--gradient)}.card:hover,.project-card:hover,.reference-card:hover{transform:translateY(-6px);box-shadow:0 24px 62px rgba(15,23,42,.1)}.card h3,.project-card h3,.reference-card h3{font-size:1.32rem;margin-bottom:.95rem}.card p,.card li,.project-card p,.reference-card p{color:var(--secondary)}.card ul{padding-left:1.2rem}
.icon{width:58px;height:58px;border-radius:13px;background:rgba(14,165,233,.1);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.icon svg{width:29px;height:29px;stroke-width:1.8}.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.tech-item{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:1.3rem 1rem;text-align:center;font-weight:800}
.tag{display:inline-block;background:rgba(14,165,233,.1);color:var(--accent);padding:.48rem .8rem;border-radius:999px;font-size:.75rem;font-weight:900;text-transform:uppercase;margin-bottom:1rem}.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.65rem;padding-left:0!important;margin-top:1.4rem}.chips li{background:var(--light);color:var(--secondary);border-radius:7px;padding:.48rem .75rem;font-size:.83rem;font-weight:800}
.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.reference-card{min-height:330px;display:flex;flex-direction:column;justify-content:space-between}.reference-logo{height:86px;display:flex;align-items:center;margin-bottom:2rem}.reference-logo img{max-width:280px;max-height:86px;object-fit:contain}.bosch-wordmark{font-size:2.6rem;font-weight:900;letter-spacing:-1.2px;color:#e20015;line-height:1}.bms-wordmark{display:flex;flex-direction:column;gap:.35rem}.bms-wordmark .bosch{font-size:2.2rem;font-weight:900;letter-spacing:-1.1px;color:#e20015;line-height:1}.bms-wordmark .subline{color:var(--primary);font-size:1rem;font-weight:800}.reference-link{color:var(--accent);text-decoration:none;font-weight:800;margin-top:1rem}
.stat-box{text-align:center}.stat-box h3{color:var(--accent);font-size:clamp(2.8rem,5vw,4rem);line-height:1;margin-bottom:.75rem}.stat-box p{color:#cbd5e1;text-transform:uppercase;letter-spacing:2px;font-size:.82rem;font-weight:900}.info-box{background:var(--primary);color:#fff;border-radius:20px;padding:3rem;box-shadow:var(--shadow)}.info-box p,.info-box a{color:#cbd5e1}.info-box a{text-decoration:none}.info-row{padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.info-row:last-child{border-bottom:0}.info-row strong{display:block;color:#fff;margin-bottom:.35rem}
.cta{text-align:center}.cta-box{background:#fff;border:1px solid var(--border);border-radius:22px;padding:5rem 3rem;box-shadow:var(--shadow)}.cta-box h2{font-size:clamp(2.1rem,4vw,3.7rem);line-height:1.1;letter-spacing:-2px;margin-bottom:1.2rem}.cta-box p{color:var(--secondary);max-width:720px;margin:0 auto 2rem;font-size:1.08rem}
footer{background:var(--primary);color:#fff;padding:6rem 0 2rem}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}.footer-col h4{font-size:.88rem;font-weight:900;text-transform:uppercase;letter-spacing:1.3px;margin-bottom:1.4rem}.footer-col p,.footer-col a{color:#94a3b8;text-decoration:none;display:block;margin-bottom:.75rem}.footer-bottom{color:#94a3b8;text-align:center;border-top:1px solid rgba(255,255,255,.08);padding-top:2rem;font-size:.9rem}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.reveal.active{opacity:1;transform:translateY(0)}
@media(max-width:1200px){.logo-subtitle{display:none}.reference-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:1000px){.grid-3,.grid-4,.trust-grid,.tech-grid,.stats-grid,.footer-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}@media(max-width:950px){.reference-grid{grid-template-columns:1fr}}@media(max-width:768px){.header-inner{min-height:76px}nav{position:fixed;top:76px;left:-100%;width:100%;height:calc(100vh - 76px);background:#fff;flex-direction:column;align-items:flex-start;padding:3rem 6%;transition:left .25s;border-top:1px solid var(--border)}nav.active{left:0}.mobile-btn{display:block}.sub-hero{min-height:430px;padding:10rem 0 5rem}.hero h1,.sub-hero h1{letter-spacing:-1.5px}.actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%}section{padding:5rem 0}.trust-grid,.grid-3,.grid-4,.tech-grid,.stats-grid,.footer-grid{grid-template-columns:1fr}.trust-bar{margin-top:0;padding-top:2rem}.cta-box,.info-box,.card,.project-card,.reference-card{padding:2.2rem}}

/* FINAL FIX: Balken bei Karten nur beim Hover anzeigen */
.card::before,
.project-card::before {
    opacity: 0 !important;
    transition: opacity .25s ease !important;
}

.card:hover::before,
.project-card:hover::before {
    opacity: 1 !important;
}

/* FINAL FIX: Referenzkarten komplett klickbar */
.reference-card {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}

.reference-card h3,
.reference-card p {
    color: inherit;
}

.reference-card p {
    color: var(--secondary) !important;
}


/* FINAL FIX V4: Referenzen als gleich hohe Karten inkl. Anfrage-Karte */
.reference-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

.reference-grid > article {
    display: flex !important;
}

.reference-card {
    width: 100% !important;
    min-height: 360px !important;
    height: 100% !important;
}

.reference-card.reference-cta {
    background: var(--primary) !important;
    color: var(--white) !important;
    border-color: rgba(255,255,255,.08) !important;
}

.reference-card.reference-cta h3 {
    color: var(--white) !important;
}

.reference-card.reference-cta p {
    color: #cbd5e1 !important;
}

.reference-card.reference-cta .reference-logo {
    color: var(--accent) !important;
}

.reference-card.reference-cta .cta-arrow {
    color: var(--white);
    font-weight: 900;
    margin-top: 1.5rem;
    display: inline-flex;
}

@media (max-width: 1200px) {
    .reference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .reference-grid {
        grid-template-columns: 1fr !important;
    }
}


/* LANGUAGE SWITCHER */
.language-switcher {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-left: .5rem;
}

.language-switcher a {
    text-decoration: none;
    color: var(--secondary);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .8px;
    padding: .35rem .45rem;
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
}

.language-switcher a:hover,
.language-switcher a.active-lang {
    background: rgba(14,165,233,.1);
    color: var(--accent);
}

@media (max-width: 768px) {
    .language-switcher {
        position: fixed;
        right: 5.5rem;
        top: 1.55rem;
        z-index: 1001;
        margin-left: 0;
    }

    .language-switcher a {
        font-size: .75rem;
        padding: .25rem .35rem;
    }
}

.legal-card h2 { margin-top: 2rem; margin-bottom: .9rem; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card h3 { margin-top: 1.5rem; margin-bottom: .6rem; }
.legal-card p { margin-bottom: 1rem; }
.legal-card a { color: var(--accent); font-weight: 700; text-decoration: none; }
.legal-note { color: var(--secondary); font-size: .95rem; margin-top: 2rem; }





/* ==================================================
   CLEAN FINAL: FIXED HEADER + MAIN-ONLY SLIDE
   ================================================== */

/* Important: body/html must never be transformed,
   otherwise fixed headers stop behaving like viewport-fixed elements. */
html,
body {
    transform: none !important;
    opacity: 1 !important;
}

header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important;
}

/* Only the page content slides, never the header. */
main {
    opacity: 0;
    transform: translateX(0);
    transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

main.slide-ready {
    opacity: 1;
    transform: translateX(0);
}

main.slide-enter-from-right {
    opacity: 0;
    transform: translateX(42px);
}

main.slide-enter-from-left {
    opacity: 0;
    transform: translateX(-42px);
}

main.slide-exit-left {
    opacity: 0;
    transform: translateX(-42px);
}

main.slide-exit-right {
    opacity: 0;
    transform: translateX(42px);
}

@media (max-width: 768px) {
    nav {
        top: 76px !important;
        z-index: 99998 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    main,
    main.slide-ready,
    main.slide-enter-from-right,
    main.slide-enter-from-left,
    main.slide-exit-left,
    main.slide-exit-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==================================================
   ANDROID MOBILE VIEWPORT FIX
   ================================================== */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    position: relative;
}

/* Prevent any section from becoming wider than the viewport */
header,
main,
footer,
section,
.container,
.hero,
.sub-hero,
.hero-content,
.header-inner {
    max-width: 100% !important;
}

/* Fixed header must use percentage width, not 100vw */
header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Avoid translated main content creating horizontal overflow */
main {
    max-width: 100% !important;
    overflow-x: clip;
}

/* Long hero headlines must wrap safely on narrow Android screens */
.hero h1,
.sub-hero h1 {
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
}

/* Mobile hero content should never exceed screen width */
@media (max-width: 768px) {
    .container {
        width: min(100% - 32px, 1400px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero,
    .sub-hero {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero h1,
    .sub-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.4rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -1.2px !important;
    }

    .hero p,
    .sub-hero p {
        max-width: 100% !important;
    }

    .hero-tech {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-tech span {
        max-width: 100%;
        white-space: normal;
    }

    .actions {
        width: 100%;
    }
}














/* ==================================================
   FINAL MOBILE MENU CSS - CONTENT WIDTH RIGHT DRAWER
   ================================================== */
@media (max-width: 768px) {
    header {
        overflow: visible !important;
    }

    #nav {
        position: fixed !important;
        top: 76px !important;
        left: auto !important;
        right: 0 !important;

        /* Width follows menu text length instead of using a fixed large drawer */
        width: max-content !important;
        min-width: 220px !important;
        max-width: calc(100% - 56px) !important;

        height: auto !important;
        max-height: calc(100dvh - 96px) !important;

        background: rgba(255, 255, 255, 0.98) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        backdrop-filter: blur(14px) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .65rem !important;
        padding: 1.35rem !important;

        z-index: 99998 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        transform: translateX(calc(100% + 18px)) !important;
        transition: transform .28s cubic-bezier(.22, .61, .36, 1) !important;

        border: 1px solid var(--border) !important;
        border-right: 0 !important;
        border-radius: 16px 0 0 16px !important;
        box-shadow: -18px 18px 45px rgba(15, 23, 42, .16) !important;

        pointer-events: none !important;
    }

    #nav.active {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    #nav a {
        white-space: nowrap !important;
        display: block !important;
        padding: .65rem .75rem !important;
        border-radius: 8px !important;
    }

    #nav a:hover,
    #nav a.active {
        background: rgba(14, 165, 233, .08) !important;
    }

    .mobile-btn,
    #menuBtn {
        display: block !important;
        position: relative !important;
        z-index: 100000 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    body.menu-open {
        overflow-x: hidden !important;
    }

    body.menu-open::after {
        content: "";
        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, .18);
        z-index: 99997;
        pointer-events: none;
    }
}


/* ==================================================
   MOBILE VISUAL FIX: BADGE + TYPOGRAPHY
   ================================================== */

/* Hero badge: less rounded, cleaner, same light feel as header */
.hero-badge,
.eyebrow {
    border-radius: 10px !important;
}

@media (max-width: 768px) {
    .hero-badge {
        background: rgba(255, 255, 255, 0.94) !important;
        color: var(--accent) !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
        border-radius: 8px !important;
        padding: .85rem 1rem !important;
        line-height: 1.45 !important;
        letter-spacing: 1.5px !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    /* Keep the German headline readable without harsh word cuts */
    .hero h1,
    .sub-hero h1 {
        font-size: clamp(2.05rem, 9.6vw, 3rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.8px !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }

    .hero p,
    .sub-hero p {
        font-size: 1.03rem !important;
        line-height: 1.75 !important;
    }

    .hero {
        padding-top: 8.5rem !important;
        padding-bottom: 4.5rem !important;
        min-height: auto !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .hero-tech {
        gap: .7rem !important;
    }

    .hero-tech span {
        font-size: .86rem !important;
        padding: .62rem .78rem !important;
    }
}

@media (max-width: 380px) {
    .hero h1,
    .sub-hero h1 {
        font-size: clamp(1.9rem, 8.8vw, 2.45rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.5px !important;
    }

    .hero-badge {
        font-size: .68rem !important;
        letter-spacing: 1.2px !important;
    }
}


/* ==================================================
   MOBILE ZOOM-OUT + SQUARE MENU
   ================================================== */
@media (max-width: 768px) {
    #nav {
        background: rgba(255, 255, 255, 0.96) !important;
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        box-shadow: -18px 12px 40px rgba(15, 23, 42, .12) !important;
    }

    #nav a {
        border-radius: 0 !important;
    }

    .hero-badge {
        border-radius: 4px !important;
    }

    .hero h1,
    .sub-hero h1 {
        font-size: clamp(1.55rem, 6.2vw, 2.15rem) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.4px !important;
    }

    .hero p,
    .sub-hero p {
        font-size: 0.94rem !important;
        line-height: 1.65 !important;
    }

    .hero-tech span {
        font-size: 0.78rem !important;
        padding: 0.5rem 0.65rem !important;
    }

    .actions .btn {
        font-size: 0.95rem !important;
        padding: 0.95rem 1.35rem !important;
    }

    .hero {
        padding-top: 8rem !important;
        padding-bottom: 4rem !important;
    }
}

@media (max-width: 380px) {
    .hero h1,
    .sub-hero h1 {
        font-size: clamp(1.4rem, 5.8vw, 1.95rem) !important;
    }

    .hero p,
    .sub-hero p {
        font-size: 0.9rem !important;
    }
}



/* ==================================================
   MOBILE RELAXED LAYOUT FIX
   More breathing room instead of cramped mobile zoom feel
   ================================================== */
@media (max-width: 768px) {
    .container {
        width: calc(100% - 44px) !important;
        max-width: calc(100% - 44px) !important;
    }

    .hero {
        min-height: auto !important;
        padding-top: 8.25rem !important;
        padding-bottom: 4.5rem !important;
        align-items: flex-start !important;
        background-position: center top !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .hero-badge {
        font-size: .66rem !important;
        line-height: 1.45 !important;
        letter-spacing: 1.15px !important;
        padding: .7rem .78rem !important;
        margin-bottom: 1.75rem !important;
        max-width: 100% !important;
        width: auto !important;
    }

    .hero h1 {
        font-size: clamp(1.72rem, 7.2vw, 2.35rem) !important;
        line-height: 1.17 !important;
        letter-spacing: -0.35px !important;
        max-width: 11.5em !important;
        margin-bottom: 1.45rem !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto !important;
    }

    .sub-hero h1 {
        font-size: clamp(1.8rem, 7.4vw, 2.45rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.35px !important;
    }

    .hero p,
    .sub-hero p {
        font-size: .95rem !important;
        line-height: 1.72 !important;
        max-width: 31em !important;
        margin-bottom: 2rem !important;
    }

    .hero-tech {
        gap: .65rem !important;
        margin-bottom: 2.2rem !important;
        max-width: 100% !important;
    }

    .hero-tech span {
        font-size: .76rem !important;
        line-height: 1.2 !important;
        padding: .55rem .68rem !important;
        border-radius: 7px !important;
    }

    .actions {
        gap: .85rem !important;
        max-width: 100% !important;
    }

    .btn-primary,
    .btn-secondary {
        min-height: 48px !important;
        font-size: .92rem !important;
        padding: .85rem 1rem !important;
    }
}

/* Very narrow Android screens */
@media (max-width: 390px) {
    .container {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
    }

    .hero h1 {
        font-size: clamp(1.55rem, 6.7vw, 2.05rem) !important;
        max-width: 11.2em !important;
    }

    .hero p {
        font-size: .9rem !important;
        line-height: 1.68 !important;
    }

    .hero-badge {
        font-size: .62rem !important;
        letter-spacing: 1px !important;
    }
}



/* ==================================================
   CONTACT PAGE MOBILE ALIGNMENT FIX
   ================================================== */
@media (max-width: 768px) {
    /* Contact page content grids must be centered and single-column */
    body:has(.hero-contact) main section .grid-2,
    main section .grid-2 {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-items: stretch !important;
        align-items: start !important;
    }

    body:has(.hero-contact) .card,
    body:has(.hero-contact) .info-box {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.hero-contact) .section-title {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.hero-contact) .container {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.hero-contact) .info-box {
        padding: 2rem !important;
    }
}

/* Fallback for browsers without :has support */
@media (max-width: 768px) {
    .hero-contact ~ section .grid-2 {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-contact ~ section .card,
    .hero-contact ~ section .info-box,
    .hero-contact ~ section .section-title {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ==================================================
   CONTACT PAGE MOBILE SPACING FIX
   ================================================== */
@media (max-width: 768px) {
    body:has(.hero-contact) main > section:not(.sub-hero):not(.hero) > .container,
    .hero-contact ~ section > .container {
        width: calc(100% - 44px) !important;
        max-width: calc(100% - 44px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body:has(.hero-contact) .grid-2,
    .hero-contact ~ section .grid-2 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 2rem !important;
    }

    body:has(.hero-contact) .card,
    body:has(.hero-contact) .info-box,
    .hero-contact ~ section .card,
    .hero-contact ~ section .info-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 390px) {
    body:has(.hero-contact) main > section:not(.sub-hero):not(.hero) > .container,
    .hero-contact ~ section > .container {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
    }
}

/* ==================================================
   CONFIDENTIAL REFERENCES - NEUTRAL ICONS
   ================================================== */
.neutral-ref-icon{width:64px;height:64px;border-radius:12px;background:rgba(14,165,233,.10);color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.neutral-ref-icon svg{width:34px;height:34px;stroke-width:1.8}
.reference-card:not(a){cursor:default!important}


/* ==================================================
   REFERENCES TEXT FIT FIX
   ================================================== */
.reference-card h3 {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
}

.reference-card p {
    hyphens: auto !important;
}

@media (min-width: 951px) {
    .reference-card {
        padding: 2.45rem !important;
    }

    .reference-card h3 {
        font-size: 1.22rem !important;
        line-height: 1.42 !important;
    }

    .reference-card p {
        font-size: .95rem !important;
        line-height: 1.72 !important;
    }
}