:root{
  --primary:#0A192F;         /* Deep Navy Blue */
  --navy-2:#10243D;          /* Supporting Navy */
  --secondary:#10B981;       /* Emerald Green */
  --accent:#F59E0B;          /* Vibrant Marigold Orange */
  --white:#FFFFFF;
  --slate:#F8FAFC;           /* Light Slate Gray */
  --text:#0A192F;
  --muted:#5B687A;
  --border:#DCE4EC;
  --border-strong:#C7D2DF;
  --shadow:0 18px 44px rgba(10,25,47,.10);
  --shadow-strong:0 28px 72px rgba(10,25,47,.16);
  --radius:18px;
  --max:1200px;
  --reading:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--slate);
  color:var(--text);
  font-family:"Inter",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:78px;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
p{margin:0 0 24px}
strong{font-weight:700}
main{display:block}
.section{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:88px 20px;
}

/* Type */
h1,h2,h3,h4{
  margin:0;
  font-family:"Inter Tight",Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.04em;
  text-wrap:balance;
}
h1{font-size:clamp(48px,12vw,84px);line-height:.94;margin-bottom:26px}
h2{font-size:clamp(38px,9vw,62px);line-height:1.02;margin-bottom:22px}
h3{font-size:28px;line-height:1.12;margin-bottom:10px}
h1 span,h2 span{
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:var(--secondary);
  letter-spacing:-.02em;
}
.eyebrow,.mono-label,.step-label,.case-label{
  margin:0 0 14px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--secondary);
}
.section-heading{margin-bottom:42px}
.section-heading.narrow{max-width:880px}
.section-heading>p,
.system-copy>p,
.calculator-copy>p,
.audit-copy>p,
.inner-hero .hero-sub{
  max-width:var(--reading);
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:16px 20px;
  background:rgba(10,25,47,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.03em;
  color:#FFFFFF;
}
.brand-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--secondary);
  color:var(--primary);
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  font-weight:700;
}
.nav,.desktop-cta{display:none}
.menu-toggle{
  width:44px;height:44px;
  display:grid;place-items:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:10px;
}
.menu-toggle span{display:block;width:20px;height:2px;background:#fff;margin:2px 0}
.nav.open{
  position:absolute;
  top:74px;left:12px;right:12px;
  display:flex;flex-direction:column;
  padding:14px;
  background:var(--primary);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:var(--shadow-strong);
}
.nav.open a{
  padding:13px 10px;
  color:#FFFFFF;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:15px;
}
.nav.open a:last-child{border-bottom:0}

/* Buttons */
.btn{
  min-height:52px;
  padding:14px 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid transparent;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--accent);
  color:var(--primary);
  border-color:var(--accent);
}
.btn-primary:hover{background:#E38F09;border-color:#E38F09}
.btn-light{
  background:#FFFFFF;
  color:var(--primary);
  border-color:#FFFFFF;
}
.btn-small{min-height:42px;padding:11px 16px;font-size:13px}
.btn-large{min-height:56px;padding:16px 24px}
.full{width:100%}

/* Hero */
.hero{
  display:grid;
  gap:34px;
  padding-top:58px;
  padding-bottom:64px;
}
.hero-kicker-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:8px}
.availability-dot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  line-height:1.4;
  color:var(--primary);
  text-transform:uppercase;
}
.availability-dot:before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--secondary);
  box-shadow:0 0 0 5px rgba(16,185,129,.10);
}
.hero-sub{
  max-width:660px;
  margin-bottom:30px;
  color:var(--muted);
  font-size:19px;
  line-height:1.65;
}
.hero-actions{display:grid;gap:12px;margin-bottom:22px}
.text-link{
  min-height:52px;
  display:flex;align-items:center;justify-content:center;
  padding:14px 18px;
  border:1px solid var(--border-strong);
  border-radius:14px;
  background:#FFFFFF;
  color:var(--primary);
  font-size:15px;
  font-weight:700;
}
.mobile-outcome-strip{display:flex;flex-wrap:wrap;gap:8px}
.mobile-outcome-strip span{
  padding:9px 12px;
  border:1px solid rgba(16,185,129,.22);
  background:#ECFDF5;
  color:#087F5B;
  border-radius:999px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  line-height:1.4;
  text-transform:uppercase;
}
.hero-conversion-stack{display:grid;gap:16px}
.live-board,.hero-lead-card{
  padding:24px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#FFFFFF;
  box-shadow:var(--shadow);
}
.hero-lead-card{
  order:1;
  background:linear-gradient(180deg,#FFFFFF 0%, #F8FAFC 100%);
}
.live-board{order:2}
.hero-lead-card .mono-label{color:var(--secondary)}
.hero-lead-card h2{font-size:36px;color:var(--primary);margin:0 0 10px}
.hero-lead-card>p{color:var(--muted);font-size:16px;line-height:1.6;margin-bottom:22px}
.quick-fields{display:grid;gap:14px}
.quick-fields label,
.form-step label,
.calculator label{
  display:block;
  color:var(--primary);
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  line-height:1.45;
  font-weight:600;
  text-transform:uppercase;
}
.quick-fields input,.quick-fields select,
.form-step input,.calculator input{
  width:100%;
  min-height:52px;
  margin-top:8px;
  padding:13px 14px;
  border:1px solid var(--border-strong);
  border-radius:12px;
  background:#FFFFFF;
  color:var(--primary);
  font-size:16px;
  line-height:1.3;
  outline:none;
}
.quick-fields input:focus,.quick-fields select:focus,
.form-step input:focus,.calculator input:focus{
  border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(16,185,129,.14);
}
.hero-lead-card .btn{margin-top:14px}
.whatsapp-inline{
  width:100%;
  margin-top:10px;
  padding:12px 8px;
  border:0;
  background:transparent;
  color:#0C7D5E;
  font-size:14px;
  line-height:1.45;
  font-weight:700;
}
.form-reassurance{
  margin:8px 0 0!important;
  text-align:center;
  color:#6D7786!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.quick-success{
  margin-top:16px;
  padding:16px;
  border-radius:14px;
  background:#ECFDF5;
  border:1px solid rgba(16,185,129,.22);
  color:#0B5C45;
  font-size:14px;
}
.quick-success strong,.quick-success span{display:block}
.quick-success span{margin-top:4px}
.live-board-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.live-board-head h3{font-size:24px;color:var(--primary);margin-top:8px;max-width:310px}
.live-pill{
  display:inline-flex;align-items:center;gap:7px;
  color:#0B7C5D;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  text-transform:uppercase;
}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--secondary)}
.live-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:24px 0;
}
.live-stats>div{
  padding:16px 12px;
  border:1px solid rgba(16,185,129,.18);
  border-radius:16px;
  background:#F8FAFC;
}
.live-stats span,.live-stats small{
  display:block;
  color:#6C798A;
  font-size:12px;
  line-height:1.45;
}
.live-stats strong{
  display:block;
  margin:6px 0;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:28px;
  line-height:1;
  color:var(--primary);
}
.activity-feed{border-top:1px solid var(--border)}
.activity-feed>div{
  display:grid;
  grid-template-columns:12px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.feed-dot{width:8px;height:8px;border-radius:50%;background:var(--secondary)}
.feed-dot.alt{background:var(--accent)}
.activity-feed p{margin:0}
.activity-feed strong,.activity-feed small{display:block}
.activity-feed strong{font-size:14px;color:var(--primary)}
.activity-feed small{margin-top:2px;color:#6B7686;font-size:12px}
.activity-feed b{
  color:#0C7D5E;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  font-weight:600;
}

/* Trust bar */
.trust-bar{
  width:calc(100% - 40px);
  max-width:var(--max);
  margin-inline:auto;
  padding:24px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.trust-bar p{
  max-width:560px;
  margin-bottom:16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}
.trust-items{display:flex;gap:10px;overflow:auto;padding-bottom:4px}
.trust-items span{
  flex:0 0 auto;
  padding:10px 12px;
  border:1px solid rgba(16,185,129,.22);
  background:#ECFDF5;
  color:#0A7B5B;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

/* Generic cards */
.problem-grid,.industry-grid{display:grid;gap:16px}
.problem-card,.industry-grid article{
  padding:28px;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.icon{
  width:46px;height:46px;
  display:grid;place-items:center;
  margin-bottom:40px;
  border-radius:14px;
  border:1px solid rgba(16,185,129,.22);
  background:#ECFDF5;
  color:#0A7B5B;
  font-family:"JetBrains Mono",monospace;
  font-size:14px;
  font-weight:700;
}
.problem-card h3,.industry-grid h3{font-size:27px;color:var(--primary)}
.problem-card p,.industry-grid p{
  color:var(--muted);
  font-size:16px;
  line-height:1.62;
}
.impact{
  color:#0A7B5B;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  line-height:1.45;
  text-transform:uppercase;
  font-weight:600;
}

/* Outcome rows */
.outcome-list{border-top:1px solid var(--border)}
.outcome-row{
  display:grid;
  grid-template-columns:42px 1fr 24px;
  gap:16px;
  align-items:start;
  padding:30px 0;
  border-bottom:1px solid var(--border);
}
.outcome-num{
  padding-top:4px;
  color:#0A7B5B;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
}
.outcome-row h3{font-size:28px;margin-bottom:8px;color:var(--primary)}
.outcome-row p{
  max-width:740px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.62;
}
.outcome-arrow{color:var(--secondary);font-size:22px}

/* Dark system section */
.system{
  max-width:none;
  background:var(--primary);
  color:#FFFFFF;
  padding-left:0;
  padding-right:0;
}
.system-wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:20px;
  display:grid;
  gap:48px;
}
.system .eyebrow{color:#7EE2C0}
.system-copy h2,
.system-copy p,
.system-step strong{color:#FFFFFF}
.system-copy>p{color:#D6E1EE}
.system-steps{border-top:1px solid rgba(255,255,255,.12)}
.system-step{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:16px;
  padding:24px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.system-step>span{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#0C2748;
  color:#7EE2C0;
  border:1px solid rgba(16,185,129,.28);
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
}
.system-step strong{
  display:block;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:22px;
}
.system-step small{
  display:block;
  margin-top:4px;
  color:#D3DEE9;
  font-size:15px;
  line-height:1.55;
}

/* Proof / case study */
.split{display:grid;gap:28px}
.funnel-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#FFFFFF;
  box-shadow:var(--shadow);
}
.funnel-step{
  padding:18px 10px;
  text-align:center;
  border-radius:16px;
  border:1px solid var(--border);
  background:#F8FAFC;
}
.funnel-step span{
  display:block;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:38px;
  line-height:1;
  color:var(--primary);
}
.funnel-step small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:13px;
}
.funnel-step.highlight{
  background:#ECFDF5;
  border-color:rgba(16,185,129,.22);
}
.connector{display:none}
.example-note{
  margin-top:12px;
  text-align:right;
  color:#7A8593;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  text-transform:uppercase;
}
.case-card{
  display:grid;
  gap:28px;
  margin-top:30px;
  padding:28px;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.case-label{color:var(--secondary)}
.case-copy h3{font-size:32px;margin:10px 0 14px;color:var(--primary)}
.case-copy p{color:var(--muted);font-size:16px;line-height:1.62}
.case-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.case-stats div{
  padding:16px 10px;
  border:1px solid rgba(16,185,129,.18);
  border-radius:16px;
  background:#ECFDF5;
  text-align:center;
}
.case-stats small{
  display:block;
  color:#0C7D5E;
  font-size:11px;
}
.case-stats strong{
  display:block;
  margin-top:6px;
  color:var(--primary);
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:22px;
}

/* Calculator */
.calculator-section{display:grid;gap:32px}
.calculator{
  padding:24px;
  border:1px solid var(--border);
  border-radius:22px;
  background:#FFFFFF;
  box-shadow:var(--shadow);
  display:grid;
  gap:16px;
}
.calculator-results{
  padding-top:12px;
  border-top:1px solid var(--border);
}
.calculator-results div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
}
.calculator-results span{color:var(--muted);font-size:14px}
.calculator-results strong{
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:20px;
  color:var(--primary);
}
.calculator-results .gain{
  margin-top:6px;
  padding:16px;
  border-radius:16px;
  background:#FFF8E8;
  border:1px solid rgba(245,158,11,.24);
}
.calculator-results .gain strong{font-size:23px}
.calc-note{color:#728091;font-size:12px;line-height:1.5}

/* Industries */
.industry-grid article{
  min-height:230px;
  display:flex;
  flex-direction:column;
}
.industry-grid article>span{
  color:#0A7B5B;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
}
.industry-grid h3{margin-top:auto}

/* Testimonial */
.testimonial-section{text-align:left;max-width:960px}
.quote-mark{
  height:64px;
  color:var(--secondary);
  font-family:"Instrument Serif",Georgia,serif;
  font-size:88px;
  line-height:.8;
}
blockquote{
  margin:18px 0 24px;
  font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(34px,8vw,54px);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--primary);
}
.quote-source{
  color:#7A8492;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  line-height:1.55;
  text-transform:uppercase;
}

/* Audit */
.audit{max-width:none;padding-left:12px;padding-right:12px}
.audit-panel{
  max-width:var(--max);
  margin-inline:auto;
  padding:32px 20px;
  display:grid;
  gap:36px;
  background:var(--primary);
  color:#FFFFFF;
  border-radius:28px;
  box-shadow:var(--shadow-strong);
}
.audit-copy .eyebrow{color:#7EE2C0}
.audit-copy h2{color:#FFFFFF}
.audit-copy>p{color:#D6E1EE}
.audit-copy ul{list-style:none;padding:0;margin:28px 0 0}
.audit-copy li{
  position:relative;
  padding-left:26px;
  margin:14px 0;
  color:#E6EEF6;
  font-size:16px;
  line-height:1.55;
}
.audit-copy li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:#7EE2C0;
  font-weight:700;
}
.lead-form{
  min-height:470px;
  padding:24px;
  border-radius:22px;
  background:#FFFFFF;
  color:var(--primary);
}
.form-step{display:none}
.form-step.active{display:block}
.step-label{color:#0A7B5B}
.form-step h3{font-size:30px;margin:8px 0 22px;color:var(--primary)}
.choice-grid{display:grid;gap:10px}
.choice,.goal-choice{
  min-height:52px;
  padding:14px 15px;
  border:1px solid var(--border-strong);
  background:#FFFFFF;
  color:var(--primary);
  text-align:left;
  border-radius:14px;
  font-size:15px;
  font-weight:600;
}
.choice:hover,.goal-choice:hover{border-color:var(--secondary)}
.choice.selected,.goal-choice.selected{
  background:#ECFDF5!important;
  color:#0B6F54!important;
  border-color:rgba(16,185,129,.35)!important;
}
.back-link{
  margin-top:10px;
  padding:10px 0;
  border:0;
  background:transparent;
  color:#0A7B5B;
  font-size:14px;
  font-weight:700;
}
.form-step label{color:var(--primary)}
.form-step input{background:#FFFFFF;border-color:var(--border-strong);color:var(--primary)}
.form-success{display:none;text-align:center;padding:70px 0}
.success-icon{
  width:54px;height:54px;
  margin-inline:auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:#ECFDF5;
  color:#0A7B5B;
  font-size:20px;
}
.form-success h3{margin-top:18px}

/* FAQ */
.faq-list{max-width:920px;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{
  width:100%;
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  border:0;
  background:transparent;
  color:var(--primary);
  text-align:left;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:20px;
  line-height:1.35;
  font-weight:700;
}
.faq-question span{
  color:var(--secondary);
  font-family:"JetBrains Mono",monospace;
  font-size:22px;
}
.faq-answer{display:grid;grid-template-rows:0fr;transition:.25s ease}
.faq-answer p{
  overflow:hidden;
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}
.faq-item.open .faq-answer{grid-template-rows:1fr;padding-bottom:24px}

/* Final CTA + footer */
.final-cta{
  padding:90px 20px;
  background:var(--primary);
  color:#FFFFFF;
  text-align:left;
}
.final-cta .eyebrow{color:#7EE2C0}
.final-cta h2{max-width:930px;color:#FFFFFF}
.final-cta>p:last-child{
  margin-top:18px;
  color:#D8E2EC;
  font-size:14px;
}
footer{
  max-width:none;
  margin:0;
  padding:48px 20px 112px;
  display:grid;
  gap:16px;
  background:var(--primary);
  border-top:1px solid rgba(255,255,255,.10);
}
footer .brand-mark{background:var(--secondary)}
footer p{color:#D8E2EC;font-size:15px;margin:0}
footer small{color:#B8C4D3;font-size:12px}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;color:#FFFFFF;font-size:14px}

/* WhatsApp + mobile dock */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:22px;
  z-index:70;
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 14px 10px 10px;
  border:1px solid rgba(16,185,129,.24);
  background:#FFFFFF;
  color:var(--primary);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.wa-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#ECFDF5;
  color:#087F5B;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  font-weight:700;
}
.wa-copy strong,.wa-copy small{display:block;text-align:left}
.wa-copy strong{font-size:13px}
.wa-copy small{color:#6D7786;font-size:11px}
.mobile-action-dock{
  position:fixed;
  left:8px;right:8px;bottom:8px;
  z-index:80;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:6px;
  padding:6px;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-strong);
}
.mobile-action-dock button,.mobile-action-dock a{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  font-size:14px;
  font-weight:700;
  border-radius:12px;
}
.dock-whatsapp{
  background:#ECFDF5;
  color:#0A7B5B;
  border:1px solid rgba(16,185,129,.22);
}
.dock-primary{
  background:var(--accent);
  color:var(--primary);
}

/* Inner pages */
.inner-hero{
  max-width:1060px;
  padding-top:72px;
  padding-bottom:64px;
}
.inner-hero .hero-sub{max-width:760px}

/* Popup inspired by attached reference */
.promo-popup{
  position:fixed;
  inset:0;
  z-index:210;
  display:none;
  pointer-events:none;
}
.promo-popup.open{
  display:block;
  pointer-events:auto;
}
.promo-overlay{
  position:absolute;
  inset:0;
  background:rgba(10,25,47,.18);
  backdrop-filter:blur(4px);
}
.promo-card{
  position:absolute;
  left:12px;
  right:12px;
  bottom:84px;
  max-width:380px;
  margin-inline:auto;
  padding:24px 20px 18px;
  background:#FFFFFF;
  color:var(--primary);
  border:1px solid #E6EDF5;
  border-radius:24px;
  box-shadow:0 26px 70px rgba(10,25,47,.18);
}
.promo-close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#707B89;
  font-size:22px;
  line-height:1;
}
.promo-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 40px 14px 0;
  color:var(--secondary);
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.promo-kicker::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--secondary);
}
.promo-card h3{
  margin:0 0 10px;
  color:var(--primary);
  font-size:32px;
  line-height:1.04;
  letter-spacing:-.04em;
}
.promo-copy{
  margin:0 0 14px;
  color:#667384;
  font-size:16px;
  line-height:1.58;
}
.promo-proof{
  margin:0 0 18px;
  color:#49586A;
  font-size:13px;
  line-height:1.5;
}
.promo-proof strong{color:var(--primary)}
.promo-cta{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--primary);
  font-size:16px;
  line-height:1.2;
  font-weight:800;
}
.promo-cta:hover{background:#E38F09}
.promo-note{
  display:block;
  margin-top:10px;
  color:#7A8593;
  font-size:12px;
  line-height:1.45;
  text-align:center;
}

/* Tablet */
@media (min-width:720px){
  body{padding-bottom:0}
  .section{padding:104px 32px}
  .site-header{padding:18px 28px}
  .hero{padding-top:86px;padding-bottom:88px;gap:44px}
  .hero-actions{display:flex;align-items:center}
  .hero-actions .btn{width:auto}
  .hero-conversion-stack{grid-template-columns:1fr 1fr;align-items:stretch}
  .hero-lead-card,.live-board{min-height:500px}
  .live-board{order:1}
  .hero-lead-card{order:2}
  .quick-fields{grid-template-columns:1fr 1fr}
  .quick-fields label:last-child{grid-column:1/-1}
  .trust-bar{width:calc(100% - 64px)}
  .problem-grid,.industry-grid{grid-template-columns:repeat(2,1fr)}
  .system-wrap{padding-inline:32px;grid-template-columns:.85fr 1.15fr;gap:72px}
  .split{grid-template-columns:1fr .8fr;gap:56px}
  .calculator-section{grid-template-columns:.78fr 1.22fr;gap:56px}
  .calculator{grid-template-columns:1fr 1fr}
  .calculator-results,.calc-note{grid-column:1/-1}
  .audit-panel{grid-template-columns:.9fr 1.1fr;padding:48px}
  .choice-grid{grid-template-columns:1fr 1fr}
  .choice-grid.single{grid-template-columns:1fr}
  .case-card{grid-template-columns:1fr .8fr}
  .mobile-action-dock{display:none}
  .whatsapp-float{display:flex}
  footer{padding:48px 32px 56px}
  .promo-card{
    left:auto;
    right:24px;
    bottom:24px;
    width:380px;
    margin:0;
    padding:26px 22px 20px;
  }
}

/* Desktop */
@media (min-width:1000px){
  .site-header{
    max-width:1260px;
    margin-inline:auto;
    padding:18px 30px;
  }
  .nav{
    display:flex;
    align-items:center;
    gap:26px;
    font-family:"JetBrains Mono",monospace;
    font-size:12px;
    line-height:1.4;
    text-transform:uppercase;
  }
  .nav a{color:#EAF0F7}
  .nav a:hover{color:#7EE2C0}
  .desktop-cta{display:inline-flex}
  .menu-toggle{display:none}
  .section{padding:126px 32px}
  h1{font-size:clamp(76px,7vw,96px)}
  h2{font-size:clamp(52px,5vw,68px)}
  .hero{
    grid-template-columns:.88fr 1.12fr;
    gap:72px;
    min-height:760px;
    align-items:center;
    padding-top:96px;
  }
  .trust-bar{
    width:calc(100% - 64px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
  }
  .trust-bar p{margin:0}
  .trust-items{overflow:visible;flex-wrap:wrap;justify-content:flex-end}
  .problem-grid{grid-template-columns:repeat(3,1fr)}
  .industry-grid{grid-template-columns:repeat(3,1fr)}
  .final-cta{padding:112px 32px}
  footer{
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .footer-links{grid-column:2;grid-row:1/span 2}
}




/* ==========================================================
   TASK 1 - CTA inside mobile hamburger menu
   ========================================================== */
.mobile-menu-growth-cta{
  display:none;
}
.nav.open .mobile-menu-growth-cta{
  display:flex;
  width:100%;
  margin-top:12px;
  color:var(--primary);
}
@media (min-width:1000px){
  .nav .mobile-menu-growth-cta{display:none!important}
}

/* ==========================================================
   TASK 2 - Growth system strip
   ========================================================== */
.growth-system-strip{
  width:calc(100% - 32px);
  max-width:var(--max);
  margin:28px auto 0;
  padding:28px 20px;
  display:grid;
  gap:26px;
  background:var(--primary);
  color:var(--white);
  border:1px solid #163552;
  border-radius:18px;
}
.growth-system-message .mono-label{
  color:#82E2C2;
  margin-bottom:10px;
}
.growth-system-message h2{
  margin:0;
  color:var(--white);
  font-size:clamp(31px,8vw,44px);
  line-height:1.04;
}
.growth-system-message h2 span{
  display:block;
  margin-top:5px;
  color:#7EE2C0;
  font-family:"Inter Tight",Arial,sans-serif;
  font-style:normal;
  font-weight:700;
}
.growth-system-points{
  display:grid;
  gap:0;
}
.growth-system-point{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:14px;
  align-items:center;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.system-point-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.44);
}
.system-point-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:#5EE1B5;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.growth-system-point strong{
  display:block;
  color:var(--white);
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:18px;
  line-height:1.15;
}
.growth-system-point small{
  display:block;
  margin-top:5px;
  color:#B9C9D8;
  font-size:13px;
  line-height:1.4;
}
@media (min-width:720px){
  .growth-system-strip{
    width:calc(100% - 64px);
    padding:34px 30px;
    grid-template-columns:.9fr 1.6fr;
    align-items:center;
  }
  .growth-system-points{
    grid-template-columns:repeat(2,1fr);
  }
  .growth-system-point{
    padding:18px;
    border-top:0;
    border-left:1px solid rgba(255,255,255,.12);
  }
}
@media (min-width:1100px){
  .growth-system-strip{
    grid-template-columns:1.05fr 2.2fr;
  }
  .growth-system-points{
    grid-template-columns:repeat(4,1fr);
  }
}

/* ==========================================================
   TASK 3 - Interactive business selector
   ========================================================== */
.industry-selector{
  width:calc(100% - 32px);
  overflow:hidden;
  max-width:var(--max);
  margin:48px auto 0;
  padding:38px 0 8px;
  border-top:1px solid var(--border);
}
.industry-selector-copy{
  max-width:820px;
  margin-bottom:28px;
}
.industry-selector-copy h2{
  color:var(--primary);
}
.industry-selector-copy>p:last-child{
  max-width:720px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}
.industry-experience{
  display:grid;
  gap:16px;
}
.industry-tabs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(210px,78%);
  gap:12px;
  overflow-x:auto;
  padding:3px 3px 12px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.industry-tabs::-webkit-scrollbar{display:none}
.industry-tab{
  min-height:112px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px;
  scroll-snap-align:start;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--white);
  color:var(--primary);
  text-align:left;
  box-shadow:0 8px 24px rgba(10,25,47,.05);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.industry-tab:hover{
  transform:translateY(-2px);
  border-color:#79D8B8;
  box-shadow:0 14px 30px rgba(10,25,47,.09);
}
.industry-tab.active{
  background:#E8F8F2;
  border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(16,185,129,.08);
}
.industry-tab-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--primary);
}
.industry-tab-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:#7EE2C0;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.industry-tab.active .industry-tab-icon{
  background:var(--secondary);
}
.industry-tab.active .industry-tab-icon svg{
  stroke:var(--primary);
}
.industry-tab strong,
.industry-tab small{
  display:block;
}
.industry-tab strong{
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:18px;
  line-height:1.15;
}
.industry-tab small{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.industry-tab:focus-visible{
  outline:3px solid rgba(16,185,129,.25);
  outline-offset:2px;
}

.industry-insight-card{
  padding:22px;
  background:var(--primary);
  color:var(--white);
  border-radius:16px;
  border:1px solid #173957;
  box-shadow:var(--shadow);
}
.industry-insight-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.insight-label{
  display:block;
  margin-bottom:8px;
  color:#7EE2C0;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.industry-insight-card h3{
  max-width:720px;
  margin:0;
  color:var(--white);
  font-size:clamp(25px,6vw,34px);
  line-height:1.08;
}
.insight-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(16,185,129,.13);
  border:1px solid rgba(16,185,129,.38);
  color:#86E5C5;
  font-size:11px;
  font-weight:700;
}
.industry-focus-list{
  list-style:none;
  padding:0;
  margin:24px 0;
  display:grid;
  gap:12px;
}
.industry-focus-list li{
  position:relative;
  padding-left:28px;
  color:#D6E0EA;
  font-size:15px;
  line-height:1.5;
}
.industry-focus-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(16,185,129,.13);
  color:#6EE1B9;
  font-size:12px;
  font-weight:800;
}
.priority-map{
  padding:17px;
  background:var(--navy-2, #10243D);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
}
.priority-map-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:15px;
}
.priority-map-head strong{
  font-size:15px;
}
.priority-map-head small{
  color:#AABBCB;
  font-size:11px;
}
.priority-bar-row{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:12px;
  align-items:center;
  margin:10px 0;
}
.priority-bar-row>span{
  color:#C8D4E0;
  font-size:12px;
}
.priority-track{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:#243D57;
}
.priority-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--secondary);
  transition:width .35s ease;
}
.industry-insight-cta{
  display:inline-flex;
  margin-top:18px;
  color:#8CE7C7;
  font-size:14px;
  font-weight:800;
}
@media (min-width:720px){
  .industry-selector{width:calc(100% - 64px);padding-top:50px}
  .industry-tabs{
    grid-auto-flow:initial;
    grid-template-columns:repeat(3,1fr);
    overflow:visible;
  }
}
@media (min-width:1000px){
  .industry-experience{
    grid-template-columns:.95fr 1.05fr;
    align-items:start;
    gap:22px;
  }
  .industry-tabs{
    grid-template-columns:repeat(2,1fr);
  }
  .industry-tab{
    min-height:118px;
  }
  .industry-insight-card{
    position:sticky;
    top:104px;
    padding:28px;
  }
}

/* ==========================================================
   Official WhatsApp asset usage
   ========================================================== */
.wa-icon-img{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:block;
}
.wa-inline-icon{
  width:20px;
  height:20px;
  margin-right:8px;
  vertical-align:middle;
}
.dock-whatsapp img{
  width:22px;
  height:22px;
  margin-right:8px;
}
.whatsapp-inline{
  display:flex;
  align-items:center;
  justify-content:center;
}
.text-link{
  gap:2px;
}

/* ==========================================================
   Social marks
   ========================================================== */
.footer-social{
  display:flex;
  gap:9px;
  margin-top:4px;
}
.social-chip{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  color:#EAF0F7;
  font-size:14px;
}
.social-chip b{font-weight:800}
.social-facebook b{font-family:Arial,sans-serif;font-size:19px}
.social-instagram{
  position:relative;
}
.social-instagram::before{
  content:"";
  width:16px;
  height:16px;
  border:2px solid #EAF0F7;
  border-radius:5px;
}
.social-instagram::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border:2px solid #EAF0F7;
  border-radius:50%;
}
.social-instagram i{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#EAF0F7;
  transform:translate(5px,-5px);
}
.social-google b{
  background:conic-gradient(#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-family:Arial,sans-serif;
  font-size:18px;
}
@media (min-width:1000px){
  .footer-social{
    grid-column:1;
  }
}


/* ==========================================================
   Production-safe proof / standards
   ========================================================== */
.operational-stats strong{
  font-size:22px;
}
.operational-feed b{
  color:#7EE2C0;
}
.process-funnel .funnel-step{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:170px;
}
.process-funnel .process-step-number{
  margin-bottom:12px;
  color:#7EE2C0;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  letter-spacing:.05em;
}
.process-funnel .funnel-step.highlight .process-step-number{
  color:#0A192F;
}
.process-funnel .funnel-step strong{
  display:block;
  margin-bottom:7px;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:20px;
  line-height:1.18;
}
.measurement-stats strong{
  font-size:18px;
  color:#7EE2C0;
}
.standards-section{
  background:#F8FAFC;
  max-width:none;
}
.standards-section > *{
  max-width:1200px;
  margin-inline:auto;
}
.standards-grid{
  display:grid;
  gap:14px;
}
.standard-card{
  padding:24px;
  background:#FFFFFF;
  border:1px solid #D9E2EC;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(10,25,47,.05);
}
.standard-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin-bottom:28px;
  border-radius:10px;
  background:#DDF7EE;
  color:#087A5A;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
}
.standard-card h3{
  color:#0A192F;
}
.standard-card p{
  margin:0;
  color:#475467;
  font-size:15px;
  line-height:1.65;
}
.result-principles{
  background:#F8FAFC;
}
.priority-track i{
  /* Was "width:100%!important", which pinned all three checkpoint bars to full
     width and stopped the business-type selector from changing them. Width is
     now set inline from each tab's data-bar values. */
  min-width:6px;
}
@media (min-width:720px){
  .standards-grid{
    grid-template-columns:repeat(3,1fr);
  }
}


/* Final responsive interaction hardening */
body.menu-open,
body.modal-open{
  overflow:hidden;
}
.nav.open{
  max-height:calc(100dvh - 92px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
@supports(padding:max(0px)){
  .mobile-action-dock{
    bottom:max(8px, env(safe-area-inset-bottom));
  }
}
@media (max-width:719px){
  .industry-tabs{
    max-width:100%;
    overscroll-behavior-x:contain;
  }
  .industry-selector{
    overflow:hidden;
  }
  .promo-card{
    max-height:calc(100dvh - 110px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}
:focus-visible{
  outline:3px solid rgba(245,158,11,.55);
  outline-offset:3px;
}


/* Final mobile touch + overflow safeguards */
html,
body{
  overflow-x:hidden;
}
.brand{
  min-height:44px;
}
.industry-insight-cta{
  min-height:44px;
  align-items:center;
}
.footer-links a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
@media (min-width:1000px){
  .nav > a:not(.mobile-menu-growth-cta){
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}


/* Accessible skip link */
.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:300;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:10px 14px;
  border-radius:8px;
  background:#F59E0B;
  color:#0A192F;
  font-weight:800;
  transform:translateY(-160%);
  transition:transform .16s ease;
}
.skip-link:focus{
  transform:translateY(0);
}


/* Mobile hero containment + Task 1 enforcement */
.desktop-cta{
  display:none!important;
}
.hero > *,
.hero-copy,
.hero-conversion-stack,
.live-board,
.hero-lead-card,
.live-stats > div{
  min-width:0;
}
@media (max-width:719px){
  .live-stats{
    grid-template-columns:1fr;
  }
  .live-board-head{
    flex-direction:column;
  }
}
@media (min-width:1000px){
  .desktop-cta{
    display:inline-flex!important;
  }
}


/* ==========================================================
   FINAL RHYTHM SYSTEM - MOBILE FIRST
   ========================================================== */

/*
  Goal:
  - Reduce unnecessary vertical travel.
  - Preserve hierarchy and comfortable reading.
  - Keep adjacent sections visually connected.
  - Use tighter mobile rhythm and progressively open it on larger screens.
*/

/* Global section rhythm */
.section{
  padding-top:64px;
  padding-bottom:64px;
}
.section-heading{
  margin-bottom:32px;
}
.section-heading>p,
.system-copy>p,
.calculator-copy>p,
.audit-copy>p{
  margin-bottom:0;
}

/* Hero: tighter first screen without crowding */
.hero{
  gap:28px;
  padding-top:48px;
  padding-bottom:48px;
}
.hero-sub{
  margin-bottom:24px;
}
.hero-actions{
  margin-bottom:18px;
}
.hero-conversion-stack{
  gap:14px;
}

/* Interactive industry section sits directly after hero */
.industry-selector{
  margin-top:22px;
  padding-top:28px;
  padding-bottom:0;
}
.industry-selector-copy{
  margin-bottom:22px;
}
.industry-selector-copy>p:last-child{
  margin-bottom:0;
}
.industry-experience{
  gap:14px;
}
.industry-tabs{
  gap:10px;
}
.industry-tab{
  min-height:104px;
  padding:15px;
}

/* Reference-inspired growth system strip */
.growth-system-strip{
  margin-top:20px;
  padding:24px 18px;
  gap:20px;
}
.growth-system-point{
  padding:15px 0;
}

/* Do not create a second oversized gap immediately after the strip */
main > .growth-system-strip + .section{
  padding-top:56px;
}

/* Internal card rhythm */
.problem-grid,
.industry-grid{
  gap:14px;
}
.problem-card,
.industry-grid article{
  padding:24px;
}
.icon{
  margin-bottom:28px;
}
.outcome-row{
  padding:24px 0;
}
.system-wrap{
  gap:36px;
}
.system-step{
  padding:20px 0;
}
.split{
  gap:24px;
}
.case-card{
  margin-top:24px;
}
.calculator-section{
  gap:24px;
}
.calculator{
  padding:22px;
}
.industry-grid article{
  min-height:205px;
}
.standard-icon{
  margin-bottom:20px;
}
.standards-grid{
  gap:12px;
}

/* Forms / audit */
.audit-panel{
  gap:28px;
  padding-top:28px;
  padding-bottom:28px;
}
.audit-copy ul{
  margin-top:22px;
}
.lead-form{
  padding:22px;
}
.form-step h3{
  margin-bottom:18px;
}

/* FAQ */
.faq-question{
  padding:20px 0;
}
.faq-item.open .faq-answer{
  padding-bottom:20px;
}

/* Inner pages */
.inner-hero{
  padding-top:56px;
  padding-bottom:48px;
}
.inner-hero + .section{
  padding-top:56px;
}

/* Final CTA / footer */
.final-cta{
  padding:72px 20px;
}
footer{
  padding-top:40px;
  padding-bottom:96px;
}

/* Small-phone density */
@media (max-width:389px){
  .section{
    padding-top:56px;
    padding-bottom:56px;
  }
  .hero{
    padding-top:42px;
    padding-bottom:42px;
  }
  .industry-selector{
    margin-top:18px;
    padding-top:24px;
  }
  .growth-system-strip{
    margin-top:18px;
  }
  main > .growth-system-strip + .section{
    padding-top:50px;
  }
  .final-cta{
    padding-top:64px;
    padding-bottom:64px;
  }
}

/* Tablet: enough air without the earlier 100px+ gaps */
@media (min-width:720px){
  .section{
    padding-top:80px;
    padding-bottom:80px;
  }
  .section-heading{
    margin-bottom:36px;
  }
  .hero{
    gap:36px;
    padding-top:68px;
    padding-bottom:68px;
  }
  .industry-selector{
    margin-top:28px;
    padding-top:34px;
  }
  .growth-system-strip{
    margin-top:24px;
    padding:28px 26px;
    gap:24px;
  }
  main > .growth-system-strip + .section{
    padding-top:68px;
  }
  .growth-system-point{
    padding:16px;
  }
  .problem-card,
  .industry-grid article{
    padding:26px;
  }
  .outcome-row{
    padding:27px 0;
  }
  .system-wrap{
    gap:52px;
  }
  .split{
    gap:40px;
  }
  .calculator-section{
    gap:42px;
  }
  .audit-panel{
    gap:36px;
    padding:38px;
  }
  .inner-hero{
    padding-top:68px;
    padding-bottom:56px;
  }
  .inner-hero + .section{
    padding-top:68px;
  }
  .final-cta{
    padding:84px 32px;
  }
  footer{
    padding:44px 32px 56px;
  }
}

/* Desktop: premium spacing, but no 126px section padding */
@media (min-width:1000px){
  .section{
    padding-top:96px;
    padding-bottom:96px;
  }
  .section-heading{
    margin-bottom:40px;
  }
  .hero{
    min-height:auto;
    gap:56px;
    padding-top:76px;
    padding-bottom:76px;
  }
  .industry-selector{
    margin-top:32px;
    padding-top:38px;
  }
  .growth-system-strip{
    margin-top:26px;
    padding:30px 28px;
  }
  main > .growth-system-strip + .section{
    padding-top:76px;
  }
  .problem-grid,
  .industry-grid{
    gap:16px;
  }
  .problem-card,
  .industry-grid article{
    padding:28px;
  }
  .system-wrap{
    gap:60px;
  }
  .split{
    gap:48px;
  }
  .calculator-section{
    gap:48px;
  }
  .audit-panel{
    gap:48px;
    padding:44px;
  }
  .inner-hero{
    padding-top:76px;
    padding-bottom:64px;
  }
  .inner-hero + .section{
    padding-top:76px;
  }
  .final-cta{
    padding:96px 32px;
  }
}

/* Wide displays: do not keep expanding vertical whitespace */
@media (min-width:1440px){
  .section{
    padding-top:104px;
    padding-bottom:104px;
  }
  .hero{
    padding-top:84px;
    padding-bottom:84px;
  }
}


/* System copy CTA spacing fix */
.system-copy > p + .btn{
  margin-top:20px;
}

@media (min-width:720px){
  .system-copy > p + .btn{
    margin-top:22px;
  }
}

@media (min-width:1000px){
  .system-copy > p + .btn{
    margin-top:24px;
  }
}


/* Dashboard status card mobile fix */
@media (max-width:719px){
  .live-stats{
    grid-template-columns:1fr!important;
    gap:10px;
  }

  .live-stats > div{
    display:grid;
    grid-template-columns:minmax(88px,110px) 1fr;
    grid-template-areas:
      "label value"
      "label note";
    align-items:center;
    column-gap:14px;
    min-width:0;
    padding:14px 16px;
  }

  .live-stats > div > span{
    grid-area:label;
    align-self:center;
    font-size:12px;
    line-height:1.35;
  }

  .live-stats > div > strong{
    grid-area:value;
    margin:0;
    font-size:21px;
    line-height:1.1;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .live-stats > div > small{
    grid-area:note;
    margin-top:4px;
    font-size:12px;
    line-height:1.4;
  }
}

@media (min-width:720px) and (max-width:999px){
  .live-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .live-stats > div{
    min-width:0;
    padding:14px 12px;
  }

  .live-stats strong{
    font-size:20px;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .live-stats span,
  .live-stats small{
    font-size:11px;
    line-height:1.35;
  }
}

/* Prevent any metric card text clipping at all widths */
.live-stats,
.live-stats > div{
  min-width:0;
}
.live-stats > div{
  overflow:hidden;
}
.live-stats strong,
.live-stats span,
.live-stats small{
  overflow-wrap:anywhere;
}


/* ==========================================================
   FINAL RESPONSIVE DASHBOARD HARDENING
   ========================================================== */

/*
  The dashboard and quick form can sit inside a relatively narrow hero column.
  Default to safe single-column internals, then enhance only when the card
  itself has enough room.
*/

.live-board{
  container-type:inline-size;
}

/* Safe default at every viewport */
.live-stats{
  grid-template-columns:1fr!important;
  gap:10px!important;
}

.live-stats > div{
  display:grid!important;
  grid-template-columns:minmax(96px,120px) minmax(0,1fr)!important;
  grid-template-areas:
    "label value"
    "label note"!important;
  align-items:center!important;
  column-gap:14px!important;
  min-width:0!important;
  padding:14px 16px!important;
}

.live-stats > div > span{
  grid-area:label!important;
  align-self:center!important;
  font-size:12px!important;
  line-height:1.35!important;
}

.live-stats > div > strong{
  grid-area:value!important;
  margin:0!important;
  min-width:0!important;
  font-size:21px!important;
  line-height:1.12!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

.live-stats > div > small{
  grid-area:note!important;
  margin-top:4px!important;
  min-width:0!important;
  font-size:12px!important;
  line-height:1.4!important;
  overflow-wrap:break-word!important;
}

/* If the dashboard card itself becomes genuinely wide, 3 columns are safe. */
@container (min-width:560px){
  .live-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .live-stats > div{
    display:block!important;
    padding:16px 14px!important;
  }

  .live-stats > div > span,
  .live-stats > div > strong,
  .live-stats > div > small{
    display:block!important;
  }

  .live-stats > div > strong{
    margin:6px 0!important;
  }
}

/* Phone-specific comfort */
@media (max-width:719px){
  .live-board,
  .hero-lead-card{
    padding:18px;
  }

  .live-board-head{
    flex-direction:column;
    gap:10px;
  }

  .live-board-head h3{
    max-width:none;
  }

  .activity-feed > div{
    grid-template-columns:10px minmax(0,1fr) auto;
  }

  .activity-feed p{
    min-width:0;
  }

  .activity-feed strong,
  .activity-feed small{
    overflow-wrap:break-word;
  }
}

/*
  Tablet screens need the cards at full available width.
  Keeping the dashboard and form side-by-side at ~720-999px makes both too narrow.
*/
@media (min-width:720px) and (max-width:999px){
  .hero-conversion-stack{
    grid-template-columns:1fr!important;
  }

  .hero-lead-card,
  .live-board{
    min-height:auto!important;
  }

  .quick-fields{
    grid-template-columns:1fr 1fr;
  }
}

/*
  Desktop keeps the intended two-card hero composition, but each card uses
  one-column form fields / horizontal status rows so no content is squeezed.
*/
@media (min-width:1000px){
  .hero-conversion-stack{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .quick-fields{
    grid-template-columns:1fr!important;
  }

  .quick-fields label:last-child{
    grid-column:auto!important;
  }
}

/* Extra narrow phone safeguards */
@media (max-width:389px){
  .live-stats > div{
    grid-template-columns:86px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding:13px!important;
  }

  .live-stats > div > strong{
    font-size:19px!important;
  }

  .live-stats > div > span,
  .live-stats > div > small{
    font-size:11px!important;
  }
}


/* ==========================================================
   CONVERSION / TRUST ENHANCEMENTS - 2026-08-13
   ========================================================== */
.hero-trust-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:18px 0 0;
  color:#DCE7F1;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}
.hero-trust-strip span{white-space:nowrap}

.quick-success .btn,
.form-success .btn{
  margin-top:18px;
  gap:8px;
}

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

.voice-section{padding-top:72px;padding-bottom:72px}
.voice-grid{display:grid;gap:14px}
.voice-card{
  min-width:0;
  padding:24px;
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 12px 34px rgba(10,25,47,.07);
}
.voice-label{
  display:block;
  margin-bottom:16px;
  color:#0A7B5B;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.06em;
}
.voice-card p{
  margin:0 0 18px;
  color:var(--primary);
  font-family:"Instrument Serif",Georgia,serif;
  font-size:28px;
  line-height:1.18;
}
.voice-card small{color:var(--muted);font-size:13px;line-height:1.5}

@media (min-width:720px){
  .voice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .voice-card{padding:26px}
}

@media (max-width:719px){
  .hero-trust-strip{gap:7px 12px}
  .voice-section{padding-top:56px;padding-bottom:56px}
  .voice-card p{font-size:25px}
}

@media (max-width:389px){
  /* Was a flat "42px!important", which overrode every responsive hero rule and
     forced the same size at 320px and 389px. Now scales with the viewport. */
  .hero h1{font-size:clamp(39px,11.8vw,44px)!important;line-height:1.0!important}
  .hero-trust-strip span{white-space:normal}
}

/* Conversion-first hero simplification */
.hero .live-board{display:none!important}
.hero-conversion-stack{grid-template-columns:1fr!important}
@media (min-width:1000px){
  .hero{grid-template-columns:1fr .86fr;align-items:center}
  .hero h1{font-size:clamp(68px,6vw,88px)}
}


/* ==========================================================
   CLIENT TESTIMONIALS - trust-first, Google-review-inspired UI
   Source-safe: no Google logo, aggregate rating, or GBP claim.
   ========================================================== */
.testimonials-section{
  padding-top:78px;
  padding-bottom:78px;
}
.testimonials-head{
  display:grid;
  gap:24px;
  align-items:end;
  margin-bottom:30px;
}
.testimonials-head h2{max-width:800px}
.testimonials-intro{
  max-width:760px;
  margin-bottom:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}
.review-summary-card{
  align-self:start;
  width:100%;
  max-width:330px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 12px 34px rgba(10,25,47,.07);
}
.review-summary-stars,
.review-stars{
  color:#F6B400;
  letter-spacing:2px;
  line-height:1;
}
.review-summary-stars{font-size:20px;margin-bottom:10px}
.review-summary-card strong{
  display:block;
  color:var(--primary);
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:17px;
  line-height:1.25;
}
.review-summary-card small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.reviews-grid{display:grid;gap:16px}
.review-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 16px 42px rgba(10,25,47,.08);
}
.review-card-top{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin-bottom:18px;
}
.review-avatar{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#EAF8F3;
  color:#087456;
  border:1px solid #C9EDE0;
  font-family:"Inter Tight",Arial,sans-serif;
  font-weight:700;
  font-size:15px;
}
.review-person{min-width:0}
.review-person strong{
  display:block;
  color:var(--primary);
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:17px;
  line-height:1.2;
}
.review-person span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.review-badge{
  grid-column:1/-1;
  justify-self:start;
  padding:5px 8px;
  border-radius:999px;
  background:#F4F7FA;
  color:#667488;
  border:1px solid var(--border);
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
}
.review-stars{font-size:18px;margin-bottom:16px}
.review-card p{
  flex:1;
  margin:0 0 22px;
  color:var(--primary);
  font-family:"Instrument Serif",Georgia,serif;
  font-size:26px;
  line-height:1.2;
}
.review-impact{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 12px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.review-impact span{
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}
.review-impact strong{
  color:#087456;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:17px;
  line-height:1.2;
}
@media (min-width:720px){
  .testimonials-head{grid-template-columns:minmax(0,1fr) auto}
  .reviews-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .review-card{padding:26px}
  .review-card-top{grid-template-columns:48px minmax(0,1fr) auto}
  .review-badge{grid-column:auto;justify-self:end}
}
@media (max-width:719px){
  .testimonials-section{padding-top:58px;padding-bottom:58px}
  .review-summary-card{max-width:none}
  .review-card p{font-size:24px}
}

/* ==========================================================
   TESTIMONIAL CAROUSEL v2 - realistic review typography + swipe
   ========================================================== */
.testimonials-section .reviews-carousel-shell{position:relative;max-width:100%;overflow:hidden}
.reviews-carousel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px}
.reviews-swipe-hint{color:var(--muted);font-size:12px;font-weight:600}
.reviews-nav{display:flex;gap:8px;flex:0 0 auto}
.review-nav-btn{
  width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;
  background:#fff;color:var(--primary);font:600 20px/1 Inter,Arial,sans-serif;cursor:pointer;
  box-shadow:0 8px 22px rgba(10,25,47,.06);transition:transform .18s ease,border-color .18s ease,opacity .18s ease;
}
.review-nav-btn:hover:not(:disabled){transform:translateY(-1px);border-color:#9fb7ad}
.review-nav-btn:disabled{opacity:.34;cursor:default}
.reviews-track{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:none;-ms-overflow-style:none;
}
.reviews-track::-webkit-scrollbar{display:none}
.testimonials-section .review-card{
  flex:0 0 min(86vw,390px);scroll-snap-align:start;scroll-snap-stop:always;min-height:355px;
  padding:24px;border-radius:18px;
}
.testimonials-section .review-card blockquote{
  flex:1;margin:0 0 22px;padding:0;border:0;color:#172033;
  font-family:Inter,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.68;letter-spacing:0;
}
.testimonials-section .review-person strong{font-family:Inter,Arial,sans-serif;font-size:15px;font-weight:700}
.testimonials-section .review-person span{font-family:Inter,Arial,sans-serif;font-size:12px}
.testimonials-section .review-stars{font-family:Arial,sans-serif;font-size:18px;letter-spacing:1.5px;margin-bottom:15px}
.testimonials-section .review-impact strong{font-family:Inter,Arial,sans-serif;font-size:15px}
.testimonials-section .review-badge{font-family:Inter,Arial,sans-serif;letter-spacing:.03em;text-transform:none;font-size:10px}
.verified-feedback{background:#eef8f4!important;color:#087456!important;border:1px solid #c9ede0!important}
.review-card-example{background:#fbfcfd!important;border-style:dashed!important;box-shadow:0 12px 30px rgba(10,25,47,.05)!important}
.review-card-example .review-avatar{background:#f2f4f7;color:#5e6c7c;border-color:#d9e0e7}
.example-badge{background:#fff7e8!important;color:#8b5d00!important;border:1px solid #f0d9a7!important}
.muted-stars{color:#c7a85c!important;opacity:.65}
.reviews-progress{height:3px;margin:2px 0 0;background:#e7ecef;border-radius:99px;overflow:hidden}
.reviews-progress span{display:block;width:14.285%;height:100%;background:#087456;border-radius:inherit;transition:transform .2s ease,width .2s ease}
@media (min-width:720px){
  .testimonials-section .review-card{flex-basis:calc((100% - 32px)/3);min-width:310px;max-width:390px}
}
@media (max-width:719px){
  .reviews-carousel-toolbar{margin-top:4px}
  .reviews-swipe-hint{font-size:11px}
  .review-nav-btn{width:38px;height:38px}
  .testimonials-section .review-card{flex-basis:88%;min-height:330px;padding:22px}
  .testimonials-section .review-card blockquote{font-size:15px;line-height:1.65}
}
@media (prefers-reduced-motion:reduce){.reviews-track{scroll-behavior:auto}}


/* Mobile hero proof strips - compact, single-line labels */
@media (max-width:719px){
  .hero-trust-strip{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:16px;
  }
  .hero-trust-strip span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:34px;
    padding:7px 8px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    background:rgba(255,255,255,.06);
    font-family:"Inter",Arial,sans-serif;
    font-size:11px;
    line-height:1.15;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
  }

  .mobile-outcome-strip{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    width:100%;
    margin-top:10px;
  }
  .mobile-outcome-strip span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:8px 7px;
    font-family:"Inter",Arial,sans-serif;
    font-size:11px;
    line-height:1.15;
    font-weight:700;
    letter-spacing:0;
    text-align:center;
    text-transform:none;
    white-space:nowrap;
  }
  .mobile-outcome-strip span:nth-child(3){
    grid-column:1 / -1;
  }
}

@media (max-width:359px){
  .hero-trust-strip span,
  .mobile-outcome-strip span{
    font-size:10px;
  }
}


/* ==========================================================
   Premium icon + number system - production refinement
   ========================================================== */
.ui-icon-svg,
.ui-arrow-svg,
.trust-check-svg{
  display:block;
  flex:0 0 auto;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ui-icon-svg{
  width:27px;
  height:27px;
  stroke-width:1.85;
}
.ui-arrow-svg{
  width:18px;
  height:18px;
  stroke-width:2.15;
}
.trust-check-svg{
  width:17px;
  height:17px;
  stroke-width:1.9;
}

/* Main visual icons: slightly larger, vector-based and consistent */
.icon{
  width:52px;
  height:52px;
  border-radius:15px;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:20px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.icon.number-icon{
  font-size:21px;
  letter-spacing:-.02em;
}
.success-icon{
  width:58px;
  height:58px;
}
.success-icon .ui-icon-svg{
  width:29px;
  height:29px;
}

/* Number badges across outcomes, systems, industries and standards */
.outcome-num,
.system-step>span,
.industry-grid article>span,
.process-funnel .process-step-number,
.standard-icon{
  font-family:"Inter Tight",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:800;
  letter-spacing:-.01em;
}
.outcome-num{
  padding-top:3px;
  font-size:17px;
  line-height:1;
}
.system-step>span{
  width:40px;
  height:40px;
  border-radius:11px;
  font-size:16px;
}
.industry-grid article>span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border:1px solid rgba(16,185,129,.26);
  border-radius:12px;
  background:#ECFDF5;
  font-size:16px;
  line-height:1;
}
.process-funnel .process-step-number{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  align-self:center;
  margin-bottom:14px;
  border:1px solid rgba(16,185,129,.25);
  border-radius:12px;
  background:#ECFDF5;
  color:#087A5A;
  font-size:16px;
  line-height:1;
}
.process-funnel .funnel-step.highlight .process-step-number{
  background:#FFFFFF;
  color:#0A192F;
}
.standard-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  font-size:16px;
  line-height:1;
}

/* Outcome arrows are now clean vector controls rather than text glyphs */
.outcome-arrow{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  justify-self:end;
  border:1px solid rgba(16,185,129,.2);
  border-radius:50%;
  background:#F0FDF8;
  color:#087A5A;
}
.outcome-arrow .ui-arrow-svg{
  width:17px;
  height:17px;
}
.review-nav-btn .ui-arrow-svg{
  width:19px;
  height:19px;
}

/* Reassurance checks: align like proper UI icons */
.hero-trust-strip span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.hero-trust-strip .trust-check-svg{
  color:#087A5A;
}

@media (max-width:767px){
  .icon{
    width:50px;
    height:50px;
  }
  .ui-icon-svg{
    width:26px;
    height:26px;
  }
  .outcome-row{
    grid-template-columns:46px 1fr 34px;
  }
  .outcome-num{
    font-size:16px;
  }
  .system-step{
    grid-template-columns:44px 1fr;
  }
  .system-step>span{
    width:38px;
    height:38px;
    font-size:15px;
  }
  .industry-grid article>span,
  .standard-icon{
    width:42px;
    height:42px;
    font-size:15px;
  }
}


/* ==========================================================
   WhatsApp pre-chat lead capture
   ========================================================== */
body.wa-lead-open{
  overflow:hidden;
}
.wa-lead-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:22px;
}
.wa-lead-modal[hidden]{
  display:none !important;
}
.wa-lead-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,18,16,.62);
  backdrop-filter:blur(5px);
}
.wa-lead-panel{
  position:relative;
  z-index:1;
  width:min(100%,520px);
  max-height:min(90vh,720px);
  overflow:auto;
  padding:30px;
  border:1px solid rgba(18,72,57,.12);
  border-radius:24px;
  background:#fff;
  box-shadow:0 26px 80px rgba(7,31,24,.28);
}
.wa-lead-close{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #dde7e2;
  border-radius:50%;
  background:#fff;
  color:#21362f;
  font:600 25px/1 Arial,sans-serif;
  cursor:pointer;
}
.wa-lead-close:hover{
  background:#f4f8f6;
}
.wa-lead-heading{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding-right:38px;
}
.wa-lead-brand-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:15px;
  background:#eefaf4;
}
.wa-lead-brand-icon img{
  display:block;
  width:29px;
  height:29px;
}
.wa-lead-kicker{
  margin:1px 0 5px;
  color:#087a5a;
  font-family:"Inter",Arial,sans-serif;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.11em;
}
.wa-lead-heading h2{
  margin:0;
  color:#142b24;
  font-family:"Inter Tight","Inter",Arial,sans-serif;
  font-size:clamp(25px,4vw,33px);
  line-height:1.04;
  letter-spacing:-.035em;
}
.wa-lead-description{
  margin:17px 0 20px;
  color:#52635d;
  font-size:15px;
  line-height:1.55;
}
.wa-lead-form{
  display:grid;
  gap:14px;
}
.wa-lead-form label{
  display:grid;
  gap:7px;
  color:#263a33;
  font-family:"Inter",Arial,sans-serif;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
}
.wa-lead-form input,
.wa-lead-form select{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:1px solid #ccd9d3;
  border-radius:12px;
  background:#fff;
  color:#142b24;
  font:500 15px/1.35 "Inter",Arial,sans-serif;
  outline:none;
}
.wa-lead-form input:focus,
.wa-lead-form select:focus{
  border-color:#138866;
  box-shadow:0 0 0 3px rgba(19,136,102,.12);
}
.wa-lead-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:2px;
}
.wa-lead-submit img{
  width:22px;
  height:22px;
}
.wa-lead-submit:disabled{
  opacity:.7;
  cursor:wait;
}
.wa-lead-note,
.wa-lead-error{
  margin:0;
  font-family:"Inter",Arial,sans-serif;
  font-size:12px;
  line-height:1.45;
  text-align:center;
}
.wa-lead-note{
  color:#687770;
}
.wa-lead-error{
  padding:9px 11px;
  border-radius:10px;
  background:#fff2f1;
  color:#9a2d25;
  font-weight:700;
}

@media (max-width:600px){
  .wa-lead-modal{
    place-items:end center;
    padding:0;
  }
  .wa-lead-panel{
    width:100%;
    max-height:92vh;
    padding:24px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
  }
  .wa-lead-close{
    top:12px;
    right:12px;
    width:36px;
    height:36px;
  }
  .wa-lead-heading{
    gap:11px;
    padding-right:35px;
  }
  .wa-lead-brand-icon{
    width:44px;
    height:44px;
    border-radius:13px;
  }
  .wa-lead-heading h2{
    font-size:27px;
  }
  .wa-lead-description{
    margin:14px 0 17px;
    font-size:14px;
  }
  .wa-lead-form{
    gap:12px;
  }
  .wa-lead-form input,
  .wa-lead-form select{
    min-height:48px;
  }
}

/* ==========================================================
   FINAL MOBILE UX QA - icons, navigation, testimonials, WhatsApp
   ========================================================== */

/* Menu typography: human, modern and easy to scan on every device */
.nav,
.nav.open,
.nav a,
.nav.open a{
  font-family:"Inter","Inter Tight",Arial,sans-serif;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
}
.nav.open a{
  font-size:16px;
  line-height:1.25;
}
@media (min-width:1000px){
  .nav{
    gap:28px;
    font-family:"Inter","Inter Tight",Arial,sans-serif;
    font-size:14px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:-.01em;
    text-transform:none;
  }
}

/* Mobile-safe SVG rendering. Explicit sizing avoids collapsed icons in WebKit/Chromium. */
svg.ui-icon-svg,
svg.ui-arrow-svg,
svg.trust-check-svg,
.industry-tab-icon svg,
.system-point-icon svg{
  display:block;
  flex:none;
  overflow:visible;
  pointer-events:none;
}
.icon,
.standard-icon,
.outcome-arrow,
.system-point-icon,
.industry-tab-icon,
.review-nav-btn{
  flex-shrink:0;
}
@media (max-width:767px){
  svg.ui-icon-svg{width:28px!important;height:28px!important;min-width:28px;min-height:28px}
  svg.ui-arrow-svg{width:21px!important;height:21px!important;min-width:21px;min-height:21px}
  svg.trust-check-svg{width:17px!important;height:17px!important;min-width:17px;min-height:17px}
  .industry-tab-icon svg,.system-point-icon svg{min-width:22px;min-height:22px}
}

/* Testimonial controls: large, high-contrast, touch-friendly, and always visible. */
.reviews-carousel-toolbar{
  min-height:52px;
}
.reviews-nav{
  align-items:center;
  gap:10px;
}
.reviews-counter{
  min-width:48px;
  color:#52635d;
  font-family:"Inter",Arial,sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:700;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.review-nav-btn{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  border:1px solid #0f7559;
  background:#087456;
  color:#fff;
  box-shadow:0 10px 24px rgba(8,116,86,.18);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.review-nav-btn:hover:not(:disabled),
.review-nav-btn:active:not(:disabled){
  background:#065c47;
  border-color:#065c47;
}
.review-nav-btn:disabled{
  opacity:.42;
  background:#edf3f0;
  border-color:#cbdad4;
  color:#52635d;
  box-shadow:none;
}
.review-nav-btn .ui-arrow-svg{
  width:22px!important;
  height:22px!important;
  stroke:currentColor;
  stroke-width:2.4;
}
.reviews-track{
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}
@media (max-width:719px){
  .reviews-carousel-toolbar{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    margin:0 0 12px;
  }
  .reviews-swipe-hint{
    align-self:center;
    max-width:170px;
    font-size:12px;
    line-height:1.35;
  }
  .reviews-nav{gap:8px}
  .review-nav-btn{
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
  }
  .reviews-counter{min-width:42px;font-size:12px}
  .testimonials-section .review-card{
    flex-basis:92%;
    min-width:0;
  }
  .reviews-progress{
    height:4px;
    margin-top:4px;
  }
}

/* WhatsApp lead capture: no panel scroll on desktop or mobile. */
.wa-lead-modal{
  padding:12px;
  overflow:hidden;
}
.wa-lead-panel{
  width:min(100%,500px);
  max-height:none;
  overflow:visible;
  padding:24px;
  border-radius:20px;
}
.wa-lead-heading{gap:11px;padding-right:36px}
.wa-lead-brand-icon{width:44px;height:44px;border-radius:13px}
.wa-lead-brand-icon img{width:27px;height:27px}
.wa-lead-heading h2{font-size:clamp(24px,3.2vw,30px);line-height:1.05}
.wa-lead-description{margin:12px 0 14px;font-size:14px;line-height:1.4}
.wa-lead-form{gap:10px}
.wa-lead-form label{gap:5px;font-size:12px;line-height:1.2}
.wa-lead-form input,
.wa-lead-form select{min-height:46px;padding:10px 12px;border-radius:11px;font-size:14px}
.wa-lead-submit{min-height:48px;padding:12px 16px;margin-top:0}
.wa-lead-note,.wa-lead-error{font-size:11px;line-height:1.3}

@media (max-width:600px){
  .wa-lead-modal{
    place-items:center;
    padding:10px;
  }
  .wa-lead-panel{
    width:100%;
    max-height:none;
    overflow:visible;
    padding:18px 15px max(16px,env(safe-area-inset-bottom));
    border-radius:18px;
  }
  .wa-lead-close{
    top:9px;
    right:9px;
    width:34px;
    height:34px;
    font-size:22px;
  }
  .wa-lead-heading{
    gap:9px;
    padding-right:32px;
  }
  .wa-lead-brand-icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .wa-lead-brand-icon img{width:25px;height:25px}
  .wa-lead-kicker{margin:0 0 3px;font-size:9px;letter-spacing:.09em}
  .wa-lead-heading h2{font-size:23px;line-height:1.04}
  .wa-lead-description{margin:10px 0 12px;font-size:13px;line-height:1.32}
  .wa-lead-form{gap:8px}
  .wa-lead-form label{gap:4px;font-size:11.5px}
  .wa-lead-form input,
  .wa-lead-form select{min-height:44px;padding:9px 11px;font-size:14px}
  .wa-lead-submit{min-height:46px;padding:10px 12px;font-size:14px}
  .wa-lead-submit img{width:20px;height:20px}
  .wa-lead-note{font-size:10.5px;line-height:1.25}
}

/* Extra-short phones: compact without introducing a scrollbar. */
@media (max-height:680px){
  .wa-lead-panel{padding-top:15px;padding-bottom:14px}
  .wa-lead-brand-icon{width:36px;height:36px}
  .wa-lead-brand-icon img{width:22px;height:22px}
  .wa-lead-heading h2{font-size:21px}
  .wa-lead-description{margin:7px 0 9px;font-size:12px}
  .wa-lead-form{gap:6px}
  .wa-lead-form label{gap:3px;font-size:11px}
  .wa-lead-form input,.wa-lead-form select{min-height:40px;padding:7px 10px}
  .wa-lead-submit{min-height:42px;padding:8px 11px}
  .wa-lead-note{font-size:10px}
}

/* Mobile trust strip contrast correction discovered during final visual QA */
@media (max-width:719px){
  .hero-trust-strip{
    color:#087456;
  }
  .hero-trust-strip span{
    border-color:#bfe9da;
    background:#f0fbf6;
    color:#087456;
  }
}

/* ==========================================================
   Mobile proof rails + refined HOW WE WORK - 2026-08-13
   ========================================================== */
@media (max-width:719px){
  .hero-trust-strip,
  .mobile-outcome-strip{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    max-width:none!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    margin-right:-20px!important;
    padding:2px 20px 9px 0!important;
    scroll-snap-type:x proximity;
    scroll-padding-left:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
  }
  .hero-trust-strip::-webkit-scrollbar,
  .mobile-outcome-strip::-webkit-scrollbar{display:none}
  .hero-trust-strip span,
  .mobile-outcome-strip span{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    min-height:38px!important;
    padding:9px 13px!important;
    border-radius:999px!important;
    scroll-snap-align:start;
    white-space:nowrap!important;
    font-family:"Inter",Arial,sans-serif!important;
    font-size:11.5px!important;
    line-height:1!important;
    font-weight:700!important;
    letter-spacing:0!important;
    text-transform:none!important;
  }
  .hero-trust-strip span{
    justify-content:flex-start!important;
    border:1px solid #bfe9da!important;
    background:#f0fbf6!important;
    color:#087456!important;
  }
  .mobile-outcome-strip{
    margin-top:8px!important;
  }
  .mobile-outcome-strip span{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(16,185,129,.22)!important;
    background:#ECFDF5!important;
    color:#087F5B!important;
  }
  .mobile-outcome-strip span:nth-child(3){grid-column:auto!important}
  .hero-trust-strip::after,
  .mobile-outcome-strip::after{
    content:"";
    flex:0 0 10px;
    width:10px;
  }
}

.how-work-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#F8FAFC 0%,#F3F8F6 100%);
}
.how-work-section::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-190px;
  top:-190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.12),rgba(16,185,129,0) 70%);
  pointer-events:none;
}
.how-work-head,
.how-work-grid{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin-inline:auto;
}
.how-work-head{
  display:grid;
  gap:24px;
  align-items:end;
  margin-bottom:34px;
}
.how-work-title h2{
  max-width:700px;
  margin-bottom:0;
}
.how-work-intro{
  max-width:530px;
}
.how-work-intro > p{
  margin:0 0 16px;
  color:#475467;
  font-size:16px;
  line-height:1.7;
}
.how-work-principles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.how-work-principles span{
  padding:7px 10px;
  border:1px solid #CAE7DC;
  border-radius:999px;
  background:#FFFFFF;
  color:#087456;
  font-family:"Inter",Arial,sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:750;
}
.how-work-grid{
  display:grid;
  gap:14px;
}
.work-step{
  position:relative;
  min-width:0;
  padding:24px;
  border:1px solid #D9E5E0;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 34px rgba(10,25,47,.055);
}
.work-step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px;
}
.work-step-number{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#DDF7EE;
  color:#087456;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
}
.work-step-label{
  color:#667085;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.08em;
}
.work-step h3{
  margin:0 0 10px;
  color:#0A192F;
  font-size:22px;
  line-height:1.18;
}
.work-step > p{
  min-height:78px;
  margin:0;
  color:#475467;
  font-size:14.5px;
  line-height:1.65;
}
.work-step-output{
  display:grid;
  gap:4px;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid #E5ECE9;
}
.work-step-output span{
  color:#7A8796;
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.08em;
}
.work-step-output strong{
  color:#087456;
  font-family:"Inter",Arial,sans-serif;
  font-size:13px;
  line-height:1.35;
  font-weight:750;
}
@media (min-width:900px){
  .how-work-head{
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
    gap:52px;
  }
  .how-work-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .work-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:47px;
    right:-15px;
    width:15px;
    height:2px;
    background:#BFD9CF;
    z-index:3;
  }
}
@media (max-width:899px){
  .how-work-section{padding-top:62px;padding-bottom:62px}
  .how-work-head{margin-bottom:24px}
  .work-step{padding:20px}
  .work-step-top{margin-bottom:18px}
  .work-step > p{min-height:0}
}
@media (max-width:419px){
  .how-work-principles{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .how-work-principles::-webkit-scrollbar{display:none}
  .how-work-principles span{flex:0 0 auto}
}

/* ==========================================================================
   THRIVELINKMEDIA - V2 ENHANCEMENT LAYER
   Gradient surfaces, brand assets, data visualisation, mobile optimisation.
   Appended last so it wins on equal specificity. No copy is affected.
   ========================================================================== */

:root{
  --emerald-1:#34D399;
  --emerald-2:#10B981;
  --emerald-3:#059669;
  --marigold-1:#FBBF24;
  --marigold-2:#F59E0B;

  /* Signature navy gradient: emerald light from top-right, marigold from bottom-left */
  --grad-navy:
    radial-gradient(1100px 620px at 88% -12%, rgba(16,185,129,.22), transparent 62%),
    radial-gradient(820px 520px at -5% 108%, rgba(245,158,11,.15), transparent 60%),
    linear-gradient(158deg,#0E2444 0%, #0A192F 46%, #06101F 100%);

  --grad-navy-soft:
    radial-gradient(700px 420px at 92% 0%, rgba(16,185,129,.20), transparent 64%),
    linear-gradient(150deg,#10263F 0%, #0A192F 62%, #08152A 100%);

  --grad-emerald:linear-gradient(135deg,var(--emerald-1) 0%, var(--emerald-2) 52%, var(--emerald-3) 100%);
  --grad-marigold:linear-gradient(135deg,var(--marigold-1) 0%, var(--marigold-2) 100%);
  --grad-surface:linear-gradient(168deg,#FFFFFF 0%, #F7FAFD 58%, #EFF5FA 100%);
  --grad-mint:linear-gradient(160deg,#F2FEF9 0%, #E7F9F1 100%);

  --ring-emerald:0 0 0 3px rgba(16,185,129,.16);
  --dock-safe:env(safe-area-inset-bottom,0px);
}

/* ---------- Base hardening ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  background:linear-gradient(180deg,#FBFCFE 0%, var(--slate) 40%, #F2F6FA 100%);
  background-attachment:fixed;
  padding-bottom:calc(78px + var(--dock-safe));
  -webkit-tap-highlight-color:rgba(16,185,129,.14);
}
/* Anchors must clear the sticky header */
[id]{scroll-margin-top:88px}

/* ==========================================================================
   1. BRAND MARK - replaces the flat "T" tile with the real logo asset
   ========================================================================== */
.brand-mark{
  /* superseded by the interlocking-links mark in the V12 block below */
  background:url("assets/logo-mark.svg") center/contain no-repeat !important;
  border-radius:11px;
  font-size:0 !important;
  color:transparent !important;
  box-shadow:0 4px 14px rgba(16,185,129,.30);
}
.brand:hover .brand-mark{transform:translateY(-1px)}
.brand-mark{transition:transform .25s ease}

/* ==========================================================================
   2. GRADIENT SURFACES (replacing flat --primary fills)
   ========================================================================== */
.site-header{
  background:
    linear-gradient(120deg, rgba(16,185,129,.16) 0%, transparent 46%),
    linear-gradient(180deg, rgba(10,25,47,.98) 0%, rgba(9,21,40,.94) 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px -18px rgba(3,10,22,.85);
}
.system,
.final-cta,
footer,
.audit-panel{
  position:relative;
  background:var(--grad-navy);
  isolation:isolate;
}
.growth-system-strip{
  background:var(--grad-navy-soft);
  border:1px solid rgba(52,211,153,.20);
  box-shadow:0 22px 54px -30px rgba(6,16,31,.85);
}
.audit-panel{
  border:1px solid rgba(52,211,153,.16);
}
/* Fine grain so the large navy fields do not band on mobile OLED screens */
.system::before,
.final-cta::before,
.audit-panel::before,
.growth-system-strip::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.final-cta{
  border-top:1px solid rgba(52,211,153,.18);
}
footer{
  background:
    radial-gradient(620px 320px at 6% 0%, rgba(16,185,129,.14), transparent 62%),
    linear-gradient(180deg,#08172B 0%, #061020 100%);
}

/* Buttons get depth without changing their labels */
.btn-primary{
  background:var(--grad-emerald) !important;
  border:0;
  color:#04231A !important;
  box-shadow:0 10px 24px -10px rgba(16,185,129,.62);
}
.btn-primary:hover{
  box-shadow:0 14px 30px -10px rgba(16,185,129,.72);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(0)}
.btn{transition:transform .18s ease, box-shadow .22s ease}
.btn-light{
  background:linear-gradient(180deg,#FFFFFF 0%, #EEF5FB 100%) !important;
  color:var(--primary) !important;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55);
}

/* Cards lift off the gradient page background */
.problem-card,
.industry-grid article,
.voice-card,
.work-step,
.funnel-card,
.calculator,
.live-board,
.hero-lead-card,
.review-card{
  background-image:var(--grad-surface);
  background-color:#FFFFFF;
}
/* Dark card: keep white text legible, gradient stays in the navy family */
.industry-insight-card{
  background-image:var(--grad-navy-soft);
  border-color:rgba(52,211,153,.20);
}
.problem-card,
.industry-grid article,
.work-step,
.voice-card{
  position:relative;
  overflow:hidden;
}
/* A single emerald hairline reads as a shared family mark across card types */
.problem-card::after,
.industry-grid article::after,
.work-step::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--grad-emerald);
  opacity:.85;
}
.funnel-step.highlight{
  background:var(--grad-mint);
  border-color:rgba(16,185,129,.30);
}
.icon,.number-icon,.standard-icon{
  background-image:var(--grad-mint);
  border:1px solid rgba(16,185,129,.20);
  color:var(--emerald-3);
}
.system-step>span,
.industry-grid article>span,
.outcome-num{
  background-image:linear-gradient(150deg, rgba(52,211,153,.20), rgba(16,185,129,.06));
}
.mobile-outcome-strip span{
  background:var(--grad-mint);
}
.availability-dot:before{
  background:var(--grad-emerald);
  animation:tlmPulse 2.6s ease-in-out infinite;
}
@keyframes tlmPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.14)}
  50%{box-shadow:0 0 0 9px rgba(16,185,129,.04)}
}

/* ==========================================================================
   3. HERO MEDIA
   ========================================================================== */
.hero-media{
  order:3;
  margin:0;
  padding:18px;
  border-radius:22px;
  border:1px solid var(--border);
  background:
    radial-gradient(520px 320px at 78% 8%, rgba(16,185,129,.14), transparent 62%),
    linear-gradient(165deg,#FFFFFF 0%, #F3F8FC 100%);
  box-shadow:var(--shadow);
}
.hero-media img{
  display:block;
  width:100%;
  height:auto;
}
.hero-media figcaption{
  margin-top:12px;
  color:var(--muted);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
}

/* ==========================================================================
   4. DATA VISUALISATION
   ========================================================================== */
.tlm-chart{
  margin-top:18px;
  padding:16px 14px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(170deg,#FFFFFF 0%, #F5F9FD 100%);
}
.tlm-chart-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.tlm-chart-head strong{
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:15px;
  color:var(--primary);
}
.tlm-chart-head span{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.tlm-chart svg{display:block;width:100%;height:auto;overflow:visible}

/* Trend sparkline inside the live board */
.board-trend{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.board-trend-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:10px;
}
.board-trend-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.board-trend-legend i{
  width:10px;height:10px;border-radius:3px;
  background:var(--grad-emerald);
}
.board-trend-legend .is-alt i{background:var(--grad-marigold)}

/* Animated draw-on for line paths */
.tlm-line{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
  animation:tlmDraw 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes tlmDraw{to{stroke-dashoffset:0}}
.tlm-bar{transition:height .7s cubic-bezier(.4,0,.2,1), y .7s cubic-bezier(.4,0,.2,1)}

/* Priority map bars now animate to real per-industry values */
.priority-track{
  overflow:hidden;
  background:rgba(10,25,47,.07);
}
.priority-track i{
  display:block;
  height:100%;
  background:var(--grad-emerald);
  border-radius:inherit;
  transition:width .75s cubic-bezier(.4,0,.2,1);
}
.priority-bar-row.is-focus i{background:var(--grad-marigold)}
.priority-bar-row{align-items:center}
.priority-value{
  min-width:38px;
  text-align:right;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}

/* ==========================================================================
   5. MOTION - reveal on scroll
   ========================================================================== */
.tlm-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
.tlm-reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .tlm-reveal{opacity:1;transform:none}
  .tlm-line{stroke-dashoffset:0}
}

/* ==========================================================================
   6. ACCESSIBILITY - visible focus on the gradient surfaces
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--marigold-2);
  outline-offset:3px;
  border-radius:8px;
}

/* ==========================================================================
   7. MOBILE OPTIMISATION
   ========================================================================== */
@media (max-width:719px){
  .section{padding:56px 18px}
  body{font-size:16px;line-height:1.6}

  /* Tighter display type so headlines stop wrapping to five lines on 360px */
  h1{font-size:clamp(34px,9.2vw,52px);line-height:1.02;margin-bottom:18px}
  h2{font-size:clamp(28px,7.4vw,40px);line-height:1.08;margin-bottom:16px}
  h3{font-size:21px;line-height:1.2}
  .hero-sub{font-size:16.5px;line-height:1.6;margin-bottom:24px}
  .hero-lead-card h2{font-size:25px}
  .section-heading{margin-bottom:28px}
  .section-heading>p,
  .system-copy>p,
  .calculator-copy>p,
  .audit-copy>p{font-size:15.5px}
  p{margin-bottom:18px}

  /* Every interactive target clears 44px */
  .btn,.text-link,.choice,.goal-choice,.industry-tab,
  .faq-question,.dock-primary,.dock-whatsapp,.review-nav-btn,
  .back-link,.promo-cta,.menu-toggle{
    min-height:46px;
  }
  .btn-large{min-height:54px;font-size:16px}
  .footer-links a{padding:6px 0;display:inline-block}

  /* Inputs stay at 16px so iOS never zooms the viewport on focus */
  input,select,textarea{font-size:16px !important}

  .hero{padding-top:34px;padding-bottom:44px;gap:26px}
  .hero-media{padding:12px;border-radius:18px}
  .hero-media figcaption{font-size:10px}

  .live-board,.hero-lead-card{padding:18px;border-radius:18px}
  .audit-panel{padding:24px 16px;border-radius:22px}
  .growth-system-strip{
    width:calc(100% - 28px);
    padding:22px 16px;
    border-radius:16px;
  }
  .final-cta{padding:60px 18px}
  footer{padding:40px 18px calc(104px + var(--dock-safe))}

  .tlm-chart{padding:14px 10px 10px;border-radius:14px}
  .tlm-chart-head strong{font-size:14px}

  /* Dock respects the iOS home indicator */
  .mobile-action-dock{
    padding-bottom:calc(10px + var(--dock-safe));
    background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, #FFFFFF 42%);
    backdrop-filter:blur(12px);
    box-shadow:0 -12px 30px -20px rgba(10,25,47,.55);
    border-top:1px solid var(--border);
  }
  .dock-primary{
    background:var(--grad-emerald);
    color:#04231A;
    font-weight:700;
  }

  /* Horizontal rails: momentum + snap, no visible scrollbar */
  .industry-tabs,
  .reviews-track,
  .hero-trust-strip,
  .mobile-outcome-strip{
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
  }
  .industry-tab,.review-card{scroll-snap-align:start}

  /* Mobile nav sheet reads better over the gradient header */
  .nav.open{
    background:var(--grad-navy);
    box-shadow:0 24px 60px -24px rgba(3,10,22,.9);
  }
}

@media (max-width:389px){
  .section{padding:48px 15px}
  h1{font-size:clamp(30px,8.6vw,40px)}
  h2{font-size:clamp(25px,7vw,32px)}
  .live-board,.hero-lead-card{padding:15px}
  .growth-system-strip{width:calc(100% - 22px);padding:18px 14px}
  .tlm-chart{padding:12px 8px 8px}
}

/* Landscape phones: stop the sticky header eating the viewport */
@media (max-height:520px) and (orientation:landscape){
  .site-header{position:static}
  .mobile-action-dock{position:static}
  body{padding-bottom:0}
}

@media (min-width:720px){
  .hero-media{padding:22px}
}
@media (min-width:1000px){
  .hero-media{order:3}
  .brand-mark{width:36px;height:36px}
}

/* Print: drop the fixed furniture */
@media print{
  .site-header,.mobile-action-dock,.whatsapp-float,.promo-popup,.wa-lead-modal{display:none !important}
  body{padding-bottom:0;background:#FFFFFF}
  .system,.final-cta,footer,.audit-panel{background:#0A192F !important}
}

/* Priority bar focus label + board trend note */
.priority-value{
  min-width:40px;
  text-align:right;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--marigold-2);
}
.board-trend-note{
  margin:10px 0 0 !important;
  color:#7A8593 !important;
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px !important;
  line-height:1.5 !important;
  letter-spacing:.03em;
}

/* ---------- Standalone chart figures (results / growth pages) ---------- */
.chart-figure{
  margin:0;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--border);
  background:
    radial-gradient(520px 320px at 82% 6%, rgba(16,185,129,.12), transparent 62%),
    linear-gradient(168deg,#FFFFFF 0%, #F4F9FD 100%);
  box-shadow:var(--shadow);
}
.chart-figure img{display:block;width:100%;height:auto;margin-inline:auto}
.chart-figure figcaption{
  margin-top:14px;
  color:var(--muted);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.03em;
}
.loop-figure{
  padding:16px;
  border-color:rgba(52,211,153,.22);
  background:
    radial-gradient(420px 300px at 50% 10%, rgba(16,185,129,.18), transparent 66%),
    linear-gradient(170deg,#FFFFFF 0%, #F1F8FC 100%);
}
.loop-figure img{max-width:440px}
@media (max-width:719px){
  .chart-figure{padding:14px;border-radius:16px}
  .chart-figure figcaption{font-size:10.5px;margin-top:10px}
  .loop-figure{padding:10px}
  .loop-figure img{max-width:340px}
}

/* ---------------------------------------------------------------------------
   Priority map corrections
   An earlier rule (".priority-track i{width:100%!important}") pinned all three
   checkpoint bars to full width, so the panel could never respond to the
   business-type selector. The bars are driven by the tab's data-bar values.
   --------------------------------------------------------------------------- */
.priority-bar-row{
  grid-template-columns:112px 1fr auto;
}
.priority-value{
  align-self:center;
}
@media (max-width:389px){
  .priority-bar-row{grid-template-columns:92px 1fr auto;gap:8px}
  .priority-bar-row>span{font-size:11px}
  .priority-value{font-size:9px;min-width:32px}
}

/* Desktop header CTA reached only 42px; align it with the 44px target floor. */
.btn-small.desktop-cta{min-height:44px;display:inline-flex;align-items:center}

/* ---------------------------------------------------------------------------
   Contrast corrections (pre-existing, found in WCAG AA audit)
   - .measurement-stats strong was #7EE2C0 on the #ECFDF5 mint tile: 1.47:1,
     effectively mint text on a mint background.
   - .case-label used --secondary (#10B981) on a white card: 2.54:1.
   Both now meet AA for normal text while staying in the emerald family.
   --------------------------------------------------------------------------- */
.measurement-stats strong{color:#065F46}
.case-stats small{color:#046B4B}
.case-label{color:#067A55}

/* ==========================================================================
   V3 - HERO: full-fold mobile layout, larger display type, search animation
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Animated local search demo
   Generic local-results mock. No Google marks, logo, colours or rating
   figures: it illustrates the search-to-enquiry journey, nothing more.
   -------------------------------------------------------------------------- */
.search-demo{
  order:0;
  margin:0;
  padding:18px;
  border-radius:22px;
  border:1px solid var(--border);
  background:
    radial-gradient(460px 300px at 82% 4%, rgba(16,185,129,.14), transparent 62%),
    linear-gradient(168deg,#FFFFFF 0%, #F3F8FC 100%);
  box-shadow:var(--shadow);
}
.search-demo-phone{
  position:relative;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg,#F8FBFE 0%, #EEF4FA 100%);
  border:1px solid var(--border);
  overflow:hidden;
}
.search-demo-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  height:46px;
  padding:0 14px;
  border-radius:999px;
  background:#FFFFFF;
  border:1px solid var(--border-strong);
  box-shadow:0 4px 12px -6px rgba(10,25,47,.28);
}
.sd-glass{width:18px;height:18px;flex:none;color:var(--muted)}
.sd-typed{
  overflow:hidden;
  white-space:nowrap;
  font-size:15px;
  font-weight:500;
  color:var(--primary);
}
.sd-text{
  display:inline-block;
  vertical-align:bottom;
  white-space:nowrap;
}
.sd-caret{
  width:2px;
  height:19px;
  flex:none;
  margin-left:-6px;
  background:var(--emerald-2);
  animation:sdBlink 1s steps(1,end) infinite;
}
@keyframes sdBlink{0%,50%{opacity:1}51%,100%{opacity:0}}

.search-demo-results{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.sd-result{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:12px;
  background:#FFFFFF;
  border:1px solid var(--border);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.4,0,.2,1);
}
.search-demo-results.is-shown .sd-result{opacity:1;transform:none}
.search-demo-results.is-shown .sd-result:nth-child(2){transition-delay:.10s}
.search-demo-results.is-shown .sd-result:nth-child(3){transition-delay:.20s}
.sd-result.sd-you{
  border-color:rgba(16,185,129,.42);
  background:var(--grad-mint);
  box-shadow:0 8px 20px -12px rgba(16,185,129,.7);
}
.sd-pin{
  width:26px;height:26px;flex:none;
  border-radius:8px;
  background:linear-gradient(150deg,#D9E4EF,#C6D4E2);
}
.sd-you .sd-pin{background:var(--grad-emerald)}
.sd-result strong{
  display:block;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:14px;
  color:var(--primary);
}
.sd-result small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.4;
}
.sd-you strong{color:#04231A}
.sd-you small{color:#0C6B4F}
.sd-blur{
  display:block;
  width:118px;
  height:9px;
  border-radius:5px;
  background:#E4EBF3;
}
.sd-result small.sd-blur{width:78px;height:7px;margin-top:6px}
.sd-badge{
  margin-left:auto;
  flex:none;
  padding:5px 9px;
  border-radius:999px;
  background:#04231A;
  color:#6EE7B7;
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}
/* Tap ripple over the top result */
.search-demo-tap{
  position:absolute;
  left:50%;
  top:92px;
  width:34px;height:34px;
  margin-left:-17px;
  border-radius:50%;
  border:2px solid var(--emerald-2);
  background:rgba(16,185,129,.14);
  opacity:0;
  transform:scale(.4);
  transition:opacity .45s ease, transform .45s ease;
}
.search-demo-tap.is-tapped{opacity:.95;transform:scale(1.5)}
.search-demo-lead{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:12px;
  padding:11px 13px;
  border-radius:12px;
  background:var(--grad-navy-soft);
  color:#FFFFFF;
  font-size:13px;
  font-weight:600;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.search-demo-lead.is-shown{opacity:1;transform:none}
.sd-tick{
  width:20px;height:20px;flex:none;
  border-radius:50%;
  background:var(--grad-emerald);
  position:relative;
}
.sd-tick::after{
  content:"";
  position:absolute;
  left:6px;top:5px;
  width:5px;height:9px;
  border:solid #04231A;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.search-demo figcaption{
  margin-top:12px;
  color:var(--muted);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
}
/* Reduced motion: JS renders the finished state and does not loop */
@media (prefers-reduced-motion:reduce){
  .sd-caret{display:none}
  .sd-result{opacity:1;transform:none}
  .search-demo-lead{opacity:1;transform:none}
  .search-demo-tap{display:none}
}

/* --------------------------------------------------------------------------
   2. Mobile hero: fills the fold, larger display type
   -------------------------------------------------------------------------- */
@media (max-width:719px){
  /* Header 79px + dock 70px measured at 390x844 */
  .hero{
    padding-top:16px;
    padding-bottom:34px;
    gap:20px;
  }
  .hero-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero-copy h1{
    font-size:clamp(40px,12vw,58px);
    line-height:1.0;
    letter-spacing:-.045em;
    margin-bottom:18px;
  }
  .hero-sub{
    font-size:17px;
    line-height:1.55;
    margin-bottom:22px;
  }
  .hero-kicker-row{margin-bottom:14px}
  .hero-actions{margin-bottom:16px;gap:10px}
  .mobile-outcome-strip{margin-bottom:18px}
  .hero-trust-strip{margin-bottom:0}

  .search-demo{padding:12px;border-radius:18px}
  .search-demo-phone{padding:11px}
  .search-demo figcaption{font-size:10px;margin-top:9px}
  .sd-typed{font-size:14px}
  .search-demo-tap{top:86px}
}

/* Fill the fold only where the viewport can actually hold the block.
   Narrow or short devices fall back to natural flow so nothing is cut off. */
@media (max-width:719px) and (min-width:360px) and (min-height:700px){
  .hero-copy{
    min-height:calc(100vh - 165px);
    min-height:calc(100svh - 165px);
  }
}

@media (max-width:389px){
  .hero-copy h1{font-size:clamp(36px,11.5vw,44px)}
  .hero-sub{font-size:15.5px}
  .sd-badge{display:none}
  .sd-result strong{font-size:13px}
}

/* Small phones: tighten hero rhythm so the block still clears the dock */
@media (max-width:359px){
  .hero{padding-top:10px;gap:16px}
  .hero-kicker-row{margin-bottom:10px}
  .hero-copy h1{margin-bottom:14px}
  .hero-sub{font-size:15px;line-height:1.5;margin-bottom:14px}
  .mobile-outcome-strip{margin-bottom:12px;gap:6px}
  .mobile-outcome-strip span{padding:7px 10px;font-size:11px}
  .hero-actions{gap:8px;margin-bottom:12px}
  .hero-trust-strip{gap:6px}
}

/* ==========================================================================
   V3 - MULTI-STEP LEAD FORM (homepage audit panel + contact page)
   The three steps now read as one integrated card: a progress bar, a
   two-column choice grid on mobile, and a soft transition between steps.
   Step copy and order are unchanged.
   ========================================================================== */
.lead-form{
  position:relative;
  padding:22px 18px 20px;
  border-radius:20px;
  background:var(--grad-surface);
  border:1px solid var(--border);
  box-shadow:0 20px 48px -26px rgba(3,10,22,.55);
}
.form-progress{
  display:flex;
  gap:6px;
  margin-bottom:16px;
}
.form-progress i{
  flex:1;
  height:5px;
  border-radius:999px;
  background:#E1E9F1;
  transition:background .35s ease;
}
.form-progress i.is-done{background:var(--grad-emerald)}
.form-step.active{
  display:block;
  animation:formStepIn .32s cubic-bezier(.4,0,.2,1) both;
}
@keyframes formStepIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.step-label{
  display:inline-block;
  margin-bottom:6px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--grad-mint);
  border:1px solid rgba(16,185,129,.24);
  color:#046B4B;
}
.choice.selected,.goal-choice.selected{
  border-color:rgba(16,185,129,.55)!important;
  box-shadow:var(--ring-emerald);
}
.back-link{
  margin-top:14px;
  color:var(--muted);
  background:transparent;
  border:0;
  font-size:14px;
  font-weight:600;
}
.back-link:hover{color:var(--primary)}

@media (max-width:719px){
  .lead-form{padding:18px 14px 16px;border-radius:16px}
  .form-step h3{
    font-size:22px;
    line-height:1.18;
    margin:6px 0 16px;
  }
  /* Six business types in one column meant a long scroll before the first
     tap. Two columns keeps the whole choice set on screen. */
  .choice-grid{grid-template-columns:1fr 1fr;gap:8px}
  .choice-grid.single{grid-template-columns:1fr}
  .choice{
    min-height:56px;
    padding:12px;
    font-size:14px;
    text-align:center;
    align-content:center;
  }
  .goal-choice{min-height:52px;font-size:14.5px}
  .form-step label{margin-top:12px;display:block}
  .form-progress{margin-bottom:14px}
}
@media (max-width:359px){
  .choice{font-size:13px;padding:10px 8px}
  .form-step h3{font-size:20px}
}

/* ==========================================================================
   V5 - FULL-SCREEN MOBILE MENU + MULTI-COLOUR CARD SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Full-screen mobile menu
   Was a small floating card pinned under the header. Now a full-viewport
   sheet: large tap targets, no competing page content behind it.
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .nav.open{
    position:fixed;
    inset:0;
    top:0;left:0;right:0;bottom:0;
    z-index:120;
    max-height:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    padding:88px 22px calc(34px + var(--dock-safe));
    border:0;
    border-radius:0;
    overflow-y:auto;
    background:var(--grad-navy);
    animation:navSheetIn .26s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes navSheetIn{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:none}
  }
  .nav.open a{
    padding:18px 6px;
    font-size:21px;
    font-weight:700;
    letter-spacing:-.02em;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  /* Each link picks up its own accent, matching the card palette */
  .nav.open a:nth-of-type(1){border-left:3px solid #A78BFA}
  .nav.open a:nth-of-type(2){border-left:3px solid #4ADE80}
  .nav.open a:nth-of-type(3){border-left:3px solid #FBBF24}
  .nav.open a:nth-of-type(4){border-left:3px solid #F87171}
  .nav.open a:nth-of-type(5){border-left:3px solid #38BDF8}
  .nav.open a:not(.mobile-menu-growth-cta){padding-left:16px}
  .nav.open .mobile-menu-growth-cta{
    margin-top:26px;
    padding:18px;
    font-size:16px;
    border-left:0;
    border-radius:14px;
    justify-content:center;
  }
  /* Keep the toggle above the sheet so it can close it */
  .menu-toggle{position:relative;z-index:130}
  body.menu-open .site-header{background:transparent;border-bottom-color:transparent}
  body.menu-open .brand{position:relative;z-index:130}
}

/* --------------------------------------------------------------------------
   2. Multi-colour card palette
   Six pastel tints cycled across every card grid. Text stays near-navy for
   contrast; only surfaces, icons and rules take colour.
   CTA buttons are deliberately excluded so they stay identical to desktop.
   -------------------------------------------------------------------------- */
.problem-grid .problem-card,
.industry-grid article,
.voice-grid .voice-card,
.how-work-grid .work-step{
  background-image:none !important;
  background-color:var(--tint-bg, #FFFFFF) !important;
  border:1px solid var(--tint-br, var(--border));
}
.problem-grid .problem-card::after,
.industry-grid article::after,
.how-work-grid .work-step::after{
  background:var(--tint-ink, var(--emerald-2)) !important;
  opacity:1;
}
.problem-grid .problem-card .icon,
.problem-grid .problem-card .number-icon{
  background-image:none;
  background-color:var(--tint-chip, #FFFFFF);
  border-color:var(--tint-br, var(--border));
  color:var(--tint-ink, var(--emerald-3));
}
.industry-grid article>span{
  background-image:none;
  background-color:var(--tint-chip, #FFFFFF);
  border:1px solid var(--tint-br, var(--border));
  color:var(--tint-ink, var(--emerald-3));
}
.problem-card .impact{
  color:var(--tint-ink, var(--emerald-3));
}
.voice-grid .voice-card .voice-label,
.how-work-grid .work-step .work-step-label,
.how-work-grid .work-step .work-step-number{
  color:var(--tint-ink, var(--emerald-3));
}
.how-work-grid .work-step .work-step-output{
  background:var(--tint-chip, #F6F9FC);
  border-color:var(--tint-br, var(--border));
}

/* Tint cycle. Applied to every coloured grid via a shared selector list. */
.problem-grid > :nth-child(6n+1),
.industry-grid > :nth-child(6n+1),
.voice-grid > :nth-child(6n+1),
.how-work-grid > :nth-child(6n+1){
  --tint-bg:#EEE9FE; --tint-br:#D8CDFB; --tint-chip:#E9E2FE; --tint-ink:#5B21B6;
}
.problem-grid > :nth-child(6n+2),
.industry-grid > :nth-child(6n+2),
.voice-grid > :nth-child(6n+2),
.how-work-grid > :nth-child(6n+2){
  --tint-bg:#DFFAE9; --tint-br:#B4EFCB; --tint-chip:#D6F7E4; --tint-ink:#14532D;
}
.problem-grid > :nth-child(6n+3),
.industry-grid > :nth-child(6n+3),
.voice-grid > :nth-child(6n+3),
.how-work-grid > :nth-child(6n+3){
  --tint-bg:#FEF7C8; --tint-br:#F7E38C; --tint-chip:#FDF3C4; --tint-ink:#78350F;
}
.problem-grid > :nth-child(6n+4),
.industry-grid > :nth-child(6n+4),
.voice-grid > :nth-child(6n+4),
.how-work-grid > :nth-child(6n+4){
  --tint-bg:#FEE7E5; --tint-br:#FBC6C2; --tint-chip:#FDE2E0; --tint-ink:#9F1239;
}
.problem-grid > :nth-child(6n+5),
.industry-grid > :nth-child(6n+5),
.voice-grid > :nth-child(6n+5),
.how-work-grid > :nth-child(6n+5){
  --tint-bg:#DFF1FD; --tint-br:#AFDDF9; --tint-chip:#D7EFFC; --tint-ink:#075985;
}
.problem-grid > :nth-child(6n+6),
.industry-grid > :nth-child(6n+6),
.voice-grid > :nth-child(6n+6),
.how-work-grid > :nth-child(6n+6){
  --tint-bg:#FFEEDC; --tint-br:#FCD3A8; --tint-chip:#FDE9D2; --tint-ink:#9A3412;
}

/* Coloured accents on the dark sections, where pastel fills would not read */
.growth-system-point:nth-child(1) .system-point-icon{color:#C4B5FD;border-color:rgba(167,139,250,.42)}
.growth-system-point:nth-child(2) .system-point-icon{color:#6EE7B7;border-color:rgba(52,211,153,.42)}
.growth-system-point:nth-child(3) .system-point-icon{color:#FCD34D;border-color:rgba(251,191,36,.42)}
.growth-system-point:nth-child(4) .system-point-icon{color:#FCA5A5;border-color:rgba(248,113,113,.42)}
.system-steps .system-step:nth-child(1)>span{color:#C4B5FD;border-color:rgba(167,139,250,.36)}
.system-steps .system-step:nth-child(2)>span{color:#6EE7B7;border-color:rgba(52,211,153,.36)}
.system-steps .system-step:nth-child(3)>span{color:#FCD34D;border-color:rgba(251,191,36,.36)}
.system-steps .system-step:nth-child(4)>span{color:#FCA5A5;border-color:rgba(248,113,113,.36)}
.system-steps .system-step:nth-child(5)>span{color:#7DD3FC;border-color:rgba(56,189,248,.36)}

/* Outcome list numerals */
.outcome-list .outcome-row:nth-child(1) .outcome-num{background:#EEE9FE;color:#5B21B6}
.outcome-list .outcome-row:nth-child(2) .outcome-num{background:#DFFAE9;color:#14532D}
.outcome-list .outcome-row:nth-child(3) .outcome-num{background:#FEF7C8;color:#78350F}
.outcome-list .outcome-row:nth-child(4) .outcome-num{background:#FEE7E5;color:#9F1239}
.outcome-list .outcome-row:nth-child(5) .outcome-num{background:#DFF1FD;color:#075985}

/* Funnel steps */
.process-funnel .funnel-step:nth-child(1){background:#EEE9FE;border-color:#D8CDFB}
.process-funnel .funnel-step:nth-child(3){background:#DFFAE9;border-color:#B4EFCB}
.process-funnel .funnel-step:nth-child(5){background:#FEF7C8;border-color:#F7E38C}
.process-funnel .funnel-step:nth-child(7){background:#DFF1FD;border-color:#AFDDF9}

/* Step 1 business-type choices */
.choice-grid .choice:nth-child(6n+1){--tint-br:#D8CDFB;--tint-ink:#5B21B6}
.choice-grid .choice:nth-child(6n+2){--tint-br:#B4EFCB;--tint-ink:#14532D}
.choice-grid .choice:nth-child(6n+3){--tint-br:#F7E38C;--tint-ink:#78350F}
.choice-grid .choice:nth-child(6n+4){--tint-br:#FBC6C2;--tint-ink:#9F1239}
.choice-grid .choice:nth-child(6n+5){--tint-br:#AFDDF9;--tint-ink:#075985}
.choice-grid .choice:nth-child(6n+6){--tint-br:#FCD3A8;--tint-ink:#C2410C}
.choice-grid .choice{
  border-color:var(--tint-br);
  color:var(--tint-ink);
}
.choice-grid .choice.selected{
  background:var(--tint-bg, #ECFDF5)!important;
  color:var(--tint-ink)!important;
  border-color:var(--tint-ink)!important;
  box-shadow:none;
}

/* --------------------------------------------------------------------------
   3. Buttons stay identical across mobile and desktop
   The palette above must never leak into a call to action.
   -------------------------------------------------------------------------- */
.btn-primary,
.dock-primary,
.promo-cta,
.wa-lead-submit{
  background:var(--grad-emerald)!important;
  background-image:var(--grad-emerald)!important;
  color:#04231A!important;
  border-color:transparent!important;
}
.btn-light{
  background:linear-gradient(180deg,#FFFFFF 0%, #EEF5FB 100%)!important;
  color:var(--primary)!important;
}

/* The header's backdrop-filter creates a containing block, which anchored the
   fixed-position menu sheet to the header instead of the viewport. Dropping the
   filter while the menu is open lets the sheet cover the full screen. */
@media (max-width:999px){
  body.menu-open .site-header{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }
}

/* The work-step output tile is now tinted, so its label must leave the old
   grey (#7A8796) behind, which fell to 2.9:1 on the lighter chips. */
.how-work-grid .work-step .work-step-output span{
  color:var(--tint-ink, #4A5666) !important;
}
.how-work-grid .work-step .work-step-output strong{
  color:var(--primary) !important;
}

/* Desktop hero: the conversion column is taller now that it carries the search
   animation, and centre alignment pushed the headline far down the page.
   Align both columns to the top instead. */
@media (min-width:1000px){
  .hero{align-items:start}
  .hero-copy{position:sticky;top:104px}
}

/* ==========================================================================
   V4 - SEARCH DEMO (JS-driven stages), PASTEL CARDS, FULL-SCREEN MENU
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Search demo: stages are now driven by JS classes on .search-demo-phone
      so the query can rotate across business categories.
   -------------------------------------------------------------------------- */
.sd-text{
  max-width:none;
  animation:none;
  display:inline;
  overflow:visible;
}
.sd-caret{
  margin-left:2px;
  animation:sdBlink 1s steps(1,end) infinite;
  opacity:1;
}
.search-demo-phone.is-results .sd-caret,
.search-demo-phone.is-lead .sd-caret{opacity:0}

.sd-category{
  display:inline-block;
  margin:12px 0 0;
  padding:5px 10px;
  border-radius:999px;
  background:var(--grad-mint);
  border:1px solid rgba(16,185,129,.26);
  color:#046B4B;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.search-demo-phone.is-results .sd-category,
.search-demo-phone.is-lead .sd-category{opacity:1;transform:none}

.search-demo-results{margin-top:12px}
.sd-result{
  opacity:0;
  transform:translateY(10px);
  animation:none;
  transition:opacity .42s ease, transform .42s cubic-bezier(.4,0,.2,1);
}
.search-demo-phone.is-results .sd-result,
.search-demo-phone.is-lead .sd-result{opacity:1;transform:none}
.search-demo-phone.is-results .sd-result:nth-child(2),
.search-demo-phone.is-lead .sd-result:nth-child(2){transition-delay:.10s}
.search-demo-phone.is-results .sd-result:nth-child(3),
.search-demo-phone.is-lead .sd-result:nth-child(3){transition-delay:.20s}

.search-demo-tap{animation:none;opacity:0;transform:scale(.4)}
.search-demo-phone.is-tap .search-demo-tap{animation:sdTapOnce .9s ease forwards}
@keyframes sdTapOnce{
  0%{opacity:0;transform:scale(.4)}
  35%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.75)}
}

.search-demo-lead{
  animation:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.search-demo-phone.is-lead .search-demo-lead{opacity:1;transform:none}

/* Reserve height so rotating queries never shift the layout */
.search-demo-phone{min-height:298px}
@media (max-width:719px){.search-demo-phone{min-height:286px}}
@media (max-width:359px){.search-demo-phone{min-height:300px}}

/* Mobile-first placement: the search story leads the conversion stack */
.search-demo{order:0}
.hero-lead-card{order:1}
.hero-media{order:2}

/* --------------------------------------------------------------------------
   2. Pastel feature cards
   -------------------------------------------------------------------------- */
.problem-card,
.industry-grid article,
.work-step,
.voice-card,
.growth-system-point{
  --card-bg:#EFF3FA;
  --card-ink:#0A192F;
  --card-accent:#4B5FC4;
  background-image:none !important;
  background-color:var(--card-bg) !important;
  border:1px solid rgba(10,25,47,.07);
  box-shadow:0 10px 26px -20px rgba(10,25,47,.5);
}
.problem-card::after,
.industry-grid article::after,
.work-step::after{
  background:var(--card-accent) !important;
  opacity:.9;
}
.problem-card .icon,
.industry-grid article>span,
.work-step .work-step-number,
.voice-card .voice-label{
  background-image:none !important;
  background-color:rgba(255,255,255,.72) !important;
  border-color:rgba(10,25,47,.08) !important;
  color:var(--card-accent) !important;
}
.problem-card h3,
.industry-grid h3,
.work-step h3,
.voice-card p{color:var(--card-ink) !important}
.problem-card p,
.industry-grid p,
.work-step p,
.voice-card small{color:#43506180 !important}
.problem-card p,
.industry-grid p,
.work-step p{color:#3E4C5E !important}
.voice-card small{color:#55627A !important}
.problem-card .impact,
.work-step-output strong{color:var(--card-accent) !important}

/* Rotating palette. Each pairs a soft tint with an ink dark enough for AA. */
.problem-card:nth-child(6n+1),.industry-grid article:nth-child(6n+1),
.work-step:nth-child(6n+1),.voice-card:nth-child(6n+1),
.growth-system-point:nth-child(6n+1){--card-bg:#E6E3F8;--card-accent:#4C3FB0}
.problem-card:nth-child(6n+2),.industry-grid article:nth-child(6n+2),
.work-step:nth-child(6n+2),.voice-card:nth-child(6n+2),
.growth-system-point:nth-child(6n+2){--card-bg:#D9F2DC;--card-accent:#1E7A3E}
.problem-card:nth-child(6n+3),.industry-grid article:nth-child(6n+3),
.work-step:nth-child(6n+3),.voice-card:nth-child(6n+3),
.growth-system-point:nth-child(6n+3){--card-bg:#F6EFC6;--card-accent:#8A6A00}
.problem-card:nth-child(6n+4),.industry-grid article:nth-child(6n+4),
.work-step:nth-child(6n+4),.voice-card:nth-child(6n+4),
.growth-system-point:nth-child(6n+4){--card-bg:#FADCDC;--card-accent:#B33A3A}
.problem-card:nth-child(6n+5),.industry-grid article:nth-child(6n+5),
.work-step:nth-child(6n+5),.voice-card:nth-child(6n+5),
.growth-system-point:nth-child(6n+5){--card-bg:#D8E9FA;--card-accent:#1F5E9E}
.problem-card:nth-child(6n+6),.industry-grid article:nth-child(6n+6),
.work-step:nth-child(6n+6),.voice-card:nth-child(6n+6),
.growth-system-point:nth-child(6n+6){--card-bg:#FCE4D0;--card-accent:#A85418}

/* The growth strip sits on navy, so its points keep light ink */
.growth-system-point{
  border-color:rgba(255,255,255,.10);
}
.growth-system-point strong{color:var(--card-ink) !important}
.growth-system-point small{color:#3E4C5E !important}
.growth-system-point .system-point-icon{
  background-image:none !important;
  background-color:rgba(255,255,255,.72) !important;
  border-color:rgba(10,25,47,.08) !important;
  color:var(--card-accent) !important;
}
.growth-system-point .system-point-icon svg{stroke:var(--card-accent)}

/* --------------------------------------------------------------------------
   3. Full-screen mobile menu
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .nav.open{
    position:fixed;
    inset:0;
    top:0;left:0;right:0;
    height:100vh;
    height:100dvh;
    z-index:120;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    padding:88px 24px calc(40px + var(--dock-safe));
    border:0;
    border-radius:0;
    background:var(--grad-navy);
    box-shadow:none;
    overflow-y:auto;
    animation:navSheetIn .28s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes navSheetIn{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:none}
  }
  .nav.open a{
    padding:18px 4px;
    font-family:"Inter Tight",Arial,sans-serif;
    font-size:24px;
    font-weight:600;
    letter-spacing:-.02em;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .nav.open .mobile-menu-growth-cta{
    margin-top:28px;
    justify-content:center;
    font-size:16px;
    border-bottom:0;
  }
  /* Toggle stays tappable above the open sheet */
  body.menu-open .site-header{z-index:130}
  body.menu-open{overflow:hidden}
  body.menu-open .mobile-action-dock{display:none}
}
@media (max-width:719px) and (max-height:620px){
  .nav.open{justify-content:flex-start;padding-top:76px}
  .nav.open a{padding:14px 4px;font-size:19px}
}

/* Growth strip points were borderless rows on navy; as pastel cards they need
   their own spacing and radius. */
.growth-system-points{gap:10px}
.growth-system-point{
  padding:16px 14px;
  border-top:0;
  border-radius:14px;
}
@media (max-width:719px){
  .growth-system-point{padding:14px 12px;grid-template-columns:42px 1fr;gap:12px}
}

/* ==========================================================================
   V5 - PRIMARY CALL TO ACTION RETURNS TO MARIGOLD
   The original design used --accent (#F59E0B) for primary buttons. The v2
   gradient layer switched them to emerald; this restores orange on both
   desktop and mobile. Emerald stays as the supporting/system colour.
   ========================================================================== */
:root{
  --grad-accent:linear-gradient(135deg,#FBBF24 0%, #F59E0B 55%, #E8900A 100%);
  --ink-accent:#3A2405;
}
.btn-primary,
.dock-primary,
.promo-cta,
.wa-lead-submit,
.industry-insight-cta.btn-primary{
  background:var(--grad-accent)!important;
  background-image:var(--grad-accent)!important;
  color:var(--ink-accent)!important;
  border-color:transparent!important;
  box-shadow:0 10px 24px -10px rgba(245,158,11,.62);
}
.btn-primary:hover,
.dock-primary:hover,
.promo-cta:hover,
.wa-lead-submit:hover{
  background-image:linear-gradient(135deg,#F8B417 0%, #E8900A 55%, #D98209 100%)!important;
  box-shadow:0 14px 30px -10px rgba(245,158,11,.72);
}
/* On the navy panels the orange needs no glow to separate from the ground */
.audit-panel .btn-primary,
.system .btn-primary{box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}

/* Keep the marigold focus ring visible against a marigold button */
.btn-primary:focus-visible,
.dock-primary:focus-visible,
.promo-cta:focus-visible,
.wa-lead-submit:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:3px;
}
/* WhatsApp actions stay green: that colour is the platform's, not the brand's */
.wa-lead-submit{
  background:var(--grad-accent)!important;
}

/* ==========================================================================
   V6 - HERO SEARCH INLINE, SECTION RHYTHM, SIDE-PANEL MENU, SCROLL DOCK
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Search demo now sits inside the hero copy, between the sub-heading and
      the buttons. It has to be compact enough to keep the CTA above the fold.
   -------------------------------------------------------------------------- */
.hero-copy .search-demo{
  order:0;
  width:100%;
  margin:0 0 20px;
  padding:12px;
  border-radius:16px;
}
.hero-copy .search-demo .search-demo-phone{
  min-height:0;
  padding:10px;
  border-radius:13px;
}
.hero-copy .search-demo .search-demo-bar{height:42px;padding:0 12px}
.hero-copy .search-demo .sd-typed{font-size:14px}
.hero-copy .search-demo .sd-category{margin-top:9px;padding:4px 9px;font-size:9px}
.hero-copy .search-demo .search-demo-results{margin-top:9px;gap:6px}
.hero-copy .search-demo .sd-result{padding:9px 10px;border-radius:10px}
/* Two results are enough at hero size; the third only adds height */
.hero-copy .search-demo .sd-result:nth-child(3){display:none}
.hero-copy .search-demo .sd-result strong{font-size:13px}
.hero-copy .search-demo .sd-result small{font-size:11px}
.hero-copy .search-demo .sd-pin{width:22px;height:22px}
.hero-copy .search-demo .search-demo-lead{margin-top:9px;padding:9px 11px;font-size:12px}
.hero-copy .search-demo .sd-tick{width:17px;height:17px}
.hero-copy .search-demo .sd-tick::after{left:5px;top:4px;width:4px;height:8px}
.hero-copy .search-demo .search-demo-tap{top:74px}
.hero-copy .search-demo figcaption{margin-top:9px;font-size:9.5px}

/* Reserve just the compact height so rotating queries never shift the CTA */
.hero-copy .search-demo .search-demo-phone{min-height:196px}
@media (max-width:359px){
  .hero-copy .search-demo .search-demo-phone{min-height:206px}
  .hero-copy .search-demo .sd-badge{display:none}
}

/* --------------------------------------------------------------------------
   2. Mobile section rhythm - tighter, more even gaps between blocks
   -------------------------------------------------------------------------- */
@media (max-width:719px){
  .section{padding:44px 18px}
  .hero.section{padding-top:14px;padding-bottom:28px}
  .industry-selector{margin-top:30px;padding-top:30px}
  .growth-system-strip{margin-top:22px}
  .testimonials-section{padding-top:38px;padding-bottom:38px}
  .final-cta{padding:52px 18px}
  .system{padding-top:48px;padding-bottom:48px}
  .audit{padding-top:34px;padding-bottom:34px}
  .section-heading{margin-bottom:24px}
  .problem-grid,.industry-grid,.voice-grid,.how-work-grid,.outcome-list{gap:12px}
  .case-card{margin-top:20px;padding:20px}
  .funnel-card{padding:14px;gap:8px}
  .calculator-section{gap:22px}
  footer{padding:36px 18px calc(96px + var(--dock-safe))}
}
@media (max-width:359px){
  .section{padding:38px 15px}
  .final-cta{padding:44px 15px}
}

/* --------------------------------------------------------------------------
   3. Hamburger opens a full-height vertical side panel
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .nav.open{
    position:fixed;
    top:0;
    right:0;
    left:auto;
    bottom:0;
    height:100vh;
    height:100dvh;
    width:min(78vw,340px);
    z-index:120;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    padding:96px 22px calc(28px + var(--dock-safe));
    border:0;
    border-left:1px solid rgba(52,211,153,.20);
    border-radius:0;
    background:var(--grad-navy);
    box-shadow:-24px 0 60px -20px rgba(3,10,22,.8);
    overflow-y:auto;
    overscroll-behavior:contain;
    animation:navPanelIn .3s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes navPanelIn{
    from{transform:translateX(100%)}
    to{transform:none}
  }
  .nav.open a{
    padding:16px 2px;
    font-family:"Inter Tight",Arial,sans-serif;
    font-size:19px;
    font-weight:600;
    letter-spacing:-.015em;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .nav.open .mobile-menu-growth-cta{
    margin-top:22px;
    justify-content:center;
    font-size:15px;
    border-bottom:0;
  }
  /* Scrim behind the panel */
  body.menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:110;
    background:rgba(4,12,24,.58);
    backdrop-filter:blur(3px);
    animation:navScrimIn .3s ease both;
  }
  @keyframes navScrimIn{from{opacity:0}to{opacity:1}}
  body.menu-open .site-header{z-index:130}
  body.menu-open{overflow:hidden}
  body.menu-open .mobile-action-dock{display:none}
}
/* Tablets: a true half-width panel has room to breathe */
@media (min-width:600px) and (max-width:999px){
  .nav.open{width:min(50vw,420px);padding-top:104px}
  .nav.open a{font-size:21px}
}
@media (max-width:719px) and (max-height:620px){
  .nav.open{padding-top:82px}
  .nav.open a{padding:12px 2px;font-size:17px}
}

/* --------------------------------------------------------------------------
   4. Bottom dock reveals once the reader is past half the first screen
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .mobile-action-dock{
    transform:translateY(115%);
    opacity:0;
    visibility:hidden;
    transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .26s ease, visibility .32s;
  }
  body.dock-visible .mobile-action-dock{
    transform:none;
    opacity:1;
    visibility:visible;
  }
}
@media (prefers-reduced-motion:reduce){
  .mobile-action-dock{transition:none}
}

/* Hero-inline search demo: strip everything that is not load-bearing so the
   primary CTA still lands above the fold once the demo sits in the copy block. */
@media (max-width:719px){
  .hero-copy .search-demo{margin-bottom:14px;padding:10px}
  .hero-copy .search-demo figcaption{display:none}
  .hero-copy .search-demo .sd-category{display:none}
  .hero-copy .search-demo .search-demo-phone{min-height:0;padding:9px}
  .hero-copy .search-demo .search-demo-tap{top:62px}
  .hero-copy h1{margin-bottom:14px}
  .hero-sub{margin-bottom:16px}
  .hero-actions{margin-bottom:14px}
}
/* Small phones: the single top result carries the story on its own */
@media (max-width:389px){
  .hero-copy .search-demo .sd-result:nth-child(2){display:none}
  .hero-copy .search-demo .search-demo-bar{height:40px}
}

/* ==========================================================================
   V7 - SEARCH FIRST ON MOBILE, HALF-WIDTH SIDE PANEL, SCROLL-UP DOCK
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. On mobile the search animation leads the hero, above the headline.
      .hero-copy is a flex column below 720px, so ordering is enough.
   -------------------------------------------------------------------------- */
@media (max-width:719px){
  .hero-copy .search-demo{order:-1;margin:0 0 18px}
  .hero-kicker-row{order:0}
  .hero-copy h1{order:1}
  .hero-sub{order:2}
  .hero-actions{order:3}
  .hero-trust-strip{order:4}
}

/* --------------------------------------------------------------------------
   2. Half-width vertical side panel on every mobile size
      The nav is moved to <body> on open (see script.js) so no ancestor
      filter or transform can trap the fixed positioning.
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .nav.open{
    position:fixed;
    top:0;
    right:0;
    left:auto;
    bottom:0;
    height:100vh;
    height:100dvh;
    width:50vw;
    min-width:150px;
    max-width:420px;
    z-index:1400;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    padding:88px 16px calc(24px + var(--dock-safe));
    border:0;
    border-left:1px solid rgba(52,211,153,.22);
    border-radius:0;
    background:var(--grad-navy);
    box-shadow:-24px 0 60px -20px rgba(3,10,22,.85);
    overflow-y:auto;
    overscroll-behavior:contain;
    animation:navPanelIn .3s cubic-bezier(.4,0,.2,1) both;
  }
  .nav.open a{
    padding:14px 2px;
    font-family:"Inter Tight",Arial,sans-serif;
    font-size:15px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.01em;
    hyphens:none;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .nav.open .mobile-menu-growth-cta{
    margin-top:18px;
    padding:12px 8px;
    justify-content:center;
    text-align:center;
    font-size:13px;
    line-height:1.25;
    min-height:48px;
    border-bottom:0;
  }
  /* Scrim sits under the panel, over everything else */
  body.menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1390;
    background:rgba(4,12,24,.6);
    backdrop-filter:blur(3px);
    animation:navScrimIn .3s ease both;
  }
  body.menu-open .site-header{z-index:1410}
  body.menu-open .mobile-action-dock{display:none}
}
@media (min-width:600px) and (max-width:999px){
  .nav.open{padding-top:100px;padding-inline:22px}
  .nav.open a{font-size:19px;padding:16px 2px}
  .nav.open .mobile-menu-growth-cta{font-size:15px}
}
@media (max-width:719px) and (max-height:620px){
  .nav.open{padding-top:76px}
  .nav.open a{padding:11px 2px;font-size:14px}
}

/* --------------------------------------------------------------------------
   3. Dock appears on scroll up, hides on scroll down
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .mobile-action-dock{
    transform:translateY(125%);
    opacity:0;
    visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .24s ease, visibility .3s;
  }
  body.dock-visible .mobile-action-dock{
    transform:none;
    opacity:1;
    visibility:visible;
  }
}

/* Narrowest phones: a true 50% panel is 160px, so the labels step down a size
   rather than the panel stepping out of proportion. */
@media (max-width:359px){
  .nav.open{padding-left:13px;padding-right:13px}
  .nav.open a{font-size:13.5px;padding:12px 2px}
  .nav.open .mobile-menu-growth-cta{font-size:12px;padding:11px 6px}
}

/* ==========================================================================
   V7 - MOBILE HERO ORDER, TRUE HALF-WIDTH PANEL, SCROLL-UP DOCK
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mobile hero order: kicker, search animation, headline, sub, buttons.
      .hero-copy is already a flex column on mobile, so order alone does it and
      the DOM order (better for reading order on desktop) is left alone.
   -------------------------------------------------------------------------- */
@media (max-width:719px){
  .hero-copy{display:flex;flex-direction:column}
  .hero-copy .hero-kicker-row{order:1;margin-bottom:12px}
  .hero-copy .search-demo{order:2;margin:0 0 18px}
  .hero-copy h1{order:3;margin-bottom:12px}
  .hero-copy .hero-sub{order:4;margin-bottom:16px}
  .hero-copy .hero-actions{order:5;margin-bottom:14px}
  .hero-copy .hero-trust-strip{order:6}
}

/* --------------------------------------------------------------------------
   2. Hamburger: full-height, half-width vertical panel
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .nav.open{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:50vw !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:120;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start;
    padding:92px 16px calc(24px + var(--dock-safe)) !important;
    border:0;
    border-left:1px solid rgba(52,211,153,.22);
    border-radius:0 !important;
    background:var(--grad-navy);
    box-shadow:-24px 0 60px -20px rgba(3,10,22,.85);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav.open a{
    padding:14px 2px;
    font-family:"Inter Tight",Arial,sans-serif;
    font-size:16px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.015em;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .nav.open .mobile-menu-growth-cta{
    margin-top:18px;
    padding:12px 10px;
    justify-content:center;
    text-align:center;
    font-size:13px;
    line-height:1.25;
    border-bottom:0;
  }
}
/* Narrow phones: half of 320px is only 160px, so trim the type to suit */
@media (max-width:379px){
  .nav.open{padding-left:13px !important;padding-right:13px !important}
  .nav.open a{font-size:14px;padding:12px 2px}
  .nav.open .mobile-menu-growth-cta{font-size:12px;padding:11px 6px}
}
@media (min-width:600px) and (max-width:999px){
  .nav.open{padding-top:104px !important}
  .nav.open a{font-size:20px;padding:16px 2px}
  .nav.open .mobile-menu-growth-cta{font-size:15px}
}
@media (max-width:719px) and (max-height:620px){
  .nav.open{padding-top:80px !important}
  .nav.open a{padding:10px 2px;font-size:14px}
}

/* ==========================================================================
   V7 - HERO ORDER, SIDE PANEL WIDTH, SCROLL-DIRECTION DOCK
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DOM order is mobile-first: kicker, search demo, headline, sub, buttons.
      From 1000px up the headline should still lead, so the demo is reordered
      visually to sit under the sub-heading.
   -------------------------------------------------------------------------- */
@media (min-width:1000px){
  .hero-copy{display:flex;flex-direction:column}
  .hero-copy .hero-kicker-row{order:1}
  .hero-copy h1{order:2}
  .hero-copy .hero-sub{order:3}
  .hero-copy .search-demo{order:4;margin-bottom:22px}
  .hero-copy .hero-actions{order:5}
  .hero-copy .hero-trust-strip{order:6}
}
@media (max-width:719px){
  /* Search demo leads the page, so it needs a little air under the kicker */
  .hero-copy .hero-kicker-row{margin-bottom:12px}
  .hero-copy .search-demo{margin-bottom:18px}
  .hero-copy h1{margin-bottom:14px}
}

/* --------------------------------------------------------------------------
   2. Side panel: a standard vertical drawer, wider than half, never full
   -------------------------------------------------------------------------- */
@media (max-width:999px){
  .nav.open{
    width:68vw;
    min-width:250px;
    max-width:330px;
  }
}
@media (min-width:600px) and (max-width:999px){
  .nav.open{width:56vw;max-width:400px}
}

/* ==========================================================================
   V7b - SIDE PANEL: single authoritative width
   Earlier passes left several competing .nav.open blocks, one of which used
   "width:50vw!important; max-width:none!important" and beat everything after
   it. This is the one definition that governs the drawer width. It must stay
   last in the file.
   ========================================================================== */
@media (max-width:999px){
  .nav.open{
    width:68vw !important;
    min-width:255px !important;
    max-width:340px !important;
  }
}
@media (min-width:600px) and (max-width:999px){
  .nav.open{
    width:56vw !important;
    max-width:400px !important;
  }
}

/* ==========================================================================
   V8 - HERO ORDER + FLAT PASTEL CARDS
   ========================================================================== */

/* Hero DOM order is kicker, headline, search demo, sub, buttons.
   Desktop keeps the demo below the sub-heading. */
@media (min-width:1000px){
  .hero-copy h1{order:2}
  .hero-copy .search-demo{order:4}
  .hero-copy .hero-sub{order:3}
}
@media (max-width:719px){
  .hero-copy h1{margin-bottom:16px}
  .hero-copy .search-demo{margin-bottom:16px}
  .hero-sub{margin-bottom:16px}
}

/* --------------------------------------------------------------------------
   Remove the dark accent bar across the top of the pastel cards.
   The tint alone carries the grouping; the bar read as a stray dark line.
   -------------------------------------------------------------------------- */
.problem-card::after,
.industry-grid article::after,
.work-step::after,
.voice-card::after,
.growth-system-point::after{
  content:none !important;
  display:none !important;
}
.problem-card,
.industry-grid article,
.work-step,
.voice-card,
.growth-system-point{
  border-top:0 !important;
  box-shadow:0 8px 22px -20px rgba(10,25,47,.45);
}

/* ==========================================================================
   V8b - HERO ORDER: single authoritative source
   Earlier passes left competing flex-order rules on .hero-copy children, one
   of which pinned the search demo to order:2 (ahead of the headline). This
   block governs the order on every breakpoint and must stay last.
   ========================================================================== */
.hero-copy{display:flex;flex-direction:column}
.hero-copy .hero-kicker-row{order:1 !important}
.hero-copy h1{order:2 !important}
.hero-copy .search-demo{order:3 !important}
.hero-copy .hero-sub{order:4 !important}
.hero-copy .hero-actions{order:5 !important}
.hero-copy .hero-trust-strip{order:6 !important}

/* Desktop leads with the headline and sub, then the demo */
@media (min-width:1000px){
  .hero-copy .hero-sub{order:3 !important}
  .hero-copy .search-demo{order:4 !important}
}

/* ==========================================================================
   V9 - Breathing room above the hero kicker on mobile
   Earlier passes tightened .hero padding-top to 10-14px to win fold space.
   ========================================================================== */
@media (max-width:719px){
  .hero.section{padding-top:34px}
  .hero-copy .hero-kicker-row{margin-top:4px}
}
/* 320x720 has no spare room: keep the added margin smaller so the CTA
   still clears the fold. */
@media (max-width:359px){
  .hero.section{padding-top:18px}
}

/* ==========================================================================
   V10 - Mobile drawer hardening (must stay last)
   1. Size from the edges (top/bottom) instead of 100vh/100dvh. iOS Safari
      reports 100vh as the *expanded* viewport, so a vh-sized drawer runs
      under the browser chrome and its footer CTA is unreachable.
   2. The panel is portaled to <body> by script.js, so it no longer inherits
      the header's backdrop-filter containing block.
   ========================================================================== */
@media (max-width:999px){
  .nav.open{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    right:0 !important;
    left:auto !important;
    height:auto !important;
    max-height:none !important;
    z-index:1400 !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* Header must stay above the panel so the close toggle is reachable */
  body.menu-open .site-header{z-index:1500 !important}
  body.menu-open::before{z-index:1390 !important}

  /* iOS ignores overflow:hidden on <body> in some cases; block touch scroll
     on the page behind the drawer as well. */
  body.menu-open{overflow:hidden !important;touch-action:none}
  body.menu-open .mobile-action-dock{display:none !important}
}

/* ==========================================================================
   V11 - Fixed bottom dock spans the full width of the screen
   It previously floated with 8px insets and an 18px radius, leaving a strip
   of page visible down both sides and under it. Now it covers the outer panel
   edge to edge, with the safe-area inset filled rather than left open.
   ========================================================================== */
@media (max-width:999px){
  .mobile-action-dock{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-top:1px solid var(--border) !important;
    padding:10px 12px calc(10px + var(--dock-safe)) !important;
    gap:8px !important;
    background:#FFFFFF !important;
    box-shadow:0 -10px 28px -18px rgba(10,25,47,.55) !important;
  }
  .mobile-action-dock button,
  .mobile-action-dock a{
    min-height:50px;
    border-radius:12px;
  }
}

/* ==========================================================================
   V11 - Section rhythm and hero spacing
   Adjacent plain sections each contributed 44px of padding, so the visible
   gap between blocks was 88px on mobile. Dark blocks (system, audit, final
   CTA, testimonials) keep their own padding since it is inside a filled panel.
   ========================================================================== */
@media (max-width:719px){
  main > .section + .section:not(.system):not(.audit):not(.final-cta):not(.testimonials-section){
    padding-top:14px;
  }
  main > .section + .final-cta{margin-top:8px}
  /* Even 16px rhythm through the whole hero stack */
  .hero-copy .hero-kicker-row{margin-bottom:16px}
  .hero-copy h1{margin-bottom:16px}
  .hero-copy .search-demo{margin-bottom:16px}
  .hero-copy .hero-sub{margin-bottom:16px}
}

/* ==========================================================================
   V11 - New page visuals: industry icons, counters, timeline
   ========================================================================== */
.industry-card-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  margin-bottom:14px;
  border-radius:12px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(10,25,47,.08);
  color:var(--card-accent);
}
.industry-card-icon svg{width:22px;height:22px;display:block}
.industry-grid article{display:flex;flex-direction:column}
.industry-grid article>span{order:-1}

/* Count-up stats */
.counter-grid{display:grid;gap:14px}
.counter-card{
  padding:22px 20px;
  border-radius:18px;
  border:1px solid rgba(10,25,47,.07);
  background:var(--grad-mint);
  box-shadow:0 8px 22px -20px rgba(10,25,47,.45);
}
.counter-value{
  display:block;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:44px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.04em;
  color:#065F46;
  font-variant-numeric:tabular-nums;
}
.counter-card strong{
  display:block;
  margin-top:10px;
  font-family:"Inter Tight",Arial,sans-serif;
  font-size:18px;
  color:var(--primary);
}
.counter-card small{
  display:block;
  margin-top:6px;
  color:#3E4C5E;
  font-size:13.5px;
  line-height:1.5;
}
.counter-card:nth-child(2){background:linear-gradient(160deg,#EEF4FF 0%, #E1EBFA 100%)}
.counter-card:nth-child(2) .counter-value{color:#1F5E9E}
.counter-card:nth-child(3){background:linear-gradient(160deg,#FFF8EC 0%, #FDEFD6 100%)}
.counter-card:nth-child(3) .counter-value{color:#8A5A00}
.counter-note{
  margin:16px 0 0 !important;
  color:#6D7786 !important;
  font-family:"JetBrains Mono",monospace;
  font-size:11px !important;
  line-height:1.55 !important;
}
@media (min-width:720px){
  .counter-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .counter-value{font-size:52px}
}

/* Contact page timeline */
.next-steps-section{padding-top:8px}
.steps-figure{background:linear-gradient(168deg,#FFFFFF 0%, #F4F9FD 100%)}

/* Industries page search block */
.industries-search .search-demo{max-width:520px;margin-inline:auto}

/* Number and icon read better balanced across the card than stacked */
.industry-grid article{position:relative}
.industry-card-icon{
  position:absolute;
  top:20px;
  right:20px;
  margin:0;
}
@media (max-width:719px){
  .industry-card-icon{top:16px;right:16px;width:38px;height:38px}
  .industry-card-icon svg{width:20px;height:20px}
}

/* ==========================================================================
   V11 - Wide charts stay legible on mobile
   Scaling a 640px chart down to a 330px screen renders 11px labels at about
   6px. The figures instead hold a readable width and scroll horizontally,
   the same pattern already used for the testimonial and industry rails.
   ========================================================================== */
@media (max-width:719px){
  .chart-figure{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .chart-figure::-webkit-scrollbar{display:none}
  .chart-figure img{
    min-width:540px;
    width:540px;
    max-width:none;
  }
  .chart-figure figcaption{position:sticky;left:0;max-width:100%}
  /* Swipe affordance, matched to the existing rail hints */
  .chart-figure::after{
    content:"Swipe to see the full chart";
    position:sticky;
    left:0;
    display:block;
    margin-top:8px;
    color:#7A8593;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .loop-figure{overflow:visible}
  .loop-figure img{min-width:0;width:100%}
  .loop-figure::after{content:none}
}

/* ==========================================================================
   V12 - New Thrivelinkmedia logo
   The header and footer brand now use the interlocking-links mark. The text
   "Thrivelinkmedia" beside it is kept in the markup for screen readers and is
   hidden visually where the full lockup already carries the name.
   ========================================================================== */
.brand-mark{
  background:url("assets/logo-mark.svg") center/contain no-repeat !important;
  border-radius:0 !important;
  box-shadow:none !important;
  width:40px !important;
  height:38px !important;
}
.brand{gap:12px}
@media (max-width:719px){
  .brand-mark{width:34px !important;height:32px !important}
  .brand{font-size:17px;gap:10px}
}

/* ==========================================================================
   V13 - Brand lockup in the header and footer
   The markup is <a class="brand"><span class="brand-mark"></span><span>Name</span></a>.
   The mark span now carries the full lockup image and the text span is hidden
   visually (still read by screen readers, and the anchor keeps its aria-label).
   Desktop gets the full lockup with MEDIA; small screens get the compact
   lockup, where a tracked-out MEDIA would render too small to read.
   ========================================================================== */
.brand{gap:0}
.brand-mark{
  background:url("assets/logo-thrivelinkmedia-dark.svg") left center/contain no-repeat !important;
  width:212px !important;
  height:44px !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:0 !important;
  color:transparent !important;
  flex:none;
}
/* Keep the name available to assistive tech without showing it twice */
.brand > span:not(.brand-mark){
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
@media (max-width:719px){
  .brand-mark{
    background-image:url("assets/logo-compact-dark.svg") !important;
    width:168px !important;
    height:38px !important;
  }
}
@media (max-width:359px){
  .brand-mark{width:146px !important;height:34px !important}
}
/* The footer sits on the same navy, so the dark lockup carries over */
footer .brand-mark{background-image:url("assets/logo-thrivelinkmedia-dark.svg") !important}
@media (max-width:719px){
  footer .brand-mark{
    background-image:url("assets/logo-thrivelinkmedia-dark.svg") !important;
    width:196px !important;
    height:52px !important;
  }
}

/* At header scale a tracked-out MEDIA renders around 6px and reads as noise,
   so the header uses the compact lockup at every width. The full lockup with
   MEDIA is kept for the footer, where it has room to be legible. */
.site-header .brand-mark{
  background-image:url("assets/logo-compact-dark.svg") !important;
  width:180px !important;
  height:46px !important;
}
@media (max-width:719px){
  .site-header .brand-mark{width:156px !important;height:40px !important}
}
@media (max-width:359px){
  .site-header .brand-mark{width:138px !important;height:36px !important}
}
footer .brand-mark{width:236px !important;height:66px !important}
@media (max-width:719px){
  footer .brand-mark{width:208px !important;height:58px !important}
}

/* ==========================================================================
   V14 - MEDIA restored in the header + blank strip below the footer removed
   ========================================================================== */

/* The header now uses a tight lockup whose mark is scaled to the height of the
   text block, so MEDIA renders large enough to read at header size. */
.site-header .brand-mark{
  background-image:url("assets/logo-header-dark.svg") !important;
  width:196px !important;
  height:42px !important;
}
@media (max-width:719px){
  .site-header .brand-mark{width:172px !important;height:37px !important}
}
@media (max-width:359px){
  .site-header .brand-mark{width:150px !important;height:32px !important}
}

/* body carried 78px of bottom padding to clear the fixed dock, which left a
   pale strip below the navy footer. The footer already reserves that space in
   its own padding, so the body padding is dropped. */
body{padding-bottom:0}
@media (max-width:999px){
  footer{padding-bottom:calc(104px + var(--dock-safe)) !important}
}
@media (min-width:1000px){
  footer{padding-bottom:52px !important}
}

/* ==========================================================================
   V15 - TRANSPARENT DROP-DOWN MOBILE MENU
   Anchoring note: script.js portals .nav out of the header into <body> while
   it is open (V10, to escape the header's backdrop-filter containing block).
   So the panel cannot be positioned relative to the header - top:100% would
   resolve against <body> and land below the whole page.

   Instead the panel is position:fixed from the top of the viewport at a
   z-index BELOW the header, with padding-top clearing the header height. The
   header paints over the panel's top edge, so the menu reads as dropping out
   from behind it, and it stays put at any scroll position without depending
   on the header's measured height.
   ========================================================================== */
@media (max-width:999px){
  .nav.open{
    position:fixed;
    top:0; left:0; right:0; bottom:auto;
    inset:0 0 auto 0;
    z-index:50;                       /* header is 60 and paints over the top */
    isolation:isolate;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;

    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    padding:86px 18px calc(24px + var(--dock-safe));
    border:0;
    border-radius:0 0 20px 20px;

    background:rgba(10,25,47,.72);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 26px 54px -26px rgba(3,10,22,.8);

    animation:navDropIn .24s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes navDropIn{
    from{opacity:0;transform:translateY(-12px)}
    to{opacity:1;transform:none}
  }

  /* Dim the page behind the panel so links stay readable over any section */
  .nav.open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:rgba(3,10,22,.42);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }

  .nav.open a{
    padding:15px 6px;
    font-size:17px;
    font-weight:700;
    letter-spacing:-.01em;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .nav.open a:not(.mobile-menu-growth-cta){padding-left:14px}
  .nav.open .mobile-menu-growth-cta{margin-top:16px; padding:15px; font-size:15px; border-bottom:0}

  /* Keep the header above the panel and fully opaque while the menu is open */
  body.menu-open .site-header{z-index:130}

  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .nav.open{background:rgba(10,25,47,.97)}
    .nav.open::before{background:rgba(3,10,22,.55)}
  }
}
@media (max-width:719px){
  .nav.open{padding-top:80px}
}
@media (max-width:359px){
  .nav.open{padding-top:74px}
  .nav.open a{font-size:16px; padding:13px 6px}
}

/* ==========================================================================
   V16 - WHATSAPP LEAD CAPTURE SAFETY NET
   The section ships its own inlined CSS in growth.html. This only guarantees
   it can never be hidden by a reveal class inherited from the page.
   ========================================================================== */
.tlm-wa{display:block !important; opacity:1 !important; visibility:visible !important; transform:none !important}
.tlm-wa .phone,.tlm-wa .thread,.tlm-wa .side,.tlm-wa .stage{opacity:1 !important; visibility:visible !important}

/* ==========================================================================
   V17 - Sticky header reveal + dark-panel seam fix
   ========================================================================== */

/* --- header drops away going down, returns going up (mobile/tablet only) --- */
@media (max-width:999px){
  .site-header{
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  body.header-hidden .site-header{
    transform:translateY(-100%);
  }
  /* Never hide it mid-interaction */
  body.menu-open .site-header{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
}

/* --- the 8px section seam must not show as a light band between two
       navy panels. V11 adds `main > .section + .final-cta{margin-top:8px}`
       for rhythm between light blocks; where the preceding block is already
       dark the gap just exposes the page background. --- */
@media (max-width:719px){
  main > .system + .final-cta,
  main > .audit + .final-cta,
  main > .testimonials-section + .final-cta,
  main > .tlm-wa + .final-cta{
    margin-top:0;
  }
}

/* ==========================================================================
   V18 - Lead form field rhythm
   The step-3 submit button had no top margin anywhere in this file, so it sat
   flush against the Website input. Field labels also only received spacing
   below 719px (V3), leaving the fields tight on desktop - the opposite of
   what you want. The button gets noticeably more room than the fields sit
   apart, so "things you fill in" reads as separate from "the thing you press".
   ========================================================================== */
.lead-form .form-step label{display:block; margin-top:18px}
.lead-form .form-step label:first-of-type{margin-top:0}
.lead-form .form-step [type="submit"]{margin-top:26px}
.lead-form .form-step .back-link{margin-top:12px}

@media (max-width:719px){
  .lead-form .form-step label{margin-top:14px}
  .lead-form .form-step [type="submit"]{margin-top:20px}
}
@media (max-width:359px){
  .lead-form .form-step label{margin-top:12px}
  .lead-form .form-step [type="submit"]{margin-top:18px}
}

/* ==========================================================================
   V19 - Mobile display type uplift
   Hero headlines +6%, all other headings +15%, below 719px only. Every value
   is the original scaled through, clamps included, so the type still flexes
   with the viewport instead of snapping to one fixed size on every phone.
   Line-height is tightened slightly on h2 to absorb the larger size without
   the headline gaining an extra line.
   ========================================================================== */
@media (max-width:719px){
  /* hero +6% */
  h1{font-size:clamp(36px,9.8vw,55px)}

  /* everything else +15% */
  h2{font-size:clamp(32.2px,8.5vw,46px); line-height:1.06}
  h3{font-size:24.1px}
  .hero-lead-card h2{font-size:28.7px}
  .form-step h3{font-size:25.3px}
  .tlm-wa h2{font-size:clamp(32.2px,9.2vw,46px) !important}
}

@media (max-width:389px){
  /* hero +6% */
  h1{font-size:clamp(31.8px,9.1vw,42.4px)}
  .hero h1{font-size:clamp(41.3px,12.5vw,46.6px) !important}

  /* everything else +15% */
  h2{font-size:clamp(28.7px,8vw,36.8px)}
}

@media (max-width:359px){
  .form-step h3{font-size:23px}
}

/* Two rules outranked the block above on specificity, so they are scaled here
   by the same factors: the hero headline override (.hero-copy h1, +6%) and
   the growth-control panel heading (.live-board-head h3, +15%). */
@media (max-width:719px){
  .live-board-head h3{font-size:27.6px}
}
@media (max-width:389px){
  .hero-copy h1{font-size:clamp(38.2px,12.2vw,46.6px)}
}

/* The card and hero headings below carry their own sizes and outranked the
   bare h1/h3 rules on specificity, so each is scaled by the same factor:
   hero +6%, card headings +15%. Verified against the live cascade rather
   than assumed - these are the exact selectors that were winning. */
@media (max-width:719px){
  .hero-copy h1{font-size:clamp(42.4px,12.7vw,61.5px)}

  .outcome-row h3{font-size:32.2px}
  .problem-card h3,
  .industry-grid h3,
  .industry-grid article h3,
  .case-card h3,
  .voice-card h3,
  .work-step h3,
  .funnel-card h3{font-size:31.1px}
}

/* ==========================================================================
   V20 - Contact audit panel: mobile width + lead-in gap
   Two fixes, both scoped to phones so nothing above 720px moves.

   1) WIDTH. The lead form sat inside three stacked paddings - section 18px
      (V5) + panel 16px (V4) + form 14px (V3) = 48px of inset on each side.
      On a 390px screen that left the inputs and the two-column choice grid
      under 300px to share. Trimmed to an even 12/12/12 = 36px, which returns
      ~24px of usable row width and reads as one consistent nesting rhythm
      instead of three visible frames. The navy card still clears the screen
      edge, so its rounded corners and border stay intact.

   2) GAP. `.inner-hero + .section` (0,2,0) was adding 56px of top padding and
      outranked the `.audit{padding-top:34px}` rule (0,1,0) in V5, so with the
      hero's own 44px below it the two blocks sat ~100px apart. The audit
      section now opens at 24px for a ~68px lead-in, in line with the spacing
      between the other blocks on the page.
   ========================================================================== */
@media (max-width:719px){
  main > .inner-hero + .section.audit{
    padding-top:24px;
  }
  .section.audit{
    padding-left:12px;
    padding-right:12px;
  }
  .audit-panel{
    padding:24px 12px;
  }
  .lead-form{
    padding:18px 12px 16px;
  }
}

@media (max-width:389px){
  main > .inner-hero + .section.audit{
    padding-top:20px;
  }
  .section.audit{
    padding-left:10px;
    padding-right:10px;
  }
  .audit-panel{
    padding:22px 10px;
  }
  .lead-form{
    padding:16px 10px 14px;
  }
}