@charset "UTF-8";
/* QR Tinting — Hessen-inspired layout, with the requested blue brand accent. */
:root{
    --bg:#fff;
    --text:#12151a;
    --muted:#666d78;
    --line:#e1e3e7;
    --blue:#286bef;
    --soft:#f3f4f6;
    color-scheme:light
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:25px
}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.85 Tahoma,Arial,sans-serif
}
a{
    color:inherit;
    text-decoration:none
}
button,input,select,textarea{
    font:inherit
}
button,a,input,select,textarea{
    -webkit-tap-highlight-color:transparent
}
button{
    cursor:pointer
}
img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover
}
[hidden]{
    display:none!important
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid #568aff;
    outline-offset:5px
}
.wrap{
    width:min(1080px,86%);
    margin-inline:auto
}
.skip{
    position:fixed;
    top:-100px;
    right:20px;
    background:var(--blue);
    color:#fff;
    padding:10px;
    z-index:30
}
.skip:focus{
    top:10px
}
/* Compact centered identity and outlined controls over the dark hero. */
.header{
    position:absolute;
    top:0;
    left:7%;
    right:7%;
    width:auto;
    height:100px;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff
}
.brand{
    display:flex;
    align-items:center;
    gap:12px
}
.brand b{
    font:italic 900 40px/1 Arial;
    letter-spacing:-4px
}
.brand b span{
    color:#6498ff
}
.brand small{
    font:700 11px Arial;
    letter-spacing:3px
}
.header>.brand{
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}
.menu-toggle,.nav-cta{
    border:1px solid #ffffff5c;
    border-radius:24px;
    color:white;
    background:transparent;
    font-size:13px;
    padding:8px 18px;
    line-height:1.5
}
.menu-toggle{
    display:flex;
    gap:10px;
    align-items:center
}
.nav-cta{
    margin-right:auto
}
.nav-cta span{
    margin-right:12px;
    color:#8cb4ff
}
.header nav{
    display:none;
    position:absolute;
    top:78px;
    right:0;
    background:#101828;
    border:1px solid #374153;
    border-radius:12px;
    padding:12px;
    min-width:200px;
    box-shadow:0 15px 40px #0006
}
.header nav.is-open{
    display:grid
}
.header nav a{
    font-size:14px;
    padding:10px 15px;
    border-radius:6px
}
.header nav a:hover{
    background:#24344e
}
/* Full-bleed stage and integrated car image, rather than a framed split card. */
.hero.wrap{
    width:100%;
    position:relative;
    min-height:760px;
    margin:0;
    isolation:isolate;
    overflow:hidden;
    background:radial-gradient(ellipse at 24% 49%,#243247 0,#10192a 39%,#060a12 76%);
    color:#fff;
    display:flex;
    align-items:center;
    padding:130px max(7%,calc((100vw - 1120px)/2)) 105px
}
.hero-copy{
    position:relative;
    z-index:2;
    width:57%;
    padding-bottom:25px
}
.eyebrow{
    margin:0 0 17px;
    font-size:12px;
    letter-spacing:1.5px;
    color:var(--blue)
}
.hero .eyebrow{
    color:#9fbce9
}
.eyebrow span,.status-dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--blue);
    margin-left:8px
}
.hero h1{
    font-size:clamp(48px,5.6vw,79px);
    line-height:1.3;
    font-weight:900;
    margin:0 0 24px;
    letter-spacing:-2px
}
.hero h1 em{
    font-style:normal;
    color:#fff
}
.intro{
    font-size:15px;
    color:#c0c7d3;
    max-width:420px;
    margin:0 0 26px
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    border:0;
    border-radius:7px;
    padding:14px 24px;
    color:#fff;
    background:var(--blue);
    font-size:14px;
    font-weight:700;
    transition:background .2s,transform .2s
}
.button:hover{
    background:#1555ce;
    transform:translateY(-2px)
}
.button span{
    font:23px Arial
}
.hero-features{
    display:grid;
    grid-template-columns:max-content max-content;
    gap:8px 30px;
    margin-top:25px;
    font-size:12px;
    color:#d6dce7
}
.hero-features span:before{
    content:'⊙';
    color:#78a5ff;
    margin-left:8px
}
.hero-art{
    position:absolute;
    z-index:0;
    left:2%;
    top:135px;
    bottom:45px;
    width:52%;
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 13%,#000 74%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 74%,transparent)
}
.hero-art>img{
    object-fit:cover;
    object-position:50% 68%;
    filter:brightness(.73) saturate(.55);
    mask-image:linear-gradient(0deg,transparent,#000 18%,#000 70%,transparent);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 18%,#000 70%,transparent)
}
.hero-art:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 50%,#0b1220b0)
}
.art-top,.vertical{
    display:none
}
.art-bottom{
    position:absolute;
    bottom:45px;
    left:12%;
    z-index:1;
    direction:ltr;
    text-align:left
}
.art-bottom>span{
    display:none
}
.art-bottom small{
    font:10px Arial;
    letter-spacing:3px;
    color:#a2b1c6
}
.hero-scroll{
    position:absolute;
    bottom:-17px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    background:white;
    color:var(--blue);
    width:80px;
    height:48px;
    border-radius:50% 50% 0 0;
    text-align:center;
    padding-top:2px;
    font-size:23px
}
.section{
    padding-block:85px
}
.section-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
    margin-bottom:40px
}
h2{
    font-size:clamp(27px,3vw,39px);
    line-height:1.55;
    margin:0;
    letter-spacing:-.7px
}
h2 span{
    color:inherit
}
.section-head>p{
    max-width:560px;
    margin:0;
    font-size:15px;
    color:var(--muted)
}
.services{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.service{
    border:1px solid var(--line);
    border-radius:10px;
    padding:29px;
    position:relative;
    background:#fff;
    overflow:hidden
}
.service:before{
    content:'';
    position:absolute;
    top:0;
    right:29px;
    width:45px;
    height:3px;
    background:var(--blue)
}
.number{
    position:absolute;
    top:25px;
    left:25px;
    color:#8d939c;
    font:12px Arial
}
.service-icon{
    font-size:37px;
    color:var(--blue);
    margin-bottom:14px
}
.service h3{
    font-size:21px;
    margin:0
}
.english{
    color:#737a87;
    font:12px Arial;
    letter-spacing:.5px;
    margin:7px 0 20px
}
.service>p:not(.english){
    font-size:14px;
    color:var(--muted)
}
.service a{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    border-top:1px solid var(--line);
    padding-top:17px;
    margin-top:22px
}
.service a span{
    color:var(--blue)
}
.comparison-section{
    background:var(--soft)
}
.comparison-layout{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:55px;
    align-items:center
}
.muted{
    color:var(--muted)
}
.disclaimer{
    color:#727984;
    font-size:12px;
    margin-top:24px;
    max-width:320px
}
.comparison{
    position:relative;
    height:440px;
    border-radius:10px;
    overflow:hidden;
    direction:ltr;
    background:#e0e4e9
}
.comparison>img,.after,.after img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-position:center 65%
}
.comparison>img{
    filter:brightness(1.1)
}
.after{
    clip-path:inset(0 0 0 var(--split))
}
.after img{
    filter:brightness(.61) saturate(.65)
}
.before-label,.after-label{
    position:absolute;
    top:20px;
    padding:4px 16px;
    border-radius:20px;
    color:#fff;
    background:#101725bb;
    font-size:12px;
    z-index:2
}
.before-label{
    left:20px
}
.after-label{
    right:20px
}
.divider{
    position:absolute;
    left:var(--split);
    top:0;
    bottom:0;
    width:2px;
    background:white;
    pointer-events:none
}
.divider span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:white;
    color:#111;
    font-size:23px
}
.comparison input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    margin:0;
    cursor:ew-resize;
    direction:ltr
}
.comparison:focus-within{
    outline:3px solid var(--blue);
    outline-offset:4px
}
.compare-help{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
    margin:10px 0 0
}
/* Large project viewer with real-photo thumbnails, as in the supplied reference. */
#projects{
    max-width:850px
}
.project-viewer{
    background:#101620;
    border-radius:9px;
    overflow:hidden;
    position:relative;
    height:500px
}
.project-viewer>img{
    object-fit:contain
}
.project-caption{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:30px 23px 18px;
    display:flex;
    justify-content:space-between;
    direction:ltr;
    background:linear-gradient(transparent,#050912e8);
    color:#fff;
    font:14px Arial
}
.project-caption>span:last-child{
    font-size:11px
}
.gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:17px;
    direction:ltr
}
.gallery figure{
    margin:0;
    min-width:0
}
.gallery img{
    height:140px;
    object-position:center 60%
}
.gallery figcaption{
    font:12px/1.6 Arial;
    padding-top:9px;
    color:#434a56
}
.gallery figcaption small{
    display:none
}
.project-thumb{
    display:block;
    padding:0;
    width:100%;
    border:2px solid transparent;
    background:transparent;
    border-radius:5px;
    overflow:hidden;
    opacity:.6;
    transition:opacity .2s,border-color .2s
}
.project-thumb:hover,.project-thumb[aria-pressed=true]{
    opacity:1;
    border-color:var(--blue)
}
.why{
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:65px;
    align-items:center
}
.why .section-head{
    align-items:flex-start;
    text-align:right;
    margin:0
}
.benefits{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    background:var(--soft);
    border-radius:9px;
    padding:30px
}
.benefits article>span{
    font-size:23px;
    color:var(--blue)
}
.benefits h3{
    font-size:16px;
    margin:8px 0
}
.benefits p{
    font-size:13px;
    color:var(--muted);
    margin:0
}
.quote-section{
    background:var(--soft)
}
.quote-layout{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:55px;
    align-items:start
}
.quote-copy{
    padding-top:20px
}
.quote-copy>.muted{
    font-size:15px;
    margin:23px 0
}
.quote-contact{
    font-size:14px;
    margin-top:30px
}
.small{
    font-size:12px;
    color:var(--muted)
}
#quote-form{
    background:#fff;
    border-radius:12px;
    padding:30px;
    border:1px solid #e6e8ec;
    position:relative
}
#quote-form:before{
    content:'';
    position:absolute;
    top:0;
    right:30px;
    width:55px;
    height:3px;
    background:var(--blue)
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
label{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:13px
}
.full{
    grid-column:1/-1
}
.optional{
    display:contents;
    color:#79808b
}
input,select,textarea{
    width:100%;
    min-width:0;
    border:1px solid #dce0e6;
    background:#fafbfc;
    color:#171c24;
    border-radius:6px;
    padding:12px;
    font-size:14px
}
input::placeholder,textarea::placeholder{
    color:#828993;
    opacity:1
}
textarea{
    resize:vertical
}
.submit{
    width:100%;
    direction:ltr;
    margin-top:23px;
    background:#101319
}
.submit:hover{
    background:#253b5f
}
.form-note{
    font-size:12px;
    color:var(--muted);
    text-align:center;
    margin-bottom:0
}
#whatsapp-fallback{
    color:#175ddf;
    text-decoration:underline;
    font-size:14px
}
.contact-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}
.contact-card{
    display:flex;
    flex-direction:column;
    gap:23px;
    border:1px solid var(--line);
    border-radius:9px;
    padding:25px 20px;
    background:#fff;
    transition:border-color .2s,transform .2s
}
.contact-card:hover{
    border-color:var(--blue);
    transform:translateY(-3px)
}
.contact-primary{
    background:#101725;
    color:#fff;
    border-color:#101725
}
.contact-kind{
    font:11px/1.8 Arial,Tahoma;
    letter-spacing:.4px;
    color:#737d8d
}
.contact-primary .contact-kind{
    color:#a8bada
}
.contact-card strong{
    font-size:17px;
    display:flex;
    justify-content:space-between;
    gap:10px
}
.contact-card strong span{
    color:#5189f9;
    font:23px Arial
}
.contact-card>span:last-child{
    font-size:13px;
    color:#677282;
    text-align:right
}
.contact-primary>span:last-child{
    color:#dae5f5
}
footer.wrap{
    width:100%;
    background:#0b0e14;
    color:#fff;
    padding:45px 7%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px
}
footer p,footer>small{
    font-size:12px;
    color:#9ca6b5
}
@media(min-width:1500px){
    .hero.wrap{
        min-height:850px
    }
    .hero-art{
        left:8%;
        width:47%
    }
}
@media(max-width:1000px){
    .hero.wrap{
        min-height:740px
    }
    .hero-copy{
        width:60%
    }
    .hero h1{
        font-size:60px
    }
    .hero-art{
        left:0;
        width:57%
    }
    .comparison-layout,.quote-layout{
        gap:30px
    }
    .service{
        padding:23px
    }
    .why{
        gap:30px
    }
    .contact-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .project-viewer{
        height:450px
    }
}
@media(max-width:700px){
    .wrap{
        width:88%
    }
    .header{
        left:6%;
        right:6%;
        height:85px
    }
    .brand b{
        font-size:32px
    }
    .brand small{
        font-size:9px;
        letter-spacing:2px
    }
    .brand{
        gap:8px
    }
    .menu-toggle,.nav-cta{
        font-size:11px;
        padding:7px 10px
    }
    .nav-cta span{
        display:none
    }
    .hero.wrap{
        display:block;
        min-height:920px;
        padding:120px 6% 65px
    }
    .hero-copy{
        width:100%;
        padding:0
    }
    .hero .eyebrow{
        font-size:11px
    }
    .hero h1{
        font-size:clamp(43px,10vw,63px);
        line-height:1.32;
        letter-spacing:-1px
    }
    .hero h1 br:nth-child(2){
        display:none
    }
    .intro{
        max-width:380px;
        font-size:14px
    }
    .hero-features{
        gap:7px 25px;
        font-size:12px
    }
    .hero-art{
        left:0;
        top:490px;
        bottom:25px;
        width:100%;
        mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
    }
    .hero-art>img{
        object-fit:contain;
        object-position:center;
        mask-image:linear-gradient(0deg,transparent,#000 20%,#000 80%,transparent);
        -webkit-mask-image:linear-gradient(0deg,transparent,#000 20%,#000 80%,transparent)
    }
    .hero-art:after{
        display:none
    }
    .art-bottom{
        bottom:18px;
        left:10%
    }
    .section{
        padding-block:60px
    }
    .section-head{
        margin-bottom:30px
    }
    .section-head>p{
        font-size:14px
    }
    .services{
        grid-template-columns:1fr
    }
    .service-icon{
        margin-bottom:7px
    }
    .service{
        padding:25px
    }
    .comparison-layout,.quote-layout,.why{
        grid-template-columns:1fr;
        gap:30px
    }
    .comparison-layout>div:first-child{
        text-align:center
    }
    .disclaimer{
        max-width:none
    }
    .comparison{
        height:370px
    }
    .project-viewer{
        height:400px
    }
    .gallery{
        gap:8px
    }
    .gallery img{
        height:88px
    }
    .gallery figcaption{
        font-size:10px
    }
    .why .section-head{
        align-items:center;
        text-align:center
    }
    .benefits{
        gap:25px 18px;
        padding:25px
    }
    .benefits h3{
        font-size:15px
    }
    .benefits p{
        font-size:13px
    }
    .quote-copy{
        text-align:center;
        padding:0
    }
    .quote-contact{
        margin-top:20px
    }
    .form-grid{
        grid-template-columns:1fr
    }
    .full{
        grid-column:auto
    }
    #quote-form{
        padding:25px
    }
    .contact-grid{
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    .contact-card{
        padding:20px 15px;
        gap:17px
    }
    .contact-card strong{
        font-size:15px
    }
    .contact-kind{
        font-size:10px
    }
    .contact-card>span:last-child{
        font-size:12px
    }
    footer p{
        display:none
    }
    footer.wrap{
        padding:35px 6%
    }
    .header nav{
        top:68px
    }
}
@media(max-width:380px){
    .contact-grid{
        grid-template-columns:1fr
    }
    .brand small{
        display:none
    }
    .hero.wrap{
        min-height:960px
    }
    .hero-art{
        top:540px
    }
    .project-viewer{
        height:330px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        transition:none!important
    }
}
/* Keep the car below the text on small screens, including enlarged text. */
@media(max-width:700px){
    .hero.wrap{
        min-height:0;
        padding-bottom:45px
    }
    .hero-art{
        position:relative;
        top:auto;
        bottom:auto;
        left:auto;
        width:100%;
        height:390px;
        margin-top:12px
    }
    .hero-art>img{
        height:100%
    }
    .art-bottom{
        bottom:10px
    }
}
/* Navigation remains usable if JavaScript is disabled. */
.header nav:not([hidden]){
    display:grid
}
.header:has(.menu-toggle[hidden]){
    height:auto;
    min-height:100px;
    flex-wrap:wrap
}
.header:has(.menu-toggle[hidden]) nav{
    position:static;
    display:flex;
    flex-wrap:wrap;
    margin-top:100px
}
/* Preserve full photographs in the project viewer;
crop thumbnails only. */
.gallery{
    grid-template-columns:repeat(6,minmax(0,1fr))
}
.gallery img{
    object-position:center 65%
}
.project-viewer{
    height:580px
}
.project-viewer>img{
    object-fit:contain
}
.hero-art>img{
    filter:brightness(.9) saturate(.9);
    object-position:center 60%
}
@media(max-width:700px){
    .gallery{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .gallery img{
        height:115px
    }
    .project-viewer{
        height:480px
    }
    .hero-art{
        height:440px
    }
    .hero-art>img{
        object-fit:contain
    }
    .header{
        display:grid;
        grid-template-columns:auto 1fr auto;
        gap:12px
    }
    .header>.brand{
        position:static;
        transform:none;
        grid-column:2;
        grid-row:1;
        justify-self:center
    }
    .menu-toggle{
        grid-column:1;
        grid-row:1
    }
    .nav-cta{
        grid-column:3;
        grid-row:1;
        margin:0
    }
    .header nav{
        max-width:calc(100vw - 40px)
    }
    input,select,textarea{
        font-size:16px
    }
}
@media(max-width:380px){
    .header{
        gap:7px
    }
    .nav-cta{
        font-size:10px
    }
    .hero h1{
        font-size:43px
    }
    .project-viewer{
        height:400px
    }
}