@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#142a3b;
  --navy-2:#1b3b4f;
  --ink:#182c39;
  --muted:#627481;
  --red:#ec352e;
  --pale:#f5f8f9;
  --line:#dfe7eb;
  --card:#f7f9fa;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:'DM Sans',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:#fff;
}

h1,h2,h3,p{margin-top:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.wrap{width:min(1180px,calc(100% - 56px));margin:auto}

.header{
  background:#fff;
  border-bottom:1px solid #e9eff1;
  position:relative;
  z-index:5;
}

.header-inner{
  min-height:92px;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.logo img{
  display:block;
  width:auto;
  max-width:min(310px,42vw);
  max-height:70px;
  height:auto;
  object-fit:contain;
}

.header nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:700;
}

.header nav>a:not(.nav-contact){
  padding:8px 0;
}

.header nav>a:not(.nav-contact):hover{color:var(--red)}

.nav-contact{
  border:1px solid #cfdbe0;
  padding:13px 18px;
  border-radius:4px;
  white-space:nowrap;
}

.nav-contact span{color:var(--red);margin-left:10px}

.hero{
  background:linear-gradient(110deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;
  overflow:hidden;
}

.hero-inner{
  min-height:460px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);
  align-items:center;
  gap:36px;
}

.hero-copy{padding:70px 0}

.kicker,.section-kicker{font-size:11px;letter-spacing:2.1px;font-weight:800}
.kicker{color:#b6c9d2;display:flex;align-items:center;gap:12px}
.kicker span{height:7px;width:7px;background:#fa5c52;border-radius:100%}

.hero h1,h2{font-family:Manrope,Arial,sans-serif;letter-spacing:-1.9px}
.hero h1{font-size:clamp(38px,4.2vw,62px);line-height:1.12;font-weight:800;margin:26px 0}
.hero h1 em{font-style:normal;color:#f99088}

.intro{max-width:540px;line-height:1.85;color:#d6e2e8;font-size:16px}

.button{
  cursor:pointer;
  background:#e9443d;
  color:#fff;
  border:0;
  border-radius:4px;
  padding:15px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  font:700 13px 'DM Sans',sans-serif;
  margin-top:16px;
  transition:background .2s ease, transform .2s ease;
}
.button:hover{background:#ce2f29;transform:translateY(-1px)}
.button span{font-size:18px}

.hero-note{font-size:10px;letter-spacing:2px;color:#94aebc;margin-top:44px}
.hero-note b{padding:0 10px;color:#ff6c64}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-visual>img{width:100%;max-height:410px;object-fit:contain;filter:drop-shadow(0 0 35px #06162244)}
.visual-caption{position:absolute;right:0;bottom:12px;background:#ffffffeb;color:#183345;font-size:9px;font-weight:800;letter-spacing:1px;padding:13px 18px;box-shadow:0 12px 25px #06162225}

.section{padding:84px 0}
.section-kicker{color:#de453e;margin-bottom:24px}

.about-row{display:grid;grid-template-columns:.33fr 1fr;gap:40px}
.about-row h2,.services h2,.contact h2{font-size:clamp(30px,3.4vw,44px);line-height:1.25;margin-bottom:20px}
.about-row p:last-child{max-width:770px;font-size:16px;color:var(--muted);line-height:1.9}

.services{background:var(--pale)}
.service-grid{margin-top:38px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fff}
.service-grid article{padding:34px 30px;min-height:210px}
.service-grid article+article{border-left:1px solid var(--line)}
.icon{font-size:29px;color:var(--red);display:block;margin-bottom:21px}
.service-grid h3{font-family:Manrope,sans-serif;letter-spacing:-.4px;font-size:18px}
.service-grid p{color:var(--muted);font-size:14px;line-height:1.8}

.contact-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:72px}
.contact-left>p:not(.section-kicker){color:var(--muted);line-height:1.8}
.contact-details{margin-top:37px}
.contact-details p{margin:0 0 25px;display:grid;gap:8px;font-size:14px;line-height:1.65}
.contact-details b{font-size:12px;color:var(--navy)}
.contact-details a,.contact-details span{color:var(--muted)}
.contact-details a:hover{color:var(--red)}

.form-box{padding:36px;background:var(--card);border:1px solid #e7ecef;border-radius:5px}
.form-box h3{font:800 23px Manrope,Arial,sans-serif;letter-spacing:-.7px;margin-bottom:8px}
.form-sub{font-size:13px;color:var(--muted);margin-bottom:26px}
.form-box form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-box label{display:grid;gap:8px;color:#354b5a;font-size:12px;font-weight:700}
.form-box input,.form-box select,.form-box textarea{width:100%;font:14px 'DM Sans',Arial,sans-serif;border:1px solid #d9e2e6;border-radius:3px;padding:13px;background:#fff;min-width:0;outline-color:#bdcbd5}
.form-box textarea{min-height:120px;resize:vertical}

.form-actions{display:flex;align-items:center;justify-content:space-between;gap:18px}
.form-actions small{color:#738490}
.form-actions .button{margin:0}

.form-status{padding:12px 15px;font-size:13px;margin:16px 0}
.form-status.ok{background:#e6f5ed;color:#266044}
.form-status.error{background:#fbe8e8;color:#a52c2c}
.trap{position:absolute;left:-9999px;opacity:0}

.footer{background:#fff}
.footer-inner{border-top:1px solid var(--line);padding:30px 0;color:#88969e;font-size:12px;display:flex;justify-content:space-between;gap:18px}

@media (max-width:960px){
  .hero-inner,.contact-grid{grid-template-columns:1fr;gap:18px}
  .hero-copy{padding:58px 0 0}
  .hero-visual{max-width:430px;margin:0 auto 28px}
  .about-row{grid-template-columns:1fr;gap:6px}
  .contact-grid{gap:44px}
}

@media (max-width:800px){
  .wrap{width:min(100% - 34px,680px)}
  .header-inner{
    min-height:auto;
    padding:14px 0 16px;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .logo img{
    max-width:min(240px,70vw);
    max-height:58px;
  }
  .header nav{
    width:100%;
    justify-content:center;
    gap:14px 18px;
    font-size:12px;
  }
  .nav-contact{
    padding:11px 14px;
  }
  .section{padding:60px 0}
  .service-grid{grid-template-columns:1fr}
  .service-grid article{min-height:0;padding:28px}
  .service-grid article+article{border-left:0;border-top:1px solid var(--line)}
  .form-box{padding:24px}
}

@media (max-width:540px){
  .hero h1{font-size:36px}
  .intro{font-size:15px;line-height:1.75}
  .visual-caption{display:none}
  .form-row{grid-template-columns:1fr}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .button{width:100%;justify-content:center}
}

@media (max-width:420px){
  .wrap{width:min(100% - 24px,680px)}
  .logo img{max-width:200px;max-height:50px}
  .header nav{gap:10px 14px}
  .hero-copy{padding:48px 0 0}
  .hero-note{margin-top:30px;line-height:1.8}
  .about-row h2,.services h2,.contact h2{font-size:28px}
  .footer-inner{flex-direction:column}
}

/* Simple human-readable spam puzzle, usable on desktop and phones */
.spam-challenge{padding:17px 19px;border:1px solid #cbdbe1;background:#fff;border-radius:4px}
.spam-challenge label{font-size:14px;font-weight:700;color:var(--navy)}
.spam-challenge input{max-width:205px;margin-top:4px}
.spam-challenge p{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.5}
@media(max-width:540px){.spam-challenge input{max-width:100%}}