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

:root {
  --navy: #12365c;
  --blue: #0879c9;
  --pale: #edf6fb;
  --line: #c8d9e6;
  --white: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", Arial, sans-serif; color: var(--navy); background: #fff; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 96px; display: flex; align-items: center; padding: 0 5.5%;
  background: #fff; position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 12px rgba(18,54,92,.08);
}
.brand img { width: 250px; height: auto; display: block; }
.nav { margin-left: auto; display: flex; gap: 30px; font-size: 15px; }
.nav a { padding: 36px 0 12px; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a.active { color: var(--blue); border-bottom-color: var(--blue); }

.menu-toggle { display:none; background:none; border:0; font-size:26px; color:var(--navy); }

.hero { position: relative; height: min(54vw, 610px); min-height: 430px; overflow:hidden; }
.hero > img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.04), transparent 60%); }
.hero-copy { position:absolute; left: 13%; top: 13%; z-index:2; max-width: 530px; }
.hero-logo { width: 430px; max-width: 80vw; }
.hero-copy p { margin: 34px 0 0 10px; font-size: 20px; line-height: 1.55; font-weight: 500; }

.feature-grid { display:grid; grid-template-columns:repeat(5,1fr); padding: 42px 6%; background:#fff; }
.feature { text-align:center; padding: 0 28px; border-right:1px solid var(--line); }
.feature:last-child { border-right:0; }
.icon { display:block; font-size:42px; height:58px; line-height:58px; color:var(--navy); font-weight:700; }
.feature h2 { margin: 8px 0 12px; font-size:21px; }
.feature p { margin:0; font-size:14px; line-height:1.55; color:#294b6d; }

.welcome { display:grid; grid-template-columns:1fr 1fr; gap: 40px; padding: 54px 6.5%; background:var(--pale); align-items:center; }
.welcome-image img { width:100%; display:block; }
.welcome-copy h2 { font-family:Pacifico,cursive; font-size:38px; font-weight:400; margin:0 0 20px; color:var(--navy); }
.welcome-copy p { font-size:16px; line-height:1.65; max-width:620px; }
.signature { font-family:Pacifico,cursive; color:var(--blue); font-size:28px; margin-top:12px; }

.hidden-content { padding: 55px 8%; background:#fff; }
.hidden-content h2 { margin-top:0; }
footer { background:var(--navy); color:#fff; padding:28px 6%; display:flex; align-items:center; gap:24px; font-size:14px; }
.footer-brand { font-family:Pacifico,cursive; font-size:30px; }
.footer-links { margin-left:auto; display:flex; gap:18px; }
.footer-links a:hover { text-decoration:underline; }

@media (max-width: 850px) {
  .site-header { height:76px; padding:0 5%; }
  .brand img { width:185px; }
  .menu-toggle { display:block; margin-left:auto; }
  .nav { display:none; position:absolute; left:0; right:0; top:76px; background:#fff; padding:8px 6%; flex-direction:column; gap:0; box-shadow:0 10px 20px rgba(0,0,0,.08); }
  .nav.open { display:flex; }
  .nav a { padding:14px 0; border:0; }
  .hero { min-height:420px; }
  .hero-copy { left:7%; top:10%; }
  .hero-copy p { font-size:16px; margin-top:20px; }
  .feature-grid { grid-template-columns:1fr 1fr; padding:28px 5%; }
  .feature { padding:20px 15px; border-right:0; border-bottom:1px solid var(--line); }
  .welcome { grid-template-columns:1fr; padding:40px 6%; }
  footer { flex-direction:column; text-align:center; }
  .footer-links { margin-left:0; flex-wrap:wrap; justify-content:center; }
}
@media (max-width: 520px) {
  .hero { min-height:360px; }
  .hero-logo { width:290px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature { border-bottom:1px solid var(--line); }
}