:root{
  --navy-deep:#0B1030; --navy:#0C2454; --royal:#0C3C84;
  --sky:#0C84CC; --sky-light:#3C9CE4;
  --gold:#F8C808; --amber:#F5A308;
  --white:#fff; --cloud:#E8ECEF; --grey:#B4C2CC; --slate:#41505E; --evergreen:#3F5A18;
  --max:1180px; --r:14px;
  --shadow:0 2px 4px rgba(11,16,48,.04), 0 12px 32px rgba(11,16,48,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--slate);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--royal)}
h1,h2,h3,.mont{font-family:Montserrat,Inter,sans-serif; color:var(--navy-deep); line-height:1.15; letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,4vw,2.6rem); font-weight:800; margin:0 0 .6rem}
h3{font-size:1.13rem; font-weight:700; margin:0 0 .4rem; letter-spacing:0}
p{margin:0 0 1rem}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.eyebrow{
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sky); margin:0 0 .7rem;
}
section{padding:76px 0}
.tint{background:var(--cloud)}
.lede{font-size:1.09rem; max-width:62ch; margin:0 0 2.4rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.94rem;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  padding:15px 30px; border-radius:9px; border:2px solid transparent;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
  cursor:pointer; text-align:center;
}
.btn-gold{background:var(--gold); color:var(--navy-deep); box-shadow:0 6px 18px rgba(248,200,8,.34)}
.btn-gold:hover{background:#ffd82b; transform:translateY(-2px); box-shadow:0 10px 26px rgba(248,200,8,.42)}
.btn-ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--royal); transform:translateY(-2px)}
.btn-lg{padding:18px 40px; font-size:1rem}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--cloud);
}
.bar{display:flex; align-items:center; gap:18px; padding:10px 22px; max-width:var(--max); margin:0 auto}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.brand img{width:46px; height:auto}
.brand b{
  font-family:Montserrat,sans-serif; font-weight:800; font-size:1.02rem;
  color:var(--navy-deep); letter-spacing:.04em; line-height:1.05; display:block;
}
.brand span{font-size:.63rem; letter-spacing:.19em; text-transform:uppercase; color:var(--sky); font-weight:600}
nav{display:flex; gap:26px}
nav a{
  font-family:Montserrat,sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.03em;
  color:var(--navy); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent;
}
nav a:hover{border-bottom-color:var(--gold)}
.tel{
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.95rem;
  color:var(--navy-deep); text-decoration:none; white-space:nowrap;
}
.tel:hover{color:var(--royal)}
.bar .btn{padding:11px 20px; font-size:.8rem}
@media(max-width:900px){ nav,.bar .tel{display:none} }

/* ---------- hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden; background:var(--navy-deep)}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:center 34%}
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,16,48,.94) 0%, rgba(12,36,84,.86) 42%, rgba(12,60,132,.42) 72%, rgba(12,132,204,.14) 100%);
}
.hero-in{position:relative; max-width:var(--max); margin:0 auto; padding:104px 22px 92px}
.hero h1{
  color:#fff; font-size:clamp(2.15rem,5.4vw,3.9rem); font-weight:800;
  max-width:16ch; margin:0 0 1.1rem;
}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero p{font-size:clamp(1.03rem,1.8vw,1.22rem); color:rgba(255,255,255,.9); max-width:50ch; margin:0 0 2rem}
.hero p strong{color:#fff; font-weight:600}
.hero .eyebrow{color:var(--sky-light)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.cta-note{font-size:.87rem; color:rgba(255,255,255,.72); margin:1.3rem 0 0}

/* ---------- trust strip ---------- */
.trust{background:var(--navy-deep); padding:0}
.trust ul{
  list-style:none; margin:0 auto; padding:20px 22px; max-width:var(--max);
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px 26px;
}
.trust li{
  font-family:Montserrat,sans-serif; font-weight:600; font-size:.79rem;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.86);
  display:flex; align-items:center; gap:9px; line-height:1.35;
}
.trust svg{flex:none; width:17px; height:17px; color:var(--gold)}
@media(max-width:820px){ .trust ul{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .trust ul{grid-template-columns:1fr} }

/* ---------- services ---------- */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  background:#fff; border:1px solid var(--cloud); border-radius:var(--r);
  padding:28px 26px 30px; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 4px 8px rgba(11,16,48,.05),0 18px 40px rgba(11,16,48,.13)}
.card p{font-size:.96rem; margin:0}
.ico{
  width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--navy) 0%,var(--royal) 100%); margin-bottom:16px;
}
.ico svg{width:24px; height:24px; color:var(--gold)}
@media(max-width:900px){ .svc{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .svc{grid-template-columns:1fr} }

/* ---------- rating (hero) ---------- */
.rating{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:0 0 1.6rem}
.stars{color:var(--gold); letter-spacing:.1em; line-height:1; white-space:nowrap}
.rating .stars{font-size:1.1rem}
.rating b{font-family:Montserrat,sans-serif; font-weight:700; color:#fff; font-size:1.02rem}
.rating a{color:rgba(255,255,255,.82); font-size:.92rem; text-decoration:underline; text-underline-offset:3px}
.rating a:hover{color:#fff}

/* ---------- testimonials ---------- */
.reviews{background:linear-gradient(155deg,var(--navy-deep) 0%,var(--royal) 145%)}
.reviews h2{color:#fff}
.reviews .eyebrow{color:var(--sky-light)}
.rev-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:2.3rem}
.rev-head p{color:rgba(255,255,255,.82); max-width:46ch; margin:0}
.rev-head .stars{font-size:1.35rem; display:block; margin-bottom:.5rem}
.revs{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.rev{
  background:#fff; border-radius:var(--r); padding:26px 26px 24px;
  display:flex; flex-direction:column; box-shadow:0 14px 34px rgba(11,16,48,.22);
}
.rev .stars{font-size:.95rem; margin-bottom:.85rem}
.rev p{font-size:.96rem; margin:0 0 1.2rem; flex:1}
.rev cite{
  font-style:normal; font-family:Montserrat,sans-serif; font-weight:700;
  color:var(--navy-deep); font-size:.92rem; border-top:1px solid var(--cloud); padding-top:.9rem;
}
.rev cite span{
  display:block; font-family:Inter,sans-serif; font-weight:400;
  color:var(--slate); font-size:.84rem; margin-top:.2rem;
}
@media(max-width:760px){ .revs{grid-template-columns:1fr} .rev-head{display:block} .rev-head p{margin-top:1rem} }


/* ---------- pricing ---------- */
.pricing{background:#F4F7FA}
.bands{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 2.3rem; padding:6px;
  background:#fff; border:1px solid var(--cloud); border-radius:13px;
  width:fit-content; box-shadow:var(--shadow);
}
.band{
  appearance:none; border:0; background:transparent; cursor:pointer; font:inherit;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.84rem; letter-spacing:.03em;
  color:var(--navy); padding:11px 19px; border-radius:9px; line-height:1.2; text-align:center;
  transition:background .15s ease, color .15s ease;
}
.band span{
  display:block; font-family:Inter,sans-serif; font-weight:400; font-size:.72rem;
  opacity:.72; margin-top:3px; letter-spacing:0;
}
.band:hover{background:var(--cloud)}
.band[aria-pressed="true"]{background:var(--navy); color:#fff}
.band:focus-visible{outline:3px solid var(--sky); outline-offset:2px}

.bundles{display:grid; grid-template-columns:1.12fr 1fr; gap:22px; margin-bottom:24px}
.bundle{
  background:#fff; border:1px solid var(--cloud); border-radius:var(--r);
  padding:30px 28px 28px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.bundle.lead{border:2px solid var(--gold); box-shadow:0 4px 10px rgba(11,16,48,.06),0 18px 44px rgba(11,16,48,.15)}
.tag{
  display:inline-block; align-self:flex-start; margin-bottom:14px;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.65rem;
  letter-spacing:.13em; text-transform:uppercase;
  background:var(--gold); color:var(--navy-deep); padding:5px 11px; border-radius:5px;
}
.bundle h3{font-size:1.32rem; margin-bottom:.4rem}
.incl{font-size:.92rem; margin:0 0 1.5rem}
.price{display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; margin-bottom:.35rem}
.price b{
  font-family:Montserrat,sans-serif; font-weight:800; font-size:2.6rem; line-height:1;
  color:var(--navy-deep); font-variant-numeric:tabular-nums;
}
.was{font-size:.95rem; color:var(--slate); text-decoration:line-through; opacity:.6}
.save{
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.85rem;
  color:var(--evergreen); margin:0 0 1.5rem;
}
.save.plain{font-family:Inter,sans-serif; font-weight:400; color:var(--slate)}
.bundle .btn{margin-top:auto; width:100%}
.upsell{
  font-size:.87rem; color:var(--slate); background:var(--cloud);
  border-radius:9px; padding:12px 15px; margin:0 0 1.4rem;
}
.upsell b{color:var(--navy-deep)}

.svc-prices{
  background:#fff; border:1px solid var(--cloud); border-radius:var(--r);
  box-shadow:var(--shadow); padding:4px 28px; display:grid;
  grid-template-columns:repeat(2,1fr); gap:0 40px;
}
.pline{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:18px 0; border-bottom:1px solid var(--cloud);
}
a.pline{
  text-decoration:none; color:inherit; margin:0 -14px; padding-left:14px; padding-right:14px;
  border-radius:9px; transition:background .14s ease;
}
a.pline:hover{background:var(--cloud)}
a.pline:focus-visible{outline:3px solid var(--sky); outline-offset:-2px}
a.pline .amt::after{
  content:"\00a0\2192"; color:var(--sky); font-weight:700; opacity:0; transition:opacity .14s ease;
}
a.pline:hover .amt::after{opacity:1}
.pline .nm{font-family:Montserrat,sans-serif; font-weight:700; font-size:.97rem; color:var(--navy-deep)}
.pline .nm span{
  display:block; font-family:Inter,sans-serif; font-weight:400; font-size:.83rem;
  color:var(--slate); margin-top:.2rem;
}
.pline .amt{
  font-family:Montserrat,sans-serif; font-weight:800; font-size:1.16rem; color:var(--navy-deep);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.book-note{
  margin:18px 0 0; font-size:.9rem; color:var(--slate); text-align:center;
}
.terms{
  margin-top:26px; font-size:.87rem; color:var(--slate);
  border-left:3px solid var(--grey); padding:4px 0 4px 16px; max-width:74ch;
}
.terms b{color:var(--navy-deep)}
@media(max-width:900px){ .bundles{grid-template-columns:1fr} .svc-prices{grid-template-columns:1fr; gap:0} }
@media(max-width:560px){
  .bands{width:100%; gap:5px}
  .band{flex:1 1 calc(50% - 3px); padding:10px 6px; font-size:.78rem}
  .price b{font-size:2.15rem}
}

/* ---------- work / before-after ---------- */
.work{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.job{background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--cloud)}
.ba{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--navy-deep)}
.ba figure{position:relative; margin:0}
.ba img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.ba figcaption{
  position:absolute; left:10px; top:10px;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase;
  padding:5px 11px; border-radius:5px;
}
.lab-b{background:rgba(11,16,48,.86); color:#fff}
.lab-a{background:var(--gold); color:var(--navy-deep)}
.job-txt{padding:18px 22px 22px}
.job-txt h3{margin-bottom:.2rem}
.job-txt p{font-size:.9rem; color:var(--slate); margin:0}
.disclaimer{
  margin-top:26px; font-size:.85rem; color:var(--slate);
  border-left:3px solid var(--grey); padding:2px 0 2px 16px; max-width:70ch;
}
@media(max-width:760px){ .work{grid-template-columns:1fr} }

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:s}
.step{position:relative; padding-left:60px}
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:-4px; width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:var(--navy-deep); display:grid; place-items:center;
  font-family:Montserrat,sans-serif; font-weight:800; font-size:1.2rem;
}
.step p{font-size:.95rem; margin:0}
@media(max-width:760px){ .steps{grid-template-columns:1fr; gap:22px} }

/* ---------- split (why us) ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.split img{border-radius:var(--r); box-shadow:var(--shadow); width:100%; max-height:560px; object-fit:cover}
.why{list-style:none; margin:0; padding:0}
.why li{display:flex; gap:15px; margin-bottom:22px}
.why svg{flex:none; width:24px; height:24px; color:var(--sky); margin-top:2px}
.why b{display:block; font-family:Montserrat,sans-serif; color:var(--navy-deep); font-size:1rem; margin-bottom:.15rem}
.why span{font-size:.95rem}
@media(max-width:860px){ .split{grid-template-columns:1fr; gap:34px} .split .art{order:-1} }

/* ---------- straight talk ---------- */
.talk{
  background:linear-gradient(140deg,var(--navy-deep) 0%,var(--royal) 130%);
  color:rgba(255,255,255,.86); border-radius:var(--r); padding:40px 42px;
}
.talk h2{color:#fff; margin-bottom:1rem}
.talk p{max-width:66ch}
.talk p:last-child{margin-bottom:0}
.talk strong{color:#fff; font-weight:600}
@media(max-width:620px){ .talk{padding:30px 24px} }

/* ---------- areas ---------- */
.areas{display:flex; flex-wrap:wrap; gap:11px; margin:0; padding:0; list-style:none}
.areas li{
  font-family:Montserrat,sans-serif; font-weight:600; font-size:.86rem;
  background:#fff; border:1px solid var(--grey); color:var(--navy);
  padding:9px 18px; border-radius:100px;
}

/* ---------- final CTA ---------- */
.final{background:var(--navy-deep); color:#fff; text-align:center}
.final h2{color:#fff; max-width:20ch; margin:0 auto .8rem}
.final p{color:rgba(255,255,255,.82); max-width:52ch; margin:0 auto 2rem; font-size:1.06rem}
.final .cta-row{justify-content:center}
.or{color:rgba(255,255,255,.6); font-size:.92rem; margin-top:1.5rem}
.or a{color:var(--gold); font-weight:600; text-decoration:none; white-space:nowrap}
.or .sep{padding:0 .5rem; opacity:.5}
.or a:hover{text-decoration:underline}

/* ---------- footer ---------- */
footer{background:#070B22; color:rgba(255,255,255,.62); font-size:.9rem; padding:48px 0 32px}
.fgrid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; margin-bottom:34px}
footer h4{
  font-family:Montserrat,sans-serif; color:#fff; font-size:.76rem; letter-spacing:.15em;
  text-transform:uppercase; margin:0 0 .9rem;
}
footer a{color:rgba(255,255,255,.78); text-decoration:none}
footer a:hover{color:var(--gold)}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:.5rem}
.fbrand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.fbrand img{width:52px}
.fbrand b{font-family:Montserrat,sans-serif; color:#fff; font-size:1.05rem; letter-spacing:.04em}
.fbot{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.82rem}
.fbot span{margin-right:auto}
@media(max-width:760px){ .fgrid{grid-template-columns:1fr; gap:26px} }

/* ---------- mobile sticky CTA ---------- */
.mobile-cta{display:none}
@media(max-width:640px){
  .brand span{font-size:.58rem; letter-spacing:.13em; white-space:nowrap}
  .brand b{font-size:.95rem}
  .or .sep{display:none}
  .or a{display:block; margin:.25rem 0}
  .mobile-cta{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
    border-top:1px solid var(--cloud);
  }
  .mobile-cta .btn{padding:14px 8px; font-size:.8rem; letter-spacing:.03em}
  body{padding-bottom:76px}
  section{padding:56px 0}
  .hero-in{padding:72px 22px 66px}
}


/* ================= SERVICE PAGE ADDITIONS ================= */
.subhero{background:var(--navy-deep); color:#fff; padding:64px 0 58px; position:relative}
.subhero .wrap{position:relative; z-index:2}
.subhero h1{color:#fff; font-size:clamp(1.95rem,4.6vw,3.1rem); font-weight:800; max-width:19ch; margin:0 0 1rem}
.subhero h1 em{font-style:normal; color:var(--gold)}
.subhero p{font-size:clamp(1rem,1.7vw,1.16rem); color:rgba(255,255,255,.9); max-width:56ch; margin:0 0 1.8rem}
.subhero .eyebrow{color:var(--sky-light)}
.crumb{font-size:.83rem; color:rgba(255,255,255,.62); margin:0 0 1.1rem}
.crumb a{color:rgba(255,255,255,.82); text-decoration:none}
.crumb a:hover{color:var(--gold)}

.prose{max-width:68ch}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem); margin:2.6rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.9rem 0 .5rem; font-size:1.08rem}
.prose ul{margin:0 0 1.2rem; padding-left:1.2rem}
.prose li{margin:0 0 .5rem}
.prose li::marker{color:var(--sky)}

.ptable{width:100%; border-collapse:collapse; margin:0 0 1.2rem; background:#fff;
  border:1px solid var(--cloud); border-radius:var(--r); overflow:hidden}
.ptable th,.ptable td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--cloud); font-size:.97rem}
.ptable th{font-family:Montserrat,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate); background:var(--cloud)}
.ptable td.pr{font-family:Montserrat,sans-serif; font-weight:800; color:var(--navy-deep);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.ptable tr:last-child td{border-bottom:none}
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

.ba{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 1.4rem}
.ba figure{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--cloud); background:#fff}
.ba img{width:100%; aspect-ratio:4/3; object-fit:cover}
.ba figcaption{font-family:Montserrat,sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); padding:10px 14px}
@media(max-width:560px){ .ba{grid-template-columns:1fr} }

.callout{background:var(--cloud); border-left:4px solid var(--sky); border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px; margin:0 0 1.4rem}
.callout p:last-child{margin:0}
.callout strong{color:var(--navy-deep)}

.faq{border-top:1px solid var(--cloud)}
.faq details{border-bottom:1px solid var(--cloud); padding:16px 0}
.faq summary{font-family:Montserrat,sans-serif; font-weight:700; color:var(--navy-deep);
  cursor:pointer; list-style:none; font-size:1.02rem; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--sky); font-weight:800; flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.8rem 0 0; font-size:.98rem}

.related{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:1.6rem}
.related a{display:block; background:#fff; border:1px solid var(--cloud); border-radius:var(--r);
  padding:18px 20px; text-decoration:none; box-shadow:var(--shadow); transition:transform .15s ease}
.related a:hover{transform:translateY(-3px)}
.related b{display:block; font-family:Montserrat,sans-serif; color:var(--navy-deep); font-size:1rem; margin-bottom:.25rem}
.related span{font-size:.9rem; color:var(--slate)}
@media(max-width:820px){ .related{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .related{grid-template-columns:1fr} }

nav a.here{border-bottom-color:var(--gold); color:var(--navy-deep)}