/* ============================================================
   Kingdom52
   Brand palette (navy + teal):
   Navy #14263F · Teal #0A7568 · Porcelain #FCFCFA
   Mist #E6EEF2 · Slate #5B6779 · Harbor #35507A
   Type: Archivo (display) · Inter (body)
   ============================================================ */

:root{
  --navy:#14263F;
  --navy-2:#0e1c2f;      /* deeper navy for layered surfaces */
  --teal:#0A7568;        /* primary action; light surfaces */
  --teal-deep:#085A50;   /* teal hover */
  --teal-light:#3CC6AE;  /* on navy fields only */
  --porcelain:#FCFCFA;
  --mist:#E6EEF2;
  --slate:#5B6779;
  --harbor:#35507A;
  --harbor-deep:#2A4062;

  --ink:#14263F;
  --text:#2c3648;
  --muted:var(--slate);

  --wrap:1100px;          /* the one shared content container: header, heroes, sections, footer on every page */
  --r:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 24px 60px -30px rgba(20,38,63,.35);
  --shadow-sm:0 12px 30px -18px rgba(20,38,63,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--porcelain);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--harbor);text-decoration:none}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.01em}
p{margin:0 0 1rem}

.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}

.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
/* navy fields: teal-light ring */
.site-header:not(.scrolled) :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.k52-open :focus-visible,.site-footer :focus-visible,.wall-sec :focus-visible,.cta :focus-visible,.build :focus-visible,.strip :focus-visible,.price-badge :focus-visible,body.home .k52-open :focus-visible,body.home .site-footer :focus-visible{outline-color:var(--teal-light)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.98rem;
  padding:.85em 1.6em;min-height:44px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
  letter-spacing:.01em;white-space:nowrap;
}
.btn-lg{padding:1.02em 2em;font-size:1.05rem}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 10px 26px -12px rgba(10,117,104,.7)}
.btn-teal:hover{background:var(--teal-deep);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(10,117,104,.8)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-harbor{background:var(--harbor);color:#fff;box-shadow:0 10px 26px -12px rgba(53,80,122,.7)}
.btn-harbor:hover{background:var(--harbor-deep);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(53,80,122,.8)}
.btn-secondary{background:transparent;color:var(--harbor);border-color:var(--harbor)}
.btn-secondary:hover{background:var(--harbor);color:#fff;transform:translateY(-2px)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* ---------- The mark motif: wall | gate | wall (three dots/bars) ---------- */
.mark-dots{display:inline-flex;align-items:flex-end;gap:3px;height:15px}
.mark-dots i,.mark-dots b{display:block;width:4px;border-radius:1px}
.mark-dots i{height:15px;background:var(--navy)}
.mark-dots b{height:10px;background:var(--teal)}
.mark-dots.lg{height:26px;gap:5px}
.mark-dots.lg i,.mark-dots.lg b{width:7px}
.mark-dots.lg i{height:26px}
.mark-dots.lg b{height:17px}
.eyebrow-light .mark-dots i{background:#fff}
/* mark on dark surfaces: navy bars would vanish, so render them light */
.footer-brand .mark-dots i,.about-badge .mark-dots i{background:#fff}
.eyebrow-light .mark-dots b,.footer-brand .mark-dots b,.about-badge .mark-dots b{background:var(--teal-light)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease);
  padding:18px 0;
}
.site-header.scrolled{background:rgba(252,252,250,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(20,38,63,.08),0 10px 30px -22px rgba(20,38,63,.4);padding:12px 0}
.header-inner{display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:40px;width:auto}
/* compact lockup at all widths: on-navy art (teal-light bar) over the hero, navy+teal art once scrolled / menu open */
.brand-solid{display:none}
.scrolled .brand-on-navy,.menu-open .brand-on-navy{display:none}
.scrolled .brand-solid,.menu-open .brand-solid{display:block}
.nav{display:flex;gap:30px}
.nav a{font-family:'Archivo',sans-serif;font-weight:500;font-size:.97rem;color:rgba(255,255,255,.85);position:relative;padding:12px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--teal-light);transition:right .3s var(--ease)}
.scrolled .nav a::after{background:var(--teal)}
.nav a:hover::after{right:0}
.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:#fff}
.scrolled .nav a{color:var(--navy)}
.scrolled .nav a[aria-current]{color:var(--navy)}
.mobile-menu a[aria-current]{color:var(--teal)}
.header-cta{padding:.62em 1.3em}

.nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span{width:26px;height:2px;background:#fff;transition:.3s var(--ease)}
.scrolled .nav-toggle span{background:var(--navy)}

.mobile-menu{display:none}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  margin:0 0 18px;
}
.eyebrow-light{color:rgba(255,255,255,.75)}
.section{padding:clamp(70px,9vw,130px) 0}
.section-head{max-width:none;margin-bottom:56px}
.section-title{font-size:clamp(2rem,4.4vw,3.15rem);font-weight:700;line-height:1.04}
.section-title.light{color:#fff}
.section-intro{color:var(--muted);font-size:1.12rem;margin-top:18px;max-width:none}
.build .section-intro{color:rgba(255,255,255,.72)}
.lead{font-size:1.2rem;color:var(--ink);font-weight:500;line-height:1.5}
/* breathing room between a two-column heading and the copy that follows it */
.two-col .section-title{margin-bottom:20px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:clamp(150px,20vh,220px) 0 clamp(90px,12vw,150px);
}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg::after{ /* subtle depth wash */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,var(--navy) 20%,rgba(20,38,63,.55) 70%,rgba(20,38,63,.2) 100%);
}

/* hero split: copy fills the left column, motion lives in a glass panel on the right */
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:clamp(30px,5vw,72px);
}
.hero-copy{max-width:none}
.hero-title{
  font-size:clamp(2.6rem,5vw,4.1rem);font-weight:800;color:#fff;letter-spacing:-.025em;
  margin:14px 0 0;line-height:1.02;
}
.accent-line{color:var(--teal-light);position:relative;white-space:nowrap}
.hero-sub{font-size:clamp(1.1rem,1.6vw,1.24rem);color:rgba(255,255,255,.82);margin:24px 0 30px;max-width:none;line-height:1.55}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-foot{margin-top:32px;font-size:.9rem;color:rgba(255,255,255,.55);letter-spacing:.01em}

/* the glass panel that holds the animated wall of bars */
.hero-glass{
  position:relative;height:clamp(340px,42vw,460px);border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.03));

  box-shadow:0 40px 90px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-glass::after{ /* diagonal glass sheen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.14),transparent 42%);
}
.wall{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;gap:clamp(6px,1vw,12px);
  padding:clamp(20px,3vw,34px);
}
.wall .bar{
  flex:1;background:linear-gradient(180deg,#2a4062,#1a2c46);border-radius:4px 4px 0 0;
  height:var(--h,70%);transform-origin:bottom;transform:scaleY(0);
  /* rise once on load, then breathe gently on a continuous loop */
  animation:rise .9s var(--ease) forwards,
            sway 6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .07s),
                  calc(1s + var(--i) * .35s);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.wall .bar:nth-child(3n){--h:88%}
.wall .bar:nth-child(3n+1){--h:62%}
.wall .bar:nth-child(4n){--h:78%}
.wall .bar:nth-child(2n){--h:70%}
/* desync the loop so the wall shifts organically, not in unison */
.wall .bar:nth-child(3n){animation-duration:.9s,7.2s}
.wall .bar:nth-child(4n){animation-duration:.9s,5.4s}
.wall .bar:nth-child(5n){animation-duration:.9s,8s}
.wall .gate{
  background:var(--teal-light);--h:56%;
  box-shadow:0 16px 28px -16px rgba(0,0,0,.55);
}
.wall .gate-2{--h:44%}
@keyframes rise{to{transform:scaleY(1)}}
@keyframes sway{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.93)}
}

/* animate hero copy in */
.hero-copy>*{opacity:0;transform:translateY(18px);animation:heroIn .8s var(--ease) forwards}
.hero-copy>*:nth-child(1){animation-delay:.1s}
.hero-copy>*:nth-child(2){animation-delay:.22s}
.hero-copy>*:nth-child(3){animation-delay:.34s}
.hero-copy>*:nth-child(4){animation-delay:.46s}
.hero-copy>*:nth-child(5){animation-delay:.58s}
.hero-copy>*:nth-child(6){animation-delay:.7s}
.hero-glass{opacity:0;animation:heroIn 1s var(--ease) .3s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}

/* ============================================================
   STANCE STRIP
   ============================================================ */
.strip{
  color:#fff;padding:46px 0;position:relative;
  background:var(--navy-2);
}
.strip::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal-light)}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.strip-item{display:flex;flex-direction:column;gap:8px;padding-left:20px;border-left:2px solid rgba(60,198,174,.55)}
.strip-num{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.9rem;color:var(--teal-light);letter-spacing:-.02em}
.strip-label{font-size:.98rem;color:rgba(255,255,255,.72);line-height:1.45}

/* ============================================================
   MISSION BAND (solid navy)
   ============================================================ */
.band{
  position:relative;color:#fff;overflow:hidden;
  padding:clamp(90px,12vw,150px) 0;
  background:var(--navy);
}
.band-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,28,47,.94) 20%,rgba(20,38,63,.78) 60%,rgba(20,38,63,.55) 100%);
}
.band-inner{position:relative;z-index:2;max-width:none}
.band-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:700;color:#fff;letter-spacing:-.015em;margin-top:6px}
.band-sub{margin-top:22px;font-size:1.12rem;color:rgba(255,255,255,.8);max-width:none}

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{background:var(--porcelain)}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.col-list{list-style:none;margin:0;padding:30px;background:var(--mist);border-radius:var(--r);display:grid;gap:2px}
.col-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 4px;border-bottom:1px solid rgba(122,134,153,.22);font-weight:500;color:var(--ink)}
.col-list li:last-child{border-bottom:0}
.col-list .x{color:var(--slate);font-weight:700;font-size:1.15rem;line-height:1.3;flex:none}

/* ============================================================
   WHO WE BUILD FOR
   ============================================================ */
.who{background:var(--mist)}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.who-card{
  background:var(--porcelain);border:1px solid rgba(122,134,153,.2);border-radius:var(--r);
  padding:32px 26px 30px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.who-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.who-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.who-card:hover::before{transform:scaleX(1)}
.who-card:hover::before{background:var(--teal)}
.who-index{font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;color:var(--teal);letter-spacing:.05em}
.who-card h3{font-size:1.32rem;font-weight:700;margin:16px 0 12px}
.who-card p{font-size:.98rem;color:var(--muted);margin:0}

/* ============================================================
   WHAT WE BUILD (dark)
   ============================================================ */
.build{background:var(--navy);color:#fff}
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.build-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
  padding:34px 30px;transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.build-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.07);border-color:rgba(60,198,174,.5)}
.build-tick{display:block;width:34px;height:34px;border-radius:8px;background:rgba(60,198,174,.14);position:relative;margin-bottom:22px}
.build-tick::before{content:"";position:absolute;left:9px;top:8px;width:8px;height:16px;border:solid var(--teal-light);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.build-card h3{color:#fff;font-size:1.28rem;font-weight:600;margin-bottom:12px}
.build-card p{color:rgba(255,255,255,.72);font-size:.98rem;margin:0}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--porcelain)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:none}
.step{position:relative;padding-top:30px}
.step::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--teal),rgba(10,117,104,0))}
.step-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:2.4rem;color:var(--mist);-webkit-text-stroke:1px var(--slate);display:block;margin-bottom:16px;line-height:1}
.step h3{font-size:1.4rem;font-weight:700;margin-bottom:10px}
.step p{color:var(--muted);margin:0}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--mist)}
.about-col{align-items:center;grid-template-columns:.9fr 1.1fr}
.about-media{position:relative}
.headshot{width:100%;border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:1/1;object-fit:cover}
.about-badge{
  position:absolute;bottom:-22px;left:22px;background:var(--navy);color:#fff;
  display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:12px;box-shadow:var(--shadow-sm);
}
.about-badge span:last-child{font-family:'Archivo',sans-serif;font-weight:600;font-size:1rem;line-height:1.25}
.about-badge em{font-style:normal;font-weight:400;color:var(--teal-light);font-size:.85rem}
.about-text .pull{
  font-family:'Archivo',sans-serif;font-weight:500;font-size:1.28rem;color:var(--ink);line-height:1.4;
  border-left:3px solid var(--teal);padding-left:22px;margin-top:26px;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{background:var(--porcelain)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote-card{
  background:var(--porcelain);border:1px solid rgba(122,134,153,.22);border-radius:var(--r);
  padding:34px 30px;display:flex;flex-direction:column;position:relative;
}
.quote-card::before{content:"\201C";position:absolute;top:8px;right:24px;font-family:'Archivo',sans-serif;font-size:5rem;color:var(--mist);line-height:1}
.quote-card blockquote{margin:0 0 22px;font-size:1.05rem;color:var(--ink);line-height:1.55;position:relative;z-index:1}
.quote-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(122,134,153,.22);padding-top:18px}
.quote-card figcaption strong{font-family:'Archivo',sans-serif;color:var(--navy);font-size:1rem}
.quote-card figcaption span{color:var(--slate);font-size:.88rem}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--navy-2);color:#fff;position:relative;overflow:hidden;text-align:center}
.cta-bg{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;gap:26px;opacity:.5}
.cta-bar{width:70px;background:linear-gradient(180deg,#22375a,transparent);height:70%}
.cta-bar.gate{background:linear-gradient(180deg,var(--teal-light),transparent);height:48%}
.cta-inner{position:relative;z-index:2;max-width:none;margin-inline:auto}
.cta-inner .eyebrow{justify-content:center}
.cta-title{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800;color:#fff;letter-spacing:-.02em}
.cta-sub{color:rgba(255,255,255,.75);font-size:1.12rem;margin:20px auto 34px;max-width:none}
.cta-sub a{color:#fff;text-decoration:underline}
.cta-email{margin-top:22px;color:rgba(255,255,255,.6);font-size:.95rem}
.cta-email a{color:var(--teal-light)}

/* full-width CTA banner: mirrors the hero (copy left, glass motion panel right) */
.cta-banner{background:var(--navy);text-align:left;border-top:3px solid rgba(60,198,174,.55)}
.cta-banner .cta-inner{
  max-width:none;margin-inline:auto;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:clamp(30px,5vw,72px);
}
.cta-banner .cta-copy{max-width:none}
.cta-banner .cta-inner .eyebrow{justify-content:flex-start}
.cta-banner .cta-title{font-size:clamp(2rem,4vw,3rem)}
.cta-banner .cta-sub{margin:22px 0 30px;max-width:none}
.cta-banner .cta-email{margin-top:20px}
.cta-banner .hero-actions{justify-content:flex-start}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy);color:#fff;padding:64px 0 30px}
.footer-inner{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-brand strong{font-family:'Archivo',sans-serif;font-size:1.3rem;display:block}
.footer-desc{color:rgba(255,255,255,.7);font-size:.9rem}
.footer-cols{display:flex;gap:70px}
.footer-cols h4{font-family:'Archivo',sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-light);margin-bottom:16px;font-weight:600}
.footer-cols a,.footer-plain{display:block;color:rgba(255,255,255,.72);font-size:.96rem;margin-bottom:10px}
.footer-cols a:hover{color:#fff}
.footer-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:.85rem;color:rgba(255,255,255,.5)}
.footer-verse{font-style:italic;color:rgba(255,255,255,.7)}
/* legal links defaulted to Harbor on navy (1.9:1); light text on the footer field */
.footer-base a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px}
.footer-base a:hover{color:#fff}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .who-grid,.build-grid,.quote-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:24px}
  .two-col{grid-template-columns:1fr;gap:40px}
  .about-col{grid-template-columns:1fr}
  .about-media{max-width:420px}
  .hero-inner,.cta-banner .cta-inner{grid-template-columns:1fr;gap:40px}
  .hero-copy,.cta-banner .cta-copy{max-width:none}
  .hero-glass{height:clamp(220px,40vw,300px)}
}
@media (max-width:720px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:flex;flex-direction:column;gap:4px;padding:12px 24px 22px;background:rgba(252,252,250,.98);backdrop-filter:blur(12px)}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a{font-family:'Archivo',sans-serif;font-weight:600;color:var(--navy);padding:12px 0;border-bottom:1px solid rgba(122,134,153,.18)}
  .mobile-menu .btn{margin-top:12px;border-bottom:0}
  .site-header.menu-open{background:rgba(252,252,250,.98);backdrop-filter:blur(12px)}
  .menu-open .nav-toggle span{background:var(--navy)}
  .strip-grid,.who-grid,.build-grid,.quote-grid{grid-template-columns:1fr}
  .footer-cols{gap:40px}
  .hero{padding-top:130px}
  .hero-glass{display:none}
  .hero-bg::after{background:linear-gradient(105deg,var(--navy),rgba(20,38,63,.85))}
  .band{background-attachment:scroll}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-delay:0s !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .wall .bar{transform:scaleY(1);animation:none !important}
  .hero-copy>*,.hero-glass{opacity:1;transform:none}
}

/* ============================================================
   PLAYBOOK ALIGNMENT — added components
   ============================================================ */

/* Hero tagline line */
.hero-tagline{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(1rem,1.5vw,1.15rem);
  color:var(--teal-light);letter-spacing:.01em;margin:0 0 30px;
}

/* ---------- Screen-reader only ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============================================================
   WHO WE SERVE — three ICPs
   ============================================================ */
.who{background:var(--mist)}
.icp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.icp-card{
  background:var(--porcelain);border:1px solid rgba(122,134,153,.22);border-radius:var(--r);
  padding:34px 30px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.icp-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.icp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.icp-card:hover::before{transform:scaleX(1)}
.icp-tag{font-family:'Archivo',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--harbor)}
.icp-quote{font-family:'Archivo',sans-serif;font-weight:600;font-size:1.28rem;line-height:1.32;color:var(--ink);margin:16px 0 16px}
.icp-body{font-size:.98rem;color:var(--muted);margin:0 0 14px}
.icp-pain{font-size:.94rem;color:var(--text);margin:0 0 24px}
.icp-pain strong{color:var(--ink)}
.icp-door{
  margin-top:auto;font-family:'Archivo',sans-serif;font-weight:600;font-size:.98rem;color:var(--navy);
  display:inline-flex;align-items:center;gap:8px;padding-top:18px;border-top:1px solid rgba(122,134,153,.25);
}
.icp-door span{color:var(--teal);transition:transform .25s var(--ease)}
.icp-door:hover span{transform:translateX(4px)}
.who-note{margin:34px 0 0;text-align:center;color:var(--slate);font-size:.95rem;font-style:italic}

/* ============================================================
   THE OFFER WALL (signature)
   ============================================================ */
.wall-sec{background:var(--navy);color:#fff}
.wall-sec .section-intro{color:rgba(255,255,255,.72)}
.wall-sec .section-head{max-width:none;margin-left:auto;margin-right:auto;text-align:center}
.offerwall{display:grid;grid-template-columns:1fr 220px;gap:26px;align-items:stretch}
.wall-build{display:flex;flex-direction:column;gap:16px}
.course{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:18px}
.course-label{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:14px}
.bricks{display:flex;gap:10px;flex-wrap:wrap}
.brick{
  flex:1 1 0;min-width:150px;background:linear-gradient(180deg,#22375a,#1a2c46);border:1px solid rgba(255,255,255,.09);
  border-radius:8px;padding:20px 18px;color:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:1.02rem;
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:70px;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.brick:hover{transform:translateY(-4px);border-color:rgba(60,198,174,.6);box-shadow:0 16px 32px -20px rgba(0,0,0,.8)}
.brick-wide{flex:2 1 0}
.brick-sm{min-height:56px;font-size:.96rem;font-weight:500;padding:16px 18px;background:rgba(255,255,255,.05)}
.brick-gate{
  background:var(--teal-light);color:var(--navy);border-color:rgba(60,198,174,.5);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.6);font-weight:700;
}
.brick-gate:hover{border-color:#fff}
.course-foundation .course-label{color:var(--teal-light)}
/* scaffold: referred-out, drawn as scaffolding */
.scaffold{
  border:2px dashed rgba(122,134,153,.4);border-radius:12px;padding:18px;
  display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.015);
}
.scaffold-label{font-family:'Archivo',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.scaffold-item{color:rgba(255,255,255,.6);font-size:.95rem;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.scaffold-item:last-child{border-bottom:0}
.wall-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px}

/* ============================================================
   HOW AN ENGAGEMENT WORKS — two paths
   ============================================================ */
.work{background:var(--porcelain)}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.paths-3{grid-template-columns:repeat(3,1fr);gap:24px}
.path{background:var(--mist);border-radius:var(--r);padding:38px 34px;border:1px solid rgba(122,134,153,.18)}
.path-title{font-size:1.5rem;font-weight:700;color:var(--ink)}
.path-lead{color:var(--muted);margin:8px 0 26px;font-size:1.02rem}
.path-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;counter-reset:none}
.path-steps li{display:flex;gap:18px;align-items:flex-start}
.ps-mark{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;color:var(--teal);background:var(--porcelain);border:1px solid rgba(10,117,104,.4);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
/* open-ended step marker: a path still forming rather than a numbered step */
.ps-open{color:var(--slate);border-style:dashed;border-color:rgba(122,134,153,.5);font-size:1.2rem;background:transparent}
.path-steps strong{font-family:'Archivo',sans-serif;font-size:1.1rem;color:var(--ink);display:block;margin-bottom:4px}
.path-steps p{margin:0;color:var(--muted);font-size:.96rem}

/* ============================================================
   SUBPAGE STRUCTURE (offers / pricing)
   ============================================================ */
.page-hero{
  background:var(--navy);color:#fff;position:relative;overflow:hidden;
  padding:clamp(140px,18vh,190px) 0 clamp(56px,7vw,84px);
}
.page-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;color:#fff;letter-spacing:-.02em;max-width:none;position:relative}
.page-lead{color:rgba(255,255,255,.78);font-size:1.15rem;max-width:none;margin-top:20px;position:relative}
.offer-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;position:relative}
.offer-jump a{
  font-family:'Archivo',sans-serif;font-weight:500;font-size:.9rem;color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 16px;transition:.25s var(--ease);
}
.offer-jump a:hover{border-color:var(--teal-light);color:#fff;background:rgba(60,198,174,.12)}

.group-heading{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:clamp(50px,7vw,80px) 0 0;padding-bottom:14px;border-bottom:2px solid var(--teal);
  display:block;width:100%;max-width:none;
}
.modules-subhead{margin-top:28px}
.modules-lead{margin-top:8px;margin-bottom:16px}
.modules-link{margin-top:14px}

.offer-sec{padding:clamp(40px,5vw,60px) 0}
.offer-sec.alt{background:var(--mist)}
.offer{}
.offer-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px 48px;
  align-items:start;
  margin-bottom:34px;
}
.offer-head > div:first-child{min-width:0}
.tag{display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--harbor);background:rgba(53,80,122,.1);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.offer-name{font-size:clamp(2rem,3.4vw,3.1rem);font-weight:700;color:var(--ink);letter-spacing:-.015em;max-width:none;line-height:1.1}
.offer-desc{color:var(--muted);font-size:1.12rem;max-width:none;margin-top:14px;line-height:1.55}
.price-badge{
  justify-self:end;
  min-width:230px;max-width:280px;width:280px;background:var(--navy);color:#fff;border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow-sm);border-top:4px solid var(--teal-light);
  position:relative;overflow:hidden;
}
.price-badge::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,rgba(60,198,174,.12) 50%,transparent 60%);
  transform:translateX(-120%);
}
@media (prefers-reduced-motion:no-preference){
  .price-badge::after{animation:k52sheen 5.5s var(--ease) infinite}
}
@keyframes k52sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.price{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:2.1rem;color:#fff;line-height:1}
.price .per{font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.7)}
.price .from{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.03em;color:rgba(255,255,255,.65);text-transform:uppercase;margin-bottom:2px}
.ptable td.num .from{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.03em;color:var(--slate);text-transform:uppercase;margin-bottom:1px}
.price-term{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem;color:var(--teal-light);margin-top:6px;letter-spacing:.02em}
.price-note{display:block;font-size:.86rem;color:rgba(255,255,255,.66);margin-top:14px;line-height:1.45}
.price-note.draft{color:var(--teal-light);font-style:italic}

.offer-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:start}
.offer-grid-equal{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.offer-grid-follow{margin-top:40px;padding-top:36px;border-top:1px solid rgba(122,134,153,.2)}
.offer-connect{
  margin-top:36px;padding:28px 0 0;
  border-top:1px solid rgba(122,134,153,.2);
}
.offer-connect h3{
  font-family:'Archivo',sans-serif;font-size:1.15rem;font-weight:700;
  color:var(--ink);margin:0 0 10px;
}
.offer-connect p{margin:0;font-size:1.05rem;color:var(--text);max-width:none;line-height:1.55}
.tag-soon{
  display:inline-block;margin-left:8px;vertical-align:middle;
  font-family:'Archivo',sans-serif;font-style:normal;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
}
.deliverables h3,.offer-side h4{font-family:'Archivo',sans-serif;color:var(--ink)}
.deliverables h3{font-size:1.25rem;font-weight:700;margin-bottom:18px}
.deliverables.full{grid-column:1/-1}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.checklist.two{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px}
.checklist li{position:relative;padding-left:32px;color:var(--text);font-size:1rem;line-height:1.5}
.checklist li strong{color:var(--ink)}
.checklist li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:5px;background:rgba(10,117,104,.15);
}
.checklist li::after{content:"";position:absolute;left:6px;top:5px;width:6px;height:11px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.offer-side{background:var(--porcelain);border:1px solid rgba(122,134,153,.2);border-radius:var(--r);padding:26px 24px}
.offer-sec.alt .offer-side{background:#fff}
.offer-side h4{font-size:1rem;font-weight:700;margin:0 0 10px}
.offer-side h4:not(:first-child){margin-top:22px}
.offer-side p{font-size:.95rem;color:var(--muted);margin:0}
.timeline-note{font-size:.9rem;color:var(--muted);margin:0 0 12px;line-height:1.45}
.offer-side .timeline-note{margin-top:0}
.mini-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.offer-side p + p{margin-top:12px}
.mini-timeline li{display:flex;gap:12px;font-size:.94rem;color:var(--text);align-items:baseline}
.mini-timeline li span{font-family:'Archivo',sans-serif;font-weight:600;color:var(--harbor);font-size:.82rem;min-width:72px;flex:none}
.plainlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plainlist li{font-size:.95rem;color:var(--text);padding-left:16px;position:relative}
.plainlist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:var(--teal)}
.tier-note{margin-top:22px;padding-top:20px;border-top:1px solid rgba(122,134,153,.25)}
.tier-note strong{font-family:'Archivo',sans-serif;color:var(--navy);font-size:1rem;display:block;margin-bottom:6px}
.tier-note p{font-size:.92rem}
.notincluded{margin-top:30px;background:rgba(122,134,153,.08);border-left:3px solid var(--slate);border-radius:0 10px 10px 0;padding:22px 26px}
.notincluded h4{font-family:'Archivo',sans-serif;font-size:.92rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin:0 0 10px}
.notincluded p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.55}

.careplan-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.careplan-tier{background:#fff;border:1px solid rgba(122,134,153,.2);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column}
.offer-sec.alt .careplan-tier{background:var(--porcelain)}
.careplan-tier.featured{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.careplan-tier h4{font-family:'Archivo',sans-serif;font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 2px}
.careplan-tier .careplan-price{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.3rem;color:var(--ink);margin-bottom:12px}
.careplan-tier .careplan-price span{font-family:'Inter',sans-serif;font-weight:500;font-size:.85rem;color:var(--muted)}
.careplan-tier p{font-size:.92rem;color:var(--text);line-height:1.55;margin:0}
.careplan-payg{margin-top:20px;padding:18px 22px;background:rgba(122,134,153,.08);border-radius:var(--r)}
.careplan-payg strong{font-family:'Archivo',sans-serif;color:var(--navy)}
.careplan-payg p{margin:6px 0 0;font-size:.92rem;color:var(--text)}
@media (max-width:900px){.careplan-tiers{grid-template-columns:1fr}}

.value-bars{display:flex;flex-direction:column;gap:18px;margin:28px 0}
.value-bar-row{display:grid;grid-template-columns:200px 1fr 110px;align-items:center;gap:14px}
.value-bar-label{font-family:'Archivo',sans-serif;font-weight:600;font-size:.95rem;color:var(--ink)}
.value-bar-label span{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:2px}
.value-bar-track{background:rgba(122,134,153,.15);border-radius:8px;height:14px;overflow:hidden}
.value-bar-fill{height:100%;border-radius:8px;background:var(--slate)}
.value-bar-fill.teal{background:var(--teal)}
.value-bar-amount{font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);text-align:right}
@media (max-width:640px){.value-bar-row{grid-template-columns:1fr;text-align:left}.value-bar-amount{text-align:left}}
.value-table td.yes{color:var(--navy)}
.value-table td.no{color:var(--muted)}

/* Referred out group */
.offer-sec.referred{background:var(--mist);padding:clamp(70px,9vw,110px) 0;margin-top:40px}
.referred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.referred-card{background:var(--porcelain);border:1px solid rgba(122,134,153,.2);border-radius:var(--r);padding:28px 26px}
.referred-card h3{font-family:'Archivo',sans-serif;font-size:1.2rem;font-weight:600;color:var(--ink);margin-bottom:10px}
.referred-card p{margin:0;color:var(--muted);font-size:.96rem}
.referred-price{font-family:'Archivo',sans-serif;font-weight:700;color:var(--harbor)!important;font-size:1.02rem;margin-bottom:8px!important}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-sec{padding-top:clamp(50px,6vw,70px)}
/* pricing.html #crm-lms block: sits between the hero and the table */
.crm-lms-sec{padding:clamp(50px,6vw,70px) 0 0}
.crm-lms-sec .section-head{margin-bottom:24px}
.crm-lms-sec .lead{margin-top:18px}
.crm-lms-sec .text-link{color:var(--harbor);text-decoration:underline;text-underline-offset:3px}
.crm-lms-sec .text-link:hover{color:var(--harbor-deep)}
.crm-lms-cta .form-note{text-align:left;margin:10px 0 0}
@media (max-width:560px){.crm-lms-cta .btn{width:100%}}
.ptable-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid rgba(122,134,153,.22);box-shadow:var(--shadow-sm)}
.ptable{width:100%;border-collapse:collapse;min-width:720px;background:var(--porcelain)}
.ptable thead th{
  background:var(--navy);color:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:16px 22px;
}
.ptable tbody tr{border-top:1px solid rgba(122,134,153,.2)}
.ptable tbody tr:hover{background:var(--mist)}
.ptable tbody th{text-align:left;padding:20px 22px;vertical-align:top}
.ptable tbody th a{font-family:'Archivo',sans-serif;font-weight:700;color:var(--navy);font-size:1.05rem}
.ptable tbody th a:hover{color:var(--harbor)}
.row-sub{display:block;font-family:'Inter',sans-serif;font-weight:400;color:var(--slate);font-size:.85rem;margin-top:3px}
.row-sub em{color:var(--teal);font-style:italic}
.ptable td{padding:20px 22px;vertical-align:top;color:var(--text);font-size:.96rem}
.ptable td.num{font-family:'Archivo',sans-serif;font-weight:700;color:var(--ink);font-size:1.15rem;white-space:nowrap}
.ptable td.num .per{font-size:.85rem;color:var(--slate);font-weight:600}
.tag-inline{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.78rem;color:var(--teal);margin-top:4px;white-space:nowrap}
.row-feature{background:rgba(10,117,104,.06)}
.row-feature:hover{background:rgba(10,117,104,.1)}
.ptable-foot{margin-top:18px;color:var(--slate);font-size:.9rem;font-style:italic}

.pricing-notes{padding-top:clamp(50px,6vw,70px);background:var(--mist)}
.software-costs{padding-top:clamp(50px,6vw,70px)}
.software-costs .group-heading{margin:clamp(34px,5vw,48px) 0 18px}
.software-costs .note-card{margin-top:30px}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.note-card{background:var(--mist);border-radius:var(--r);padding:30px 30px;border-left:3px solid var(--teal)}
.note-card h3{font-family:'Archivo',sans-serif;font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.note-card p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55}
.referred-pricing{background:var(--mist)}

/* ============================================================
   RESPONSIVE — added components
   ============================================================ */
@media (max-width:960px){
  .icp-grid,.referred-grid{grid-template-columns:1fr;gap:18px}
  .offerwall{grid-template-columns:1fr}
  .paths{grid-template-columns:1fr}
  .offer-grid{grid-template-columns:1fr;gap:26px}
  .checklist.two{grid-template-columns:1fr}
  .notes-grid{grid-template-columns:1fr}
  .offer-head{grid-template-columns:1fr;gap:22px}
  .price-badge{justify-self:end;width:min(280px,100%);max-width:280px}
}
@media (max-width:720px){
  .icp-grid,.referred-grid{grid-template-columns:1fr}
  .brick,.brick-wide{flex:1 1 100%}
}

/* ============================================================
   WHAT WE BUILD PAGE — split hero, network visual, gate CTA
   ============================================================ */

/* split hero: copy left, glass visual right */
.page-hero-split .page-hero-inner{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;
  gap:clamp(30px,5vw,64px);position:relative;
}
.page-hero-split .page-title{max-width:none}
.page-hero-copy{position:relative;z-index:2}

/* glass panel holding the connected-systems network */
.hero-visual{
  position:relative;z-index:2;height:clamp(300px,32vw,400px);border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%,rgba(60,198,174,.22),transparent 55%),
    radial-gradient(circle at 20% 80%,rgba(91,123,176,.2),transparent 40%),
    linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0;animation:heroIn 1s var(--ease) .3s forwards;
}
.hero-visual::before{
  content:"";position:absolute;inset:-40% -20%;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(60,198,174,.1) 40deg,transparent 80deg,rgba(91,123,176,.06) 200deg,transparent 260deg);
  animation:k52orbit 18s linear infinite;
}
.hero-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(140deg,rgba(255,255,255,.12),transparent 45%),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.03) 3px 4px);
  animation:k52scan 7s linear infinite;
}
.net{width:100%;height:100%;display:block;position:relative;z-index:1;animation:netfloat 11s ease-in-out infinite}
.net-links line{stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-dasharray:4 6;animation:k52dash 8s linear infinite}
.net-nodes .node{fill:#5b7bb0;transform-origin:center;animation:netpulse 4.5s ease-in-out infinite}
.net-nodes .node.teal{fill:var(--teal-light);filter:drop-shadow(0 0 8px rgba(60,198,174,.55))}
.net-nodes .node:nth-child(2){animation-delay:.4s}
.net-nodes .node:nth-child(3){animation-delay:1.1s}
.net-nodes .node:nth-child(4){animation-delay:.7s}
.net-nodes .node:nth-child(5){animation-delay:1.6s}
.net-nodes .node:nth-child(6){animation-delay:2.1s}
.net-nodes .node:nth-child(7){animation-delay:.9s}
@keyframes netpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes netfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes k52orbit{to{transform:rotate(360deg)}}
@keyframes k52dash{to{stroke-dashoffset:-40}}
@keyframes k52scan{0%{background-position:0 0,0 0}100%{background-position:0 0,0 40px}}

/* Offer sections: scroll reveal + live system feel */
body.subpage .page-hero-split .page-hero-copy .eyebrow,
body.subpage .page-hero-split .page-title,
body.subpage .page-hero-split .page-lead{
  opacity:0;transform:translateY(18px);
  animation:k52fadeup .8s var(--ease) forwards;
}
body.subpage .page-hero-split .page-hero-copy .eyebrow{animation-delay:.1s}
body.subpage .page-hero-split .page-title{animation-delay:.22s}
body.subpage .page-hero-split .page-lead{animation-delay:.36s}
@keyframes k52fadeup{to{opacity:1;transform:none}}

body.subpage .offer-sec{position:relative;overflow:hidden}
body.subpage .offer-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(53,80,122,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,80,122,.04) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,transparent,black 12%,black 88%,transparent);
}
body.subpage .offer-sec.alt::before{
  background-image:
    linear-gradient(rgba(10,117,104,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,117,104,.05) 1px,transparent 1px);
}
body.subpage .offer-sec .wrap{position:relative;z-index:1}

html.js body.subpage .offer-sec .offer,
html.js body.subpage .offer-sec.referred .wrap,
html.js body.subpage .group-heading{
  opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
html.js body.subpage .offer-sec .offer.in,
html.js body.subpage .offer-sec.referred .wrap.in,
html.js body.subpage .group-heading.in{opacity:1;transform:none}
body.subpage .offer.in .checklist li{
  opacity:0;transform:translateX(-8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
body.subpage .offer.in .checklist li:nth-child(1){transition-delay:.05s}
body.subpage .offer.in .checklist li:nth-child(2){transition-delay:.1s}
body.subpage .offer.in .checklist li:nth-child(3){transition-delay:.15s}
body.subpage .offer.in .checklist li:nth-child(4){transition-delay:.2s}
body.subpage .offer.in .checklist li:nth-child(5){transition-delay:.25s}
body.subpage .offer.in .checklist li:nth-child(6){transition-delay:.3s}
body.subpage .offer.in .checklist li:nth-child(7){transition-delay:.35s}
body.subpage .offer.in .checklist li:nth-child(8){transition-delay:.4s}
body.subpage .offer.in.in-stagger .checklist li{opacity:1;transform:none}
body.subpage .offer.in .price-badge{
  transform:translateY(10px) scale(.98);
  transition:transform .55s var(--ease) .12s;
}
body.subpage .offer.in.in-stagger .price-badge{transform:none}
body.subpage .careplan-tier,
body.subpage .referred-card{
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
body.subpage .careplan-tier:hover,
body.subpage .referred-card:hover{
  transform:translateY(-3px);
  border-color:rgba(10,117,104,.35);
  box-shadow:0 18px 40px -28px rgba(20,38,63,.35);
}
body.subpage .tag-soon{position:relative}
body.subpage .offer-jump a{
  position:relative;overflow:hidden;
}
body.subpage .offer-jump a::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(60,198,174,.2) 50%,transparent 65%);
  transform:translateX(-120%);
}
@media (prefers-reduced-motion:no-preference){
  body.subpage .tag-soon{animation:k52pulse 2.8s ease-in-out infinite}
  body.subpage .offer-jump a:hover::after{animation:k52sheen 1.1s var(--ease) forwards}
}
@keyframes k52pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .hero-visual::before,.hero-visual::after,.net-links line,.price-badge::after,body.subpage .tag-soon{animation:none !important}
  body.subpage .page-hero-split .page-hero-copy .eyebrow,
  body.subpage .page-hero-split .page-title,
  body.subpage .page-hero-split .page-lead{opacity:1;transform:none;animation:none}
  html.js body.subpage .offer-sec .offer,
  html.js body.subpage .offer-sec.referred .wrap,
  html.js body.subpage .group-heading{opacity:1;transform:none}
  body.subpage .offer.in .checklist li,
  body.subpage .offer.in .price-badge{opacity:1;transform:none;transition:none}
}

/* jump bar: keep the pills, set them off in a subtle outlined tray */
.offer-jump{
  align-items:center;margin-top:clamp(30px,4vw,46px);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  border-radius:16px;padding:14px 16px;
}
.jump-label{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-light);margin-right:4px;
}

/* CTA gate banner: distinct shade from the navy footer, glowing gate motif */
.cta-gate{
  background:linear-gradient(135deg,var(--navy-2) 0%,#17294a 60%,#1d3357 100%);
  border-top:3px solid rgba(60,198,174,.55);
}
.cta-gate-bg{position:absolute;inset:0;overflow:hidden}
.gate-visual{
  position:relative;z-index:2;height:clamp(240px,26vw,320px);border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;align-items:flex-end;justify-content:center;padding:clamp(28px,4vw,44px);
}
.gate-mark{display:flex;align-items:flex-end;gap:clamp(14px,2vw,22px);height:78%}
.gm-bar{width:clamp(26px,4vw,40px);height:100%;background:linear-gradient(180deg,#2a4062,#1a2c46);border-radius:6px 6px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.gm-gate{height:62%;background:var(--teal-light);box-shadow:0 18px 30px -16px rgba(0,0,0,.55);animation:gatepulse 3.6s ease-in-out infinite}
@keyframes gatepulse{0%,100%{opacity:.82}50%{opacity:1}}

/* the next-step link on the three front-door services */
.offer-next{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.98rem;color:var(--navy);
  border:1.5px solid rgba(10,117,104,.6);border-radius:999px;padding:.7em 1.4em;
  transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.offer-next span{color:var(--teal);transition:transform .25s var(--ease)}
.offer-next:hover{background:rgba(10,117,104,.12);border-color:var(--teal);transform:translateY(-2px)}
.offer-next:hover span{transform:translateX(4px)}
.offer-sec.alt .offer-next{background:rgba(255,255,255,.5)}

@media (max-width:960px){
  .page-hero-split .page-hero-inner{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .hero-visual,.gate-visual{display:none}
  .offer-jump{padding:12px 12px}
}
@media (prefers-reduced-motion:reduce){
  .net,.net-nodes .node,.gm-gate{animation:none !important}
}

/* ============================================================
   PRICING PAGE — hero tiers, richer note cards, polished table
   ============================================================ */

/* ascending-tiers visual in the pricing hero glass panel */
.hero-visual .tiers{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,2.2vw,24px);padding:clamp(30px,4.5vw,54px);
}
.tier{
  height:clamp(24px,3.6vw,40px);border-radius:10px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#2a4062,#1a2c46);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  animation:tiergrow .9s var(--ease) forwards, tiersheen 5s ease-in-out infinite;
  animation-delay:calc(var(--i) * .14s), calc(1s + var(--i) * .3s);
}
.tier.t1{width:42%}
.tier.t2{width:62%}
.tier.t3{width:80%}
.tier.t4{width:100%}
.tier.teal{background:var(--teal-light);box-shadow:0 14px 26px -14px rgba(0,0,0,.55)}
@keyframes tiergrow{to{transform:scaleX(1)}}
@keyframes tiersheen{0%,100%{opacity:.72}50%{opacity:1}}

/* pricing note cards: brand-consistent, hover-lift, mark badge */
.notes-3{grid-template-columns:repeat(3,1fr)}
.note-card{
  background:var(--porcelain);border:1px solid rgba(122,134,153,.2);border-radius:var(--r);
  padding:32px 30px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.note-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.note-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.note-card:hover::before{transform:scaleX(1)}
.note-mark{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:12px;background:var(--mist);margin-bottom:20px}

/* polished pricing table */
.ptable-wrap{border-radius:16px}
.ptable thead th{padding:18px 24px}
.ptable tbody th,.ptable td{padding:22px 24px}
.ptable td.num{font-size:1.28rem}
.row-feature{box-shadow:inset 4px 0 0 var(--teal)}

@media (max-width:900px){
  .notes-3{grid-template-columns:1fr}
}

/* ============================================================
   CONSULT POPUP — free 15-minute call, shown once per session
   ============================================================ */
.consult-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(14,28,47,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s linear .35s;
}
.consult-overlay.is-open{
  opacity:1;visibility:visible;
  transition:opacity .35s var(--ease),visibility 0s linear 0s;
}
.consult-modal{
  position:relative;width:100%;max-width:440px;
  background:var(--porcelain);border-radius:20px;
  border-top:4px solid var(--teal);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  padding:38px 36px 34px;
  transform:translateY(18px) scale(.98);
  transition:transform .35s var(--ease);
}
.consult-overlay.is-open .consult-modal{transform:translateY(0) scale(1)}
.consult-close{
  position:absolute;top:16px;right:16px;
  width:34px;height:34px;border-radius:50%;border:none;background:var(--mist);
  color:var(--slate);font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.consult-close:hover{background:var(--teal);color:#fff}
.consult-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--harbor);
  margin:0 0 16px;
}
.consult-title{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.6rem;color:var(--ink);
  letter-spacing:-.015em;line-height:1.15;margin:0 0 12px;
}
.consult-body{color:var(--muted);font-size:1rem;line-height:1.55;margin:0 0 26px}
.consult-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.consult-actions .btn{width:100%}
.consult-dismiss{
  display:inline-block;text-align:center;font-family:'Archivo',sans-serif;font-weight:500;
  font-size:.88rem;color:var(--slate);padding:4px;
}
.consult-dismiss:hover{color:var(--harbor)}

@media (max-width:480px){
  .consult-modal{padding:32px 26px 28px}
  .consult-title{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .consult-overlay,.consult-modal{transition:none}
}

/* ============================================================
   FIVE-UP GRIDS — Who We Serve / How An Engagement Works,
   now that Startup and Small Business join the original three ICPs.
   Flexbox instead of grid so an incomplete last row (2 of 3) centers
   itself instead of stranding one card alone on its own row.
   ============================================================ */
.icp-grid-5{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.icp-grid-5 > .icp-card{flex:1 1 300px;max-width:360px}
.paths-5{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.paths-5 > .path{flex:1 1 320px;max-width:380px}
@media (max-width:640px){
  .icp-grid-5 > .icp-card,.paths-5 > .path{max-width:none}
}

/* ============================================================
   AUDIENCE TOGGLE — Nonprofit / Business
   One offer, two audiences. Both copies live in the page; the
   toggle just shows/hides. All toggles on a page stay in sync.
   ============================================================ */
.audience-toggle{
  display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:var(--mist);margin-bottom:22px;
}
.offer-sec.alt .audience-toggle{background:rgba(255,255,255,.6)}
.audience-toggle button{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.85rem;
  padding:.5em 1.1em;border-radius:999px;border:none;background:transparent;
  color:var(--slate);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);
}
.audience-toggle button.is-active{background:var(--navy);color:#fff}
.audience-toggle button:hover:not(.is-active){color:var(--navy)}
/* hidden only once JS is running, so no-JS visitors see both versions instead of neither */
html.js [data-audience-content]{display:none}
html.js [data-audience-content].is-visible{display:block}
html.js [data-audience-content].audience-inline.is-visible{display:inline}
/* pricing-table toggle sits above the table, not inside each offer section */
.ptable-audience-toggle{margin-bottom:18px}

/* ============================================================
   LEGAL PAGES (Privacy Policy, Terms & Conditions)
   ============================================================ */
.legal-content{max-width:none;margin:0 auto}
.legal-content .legal-updated{color:var(--muted);font-size:.92rem;margin-bottom:32px}
.legal-content h2{font-size:1.4rem;margin-top:44px;margin-bottom:14px}
.legal-content h2:first-of-type{margin-top:0}
.legal-content h3{font-size:1.1rem;margin-top:26px;margin-bottom:10px}
.legal-content p{color:var(--text);font-size:1rem;line-height:1.7;margin-bottom:14px}
.legal-content ul{margin:0 0 14px;padding-left:22px}
.legal-content li{color:var(--text);font-size:1rem;line-height:1.7;margin-bottom:8px}
.legal-content a{color:var(--navy);text-decoration:underline}
.legal-content .legal-note{background:var(--porcelain);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:18px 22px;margin:24px 0;font-size:.95rem;color:var(--text)}

.hosting-only-note{margin-top:14px;padding-top:14px;border-top:1px solid rgba(122,134,153,.2);font-size:.85rem;color:var(--muted);text-align:center}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form-sec{background:var(--mist)}
.contact-form-wrap{max-width:none;margin:0 auto}
.contact-form{
  background:#fff;border:1px solid rgba(122,134,153,.18);border-radius:var(--r);
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-sm);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.field label{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.02em;color:var(--navy);
}
.field label .optional{color:var(--navy);font-weight:500}
.field input,.field textarea{
  font-family:'Inter',sans-serif;font-size:1rem;color:var(--navy);
  background:var(--porcelain);border:1px solid rgba(122,134,153,.3);border-radius:10px;
  padding:12px 14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,.field textarea:focus{
  border-color:var(--harbor);box-shadow:0 0 0 3px rgba(53,80,122,.15);outline:none;
}
.field textarea{resize:vertical;min-height:130px}
.form-note{color:var(--navy);font-size:.9rem;margin-top:16px;text-align:center}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{display:none;text-align:center;padding:12px 0}
.form-success.is-visible{display:block}
.form-success h3{font-family:'Archivo',sans-serif;font-size:1.35rem;color:var(--navy);margin:0 0 8px}
.form-success p{color:var(--muted);margin:0}
.contact-form.is-submitted .contact-fields{display:none}
.form-error{display:none;text-align:center;color:var(--harbor);font-size:.92rem;margin:14px 0 0}
.form-error.is-visible{display:block}

@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
}

/* ============================================================
   FOOTER SUBSCRIBE (newsletter signup)
   The form itself is a MailerLite embed (account 2609822, form
   JndOys) — MailerLite's own script renders and styles it. Colors,
   fonts, and button styling for that form are set inside MailerLite's
   form editor (Forms → JndOys → Styles), not here; match Navy
   #14263F / Teal #0A7568 / white text there to fit the dark footer.
   ============================================================ */
.footer-subscribe p{color:rgba(255,255,255,.62);font-size:.9rem;margin:0 0 14px;line-height:1.5}
.footer-subscribe .ml-embedded{max-width:280px}

/* Homepage in the Kingdom52 palette: navy, teal, porcelain. Archivo and Inter. */
body.home{
  --ink:var(--navy);
  --paper:var(--porcelain);
  --oxide:var(--teal);
  --line:#D5DCE6;
  background:var(--paper);
  color:var(--ink);
  caret-color:var(--navy);
  scrollbar-color:var(--navy) var(--porcelain);
}
body.home ::selection{background:var(--mist);color:var(--navy)}
body.home :focus-visible{outline:3px solid var(--teal);outline-offset:3px}
body.home h1,body.home h2,body.home h3,body.home h4,body.home .k52-fees strong{
  font-weight:800;
  letter-spacing:-.03em;
}
body.home a:not(.btn){color:inherit}

body.home .site-header{background:transparent;padding:18px 0}
body.home .site-header.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 var(--line);
}
body.home .nav a{color:var(--porcelain);font-weight:500}
body.home .scrolled .nav a{color:var(--ink)}
body.home .nav-mail{font-size:.95rem}
body.home .nav-toggle span{background:#fff}
body.home .scrolled .nav-toggle span{background:var(--ink)}
/* one primary action per view: the paired "Book a call" button is an outline, not a second teal block */
body.home .btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
body.home .btn-secondary:hover{background:var(--navy);color:#fff}

body.home .k52-open{
  background:var(--navy);
  color:var(--porcelain);
  padding:132px 0 36px;
}
body.home .k52-open h1{
  margin:0;
  color:var(--porcelain);
  /* "NONPROFIT" runs about 6em wide in Archivo 800 caps. Size from the space the wrap actually has
     (viewport minus the 48px gutters) so the word fits at 320px and never clips. */
  font-size:clamp(2.2rem,min(8.4vw,calc((100vw - 48px) / 6.4)),6rem);
  line-height:.9;
  max-width:12ch;
  text-transform:uppercase;
  overflow-wrap:break-word;
  hyphens:manual;
}
body.home .k52-open-foot{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:32px;
  align-items:end;
  margin-top:36px;
}
body.home .k52-open-foot p{
  margin:0;
  max-width:none;
  font-size:1.2rem;
  line-height:1.45;
  color:var(--porcelain);
}
body.home .k52-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
body.home .k52-rule{position:relative;height:36px;margin-top:40px;overflow:hidden}
body.home .k52-rule::before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:22px;
  background:repeating-linear-gradient(90deg,var(--porcelain) 0 2px,transparent 2px calc(100% / 52));
  transform-origin:left center;
  transform:scaleX(1);
}
body.home .k52-rule i{
  position:absolute;left:50%;bottom:0;width:3px;height:28px;background:var(--teal-light);
}
@media (prefers-reduced-motion:no-preference){
  body.home .k52-rule::before{
    transform:scaleX(0);
    animation:k52draw 1.5s cubic-bezier(.16,1,.3,1) .15s forwards;
  }
  body.home .k52-rule i{height:0;animation:k52gate .45s cubic-bezier(.16,1,.3,1) 1.35s forwards}
  body.home .k52-open h1{animation:k52rise .9s cubic-bezier(.16,1,.3,1) both}
}
@keyframes k52draw{to{transform:scaleX(1)}}
@keyframes k52gate{to{height:28px}}
@keyframes k52rise{from{transform:translateY(14px)}to{transform:none}}

body.home .k52-fees{background:var(--paper);padding:48px 0 24px}
body.home .k52-fees .eyebrow{display:block;text-align:left;margin:0 0 8px}
body.home .k52-fee-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  text-align:left;
}
body.home .k52-fee-grid > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:36px 24px 32px 0;
  color:var(--ink);
  text-align:left;
}
body.home .k52-fee-grid > div + div{padding-left:24px;box-shadow:inset 1px 0 0 var(--line)}
body.home .k52-fee-grid span{display:block;font-size:1.05rem;font-weight:600;line-height:1.3;overflow-wrap:break-word;text-align:left}
body.home .k52-fee-grid strong{
  display:block;
  margin-top:8px;
  font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1.1;
  color:var(--ink);
  overflow-wrap:anywhere;
  text-align:left;
}
body.home .k52-fee-grid strong span{display:inline;font-size:1.35rem;letter-spacing:0}
body.home .k52-fee-grid em{
  display:block;
  margin-top:12px;
  font-style:normal;
  font-size:1.02rem;
  max-width:none;
  text-align:left;
}

body.home .k52-vow-body{
  font-weight:400 !important;
  font-size:1.15rem !important;
  line-height:1.55 !important;
  letter-spacing:0 !important;
  max-width:none !important;
  margin-top:22px !important;
}

body.home .k52-index{padding:72px 0 20px}
body.home .k52-index .k52-lead{
  margin:0;
  font-weight:800;
  font-size:clamp(2.2rem,3.6vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.03em;
  max-width:none;
  color:var(--ink);
}
body.home .k52-index .k52-vow-body{
  margin-bottom:40px !important;
}
body.home .k52-index h2{
  font-size:clamp(2rem,3.3vw,3.3rem);
  line-height:1.08;
  max-width:none;
  margin:0 0 28px;
}
body.home .k52-how h2{
  font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:1.08;
  max-width:none;
  margin:0 0 28px;
}
body.home .k52-index .k52-claim{
  margin-top:28px !important;
}
body.home .k52-rows a,
body.home .k52-rows .is-soon{
  display:grid;
  grid-template-columns:15rem minmax(0,1fr);
  gap:24px;
  align-items:baseline;
  padding:18px 0;
  border-top:1px solid var(--line);
  color:var(--ink);
  min-height:44px;
}
body.home .k52-rows > :last-child{border-bottom:1px solid var(--line)}
body.home .k52-rows a span:first-child,
body.home .k52-rows .is-soon span:first-child{font-weight:600;font-size:1.1rem;white-space:nowrap}
body.home .k52-rows a span:last-child,
body.home .k52-rows .is-soon span:last-child{
  max-width:none;
  font-size:1.05rem;
}
body.home .k52-rows a:hover span:first-child{color:var(--oxide)}
body.home .k52-rows .is-soon span:first-child em{
  display:inline-block;
  margin-left:8px;
  font-style:normal;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal);
  vertical-align:middle;
}

/* How we work: reuses .steps/.step; two columns on desktop, one below 960px */
body.home .k52-how{padding:64px 0 20px}
body.home .k52-how .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;margin-top:40px}
body.home .k52-how .step h3{line-height:1.15}
@media (max-width:960px){body.home .k52-how .steps{grid-template-columns:minmax(0,1fr)}}
/* Harbor text links and the Systems Check CTA + microcopy */
body.home a.k52-link,
a.k52-link{color:var(--harbor);text-decoration:underline;text-underline-offset:3px}
body.home a.k52-link:hover,
a.k52-link:hover{color:var(--harbor-deep)}
body.subpage .section-head,
body.subpage .section-title,
body.subpage .section-intro,
body.subpage .page-title,
body.subpage .page-lead,
body.subpage .offer-name,
body.subpage .offer-desc{max-width:none}
body.home .k52-cta{margin-top:22px}
body.home .k52-cta .form-note{margin:10px 0 0}
body.home .k52-fees-more{margin:20px 0 0}
@media (max-width:560px){body.home .k52-cta .btn{width:100%}}
/* Screenshot lightbox — click anywhere (or Esc) to close */
.k52-lightbox{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(14,28,47,.88);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
  cursor:zoom-out;
}
.k52-lightbox.is-open{
  opacity:1;visibility:visible;
  transition:opacity .3s var(--ease),visibility 0s linear 0s;
}
.k52-lightbox img{
  max-width:min(1120px,100%);
  max-height:min(88vh,100%);
  width:auto;height:auto;
  border:1px solid rgba(252,252,250,.2);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
  cursor:default;
}
.k52-lightbox-close{
  position:absolute;top:18px;right:18px;
  width:40px;height:40px;border:none;border-radius:50%;
  background:rgba(252,252,250,.12);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;
}
.k52-lightbox-close:hover{background:rgba(252,252,250,.22)}
.k52-lightbox-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  margin:0;color:rgba(252,252,250,.7);font-size:.9rem;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .k52-lightbox{transition:none}
}

body.home .k52-fn{
  color:var(--harbor);
  font-weight:600;
  font-size:.85em;
  vertical-align:super;
  line-height:0;
  margin-left:1px;
  text-decoration:none;
}
body.home .k52-fn:hover{color:var(--harbor-deep)}
.footer-notes{
  padding:18px 0 0;
  border-top:1px solid rgba(252,252,250,.2);
  margin-top:8px;
}
.footer-notes p{
  margin:0;
  font-size:.88rem;
  line-height:1.5;
  color:rgba(252,252,250,.78);
  max-width:none;
}
.footer-notes a{color:var(--porcelain);text-decoration:underline;text-underline-offset:2px}
.k52-fn-back{font-weight:700;margin-right:4px;text-decoration:none !important}

body.home .k52-founder{padding:88px 0}
body.home .k52-founder-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:56px;
  align-items:center;
}
body.home .k52-founder img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
}
body.home .k52-founder h2{font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.08;margin:0 0 18px;max-width:none}
body.home .k52-founder p{max-width:none}
body.home .k52-by{font-weight:600;margin-top:8px}

body.home .k52-write{padding:20px 0 96px}
body.home .k52-write-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:48px;
  align-items:start;
}
body.home .k52-write h2{font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.08;margin:0 0 16px;max-width:none}
body.home .k52-write a{border-bottom:1px solid var(--oxide)}
body.home .contact-form{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
}
body.home .field label{color:var(--ink);font-weight:600}
body.home .field input,body.home .field textarea{
  width:100%;
  border:0;
  border-bottom:1.5px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:1.05rem;
  padding:12px 0;
  min-height:48px;
}
body.home .field textarea{min-height:120px;resize:vertical}
body.home .form-note{color:var(--ink);text-align:left}
body.home .k52-opt-in{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:8px 0 18px;
  font-size:.95rem;
  line-height:1.45;
  color:var(--ink);
  cursor:pointer;
}
body.home .k52-opt-in input{
  margin-top:.35em;
  width:1.05em;
  height:1.05em;
  flex:none;
  accent-color:var(--teal);
}
body.home .form-success h3{color:var(--ink)}
body.home .form-success p,body.home .form-error{color:var(--ink)}

body.home .site-footer{background:var(--navy);color:var(--porcelain)}
body.home .footer-brand strong{font-size:2rem;letter-spacing:-.03em}
body.home .footer-desc,body.home .footer-subscribe p,body.home .footer-plain,body.home .footer-verse{color:var(--porcelain)}
body.home .footer-cols a,body.home .footer-cols h4{color:var(--porcelain)}
body.home .footer-notes{border-top-color:rgba(252,252,250,.2)}
body.home .footer-notes p{color:rgba(252,252,250,.78)}
body.home .footer-notes a{color:var(--porcelain)}
body.home .footer-base{color:var(--porcelain);border-top-color:rgba(252,252,250,.2)}
body.home .footer-base a{color:var(--porcelain)}

@media (max-width:900px){
  body.home .k52-open-foot,body.home .k52-fee-grid,body.home .k52-founder-grid,body.home .k52-write-grid,body.home .k52-rows a{grid-template-columns:minmax(0,1fr)}
  body.home .k52-actions{justify-content:flex-start}
  body.home .k52-fee-grid > div{min-height:0;padding-right:0}
  body.home .k52-fee-grid > div + div{padding-left:0;box-shadow:inset 0 1px 0 var(--line)}
  body.home .nav-mail{display:none}
}
@media (max-width:720px){
  body.home .k52-open{padding-top:108px}
}

/* ============================================================
   NARROW-SCREEN HARDENING
   Measured at 320 and 390px: the footer column row (Explore / Get in touch / Subscribe)
   was a non-wrapping flex row ~440px wide and pushed every page's scrollWidth to ~463-473px.
   The rest below stops the same class of overflow before it can start.
   ============================================================ */
.footer-inner>*,.footer-cols>*{min-width:0}
.footer-subscribe .ml-embedded{max-width:100%}
@media (max-width:720px){
  .footer-cols{flex-direction:column;gap:30px;width:100%}
  .footer-base{flex-direction:column;gap:12px}
}
/* every collapsed grid column may shrink below its content's minimum */
@media (max-width:960px){
  .who-grid,.build-grid,.quote-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col,.about-col,.hero-inner,.cta-banner .cta-inner,.page-hero-split .page-hero-inner,.icp-grid,.referred-grid,.offerwall,.paths,.offer-grid,.notes-grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .checklist.two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .careplan-tiers,.notes-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .strip-grid,.who-grid,.build-grid,.quote-grid,.form-row{grid-template-columns:minmax(0,1fr)}
  .price-badge{min-width:0}
  .price{overflow-wrap:anywhere}
  .value-bar-row{grid-template-columns:minmax(0,1fr)}
  .offer-jump a{padding:10px 14px}
}
@media (max-width:560px){
  /* long labels wrap instead of forcing the page wider */
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btn-lg{padding:.9em 1.4em}
  .hero-actions,body.home .k52-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn,body.home .k52-actions .btn{justify-content:center;text-align:center}
  .consult-actions .btn{white-space:normal}
  .wrap{width:min(100% - 40px,var(--wrap))}
}
/* wide tables scroll inside their own box, never the page */
.ptable-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
.ptable-wrap:focus-visible{outline-offset:2px}
@media (max-width:640px){
  .ptable{min-width:600px}
  .ptable thead th,.ptable tbody th,.ptable td{padding-left:16px;padding-right:16px}
}

/* ============================================================
   CARE PLANS + HOSTING ONLY (FINAL copy 2026-10-08)
   Four cards: Hosting Only, Essential, Growth, Partner.
   ============================================================ */
.careplan-tiers-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.careplan-tier h3.careplan-name{font-family:'Archivo',sans-serif;font-size:1.1rem;font-weight:700;color:var(--navy);margin:0 0 4px;line-height:1.2}
.careplan-tax{margin:14px 0 0;font-size:.9rem;color:var(--muted)}
.careplans-sec{background:var(--mist)}
.careplans-sec .careplan-tier{background:var(--porcelain)}
.careplan-terms{margin-top:30px;background:#fff;border:1px solid rgba(122,134,153,.2);border-radius:var(--r);padding:26px 28px}
.careplan-terms h3{font-family:'Archivo',sans-serif;font-size:1.25rem;font-weight:700;color:var(--ink);margin:0 0 14px}
.careplan-terms p{font-size:1rem;color:var(--text);line-height:1.55;margin:0 0 12px;max-width:75ch}
.careplan-terms strong{color:var(--ink)}
.careplan-terms ul{margin:4px 0 0;padding-left:20px;max-width:75ch}
.careplan-terms li{margin-bottom:6px;color:var(--text)}
@media (max-width:1100px){.careplan-tiers-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.careplan-tiers-4{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   REVIEW PASS 2026-10-08 — header, heading scale, measure, motion
   One heading system for every page, per the brand sheet:
   Archivo 700 for page H1, Archivo 600 for H2/H3; Inter for body.
   ============================================================ */

/* sticky header never covers an anchored heading (#care-plan, #about, ...) */
html{scroll-padding-top:96px}
@media (max-width:900px){html{scroll-padding-top:80px}}

/* ---------- Site header ---------- */
.nav a{white-space:nowrap}
.header-cta{white-space:nowrap;flex:none}
@media (max-width:1100px){
  .nav{gap:22px}
  .nav-mail{display:none}
}
/* links wrapped onto two or three lines from 721 to ~1000px; switch to the menu below 900px */
@media (max-width:900px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:flex;flex-direction:column;gap:4px;padding:12px 24px 22px;background:rgba(252,252,250,.98);backdrop-filter:blur(12px)}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a{font-family:'Archivo',sans-serif;font-weight:600;color:var(--navy);padding:12px 0;border-bottom:1px solid rgba(122,134,153,.18)}
  .mobile-menu .btn{margin-top:12px;border-bottom:0;color:#fff}
  .site-header.menu-open{background:rgba(252,252,250,.98);backdrop-filter:blur(12px)}
  .menu-open .nav-toggle span,body.home .menu-open .nav-toggle span{background:var(--navy)}
}
/* MailerLite renders its own gold (#C9A227) Subscribe button with !important.
   Gold is retired; pin it to the teal action color until the form is restyled in MailerLite. */
.site-footer #mlb2-45459576.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
.site-footer .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button{
  background-color:var(--teal) !important;color:#fff !important;border-radius:999px !important;font-family:'Archivo',sans-serif !important;font-weight:600 !important;
}
.site-footer #mlb2-45459576.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
.site-footer .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover{
  background-color:var(--teal-deep) !important;
}

/* ---------- Heading scale (all pages) ---------- */
h1,h2,h3,h4{text-wrap:balance}
.page-title{
  font-size:clamp(2.3rem,4.2vw,3.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.06;
}
body.subpage .page-title,body.subpage .page-hero-split .page-title{max-width:20ch}
.section-title,.offer-name,.cta-title,
body.home .k52-index .k52-lead,
body.home .k52-how h2,
body.home .k52-founder h2,
body.home .k52-write h2{
  font-family:'Archivo',sans-serif;
  font-size:clamp(1.95rem,3vw,2.75rem);font-weight:600;letter-spacing:-.015em;line-height:1.1;
}
.section-title,.cta-title,body.subpage .section-title{max-width:24ch}
.offer-name,body.subpage .offer-name{max-width:24ch}
body.home .k52-index .k52-lead,body.home .k52-founder h2{max-width:22ch}
body.home .k52-how h2,body.home .k52-write h2{max-width:none}
.deliverables h3,.careplan-terms h3{font-weight:600;letter-spacing:-.005em;line-height:1.25}
.offer-connect h3,.note-card h3,.referred-card h3{font-weight:600;letter-spacing:-.005em}

/* Homepage: same system. 800 weight and -.03em tracking crushed the small headings. */
body.home h1{font-weight:700;letter-spacing:-.02em}
body.home h2,body.home h3,body.home h4{font-weight:600;letter-spacing:-.01em}
body.home .k52-fees strong{font-weight:600;letter-spacing:-.015em}
body.home .k52-index .k52-index-sub{
  font-size:clamp(1.35rem,1.9vw,1.7rem);font-weight:600;line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);margin:8px 0 22px;max-width:none;
}
body.home .k52-how .step h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.005em}

/* ---------- Line length: prose stays readable on the widened layout ---------- */
body.subpage .page-lead,
body.subpage .offer-desc,
body.subpage .section-intro,
.lead,
.offer-connect p,
.notincluded p,
.cta-sub,.cta-banner .cta-sub,
body.home .k52-open-foot p,
body.home .k52-vow-body,
body.home .k52-fee-grid em,
body.home .k52-founder p,
.footer-notes p,body.home .footer-notes p{max-width:68ch !important}
body.home .k52-rows a span:last-child,
body.home .k52-rows .is-soon span:last-child{max-width:72ch}
.legal-content > *{max-width:76ch}
.legal-content > .legal-note{max-width:76ch}

/* ---------- Homepage rows: Desk Agents row stayed two-column on phones ---------- */
@media (max-width:900px){
  body.home .k52-rows .is-soon{grid-template-columns:minmax(0,1fr);gap:6px}
  body.home .k52-rows a{gap:6px}
}

/* ---------- Mobile type ---------- */
@media (max-width:560px){
  .page-title{font-size:clamp(2rem,8.4vw,2.4rem)}
  .section-title,.offer-name,.cta-title,
  body.home .k52-index .k52-lead,
  body.home .k52-how h2,
  body.home .k52-founder h2,
  body.home .k52-write h2{font-size:clamp(1.65rem,7vw,2rem);line-height:1.12}
  body.home .k52-index .k52-index-sub{font-size:1.25rem}
  .page-hero{padding-top:118px}
}
.cta-banner .cta-title,.cta-title{font-size:clamp(1.95rem,3vw,2.75rem);font-weight:600;letter-spacing:-.015em;line-height:1.1}
.legal-content h2{font-weight:600}
body.home .k52-index .k52-lead,body.home .k52-founder h2{max-width:26ch}
@media (max-width:560px){.cta-banner .cta-title,.cta-title{font-size:clamp(1.65rem,7vw,2rem)}}
.careplans-sec .audience-toggle{background:#fff}
@media (max-width:720px){.price-badge{justify-self:stretch;width:100%;max-width:none}}

/* ============================================================
   OFFERS: Launch "After handoff" aside (pass 2)
   Short paragraphs with clear gaps, body-color text for contrast,
   and a hairline before the example timeline.
   ============================================================ */
.offer-side .handoff-copy{display:flex;flex-direction:column;gap:12px}
.offer-side .handoff-copy p{margin:0;font-size:.97rem;line-height:1.55;color:var(--text);max-width:60ch}
.offer-side .handoff-copy p + p{margin-top:0}
.offer-side .handoff-copy a{color:var(--harbor);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.offer-side .handoff-copy a:hover{color:var(--harbor-deep)}
.offer-side .handoff-copy + h4{margin-top:24px;padding-top:20px;border-top:1px solid rgba(122,134,153,.2)}

/* ============================================================
   HOMEPAGE PASS 2 (2026-10-08)
   Back to a centered 1180px frame like f9fbfa4, with narrower
   columns for text: intros run 760px, the module list 880px,
   prose never past ~62-68ch. Every rule is scoped to body.home.
   Spacing scale (4px base): 8 12 16 24 32 48 64 96 120.
   ============================================================ */
body.home{--measure:30.5em;--sec-pad:clamp(72px,9vw,120px)}
/* --measure is in em of each element's own size: about 62-68 characters of Inter per line, spaces included */

/* section rhythm: one vertical interval for every content section */
body.home .k52-sec{padding:var(--sec-pad) 0}
/* How we work and Pricing share a background: a hairline separates them */
body.home .k52-fees.k52-sec{padding-top:0}
body.home .k52-fees > .wrap{border-top:1px solid var(--line);padding-top:var(--sec-pad)}

/* centered section intro: eyebrow, H2, lead */
body.home .k52-intro{max-width:760px;margin:0 auto clamp(40px,5vw,56px);text-align:center}
body.home .k52-intro .eyebrow{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 16px;color:var(--slate);text-align:center}
body.home .k52-sec h2{
  font-family:'Archivo',sans-serif;font-size:clamp(1.95rem,3vw,2.75rem);font-weight:600;
  letter-spacing:-.015em;line-height:1.1;color:var(--ink);margin:0;max-width:none;
}
body.home .k52-intro h2{max-width:28ch;margin-inline:auto}
body.home .k52-intro-lead{
  max-width:var(--measure);margin:20px auto 0;font-size:1.15rem;line-height:1.6;color:var(--text);
}

/* ---------- Hero: centered, calmer type ---------- */
body.home .k52-open{padding:152px 0 40px}
body.home .k52-open-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
body.home .k52-open h1{
  font-size:clamp(2.6rem,min(8vw,calc((100vw - 48px) / 6.4)),5.25rem);
  line-height:.94;max-width:none;margin:0 auto;
}
body.home .k52-open-lead{
  max-width:var(--measure);margin:28px auto 0;font-size:clamp(1.08rem,1.4vw,1.2rem);line-height:1.6;
  color:rgba(252,252,250,.86);
}
body.home .k52-open .k52-actions{justify-content:center;gap:14px;margin-top:36px}
body.home .k52-open-note{margin:14px 0 0;font-size:.9rem;color:rgba(252,252,250,.68)}
body.home .k52-open .k52-rule{width:100%;margin-top:56px}

/* ---------- What we build ---------- */
body.home .k52-index .k52-index-sub{
  font-size:clamp(1.2rem,1.6vw,1.4rem);font-weight:600;line-height:1.25;margin:0 0 20px;max-width:none;text-align:left;
}
body.home .k52-rows a,
body.home .k52-rows .is-soon{grid-template-columns:12.5rem minmax(0,1fr);gap:32px;padding:20px 0}
body.home .k52-rows a span:last-child,
body.home .k52-rows .is-soon span:last-child{max-width:var(--measure);font-size:1.02rem;line-height:1.55;color:var(--text)}
body.home .k52-rows a span:first-child,
body.home .k52-rows .is-soon span:first-child{font-family:'Archivo',sans-serif;font-size:1.08rem}
body.home .k52-rows a:hover span:last-child{color:var(--ink)}
body.home .k52-claim{max-width:var(--measure);margin:24px auto 0;font-size:.95rem;color:var(--slate);text-align:center;text-wrap:balance}

/* ---------- Product screenshots: one carousel ---------- */
body.home .k52-product{background:var(--mist)}
body.home .k52-carousel{max-width:1100px;margin:0 auto}
body.home .k52-car-groups{
  display:flex;width:max-content;max-width:100%;margin:0 auto 24px;padding:4px;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
}
body.home .k52-car-groups[hidden],body.home .k52-car-controls[hidden]{display:none}
body.home .k52-car-groups button{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em;
  min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--slate);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
body.home .k52-car-groups button:hover{color:var(--navy)}
body.home .k52-car-groups button[aria-pressed="true"]{background:var(--navy);color:#fff}

/* without JS: a horizontally scrollable, snapping row; the next slide peeks in */
body.home .k52-car-viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--slate) transparent;border-radius:16px;
}
body.home .k52-car-viewport:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
body.home .k52-car-track{display:flex;gap:16px;list-style:none;margin:0;padding:2px 2px 16px}
body.home .k52-slide{flex:0 0 88%;min-width:0;scroll-snap-align:center}
body.home .k52-slide figure{margin:0}
/* with JS: one slide per view, controls take over */
body.home .k52-carousel.is-enhanced .k52-car-viewport{scrollbar-width:none}
body.home .k52-carousel.is-enhanced .k52-car-viewport::-webkit-scrollbar{display:none}
body.home .k52-carousel.is-enhanced .k52-car-track{gap:0;padding:0}
body.home .k52-carousel.is-enhanced .k52-slide{flex-basis:100%;padding:0 24px 8px}

/* browser-style frame; every screenshot sits whole on a light stage, never past native width */
body.home .k52-frame{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 2px 4px -2px rgba(20,38,63,.08),0 28px 56px -36px rgba(20,38,63,.4);
}
body.home .k52-frame-bar{
  display:flex;align-items:center;gap:16px;height:40px;padding:0 16px;
  background:#F4F6F8;border-bottom:1px solid var(--line);
}
body.home .k52-frame-bar::after{content:"";flex:0 0 42px}
body.home .k52-frame-dots{display:flex;gap:6px;flex:0 0 42px}
body.home .k52-frame-dots i{width:10px;height:10px;border-radius:50%;background:#D5DCE6}
body.home .k52-frame-url{
  flex:1 1 auto;max-width:320px;margin:0 auto;height:24px;padding:0 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:.78rem;font-weight:500;line-height:22px;color:var(--slate);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.home .k52-frame-stage{
  display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/1;
  padding:clamp(12px,2.6vw,32px);margin:0;border:0;border-radius:0;
  background:linear-gradient(180deg,#F7F9FA,#EEF2F5);cursor:zoom-in;font:inherit;color:inherit;
}
body.home .k52-frame-stage img{
  width:auto;height:auto;max-width:100%;max-height:100%;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  box-shadow:0 12px 28px -18px rgba(20,38,63,.45);
}
body.home .k52-frame-stage:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
body.home .k52-slide figcaption{max-width:var(--measure);margin:24px auto 0;text-align:center}
body.home .k52-slide-product{
  display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);
}
body.home .k52-slide-title{display:block;margin-top:6px;font-family:'Archivo',sans-serif;font-weight:600;font-size:1.2rem;line-height:1.3;color:var(--ink)}
body.home .k52-slide-text{display:block;margin-top:6px;font-size:1rem;line-height:1.55;color:var(--text)}

body.home .k52-car-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
body.home .k52-car-btn{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease);
}
body.home .k52-car-btn:hover:not(:disabled){border-color:var(--navy)}
body.home .k52-car-btn:disabled{opacity:.4;cursor:default}
body.home .k52-car-dots{display:flex;align-items:center;gap:2px}
body.home .k52-car-dot{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;
  border:0;background:transparent;cursor:pointer;
}
body.home .k52-car-dot::before{
  content:"";display:block;width:8px;height:8px;border-radius:999px;background:#AEB8C6;
  transition:width .25s var(--ease),background .25s var(--ease);
}
body.home .k52-car-dot:hover::before{background:var(--slate)}
body.home .k52-car-dot[aria-current="true"]::before{width:22px;background:var(--navy)}
body.home .k52-car-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
body.home .k52-shots-note{margin:24px 0 0;font-size:.92rem;color:var(--slate);text-align:center}
@media (max-width:720px){
  body.home .k52-carousel.is-enhanced .k52-slide{padding:0 2px 6px}
  body.home .k52-frame-stage{aspect-ratio:16/10;padding:10px}
  body.home .k52-frame-bar{height:32px;padding:0 12px;gap:10px}
  body.home .k52-frame-bar::after,body.home .k52-frame-dots{flex-basis:34px}
  body.home .k52-frame-dots i{width:8px;height:8px}
  body.home .k52-frame-url{height:20px;line-height:18px;font-size:.7rem}
  body.home .k52-slide figcaption{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  body.home .k52-car-dot::before,body.home .k52-car-btn,body.home .k52-car-groups button{transition:none}
}

/* ---------- How we work ---------- */
body.home .k52-how .steps{max-width:1000px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 72px}
body.home .k52-how .step p{max-width:var(--measure);color:var(--text);line-height:1.6}
body.home .k52-how .step h3{font-size:1.25rem;margin-bottom:10px}
@media (max-width:900px){body.home .k52-how .steps{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---------- Pricing summary ---------- */
body.home .k52-fees{background:var(--paper)}
body.home .k52-fee-grid{max-width:1080px;margin:0 auto}
body.home .k52-fee-grid > div{padding:8px 32px 8px 0}
body.home .k52-fee-grid > div + div{padding-left:32px}
body.home .k52-fee-grid span{font-family:'Archivo',sans-serif;font-size:.95rem;color:var(--slate)}
body.home .k52-fee-grid strong{font-size:clamp(1.4rem,2vw,1.75rem);margin-top:10px}
body.home .k52-fee-grid em{font-size:1rem;line-height:1.6;color:var(--text);margin-top:14px;max-width:var(--measure) !important}
body.home .k52-fees .k52-cta{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(40px,5vw,56px)}
body.home .k52-fees .k52-cta .form-note{text-align:center}
body.home .k52-fees .k52-fees-more{margin:16px 0 0}

/* ---------- Founder: photo + short measure, not a full-width wall ---------- */
body.home .k52-founder{background:var(--mist)}
body.home .k52-founder-grid{
  grid-template-columns:minmax(0,320px) minmax(0,34rem);justify-content:center;
  gap:clamp(40px,6vw,80px);align-items:center;max-width:1000px;
}
body.home .k52-founder-photo{margin:0}
body.home .k52-founder-photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;
  box-shadow:0 28px 56px -36px rgba(20,38,63,.5);
}
body.home .k52-founder-copy h2{max-width:16ch;margin:0 0 24px}
body.home .k52-founder-copy p{max-width:var(--measure) !important;font-size:1.08rem;line-height:1.65;color:var(--text);margin:0 0 16px}
body.home .k52-founder-copy .k52-by{
  display:flex;align-items:center;gap:12px;margin:24px 0 0;font-family:'Archivo',sans-serif;font-weight:600;font-size:1rem;color:var(--ink);
}
body.home .k52-founder-copy .k52-by::before{content:"";width:28px;height:2px;background:var(--teal)}
body.home .k52-founder-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- Contact ---------- */
body.home .k52-write-grid{max-width:1000px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,80px)}
body.home .k52-write h2{max-width:14ch;margin:0 0 20px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body.home .k52-founder-grid{grid-template-columns:minmax(0,1fr);gap:32px;max-width:34rem}
  body.home .k52-founder-photo{max-width:240px}
  body.home .k52-write-grid{grid-template-columns:minmax(0,1fr)}
  body.home .k52-fee-grid{max-width:34rem}
  body.home .k52-fee-grid > div,body.home .k52-fee-grid > div + div{padding:24px 0}
  body.home .k52-fee-grid > div:first-child{padding-top:0}
  body.home .k52-rows a,body.home .k52-rows .is-soon{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 0}
}
@media (max-width:720px){
  body.home .k52-open{padding:120px 0 32px}
  body.home .k52-open .k52-rule{margin-top:40px}
}
@media (max-width:560px){
  body.home{--sec-pad:64px}
  body.home .k52-sec h2{font-size:clamp(1.65rem,7vw,2rem);line-height:1.12}
  body.home .k52-intro-lead{font-size:1.05rem}
  /* long centered lines are hard to read on a phone: intros go left */
  body.home .k52-intro{text-align:left}
  body.home .k52-intro .eyebrow{justify-content:flex-start}
  body.home .k52-intro h2,body.home .k52-intro-lead{margin-left:0}
  body.home .k52-claim,body.home .k52-shots-note{text-align:left}
  body.home .k52-open h1{font-size:clamp(2.4rem,calc((100vw - 40px) / 6.2),3.4rem)}
  body.home .k52-open-lead{font-size:1.05rem}
  body.home .k52-open .k52-actions{width:100%}
  body.home .k52-founder-actions .btn{flex:1 1 100%}
}
/* the footer row above already draws a rule; the notes don't need a second one */
body.home .footer-notes{border-top:0;margin-top:0;padding-top:24px}
body.home .k52-write p,body.home .contact-form .form-note,body.home .k52-opt-in span{max-width:var(--measure)}

/* pass 2 polish: no one-word last lines, no break inside "walk-through" */
body.home .k52-open-lead,body.home .k52-intro-lead,body.home .k52-sec p,body.home .k52-rows span,body.home figcaption span{text-wrap:pretty}
body.home .nowrap{white-space:nowrap}
/* tablets: single columns sit centered under the centered intros instead of hugging the left edge */
@media (max-width:900px) and (min-width:561px){
  body.home .k52-how .steps,body.home .k52-write-grid{max-width:36rem;margin-left:auto;margin-right:auto}
}
body.home .k52-open-lead,body.home .k52-intro-lead{text-wrap:balance}

/* ============================================================
   PASS 4 (2026-10-08): one container, split home hero, What we build table
   - --wrap is 1100px on every page (was 1520 on subpages, 1180 on home),
     so the header, both heroes, and every section share one left and right edge.
   - Home hero matches the offers split hero: copy left (1.1fr), glass panel
     right (.9fr), same gap and panel height. The panel is the animated wall
     of bars from the live homepage hero (.hero-glass .wall, CSS above).
   - What we build: the b80aa31 label | description table, now inside the
     container instead of running 1520px wide.
   - Offers: one section interval, group labels sit with the section they name.
   Spacing scale (4px base): 8 12 16 24 32 48 64 96.
   ============================================================ */

/* ---------- Home hero: split, like offers ---------- */
body.home .k52-open{padding:clamp(140px,18vh,190px) 0 clamp(36px,4vw,48px)}
body.home .k52-open-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
  gap:clamp(30px,5vw,64px);
}
body.home .k52-open-copy{text-align:left;min-width:0}
body.home .k52-open h1{font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:.92;margin:0;max-width:none}
body.home .k52-open-lead{max-width:31em;margin:24px 0 0;text-wrap:pretty}
body.home .k52-open .k52-actions{justify-content:flex-start;gap:14px;margin-top:32px}
body.home .k52-open-note{margin:14px 0 0;text-align:left}
body.home .k52-open-visual{height:clamp(300px,32vw,400px)}
body.home .k52-open .k52-rule{margin-top:clamp(48px,6vw,72px)}
@media (max-width:960px){
  body.home .k52-open-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  body.home .k52-open-copy{max-width:36rem}
  body.home .k52-open h1{font-size:clamp(2.4rem,7.5vw,4rem)}
  body.home .k52-open-visual{height:clamp(200px,34vw,260px)}
}
/* phones: the wall stays, trimmed to a short strip under the buttons */
@media (max-width:720px){
  body.home .k52-open{padding:116px 0 32px}
  body.home .k52-open-visual{display:block;height:132px;border-radius:18px}
  body.home .k52-open-grid{gap:32px}
  body.home .k52-open .k52-rule{margin-top:36px}
}
@media (max-width:560px){
  body.home .k52-open h1{font-size:clamp(2.4rem,calc((100vw - 40px) / 6.2),3.4rem)}
}

/* ---------- What we build: label | description table ---------- */
/* b80aa31 structure: left-aligned intro, subhead, then the rows; now held inside the container */
body.home .k52-index-head{max-width:none;margin:0 0 clamp(40px,5vw,56px);text-align:left}
body.home .k52-index-head .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--slate)}
body.home .k52-index-head h2{max-width:31ch}
body.home .k52-index-lead{margin:20px 0 0;max-width:62ch;font-size:1.12rem;line-height:1.6;color:var(--text);text-wrap:pretty}
body.home .k52-index .k52-index-sub{margin:0 0 20px;max-width:none;text-align:left}
body.home .k52-rows a,
body.home .k52-rows .is-soon{grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:48px;padding:20px 0;align-items:baseline}
body.home .k52-rows a span:last-child,
body.home .k52-rows .is-soon span:last-child{max-width:64ch}
body.home .k52-index .k52-claim{max-width:none;margin:24px 0 0;text-align:left}
@media (max-width:900px){
  body.home .k52-index-head,body.home .k52-index .k52-index-sub,body.home .k52-rows,body.home .k52-index .k52-claim{max-width:40rem}
  body.home .k52-rows a,body.home .k52-rows .is-soon{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 0}
}

/* ---------- Offers: one vertical rhythm ---------- */
body.subpage{--offer-pad:clamp(56px,7vw,88px)}
body.subpage .offer-sec{padding:var(--offer-pad) 0}
body.subpage .offer-sec.referred{padding:var(--offer-pad) 0;margin-top:0}
body.subpage .group-heading{margin:clamp(48px,6vw,72px) 0 0}
/* a group label belongs to the section under it: close the gap to a plain section,
   and leave a porcelain margin above a mist band so the teal rule never sits on its edge */
body.subpage .wrap:has(> .group-heading) + .offer-sec:not(.alt){padding-top:clamp(36px,4vw,48px)}
body.subpage .wrap:has(> .group-heading) + .offer-sec.alt{margin-top:clamp(24px,3vw,32px)}

/* ---------- Home: grids use the full shared container, so their edges line up with the hero and table ---------- */
@media (min-width:901px){
  body.home .k52-how .steps,body.home .k52-fee-grid,body.home .k52-write-grid{max-width:none}
}

/* ---------- Line length: ~60-75 characters now that sections are 1100px ---------- */
/* 60ch of Inter is about 72 characters with spaces; 68ch measured 80-90 */
body.subpage .offer-desc,
body.subpage .section-intro,
body.subpage .offer-connect p,
body.subpage .cta-sub{max-width:60ch !important}
body.subpage .notincluded p{max-width:56ch !important}
body.subpage .deliverables.full .checklist li{max-width:66ch}
body.home .k52-rows a span:last-child,
body.home .k52-rows .is-soon span:last-child{max-width:60ch}

/* ============================================================
   FAQ PAGE (pass 5, 2026-10-09)
   Same container and two-column rhythm as the home What we build table:
   group title left (3fr), native <details> accordions right (7fr).
   ============================================================ */
.faq-sec{--line:#D5DCE6;padding:var(--offer-pad,clamp(56px,7vw,88px)) 0}
.faq-group{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:48px;align-items:start}
.faq-group + .faq-group{margin-top:clamp(48px,6vw,72px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
.faq-group-title{
  font-family:'Archivo',sans-serif;font-size:clamp(1.35rem,1.9vw,1.7rem);font-weight:600;letter-spacing:-.01em;line-height:1.2;
  color:var(--ink);margin:0;max-width:14ch;position:sticky;top:104px;
}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:44px;padding:20px 4px 20px 0;cursor:pointer;list-style:none;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:1.12rem;line-height:1.35;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover .faq-q{color:var(--harbor)}
.faq-item summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
.faq-q{max-width:52ch;transition:color .2s var(--ease)}
/* plus that turns into a minus; drawn with two bars so it needs no icon font */
.faq-icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(10,117,104,.45);transition:background .2s var(--ease),border-color .2s var(--ease)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--teal);border-radius:2px;transition:transform .25s var(--ease)}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon{background:rgba(10,117,104,.1);border-color:var(--teal)}
.faq-item[open] .faq-icon::after{transform:rotate(0deg)}
.faq-a{padding:0 48px 24px 0}
.faq-a p{margin:0;max-width:62ch;font-size:1.02rem;line-height:1.65;color:var(--text)}
.faq-a p + p{margin-top:10px}
.faq-a a{color:var(--harbor);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq-a a:hover{color:var(--harbor-deep)}
.faq-item:target summary,.faq-group:target .faq-group-title{scroll-margin-top:110px}
.page-lead a{color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .faq-item[open] .faq-a{animation:faqIn .28s var(--ease)}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .faq-icon,.faq-icon::before,.faq-icon::after,.faq-q{transition:none}
}
@media (max-width:900px){
  .faq-group{grid-template-columns:minmax(0,1fr);gap:16px;max-width:44rem}
  .faq-group-title{position:static;max-width:none}
}
@media (max-width:560px){
  .faq-item summary{font-size:1.05rem;padding:18px 0;gap:16px}
  .faq-a{padding-right:0}
}

/* Google Ads plan rows */
.ga-plans{gap:22px}
.ga-plans li strong{display:block;font-family:'Archivo',sans-serif;font-size:1.05rem}
.ga-fit{display:block;color:var(--muted,#5b6678);font-size:.92rem;margin:2px 0 8px}
.ga-row{display:grid;grid-template-columns:5.5rem 1fr;gap:10px;font-size:.92rem;line-height:1.45;padding:5px 0;border-top:1px solid rgba(122,134,153,.18)}
.ga-k{font-weight:600;color:var(--ink)}
.ga-plans-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.ga-bundles{margin-top:8px}
.ga-bundles .checklist li strong{color:var(--ink)}
.ga-bundles .ga-fit{margin:2px 0 0}
.ga-bundle-note{font-size:.92rem;margin-top:14px}
@media (max-width:760px){.ga-plans-2{grid-template-columns:1fr}.ga-row{grid-template-columns:4.75rem 1fr}}
.ga-lead{font-weight:700;color:var(--ink)}

/* ---------- How they connect: full-width navy band ---------- */
.connect-band{background:var(--navy);color:#fff;padding:clamp(64px,8vw,104px) 0;border-top:3px solid rgba(60,198,174,.55)}
.connect-title{font-family:'Archivo',sans-serif;font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.02em;color:#fff;margin:0}
.connect-lead{margin:14px 0 0;font-size:1.15rem;line-height:1.55;color:rgba(255,255,255,.8)}
.connect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,48px)}
.connect-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--teal-light);border-radius:12px;padding:24px 24px 26px}
.connect-item h3{font-family:'Archivo',sans-serif;font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 8px}
.connect-item p{margin:0;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.8);max-width:none}
@media (max-width:860px){.connect-grid{grid-template-columns:1fr}}

/* Mitchell review: not-included text and the Google Ads intro fill their boxes */
body.subpage .notincluded p,.notincluded p{max-width:none !important}
body.subpage #ads .offer-desc{max-width:none !important}