/* Clarus Taxation LLC — design system
   Palette: royal blue + deep navy + orange CTA on white / soft blue. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
h1,h2,h3,h4{line-height:1.2;text-wrap:balance;font-weight:700}
p{text-wrap:pretty}
ul,ol{list-style:none;padding:0}   /* markers are never wanted here; .legal draws its own */

/* ---------- tokens ---------- */
:root{
  --blue-800:#05132C;
  --blue-700:#061634;
  --blue-600:#0A1E44;
  --blue-500:#2A5AA8;
  --blue-300:#8FB6F0;
  --blue-100:#CBD9EE;
  --blue-50:#EFF3F9;

  --navy-900:#0A1E44;
  --navy-800:#12305E;
  --navy-700:#1A4180;

  --green-600:#16A34A;
  --green-500:#22C55E;

  --orange-600:#EA6A0B;
  --orange-500:#F97316;
  --orange-100:#FFE8D5;

  --ink-900:#0A1E44;
  --ink-700:#33455F;
  --ink-500:#63758C;
  --ink-400:#8B9AAE;

  --bg:#FFFFFF;
  --bg-soft:#F4F7FC;
  --card:#0A1E44;
  --card-hover:#12305E;
  --card-line:rgba(255,255,255,.12);
  --card-body:#CBD9EE;
  --white:#fff;
  --line:#E2E9F2;
  --line-soft:#EEF2F8;

  --r-sm:6px; --r-btn:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(10,30,68,.07);
  --shadow-md:0 12px 30px -14px rgba(10,30,68,.20);
  --shadow-lg:0 30px 60px -28px rgba(10,30,68,.34);

  --ff:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(18px,4vw,32px);
  --max:1180px;
  --sec:clamp(56px,7vw,96px);
}

body{
  font-family:var(--ff);
  color:var(--ink-500);
  background:var(--bg);
  font-size:clamp(15px,.3vw + 14.6px,16px);
  letter-spacing:-.005em;
}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--pad)*2,var(--max));margin-inline:auto}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec) * .62)}
.section--paper2,.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--navy-900);color:#CBD9EE}
.center{text-align:center}

/* ---------- type ---------- */
.display{color:var(--ink-900);font-weight:800;letter-spacing:-.03em}
h1.display{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.14}
h2.display{font-size:clamp(1.6rem,2.9vw,2.28rem);line-height:1.2}
h3{font-size:1.02rem;color:var(--ink-900);font-weight:700;letter-spacing:-.015em}
.display em{font-style:normal;color:var(--blue-500)}
.section--dark .display em,.phero .display em,.ctaband .display em,.whypanel .display em{color:var(--blue-300)}
.lead{font-size:clamp(.96rem,.3vw + .9rem,1.05rem);color:var(--ink-500);max-width:62ch}

.eyebrow{
  display:inline-block;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-500);
}
.eyebrow .i{display:none}

.sec-head{max-width:62ch}
.sec-head.center{margin-inline:auto}
.sec-head .display{margin-top:10px}
.sec-head .lead{margin-top:14px}
.sec-head.center .lead{margin-inline:auto}

.badge-pill{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.42em 1em;font-size:.78rem;font-weight:600;color:var(--ink-700);
  box-shadow:var(--shadow-sm);
}
.badge-pill .i{width:15px;height:15px;color:var(--orange-500);fill:currentColor;stroke:none}

/* ---------- icons ---------- */
.i{width:1.2em;height:1.2em;flex:none;stroke-width:1.9}
.i-lg{width:22px;height:22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.82em 1.4em;border-radius:var(--r-btn);
  font-weight:700;font-size:.9rem;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease,border-color .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue-600);color:#fff;box-shadow:0 10px 22px -12px rgba(10,30,68,.55)}
.btn--primary:hover{background:var(--blue-700)}
.btn--brass,.btn--orange{background:var(--orange-500);color:#fff;box-shadow:0 10px 22px -12px rgba(249,115,22,.9)}
.btn--brass:hover,.btn--orange:hover{background:var(--orange-600)}
.btn--ghost{border:1px solid var(--line);background:var(--white);color:var(--ink-900)}
.btn--ghost:hover{border-color:var(--blue-500);color:var(--blue-600)}
.btn--onDark{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn--onDark:hover{background:rgba(255,255,255,.12)}
.btn--white{background:#fff;color:var(--blue-600)}
.btn--white:hover{background:var(--blue-50)}
.btn--pill{border-radius:var(--r-pill)}
.btn--lg{padding:.98em 1.7em;font-size:.96rem}
.btn--sm{padding:.6em 1.05em;font-size:.83rem}
.btn__go{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.22);
}
.btn__go .i{width:13px;height:13px}
.btn--ghost .btn__go,.btn--white .btn__go{background:var(--blue-50);color:var(--blue-600)}

.arrow-link{
  display:inline-flex;align-items:center;gap:.4em;
  font-weight:700;font-size:.83rem;color:var(--blue-500);text-decoration:none;
}
.arrow-link .i{width:15px;height:15px;transition:transform .16s ease}
.arrow-link:hover .i{transform:translateX(4px)}

/* ---------- header ---------- */
.topbar{background:var(--navy-900);color:#9BAFCE;font-size:.78rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;flex-wrap:wrap}
.topbar__facts{display:flex;gap:22px;margin:0;flex-wrap:wrap}
.topbar__facts li,.topbar__links a,.topbar__links span{display:inline-flex;align-items:center;gap:.5em}
.topbar__facts .i{color:var(--green-500);width:14px;height:14px}
.topbar__links{display:flex;gap:22px;align-items:center}
.topbar__links a{text-decoration:none}
.topbar__links a:hover{color:#fff}
.topbar__links .i{color:var(--blue-300);width:14px;height:14px}
@media (max-width:1080px){.topbar__facts li:nth-child(n+2){display:none}}
@media (max-width:720px){.topbar{display:none}}

.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
.site-head.is-stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(10,30,68,.85)}
/* while the menu is open the header must not create a containing block,
   or the fixed panel is clipped to the header instead of the viewport */
body.nav-open .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--white)}

/* scroll progress along the bottom edge */
.site-head__progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue-600),var(--green-500));
  transition:width .1s linear;border-radius:0 2px 2px 0;
}

.nav{display:flex;align-items:center;gap:20px;min-height:84px;transition:min-height .22s ease}
.site-head.is-stuck .nav{min-height:68px}

.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brand img{width:auto;height:56px;object-fit:contain;transition:height .22s ease}
.site-head.is-stuck .brand img{height:44px}
@media (max-width:560px){.brand img{height:46px}}

.nav__panel{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__links{display:flex;align-items:center;gap:24px;margin:0}
.nav__links>li>a{
  display:inline-flex;align-items:center;gap:.35em;position:relative;
  font-size:.91rem;font-weight:600;text-decoration:none;color:var(--ink-700);padding:.5em 0;
}
/* underline grows from the centre on hover, sits full-width when current */
.nav__links>li>a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;border-radius:2px;
  background:var(--blue-500);transition:left .22s ease,right .22s ease;
}
.nav__links>li>a:hover{color:var(--blue-600)}
.nav__links>li>a:hover::after{left:0;right:0}
.nav__links>li>a[aria-current]{color:var(--ink-900)}
.nav__links>li>a[aria-current]::after{left:0;right:0;background:var(--blue-600)}
.has-mega>a .i{transition:rotate .2s ease}
.has-mega:hover>a .i,.has-mega:focus-within>a .i{rotate:180deg}

.nav__actions{display:flex;align-items:center;gap:14px}
.nav__call{display:flex;align-items:center;gap:10px;text-decoration:none;padding-right:14px;border-right:1px solid var(--line)}
.nav__call .ic{
  width:38px;height:38px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);
  display:grid;place-items:center;flex:none;transition:background .18s,color .18s;
}
.nav__call:hover .ic{background:var(--blue-600);color:#fff}
.nav__call small{display:block;font-size:.68rem;color:var(--ink-400);line-height:1.2}
.nav__call b{font-size:.9rem;color:var(--ink-900);font-weight:700}
@media (max-width:1280px){.nav__call .txt{display:none}.nav__call{padding-right:0;border-right:0}}
/* mega menu */
.has-mega{position:relative}
.mega{
  position:absolute;top:calc(100% + 16px);left:50%;
  width:min(94vw,820px);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  opacity:0;visibility:hidden;translate:-50% 8px;transition:.18s ease;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;translate:-50% 0}
.mega h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);margin-bottom:10px}
.mega__list{display:grid;gap:1px}
.mega__list a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-sm);text-decoration:none;font-size:.86rem;font-weight:500;color:var(--ink-700)}
.mega__list a:hover{background:var(--blue-50);color:var(--blue-600)}
.mega__list .i{color:var(--blue-600)}
.mega__foot{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line-soft)}
.mega__foot p{font-size:.84rem;color:var(--ink-500);margin-right:auto}
.mega__foot strong{display:block;color:var(--ink-900)}

/* mobile nav */
.nav__toggle{display:none;width:46px;height:46px;border-radius:var(--r-btn);border:1px solid var(--line);align-items:center;justify-content:center;color:var(--ink-900)}
.nav__toggle .i{width:21px;height:21px}
.nav__toggle .ic-x,.nav__toggle[aria-expanded="true"] .ic-menu{display:none}
.nav__toggle[aria-expanded="true"] .ic-x{display:block}
@media (max-width:1060px){
  .nav__toggle{display:inline-flex;order:2;position:relative;z-index:2}
  .nav__panel{
    position:fixed;inset:0;z-index:1;
    background:var(--white);padding:100px var(--pad) 40px;overflow:auto;
    display:grid;align-content:start;gap:8px;
    translate:0 -100%;transition:translate .3s cubic-bezier(.4,0,.2,1);
  }
  .nav__panel.is-open{translate:0 0}
  .nav__links{flex-direction:column;align-items:stretch;gap:0}
  .nav__links>li>a{padding:.85em .2em;font-size:1.02rem;border-bottom:1px solid var(--line-soft)}
  .nav__links>li>a::after{display:none}
  .nav__links>li>a[aria-current]{color:var(--blue-600)}
  .mega{position:static;width:auto;opacity:1;visibility:visible;box-shadow:none;border:0;padding:6px 0 16px;grid-template-columns:1fr;gap:16px;translate:0}
  .has-mega:hover .mega,.has-mega:focus-within .mega{translate:0}
  .mega__foot{display:none}
  .nav__actions{margin-top:18px;flex-direction:column;align-items:stretch;gap:12px}
  .nav__actions .btn{width:100%}
  .nav__call{justify-content:center;padding:0;border:0}
  .nav__call .txt{display:block}
}

/* ---------- hero (dark) ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(90% 60% at 78% 18%, rgba(42,90,168,.28), transparent 60%),
    linear-gradient(158deg, #071634 0%, #0A1E44 52%, #061229 100%);
}
.hero__dots{
  position:absolute;top:34px;right:28px;width:190px;height:120px;pointer-events:none;
  background-image:radial-gradient(rgba(120,165,255,.55) 1.4px, transparent 1.4px);
  background-size:13px 13px;opacity:.55;
}
.hero__in{
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4vw,58px);
  align-items:center;padding-block:clamp(44px,5.5vw,74px) clamp(52px,6vw,86px);
  position:relative;z-index:1;
}

.hero .badge-pill{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#CBD9EE;
  backdrop-filter:blur(6px);box-shadow:none;padding:.5em 1.1em;
}
.hero .badge-pill .i{color:var(--green-500);width:16px;height:16px;fill:none;stroke:currentColor}
.hero .badge-pill b{color:var(--green-500);font-weight:800}

.hero h1{margin-top:22px;color:#fff}
.hero h1 em{color:var(--blue-300)}
.hero h1 .g{color:var(--green-500);font-style:normal}
.hero__rule{display:block;width:64px;height:4px;border-radius:4px;background:var(--blue-300);margin:26px 0 22px}
.hero .lead{color:#9BAFCE;max-width:46ch}
.hero .lead b{color:var(--blue-300);font-weight:700}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}


.hero__media{position:relative}
.hero__wedge{
  position:absolute;right:-6px;bottom:-6px;width:46%;height:56%;
  background:linear-gradient(140deg,var(--green-500),#7CD64F);border-radius:0 0 var(--r-lg) 0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.heroshot{
  position:relative;z-index:1;overflow:hidden;aspect-ratio:16/11;background:var(--navy-800);
  border:1px solid rgba(120,165,255,.4);
  clip-path:polygon(9% 0,100% 0,100% 78%,88% 100%,0 100%,0 22%);
}
.heroshot img{width:100%;height:100%;object-fit:cover}

/* ---- hero on smaller screens ---- */
@media (max-width:1000px){
  .hero__in{
    grid-template-columns:1fr;gap:34px;
    padding-block:36px clamp(64px,12vw,88px);   /* room for the stat cards to overlap into */
  }
  .hero__media{order:2;max-width:560px;width:100%;margin-inline:auto}
  .hero .lead{max-width:58ch}
  .hero__dots{width:130px;height:90px;top:20px;right:16px;opacity:.4}
}

@media (max-width:720px){
  /* centred reads better than left-ragged in a narrow column */
  .hero__in{text-align:center}
  .hero__rule{margin-inline:auto}
  .hero .lead{margin-inline:auto}
  .hero .badge-pill{margin-inline:auto}
  .hero__in > div:first-child{display:flex;flex-direction:column;align-items:center}
  .hero__in > div:first-child > *{width:100%}
  .hero .badge-pill{width:auto}
  .hero h1{margin-top:18px}

  /* the angled corners get heavy-handed at this size — ease them off */
  .heroshot{clip-path:polygon(5% 0,100% 0,100% 88%,94% 100%,0 100%,0 12%);border-radius:6px}
  .hero__wedge{width:38%;height:44%;right:-2px;bottom:-2px}
}

@media (max-width:560px){
  .hero__in{padding-block:28px clamp(58px,14vw,76px);gap:28px}
  .hero__media{max-width:none}
  /* straight corners: the notch reads as a rendering fault at phone width */
  .heroshot{clip-path:none;border-radius:var(--r-lg)}
  .hero__wedge{width:34%;height:38%;border-radius:0 0 var(--r-lg) 0}
  .hero__rule{margin-block:20px 18px}
  .hero__cta{margin-top:26px}
}
.hero .btn--ghost{background:transparent;border-color:rgba(255,255,255,.22);color:#fff}
.hero .btn--ghost:hover{border-color:var(--blue-500);background:rgba(255,255,255,.06);color:#fff}
.hero .btn--ghost .btn__go{background:rgba(255,255,255,.12);color:#fff}

/* photo card with notched corners + green wedge + floating metric */
/* ---------- stat cards (overlap the hero edge) ---------- */
.statwrap{background:var(--bg-soft);padding-bottom:clamp(30px,4vw,48px)}
.statstrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:clamp(-72px,-5vw,-44px);position:relative;z-index:5;
}
.statstrip li{
  --accent:var(--blue-600);
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px 22px;box-shadow:var(--shadow-md);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.statstrip li::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--accent);opacity:0;transition:opacity .2s ease;
}
.statstrip li::after{
  content:"";position:absolute;right:-38px;top:-38px;width:104px;height:104px;border-radius:50%;
  background:var(--accent);opacity:.06;transition:opacity .2s ease,transform .3s ease;
}
.statstrip li:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--blue-100);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.statstrip li:hover::before{opacity:1}
.statstrip li:hover::after{opacity:.11;transform:scale(1.12)}

.statstrip .ic{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue-50);
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  position:relative;z-index:1;margin-bottom:18px;
}
.statstrip .ic .i{width:23px;height:23px;color:var(--accent)}
.statstrip b{
  display:block;position:relative;z-index:1;
  font-size:clamp(1.75rem,2.4vw,2.15rem);color:var(--ink-900);
  font-weight:800;letter-spacing:-.035em;line-height:1;
}
.statstrip b.txt{font-size:1.06rem;letter-spacing:-.02em;line-height:1.25}
.statstrip .lbl{
  display:block;position:relative;z-index:1;
  margin-top:8px;font-size:.85rem;color:var(--ink-500);font-weight:500;
}

.statstrip .a-green,.statstrip li.a-green{--accent:var(--green-600)}
.statstrip li.a-blue{--accent:var(--blue-600)}
.statstrip li.a-lime{--accent:#4D7C0F}
.statstrip li.a-indigo{--accent:#4F46E5}

@media (max-width:1000px){
  .statstrip{grid-template-columns:1fr 1fr;margin-top:-40px}
}
@media (max-width:560px){
  .statstrip{grid-template-columns:1fr;margin-top:-32px;gap:14px}
  .statstrip li{padding:20px}
  .statstrip .ic{width:44px;height:44px;margin-bottom:14px}
}
/* ---------- about + consultation form ---------- */
.aboutgrid{display:grid;grid-template-columns:1.15fr .85fr;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--white)}
.aboutgrid__txt{padding:clamp(26px,3.4vw,44px)}
.aboutgrid__txt .display{margin-top:10px}
.aboutgrid__txt p{margin-top:14px;font-size:.9rem}
.abouticons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;text-align:center}
.abouticons li{padding:0 6px;position:relative}
.abouticons li+li::before{content:"";position:absolute;left:-7px;top:6px;bottom:6px;width:1px;background:var(--line-soft)}
.abouticons .ic{width:40px;height:40px;margin:0 auto 10px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center}
.abouticons b{display:block;font-size:.79rem;color:var(--ink-900);font-weight:700;line-height:1.35}

.consult{background:var(--blue-600);color:#fff;padding:clamp(26px,3vw,34px)}
.consult h3{color:#fff;font-size:1.1rem}
.consult>p{color:#CBD9EE;font-size:.83rem;margin-top:2px}
.consult form{display:grid;gap:11px;margin-top:18px}
.consult input,.consult select,.consult textarea{
  width:100%;padding:.8em 1em;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);color:#fff;font-size:.87rem;
}
.consult input::placeholder,.consult textarea::placeholder{color:#CBD9EE}
.consult :is(input,select,textarea):focus{outline:none;background:rgba(255,255,255,.2);border-color:#fff;box-shadow:none}
.consult select option{color:var(--ink-900)}
.consult .btn{width:100%}
.consult .note{font-size:.72rem;color:#CBD9EE;display:flex;gap:.5em;align-items:flex-start}
.consult .note .i{width:14px;height:14px;margin-top:3px;flex:none}
.consult .formstatus{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.consult .formstatus.is-ok{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
.consult .formstatus.is-err{background:rgba(255,255,255,.16);border-color:#FFC9AE;color:#FFE3D3}
@media (max-width:900px){
  .aboutgrid{grid-template-columns:1fr}
  .abouticons{grid-template-columns:1fr;text-align:left;gap:16px}
  .abouticons li+li::before{display:none}
  .abouticons li{display:flex;align-items:center;gap:12px}
  .abouticons .ic{margin:0}
}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);
  padding:24px;transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
  display:flex;flex-direction:column;color:var(--card-body);
}
.card:hover{
  background:var(--card-hover);border-color:rgba(143,182,240,.45);
  box-shadow:var(--shadow-lg);transform:translateY(-3px);
}
.card__ic{
  width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--white);color:var(--blue-600);margin-bottom:16px;
}
.card__ic .i{width:21px;height:21px}
.card h3{margin-bottom:7px;color:#fff}
.card p{font-size:.86rem;color:var(--card-body)}
.card .arrow-link{margin-top:auto;padding-top:14px;color:var(--blue-300)}
/* content that normally assumes a light card */
.card .ticks li{color:var(--card-body)}
.card .ticks .i{color:var(--blue-300)}
.card .ticks b{color:#fff}
.card .btn--primary{background:var(--white);color:var(--blue-600);box-shadow:none}
.card .btn--primary:hover{background:var(--blue-100)}
.card .btn--ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.card .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:var(--blue-300);color:#fff}
/* service tabs */
.tabs{display:inline-flex;gap:4px;padding:5px;background:var(--blue-50);border-radius:var(--r-pill);margin-top:22px}
.tabs button{padding:.58em 1.3em;border-radius:var(--r-pill);font-size:.87rem;font-weight:700;color:var(--ink-500);transition:.16s}
.tabs button[aria-selected="true"]{background:var(--blue-600);color:#fff;box-shadow:var(--shadow-sm)}
.tabpanel[hidden]{display:none}
.tabpanel{margin-top:36px}

/* ---------- why (navy panel) ---------- */
.whypanel{
  background:var(--navy-900);color:#CBD9EE;border-radius:var(--r-lg);
  padding:clamp(28px,3.6vw,46px);display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(26px,4vw,48px);
}
.whypanel .eyebrow{color:var(--blue-300)}
.whypanel h2{color:#fff;margin-top:10px}
.whypanel__intro p{margin-top:14px;font-size:.88rem;color:#9BAFCE}
.whypanel__intro .btn{margin-top:22px}
.why{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}
.why__item{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;gap:4px 14px;padding:0;border:0}
.why__ic{
  grid-column:1;grid-row:1/3;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.1);display:grid;place-items:center;align-self:start;
}
.why__ic .i{width:19px;height:19px;color:#fff}
.why__item h3{color:#fff;font-size:.92rem;margin:0;grid-column:2}
.why__item p{font-size:.81rem;color:#9BAFCE;margin:0;grid-column:2}
.why__no{display:none}
@media (max-width:900px){
  .whypanel{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
}

/* ---------- process ---------- */
.eyebrow--pill{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--blue-50);border-radius:var(--r-pill);
  padding:.6em 1.2em;color:var(--blue-500);
}
.eyebrow--pill .i{display:block;width:16px;height:16px}
.sec-head__rule{
  display:block;width:74px;height:4px;border-radius:4px;
  background:var(--green-500);margin:14px 0 0;
}
.sec-head.center .sec-head__rule{margin-inline:auto}

.process{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:64px;position:relative;
}
/* the rail that threads through the badges */
.process::before{
  content:"";position:absolute;top:44px;left:12.5%;right:12.5%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue-600) 0%,var(--blue-500) 38%,#2E86A8 66%,var(--green-500) 100%);
}
.process::after{
  content:"";position:absolute;top:44px;right:calc(12.5% - 14px);translate:0 -50%;
  width:11px;height:11px;border-radius:50%;background:var(--green-500);
}

.pstep{position:relative;display:flex;flex-direction:column;align-items:center;--step:var(--blue-600)}
.pstep--2{--step:var(--blue-500)}
.pstep--3{--step:#2E86A8}
.pstep--4{--step:var(--green-600)}

.pstep__badge{
  position:relative;z-index:2;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:var(--step);
  background:linear-gradient(145deg,var(--step),color-mix(in srgb,var(--step) 62%,#fff));
  box-shadow:0 0 0 8px #fff,0 14px 28px -14px rgba(10,30,68,.55);
}
.pstep__badge .i{width:34px;height:34px;stroke-width:1.7}
/* the small arc riding the top-right of the badge */
.pstep__badge::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:3px solid var(--step);
  clip-path:polygon(50% 0,100% 0,100% 42%,50% 42%);
  opacity:.85;
}

.pstep__card{
  margin-top:-44px;padding:62px 22px 28px;width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pstep:hover .pstep__card{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pstep__n{
  display:inline-block;padding:.3em .95em;border-radius:var(--r-sm);
  background:var(--blue-50);
  background:color-mix(in srgb,var(--step) 12%,#fff);
  color:var(--step);font-size:.86rem;font-weight:800;letter-spacing:.04em;
}
.pstep__card h3{margin:14px 0 0;font-size:1.06rem;color:var(--ink-900)}
.pstep__rule{display:block;width:34px;height:3px;border-radius:3px;background:var(--step);margin:12px auto 14px}
.pstep__card p{font-size:.87rem;color:var(--ink-500)}

/* chevron node sitting on the rail between two steps */
.pstep__node{
  position:absolute;top:44px;right:-12px;translate:50% -50%;z-index:3;
  width:26px;height:26px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 2px 8px -2px rgba(10,30,68,.35);
}
.pstep__node .i{width:13px;height:13px;color:var(--step);rotate:-90deg}

@media (max-width:1000px){
  .process{grid-template-columns:1fr 1fr;gap:32px 24px;margin-top:52px}
  .process::before,.process::after,.pstep__node{display:none}
}
@media (max-width:560px){
  .process{grid-template-columns:1fr}
}

/* ---------- reliable-hands strip ---------- */
.reliable{
  display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;
  margin-top:44px;padding:22px clamp(18px,2.6vw,30px);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
}
.reliable__lead{display:flex;align-items:center;gap:13px;padding-right:clamp(10px,2vw,22px)}
.reliable__lead .ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(145deg,var(--blue-600),var(--blue-500));
  box-shadow:0 10px 20px -12px rgba(10,30,68,.75);
}
.reliable__lead .ic .i{width:22px;height:22px}
.reliable__lead b{font-size:1.02rem;color:var(--ink-900);font-weight:800;letter-spacing:-.02em}
.reliable ul{display:flex;flex:1;flex-wrap:wrap;gap:clamp(14px,2vw,26px);margin:0}
.reliable li{display:flex;align-items:center;gap:11px;flex:1;min-width:170px;position:relative}
.reliable li+li::before{content:"";position:absolute;left:calc(clamp(14px,2vw,26px) / -2);top:8%;bottom:8%;width:1px;background:var(--line)}
.reliable li .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.reliable li .ic .i{width:18px;height:18px}
.reliable .ic--blue{background:var(--blue-50);color:var(--blue-500)}
.reliable .ic--green{background:rgba(34,197,94,.12);color:var(--green-600)}
.reliable li span{font-size:.86rem;color:var(--ink-700);font-weight:600;line-height:1.3}
@media (max-width:780px){
  .reliable__lead{width:100%;padding-right:0}
  .reliable li{min-width:calc(50% - 20px)}
  .reliable li+li::before{display:none}
}
/* ---------- tools ---------- */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tool{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);
  padding:24px 14px 22px;text-align:center;
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;
}
/* accent line + corner glow, matched to the stat cards */
.tool::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--blue-300),var(--green-500));
  opacity:0;transition:opacity .18s ease;
}
.tool::after{
  content:"";position:absolute;right:-34px;top:-34px;width:92px;height:92px;border-radius:50%;
  background:var(--blue-300);opacity:.07;transition:opacity .18s ease,transform .3s ease;
}
.tool:hover{
  background:var(--card-hover);border-color:rgba(143,182,240,.45);
  box-shadow:var(--shadow-lg);transform:translateY(-4px);
}
.tool:hover::before{opacity:1}
.tool:hover::after{opacity:.13;transform:scale(1.15)}

.tool .ic{
  width:44px;height:44px;margin:0 auto 12px;border-radius:var(--r-md);
  background:rgba(255,255,255,.09);color:#fff;display:grid;place-items:center;
  position:relative;z-index:1;transition:background .18s ease;
}
.tool .ic .i{width:20px;height:20px}
.tool:hover .ic{background:rgba(143,182,240,.22)}
.tool b{position:relative;z-index:1;font-size:.85rem;color:#fff;font-weight:700;letter-spacing:-.01em}
.tool small{position:relative;z-index:1;display:block;font-size:.72rem;color:var(--card-body);margin-top:4px}
@media (max-width:820px){.tools{grid-template-columns:repeat(2,1fr)}}
/* ---------- trust strip ---------- */
.trustbar{border-block:1px solid var(--line);background:var(--white)}
.trustbar ul{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.trustbar li{display:flex;align-items:center;gap:11px;padding:20px 8px;justify-content:center;font-size:.83rem}
.trustbar li+li{border-left:1px solid var(--line-soft)}
.trustbar .i{color:var(--blue-600);width:19px;height:19px}
.trustbar b{display:block;color:var(--ink-900);font-size:.86rem}
.trustbar small{color:var(--ink-400)}
@media (max-width:760px){
  .trustbar ul{grid-template-columns:1fr 1fr}
  .trustbar li:nth-child(odd){border-left:0}
  .trustbar li:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:40px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:20px 4px;cursor:pointer;font-weight:700;color:var(--ink-900);list-style:none;font-size:.94rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--blue-600);transition:rotate .2s}
.faq details[open] summary .i{rotate:45deg}
.faq p{padding:0 4px 22px;color:var(--ink-500);font-size:.88rem;max-width:70ch}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:5/4}
.split__media img{width:100%;height:100%;object-fit:cover}
.ticks{display:grid;gap:11px;margin-top:22px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem}
.ticks .i{color:var(--blue-600);margin-top:3px;width:18px;height:18px}

/* ---------- cta band ---------- */
.ctaband{
  background:linear-gradient(100deg,var(--blue-700),var(--blue-500));color:#fff;border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(22px,3vw,42px);align-items:center;position:relative;overflow:hidden;
}
.ctaband::after{content:"";position:absolute;top:-45%;right:-8%;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.09)}
.ctaband .eyebrow{color:#A9C2E8}
.ctaband h2{color:#fff;position:relative}
.ctaband>div>p{color:#D3E0F5;margin-top:10px;position:relative;font-size:.92rem}
.ctaband ul{margin-top:18px;position:relative;display:grid;gap:9px;font-size:.86rem;color:#D3E0F5}
.ctaband ul li{display:flex;gap:9px;align-items:center}
.ctaband ul .i{color:#fff;width:17px;height:17px}
.ctaband__acts{display:grid;gap:11px;position:relative}
.ctaband__acts .btn{width:100%}
.ctaband__call{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);text-decoration:none}
.ctaband__call .i{color:#fff}
.ctaband__call b{display:block;font-size:.98rem}
.ctaband__call small{color:#D3E0F5}
@media (max-width:820px){.ctaband{grid-template-columns:1fr}}

/* wide banner variant (icon + copy + single button) */
.ctabanner{
  background:linear-gradient(100deg,var(--blue-700),var(--blue-500));color:#fff;border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.ctabanner::after{content:"";position:absolute;top:-60%;right:-4%;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.08)}
.ctabanner__ic{width:64px;height:64px;border-radius:var(--r-md);background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none;position:relative}
.ctabanner__ic .i{width:30px;height:30px}
.ctabanner__txt{flex:1;min-width:240px;position:relative}
.ctabanner__txt h2{color:#fff;font-size:clamp(1.15rem,2vw,1.5rem)}
.ctabanner__txt p{color:#D3E0F5;font-size:.88rem;margin-top:5px}
.ctabanner .btn{position:relative}

/* ---------- forms ---------- */
.field{display:grid;gap:6px}
.field label{font-size:.82rem;font-weight:700;color:var(--ink-900)}
.field input,.field select,.field textarea{
  width:100%;padding:.82em 1em;border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--white);font-size:.9rem;transition:border-color .16s,box-shadow .16s;
}
.field textarea{min-height:140px;resize:vertical}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-50)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.formnote{font-size:.78rem;color:var(--ink-400);display:flex;gap:.5em;align-items:flex-start}
.formnote .i{color:var(--blue-600);width:15px;height:15px;margin-top:3px;flex:none}
.formstatus{padding:13px 15px;border-radius:var(--r-btn);font-size:.86rem;background:var(--blue-50);border:1px solid var(--blue-100);color:var(--ink-700)}
.formstatus.is-ok{border-color:#8FCFA9;background:#EFFAF3;color:#166534}
.formstatus.is-err{background:#FEF1EC;border-color:#F5B79C;color:#9A3412}
.formstatus a{color:inherit}

/* ---------- page hero (inner pages) ---------- */
.phero{
  background:var(--navy-900);color:#fff;text-align:center;
  padding-block:clamp(46px,6vw,74px);position:relative;overflow:hidden;
}
/* glow sits behind the centred column rather than off to one side */
.phero::after{
  content:"";position:absolute;left:50%;top:-60%;translate:-50% 0;
  width:min(900px,120%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(44,99,201,.30),transparent 70%);
  pointer-events:none;
}
.phero > .wrap{position:relative;z-index:1}
.phero .display{color:#fff;margin-inline:auto;text-wrap:nowrap}
/* sized so the longest headline still lands on one line inside the container */
.phero h1.display{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.16}
@media (max-width:900px){.phero .display{text-wrap:balance}}
.phero .eyebrow{color:var(--blue-300)}
.phero p{color:#9BAFCE;margin:14px auto 0;max-width:62ch;font-size:.95rem}
.phero__cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.crumbs{display:flex;justify-content:center;gap:.5em;font-size:.78rem;color:#8398BC;margin-bottom:16px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#fff}
@media (max-width:720px){
  .phero .display{max-width:none}
  .phero__cta{display:grid}
  .phero__cta .btn{width:100%}
}
/* ---------- contact ---------- */
.cinfo{display:grid;gap:12px}
.cinfo li{display:flex;gap:13px;padding:18px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.cinfo .i{color:var(--blue-600);margin-top:3px}
.cinfo b{display:block;color:var(--ink-900)}
.cinfo a{text-decoration:none}
.cinfo a:hover{color:var(--blue-600)}
.cinfo small{color:var(--ink-400);font-size:.8rem}
.map{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);height:320px}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-900);color:#9BAFCE;padding-top:clamp(46px,5vw,66px);font-size:.86rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr 1.3fr;gap:30px}
@media (max-width:1040px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:680px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}
.site-foot .site-foot .foot-logo{display:inline-block;max-width:210px}
.foot-logo img{width:100%;height:auto}
.site-foot h4{font-size:.94rem;color:#fff;margin-bottom:14px;font-weight:700}
.site-foot ul{display:grid;gap:9px}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:#fff}
.socials{display:flex;gap:8px;margin-top:18px}
.socials a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.socials a:hover{background:var(--blue-600)}
.socials .i{width:15px;height:15px}
.foot-contact{display:grid;gap:13px}
.foot-contact li{display:flex;gap:10px}
.foot-contact .i{color:var(--blue-500);margin-top:3px;width:16px;height:16px}
.foot-contact b{color:#fff;display:block;font-weight:600}
.foot-contact small{color:#8398BC;font-size:.78rem}
.foot-certs{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.foot-certs img{max-width:220px;opacity:.95;border-radius:6px}
.foot-certs ul{display:flex;gap:20px;flex-wrap:wrap;font-size:.8rem}
.foot-certs li{display:flex;align-items:center;gap:.5em}
.foot-certs .i{color:var(--blue-500);width:16px;height:16px}
.foot-bottom{margin-top:22px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}
.foot-bottom nav{display:flex;gap:20px}

/* ---------- sticky mobile cta ---------- */
.mcta{display:none}
@media (max-width:720px){
  .mcta{
    display:grid;grid-template-columns:1fr 1.35fr;gap:10px;position:fixed;
    left:12px;right:12px;bottom:12px;z-index:70;padding:9px;
    background:rgba(10,30,68,.95);backdrop-filter:blur(10px);border-radius:var(--r-pill);
    box-shadow:var(--shadow-lg);
  }
  .mcta .btn{width:100%;padding:.7em 1em;font-size:.84rem;border-radius:var(--r-pill)}
  body{padding-bottom:84px}
}

/* ---------- legal / prose ---------- */
.legal{max-width:76ch;margin-inline:auto;color:var(--ink-500)}
.legal h2{font-size:1.22rem;color:var(--ink-900);font-weight:700;letter-spacing:-.02em;margin:40px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.legal>*:first-child{font-size:1rem;color:var(--ink-700)}
.legal p{margin-bottom:13px;font-size:.92rem}
.legal ul{list-style:none;padding:0;display:grid;gap:10px;margin:0 0 18px;font-size:.92rem}
.legal ul li{display:flex;gap:10px}
.legal ul li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--blue-500)}
.legal a{color:var(--blue-600)}
.legal .callout{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-md);padding:18px 20px;margin:20px 0}
.legal .callout p{margin:0;color:var(--ink-700)}
:root{--muted-2:var(--ink-400)}

/* ---------- utils / motion ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:var(--r-sm)}
:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--blue-600);outline-offset:3px;border-radius:4px}

[data-reveal]{opacity:0;translate:0 18px;transition:opacity .55s ease,translate .55s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;translate:0}
}

/* ---------- stats band (inner pages) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--navy-900);padding:30px 24px}
.stat__n{font-size:clamp(1.8rem,3vw,2.4rem);color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat__n .sfx{color:var(--blue-500)}
.stat h3{color:#fff;font-size:.95rem;margin:10px 0 5px}
.stat p{font-size:.82rem;color:#9BAFCE}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.stats{grid-template-columns:1fr}}

.datechip{
  display:inline-block;background:var(--blue-50);color:var(--blue-600);
  font-size:.78rem;font-weight:800;letter-spacing:.02em;
  padding:.35em .8em;border-radius:var(--r-pill);
}

/* ---------- WhatsApp ---------- */
:root{--wa:#25D366;--wa-dark:#1EBE5A}
.btn--wa{background:var(--wa);color:#08331A;box-shadow:0 10px 22px -12px rgba(37,211,102,.9)}
.btn--wa:hover{background:var(--wa-dark);color:#062B15}

.wafab{
  position:fixed;right:20px;bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 18px 0 16px;border-radius:var(--r-pill);
  background:var(--wa);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.45);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.wafab .i{width:26px;height:26px;flex:none}
.wafab:hover{background:var(--wa-dark);transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}
/* label folds away so it settles into a circle */
.wafab__label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .28s ease,opacity .2s ease}
.wafab:hover .wafab__label,.wafab:focus-visible .wafab__label{max-width:160px;opacity:1}
/* one gentle pulse ring to catch the eye, then it rests */
.wafab::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--wa);animation:wapulse 2.6s ease-out 3;
}
@keyframes wapulse{
  0%{opacity:.7;transform:scale(1)}
  70%{opacity:0;transform:scale(1.5)}
  100%{opacity:0;transform:scale(1.5)}
}
@media (prefers-reduced-motion:reduce){.wafab::after{animation:none}}

/* =========================================================
   Mobile pass — sizing, tap targets and overflow guards
   ========================================================= */

/* never let a decorative element create a sideways scroll */
html{overflow-x:clip}

/* anchors must clear the sticky header */
:target,[id]{scroll-margin-top:110px}
@media (max-width:1060px){:target,[id]{scroll-margin-top:90px}}

/* long tokens in legal/prose must not force a wide line */
.legal,.legal p,.legal li,.faq p,.card p,.lead{overflow-wrap:anywhere}

@media (max-width:720px){
  /* iOS zooms the page when a focused field is under 16px */
  .field input,.field select,.field textarea,
  .consult input,.consult select,.consult textarea{font-size:16px}

  /* stacked CTAs read better full width than as ragged pills */
  .hero__cta,.phero__cta{display:grid;gap:10px}
  .hero__cta .btn,.phero__cta .btn{width:100%}
  .ctabanner{flex-direction:column;align-items:flex-start;gap:18px}
  .ctabanner .btn{width:100%}
  .ctabanner__ic{width:52px;height:52px}

  /* tighter section rhythm so pages are not endless scroll */
  :root{--sec:clamp(48px,11vw,64px)}

  .map{height:260px}
  .sec-head,.sec-head .lead{max-width:none}
  .foot-certs{justify-content:flex-start}
  .foot-certs ul{gap:14px}
  .foot-bottom{flex-direction:column;gap:10px}
  .foot-bottom nav{gap:16px;flex-wrap:wrap}
}

@media (max-width:560px){
  /* the hero photo gets its own breathing room on a narrow screen */
  .heroshot{aspect-ratio:4/3}
  .hero h1{font-size:clamp(1.95rem,8.6vw,2.5rem)}
  .badge-pill{font-size:.74rem;padding:.4em .85em}

  /* cards and panels lose their wide gutters */
  .card,.pstep__card,.plan,.quote{padding-inline:18px}
  .whypanel,.ctaband,.ctabanner{padding:26px 20px}
  .aboutgrid__txt,.consult{padding:24px 20px}
  .reliable{padding:18px}
  .reliable li{min-width:100%}

  /* stat cards: icon beside the figure, label beneath, without breaking the stack */
  .statstrip li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;padding:18px}
  .statstrip .ic{grid-row:1/3;margin-bottom:0}
  .statstrip b{font-size:1.55rem;align-self:end}
  .statstrip .lbl{margin-top:0;align-self:start}

  .trustbar li{flex-direction:column;text-align:center;gap:8px;padding:16px 6px}
  .tools{gap:10px}
  .tool{padding:18px 10px}
}

/* landscape phones: the full-screen nav panel must still scroll */
@media (max-height:520px) and (max-width:1060px){
  .nav__panel{padding-top:78px}
}

/* =========================================================
   Motion & polish
   ========================================================= */

/* ---- hero entrance: staged, so the eye lands on the headline first ---- */
.js .hero__in > div > *{opacity:0;transform:translateY(18px)}
.is-ready .hero__in > div > *{
  animation:heroIn .7s cubic-bezier(.2,.7,.3,1) forwards;
}
.is-ready .hero__in > div > *:nth-child(1){animation-delay:.05s}
.is-ready .hero__in > div > *:nth-child(2){animation-delay:.13s}
.is-ready .hero__in > div > *:nth-child(3){animation-delay:.20s}
.is-ready .hero__in > div > *:nth-child(4){animation-delay:.27s}
.is-ready .hero__in > div > *:nth-child(5){animation-delay:.34s}
@keyframes heroIn{to{opacity:1;transform:none}}

.js .hero__media{opacity:0;transform:translateY(22px) scale(.985)}
.is-ready .hero__media{animation:heroIn .85s cubic-bezier(.2,.7,.3,1) .18s forwards}
.heroshot{will-change:transform;transition:box-shadow .3s ease}
.heroshot img{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.hero__media:hover .heroshot img{transform:scale(1.04)}

/* the rule under a section heading draws itself in */
.sec-head__rule,.hero__rule{transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.3,1) .15s}
.sec-head.center .sec-head__rule{transform-origin:center}
[data-reveal] .sec-head__rule,[data-reveal].sec-head .sec-head__rule{transform:scaleX(0)}
[data-reveal].in .sec-head__rule{transform:scaleX(1)}

/* ---- buttons: a light sweep on hover, and a firmer press ---- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 50%,transparent 75%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.btn:hover::after{transform:translateX(120%)}
.btn--ghost::after{background:linear-gradient(110deg,transparent 25%,rgba(10,30,68,.06) 50%,transparent 75%)}

/* ---- cards: the icon reacts, not just the card ---- */
.card__ic,.tool .ic,.statstrip .ic,.abouticons .ic{
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .18s ease,color .18s ease;
}
.card:hover .card__ic,.tool:hover .ic,.statstrip li:hover .ic{transform:translateY(-3px) scale(1.06)}
.card h3,.tool b{transition:color .18s ease}

/* ---- process: badge lifts, rail node nudges along ---- */
.pstep__badge{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.pstep:hover .pstep__badge{transform:translateY(-5px) scale(1.04)}
.pstep__node .i{transition:transform .25s ease}
.pstep:hover .pstep__node .i{transform:translateX(3px)}

/* ---- accordion: answers fade up instead of snapping open ---- */
.faq details[open] p{animation:answerIn .32s ease both}
@keyframes answerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq summary{transition:color .18s ease}
.faq summary:hover{color:var(--blue-600)}

/* ---- imagery ---- */
.split__media{overflow:hidden}
.split__media img{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.split__media:hover img{transform:scale(1.04)}

/* ---- links ---- */
.mega__list a{transition:background .16s ease,color .16s ease,padding-left .16s ease}
.mega__list a:hover{padding-left:14px}
.cinfo li,.reliable li{transition:transform .2s ease,box-shadow .2s ease}
.cinfo li:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* keep every one of these still for anyone who asked for less motion */
@media (prefers-reduced-motion:reduce){
  .hero__in > div > *,.hero__media{opacity:1!important;transform:none!important;animation:none!important}
  .btn::after,.faq details[open] p{animation:none;transition:none}
  .heroshot img,.split__media img{transition:none}
  .sec-head__rule,.hero__rule{transform:none!important}
}

/* =========================================================
   Mobile alignment pass — one consistent rhythm on phones.
   Appended last so it settles ties with the component rules.
   ========================================================= */
@media (max-width:720px){

  /* --- headings and intros centre together, everywhere --- */
  .sec-head,
  .aboutgrid__txt,
  .whypanel__intro,
  .ctaband > div,
  .ctabanner__txt,
  .split > div:not(.split__media){text-align:center}

  .sec-head .lead,
  .aboutgrid__txt p,
  .whypanel__intro p,
  .ctaband > div > p,
  .split > div:not(.split__media) > .lead{margin-inline:auto}

  /* rules and eyebrows follow the text */
  .sec-head__rule{margin-inline:auto}
  .split > div:not(.split__media) .display{text-align:center}

  /* --- lists stay left-aligned: centred bullet text is unreadable --- */
  .ticks,.legal,.faq,.plan ul{text-align:left}
  .ticks li{justify-content:flex-start}

  /* --- process: one column, filling the container like every other card --- */
  .process{gap:26px}
  .pstep{width:100%}
  .pstep__card{padding:56px 20px 24px}
  .pstep__badge{width:78px;height:78px}
  .pstep__badge .i{width:30px;height:30px}

  /* --- reliable strip --- */
  .reliable{flex-direction:column;text-align:center;gap:18px}
  .reliable__lead{justify-content:center;width:100%;padding:0 0 16px;border-bottom:1px solid var(--line)}
  .reliable ul{width:100%;justify-content:center}
  .reliable li{justify-content:flex-start;text-align:left}

  /* --- CTA blocks --- */
  .ctaband ul{text-align:left;justify-items:start;display:inline-grid;margin-inline:auto}
  .ctaband__call{justify-content:center}
  .ctabanner{text-align:center;align-items:center}
  .ctabanner__ic{margin-inline:auto}

  /* --- contact details --- */
  .cinfo li{align-items:flex-start}

  /* --- clearance for the sticky bar and the WhatsApp button --- */
  body{padding-bottom:96px}
}

@media (max-width:560px){
  /* about block: icon rows read better as a centred stack of left-aligned rows */
  .abouticons{max-width:280px;margin-inline:auto}
  .abouticons li{text-align:left}

  /* footer collapses to one column — centre it so it does not look abandoned */
  .foot-grid{text-align:center}
  .foot-grid .brand{justify-content:center}
  .socials{justify-content:center}
  .foot-contact li{justify-content:center;text-align:left}
  .foot-certs{flex-direction:column;text-align:center;align-items:center}
  .foot-certs ul{justify-content:center}
  .foot-bottom{text-align:center;align-items:center}
  .foot-bottom nav{justify-content:center}

  /* trust strip: two even rows rather than four cramped cells */
  .trustbar li{justify-content:center}
}

/* ---- mobile: the sticky bar already carries WhatsApp, so the floating button is noise ---- */
@media (max-width:720px){
  .wafab{display:none}
}

/* ---- about trust icons stay three-across on phones ---- */
@media (max-width:900px){
  .abouticons{
    grid-template-columns:repeat(3,1fr);gap:10px;
    text-align:center;max-width:none;margin:28px 0 0;
  }
  .abouticons li{display:block;text-align:center;padding:0 2px}
  .abouticons li+li::before{display:block;left:-5px;top:4px;bottom:4px}
  .abouticons .ic{width:38px;height:38px;margin:0 auto 8px}
  .abouticons .ic .i{width:17px;height:17px}
  .abouticons b{font-size:.71rem;line-height:1.3}
}
@media (max-width:380px){
  .abouticons{gap:6px}
  .abouticons b{font-size:.66rem}
  .abouticons .ic{width:34px;height:34px}
}

/* ---- process cards on phones: wider, with less air inside ----
   Scoped to 560px: above that the grid is still two columns, where the
   negative margin and tighter padding would be wrong. */
@media (max-width:560px){
  /* claim a little of the page gutter so the cards sit closer to the edges */
  .process{margin-inline:-8px;gap:22px}
  .pstep__card{
    margin-top:-38px;
    padding:46px 16px 20px;   /* was 56px 20px 24px */
    border-radius:var(--r-md);
  }
  .pstep__badge{width:68px;height:68px;box-shadow:0 0 0 6px #fff,0 12px 22px -12px rgba(10,30,68,.55)}
  .pstep__badge .i{width:26px;height:26px}
  .pstep__badge::after{inset:-6px;border-width:2.5px}
  .pstep__n{font-size:.78rem;padding:.26em .8em}
  .pstep__card h3{margin-top:10px;font-size:1rem}
  .pstep__rule{margin:10px auto 10px}
  .pstep__card p{font-size:.84rem}
}

/* ---- footer on phones: shorter, tidier, easier to tap ---- */
@media (max-width:560px){
  .site-foot{padding-top:40px;font-size:.88rem}
  .foot-grid{gap:26px}

  /* link groups run two-up so the footer is not one long ribbon */
  .site-foot h4{margin-bottom:12px;font-size:.9rem}
  .foot-grid > div:not(:first-child):not(:last-child) ul{
    grid-template-columns:1fr 1fr;gap:4px 14px;
  }
  .site-foot ul a{display:inline-block;padding:7px 2px}   /* taller tap target */

  /* brand block */
  .foot-grid > div:first-child p{margin-inline:auto;max-width:34ch}
  .socials{margin-top:16px}

  /* contact rows: icon and text as a centred pair, text left-aligned inside */
  .foot-contact{gap:14px;justify-items:center}
  .foot-contact li{max-width:280px;width:100%}

  .foot-certs{margin-top:28px;padding-top:20px;gap:16px}
  .foot-certs img{max-width:180px}
  .foot-certs ul{gap:10px 18px;font-size:.78rem}
  .foot-bottom{margin-top:18px;padding:16px 0;gap:12px}
}

/* ---- the mobile menu carries its own header: logo left, one close button right ---- */
.nav__panelhead{display:none}
@media (max-width:1060px){
  .nav__panelhead{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid var(--line-soft);
  }
  .nav__panelhead .brand{margin:0}
  .nav__panelhead .brand img{height:46px}
  .nav__close{
    display:grid;place-items:center;flex:none;width:46px;height:46px;
    border:1px solid var(--line);border-radius:var(--r-btn);
    background:var(--white);color:var(--ink-900);
  }
  .nav__close .i{width:22px;height:22px}
  .nav__close:hover{border-color:var(--blue-500);color:var(--blue-600)}

  /* the panel supplies the logo and the X, so the bar underneath must not double them */
  body.nav-open .nav__toggle{visibility:hidden}
  .nav__panel{padding-top:18px}
}