:root{
  --navy:#1b2141;
  --navy-2:#242b55;
  --green:#18a56d;
  --bg:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --line:#e5e7eb;
  --shadow: 0 12px 30px rgba(15, 23, 42, .10);
  --radius:16px;
  --max:1100px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }
.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }
.skip-link{ position:absolute; left:-999px; top:10px; background:#fff; border:1px solid var(--line); padding:10px 12px; border-radius:12px; z-index:999; }
.skip-link:focus{ left:12px; }

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; min-width: 180px; }
.brand img{ width:150px; height:auto; }

.nav{ display:flex; align-items:center; gap:22px; font-weight:700; color: rgba(15,23,42,.85); }
.nav a{ padding:8px 10px; border-radius:12px; }
.nav a.active{ background: rgba(27,33,65,.06); }
.nav a.cta{
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color:#fff; border:1px solid rgba(27,33,65,.18);
  padding:10px 14px; border-radius:14px;
  box-shadow: 0 10px 22px rgba(27,33,65,.12);
}

.nav-toggle{ display:none; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; }
.hamburger{ width:18px; height:2px; background: var(--navy); position:relative; display:block; }
.hamburger:before,.hamburger:after{ content:""; position:absolute; left:0; width:18px; height:2px; background: var(--navy); }
.hamburger:before{ top:-6px; }
.hamburger:after{ top:6px; }

.hero{
  padding:64px 0 34px;
  background:
    radial-gradient(900px 350px at 10% 0%, rgba(24,165,109,.10), transparent 55%),
    radial-gradient(900px 380px at 95% 0%, rgba(27,33,65,.10), transparent 55%),
    linear-gradient(180deg, rgba(27,33,65,.02), transparent 55%);
}
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:start; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; color: var(--navy);
  background: rgba(24,165,109,.10);
  border: 1px solid rgba(24,165,109,.25);
  padding:8px 12px; border-radius:999px; font-size:13px;
}
.dot{ width:7px; height:7px; border-radius:999px; background: var(--green); display:inline-block; }

h1{ margin:14px 0 10px; font-size: clamp(34px, 4vw, 52px); line-height:1.08; letter-spacing:-.5px; color: var(--navy); }
.lead{ margin:0 0 18px; font-size: 17px; color: rgba(15,23,42,.78); max-width: 62ch; }

.btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius: 14px;
  border:1px solid rgba(27,33,65,.18);
  font-weight:900; cursor:pointer;
  transition: transform .15s ease;
}
.btn-primary{ background: linear-gradient(135deg, var(--navy), var(--navy-2)); color:#fff; box-shadow: var(--shadow); }
.btn-outline{ background:#fff; color: var(--navy); }
.btn:hover{ transform: translateY(-1px); }

.hero-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:22px; }
.hero-card h2{ margin:0 0 10px; color: var(--navy); font-size:18px; }
.list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.list li{ padding-left:26px; position:relative; color: rgba(15,23,42,.80); }
.list li:before{
  content:"✓"; position:absolute; left:0; top:0;
  width:18px; height:18px; border-radius:7px;
  background: rgba(24,165,109,.12);
  border:1px solid rgba(24,165,109,.25);
  display:flex; align-items:center; justify-content:center;
  color: var(--green); font-size:12px; font-weight:900;
}
.trust{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.pill{ font-size:13px; background: rgba(27,33,65,.04); border:1px solid rgba(27,33,65,.10); color: rgba(27,33,65,.86); padding:8px 10px; border-radius: 999px; }

/* Credibility row (e.g., MAAT / AAT) */
.cred{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.cred .aat-badge{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid rgba(27,33,65,.10); background: rgba(255,255,255,.70); }
.cred .aat-badge img{ height:20px; width:auto; display:block; }
.cred .aat-badge .aat-text{ display:flex; flex-direction:column; line-height:1.1; }
.cred .aat-badge .aat-text strong{ font-size:12px; color: var(--navy); letter-spacing:.2px; }
.cred .aat-badge .aat-text span{ font-size:12px; color: var(--muted); }

/* Calendly embed */
.calendly-inline-widget{ width:100%; }

.section{ padding:64px 0; }
.section.alt{ background: rgba(27,33,65,.02); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section h2{ margin:0 0 10px; font-size: 30px; color: var(--navy); letter-spacing:-.3px; }
.muted{ color: var(--muted); }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px; }
.card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:22px; box-shadow: 0 8px 20px rgba(15,23,42,.06); }
.card h3{ margin:0 0 8px; color: var(--navy); }
.card p{ margin:0 0 12px; color: rgba(15,23,42,.76); }
.bullets{ margin:0; padding-left:18px; color: rgba(15,23,42,.76); }
.bullets li{ margin:6px 0; }

.split{ display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start; }
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.badge{ padding:8px 10px; border-radius:999px; border:1px solid rgba(24,165,109,.25); background: rgba(24,165,109,.10); color: rgba(15,23,42,.85); font-weight:800; font-size:13px; }

.steps{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin-top:16px; }
.step{ display:flex; gap:14px; }
.num{ width:36px; height:36px; border-radius:14px; background: rgba(27,33,65,.06); border:1px solid rgba(27,33,65,.12); display:flex; align-items:center; justify-content:center; color: var(--navy); font-weight:900; }
.step h4{ margin:0 0 6px; color: var(--navy); }
.step p{ margin:0; color: rgba(15,23,42,.76); }

.form{ display:grid; gap:14px; }
.field{ display:grid; gap:8px; }
label{ font-weight:900; color: rgba(27,33,65,.90); font-size:14px; }
input, select, textarea{ padding:12px 12px; border-radius: 14px; border:1px solid var(--line); background:#fff; outline:none; font: inherit; }
input:focus, select:focus, textarea:focus{ border-color: rgba(24,165,109,.55); box-shadow: 0 0 0 4px rgba(24,165,109,.12); }
.small{ font-size:13px; color: var(--muted); margin:0; }

.contact-box .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.contact-box .row:last-child{ border-bottom:none; }
.k{ font-weight:900; color: rgba(27,33,65,.90); }
.v a{ color: var(--navy); text-decoration:underline; text-underline-offset: 4px; }

.social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.social a{ border:1px solid rgba(27,33,65,.14); border-radius: 999px; padding:10px 12px; font-weight:900; color: rgba(27,33,65,.88); background:#fff; }
.social a:hover{ box-shadow: 0 10px 18px rgba(15,23,42,.08); }

.footer{ padding:28px 0; border-top:1px solid var(--line); background: #fff; }
.footer-inner{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer small{ color: var(--muted); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 920px){
  .hero-grid, .split{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
}

@media (max-width: 780px){
  .nav{ display:none; position:absolute; right:20px; top:64px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; flex-direction:column; width:min(260px, calc(100% - 40px)); box-shadow: var(--shadow); }
  .nav.open{ display:flex; }
  .nav-toggle{ display:inline-flex; }
  .brand img{ width:135px; }
}

@media (max-width: 520px){
  .container{ width: calc(100% - 28px); }
  .hero{ padding: 44px 0 24px; }
  h1{ font-size: 34px; }
  .lead{ font-size: 16px; }
  .btns{ gap:10px; }
  .btns .btn{ width:100%; }
  .header-inner{ padding:12px 0; }
  .nav{ right:14px; top:58px; width: calc(100% - 28px); }
  .brand img{ width:120px; }
  .hero-card{ padding:18px; }
  .card{ padding:18px; }
  .contact-box .row{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 380px){
  .nav a{ width:100%; text-align:left; }
  .nav a.cta{ width:100%; text-align:center; }
}
