:root{--teal:#4eaaa9;--teal-d:#3d8f8e;--ink:#333;--body:#666;--mute:#999;--line:#eee;--bg:#f9f9f9;--dark:#222}
*{box-sizing:border-box}
body{margin:0;font:400 15px/1.8 Rubik,Helvetica,Arial,sans-serif;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}a:hover{color:var(--ink)}
h1,h2,h3{font-weight:300;color:var(--ink);letter-spacing:-1px;line-height:1.2;margin:0 0 .6em}
h2{font-size:28px}h3{font-size:22px}

/* header */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav .logo img{width:200px}
.links{display:flex;align-items:center;gap:26px}
.links a:not(.btn){font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ink)}
.links a:not(.btn):hover{color:var(--teal)}
.burger,#m{display:none}

/* buttons */
.btn{display:inline-block;background:var(--teal);color:#fff!important;border:1px solid var(--teal);padding:12px 28px;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;line-height:1.4;cursor:pointer;transition:.2s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--teal)!important}.btn.ghost:hover{background:var(--teal);border-color:var(--teal);color:#fff!important}
.btn.light{background:rgba(255,255,255,.18);border-color:transparent}.btn.light:hover{background:#fff;color:var(--ink)!important}
.more{display:inline-block;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}

/* home hero */
.homehero{background:#777 center/cover;filter:none;min-height:340px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:90px 20px 110px;position:relative}
.homehero::before{content:"";position:absolute;inset:0;background:rgba(40,40,40,.25)}
.homehero div{position:relative}
.homehero h1{color:#fff;font-size:clamp(36px,6vw,58px);font-weight:300;font-style:italic;letter-spacing:-1px;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.homehero p{margin:0;font-size:16px}
.callbar{max-width:820px;margin:-34px auto 0;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 0 28px;position:relative;z-index:2;font-size:13px}
.callbar span{padding:18px 0}.callbar .btn{align-self:stretch;display:flex;align-items:center;padding:0 34px;border:0}

/* feature: overlapping card over photo */
.feature{max-width:1100px;margin:70px auto 20px;padding:0 24px;position:relative;display:grid;grid-template-columns:1fr 1.45fr;align-items:center}
.feature img{grid-column:2;grid-row:1;width:100%;height:440px;object-fit:cover}
.featcard{grid-column:1;grid-row:1;position:relative;z-index:2;background:#fff;padding:44px 40px;box-shadow:0 10px 50px rgba(0,0,0,.14);margin-right:-60px}
.featcard h2{font-size:36px}.featcard p{font-size:13px;margin-bottom:26px}

/* intro statement */
.center{text-align:center;padding:60px 24px 10px}
.big{font-size:clamp(28px,4vw,38px);max-width:760px;margin:0 auto 14px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:#bbb;margin:0}
.leaf{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 0;max-width:260px;color:var(--teal)}
.leaf i{flex:1;height:1px;background:#ddd}

/* three cards */
.cards{max-width:1100px;margin:30px auto 70px;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:34px 28px;box-shadow:0 6px 30px rgba(0,0,0,.09);color:var(--body);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.14);color:var(--body)}
.card h3{font-size:22px;color:var(--ink)}.card p{font-size:13px;flex:1}
.card .more{margin-top:18px}

/* colour bands */
.band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:46px max(24px,calc((100% - 1100px)/2))}
.band h2{color:#fff;font-size:24px;margin:0;letter-spacing:-.5px}
.band.teal{background:#1fa9a9}.band.slate{background:#566262}
.parallax{background:#8a9aa0 center/cover fixed;min-height:260px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;padding:60px 24px}
.parallax::before{content:"";position:absolute;inset:0;background:rgba(40,60,70,.35)}
.parallax div{position:relative;color:#fff}.parallax h2{color:#fff;font-size:26px;margin-bottom:8px}
.parallax p{margin:0;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:500}

/* inner page hero */
.pagehero{background:#e9eef0 center/cover;display:flex;align-items:center;justify-content:center;text-align:center;min-height:240px;padding:60px 24px;position:relative}
.pagehero::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.58)}
.pagehero div{position:relative}
.pagehero h1{font-size:clamp(34px,5vw,50px);letter-spacing:-2px;margin:0}
.tagline{margin:10px 0 0;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#555}
.plain{text-align:center;background:var(--bg);padding:60px 20px}.plain h1{margin:0;font-size:44px}

/* content pages */
.wrap{max-width:820px;margin:auto;padding:56px 24px}
.prose h2{margin-top:1.8em;font-size:28px}.prose h2:first-child{margin-top:0}
.prose p{font-size:15px}.prose b{color:var(--ink);font-weight:500}
.prose ul{padding-left:1.2em}.cta{margin-top:2.4em}.cta .btn{margin:0 8px 8px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;max-width:1100px;margin:0 auto 30px}
.grid .card{padding:30px 20px}
.pic{margin:24px 0}
.rates{list-style:none;padding:0;max-width:460px}.rates li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 0;font-size:18px;font-weight:300;color:var(--ink)}
.rates b,.addon b{color:var(--teal);font-weight:500}.addon h3{margin-bottom:4px;font-size:20px}

/* footer */
footer{background:var(--dark);color:#999;font-size:13px}
.cols{max-width:1100px;margin:auto;padding:64px 24px 40px;display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:48px}
footer h3{font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:18px}
footer a{color:#aaa}footer a:hover{color:#fff}footer p{margin:0 0 16px}footer b{color:#ddd;font-weight:500}
.cols img{margin-bottom:16px}
.soc{display:flex;gap:10px;flex-wrap:wrap}.soc a{width:36px;height:36px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center}.soc img{margin:0}
.copy{border-top:1px solid #333;margin:0;padding:22px 24px;font-size:12px}

/* mobile */
@media(max-width:860px){
 .nav{padding:12px 18px}.nav .logo img{width:160px}
 .burger{display:block;width:30px;height:22px;position:relative;cursor:pointer}
 .burger span,.burger span::before,.burger span::after{position:absolute;left:0;width:100%;height:2px;background:var(--ink);content:""}
 .burger span{top:10px}.burger span::before{top:-8px}.burger span::after{top:8px}
 .links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 18px 20px;box-shadow:0 14px 24px rgba(0,0,0,.12)}
 .links a:not(.btn){padding:13px 0;width:100%;border-bottom:1px solid var(--line)}.links .btn{margin-top:16px}
 #m:checked~.links{display:flex}
 .feature{grid-template-columns:1fr;margin-top:50px}.feature img{grid-column:1;grid-row:1;height:280px}.featcard{grid-column:1;grid-row:2;margin:-50px 12px 0;padding:30px 24px}
 .cards{grid-template-columns:1fr}.cols{grid-template-columns:1fr;gap:32px}
 .callbar{flex-direction:column;align-items:stretch;padding:0;text-align:center;margin:-30px 16px 0}.callbar span{padding:16px}.callbar .btn{justify-content:center;padding:16px}
 .parallax{background-attachment:scroll}.band{flex-direction:column;align-items:flex-start}
}