:root{
  --navy:#0D3666;
  --pink:#FFC0CB;
  --mint:#98FF98;
  --gray:#E5E5E5;
  --ink:#243041;
  --muted:#617085;
  --bg:#ffffff;
  --alt:#F8FAFC;
  --radius:28px;
  --shadow:0 16px 40px rgba(13,54,102,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto}

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid #edf1f4;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:52px; height:52px; object-fit:contain}
.brand-name{font-size:1.1rem; font-weight:700; color:var(--navy)}
.brand-tagline{font-size:.85rem; color:var(--muted)}
.nav{display:flex; gap:22px; flex-wrap:wrap}
.nav a{font-size:.95rem; color:#556274}
.nav a:hover{color:var(--navy)}

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(13,54,102,.12), transparent 35%),
    radial-gradient(circle at bottom left, rgba(255,192,203,.25), transparent 35%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:42px;
  padding:84px 0;
  align-items:center;
}
.hero h1{
  margin:0;
  color:var(--navy);
  font-size:clamp(2.3rem, 5vw, 4.2rem);
  line-height:1.05;
}
.hero-text{
  margin-top:22px;
  max-width:680px;
  font-size:1.15rem;
  color:#526072;
}
.hero-buttons{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:18px; font-weight:700; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy); color:#fff; box-shadow:var(--shadow)}
.btn-secondary{border:1px solid var(--navy); color:var(--navy); background:#fff}
.btn-secondary:hover{background:#f2f5f8}
.btn-full{width:100%}

.hero-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.info-card{
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}
.info-card.soft{background:#f8fafc; border:1px solid #e8edf3}
.info-card.bright{background:#fff; border:1px solid #e8edf3}
.eyebrow{
  margin:0 0 12px 0;
  font-size:.92rem;
  color:var(--muted);
  font-weight:700;
}
.info-card ul{
  margin:0; padding-left:18px; color:#445166;
}

.section{padding:76px 0}
.section-alt{background:var(--alt)}
.section-head{margin-bottom:24px}
.section-head h2,
.about-grid h2,
.contact-grid h2{
  margin:0;
  font-size:2rem;
  line-height:1.15;
  color:var(--navy);
}
.section-head p,
.about-grid p,
.contact-grid p{
  color:#5c6b7d;
  max-width:760px;
}
.section-label{
  margin:0 0 10px 0;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.8rem;
  font-weight:700;
  color:var(--muted);
}

.card-grid{
  display:grid;
  gap:20px;
}
.card-grid.five{grid-template-columns:repeat(5,1fr)}
.card-grid.four{grid-template-columns:repeat(4,1fr)}
.visual-card{
  overflow:hidden;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid #e8edf3;
}
.visual-card .image-wrap{
  position:relative;
  overflow:hidden;
}
.visual-card img{
  width:100%; height:220px; object-fit:cover;
  transition:transform .3s ease;
}
.visual-card:hover img{transform:scale(1.04)}
.visual-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent 55%);
}
.visual-card .title-overlay{
  position:absolute; left:16px; right:16px; bottom:14px;
  color:#fff; font-weight:700; font-size:1rem;
}
.visual-card .card-body{padding:18px}
.visual-card .card-body h3{margin:0; font-size:1.1rem; color:var(--ink)}
.visual-card .card-body p{margin:8px 0 0 0; color:#5c6b7d; font-size:.96rem}

.about-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:34px;
  align-items:center;
}
.about-photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.photo-large{grid-column:1 / -1}
.photo-large img{height:340px}
.photo-small img{height:180px}
.about-photo-grid img{
  width:100%; object-fit:cover; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid #e8edf3;
}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.tag{
  padding:10px 14px; border-radius:999px; background:#fff;
  border:1px solid #e3e9ef; color:#536273; font-size:.92rem;
}

.process-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.process-card{
  border-radius:var(--radius);
  background:#fff;
  border:1px solid #e8edf3;
  box-shadow:var(--shadow);
  padding:24px;
}
.process-step{font-size:.9rem; color:#95a0ad}
.process-card h3{margin:.45rem 0 .35rem 0; color:var(--ink)}

.contact-section{
  background:var(--navy);
  color:#fff;
  padding:76px 0;
}
.contact-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:28px;
  align-items:start;
}
.contact-grid h2{color:#fff}
.contact-grid p{color:#d8e3f0}
.contact-details{margin-top:22px; color:#d8e3f0; display:grid; gap:6px}
.contact-form{
  background:#fff; color:var(--ink);
  border-radius:var(--radius); box-shadow:0 20px 40px rgba(0,0,0,.18);
  padding:24px;
  display:grid; gap:14px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:14px 15px;
  border-radius:16px;
  border:1px solid #d8e0e8;
  font:inherit;
}

@media (max-width: 1040px){
  .card-grid.five{grid-template-columns:repeat(3,1fr)}
  .card-grid.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 860px){
  .nav{display:none}
  .hero-grid,
  .about-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .hero-cards{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .container{width:min(100% - 28px, 1120px)}
  .section, .contact-section{padding:58px 0}
  .hero-grid{padding:58px 0}
  .hero-cards{grid-template-columns:1fr}
  .card-grid.five,
  .card-grid.four{grid-template-columns:1fr}
  .about-photo-grid{grid-template-columns:1fr}
  .photo-large{grid-column:auto}
  .photo-large img,
  .photo-small img{height:220px}
}