body{
font-family:Arial,Helvetica,sans-serif;
margin:0;
background:linear-gradient(#f7fafc,#eef3f6);
color:#24323b;
line-height:1.7;
}

.container{
max-width:1100px;
margin:auto;
padding:30px 20px;
}

/* Navigation */

.nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}

.logo{
font-weight:700;
display:flex;
align-items:center;
gap:10px;
}

.logo-circle{
background:#e54839;
color:white;
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
}

nav a{
margin-left:20px;
text-decoration:none;
color:#24485e;
font-weight:600;
}

nav a.active{
background:white;
padding:6px 14px;
border-radius:20px;
}

/* HERO */

.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
padding-bottom:40px;
}

.hero h1{
font-size:48px;
line-height:1.1;
margin:10px 0;
}

.kicker{
color:#e54839;
font-weight:700;
text-transform:uppercase;
font-size:13px;
letter-spacing:.5px;
}

.intro{
color:#4c5d66;
}

.hero-image{
position:relative;
padding:14px;
border-radius:20px;
background:linear-gradient(135deg,#79c6e9,#6bb6da);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

.hero-image img{
display:block;
width:100%;
border-radius:12px;
}

/* Buttons */

.buttons{
margin-top:20px;
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn-primary{
background:#e54839;
color:white;
padding:12px 20px;
border-radius:24px;
text-decoration:none;
font-weight:600;
}

.btn-secondary{
background:white;
padding:12px 20px;
border-radius:24px;
text-decoration:none;
color:#24485e;
font-weight:600;
}

/* Statement */

.statement{
margin:46px 0 26px;
padding:14px 18px;
border-left:4px solid #e54839;
background:#f9fbfc;
border-radius:8px;
font-size:17px;
color:#31414b;
}

/* CTA */

.cta{
background:linear-gradient(135deg,#1b5d82,#246e96);
color:white;
padding:34px;
border-radius:18px;
margin-bottom:50px;
box-shadow:0 12px 28px rgba(0,0,0,0.12);
}

.cta h2{
margin-top:0;
}

.cta .btn-primary{
margin-top:10px;
display:inline-block;
}

/* Welcome */

.welcome{
background:#f7fafc;
border:1px solid rgba(20, 69, 101, 0.08);
border-radius:18px;
padding:34px 36px;
margin-bottom:50px;
box-shadow:0 8px 20px rgba(0,0,0,0.04);
position:relative;
}

.welcome::before{
content:"";
position:absolute;
left:0;
top:24px;
bottom:24px;
width:4px;
background:#e54839;
border-radius:4px;
}

.welcome h2{
margin:0 0 18px;
padding-left:16px;
font-size:34px;
line-height:1.2;
color:#24485e;
}

.welcome p{
margin:0 0 16px;
padding-left:16px;
max-width:760px;
color:#3f505a;
}

.welcome p:last-child{
margin-bottom:0;
}

/* Cards */

.cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:50px;
}

.card{
background:white;
padding:24px;
border-radius:12px;
box-shadow:0 8px 18px rgba(0,0,0,0.06);
border:1px solid rgba(0,0,0,0.03);
}

/* Contact */

.contact{
margin-bottom:40px;
}

/* Note */

.note{
border-top:1px solid #d7e0e5;
padding-top:20px;
color:#55656e;
}

/* Footer */

footer{
background:#e3eaef;
padding:20px 0;
}

.footer{
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-links a{
margin-left:20px;
text-decoration:none;
color:#24485e;
}

/* ---------------------------
   Subpages
--------------------------- */

.subpage-header{
background:linear-gradient(180deg,#f6fbff,#eef3f6);
padding:0 0 10px;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}

.brand{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
font-weight:700;
color:#24323b;
}

.brand-mark{
width:28px;
height:28px;
border-radius:50%;
background:#e54839;
display:inline-block;
}

.brand-text{
font-size:16px;
}

.site-nav ul{
list-style:none;
display:flex;
gap:20px;
margin:0;
padding:0;
}

.site-nav a{
text-decoration:none;
color:#24485e;
font-weight:600;
}

.site-nav a[aria-current="page"]{
background:white;
padding:6px 14px;
border-radius:20px;
}

.subpage-intro{
margin-bottom:20px;
}

.subpage-intro h1{
font-size:40px;
margin:10px 0;
}

.site-kicker{
color:#e54839;
font-weight:700;
text-transform:uppercase;
font-size:13px;
letter-spacing:.5px;
}

.site-main{
padding:40px 0;
}

.narrow-container{
max-width:760px;
}

.legal-card{
background:white;
padding:34px;
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.legal-card h2{
margin-top:26px;
}

.legal-card h2:first-child{
margin-top:0;
}

.site-footer{
background:#e3eaef;
padding:20px 0;
margin-top:40px;
}

.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-nav{
list-style:none;
display:flex;
gap:20px;
margin:0;
padding:0;
}

.footer-nav a{
text-decoration:none;
color:#24485e;
}

/* Skip Link */

.skip-link{
position:absolute;
left:-9999px;
}

.skip-link:focus{
left:20px;
top:20px;
background:white;
padding:10px;
border-radius:6px;
}

/* =================================
   Mobile
================================= */

html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}

@media (max-width:900px){

.container,
.narrow-container{
padding:24px 18px;
}

.nav,
.topbar,
.footer,
.footer-inner{
flex-direction:column;
align-items:flex-start;
gap:16px;
}

.hero{
grid-template-columns:1fr;
gap:28px;
}

.cards{
grid-template-columns:1fr;
}

}

@media (max-width:640px){

body{
font-size:16px;
line-height:1.65;
}

.container,
.narrow-container{
padding:20px 16px;
}

.nav,
.topbar{
margin-bottom:24px;
}

.logo,
.brand{
font-size:15px;
gap:8px;
}

.logo-circle,
.brand-mark{
width:24px;
height:24px;
}

.buttons{
flex-direction:column;
align-items:flex-start;
gap:12px;
}

.btn-primary,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
font-size:16px;
font-weight:700;
border-radius:18px;
}

.hero h1{
font-size:36px;
}

.intro{
font-size:17px;
}

.statement{
margin:28px 0 22px;
padding:14px 16px;
font-size:16px;
}

.welcome{
padding:24px 20px;
border-radius:14px;
}

.welcome h2{
font-size:28px;
}

.card,
.legal-card{
padding:20px 18px;
border-radius:12px;
}

.cta{
padding:24px 20px;
border-radius:14px;
}

}

@media (max-width:400px){

.hero h1{
font-size:31px;
}

.welcome h2,
.cta h2,
.contact h2,
.subpage-intro h1{
font-size:26px;
}

.card h3,
.legal-card h2{
font-size:20px;
}

.btn-primary,
.btn-secondary{
font-size:15px;
}

}

/* Burger */

.nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
width:46px;
height:46px;
border:0;
border-radius:10px;
background:#ffffff;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.06);
}

.nav-toggle span{
display:block;
width:22px;
height:2px;
margin:0 auto;
background:#24485e;
}

.main-nav{
display:flex;
align-items:center;
gap:20px;
}

.main-nav ul{
display:flex;
align-items:center;
gap:20px;
list-style:none;
margin:0;
padding:0;
}

@media (max-width:768px){


  .topbar,
  .nav{
    position:relative;
    align-items:center;
  }

  .nav-toggle{
    display:flex;
    margin-left:auto;
    z-index:1002;
  }

  .main-nav{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    z-index:1001;
    padding:14px;
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 12px 28px rgba(0,0,0,0.10);
    border:1px solid rgba(36,72,94,0.08);
  }

  .main-nav.is-open{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .main-nav a{
    display:block;
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    background:#f6f9fb;
    margin-left:0;
  }
}