:root{--red:#ed101c;--red-dark:#d90012;--ink:#202328;--muted:#747981;--line:#e9eaed;--soft:#f7f7f8;--white:#fff;--radius:15px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,Arial,sans-serif;background:#fff;font-size:15px;line-height:1.55}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.container{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.site-header{height:76px;background:rgba(255,255,255,.94);position:relative;z-index:20}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand img{display:block;width:150px;max-height:60px;object-fit:contain}.custom-logo{max-width:150px;height:auto}.brand-text{font-size:30px;font-weight:900;letter-spacing:-2px}.brand-text span{color:var(--red)}.main-nav{margin-left:auto}.nav-list{display:flex;align-items:center;gap:27px;list-style:none;margin:0;padding:0}.nav-list a{font-size:12px;font-weight:700;transition:.2s}.nav-list a:hover,.nav-list .current-menu-item a{color:var(--red)}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:13px 23px;background:var(--red);color:#fff;border-radius:30px;font-size:12px;font-weight:700;transition:.2s;border:1px solid var(--red)}.button:hover{background:var(--red-dark);color:#fff;transform:translateY(-2px)}.button-small{padding:10px 18px}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:23px;height:2px;background:var(--ink);margin:5px}
.hero-section{min-height:410px;overflow:hidden;background:linear-gradient(90deg,#fff 0%,#fff 43%,#f5f5f5 100%)}.hero-grid{display:grid;grid-template-columns:47% 53%;align-items:center;min-height:410px}.hero-copy{position:relative;z-index:2;padding:35px 0}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--red);font-size:10px;font-weight:800;letter-spacing:1px;margin:0 0 12px}.eyebrow i{display:inline-block;width:16px;height:6px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}h1,h2,h3,p{margin-top:0}.hero-copy h1{font-size:clamp(35px,4.1vw,53px);line-height:1.08;letter-spacing:-2px;font-weight:850;margin:0 0 15px;max-width:520px}.hero-copy h1 span,.cta-inner h2 span{color:var(--red)}.hero-description{max-width:450px;color:#666d75;font-size:13px;margin-bottom:22px}.hero-actions{display:flex;align-items:center;gap:22px}.video-link{font-size:11px;font-weight:700;display:flex;align-items:center;gap:9px}.video-link b{width:32px;height:32px;border:1px solid var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red)}
.hero-art{height:365px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 60% 55%,#ddd 0,transparent 55%)}.laptop{position:absolute;width:76%;left:5%;bottom:28px;z-index:2;filter:drop-shadow(0 16px 12px #0002)}.laptop-screen{height:225px;border:9px solid #25282c;border-bottom-width:13px;border-radius:13px 13px 5px 5px;background:#fff;position:relative;overflow:hidden;padding:16px}.laptop-base{height:17px;background:linear-gradient(#aaa,#555 55%,#bbb);clip-path:polygon(3% 0,97% 0,100% 65%,92% 100%,8% 100%,0 65%)}.mock-site-top{font-weight:900;color:var(--red);font-size:18px}.mock-site-top span{float:right;width:70px;height:5px;background:#eee;margin-top:8px}.mock-building{position:absolute;right:9%;top:30%;width:43%;height:68%;background:linear-gradient(115deg,#222 0 35%,#555 35% 50%,var(--red) 50% 73%,#17191d 73%);clip-path:polygon(20% 0,100% 10%,100% 100%,0 100%)}.mock-lines{position:absolute;left:8%;top:42%;width:25%}.mock-lines i{display:block;height:5px;background:#ddd;margin:10px 0}.mock-lines i:first-child{width:90%;background:var(--red)}.phone{position:absolute;z-index:3;right:3%;bottom:22px;width:86px;height:166px;border:6px solid #202328;border-radius:18px;background:#fff;padding:13px 7px;box-shadow:0 12px 20px #0003}.phone-screen strong{color:var(--red);font-size:16px}.phone-building{height:85px;margin-top:12px;background:linear-gradient(130deg,#25282c 0 40%,var(--red) 40% 65%,#111 65%)}.phone-screen i{display:block;background:#ddd;height:3px;margin-top:6px}
.stats-section{border-bottom:1px solid var(--line);background:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:19px 0}.stat{display:flex;align-items:center;gap:14px;padding:0 22px;border-right:1px solid #ddd}.stat:first-child{padding-left:0}.stat:last-child{border:0}.stat-icon{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#fff1f2;color:var(--red);font-size:24px}.stat strong{display:block;font-size:20px;line-height:1.1}.stat small{font-size:10px;color:var(--muted)}
.section{padding:58px 0}.section-soft{background:var(--soft)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.section h2,.about-copy h2{font-size:clamp(27px,3vw,36px);line-height:1.13;letter-spacing:-1.1px;font-weight:850;margin:0}.outline-button{border:1px solid #ff9ba1;color:var(--red);border-radius:25px;padding:9px 18px;font-size:11px;font-weight:700;white-space:nowrap}.outline-button:hover{background:var(--red);color:#fff}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{padding:22px 20px;background:#fff;border:1px solid #f0f0f0;border-radius:var(--radius);box-shadow:0 7px 22px #161b2208;min-height:190px}.service-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:10px;background:#fff0f1;color:var(--red);font-size:21px;font-weight:800;margin-bottom:13px}.service-card h3{font-size:15px;line-height:1.25;margin-bottom:7px}.service-card p{font-size:11px;color:var(--muted);margin-bottom:13px}.service-card>a,.read-more{font-size:11px;color:var(--red);font-weight:800}
.project-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.project-filters button{border:0;background:transparent;color:#73777e;padding:8px 15px;border-radius:22px;font-size:11px;cursor:pointer}.project-filters button.active,.project-filters button:hover{background:var(--red);color:#fff}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.project-image{height:145px;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(135deg,#e6e6e6,#fafafa);display:grid;place-items:center}.mini-browser{width:78%;height:75%;background:#fff;border:5px solid #272a2e;border-radius:7px;box-shadow:0 10px 15px #0002;padding:8px;position:relative}.mini-browser b{color:var(--red);font-size:12px}.mini-browser span{display:inline-block;width:18px;height:3px;background:#ddd;margin-left:5px}.mini-browser div{position:absolute;right:8px;bottom:8px;width:43%;height:65%;background:linear-gradient(120deg,#222 0 40%,var(--red) 40% 68%,#555 68%)}.project-app{background:linear-gradient(135deg,#e8e8e8,#fafafa)}.mock-phone{width:55px;height:105px;border:5px solid #25282c;border-radius:12px;background:#fff;color:var(--red);padding:8px 4px;font-weight:900;transform:rotate(-9deg);box-shadow:0 8px 12px #0002}.mock-phone div{height:42px;background:linear-gradient(130deg,#222 0 45%,var(--red) 45%)}.mock-phone i{display:block;height:3px;background:#ddd;margin-top:5px}.mock-phone.second{position:absolute;margin-left:60px;transform:rotate(8deg)}.project-shop{background:linear-gradient(135deg,#ddd,#fff)}.shop-window{width:80%;height:72%;background:#fff;box-shadow:0 5px 12px #0002;padding:10px;display:flex;gap:5px;flex-wrap:wrap}.shop-window b{width:100%;color:var(--red);font-size:12px}.shop-window div{width:29%;height:48%;background:linear-gradient(140deg,#d9b08a,#8c5838)}.project-brand{background:#eee}.brand-sheet{background:#fff;width:75%;height:75%;box-shadow:0 7px 15px #0002;color:var(--red);font-size:30px;font-weight:900;padding:16px;transform:rotate(-5deg)}.brand-sheet span{display:block;color:#333;font-size:9px;letter-spacing:3px}.project-card h3{font-size:13px;margin:9px 0 0}.project-card small{font-size:10px;color:var(--muted)}
.about-section{padding:30px 0;background:#f5f5f6}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.office-visual{height:300px;border-radius:14px;background:linear-gradient(120deg,#b4aaa2,#eee 45%,#8b8179);position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #0001}.office-visual:before,.office-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#2228 49%,transparent 50%),linear-gradient(0deg,transparent 70%,#fff8 71%,transparent 72%);opacity:.6}.office-mark{font-size:90px;font-weight:950;letter-spacing:-12px;color:#343434;text-shadow:4px 4px 0 var(--red);z-index:1}.office-caption{position:absolute;z-index:1;bottom:25px;letter-spacing:6px;font-size:10px;color:#fff;font-weight:800}.about-copy>p:not(.eyebrow){color:#73777e;font-size:13px;margin:16px 0}.about-points{display:flex;gap:17px;flex-wrap:wrap;margin:20px 0;font-size:10px;font-weight:700}.about-points span:first-letter{color:var(--red)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:27px}.process-item{position:relative}.process-item>b{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;border:1px solid #ffb9bd;background:#fff0f1;color:var(--red);font-size:16px;margin-bottom:12px}.process-item h3{font-size:14px;margin-bottom:4px}.process-item p{font-size:11px;color:var(--muted);max-width:190px}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.testimonial{background:#fff;padding:20px;border-radius:13px;box-shadow:0 5px 20px #00000008}.quote{font-size:38px;line-height:.8;color:#ff8b91}.testimonial p{font-size:12px;color:#666;min-height:55px}.testimonial strong{display:block;font-size:12px}.testimonial small{font-size:10px;color:var(--muted)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.blog-card{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 20px #0000000a}.blog-card img,.blog-placeholder{width:100%;height:125px;object-fit:cover;display:grid;place-items:center;background:linear-gradient(120deg,#25282c,#74777b);color:#fff;font-size:28px;font-weight:900}.blog-content{padding:15px}.blog-content small{font-size:10px;color:var(--muted)}.blog-content h3{font-size:14px;line-height:1.35;margin:7px 0}.blog-content h3 a:hover{color:var(--red)}
.cta-section{padding:30px 0;background:linear-gradient(100deg,#fff 0%,#f1f1f1 100%);overflow:hidden}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-inner h2{font-size:34px;margin:0 0 5px}.cta-inner p:not(.eyebrow){font-size:12px;color:var(--muted);max-width:560px;margin:0}
.site-footer{background:#171d22;color:#f4f5f6;padding:45px 0 18px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr;gap:35px;padding-bottom:32px}.footer-logo img{filter:none;max-width:145px}.footer-brand p{font-size:11px;color:#aeb3b8;margin-top:10px}.footer-grid h4{font-size:13px;margin:5px 0 14px}.footer-grid>div:not(:first-child)>a{display:block;color:#b7bdc2;font-size:11px;margin:7px 0}.footer-grid p,.footer-grid div:last-child>a{font-size:11px;color:#b7bdc2}.social-links{display:flex;gap:9px;margin-top:18px}.social-links a{width:30px;height:30px;border:1px solid #454b50;border-radius:50%;display:grid;place-items:center;font-size:12px}.footer-bottom{border-top:1px solid #3b4146;padding-top:15px;display:flex;justify-content:space-between;color:#aeb3b8;font-size:10px}.archive-content{padding:55px 0;min-height:50vh}.entry{max-width:850px;margin:0 auto 35px}.entry h1,.entry h2{line-height:1.2}.entry img{border-radius:12px;margin:15px 0}
@media(max-width:900px){.nav-list{gap:14px}.nav-list a{font-size:11px}.header-cta{display:none}.hero-grid{grid-template-columns:1fr 1fr}.hero-art{transform:scale(.9);transform-origin:center}.service-grid,.project-grid{grid-template-columns:repeat(2,1fr)}.stat{padding:0 12px}.about-grid{gap:25px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.container{width:min(100% - 34px,520px)}.site-header{height:68px}.brand img{width:125px}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:15px 22px;box-shadow:0 12px 18px #0001}.main-nav.is-open{display:block}.nav-list{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.hero-grid{display:flex;flex-direction:column;align-items:stretch;min-height:0}.hero-copy{padding:38px 0 8px}.hero-copy h1{font-size:39px}.hero-art{height:260px;width:100%;transform:none}.laptop{width:78%;left:3%;bottom:20px}.laptop-screen{height:155px;border-width:6px;padding:9px}.phone{width:67px;height:130px;right:2%;bottom:15px;border-width:5px}.phone-building{height:60px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:15px;padding:18px 0}.stat{border:0;padding:0}.stat strong{font-size:17px}.section{padding:42px 0}.section-heading{align-items:flex-start}.section-heading h2,.section h2,.about-copy h2{font-size:27px}.outline-button{font-size:10px;padding:8px 11px}.service-grid{gap:12px}.service-card{padding:16px;min-height:190px}.service-card h3{font-size:13px}.project-grid{gap:12px}.project-image{height:120px}.project-card h3{font-size:12px}.project-filters{gap:2px}.project-filters button{padding:7px 10px;font-size:10px}.about-grid{grid-template-columns:1fr}.office-visual{height:230px}.process-grid{grid-template-columns:repeat(2,1fr);gap:22px}.testimonial-grid{grid-template-columns:1fr}.testimonial p{min-height:0}.blog-grid{grid-template-columns:1fr}.blog-card img,.blog-placeholder{height:170px}.cta-inner{align-items:flex-start;flex-direction:column}.cta-inner h2{font-size:29px}.footer-grid{grid-template-columns:repeat(2,1fr);gap:25px 15px}.footer-bottom{flex-direction:column;gap:8px}.footer-grid h4{font-size:12px}}

.container {
    width: min(1300px, calc(100% - 60px));
}.site-header {
    height: 82px;
}

.brand img,
.brand .custom-logo {
    width: 175px;
    max-width: 175px;
    max-height: 70px;
    object-fit: contain;
}

.hero-section {
    min-height: 440px;
}

.hero-grid {
    min-height: 440px;
}

.hero-copy h1 {
    font-size: clamp(38px, 4vw, 54px);
    letter-spacing: -1.8px;
}

.section {
    padding-top: 65px;
    padding-bottom: 65px;
}

.service-card {
    transition: transform .25s ease,
                box-shadow .25s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px #00000012;
}

@media(max-width:640px) {
    .container {
        width: calc(100% - 32px);
    }

    .brand img,
    .brand .custom-logo {
        width: 140px;
        max-width: 140px;
    }

    .hero-section,
    .hero-grid {
        min-height: auto;
    }
}

/* DESIGNGROUP WIDTH FIX */

.site-header .container,
main .container,
.site-footer .container {
    width: calc(100% - 80px) !important;
    max-width: 1300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 640px) {
    .site-header .container,
    main .container,
    .site-footer .container {
        width: calc(100% - 32px) !important;
    }
}

/* DESIGNGROUP DESKTOP LAYOUT */

@media (min-width: 1200px) {

    .container {
        width: calc(100% - 100px) !important;
        max-width: 1300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-grid {
        grid-template-columns: 48% 52%;
        min-height: 480px;
    }

    .hero-section {
        min-height: 480px;
    }

    .hero-art {
        height: 430px;
    }

    .service-grid,
    .project-grid {
        gap: 24px;
    }

    .service-card {
        min-height: 215px;
        padding: 26px;
    }

    .project-image {
        height: 190px;
    }
}

/* TABLET */

@media (min-width: 641px) and (max-width: 1199px) {
    .container {
        width: calc(100% - 48px);
    }
}


/* =====================================
   DESIGNGROUP RESPONSIVE DESIGN
   Desktop / Tablet / Mobile
===================================== */

/* DESKTOP */
@media (min-width: 1200px) {

    .container {
        width: min(1300px, calc(100% - 80px)) !important;
        max-width: 1300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .site-header {
        height: 82px;
    }

    .hero-section,
    .hero-grid {
        min-height: 480px;
    }

    .hero-grid {
        grid-template-columns: 48% 52%;
    }

    .hero-art {
        height: 430px;
    }

    .hero-copy h1 {
        font-size: clamp(44px, 4vw, 58px);
    }

    .service-grid,
    .project-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .service-card {
        min-height: 215px;
        padding: 25px;
    }

    .project-image {
        height: 190px;
    }

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

    .process-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .testimonial-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* TABLET */
@media (min-width: 641px) and (max-width: 1199px) {

    .container {
        width: calc(100% - 48px) !important;
    }

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

    .hero-copy h1 {
        font-size: 40px;
    }

    .service-grid,
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

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

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

/* MOBILE */
@media (max-width: 640px) {

    .container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    .site-header {
        height: 68px;
    }

    .brand img,
    .brand .custom-logo {
        width: 140px;
        max-width: 140px;
        max-height: 55px;
    }

    .menu-toggle {
        display: block;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 20px;
        box-shadow: 0 10px 20px #00000012;
    }

    .main-nav.is-open {
        display: block;
    }

    .nav-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
    }

    .hero-section,
    .hero-grid {
        min-height: auto;
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
    }

    .hero-copy {
        padding: 38px 0 10px;
    }

    .hero-copy h1 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-art {
        width: 100%;
        height: 260px;
        transform: none;
    }

    .laptop {
        width: 78%;
        left: 3%;
        bottom: 20px;
    }

    .laptop-screen {
        height: 155px;
        border-width: 6px;
        padding: 9px;
    }

    .phone {
        width: 67px;
        height: 130px;
        right: 2%;
        bottom: 15px;
        border-width: 5px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 12px;
    }

    .stat {
        border: 0;
        padding: 0;
    }

    .section {
        padding: 42px 0;
    }

    .section h2,
    .about-copy h2 {
        font-size: 27px;
    }

    .section-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .service-grid,
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .service-card {
        min-height: 180px;
        padding: 15px;
    }

    .service-card h3 {
        font-size: 13px;
    }

    .project-image {
        height: 120px;
    }

    .project-card h3 {
        font-size: 12px;
    }

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

    .office-visual {
        height: 230px;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .testimonial-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-inner h2 {
        font-size: 29px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 15px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
}

/* DESIGNGROUP HERO IMAGE */

.hero-art-image {
    background: none !important;
    overflow: visible;
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-art-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% center;
    display: block;
}

/* MOBILE HERO IMAGE */

@media (max-width: 640px) {
    .hero-art-image {
        width: 100%;
        height: 240px;
        margin-top: 10px;
    }

    .hero-art-image img {
        object-fit: contain;
        object-position: center;
    }
}