:root{
  --navy:#10233F;
  --navy-2:#16305A;
  --navy-3:#1D3E70;
  --sky:#3E8EDE;
  --sky-light:#EAF3FD;
  --gold:#D9A441;
  --gold-dark:#B9832B;
  --paper:#F6F4EF;
  --white:#FFFFFF;
  --ink:#16233A;
  --slate:#55617A;
  --slate-light:#8592AA;
  --coral:#E2643A;
  --coral-light:#FCEAE4;
  --green:#2E9E6B;
  --green-light:#E4F5EC;
  --line:#E4E1D8;
  --line-navy:rgba(255,255,255,0.14);
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:26px;
  --shadow-card:0 18px 40px -22px rgba(16,35,63,0.35);
  --shadow-card-hover:0 24px 48px -20px rgba(16,35,63,0.42);
  --max:1180px;
  --max-narrow:920px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:var(--max-narrow);margin:0 auto;padding:0 24px;}
.quote-serif{font-family:'Lora',serif;font-style:italic;}

/* Screen-reader-only utility (accessible labels that don't change the visual design) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

h1,h2,h3,h4{margin:0;font-family:'Plus Jakarta Sans',sans-serif;color:var(--navy);line-height:1.16;}
h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:900;letter-spacing:-0.01em;}
h2{font-size:clamp(1.7rem,3vw,2.35rem);font-weight:800;letter-spacing:-0.01em;}
h3{font-size:1.18rem;font-weight:800;}
p{margin:0;color:var(--slate);}
.label{
  display:inline-block;
  font-size:0.86rem;
  font-weight:700;
  color:var(--sky);
  background:var(--sky-light);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:800;
  font-size:0.98rem;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(217,164,65,0.55);}
.btn-outline-light{border-color:rgba(255,255,255,0.55);color:var(--white);}
.btn-outline-light:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);}
.btn-outline-navy{border-color:var(--navy);color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy);color:var(--white);transform:translateY(-2px);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:10px 18px;font-size:0.86rem;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(16,35,63,0.97);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-navy);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  gap:20px;
}
.logo{
  font-weight:900;color:var(--white);font-size:1.15rem;text-decoration:none;
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);}
.topnav{display:flex;align-items:center;gap:26px;flex:1 1 auto;justify-content:center;}
.topnav a{color:#C9D6EA;font-weight:700;font-size:0.9rem;text-decoration:none;}
.topnav a:hover{color:var(--white);}
.topbar-actions{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.topbar-phone{
  color:#C9D6EA;font-weight:700;font-size:0.92rem;text-decoration:none;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.topbar-phone svg{width:16px;height:16px;stroke:var(--gold);flex:0 0 auto;}
@media(max-width:900px){ .topnav{display:none;} }
@media(max-width:640px){ .topbar-phone{display:none;} }

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{background:var(--paper);border-bottom:1px solid var(--line);padding:10px 0;}
.breadcrumb-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0;padding:0;font-size:0.82rem;font-weight:600;color:var(--slate);}
.breadcrumb-list a{color:var(--slate);text-decoration:none;}
.breadcrumb-list a:hover{color:var(--sky);}
.breadcrumb-list li[aria-current="page"]{color:var(--navy);font-weight:800;}
.breadcrumb-sep{color:var(--slate-light);}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--sky-light) 0%, var(--paper) 55%, var(--white) 100%);
  color:var(--ink);
  padding:60px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;width:440px;height:440px;border-radius:50%;
  background:var(--sky);opacity:0.16;filter:blur(90px);top:-160px;right:-100px;
}
.hero::after{
  content:"";position:absolute;width:360px;height:360px;border-radius:50%;
  background:var(--gold);opacity:0.18;filter:blur(90px);bottom:-160px;left:-100px;
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;
}
@media(max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:44px;} }
.hero-left{text-align:left;}
@media(max-width:960px){ .hero-left{text-align:center;} }

.hero-eyebrow{
  display:inline-block;color:var(--navy);font-weight:800;font-size:0.9rem;margin-bottom:14px;
  background:var(--white);border:1px solid var(--line);padding:7px 16px;border-radius:999px;
}
.hero h1{color:var(--navy);}
.hero h1 .accent{color:var(--gold-dark);}
.hero-sub{color:var(--slate);font-size:1.08rem;max-width:52ch;margin:18px 0 0;}
@media(max-width:960px){ .hero-sub{margin:18px auto 0;} }

.person-card{
  margin:30px 0 0;max-width:520px;
  display:flex;gap:16px;align-items:flex-start;text-align:left;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:18px 20px;
  box-shadow:var(--shadow-card);
}
@media(max-width:960px){ .person-card{margin:30px auto 0;} }
.avatar{
  flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  background:conic-gradient(from 210deg, var(--sky), var(--gold), var(--sky));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--navy);font-size:1.1rem;
  border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--line);
}
.person-name{color:var(--navy);font-weight:800;font-size:1.05rem;}
.person-role{color:var(--sky);font-weight:700;font-size:0.86rem;margin-top:2px;}
.person-quote{margin-top:8px;color:var(--ink);font-size:0.98rem;}

.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;justify-content:flex-start;}
@media(max-width:960px){ .hero-ctas{justify-content:center;} }

.hero-note{margin-top:18px;color:var(--slate-light);font-size:0.85rem;display:flex;align-items:center;gap:8px;justify-content:flex-start;}
@media(max-width:960px){ .hero-note{justify-content:center;} }
.hero-note svg{width:15px;height:15px;stroke:var(--gold-dark);flex:0 0 auto;}

/* Hero form card (right side) */
.hero-form-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:30px 28px;
  box-shadow:0 30px 60px -24px rgba(16,35,63,0.28);
  text-align:center;
}
.hfc-badge{
  display:inline-block;background:var(--sky-light);color:var(--sky);
  font-weight:800;font-size:0.78rem;padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
.hero-form-card h3{margin-bottom:6px;}
.hero-form-card > p{font-size:0.92rem;margin-bottom:20px;}
.hero-form-card form{display:flex;flex-direction:column;gap:12px;text-align:left;}
.hero-form-card input,.hero-form-card select{
  padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:0.92rem;
  width:100%;appearance:none;
}
.hero-form-card select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355617A' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;
}
.hero-form-card input::placeholder{color:var(--slate-light);}
.hero-form-card input:focus,.hero-form-card select:focus{outline:2px solid var(--sky);background-color:var(--white);}
.hfc-trustline{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:0.8rem;font-weight:700;color:var(--slate);text-align:center;
}
.hfc-trustline svg{width:15px;height:15px;stroke:var(--gold-dark);flex:0 0 auto;}

/* ---------- Eye-catching trial CTA button ---------- */
.btn-trial{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 24px 10px 10px;border-radius:999px;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color:var(--navy);text-decoration:none;
  box-shadow:0 16px 32px -14px rgba(217,164,65,0.6);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-trial:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(217,164,65,0.7);}
.btn-trial-badge{
  background:var(--navy);color:var(--white);font-weight:900;font-size:0.78rem;
  padding:9px 12px;border-radius:999px;white-space:nowrap;flex:0 0 auto;
}
.btn-trial-text{font-weight:800;font-size:1rem;line-height:1.25;text-align:left;}
.btn-trial-text small{display:block;font-weight:600;font-size:0.72rem;color:#3B2A0E;opacity:0.75;}

/* ---------- Trust strip ---------- */
.trust{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.trust-row{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
}
.trust-item{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:800;font-size:0.92rem;}
.trust-item svg{width:20px;height:20px;stroke:var(--sky);flex:0 0 auto;}
@media(max-width:760px){ .trust-row{justify-content:flex-start;} }

/* ---------- Section shell ---------- */
.section{padding:88px 0;}
.section.tight{padding:64px 0;}
.section.alt{background:var(--paper);}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.section-head.left{text-align:left;margin:0 0 40px;max-width:640px;}
.section-head p{margin-top:14px;font-size:1.04rem;}

/* ---------- Capabilities ---------- */
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:900px){ .cap-grid{grid-template-columns:1fr;} }
.cap-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:30px 28px;box-shadow:var(--shadow-card);
}
.cap-card-gold{border-color:var(--gold);box-shadow:0 24px 46px -20px rgba(217,164,65,0.35);}
.cap-card-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;}
.cap-ico{
  flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:var(--sky-light);
  display:flex;align-items:center;justify-content:center;
}
.cap-card-gold .cap-ico{background:#FBF3E4;}
.cap-ico svg{width:22px;height:22px;stroke:var(--sky);}
.cap-card-gold .cap-ico svg{stroke:var(--gold-dark);}
.cap-card-head p{font-size:0.88rem;margin-top:4px;}
.cap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.cap-list li{
  position:relative;padding:11px 0 11px 26px;font-size:0.93rem;font-weight:600;color:var(--ink);
  border-top:1px solid var(--line);
}
.cap-list li:first-child{border-top:none;}
.cap-list li::before{
  content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border-radius:50%;background:var(--sky);
}
.cap-card-gold .cap-list li::before{background:var(--gold-dark);}

/* ---------- Who this is for (chip strip) ---------- */
.who-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.who-chip{
  display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:11px 20px 11px 14px;font-weight:700;font-size:0.9rem;color:var(--navy);
}
.who-chip .who-ico{
  width:26px;height:26px;border-radius:50%;background:var(--sky-light);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.who-chip svg{width:14px;height:14px;stroke:var(--sky);}

/* ---------- Role snapshot (job-posting style) ---------- */
.role-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.role-card-head{
  background:var(--navy);color:var(--white);padding:26px 32px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;
}
.role-card-head h3{color:var(--white);font-size:1.3rem;}
.role-card-head .role-alt{color:#9FB6DA;font-size:0.86rem;margin-top:4px;}
.role-status{
  background:rgba(217,164,65,0.18);color:var(--gold);font-weight:800;font-size:0.8rem;
  padding:7px 14px;border-radius:999px;white-space:nowrap;
}
.role-body{padding:24px 32px 6px;}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
@media(max-width:640px){ .role-grid{grid-template-columns:1fr;} }
.role-item{background:var(--white);padding:16px 18px;}
.role-key{font-weight:800;color:var(--slate-light);font-size:0.74rem;text-transform:uppercase;letter-spacing:0.03em;}
.role-val{font-weight:800;color:var(--navy);font-size:1rem;margin-top:4px;}
.role-val span{display:block;font-weight:500;color:var(--slate);font-size:0.82rem;margin-top:3px;line-height:1.4;}
.role-cta-row{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  padding:26px 32px 32px;background:var(--paper);border-top:1px solid var(--line);
}

/* ---------- Track record ---------- */
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:860px){ .track-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .track-grid{grid-template-columns:1fr;} }
.track-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:22px 20px;text-align:center;
}
.track-card .track-num{font-weight:900;color:var(--navy);font-size:1.5rem;}
.track-card .track-desc{font-size:0.86rem;color:var(--slate);margin-top:6px;}



/* ---------- Role scope ---------- */
.scope-alsoknown{font-size:0.92rem;color:var(--slate);margin-top:-6px;margin-bottom:36px;text-align:center;max-width:720px;margin-left:auto;margin-right:auto;}
.scope-alsoknown b{color:var(--navy);}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
@media(max-width:860px){ .scope-grid{grid-template-columns:1fr;} }
.scope-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:28px 26px;text-align:center;
  display:flex;flex-direction:column;
}
.scope-card.skills{background:var(--paper);}
.scope-card h3{margin-bottom:4px;}
.scope-card .scope-sub{font-size:0.86rem;color:var(--slate);margin-bottom:20px;}
.scope-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;align-content:start;flex:1 1 auto;}
@media(max-width:520px){ .scope-tile-grid{grid-template-columns:1fr;} }
.scope-tile{
  background:var(--sky-light);border-radius:12px;padding:14px 15px;
}
.scope-card.senior .scope-tile{background:#FBF3E4;}
.scope-tile .tile-icon{
  width:28px;height:28px;border-radius:8px;background:var(--white);
  display:flex;align-items:center;justify-content:center;margin-bottom:9px;
  box-shadow:0 2px 6px rgba(16,35,63,0.08);
}
.scope-tile svg{width:15px;height:15px;stroke:var(--sky);}
.scope-card.senior .scope-tile svg{stroke:var(--gold-dark);}
.scope-tile strong{display:block;font-weight:800;color:var(--navy);font-size:0.9rem;margin-bottom:3px;}
.scope-tile p{font-size:0.8rem;color:var(--slate);line-height:1.5;}
.scope-tile.wide{grid-column:1 / -1;}
.scope-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left;}
.scope-list li{
  display:flex;gap:10px;font-size:0.9rem;font-weight:600;color:var(--ink);align-items:center;
  background:var(--sky-light);border-radius:12px;padding:11px 14px;
}
.scope-list svg{width:16px;height:16px;stroke:var(--sky);flex:0 0 auto;}
.scope-card.skills .scope-list li{background:var(--green-light);}
.scope-card.skills .scope-list svg{stroke:var(--green);}

/* ---------- Simple scope cards (day-to-day) ---------- */
.simple-scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
@media(max-width:940px){ .simple-scope-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .simple-scope-grid{grid-template-columns:1fr;} }
.simple-scope-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:26px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);
}
.simple-scope-card.gold{border-color:var(--gold);box-shadow:0 22px 44px -20px rgba(217,164,65,0.32);}
.simple-scope-card .ssc-ico{
  width:44px;height:44px;border-radius:12px;background:var(--sky-light);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.simple-scope-card.gold .ssc-ico{background:#FBF3E4;}
.simple-scope-card .ssc-ico svg{width:20px;height:20px;stroke:var(--sky);}
.simple-scope-card.gold .ssc-ico svg{stroke:var(--gold-dark);}
.simple-scope-card h3{font-size:1.06rem;}
.simple-scope-card .ssc-sub{font-size:0.84rem;color:var(--slate);margin-top:4px;margin-bottom:16px;}
.ssc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1 1 auto;}
.ssc-list li{
  display:flex;gap:9px;align-items:flex-start;font-size:0.9rem;font-weight:600;color:var(--ink);line-height:1.45;
}
.ssc-list svg{width:16px;height:16px;stroke:var(--sky);flex:0 0 auto;margin-top:2px;}
.simple-scope-card.gold .ssc-list svg{stroke:var(--gold-dark);}

/* ---------- Pain points ---------- */
.pain-list{display:flex;flex-direction:column;gap:18px;}
.pain-row{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.pain-row:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);}
@media(max-width:760px){ .pain-row{grid-template-columns:1fr;} }

.pain-side{padding:26px 28px;text-align:center;}
.pain-before{background:var(--coral-light);}
.pain-after{background:var(--green-light);}
.pain-kicker{
  font-size:0.76rem;font-weight:800;letter-spacing:0.02em;margin-bottom:8px;
}
.pain-before .pain-kicker{color:var(--coral);}
.pain-after .pain-kicker{color:var(--green);}
.pain-title{font-weight:800;color:var(--navy);font-size:1.02rem;margin-bottom:6px;}
.pain-side p{font-size:0.94rem;}



/* ---------- Contact hub ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.contact-ico{
  width:48px;height:48px;border-radius:50%;background:var(--sky-light);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.contact-ico svg{width:22px;height:22px;stroke:var(--sky);}
.contact-tile.wa .contact-ico{background:var(--green-light);}
.contact-tile.wa .contact-ico svg{stroke:var(--green);}
.contact-tile.mail .contact-ico{background:#FBF3E4;}
.contact-tile.mail .contact-ico svg{stroke:var(--gold-dark);}
.contact-tile h3{font-size:1.02rem;}
.contact-tile p{font-size:0.88rem;}
.contact-meta{font-weight:800;color:var(--navy);font-size:0.9rem;}

/* ---------- Tools ---------- */
.tools-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.tool-chip{
  padding:10px 18px;border-radius:999px;background:var(--white);
  border:1px solid var(--line);font-weight:700;font-size:0.9rem;color:var(--navy);
  display:flex;align-items:center;gap:8px;
}
.tool-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--sky);}
.tools-group{margin-bottom:22px;}
.tools-group:last-of-type{margin-bottom:0;}
.tools-group-label{text-align:center;font-weight:800;color:var(--navy);font-size:0.84rem;margin-bottom:14px;}
.tools-footnote{text-align:center;font-size:0.86rem;color:var(--slate);margin-top:26px;max-width:56ch;margin-left:auto;margin-right:auto;}

/* ---------- Comparison table ---------- */
.compare-wrap{
  overflow:visible;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  position:relative;
}
table.compare{width:100%;border-collapse:collapse;background:var(--white);min-width:560px;}
table.compare th,table.compare td{padding:16px 18px;font-size:0.92rem;text-align:center;}
table.compare thead th{background:var(--paper);color:var(--navy);font-weight:800;border-bottom:1px solid var(--line);}
table.compare thead th:first-child{text-align:left;}
table.compare thead th.col-me{background:#FBF3E4;color:var(--gold-dark);}
table.compare tbody td:first-child{text-align:left;font-weight:700;color:var(--navy);background:var(--paper);}
table.compare tbody td.col-me{background:#FEFBF4;font-weight:700;color:var(--navy);}
table.compare tbody tr:not(:last-child) td{border-bottom:1px solid var(--line);}
table.compare td.col-inhouse{color:var(--slate);}
table.compare thead th.col-me{position:relative;}
.compare-crown{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--navy);font-weight:800;font-size:0.68rem;
  padding:4px 12px;border-radius:999px;white-space:nowrap;
}
.cell-check{display:inline-flex;align-items:center;gap:7px;justify-content:center;}
.cell-check svg{width:16px;height:16px;stroke:var(--green);flex:0 0 auto;}
.compare-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;}
@media(max-width:760px){ .compare-summary{grid-template-columns:1fr;} }
.compare-stat{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:18px 20px;text-align:center;
}
.compare-stat .cs-num{font-weight:900;color:var(--navy);font-size:1.3rem;}
.compare-stat .cs-lbl{font-size:0.82rem;color:var(--slate);margin-top:4px;}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:900px){ .pricing-grid{grid-template-columns:1fr;} }
.price-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:30px 26px;box-shadow:var(--shadow-card);position:relative;text-align:center;
  display:flex;flex-direction:column;
}
.price-card.featured{
  border-color:var(--gold);
  box-shadow:0 26px 50px -20px rgba(217,164,65,0.4);
}
.price-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);
  font-weight:800;font-size:0.72rem;padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.price-hours{font-size:0.85rem;font-weight:700;color:var(--slate);}
.price-num{font-size:1.5rem;font-weight:900;color:var(--navy);margin:6px 0 4px;min-height:2.1rem;display:flex;align-items:center;justify-content:center;}
.price-best{
  display:flex;gap:8px;align-items:flex-start;text-align:left;
  background:var(--paper);border-radius:10px;padding:10px 12px;margin:14px 0 4px;
}
.price-card.featured .price-best{background:#FEFBF4;}
.price-best svg{width:15px;height:15px;stroke:var(--sky);flex:0 0 auto;margin-top:2px;}
.price-card.featured .price-best svg{stroke:var(--gold-dark);}
.price-best span{font-size:0.78rem;font-weight:700;color:var(--navy);line-height:1.45;}
.price-list{list-style:none;margin:16px 0 4px;padding:0;display:flex;flex-direction:column;gap:7px;text-align:left;flex:1 1 auto;}
.price-list li{
  display:flex;gap:9px;font-size:0.86rem;font-weight:600;color:var(--ink);align-items:flex-start;
  background:var(--green-light);border-radius:10px;padding:8px 12px;line-height:1.4;
}
.price-card.featured .price-list li{background:#FBF3E4;}
.price-list svg{width:15px;height:15px;stroke:var(--green);flex:0 0 auto;margin-top:2px;}
.price-card.featured .price-list svg{stroke:var(--gold-dark);}
.price-note{font-size:0.78rem;color:var(--slate);font-style:italic;text-align:left;margin:16px 0 20px;line-height:1.5;}
.price-card-foot{margin-top:auto;}

/* ---------- Testimonials (marquee) ---------- */
.testi-section .wrap{margin-bottom:40px;}
.marquee-wrap{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  margin-bottom:18px;
}
.marquee-row{display:flex;gap:20px;width:max-content;animation:marqueeLeft 38s linear infinite;padding:4px 0;}
.marquee-row.reverse{animation-name:marqueeRight;}
.marquee-row:hover{animation-play-state:paused;}
@keyframes marqueeLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marqueeRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media(prefers-reduced-motion:reduce){ .marquee-row{animation:none;} }
.testi-card{
  flex:0 0 320px;width:320px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:24px;box-shadow:var(--shadow-card);text-align:left;
}
.testi-stars{color:var(--gold);font-size:0.9rem;margin-bottom:12px;letter-spacing:2px;}
.testi-card p.quote-serif{color:var(--ink);font-size:0.98rem;}
.testi-who{margin-top:16px;display:flex;align-items:center;gap:12px;}
.testi-avatar{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85rem;
}
.testi-name{font-weight:800;color:var(--navy);font-size:0.9rem;}
.testi-role{font-size:0.78rem;color:var(--slate-light);}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto;}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--white);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-weight:800;color:var(--navy);font-size:0.98rem;font-family:inherit;
}
.faq-q .plus{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--sky);
  display:flex;align-items:center;justify-content:center;color:var(--sky);font-weight:900;
  transition:transform .2s ease;
}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a-inner{padding:0 20px 18px;font-size:0.95rem;color:var(--slate);}

/* ---------- Final CTA ---------- */
.final-cta{
  background:linear-gradient(135deg, var(--sky-light) 0%, #FBF3E4 100%);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:var(--radius-l);
  padding:52px;
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:38px;
  align-items:start; /* prevents the form from stretching to match the info column */
}
@media(max-width:900px){ .final-cta{grid-template-columns:1fr;padding:34px;} }
.final-cta-info{text-align:left;display:flex;flex-direction:column;}
@media(max-width:900px){ .final-cta-info{text-align:center;} }
.final-cta h2{color:var(--navy);}
.final-cta p{color:var(--slate);margin-top:12px;}
.cta-points{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px;text-align:left;}
.cta-points li{
  display:flex;gap:10px;font-size:0.92rem;font-weight:600;color:var(--ink);align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:11px 14px;
}
.cta-points svg{width:17px;height:17px;stroke:var(--gold-dark);flex:0 0 auto;}

.cta-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;
}
@media(max-width:520px){ .cta-stats{grid-template-columns:1fr;} }
.cta-stat{
  background:var(--navy);color:var(--white);border-radius:12px;padding:16px 14px;text-align:center;
}
.cta-stat .cta-stat-num{font-weight:900;font-size:1.25rem;color:var(--white);}
.cta-stat .cta-stat-lbl{font-size:0.76rem;color:#B9C7DE;font-weight:700;margin-top:4px;line-height:1.35;}

.cta-guarantee{
  margin-top:24px;padding-top:24px;display:flex;gap:14px;align-items:center;
  border-top:1px solid rgba(16,35,63,0.12);
}
@media(max-width:900px){ .cta-guarantee{justify-content:center;text-align:left;} }
.cta-guarantee-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--white);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);
}
.cta-guarantee-ico svg{width:22px;height:22px;stroke:var(--gold-dark);}
.cta-guarantee-text strong{display:block;color:var(--navy);font-size:0.92rem;font-weight:800;}
.cta-guarantee-text span{font-size:0.84rem;color:var(--slate);}

/* ---------- Highlighted Lead Form ---------- */
.lead-form{
  background:var(--white);
  border:2px solid var(--gold);
  border-radius:20px;
  padding:32px;
  color:var(--ink);
  align-self:start;
  height:auto;
  box-shadow:
    0 28px 65px -24px rgba(16,35,63,0.38),
    0 8px 22px -12px rgba(217,164,65,0.22);
  position:relative;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}
.lead-form:hover{
  transform:translateY(-3px);
  border-color:rgba(217,164,65,0.45);
  box-shadow:
    0 34px 72px -24px rgba(16,35,63,0.42),
    0 10px 28px -12px rgba(217,164,65,0.28);
}
.lead-form h3{
  color:var(--navy);
  margin-bottom:5px;
  font-size:1.35rem;
  letter-spacing:-0.01em;
}
.lead-form .sub{
  font-size:0.87rem;
  color:var(--slate);
  margin-bottom:22px;
}
.lead-form label{
  display:block;
  font-size:0.82rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:6px;
}
.lead-form input,
.lead-form textarea,
.lead-form select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  font-family:inherit;
  font-size:0.92rem;
  margin-bottom:15px;
  background:var(--paper);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}
.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus{
  outline:none;
  border-color:var(--sky);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(62,142,222,0.12);
}
.lead-form textarea{
  min-height:76px;
  resize:vertical;
}
.lead-form .btn-gold{
  min-height:54px;
  font-size:1rem;
  box-shadow:0 14px 28px -12px rgba(217,164,65,0.55);
}
.form-note{
  font-size:0.76rem;
  color:var(--slate-light);
  margin-top:11px;
  text-align:center;
}
@media(max-width:900px){
  .lead-form{width:100%;padding:28px;}
  .lead-form:hover{transform:none;}
}

/* ---------- Also hiring (other finance roles) ---------- */
.roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:940px){ .roles-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .roles-grid{grid-template-columns:1fr;} }
.role-mini-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:22px 20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s ease, transform .2s ease;
}
.role-mini-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);}
.role-mini-ico{
  width:42px;height:42px;border-radius:12px;background:var(--sky-light);
  display:flex;align-items:center;justify-content:center;
}
.role-mini-ico svg{width:19px;height:19px;stroke:var(--sky);}
.role-mini-card h3{font-size:1rem;}
.role-mini-card p{font-size:0.85rem;line-height:1.5;}
.role-mini-link{
  margin-top:auto;font-weight:800;font-size:0.84rem;color:var(--sky);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;
}
.role-mini-link svg{width:14px;height:14px;stroke:var(--sky);}
.roles-cta-row{text-align:center;margin-top:34px;}
.roles-cta-row p{margin-bottom:16px;font-size:0.96rem;}

/* ---------- Footer ---------- */
footer{background:#0B1A30;color:#8FA3C4;padding:44px 0 26px;font-size:0.86rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:28px;}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr;gap:26px;} }
.foot-logo{color:var(--white);font-weight:900;font-size:1.05rem;margin-bottom:10px;}
.foot-about{font-size:0.85rem;line-height:1.6;max-width:34ch;}
.foot-col h4{color:var(--white);font-size:0.86rem;font-weight:800;margin-bottom:12px;}
.foot-col a{display:block;color:#B9C7DE;text-decoration:none;margin-bottom:9px;font-size:0.86rem;}
.foot-col a:hover{color:var(--white);}
footer a{color:#B9C7DE;}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center;padding-top:22px;border-top:1px solid rgba(255,255,255,0.08);}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;}
.foot-legal{margin-top:14px;font-size:0.78rem;color:#5F7194;}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--white);border-top:1px solid var(--line);
  padding:12px 16px;display:none;gap:10px;
  box-shadow:0 -10px 24px -14px rgba(0,0,0,0.25);
}
.sticky-cta a{flex:1;text-align:center;}
@media(max-width:760px){ .sticky-cta{display:flex;} body{padding-bottom:74px;} }

/* Reveal-in for hero only */
.reveal{opacity:0;transform:translateY(16px);animation:revealUp .7s ease forwards;}
.reveal.d1{animation-delay:.08s;}
.reveal.d2{animation-delay:.18s;}
.reveal.d3{animation-delay:.28s;}
@keyframes revealUp{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Quick-question FAB + modal ---------- */
.qq-fab{
  position:fixed;right:24px;bottom:28px;z-index:65;
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gold);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 34px -12px rgba(217,164,65,0.6);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.qq-fab:hover{background:var(--gold-dark);transform:translateY(-3px) scale(1.05);box-shadow:0 22px 40px -12px rgba(217,164,65,0.7);}
.qq-fab svg{width:26px;height:26px;stroke:var(--navy);}
@media(max-width:760px){ .qq-fab{right:16px;bottom:92px;width:52px;height:52px;} .qq-fab svg{width:22px;height:22px;} }

.qq-modal-overlay{
  position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(16,35,63,0.55);backdrop-filter:blur(2px);padding:20px;
}
.qq-modal-overlay.open{display:flex;}
.qq-modal{
  background:var(--white);border-radius:var(--radius-l);max-width:440px;width:100%;
  padding:32px 28px 26px;position:relative;box-shadow:0 40px 90px -20px rgba(16,35,63,0.55);
  max-height:90vh;overflow-y:auto;
}
.qq-modal-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:none;
  background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--navy);font-weight:900;font-size:1rem;line-height:1;
}
.qq-modal-close:hover{background:var(--line);}
.qq-modal-badge{
  display:inline-block;background:var(--sky-light);color:var(--sky);font-weight:800;font-size:0.76rem;
  padding:5px 12px;border-radius:999px;margin-bottom:12px;
}
.qq-modal h3{margin-bottom:6px;font-size:1.2rem;}
.qq-modal .sub{font-size:0.88rem;color:var(--slate);margin-bottom:20px;}
.qq-modal label{display:block;font-size:0.8rem;font-weight:700;color:var(--navy);margin-bottom:6px;}
.qq-modal input,.qq-modal textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:0.92rem;margin-bottom:14px;background:var(--paper);resize:vertical;
}
.qq-modal input:focus,.qq-modal textarea:focus{outline:2px solid var(--sky);outline-offset:1px;background:var(--white);}
.qq-modal-note{font-size:0.78rem;color:var(--slate-light);margin-top:8px;text-align:center;}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--sky);outline-offset:2px;
}

/* ---------- Inline mid-page CTA strips ---------- */
.mini-cta{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%);
  border-radius:var(--radius-l);
  padding:34px 40px;
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  box-shadow:0 26px 50px -24px rgba(16,35,63,0.5);
  position:relative;overflow:hidden;
}
.mini-cta::after{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:var(--gold);opacity:0.14;filter:blur(70px);top:-120px;right:-60px;
}
.mini-cta-text{position:relative;z-index:1;max-width:560px;}
.mini-cta-eyebrow{
  display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:800;font-size:0.78rem;
  background:rgba(217,164,65,0.16);padding:5px 13px;border-radius:999px;margin-bottom:10px;
}
.mini-cta h3{color:var(--white);font-size:1.35rem;}
.mini-cta p{color:#B9C7DE;font-size:0.92rem;margin-top:8px;}
.mini-cta-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;}
@media(max-width:760px){ .mini-cta{padding:28px;} .mini-cta-actions{width:100%;} .mini-cta-actions .btn{flex:1;justify-content:center;} }

.mini-cta.light{
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.mini-cta.light::after{display:none;}
.mini-cta.light .mini-cta-eyebrow{background:var(--sky-light);color:var(--sky);}
.mini-cta.light h3{color:var(--navy);}
.mini-cta.light p{color:var(--slate);}

.cta-strip-wrap{padding:20px 0;}

/* ---------- ID Card Marquee ---------- */
.team-section{ background:var(--white); overflow:hidden; }

.id-marquee-wrap{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.id-marquee-row{
  display:flex; gap:24px; width:max-content; padding:6px 0 26px;
  animation:idMarqueeLeft 60s linear infinite;
  will-change:transform;
}
.id-marquee-row:hover{ animation-play-state:paused; }
@keyframes idMarqueeLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.id-card{
  flex:0 0 340px; width:340px;
  background:linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  position:relative;
  transition:box-shadow .2s ease, transform .2s ease;
}
.id-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-3px); }

.id-card-top{
  background:var(--navy);
  padding:22px 24px 64px;
  position:relative;
}
.id-card-top::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:24px;
  background:var(--navy);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  transform:scaleX(1.4);
}
.id-org{ display:flex; align-items:center; gap:8px; color:var(--white); font-weight:800; font-size:0.82rem; letter-spacing:0.02em; }
.id-org .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }
.id-badge{
  position:absolute; top:20px; right:20px;
  background:rgba(217,164,65,0.2); color:var(--gold);
  font-weight:800; font-size:0.68rem; letter-spacing:0.03em;
  padding:5px 11px; border-radius:999px;
}

.id-photo-wrap{
  position:relative; margin-top:-64px; padding:0 24px; display:flex; justify-content:center;
}
.id-photo{
  width:140px; height:140px; border-radius:50%;
  border:5px solid var(--white);
  box-shadow:0 14px 30px -10px rgba(16,35,63,0.4);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:2.8rem; color:var(--navy);
  background:conic-gradient(from 210deg, var(--sky), var(--gold), var(--sky));
}
.id-photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

.id-card-body{ padding:16px 24px 24px; text-align:center; }
.id-name{ font-weight:900; color:var(--navy); font-size:1.2rem; }
.id-role{ font-weight:700; color:var(--sky); font-size:0.88rem; margin-top:3px; }
.id-exp{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px; font-weight:800; font-size:0.8rem; color:var(--gold-dark);
  background:#FBF3E4; padding:6px 13px; border-radius:999px;
}
.id-exp svg{ width:13px; height:13px; stroke:var(--gold-dark); }

.id-divider{ height:1px; background:var(--line); margin:18px 0; }

.id-specialty-label{
  font-size:0.72rem; font-weight:800; letter-spacing:0.04em; color:var(--slate-light);
  text-transform:uppercase; margin-bottom:10px; text-align:left;
}
.id-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; }
.id-tag{
  font-size:0.78rem; font-weight:700; color:var(--navy);
  background:var(--sky-light); padding:6px 11px; border-radius:8px;
}

.id-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; text-align:left; }
.id-stat{ background:var(--paper); border-radius:10px; padding:10px 12px; }
.id-stat .n{ font-weight:900; color:var(--navy); font-size:0.98rem; }
.id-stat .l{ font-size:0.7rem; color:var(--slate); font-weight:700; margin-top:2px; }

.id-card-foot{
  border-top:1px dashed var(--line);
  margin-top:18px; padding-top:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.id-verified{
  display:flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:700; color:var(--green);
}
.id-verified svg{ width:14px; height:14px; stroke:var(--green); }

@media(max-width:480px){
  .id-card{ flex:0 0 280px; width:280px; }
  .id-photo{ width:110px; height:110px; font-size:2.2rem; }
}

/* ---------- How It Works (step cards) ---------- */
.hiw-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
@media(max-width:940px){ .hiw-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .hiw-grid{grid-template-columns:1fr;} }

.hiw-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px 24px;
  text-align:left;
  box-shadow:var(--shadow-card);
  position:relative;
  transition:box-shadow .2s ease, transform .2s ease;
}
.hiw-card:hover{
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-3px);
}

.hiw-num{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--navy);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:0.98rem;
  margin-bottom:16px;
}

.hiw-card h3{
  font-size:1.02rem;
  margin-bottom:8px;
}
.hiw-card p{
  font-size:0.9rem;
  line-height:1.55;
}

/* connecting line between steps on wide screens */
@media(min-width:941px){
  .hiw-card:not(:last-child)::after{
    content:"";
    position:absolute;
    top:35px;
    left:100%;
    width:22px;
    height:2px;
    background:var(--line);
    z-index:1;
  }
}

/* last card in the flow gets a gold accent to mark "it's automatic from here" */
.hiw-card.final{
  border-color:var(--gold);
  box-shadow:0 22px 44px -20px rgba(217,164,65,0.32);
}
.hiw-card.final .hiw-num{
  background:var(--gold);
  color:var(--navy);
}

    
    /* ============================================================
 let's talk quick assistent footer (same css also present in style.css)
   ============================================================ */

/* --- Floating Trigger Button --- */
#eg-ai-trigger {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 9998;
  background: linear-gradient(135deg, #EF4444 0%, #EF4444 100%);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 30px rgba(247, 94, 94);
  animation: eg-pulse 1.5s infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#eg-ai-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(247, 94, 94, 0.6);
  animation: none;
}
#eg-ai-trigger .eg-ai-icon {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
#eg-ai-trigger .eg-ai-label span {
  display: block;
}
#eg-ai-trigger .eg-ai-label span:first-child {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#eg-ai-trigger .eg-ai-label span:last-child {
  font-size: 14px;
  font-weight: 700;
}

/* Attention badge on trigger */
#eg-ai-trigger .eg-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 7px;
  animation: eg-badge-bounce 1.5s infinite;
}

@keyframes eg-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(79, 70, 229, 0.45); }
  50% { box-shadow: 0 8px 50px rgba(79, 70, 229, 0.75), 0 0 0 10px rgba(79, 70, 229, 0.1); }
}
@keyframes eg-badge-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* --- WhatsApp Button --- */
#eg-whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  text-decoration: none;
  transition: transform 0.2s ease;
  animation: eg-wa-pop 3s infinite;
}
#eg-whatsapp-btn:hover { transform: scale(1.1); animation: none; }
#eg-whatsapp-btn svg { width: 30px; height: 30px; fill: #fff; }
#eg-whatsapp-btn .eg-wa-tooltip {
  position: absolute;
  right: 66px;
  background: #fff;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#eg-whatsapp-btn:hover .eg-wa-tooltip { opacity: 1; }

@keyframes eg-wa-pop {
  0%, 90%, 100% { transform: scale(1); }
  95% { transform: scale(1.12); }
}

/* --- Modal Overlay --- */
#eg-ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 40, 0.65);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#eg-ai-overlay.active { display: flex; }

/* --- Calculator Panel --- */
#eg-ai-panel {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  /* KEY FIX: limit total height to viewport */
  max-height: calc(100vh - 40px);
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(30, 27, 143, 0.22);
  overflow: hidden;                /* children handle their own scroll */
  position: relative;
  animation: eg-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes eg-slide-up {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
#eg-ai-panel .eg-panel-header {
  background: linear-gradient(135deg, #1e1b8f 0%, #4f46e5 100%);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;                 /* never compress */
}
#eg-ai-panel .eg-panel-header-left { display: flex; align-items: center; gap: 12px; }
#eg-ai-panel .eg-panel-header-left .eg-ai-avatar {
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
#eg-ai-panel .eg-panel-header-left .eg-header-text h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
}
#eg-ai-panel .eg-panel-header-left .eg-header-text p {
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  margin: 0;
}
#eg-ai-panel .eg-panel-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
#eg-ai-panel .eg-panel-close:hover { background: rgba(255,255,255,0.3); }

/* Progress Bar */
.eg-progress-wrap {
  padding: 10px 20px 8px;
  background: #f8f7ff;
  flex-shrink: 0;
  border-bottom: 1px solid #e5e7eb;
}

.eg-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.eg-progress-track {
  height: 5px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.eg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e1b8f, #4f46e5);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* Body */
.eg-panel-body {
  padding: 16px 18px 20px;
  flex: 1 1 auto;                 /* fills remaining space */
  overflow-y: auto;               /* scroll here, not on whole panel */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Custom scrollbar — subtle */
  scrollbar-width: thin;
  scrollbar-color: #c7d2fe #f0f0ff;
}
.eg-panel-body::-webkit-scrollbar       { width: 5px; }
.eg-panel-body::-webkit-scrollbar-track { background: #f0f0ff; border-radius: 10px; }
.eg-panel-body::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 10px; }
 
/* Fade hint at bottom so user knows content continues */
#eg-ai-panel::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(to top, rgba(255,255,255,0.95), transparent);
  pointer-events: none;
  border-radius: 0 0 20px 20px;
}


/* --- Mobile: full-screen sheet on small screens --- */
@media (max-width: 540px) {
  #eg-ai-overlay {
    padding: 0;
    align-items: flex-end;         /* sheet slides up from bottom */
  }
  #eg-ai-panel {
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    width: 100%;
    max-width: 100%;
    animation: eg-slide-up-mobile 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes eg-slide-up-mobile {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .eg-panel-body { padding: 14px 14px 24px; }
  #eg-ai-panel .eg-panel-header { padding: 12px 16px; }
  .eg-result-ctas { flex-direction: column; }
  .eg-result-ctas a { min-width: unset; width: 100%; }
}
 
/* --- Alignment fixes inside the chat --- */
.eg-chat-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.eg-bubble-ai {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}
.eg-bubble-ai .eg-bubble-text {
  font-size: 14px;
  line-height: 1.55;
  padding: 11px 14px;
  border-radius: 4px 14px 14px 14px;
  background: #f0f0ff;
  border: 1px solid #e0e0ff;
  color: #1f2937;
  max-width: calc(100% - 48px);   /* never overflow past avatar */
  word-break: break-word;
}

/* Chat Bubbles */
.eg-chat-wrap { display: flex; flex-direction: column; gap: 12px; }

.eg-bubble-ai {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: eg-fade-in 0.3s ease;
}
.eg-bubble-ai .eg-bubble-avatar {
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.eg-bubble-ai .eg-bubble-text {
  background: #f0f0ff;
  border: 1px solid #e0e0ff;
  border-radius: 4px 14px 14px 14px;
  padding: 12px 16px;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.55;
  max-width: 380px;
}
.eg-bubble-ai .eg-bubble-text strong { color: #1e1b8f; }


 
/* User bubble right-aligned */
.eg-user-bubble-wrap {
  display: flex;
  justify-content: flex-end;
}
.eg-user-bubble-wrap .eg-user-text {
  background: #1e1b8f;
  color: #fff;
  border-radius: 14px 4px 14px 14px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  max-width: 80%;
  word-break: break-word;
}

/* Typing animation */
.eg-typing-dots {
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  background: #f0f0ff;
  border: 1px solid #e0e0ff;
  border-radius: 4px 14px 14px 14px;
  max-width: 70px;
}
.eg-typing-dots span {
  width: 7px;
  height: 7px;
  background: #4f46e5;
  border-radius: 50%;
  animation: eg-dot-bounce 1.2s infinite;
}
.eg-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.eg-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eg-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* Option Buttons */

.eg-options-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 40px;             /* align under AI bubble text */
  animation: eg-fade-in 0.4s ease 0.1s both;
}
.eg-opt-btn {
  background: #fff;
  border: 2px solid #c7d2fe;
  color: #1e1b8f;
  border-radius: 50px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.3;
}
.eg-opt-btn:hover, .eg-opt-btn.selected {
  background: #1e1b8f;
  border-color: #1e1b8f;
  color: #fff;
  transform: translateY(-1px);
}

/* Free text input */
.eg-text-input-wrap {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  animation: eg-fade-in 0.4s ease 0.2s both;
}
.eg-text-input-wrap input {
  flex: 1;
  border: 2px solid #c7d2fe;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1f2937;
  outline: none;
  transition: border-color 0.2s;
}
.eg-text-input-wrap input:focus { border-color: #4f46e5; }
.eg-text-input-wrap button {
  background: #1e1b8f;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.eg-text-input-wrap button:hover { background: #4f46e5; }

/* Lead Capture Form */
.eg-lead-form {
  animation: eg-fade-in 0.4s ease;
  margin-top: 4px;
}
.eg-lead-form h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1e1b8f;
  margin: 0 0 4px;
}
.eg-lead-form p {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px;
}
.eg-lead-form input {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 14px;
  margin-bottom: 9px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.eg-lead-form input:focus { border-color: #4f46e5; }
.eg-lead-form button {
  width: 100%;
  background: linear-gradient(135deg, #1e1b8f 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 2px;
}
.eg-lead-form button:hover { opacity: 0.88; }

/* Result Box */
.eg-result-box {
  background: linear-gradient(135deg, #f0f4ff 0%, #ede9fe 100%);
  border: 2px solid #c7d2fe;
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 6px;
  animation: eg-fade-in 0.5s ease;
}
.eg-result-box .eg-result-title {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.eg-result-box .eg-result-price {
  font-size: 30px;
  font-weight: 800;
  color: #1e1b8f;
  line-height: 1.1;
  margin-bottom: 3px;
}
.eg-result-box .eg-result-sub {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}
.eg-result-box .eg-result-savings {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #dcfce7;
  color: #15803d;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.eg-result-ctas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.eg-result-ctas a {
  flex: 1;
  min-width: 130px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}
.eg-result-ctas .eg-cta-primary {
  background: linear-gradient(135deg, #1e1b8f 0%, #4f46e5 100%);
  color: #fff;
}
.eg-result-ctas .eg-cta-wa {
  background: #25d366;
  color: #fff;
}
.eg-result-ctas a:hover { opacity: 0.88; }

@keyframes eg-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile tweaks */
@media (max-width: 600px) {
  #eg-ai-trigger { bottom: 88px; right: 12px; padding: 12px 14px; }
  #eg-ai-trigger .eg-ai-label span:last-child { font-size: 12px; }
  #eg-whatsapp-btn { bottom: 20px; right: 12px; }
  #eg-ai-panel { border-radius: 14px; }
  .eg-panel-body { padding: 16px; }
}

    
    /* ============================================================
 let's talk quick assistent footer (same css also present in style.css) end
   ============================================================