:root{
  --navy:#0b2341;
  --blue:#1e66b4;
  --sky:#eaf6ff;
  --pale:#f7fbff;
  --text:#2f3d46;
  --muted:#637381;
  --line:rgba(11,35,65,.14);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--navy);line-height:1.55;background:white}
img{max-width:100%;display:block}
a{color:inherit}
.site-header{
  position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  min-height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:850;letter-spacing:.02em}
.brand img{width:52px;height:52px;object-fit:contain}
nav{display:flex;gap:24px;font-size:.95rem;font-weight:700}
nav a{text-decoration:none;color:var(--text)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:calc(100vh - 72px);background:var(--sky)}
.hero-image img{width:100%;height:100%;object-fit:cover}
.hero-copy{padding:70px clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.eyebrow{margin:0 0 12px;color:var(--blue);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(3rem,6.4vw,6.5rem);line-height:.92;letter-spacing:-.075em;margin-bottom:24px}
.hero-copy p:not(.eyebrow){font-size:1.22rem;color:var(--text);max-width:650px}
.button{display:inline-flex;width:max-content;margin-top:14px;background:var(--blue);color:white;text-decoration:none;border-radius:999px;padding:14px 22px;font-weight:850}
.section{padding:78px clamp(24px,5vw,72px)}
.intro{max-width:850px;margin-bottom:34px}
.intro h2,.approach-box h2{font-size:clamp(2rem,4vw,4rem);line-height:1.02;letter-spacing:-.06em;margin-bottom:0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cards article{border:1px solid var(--line);border-radius:22px;padding:24px;background:linear-gradient(180deg,#fff,var(--pale))}
.cards h3{margin-bottom:10px}
.cards p{color:var(--muted);margin-bottom:0}
.gallery{background:var(--pale)}
.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
figure{margin:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:white;box-shadow:0 16px 36px rgba(11,35,65,.08)}
figure.large{grid-row:span 2}
figure img{width:100%;height:100%;min-height:290px;object-fit:cover}
figcaption{padding:13px 16px;color:var(--muted);font-size:.94rem}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pills span{padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:var(--pale);font-weight:800;color:var(--text)}
.approach{background:#fff}
.approach-box{border-radius:28px;background:var(--navy);color:white;padding:clamp(28px,5vw,60px);max-width:1120px}
.approach-box p:not(.eyebrow){font-size:1.13rem;max-width:820px;color:rgba(255,255,255,.78);margin-bottom:0}
.contact{text-align:center;background:linear-gradient(135deg,#07172b,#123b6c);color:white;padding:70px 24px}
.contact img{width:120px;margin:0 auto 18px;background:white;border-radius:22px;padding:8px}
.contact h2{font-size:2.8rem;letter-spacing:-.04em;margin-bottom:12px}
.contact a{color:white;font-weight:900}
@media(max-width:900px){
  nav{display:none}
  .hero{grid-template-columns:1fr}
  .hero-image{height:42vh;order:2}
  .hero-copy{order:1}
  .cards,.gallery-grid{grid-template-columns:1fr}
  figure.large{grid-row:auto}
}