:root{
  --bg:#0e2a4a;          /* Navy */
  --bg-2:#f2f4f8;        /* Light background */
  --ink:#0b1220;         /* Body text */
  --muted:#6b778c;       /* Muted text */
  --brand:#6ea8fe;       /* Accent */
  --white:#ffffff;
  --card:#1a3a66;
  --radius:14px;
  --shadow:0 6px 24px rgba(13, 35, 64, .16);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg-2);
  line-height:1.6;
}

/* Utilities */
.container{width:min(1200px, 92%); margin-inline:auto}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; font-size:.8rem; margin:0 0 .5rem}
.lead{font-size:1.05rem}
.emph{color:var(--brand); font-weight:700}
.text-link{color:var(--brand); text-decoration:none; font-weight:600}
.text-link:hover{text-decoration:underline}
.btn{display:inline-block; border-radius:999px; padding:.8rem 1.15rem; font-weight:600; text-decoration:none; border:2px solid transparent; transition:.2s}
.btn-primary{background:var(--brand); color:#09203b}
.btn-primary:hover{filter:brightness(.95)}
.btn-light{background:var(--brand); color:#09203b}
.btn-light:hover{background:var(--muted)}
.btn-outline{border-color:#97b3da; color:#d9e6ff; background:transparent}
.btn-outline:hover{background:#17375f}

/* Header */
.site-header{
  background:var(--bg);
  color:var(--white);
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 #173a68 inset;
}
.header-inner{display:flex; align-items:center; gap:1rem; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--white); text-decoration:none}
.brand img{height:75px; width:auto}

.nav{margin-left:auto; display:flex; gap:1rem; align-items:center}
.nav a{color:#cfe1ff; text-decoration:none; font-weight:500}
.nav a:hover{color:#fff}

/* Mobile nav */
.nav-toggle{display:none}
.burger{display:none; cursor:pointer; width:36px; height:36px; border-radius:8px; place-items:center; background:#17375f}
.burger span, .burger span::before, .burger span::after{
  display:block; height:2px; background:#fff; width:18px; position:relative; margin:auto
}
.burger span::before, .burger span::after{content:""; position:absolute; left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}

@media (max-width: 900px){
  .burger{display:grid}
  .nav{
    position:fixed; inset:56px 0 auto;
    background:var(--bg);
    padding:1rem; display:grid; gap:.6rem;
    transform:translateY(-120%); transition:.25s; box-shadow:var(--shadow)
  }
  .nav-toggle:checked ~ .nav{transform:translateY(0)}
}

/* Hero */
.hero{background:var(--bg); color:#d9e6ff; padding:2.4rem 0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero-copy h1{font-size:clamp(1.8rem, 3.5vw, 3rem); color:#fff; line-height:1.1; margin:.2rem 0 1rem}
.accent-dot{color:var(--brand)}
.hero-media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }

/* Dark stripes */
.stripe{padding:3rem 0}
.stripe-dark{background:var(--bg); color:#d6e3ff}
.two-col{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.two-col h2{color:#fff; margin:.2rem 0 1rem}
.circle-dot, .circle-dot-right{
  width:128px; height:128px; border-radius:999px; background:#294d80; opacity:.7; justify-self:end
}
.circle-dot-right{justify-self:start}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} .circle-dot, .circle-dot-right{display:none} }

/* Training collage */
.training{padding:3rem 0}
.training-header h3{font-size:clamp(1.4rem, 2.4vw, 2rem); margin:.2rem 0 1rem}
.training-grid{display:grid; grid-template-columns:2fr 1fr; gap:1rem}
.training-grid .tile{width:100%; height:100%; object-fit:cover; border-radius:var(--radius)}
.training-grid .tall{grid-row:span 2}
.thumbs{display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem; margin-top:.4rem}
.thumbs img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px}
@media (max-width: 900px){
  .training-grid{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(3, 1fr)}
}

/* Mosaic cards */
.mosaic{padding:2.6rem 0}
.mosaic-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem}
.mosaic-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.mosaic-card img{width:100%; height:220px; object-fit:cover}
.mosaic-card figcaption{padding:1rem}
.mosaic-card h4{margin:0 0 .3rem}
@media (max-width: 900px){ .mosaic-grid{grid-template-columns:1fr} }

/* Services */
.services{padding:3rem 0}
.services h2{color:#fff; text-align:left; margin:0 0 1.2rem}
.service-cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
.card{background:var(--card); color:#e2ecff; padding:1.2rem; border-radius:var(--radius); box-shadow:var(--shadow)}
.card .icon{font-size:1.6rem; margin-bottom:.6rem; color:#a8c7ff}
.services-portrait{margin-top:1.5rem}
.services-portrait img{width:100%; height:auto; border-radius:999px; max-width:560px; display:block}
@media (max-width: 900px){
  .service-cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 580px){
  .service-cards{grid-template-columns:1fr}
}

/* About 2 */
.about2{padding:3rem 0}
.about2-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1.5rem; align-items:center}
.about2-media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
@media (max-width: 900px){ .about2-grid{grid-template-columns:1fr} }

/* Contact */
.contact{padding:3rem 0}
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:1.5rem}
.contact-card{background:#e9f0fb; padding:1.4rem; border-radius:var(--radius)}
.contact-card h4{margin:.2rem 0 .6rem}
.contact-card .socials a{color:#0e2a4a; margin-right:.6rem}
.contact-card .muted{color:#5d6b80; font-size:.9rem}
.contact-form{background:#fff; padding:1.4rem; border-radius:var(--radius); box-shadow:var(--shadow)}
.contact-form h3{margin-top:0}
.contact-form label{display:grid; gap:.35rem; margin:.6rem 0}
.contact-form input, .contact-form textarea{
  width:100%; padding:.9rem .9rem; border:1px solid #d6deea; border-radius:10px; font:inherit
}
.contact-form button{margin-top:.5rem}
@media (max-width: 900px){ .contact-grid{grid-template-columns:1fr} }

/* Footer */
.site-footer{background:var(--bg); color:#cfe1ff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.tiny{font-size:.85rem; margin:.2rem 0}
.footer-inner .socials a{color:#cfe1ff; margin-left:.6rem}
.footer-inner .socials a:hover{color:#fff}