
:root{--navy:#1a2030;--green:#1b5e38;--green2:#17502f;--tint:#eaf5ee;--line:#d7f0e6;--text:#1d2433;--muted:#5a6478;--blue:#1e88e5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:#fff;line-height:1.6}
h1,h2,h3,h4{font-family:Montserrat,Inter,sans-serif}
a{color:var(--green)}
header{background:var(--navy);position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.bar{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{height:54px;width:auto;display:block}
.right{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;text-decoration:none;font-weight:700;border:0;border-radius:999px;padding:12px 22px;font-size:1rem;cursor:pointer;font-family:Inter,sans-serif}
.btn:hover{background:var(--green2)}
.btn.sm{padding:9px 18px;font-size:.95rem}
.btn svg{width:18px;height:18px}
.burger{background:none;border:0;color:#cfd6e6;cursor:pointer;padding:6px}
.burger svg{width:28px;height:28px;display:block}
nav#menu{display:none;background:#141a28}
nav#menu.open{display:block}
nav#menu a{display:block;max-width:1080px;margin:0 auto;padding:12px 20px;color:#dbe2f0;text-decoration:none;border-top:1px solid #232b3f}
nav#menu a:hover{color:#fff;background:#1a2236}
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:56px 0 64px}
.hero:after{content:"";position:absolute;right:-140px;top:-120px;width:520px;height:520px;border-radius:50%;background:#1c2b30;opacity:.9}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.badge{display:inline-block;background:var(--green);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.06em;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.12;margin:0 0 18px;font-weight:800}
.lead{font-size:1.2rem;margin:0 0 16px;color:#e7ecf6}
.sub{color:#9aa6bd;max-width:420px;margin:0 0 26px}
.formcard{background:#fff;color:var(--text);border-radius:18px;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.formcard h2{margin:0 0 14px;font-size:1.5rem}
label.f{display:block;font-weight:700;font-size:.95rem;margin:14px 0 6px}
.formcard input[type=text],.formcard input[type=tel]{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;font-size:1rem;background:#f9fdfb}
.consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0}
.consent input{margin-top:4px;width:18px;height:18px;flex:none}
.consent label{font-weight:700;font-size:.85rem;color:#3a4358}
.formcard button.btn{width:100%;justify-content:center;border-radius:10px;padding:15px}
.small{font-size:.85rem;color:var(--muted)}
.center{text-align:center}
.msg{display:none;padding:12px;border-radius:8px;margin-top:14px;font-size:.95rem}
#ok{background:#e7f6ec;border:1px solid #9fd5b0}
#err{background:#fdecea;border:1px solid #f0a8a0}
.stats{background:var(--green);color:#fff;padding:34px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stats b{display:block;font-family:Montserrat,sans-serif;font-size:2rem}
.stats span{color:#b9f0cf;font-weight:600;font-size:.95rem}
section.blk{padding:64px 0}
section.blk h2{font-size:clamp(1.6rem,3.5vw,2.2rem);text-align:center;margin:0 0 36px;font-weight:800}
.tint{background:var(--tint)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.card .n{font-family:Montserrat,sans-serif;font-size:2.4rem;font-weight:800;color:var(--green)}
.card h3{margin:6px 0 8px}
.card p{margin:0;color:var(--muted)}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.why .card{display:flex;gap:14px;padding:20px}
.why .tick{flex:none;width:36px;height:36px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.why .tick svg{width:18px;height:18px}
.why h3{margin:0 0 2px;font-size:1rem}
.cta{background:var(--navy);color:#fff;text-align:center;padding:64px 0}
.cta h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 10px;color:#fff}
.cta p{color:#cfd6e6;margin:0 0 24px}
footer{background:var(--navy);color:#c5cee0;padding:48px 0 28px;font-size:.95rem}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;padding-bottom:28px;border-bottom:1px solid #2a3348}
footer h4{color:#fff;margin:0 0 12px;letter-spacing:.04em}
footer a{color:#c5cee0;text-decoration:none;display:block;margin:6px 0}
footer a:hover{color:#fff}
footer .legal{color:#8b97b0;font-size:.85rem;margin-top:22px}
footer .legal a{display:inline;text-decoration:underline}
.page{padding:48px 0}
.page h1{font-size:2.2rem;margin:0 0 6px;color:var(--navy)}
.page h2{color:var(--navy);margin-top:28px;font-size:1.3rem}
.page .card{padding:28px;margin-top:20px}
.muted{color:var(--muted)}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:24px}.logo{height:46px}}

/* Dark inner pages (Contact, Privacy, Terms) */
main.page{background:var(--navy);color:#d5dbe8;padding:56px 0 72px;min-height:60vh}
.page h1{color:#fff}
.page h2{color:#fff}
.page .muted{color:#9aa6bd}
.page .card{background:#212a3f;border:1px solid #2f3a55;color:#d5dbe8}
.page .card p{color:#d5dbe8}
.page .card strong{color:#fff}
.page a{color:#7bd8a8}
.page a:hover{color:#fff}
.page .card p{margin:0 0 14px}
.page .card h2:first-child{margin-top:0}
.page .formcard h2{color:var(--text)}
.page .formcard a{color:var(--green)}
.page .formcard a:hover{color:var(--green2)}
.page .formcard p,.page .formcard label{color:inherit}

/* Form fields, validation, notes, and success pop-up */
.formcard select,.formcard textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;font-size:1rem;background:#f9fdfb;font-family:Inter,system-ui,sans-serif;color:var(--text)}
.formcard input[type=text],.formcard input[type=tel]{font-family:Inter,system-ui,sans-serif;color:var(--text)}
.formcard textarea{resize:vertical;min-height:84px}
.formcard .req{color:#c62828}
.formcard .opt{font-weight:500;color:var(--muted);font-size:.85rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formcard .invalid{border-color:#c62828 !important;background:#fff6f5 !important;outline:0}
.ferr{color:#c62828;font-size:.85rem;font-weight:600;margin-top:5px;min-height:0}
.ferr:empty{display:none}
.consent + .ferr{margin:-8px 0 12px}
.modal-bg{position:fixed;inset:0;background:rgba(10,14,24,.72);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal{background:#fff;color:var(--text);border-radius:18px;padding:32px 26px 28px;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal h3{margin:14px 0 8px;font-size:1.5rem;color:var(--navy)}
.modal p{margin:0 0 22px;color:var(--muted)}
.modal .btn{justify-content:center;min-width:140px}
.modal-tick{width:64px;height:64px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto}
.modal-tick svg{width:34px;height:34px}

/* ---- Desktop nav, click-to-call pill, animated burger, mobile drawer ---- */
body.menu-lock{overflow:hidden}

.dnav{display:none}
.phone-pill{display:none}

/* burger: 3-bar icon that morphs into an X */
.burger{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.burger span{position:absolute;left:8px;width:24px;height:2.5px;background:#cfd6e6;border-radius:2px;transition:transform .28s ease,opacity .2s ease,top .28s ease}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:25px}
.burger.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* mobile drawer overlay */
.menu-backdrop{position:fixed;inset:0;background:rgba(6,9,16,.55);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:29}
.menu-backdrop.open{opacity:1;visibility:visible}
nav#menu{position:fixed;top:0;left:0;right:0;background:linear-gradient(180deg,#12182a 0%,#0e1322 100%);border-bottom:1px solid #26314a;box-shadow:0 18px 40px rgba(0,0,0,.5);max-height:0;overflow:hidden;opacity:0;transition:max-height .32s ease,opacity .28s ease;z-index:30;padding-top:64px}
nav#menu.open{max-height:420px;opacity:1}
nav#menu a{display:block;max-width:1080px;margin:0 auto;padding:16px 24px;color:#dbe2f0;text-decoration:none;border-top:1px solid #232b3f;border-left:3px solid transparent;font-weight:600;transition:background .15s,border-color .15s}
nav#menu a:hover{color:#fff;background:#1a2236;border-left-color:var(--green)}

@media(min-width:861px){
  .burger{display:none}
  .phone-pill{display:inline-flex;align-items:center;gap:7px;color:#dbe2f0;text-decoration:none;font-weight:700;font-size:.95rem;padding:9px 14px;border:1px solid #2f3a55;border-radius:999px}
  .phone-pill:hover{border-color:#4a5a80;color:#fff}
  .phone-pill svg{width:16px;height:16px}
  .dnav{display:flex;align-items:center;gap:22px;margin:0 6px}
  .dnav a{color:#c5cee0;text-decoration:none;font-weight:600;font-size:.93rem;white-space:nowrap}
  .dnav a:hover{color:#fff}
  .menu-backdrop,nav#menu{display:none !important}
}

/* hero skyline illustration */
.hero-skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:70px;z-index:1;pointer-events:none}
@media(max-width:820px){.hero-skyline{height:40px}}
