*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#102235;background:#fff}

.site-header{position:sticky;top:0;z-index:10;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:rgba(255,255,255,.96);border-bottom:1px solid #eee}

.brand{font-family:Georgia,serif;font-size:22px;letter-spacing:2px;text-decoration:none;color:#102235}

.brand span{color:#b4853b}

nav{display:flex;gap:32px}

nav a{font-size:12px;letter-spacing:1.5px;color:#102235;text-decoration:none}

.header-cta,.button,form button{background:#b4853b;color:white;border:0;border-radius:28px;padding:14px 24px;text-decoration:none;font-size:12px;letter-spacing:1px}

.hero{position:relative;background:#f8f5ef;overflow:hidden}

.hero img{display:block;width:100%;height:auto}

.hero-cta{position:absolute;left:50%;bottom:7%;transform:translateX(-50%)}

.button{display:inline-block;box-shadow:0 8px 25px rgba(0,0,0,.15)}

.button span{margin-left:16px;font-size:18px}

.section{max-width:1050px;margin:auto;padding:100px 7%}

.intro{text-align:center}

.eyebrow{font-size:11px;letter-spacing:3px;color:#b4853b;font-weight:bold}

h1{font-family:Georgia,serif;font-size:48px;line-height:1.12;font-weight:normal;margin:20px 0}

h2{font-family:Georgia,serif;font-size:32px;font-weight:normal}

.section p{font-size:17px;line-height:1.7;max-width:700px}

.intro p{margin:25px auto}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

.cards article{padding:34px;background:#f8f5ef}

.cards article h2{margin-top:0}

.cards article p{font-size:15px}

.dark{max-width:none;padding-left:12%;padding-right:12%;background:#102235;color:#fff}

.dark p{color:#dbe1e6}

.join{text-align:center}

.join p{margin-left:auto;margin-right:auto}

form{display:flex;max-width:620px;margin:30px auto 12px;gap:10px}

input{flex:1;padding:15px 18px;border:1px solid #ccc;border-radius:28px;font-size:15px}

.thanks{color:#b4853b!important;font-weight:bold}

small{color:#777}

footer{padding:35px 7%;display:flex;justify-content:space-between;border-top:1px solid #eee;font-size:12px;letter-spacing:1px}

footer span{color:#777}

@media(max-width:700px){

 .site-header{height:auto;padding:18px 5%;gap:15px;flex-wrap:wrap}

 nav{order:3;width:100%;justify-content:center;gap:18px}

 .header-cta{padding:10px 14px}

 .hero-cta{bottom:4%}

 .button{padding:11px 15px;font-size:10px}

 h1{font-size:35px}

 .section{padding:70px 7%}

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

 form{flex-direction:column}

 footer{flex-direction:column;gap:10px}

}