:root{
  --bg:#ffffff;
  --bg-secondary:#F6F6F8;
  --text:#16181D;
  --text-muted:#5B6270;
  --navy:#0B2545;
  --navy-2:#122F58;
  --blue:#2F6FED;
  --gold:#9A7B2E;
  --gold-soft:#F7F0DE;
  --border:#E6E7EB;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html, body{overflow-x:hidden; max-width:100%;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.bg-secondary{background:var(--bg-secondary);}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
h1,h2,h3{font-weight:700; letter-spacing:-0.02em; margin:0;}
h1{font-size:52px; line-height:1.08; color:var(--navy);}
h2{font-size:34px; line-height:1.18; color:var(--navy);}
h3{font-size:20px; color:var(--navy);}
p{margin:0;}
.lede{font-size:19px; color:var(--text-muted); max-width:560px;}
.muted{color:var(--text-muted);}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---- Header ---- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; flex-direction:column; line-height:1.2;}
.brand-name{font-weight:800; font-size:15px; color:var(--navy); letter-spacing:.01em;}
.brand-tagline{font-size:11px; color:var(--gold); font-weight:600; letter-spacing:.04em;}
.nav{flex:1; display:flex; justify-content:center;}
.nav a{font-size:14px; font-weight:600; color:var(--text-muted); text-decoration:none;}
.nav a:hover{color:var(--navy);}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px; border-radius:var(--radius-sm);
  font-weight:600; font-size:15px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:all .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-2);}
.btn-header{padding:10px 20px; font-size:14px;}

/* ---- Hero ---- */
.hero{padding:120px 0 88px; text-align:center;}
.hero h1{max-width:820px; margin:0 auto;}
.hero .lede{margin:24px auto 0; max-width:600px; text-align:center; font-size:20px;}
.hero-cta{margin-top:36px; display:flex; flex-direction:column; align-items:center; gap:10px;}
.microcopy{font-size:13px; color:var(--text-muted);}

/* ---- Proof band ---- */
.proof-band{
  background:var(--navy); color:#fff; padding:30px 0;
}
.proof-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 42px;
  text-align:center; font-weight:700; font-size:19px;
}
.proof-row span{color:var(--gold); font-weight:800;}
.proof-sep{opacity:.35; font-weight:400;}

/* ---- Case study / proof section ---- */
.case-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:44px;
}
.before-after{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.stat-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px 22px;
}
.stat-card .label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; margin-bottom:8px;}
.stat-card .value{font-size:28px; font-weight:800; color:var(--navy);}
.stat-card.after .value{color:var(--blue);}
.quote-card{
  background:#fff; border-left:3px solid var(--gold); border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:26px 28px; box-shadow:0 1px 2px rgba(11,37,69,.04);
}
.quote-text{font-size:18px; font-style:italic; color:var(--navy); line-height:1.5;}
.quote-footer{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:14px;}
.quote-attr{margin:0; font-size:14px; color:var(--text-muted); font-weight:600;}
.logo-chip{
  flex-shrink:0; width:56px; height:56px; object-fit:contain;
  border-radius:var(--radius-sm);
}
.text-link{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--blue); text-decoration:none; margin-top:18px;}

/* ---- Why it worked / Framework ---- */
.narrow{max-width:680px;}
.framework-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px;
}
.framework-item{
  background:var(--bg-secondary); border-radius:var(--radius-md); padding:26px 20px;
}
.framework-item .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff;
  font-size:13px; font-weight:700; margin-bottom:14px;
}
.framework-item h3{font-size:16px; margin-bottom:6px;}
.framework-item p{font-size:14px; color:var(--text-muted);}

/* ---- Process ---- */
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px;
}
.process-item{padding-top:8px; border-top:2px solid var(--gold);}
.process-item .step-no{font-size:13px; font-weight:700; color:var(--gold); margin-bottom:10px;}
.process-item p{font-size:15px;}
.process-note{margin-top:32px; font-style:italic; color:var(--text-muted);}

/* ---- Founder / About ---- */
.founder-wrap{display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;}
.avatar-photo{
  width:180px; height:180px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border); display:block;
}
.avatar-photo.lg{width:220px; height:220px;}
.founder-block{margin-bottom:22px;}
.founder-block h3{margin-bottom:8px;}
.founder-block p{color:var(--text-muted);}
.about-intro h1{font-size:40px;}
.about-intro .lede{margin-top:14px; max-width:520px;}

/* ---- Video testimonial ---- */
.video-embed{
  aspect-ratio:16/9; background:var(--navy); border-radius:var(--radius-lg);
  overflow:hidden; max-width:100%; margin:0 auto;
}
.video-embed.square{aspect-ratio:1/1; max-width:420px;}
.video-embed iframe{width:100%; height:100%; border:0; display:block;}
.video-note{font-size:12px; color:var(--text-muted); margin-top:10px;}

/* ---- Guarantee ---- */
.guarantee-card{
  background:var(--gold-soft); border:1px solid #EAD9AE; border-radius:var(--radius-lg);
  padding:44px; text-align:center; max-width:720px; margin:40px auto 0;
}
.guarantee-card .quote-text{color:var(--navy); font-size:20px;}

/* ---- Final CTA ---- */
.final-cta{background:var(--navy); color:#fff; text-align:center; padding:100px 0;}
.final-cta h2{color:#fff;}
.final-cta .lede{color:rgba(255,255,255,.75); margin:20px auto 0; text-align:center;}
.final-cta .btn-primary{background:#fff; color:var(--navy); margin-top:32px;}
.final-cta .btn-primary:hover{background:var(--gold-soft);}
.final-cta .microcopy{color:rgba(255,255,255,.55); margin-top:12px;}

footer{padding:40px 0; text-align:center; font-size:13px; color:var(--text-muted);}
footer p{margin:0 0 8px;}
footer .footer-links{margin-bottom:0;}
footer .footer-links a{color:var(--text-muted); font-size:12px; text-decoration:underline;}
footer .footer-links a:hover{color:var(--navy);}

/* ---- Mobile floating CTA ---- */
.mobile-cta{
  display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
}
.mobile-cta .btn{width:100%; padding:16px; font-size:16px; box-shadow:0 8px 24px rgba(11,37,69,.25);}
.mobile-cta.is-hidden{display:none !important;}

@media (max-width: 860px){
  h1{font-size:36px;}
  h2{font-size:27px;}
  .section{padding:64px 0;}
  .case-grid, .founder-wrap{grid-template-columns:1fr;}
  .framework-grid, .process-grid{grid-template-columns:1fr 1fr;}
  .before-after{grid-template-columns:1fr 1fr;}
  .btn-header{display:none;}
  .mobile-cta{display:block;}
  body{padding-bottom:84px;}
  .avatar-photo{width:120px; height:120px; margin:0 auto;}
  .avatar-photo.lg{width:140px; height:140px;}
  .about-intro{text-align:center;}
  .about-intro .lede{margin-left:auto; margin-right:auto;}
  /* These sections put .section and .wrap on the same element, so .section's
     `padding:…0` shorthand cancels .wrap's horizontal padding. Restore equal
     left/right padding on mobile where content would otherwise touch the edges. */
  #why-built, #about-intro-section{padding-left:24px; padding-right:24px;}
}
@media (max-width: 520px){
  .framework-grid, .process-grid{grid-template-columns:1fr;}
  .before-after{grid-template-columns:1fr;}
  .video-embed.square{max-width:100%;}
  .proof-row{flex-direction:column; gap:6px;}
  .proof-sep{display:none;}
}