@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{
 --blue:#2455d6; --navy:#102044; --cream:#f5f1e8; --text:#18213a;
 --muted:#6e7789; --line:#dfe3ea; --lime:#d9f05d; --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:"DM Sans",Arial,sans-serif}
body{min-width:320px}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.container{width:min(1180px,calc(100% - 40px));margin:auto}

/* HEADER — intentionally compact like the reference */
.header{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eef0f3}
.logo{font-family:Manrope;font-weight:800;color:var(--blue);font-size:24px;line-height:.8;letter-spacing:-.07em}
.logo span{color:#6b7381}
.logo small{display:block;color:var(--navy);font:700 10px "DM Sans";letter-spacing:.18em;margin-top:6px}
.nav{display:flex;align-items:center;gap:23px;font-size:15px;color:#5c6679}
.nav a{padding:4px 0}
.nav a.active{color:var(--blue);border-bottom:1px solid var(--blue)}
.nav .wa{background:var(--blue);color:#fff;padding:11px 15px;border-radius:4px;font-size:13px}
.menu{display:none;border:0;background:none;font-size:24px}

/* HERO — exact visual structure: cream left / photo right */
.hero{display:grid;grid-template-columns:48% 52%;min-height:455px}
.hero-copy{background:var(--cream);padding:54px 58px 44px;display:flex;flex-direction:column;justify-content:center}
.kicker{font-size:13px;letter-spacing:.23em;text-transform:uppercase;font-weight:800;color:#68738a}
.hero h1{font-family:Manrope;font-size:clamp(64px,7vw,96px);line-height:.88;letter-spacing:-.075em;margin:11px 0 19px;color:var(--blue);font-weight:800}
.hero p{font-size:15px;line-height:1.75;color:#657087;max-width:430px;margin:0 0 19px}
.actions{display:flex;gap:7px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 17px;border-radius:4px;background:var(--blue);color:#fff;font-size:13px;font-weight:700}
.btn.alt{background:transparent;border:1px solid #1d2639;color:#18213a}
.hero-photo{min-height:455px;position:relative;overflow:hidden;background:#dfe5ed}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,32,68,.08),transparent 45%)}
.hero-badge{position:absolute;z-index:2;right:20px;bottom:20px;background:var(--lime);color:#17213a;padding:10px 13px;font-size:12px;letter-spacing:.14em;font-weight:800}

/* FOUR SMALL SERVICE ITEMS */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.feature{display:flex;align-items:center;gap:7px}
.icon{width:22px;height:22px;border:1px solid var(--blue);border-radius:50%;display:grid;place-items:center;color:var(--blue);font-size:12px;font-weight:800;flex:none}
.feature strong{display:block;font-size:16px;line-height:1.25}
.feature span{display:block;color:#7c8492;font-size:14px;margin-top:3px}

/* FAST FULL-WIDTH MOVING STRIP */
.marquee{height:36px;overflow:hidden;background:var(--blue);color:#fff;display:flex;align-items:center}
.marquee-track{display:flex;width:max-content;animation:run 25s linear infinite}
.marquee-item{font:700 10px Manrope;letter-spacing:.19em;white-space:nowrap;padding:0 14px}
.marquee-item b{color:var(--lime);padding-left:12px}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CATEGORY SECTION */
.categories{padding:31px 0 50px}
.section-head{display:grid;grid-template-columns:1fr 1.05fr auto;gap:32px;align-items:end;margin-bottom:21px}
.section-kicker{font-size:14px;text-transform:uppercase;letter-spacing:.2em;font-weight:800;color:#7a8494;margin-bottom:5px}
.section-head h2{font-family:Manrope;font-size:34px;line-height:.98;letter-spacing:-.055em;margin:0}
.section-head p{font-size:16px;line-height:1.6;color:#727c8d;margin:0;max-width:350px}
.view-all{font-size:14px;color:var(--blue);font-weight:700;white-space:nowrap}

/* Equal-height cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.card{border:1px solid #e2e5ea;background:#fff;min-width:0}
.card-photo{height:205px;background:#e8ecf2;overflow:hidden}
.card-photo img{transition:transform .45s}
.card:hover .card-photo img{transform:scale(1.04)}
.card-body{height:78px;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-title{font-family:Manrope;font-size:17px;font-weight:800;line-height:1}
.card-desc{font-size:12px;color:#798293;margin-top:5px}
.arrow{width:23px;height:23px;border:1px solid #d3d8df;border-radius:50%;display:grid;place-items:center;color:var(--blue);font-size:15px;flex:none}

/* lower band visible on scroll */
.band{background:var(--navy);padding:55px 0;color:#fff}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.band .kicker{color:var(--lime)}
.band h2{font-family:Manrope;font-size:42px;line-height:.95;letter-spacing:-.06em;margin:8px 0}
.band p{font-size:15px;color:#bcc5d5;line-height:1.7}
.footer{background:#0a1227;color:#fff;padding:35px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .8fr;gap:40px}
.footer p,.footer a{font-size:13px;color:#aeb8ca;line-height:1.7}
.footer h4{font-size:15px;margin:0 0 8px;font-family:Manrope}
.bottom{border-top:1px solid #26334e;margin-top:25px;padding-top:11px;display:flex;justify-content:space-between;color:#707d93;font-size:10px}

/* Other pages */
.page-hero{background:var(--cream);padding:58px 0 43px}
.page-hero .kicker{font-size:13px}
.page-hero h1{font-family:Manrope;font-size:62px;line-height:.9;letter-spacing:-.07em;color:var(--blue);margin:12px 0}
.page-hero p{max-width:570px;color:#68738a;font-size:15px;line-height:1.7}
.page-section{padding:48px 0}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.product{border:1px solid var(--line)}
.product .photo{height:230px}
.product .body{padding:13px}
.product .tag{font-size:13px;color:var(--blue);font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.product h3{font-family:Manrope;font-size:17px;margin:5px 0}
.product p{font-size:13px;color:var(--muted)}
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.brand{height:260px;position:relative;overflow:hidden}
.brand:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(12,23,48,.8))}
.brand .brand-info{position:absolute;z-index:2;left:15px;bottom:13px;color:#fff}
.brand h3{font-family:Manrope;font-size:24px;margin:0}
.brand p{font-size:13px;margin:3px 0;color:#e7ebf2}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.big-photo{min-height:440px}
.copy{background:var(--cream);padding:45px;display:flex;flex-direction:column;justify-content:center}
.copy h2{font-family:Manrope;font-size:40px;line-height:.95;margin:10px 0}
.copy p{font-size:14px;line-height:1.755;color:var(--muted)}
.form{background:var(--blue);padding:40px;color:#fff}
.form h2{font-family:Manrope;font-size:38px;line-height:.95;margin:8px 0 22px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:0;border-radius:3px;padding:10px;font:inherit;font-size:12px}
.field textarea{min-height:110px;resize:vertical}
.form .btn{background:var(--lime);color:var(--navy);border:0}

/* mobile */
@media(max-width:850px){
 .container{width:calc(100% - 28px)}
 .header{height:62px}.nav{display:none}.menu{display:block}
 .nav.open{display:flex;position:absolute;z-index:30;top:62px;left:0;right:0;background:#fff;padding:15px 20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
 .hero{grid-template-columns:1fr}.hero-copy{padding:40px 28px}.hero-photo{min-height:360px}
 .features{grid-template-columns:repeat(2,1fr)}
 .section-head{grid-template-columns:1fr;gap:12px}.card-grid,.products-grid,.brand-grid{grid-template-columns:1fr 1fr}
 .two-col,.band-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
 .hero h1{font-size:58px}.hero-photo{min-height:300px}.features{gap:10px}.card-grid,.products-grid,.brand-grid{grid-template-columns:1fr}
 .card-photo{height:205px}.page-hero h1{font-size:52px}.copy{padding:30px}.bottom{display:block}
}

@media(max-width:850px){
 .hero h1{font-size:clamp(58px,12vw,78px)}
 .hero p{font-size:15px}
 .nav a{font-size:14px}
 .marquee-item{font-size:11px}
 .section-head h2{font-size:30px}
 .card-title{font-size:17px}
}