/* Kyle Reid Marketing - Bold direction (see design-spec.md) */

:root{
  --ink:#10222f;
  --muted:#5d6f7d;
  --muted-strong:#4c5e6b;   /* small text on wash/band tiles, AA-safe */
  --accent:#5ba8f5;
  --accent-deep:#2478cd;
  --accent-text:#1d66b0;    /* accent text on wash chips, AA-safe */
  --band:#f2f8fe;
  --wash:#e3f0fc;
  --line:#e2e9ef;
  --bg:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:17px;
  font-weight:500;
}

.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
section{padding:100px 0}
.band{background:var(--band)}
.center{text-align:center}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent-deep);color:#fff;font-weight:800;
  padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- Nav ---------- */

.nav{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;justify-content:space-between;align-items:center;height:70px}
.wordmark{font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;padding:12px 0}
.wordmark span{color:var(--accent-deep)}

.btn{
  display:inline-block;
  background:var(--accent-deep);color:#fff;
  border-radius:999px;padding:14px 30px;
  font-weight:800;font-size:15.5px;text-decoration:none;
  box-shadow:0 6px 18px rgba(36,120,205,.25);
  transition:transform .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-small{padding:12px 22px;font-size:14px;box-shadow:none}

a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}

/* ---------- Hero ---------- */

.hero{text-align:center;padding:120px 0 100px}
h1{font-size:clamp(3rem,8vw,6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
h1 em{font-style:normal;color:var(--accent-deep)}
.counters{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:64px 0 52px}
.counter{background:var(--band);border-radius:20px;padding:30px 44px;min-width:240px}
.counter .num{
  font-size:clamp(2.6rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;
  color:var(--accent-deep);font-variant-numeric:tabular-nums;line-height:1.15;
}
.counter .cap{color:var(--muted-strong);font-size:14.5px;font-weight:700;margin-top:4px}
.sub{max-width:58ch;margin:0 auto 44px;color:var(--muted);font-size:19px;font-weight:500}
.micro{color:var(--muted);font-size:14px;margin-top:14px}
.text-link{color:var(--accent-deep);font-weight:700}

/* ---------- Section headings & labels ---------- */

h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:48px}
.label{
  display:inline-block;background:var(--wash);color:var(--accent-text);
  border-radius:999px;padding:6px 16px;
  font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:28px;
}

/* ---------- Results: cards ---------- */

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-bottom:72px}
.card{background:#fff;border-radius:20px;padding:34px;box-shadow:0 10px 30px rgba(16,34,47,.07)}
.card .tag{
  display:inline-block;background:var(--wash);color:var(--accent-text);
  border-radius:999px;padding:6px 16px;
  font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:16px;
}
.card .big{font-size:2.8rem;font-weight:800;letter-spacing:-.03em;color:var(--accent-deep);line-height:1.15}
.card .big .perlead{font-size:1.1rem;font-weight:700;letter-spacing:0;color:var(--muted)}
.card .card-body{color:var(--muted);font-size:15px;margin-top:10px;font-weight:500}

/* ---------- Results: flagship ---------- */

.flagship{background:#fff;border-radius:24px;box-shadow:0 14px 40px rgba(16,34,47,.08);padding:56px}
.flagship .stat{
  font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.18;margin-bottom:8px;max-width:30ch;
}
.flagship .stat em{font-style:normal;color:var(--accent-deep)}
.flagship p{color:var(--muted);font-size:15.5px;margin-bottom:14px;font-weight:500}
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:30px 0 38px}
.cstat{background:var(--wash);border-radius:14px;padding:16px 18px}
.cstat .n{font-weight:800;color:var(--accent-text);font-size:1.6rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cstat .c{font-size:12.5px;color:var(--muted-strong);font-weight:700;line-height:1.35;margin-top:3px}
.flagship-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.chart{margin:0}
.chart svg{width:100%;height:auto;display:block}
.chartcap{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:10px;text-align:center}
.cscta{margin-top:40px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cscta p{margin:0;font-weight:700;color:var(--ink);font-size:16.5px}

/* ---------- Results: testimonials ---------- */

.quotes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:72px}
.quote{
  background:#fff;border-radius:16px;padding:28px;
  box-shadow:0 8px 24px rgba(16,34,47,.06);
  color:var(--muted);font-size:15.5px;font-weight:500;
}
.quote p{margin-bottom:12px}
.quote .attr{font-weight:800;color:var(--ink);margin-top:16px}
.quote-pending{display:flex;align-items:center;justify-content:center;background:transparent}
.quote-pending p{margin:0}

/* ---------- How I work ---------- */

.how{text-align:center}
.bigline{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:0}
.bigline em{font-style:normal;color:var(--accent-deep)}
.footnote-mark{color:inherit;text-decoration:none}
.how .support{color:var(--muted);max-width:54ch;margin:26px auto 0;font-size:17.5px;font-weight:500}
.how .foot{margin-top:20px;font-size:13.5px;color:var(--muted);font-style:italic}

/* ---------- About ---------- */

.about-grid{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:center}
.headshot{
  width:220px;height:220px;border-radius:32px;object-fit:cover;display:block;
  box-shadow:0 10px 30px rgba(16,34,47,.1);
}
.about p{max-width:62ch;margin-bottom:16px;font-weight:500;color:#31434f}
.about p:last-child{margin-bottom:0}

/* ---------- FAQ ---------- */

.faq{max-width:760px;margin:0 auto}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 30px;margin-bottom:14px;
  box-shadow:0 6px 20px rgba(16,34,47,.05);
}
.faq-item h3{font-size:17px;font-weight:800;margin-bottom:6px}
.faq-item p{color:var(--muted);font-size:15.5px;font-weight:500}

/* ---------- Book ---------- */

.book{text-align:center;padding-bottom:130px}
.book h2{margin-bottom:16px}
/* Block container with an explicit height, per Calendly's documented embed
   contract: the injected iframe sets height:100%, which needs a resolved
   height to size against. The fallback is taken out of flow so it can never
   compete with the iframe for layout, and is hidden once the widget paints. */
.calendly-inline-widget{
  position:relative;
  height:700px;min-width:320px;max-width:1000px;margin:40px auto 22px;
  border-radius:20px;overflow:hidden;
}
.calendly-inline-widget.is-loaded .embed-fallback{display:none}
.embed-fallback{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;padding:0 20px;text-align:center;
  color:var(--muted);font-weight:600;
}
.embed-fallback a{color:var(--accent-deep);font-weight:700}

/* ---------- Footer ---------- */

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13px;text-align:center}

/* ---------- Responsive ---------- */

@media (max-width:760px){
  section{padding:72px 0}
  .hero{padding:88px 0 72px}
  .counters{gap:14px;margin:48px 0 40px}
  .counter{min-width:0;flex:1 1 160px;padding:24px 20px}
  .flagship{padding:32px 24px}
  .flagship-grid{grid-template-columns:1fr;gap:32px}
  .quotes{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:36px;justify-items:start}
  .cscta{gap:16px}
}

@media (max-width:420px){
  .wrap{padding:0 20px}
  .counter{flex-basis:100%}
  .btn{padding:14px 26px}
}