
/* ===== layout-v4.css ===== */

:root{
  --primary:#6557d9;
  --primary-dark:#5144c4;
  --primary-soft:#f4f2fc;
  --white:#fff;
  --shadow:0 14px 40px rgba(29,38,68,.08);
  --shadow-sm:0 8px 26px rgba(29,38,68,.06);
  --footer2:#211d2a;
}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:Inter,Arial,sans-serif}
.container,.narrow{box-sizing:border-box}
main{min-width:0}
section{position:relative}

/* BRAND LOCKUP */
.brand-lockup{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start!important;
  justify-content:center;
  gap:3px;
  flex:0 0 auto;
  line-height:1;
}
.brand-lockup img{width:202px!important;height:auto!important}
.brand-tagline{
  display:block;
  margin-left:2px;
  font-size:9.5px;
  line-height:1.15;
  letter-spacing:.105em;
  text-transform:uppercase;
  font-weight:750;
  color:#70798d;
  white-space:nowrap;
}
.footer-brand-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px}
.footer-brand-lockup img{width:236px!important;height:auto!important}
.footer-tagline{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#a8a4b7;
  font-weight:750;
}

/* HEADER - old compact markup, stabilized */
.header{width:100%;background:rgba(255,255,255,.97);border-bottom:1px solid #eaecf3}
.hrow{height:92px!important;display:flex;align-items:center;gap:24px}
.nav{min-width:0;gap:17px!important}
.nav>a,.trigger{font-size:13px!important;white-space:nowrap}
.login{flex:0 0 auto;min-width:142px;justify-content:center}
.drop{z-index:1100}
.servicesdrop{max-height:calc(100vh - 120px);overflow:auto}
.mobile{top:92px!important}
.mtoggle{flex:0 0 44px}

/* Long-class compatibility used by V3 service/legal pages */
.section-title,.title{
  font-size:clamp(2.05rem,3.3vw,3.35rem);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
  margin-top:12px;
  color:var(--ink);
}
.section-copy,.copy{color:var(--muted);font-size:17px;line-height:1.72;max-width:650px}
.section-head,.head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px}
.btn-primary,.btn-p{background:var(--primary)!important;color:#fff!important;box-shadow:0 10px 24px rgba(101,87,217,.20)}
.btn-primary:hover,.btn-p:hover{background:var(--primary-dark)!important}
.btn-outline,.btn-o{background:#fff!important;border-color:#dfe3ee!important;color:#25304a!important}
.text-link,.textlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--primary)}
.service-icon,.sicon{
  display:grid;
  place-items:center;
  color:var(--primary);
  background:#f6f5fb;
  border:1px solid #e5e6ef;
}
.service-icon{width:50px;height:50px;border-radius:14px}
.service-icon svg,.sicon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* LONG HERO CLASSES */
.subhero{
  position:relative;
  min-height:500px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#222;
}
.subhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.subhero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,14,16,.12),rgba(12,14,16,.30) 43%,rgba(12,14,16,.76))}
.subhero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:500px;width:100%}
.subhero-copy{grid-column:2;max-width:690px;padding-left:44px;color:#fff}
.subhero-copy h1{font-size:clamp(2.75rem,4.3vw,4.45rem);line-height:1.025;letter-spacing:-.045em;font-weight:800;color:#fff}
.subhero-copy p{font-size:18px;line-height:1.72;margin-top:18px;color:rgba(255,255,255,.92)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:14px;font-size:12px;font-weight:750;color:rgba(255,255,255,.78)}
.breadcrumb a:hover{color:#fff}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:27px}

/* LONG CARD / GRID CLASSES */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature-card{
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-shadow:0 5px 20px rgba(29,38,68,.025);
}
.feature-card h3{font-size:18px;line-height:1.35;margin-top:15px}
.feature-card p{font-size:14px;line-height:1.68;color:var(--muted);margin-top:8px}
.info-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-sm)}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.quick-card{min-width:0;border:1px solid #e9ebf2;background:#fafaff;border-radius:15px;padding:15px}
.quick-card small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8b94a6;font-weight:800}
.quick-card strong{display:block;margin-top:6px;font-size:14px;line-height:1.45}

/* Service V3 layout alignment */
.service-overview-grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;gap:42px!important}
.service-sidebox{min-width:0}
.outcome-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.outcome-card{min-width:0}
.full-workflow{max-width:1120px}
.workflow-row{grid-template-columns:52px minmax(0,1fr) auto!important;align-items:start}
.workflow-row .step-num{
  display:grid;place-items:center;
  background:#242033;color:#fff;
  border-radius:14px;
  font-size:12px;font-weight:800;
}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.quality-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.quality-card{min-width:0}
.privacy-callout{min-width:0}

/* WORKING BEFORE/AFTER - both class systems */
.ba-grid,.comparegrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:42px;align-items:center}
.ba-copy p{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.72}
.checks{display:grid;gap:10px;margin-top:22px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#445069}
.check svg{width:18px;height:18px;stroke:var(--primary);fill:none;stroke-width:2;flex:0 0 18px;margin-top:2px}
.compare-shell,.comparebox{background:#fff;border:1px solid var(--line);border-radius:26px;padding:16px;box-shadow:var(--shadow)}
.compare{height:480px;position:relative;overflow:hidden;border-radius:19px;cursor:ew-resize;user-select:none;background:#e6e7eb}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .after{clip-path:inset(0 50% 0 0);filter:brightness(1.12) contrast(1.04) saturate(1.07)}
.compare-line,.cline{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.compare-handle,.handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.compare-handle svg,.handle svg{width:21px;height:21px;stroke:#29334b;fill:none;stroke-width:2}
.compare-label,.clabel{position:absolute;top:14px;padding:6px 9px;border-radius:8px;background:rgba(20,24,35,.72);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.before-l,.before{left:14px}.after-l,.afterlab{right:14px}
.compare-range,.range{width:100%;margin-top:14px;appearance:none;height:6px;border:0;border-radius:999px;background:#e3e6ef;outline:0;padding:0}
.compare-range::-webkit-slider-thumb,.range::-webkit-slider-thumb{appearance:none;width:21px;height:21px;border-radius:50%;background:var(--primary);border:3px solid #fff;box-shadow:0 4px 12px rgba(69,60,177,.28)}

/* FAQ both systems */
.faq-list,.faq{display:grid;gap:10px}
.faq-item,.faqitem{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.faq-q,.faqq{width:100%;border:0;background:#fff;padding:17px 19px;display:flex;justify-content:space-between;gap:18px;align-items:center;text-align:left;font-weight:750;color:#242d44;cursor:pointer}
.faq-a,.faqa{display:none;padding:0 19px 18px;color:var(--muted);font-size:14px;line-height:1.72}
.faq-item.open .faq-a,.faqitem.open .faqa{display:block}
.faq-item.open .faq-q span:last-child,.faqitem.open .faqq span:last-child{transform:rotate(45deg)}

/* FORMS expanded naming */
.form-shell,.formwrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px;align-items:start}
.form-card,.formcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:27px;box-shadow:var(--shadow-sm);min-width:0}
.field-grid,.fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field-group,.field{display:grid;gap:7px;min-width:0}
.field-group.full,.field.full{grid-column:1/-1}

/* CTA expanded */
.cta-box,.cta{background:#211d2b;color:#fff;border-radius:26px;padding:34px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.cta-box h2,.cta h2{color:#fff;font-size:clamp(1.8rem,3vw,2.55rem);line-height:1.12}
.cta-box p,.cta p{color:#c9c5d5;margin-top:9px;max-width:720px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* LEGAL pages */
.legal-hero{padding:110px 0 44px!important}
.prose{max-width:100%;overflow-wrap:anywhere}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}

/* MASTER SERVICE PAGE */
.master-layout{grid-template-columns:245px minmax(0,1fr)!important}
.deep-service-head{grid-template-columns:minmax(0,1fr) 300px!important}
.deep-service-body,.deep-service-head{min-width:0}
.service-columns{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr)!important}
.inclusion-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.table-wrap{max-width:100%;overflow:auto}

/* FOOTER - complete rebuild */
.footer{
  width:100%;
  background:#18151f;
  color:#c8c5d5;
  padding:58px 0 26px;
}
.footer>.container{display:block}
.footer-top{
  display:grid!important;
  grid-template-columns:minmax(280px,1.45fr) repeat(4,minmax(135px,.82fr))!important;
  gap:28px!important;
  align-items:start!important;
}
.footer-top>div{min-width:0}
.footer-brand{display:inline-flex}
.footer-brand img{width:236px!important;height:auto!important}
.footer-desc{margin-top:15px;max-width:385px;color:#bdb9ca;font-size:14px;line-height:1.72}
.footer-contact{display:grid;gap:10px;margin-top:18px}
.support-line{display:flex;align-items:flex-start;gap:9px;color:#bdb9ca;font-size:12.5px;line-height:1.55}
.support-line svg{width:16px!important;height:16px!important;stroke:#b8b1ff!important;fill:none!important;stroke-width:1.8!important;flex:0 0 16px;margin-top:2px}
.footer-col h4{margin:1px 0 15px;font-size:13px;color:#fff;letter-spacing:.01em}
.footer-links{display:grid!important;gap:9px!important}
.footer-links a{font-size:12.5px;line-height:1.45;color:#bdb9ca}
.footer-links a:hover{color:#fff}
.trustpilot-box{
  max-width:360px;
  margin-top:18px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.footer-trust-row{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap}
.footer-trust-label{font-size:10px!important;text-transform:uppercase;letter-spacing:.05em;color:#bbb7c8;font-weight:700}
.footer-stars{display:flex!important;gap:2px!important;width:auto!important;height:auto!important}
.footer-stars span{width:18px!important;height:18px!important;background:#00b67a!important;display:grid!important;place-items:center!important}
.footer-stars svg{width:12px!important;height:12px!important;fill:#fff!important;stroke:none!important;display:block!important}
.footer-trust-brand{display:flex!important;align-items:center!important;gap:4px!important;color:#fff;font-size:14px!important;font-weight:700}
.footer-trust-brand svg{width:17px!important;height:17px!important;fill:#00b67a!important;stroke:none!important}
.footer-global{margin-top:7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#aaa6bb;font-weight:650}
.subscribe{
  margin-top:34px!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:21px!important;
  padding:24px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)!important;
  gap:26px!important;
  align-items:center!important;
  background:#211d2a!important;
}
.subscribe small{font-size:10px!important;letter-spacing:.10em;color:#aaa1ff!important;font-weight:800;text-transform:uppercase}
.subscribe h3{font-size:26px!important;line-height:1.2!important;color:#fff!important;margin-top:6px!important}
.subscribe p{font-size:13px!important;color:#bdb9ca!important;margin-top:7px!important}
.subscribe-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important;align-items:center}
.email-field{height:48px!important;border-radius:11px!important;border:1px solid #3b3548!important;background:#17131d!important;display:flex!important;align-items:center!important;gap:9px!important;padding:0 13px!important}
.email-field svg{width:17px!important;height:17px!important;stroke:#9994aa!important;fill:none!important;stroke-width:1.8!important}
.email-field input{height:auto!important;border:0!important;box-shadow:none!important;background:transparent!important;color:#fff!important;padding:0!important}
.subscribe-note{margin-top:9px!important;font-size:11px!important;color:#9994aa!important}
.subscribe-note a{color:#b8b1ff!important;text-decoration:underline;text-underline-offset:2px}
.footer-bottom{
  margin-top:24px!important;
  padding-top:20px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
}
.copyright{font-size:11.5px!important;color:#9995aa!important}
.legal-links{display:flex!important;flex-wrap:wrap!important;gap:6px 13px!important;margin-top:7px!important}
.legal-links a{font-size:10.5px!important;color:#918da3!important}
.socials{display:flex!important;gap:8px!important;width:auto!important;height:auto!important}
.socials a{width:38px!important;height:38px!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.04)!important;display:grid!important;place-items:center!important}
.socials svg{width:16px!important;height:16px!important;fill:#fff!important;stroke:none!important;display:block!important}

/* AUTH LOGO */
.auth-card .brand-lockup{align-items:flex-start!important}
.auth-card .brand-lockup img{width:185px!important}
.auth-card .brand-tagline{font-size:8.5px}

/* Responsive */
@media(max-width:1360px){
  .nav{display:none!important}.mtoggle{display:grid!important}
  .footer-top{grid-template-columns:minmax(280px,1.3fr) repeat(2,minmax(150px,1fr))!important}
  .footer-top>div:nth-child(4),.footer-top>div:nth-child(5){margin-top:8px}
}
@media(max-width:1080px){
  .service-overview-grid,.service-columns,.deep-service-head{grid-template-columns:1fr!important}
  .outcome-grid,.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .quality-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .master-layout{grid-template-columns:1fr!important}
  .master-nav{position:static!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .subscribe{grid-template-columns:1fr!important}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-top>div:first-child{grid-column:1/-1}
}
@media(max-width:820px){
  .hrow{height:84px!important}.mobile{top:84px!important}
  .brand-lockup img{width:174px!important}.brand-tagline{font-size:8px}
  .subhero{min-height:460px}.subhero-content{grid-template-columns:1fr;min-height:460px}.subhero-copy{grid-column:1;padding:0;max-width:680px;margin-left:auto}
  .subhero:after{background:linear-gradient(90deg,rgba(12,14,16,.38),rgba(12,14,16,.72))}
  .ba-grid,.comparegrid,.form-shell,.formwrap{grid-template-columns:1fr!important}
  .workflow-row{grid-template-columns:48px minmax(0,1fr)!important}.workflow-tag{grid-column:2;justify-self:start}
  .footer-top{grid-template-columns:1fr 1fr!important}
  .footer-top>div:first-child{grid-column:1/-1}
}
@media(max-width:640px){
  .container,.narrow{width:calc(100% - 24px)!important}
  section{padding:52px 0}
  .section-head,.head{flex-direction:column;align-items:flex-start;gap:12px}
  .section-title,.title{font-size:2.05rem}
  .subhero{min-height:430px}.subhero-content{min-height:430px}.subhero-copy h1{font-size:2.55rem}.subhero-copy p{font-size:16px}
  .outcome-grid,.feature-grid,.quality-grid,.portfolio-grid,.inclusion-list,.workflow-steps,.quick-grid,.field-grid,.fieldgrid{grid-template-columns:1fr!important}
  .compare{height:350px}
  .cta-box,.cta{grid-template-columns:1fr!important;padding:26px!important}
  .footer{padding-top:46px}
  .footer-top{grid-template-columns:1fr!important;gap:26px!important}
  .footer-top>div:first-child{grid-column:auto}
  .footer-brand-lockup img,.footer-brand img{width:205px!important}
  .subscribe{padding:20px!important}
  .subscribe-form{grid-template-columns:1fr!important}
  .footer-bottom{align-items:flex-start!important;flex-direction:column!important}
}


/* ===== layout-v5.css ===== */

/* V5 - services navigation + comparison + multi before/after */

:root{
  --matrix-line:#e8eaf1;
  --matrix-head:#f7f7fb;
}

/* Services direct link + separate dropdown chevron */
.services-nav-control{
  height:100%;
  display:flex;
  align-items:center;
  gap:3px;
}
.services-nav-control>a{
  height:100%;
  display:flex;
  align-items:center;
  font-size:13px;
  font-weight:650;
  color:#46516a;
  padding:0;
}
.services-nav-control>a:hover{color:#171f32}
.services-chevron{
  width:26px!important;
  min-width:26px!important;
  height:36px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
}
.services-chevron:hover{background:#f6f6fb!important}
.services-chevron .chev{width:13px;height:13px}
.mobile-service-row{
  display:grid;
  grid-template-columns:1fr 44px;
  align-items:center;
  gap:6px;
}
.mobile-service-row>a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:0 14px;
  border-radius:11px;
  font-weight:650;
  color:#29334c;
  background:#fff;
}
.mobile-service-row>a:hover{background:#f7f7fb}
.mobile-service-row>button{
  min-height:44px!important;
  width:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
}

/* New comparison area */
.compare-section-v5{background:#fbfbfe}
.compare-intro-v5{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);
  gap:42px;
  align-items:end;
  margin-bottom:30px;
}
.compare-intro-v5 .legend{
  color:#66738d;
  font-size:14px;
  line-height:1.7;
  max-width:560px;
  justify-self:end;
}
.matrix-group{margin-top:18px}
.matrix-group+.matrix-group{margin-top:28px}
.matrix-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
}
.matrix-title-row h3{
  font-size:18px;
  line-height:1.35;
  color:#202940;
}
.matrix-title-row p{
  max-width:540px;
  font-size:12.5px;
  color:#7b8498;
  text-align:right;
}
.matrix-shell{
  width:100%;
  overflow:auto;
  border:1px solid var(--matrix-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 30px rgba(29,38,68,.04);
}
.service-matrix{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  min-width:970px;
}
.service-matrix th,
.service-matrix td{
  border-right:1px solid var(--matrix-line);
  border-bottom:1px solid var(--matrix-line);
  padding:13px 10px;
  text-align:center;
  vertical-align:middle;
  font-size:12px;
}
.service-matrix thead th{
  background:var(--matrix-head);
  color:#273149;
  font-weight:800;
  line-height:1.3;
  white-space:normal;
}
.service-matrix thead th:first-child{
  width:210px;
  text-align:left;
  position:sticky;
  left:0;
  z-index:3;
  background:var(--matrix-head);
}
.service-matrix tbody th{
  width:210px;
  text-align:left;
  position:sticky;
  left:0;
  z-index:2;
  background:#fff;
  color:#283149;
  font-weight:720;
  line-height:1.35;
}
.service-matrix tr:last-child th,
.service-matrix tr:last-child td{border-bottom:0}
.service-matrix th:last-child,
.service-matrix td:last-child{border-right:0}
.matrix-service-name{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.matrix-service-name strong{font-size:12px}
.matrix-service-name small{
  color:#8b94a6;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
}
.matrix-symbol{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  font-size:12px;
  font-weight:850;
}
.matrix-yes{background:#e9f8f2;color:#15835f}
.matrix-add{background:#fff4dd;color:#916712}
.matrix-no{background:#f1f2f6;color:#a0a7b4}
.matrix-custom{background:#eeeafb;color:#5b50be}
.matrix-limited{background:#fff4dd;color:#916712}
.matrix-legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px 15px;
  margin-top:14px;
  font-size:11.5px;
  color:#7c8598;
}
.matrix-legend-row span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.matrix-mobile{display:none}

/* Additional service-page sections */
.usecase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.usecase-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-shadow:0 5px 22px rgba(29,38,68,.035);
}
.usecase-card h3{font-size:17px;line-height:1.35}
.usecase-card p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-top:7px}
.usecase-card .tag{margin-bottom:13px}
.prep-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);
  gap:28px;
  align-items:start;
}
.prep-checklist{
  display:grid;
  gap:10px;
  margin-top:20px;
}
.prep-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  padding:14px;
}
.prep-item b{
  width:34px;height:34px;
  border-radius:10px;
  background:#f1effa;
  color:#5e54bd;
  display:grid;
  place-items:center;
  font-size:11px;
}
.prep-item strong{display:block;font-size:13.5px}
.prep-item span{display:block;margin-top:3px;font-size:12px;color:#768096;line-height:1.55}
.upgrade-path{
  background:#211d2b;
  color:#fff;
  border-radius:24px;
  padding:27px;
}
.upgrade-path h3{font-size:21px;line-height:1.25}
.upgrade-path p{font-size:13.5px;color:#c8c4d5;line-height:1.68;margin-top:8px}
.upgrade-steps{display:grid;gap:9px;margin-top:18px}
.upgrade-step{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:9px;
  align-items:start;
}
.upgrade-step b{
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.09);
  color:#bdb5ff;
  font-size:10px;
}
.upgrade-step span{font-size:12.5px;color:#dedbe8;line-height:1.5}

/* Multiple before/after showcase */
.multi-ba-section{background:#f6f6fb}
.multi-ba-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  margin-bottom:28px;
}
.multi-ba-head .section-copy{max-width:560px}
.ba-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.ba-case{
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
  box-shadow:var(--shadow-sm);
}
.ba-case h3{
  font-size:15px;
  line-height:1.35;
  margin:14px 3px 0;
}
.ba-case p{
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
  margin:5px 3px 2px;
}
.ba-case .compare-shell,
.ba-case .comparebox{
  padding:0;
  border:0;
  box-shadow:none;
  border-radius:15px;
}
.ba-case .compare{
  height:300px;
  border-radius:15px;
}
.ba-case .compare-range,
.ba-case .range{
  margin:11px 2px 1px;
  width:calc(100% - 4px);
}
.ba-case .compare-handle,
.ba-case .handle{
  width:44px;height:44px;
}
.ba-case .compare-handle svg,
.ba-case .handle svg{
  width:18px;height:18px;
}

@media(max-width:1080px){
  .compare-intro-v5{grid-template-columns:1fr;gap:12px}
  .compare-intro-v5 .legend{justify-self:start}
  .usecase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ba-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prep-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .service-matrix{display:none}
  .matrix-shell{overflow:visible;border:0;box-shadow:none;background:transparent}
  .matrix-mobile{display:grid;gap:10px}
  .matrix-mobile-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:15px;
  }
  .matrix-mobile-card h4{font-size:14px}
  .matrix-mobile-features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:11px;
  }
  .matrix-mobile-feature{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:8px 9px;
    border-radius:10px;
    background:#f8f8fc;
    font-size:10.5px;
    color:#606b82;
  }
  .matrix-title-row{align-items:flex-start;flex-direction:column}
  .matrix-title-row p{text-align:left}
  .usecase-grid,.ba-showcase-grid{grid-template-columns:1fr}
  .multi-ba-head{align-items:flex-start;flex-direction:column}
  .ba-case .compare{height:350px}
}


/* ===== layout-v6.css ===== */

/* V6: brand alignment, privacy contrast, AEO/GEO content blocks, contact cleanup */
.brand-lockup{
  gap:1px!important;
  justify-content:center!important;
}
.brand-lockup img{
  width:204px!important;
  height:auto!important;
}
.brand-tagline{
  width:204px!important;
  margin:0!important;
  transform:translateY(-1px);
  text-align:center!important;
  font-size:9px!important;
  line-height:1.05!important;
  letter-spacing:.095em!important;
  color:#6d7689!important;
  white-space:nowrap!important;
}
.footer-brand-lockup{
  gap:2px!important;
}
.footer-brand-lockup img{
  width:236px!important;
}
.footer-tagline{
  width:236px!important;
  text-align:center!important;
  margin-top:0!important;
  transform:translateY(-1px);
  font-size:9.5px!important;
  letter-spacing:.105em!important;
}

/* Fix boudoir dark privacy cards: no hidden text */
.package-privacy .quality-card{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}
.package-privacy .quality-card strong{
  color:#fff!important;
}
.package-privacy .quality-card p{
  color:#cbc7d8!important;
}
.package-privacy .section-copy,
.package-privacy .section-head p{
  color:#cbc7d8!important;
}
.package-privacy .kicker{
  color:#bdb5ff!important;
}
.package-privacy .kicker:before{
  background:#bdb5ff!important;
}

/* About / entity-first content */
.answer-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--shadow-sm);
}
.answer-box .question{
  display:block;
  font-size:11px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--primary);
}
.answer-box h2{
  font-size:24px;
  line-height:1.25;
  margin-top:7px;
}
.answer-box p{
  font-size:15px;
  color:var(--muted);
  line-height:1.75;
  margin-top:9px;
}
.about-answer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.company-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.company-fact{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:19px;
}
.company-fact small{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#8b94a5;
  font-weight:850;
}
.company-fact strong{
  display:block;
  font-size:15px;
  line-height:1.45;
  margin-top:7px;
  color:#263047;
}
.entity-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.entity-links a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid #e1e4ed;
  background:#fff;
  border-radius:999px;
  color:#4f5970;
  font-size:12px;
  font-weight:750;
}
.entity-links a:hover{
  border-color:#c8c4ec;
  color:var(--primary);
  background:#faf9ff;
}
.about-service-map{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.about-service-link{
  display:flex;
  flex-direction:column;
  min-height:150px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:17px;
  transition:.2s ease;
}
.about-service-link:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
  border-color:#d8d5ee;
}
.about-service-link strong{
  font-size:14px;
  line-height:1.4;
}
.about-service-link span{
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
  margin-top:6px;
}
.about-service-link b{
  margin-top:auto;
  padding-top:13px;
  font-size:11px;
  color:var(--primary);
}
.process-principles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}
.principle-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:21px;
}
.principle-card h3{font-size:18px}
.principle-card p{
  margin-top:7px;
  font-size:13.5px;
  line-height:1.68;
  color:var(--muted);
}
.location-card{
  background:#211d2b;
  color:#fff;
  border-radius:24px;
  padding:28px;
}
.location-card h2{color:#fff}
.location-card p{
  color:#c9c5d5;
  margin-top:10px;
  line-height:1.7;
}
.location-card a{color:#c3bcff;font-weight:750}

/* Related services internal-link block */
.related-services-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.related-service{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  min-height:155px;
}
.related-service small{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8a93a6;
  font-weight:850;
}
.related-service strong{
  display:block;
  margin-top:7px;
  font-size:16px;
}
.related-service p{
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
  margin-top:6px;
}
.related-service a{
  margin-top:auto;
  padding-top:12px;
  color:var(--primary);
  font-size:12px;
  font-weight:800;
}

/* Contact page without illustration */
.contact-direct-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.contact-direct-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
}
.contact-direct-card .service-icon{
  width:44px;height:44px;
  border-radius:13px;
}
.contact-direct-card h3{
  font-size:17px;
  margin-top:14px;
}
.contact-direct-card p{
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
  margin-top:6px;
}
.contact-direct-card a{
  display:inline-flex;
  margin-top:12px;
  color:var(--primary);
  font-size:13px;
  font-weight:800;
}
.contact-form-note{
  margin-top:14px;
  border-radius:12px;
  background:#f7f6fc;
  border:1px solid #e8e5f3;
  padding:12px 13px;
  font-size:11.5px;
  line-height:1.6;
  color:#6f778b;
}
.contact-location{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:28px;
  align-items:start;
}

/* Better navigation active state */
.nav>a[aria-current="page"],
.services-nav-control>a[aria-current="page"]{
  color:var(--primary)!important;
}

/* Answer-first blocks useful for human and generative search */
.direct-answer{
  border-left:3px solid var(--primary);
  padding:2px 0 2px 16px;
  margin-top:18px;
}
.direct-answer strong{
  display:block;
  font-size:14px;
  color:#273149;
}
.direct-answer p{
  margin-top:5px!important;
  font-size:14px!important;
  line-height:1.7!important;
}

/* Contact hero doesn't need decorative illustration; keep photo hero restrained */
.contact-clean-hero:after{
  background:linear-gradient(90deg,rgba(13,15,17,.30),rgba(13,15,17,.76))!important;
}
.contact-clean-hero .subhero-copy{
  grid-column:1!important;
  padding-left:0!important;
  margin-right:auto!important;
}

@media(max-width:1180px){
  .about-service-map{grid-template-columns:repeat(3,minmax(0,1fr))}
  .company-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .about-answer-grid,.process-principles,.related-services-grid,.contact-direct-grid,.contact-location{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:680px){
  .about-service-map,.company-facts{grid-template-columns:1fr}
  .brand-lockup img{width:177px!important}
  .brand-tagline{width:177px!important;font-size:7.8px!important;letter-spacing:.075em!important}
}


/* ===== layout-v7.css ===== */

/* V7 deep service content + Why Choose section */
.why-pixel{
  padding:0!important;
  background:#dfe7ea;
}
.why-pixel-wrap{
  display:grid;
  grid-template-columns:minmax(360px,.72fr) minmax(0,1.45fr);
  min-height:600px;
}
.why-pixel-media{
  position:relative;
  overflow:hidden;
  min-height:600px;
}
.why-pixel-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.why-pixel-copy{
  background:#34414d;
  color:#fff;
  padding:68px 62px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.why-pixel-copy .eyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#b9c4ce;
  font-weight:800;
}
.why-pixel-copy h2{
  margin-top:10px;
  font-size:clamp(2.3rem,4vw,4rem);
  line-height:1.04;
  letter-spacing:-.04em;
  color:#fff;
}
.why-pixel-copy h2 strong{font-weight:850}
.why-pixel-copy p{
  max-width:940px;
  font-size:16px;
  line-height:1.86;
  color:#edf1f4;
  margin-top:22px;
}
.why-pixel-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
  margin-top:26px;
}
.why-pixel-point{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.035);
}
.why-pixel-point strong{display:block;font-size:13px;color:#fff}
.why-pixel-point span{display:block;font-size:11.5px;line-height:1.55;color:#cbd3da;margin-top:4px}
.why-pixel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* Long-form service pages */
.service-long-hero .subhero-copy{max-width:760px}
.service-long-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.75fr);
  gap:34px;
  align-items:start;
}
.service-answer{
  border-left:4px solid var(--primary);
  padding-left:20px;
}
.service-answer h2{
  font-size:clamp(2rem,3.2vw,3.2rem);
  line-height:1.12;
}
.service-answer p{
  margin-top:13px;
  font-size:16px;
  line-height:1.82;
  color:var(--muted);
}
.service-fact-stack{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  box-shadow:var(--shadow-sm);
}
.service-fact-stack h3{font-size:16px;margin-bottom:9px}
.service-fact-line{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:11px;
  padding:10px 0;
  border-bottom:1px solid #eceef4;
}
.service-fact-line:last-child{border-bottom:0}
.service-fact-line small{
  color:#8a93a6;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}
.service-fact-line strong{
  color:#354058;
  font-size:12.5px;
  line-height:1.5;
}
.service-toc{
  position:sticky;
  top:104px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:14px;
  box-shadow:var(--shadow-sm);
}
.service-toc strong{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#7c8496;
  margin:2px 7px 8px;
}
.service-toc a{
  display:block;
  padding:9px 10px;
  border-radius:9px;
  font-size:12px;
  color:#5b667e;
  line-height:1.35;
}
.service-toc a:hover{background:#f6f5fb;color:var(--primary)}
.service-long-layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.service-long-content{min-width:0}
.long-section{
  scroll-margin-top:105px;
  padding:34px 0;
  border-bottom:1px solid #eceef4;
}
.long-section:first-child{padding-top:0}
.long-section:last-child{border-bottom:0}
.long-section h2{
  font-size:clamp(1.85rem,2.8vw,2.75rem);
  line-height:1.12;
  letter-spacing:-.03em;
}
.long-section h3{
  font-size:20px;
  line-height:1.35;
  margin-top:20px;
}
.long-section p{
  font-size:15px;
  color:#5d687f;
  line-height:1.82;
  margin-top:13px;
}
.long-section ul{
  display:grid;
  gap:8px;
  margin-top:15px;
  padding-left:20px;
  color:#5d687f;
  line-height:1.72;
  font-size:14px;
}
.answer-snippet{
  margin-top:18px;
  border-radius:16px;
  background:#f4f2fb;
  border:1px solid #e3dff4;
  padding:17px 18px;
}
.answer-snippet strong{
  display:block;color:#5147ae;font-size:12px;text-transform:uppercase;letter-spacing:.07em
}
.answer-snippet p{margin-top:6px!important;font-size:14px!important}
.component-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin-top:22px;
}
.component-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:18px;
  min-width:0;
}
.component-card b{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  background:#f2f0fb;
  color:#5e54bd;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.component-card h3{font-size:16px;margin-top:11px}
.component-card p{font-size:13px;line-height:1.67;margin-top:7px}
.workflow-v7{
  display:grid;
  gap:10px;
  margin-top:22px;
}
.workflow-v7-step{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:14px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:17px;
  padding:16px;
}
.workflow-v7-step>span{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:13px;
  background:#211d2b;
  color:#fff;
  font-size:11px;
  font-weight:850;
}
.workflow-v7-step h3{font-size:16px;margin:1px 0 0}
.workflow-v7-step p{font-size:13px;margin-top:5px;line-height:1.64}
.multi-ba-v7{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
.ba-v7-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:13px;
  box-shadow:var(--shadow-sm);
}
.ba-v7-card .compare{height:310px;border-radius:15px}
.ba-v7-card h3{font-size:16px;margin:13px 3px 0}
.ba-v7-card p{font-size:12.5px;line-height:1.6;margin:5px 3px 1px}
.ba-v7-card .compare-shell{padding:0;border:0;box-shadow:none}
.ba-v7-note{
  margin-top:13px;
  font-size:11.5px;
  color:#858da0;
}
.detail-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:20px;
}
.detail-panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:20px;
}
.detail-panel h3{font-size:17px;margin:0}
.detail-panel p{font-size:13.5px;margin-top:8px}
.detail-panel ul{font-size:13px}
.scope-table{
  margin-top:20px;
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.scope-table th,.scope-table td{
  padding:12px 13px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  font-size:12.5px;
  line-height:1.55;
}
.scope-table th{
  background:#f7f7fb;color:#283149;width:28%;
}
.scope-table tr:last-child th,.scope-table tr:last-child td{border-bottom:0}
.aeo-faq{
  display:grid;
  gap:10px;
  margin-top:22px;
}
.aeo-faq article{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:18px;
}
.aeo-faq h3{
  margin:0;
  font-size:15px;
}
.aeo-faq p{
  margin-top:7px;
  font-size:13.5px;
  line-height:1.68;
}
.service-deep-cta{
  background:#211d2b;
  border-radius:25px;
  color:#fff;
  padding:30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
}
.service-deep-cta h2{color:#fff;font-size:clamp(1.8rem,3vw,2.5rem)}
.service-deep-cta p{color:#c9c5d5;margin-top:8px;max-width:730px}
.research-note{
  border-radius:14px;
  background:#fff8e8;
  border:1px solid #ecd79f;
  padding:14px 15px;
  font-size:11.5px;
  line-height:1.6;
  color:#705b27;
}
@media(max-width:1100px){
  .why-pixel-wrap{grid-template-columns:1fr}
  .why-pixel-media{min-height:420px}
  .why-pixel-copy{padding:46px 36px}
  .service-long-layout{grid-template-columns:1fr}
  .service-toc{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-toc strong{grid-column:1/-1}
}
@media(max-width:780px){
  .why-pixel-points,.component-grid,.multi-ba-v7,.detail-split{grid-template-columns:1fr}
  .why-pixel-media{min-height:320px}
  .why-pixel-copy{padding:38px 24px}
  .service-long-intro{grid-template-columns:1fr}
  .service-toc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-deep-cta{grid-template-columns:1fr}
}
@media(max-width:560px){
  .service-toc{grid-template-columns:1fr}
  .ba-v7-card .compare{height:340px}
}


/* ===== layout-v8.css ===== */

/* V8 Homepage - mission, onboarding, premier, deep services */
.home-mission{
  background:#f7f7fb;
}
.mission-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);
  gap:46px;
  align-items:center;
}
.mission-copy h2{
  font-size:clamp(2.45rem,4.3vw,4.7rem);
  line-height:1.02;
  letter-spacing:-.047em;
  margin-top:10px;
}
.mission-copy h2 em{
  display:block;
  color:var(--primary);
  font-family:Georgia,serif;
  font-weight:500;
}
.mission-copy p{
  max-width:760px;
  margin-top:18px;
  font-size:16px;
  line-height:1.82;
  color:var(--muted);
}
.mission-points{
  display:grid;
  gap:10px;
  margin-top:24px;
}
.mission-point{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:11px;
  align-items:start;
  padding:13px 14px;
  border:1px solid #e5e7ef;
  border-radius:14px;
  background:#fff;
}
.mission-point b{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#f1effb;
  color:var(--primary);
  font-size:11px;
}
.mission-point strong{display:block;font-size:14px}
.mission-point span{display:block;margin-top:4px;color:#768096;font-size:12.5px;line-height:1.55}
.trial-banner{
  margin-top:24px;
  border-radius:20px;
  background:#211d2b;
  color:#fff;
  padding:22px;
}
.trial-banner small{
  color:#bdb5ff;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:10px;
  font-weight:850;
}
.trial-banner h3{
  color:#fff;
  margin-top:6px;
  font-size:22px;
}
.trial-banner p{
  color:#cbc7d7;
  font-size:13px;
  margin-top:6px;
}
.trial-banner .btn{margin-top:14px}
.mission-ba .compare{height:560px}

/* 3-step outsourcing */
.outsource-section{background:#fff}
.outsource-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);
  gap:32px;
  align-items:end;
}
.outsource-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:30px;
}
.outsource-card{
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:23px;
  box-shadow:var(--shadow-sm);
}
.outsource-card .num{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:13px;
  background:#211d2b;
  color:#fff;
  font-size:11px;
  font-weight:850;
}
.outsource-card h3{font-size:20px;margin-top:17px}
.outsource-card p{font-size:13.5px;color:var(--muted);line-height:1.68;margin-top:7px}
.outsource-card a{
  display:inline-flex;
  margin-top:14px;
  color:var(--primary);
  font-size:12.5px;
  font-weight:800;
}

/* Premier */
.home-premier{
  background:linear-gradient(135deg,#211d2b,#302a3d);
  color:#fff;
}
.home-premier-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
  gap:34px;
  align-items:center;
}
.home-premier .kicker{color:#bdb5ff}
.home-premier .kicker:before{background:#bdb5ff}
.home-premier h2{
  color:#fff;
  font-size:clamp(2.7rem,5vw,5.2rem);
  line-height:1.01;
  letter-spacing:-.05em;
}
.home-premier h2 span{
  display:block;
  color:#bdb5ff;
}
.home-premier p{
  color:#cbc7d7;
  font-size:16px;
  line-height:1.78;
  margin-top:17px;
  max-width:780px;
}
.premier-benefits{
  display:grid;
  gap:9px;
  margin-top:23px;
}
.premier-benefit{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color:#e1deea;
}
.premier-benefit svg{
  width:18px;height:18px;stroke:#bdb5ff;fill:none;stroke-width:2;flex:0 0 18px;margin-top:1px;
}
.premier-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(255,255,255,.055);
  padding:25px;
}
.premier-card small{
  color:#bdb5ff;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.premier-card h3{
  color:#fff;
  font-size:24px;
  line-height:1.25;
  margin-top:7px;
}
.premier-card p{
  font-size:13px;
  margin-top:8px;
}
.premier-card .hero-actions{margin-top:18px}

/* Services narrative */
.home-services-deep{
  background:#f7f7fb;
}
.home-services-head{
  max-width:900px;
  margin:0 auto 38px;
  text-align:center;
}
.home-services-head .kicker{justify-content:center}
.home-services-head h2{
  font-size:clamp(2.6rem,5vw,5rem);
  line-height:1.02;
  letter-spacing:-.047em;
  margin-top:10px;
}
.home-services-head p{
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  margin:15px auto 0;
  max-width:760px;
}
.home-service-stack{
  display:grid;
  gap:20px;
}
.home-service-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.88fr);
  gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.home-service-row.reverse .home-service-copy{order:2}
.home-service-row.reverse .home-service-ba{order:1}
.home-service-copy{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-service-copy small{
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:850;
  font-size:10px;
}
.home-service-copy h3{
  font-size:clamp(1.9rem,3vw,3rem);
  line-height:1.08;
  letter-spacing:-.035em;
  margin-top:8px;
}
.home-service-copy p{
  font-size:14.5px;
  line-height:1.76;
  color:var(--muted);
  margin-top:12px;
}
.home-service-features{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}
.home-service-features span{
  padding:6px 8px;
  border:1px solid #e2e4ec;
  border-radius:999px;
  background:#fafaff;
  color:#59637a;
  font-size:10.5px;
  font-weight:750;
}
.home-service-copy a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--primary);
  font-weight:800;
  font-size:13px;
  margin-top:18px;
}
.home-service-ba{
  padding:15px;
  background:#ececf2;
}
.home-service-ba .compare-shell{
  height:100%;
  border:0;
  padding:0;
  box-shadow:none;
  background:transparent;
}
.home-service-ba .compare{
  height:100%;
  min-height:410px;
  border-radius:18px;
}
.home-service-caption{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:0 3px;
  color:#7d8597;
  font-size:10px;
}
.home-service-caption strong{
  color:#48536a;
  font-size:10.5px;
}

/* service quick links */
.service-quicklinks{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:24px;
}
.service-quicklinks a{
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dfe2eb;
  font-size:11px;
  color:#586279;
  font-weight:750;
}
.service-quicklinks a:hover{color:var(--primary);border-color:#cfc9ef}

/* Home final answer box */
.home-answer-strip{
  background:#fff;
}
.home-answer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.home-answer{
  border:1px solid var(--line);
  border-radius:17px;
  padding:17px;
  background:#fff;
}
.home-answer small{
  color:var(--primary);
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}
.home-answer h3{font-size:15px;margin-top:7px}
.home-answer p{font-size:11.5px;line-height:1.6;color:var(--muted);margin-top:5px}

@media(max-width:1100px){
  .mission-grid,.home-premier-grid,.home-service-row{grid-template-columns:1fr}
  .home-service-row.reverse .home-service-copy,.home-service-row.reverse .home-service-ba{order:initial}
  .mission-ba .compare{height:480px}
  .home-service-ba .compare{height:450px}
  .home-answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .outsource-intro{grid-template-columns:1fr}
  .outsource-steps{grid-template-columns:1fr}
  .why-pixel-points{grid-template-columns:1fr}
}
@media(max-width:620px){
  .mission-ba .compare,.home-service-ba .compare{height:360px;min-height:360px}
  .home-service-copy{padding:24px}
  .home-answer-grid{grid-template-columns:1fr}
}


/* =========================================================
   PIXELDOTEDIT V9 FINAL DESIGN SYSTEM
   Final overrides for consistent alignment across all pages.
   ========================================================= */

:root{
  --site-width:1280px;
  --site-gutter:24px;
  --ink:#152039;
  --muted:#65728b;
  --line:#e6e9f1;
  --soft:#f7f7fb;
  --primary:#6557d9;
  --primary-dark:#5144c4;
  --dark:#18151f;
  --dark-2:#211d2b;
  --shadow:0 14px 40px rgba(29,38,68,.08);
  --shadow-sm:0 8px 24px rgba(29,38,68,.055);
}

html,body{width:100%;max-width:100%;overflow-x:hidden}
body{background:#fff;color:var(--ink)}
*{min-width:0}
.container{width:min(var(--site-width),calc(100% - (var(--site-gutter)*2)))!important;margin-inline:auto!important}
.narrow{width:min(900px,calc(100% - (var(--site-gutter)*2)))!important;margin-inline:auto!important}
section{padding:72px 0}
img{max-width:100%;height:auto}

.section-head,.head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:30px!important;
  margin-bottom:30px!important;
}
.section-title,.title{
  font-size:clamp(2.05rem,3.2vw,3.3rem)!important;
  line-height:1.07!important;
  letter-spacing:-.035em!important;
  margin-top:11px!important;
  color:var(--ink)!important;
}
.section-copy,.copy{
  max-width:640px!important;
  color:var(--muted)!important;
  font-size:16px!important;
  line-height:1.72!important;
}
.page-band{background:var(--soft)!important}

/* header */
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.98);border-bottom:1px solid #eaecf3;backdrop-filter:blur(12px)}
.hrow{height:88px!important;display:flex!important;align-items:center!important;gap:22px!important}
.brand-lockup{
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
}
.brand-lockup img{width:198px!important;height:auto!important}
.brand-tagline{
  width:198px!important;
  text-align:center!important;
  margin:0!important;
  transform:translateY(-1px);
  font-size:8.5px!important;
  line-height:1!important;
  letter-spacing:.09em!important;
  color:#6d7689!important;
  white-space:nowrap!important;
  text-transform:uppercase;
  font-weight:750;
}
.nav{margin-left:auto!important;display:flex!important;align-items:center!important;gap:16px!important;height:100%!important}
.nav>a,.trigger,.services-nav-control>a{
  font-size:13px!important;
  color:#46516a!important;
  font-weight:650!important;
  white-space:nowrap!important;
}
.nav>a:hover,.trigger:hover,.services-nav-control>a:hover{color:#171f32!important}
.services-nav-control{height:100%!important;display:flex!important;align-items:center!important;gap:2px!important}
.services-chevron{width:26px!important;height:34px!important;min-width:26px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:8px!important}
.login{height:42px!important;min-width:142px!important;padding:0 14px!important;justify-content:center!important}
.servicesdrop{width:min(920px,calc(100vw - 48px))!important;max-height:calc(100vh - 120px)!important;overflow:auto!important}
.megagrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.megaitem{grid-template-columns:42px minmax(0,1fr)!important}

/* heroes */
.hero,.subhero{overflow:hidden}
.subhero{
  min-height:500px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  background:#222!important;
}
.subhero>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.subhero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,14,16,.12),rgba(12,14,16,.30) 43%,rgba(12,14,16,.76))}
.subhero-content{position:relative!important;z-index:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;min-height:500px!important;width:100%!important}
.subhero-copy{grid-column:2!important;max-width:690px!important;padding-left:42px!important;color:#fff!important}
.subhero-copy h1{font-size:clamp(2.8rem,4.4vw,4.55rem)!important;line-height:1.02!important;letter-spacing:-.045em!important;color:#fff!important}
.subhero-copy p{font-size:17px!important;line-height:1.72!important;color:rgba(255,255,255,.92)!important;margin-top:17px!important}

.hero-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.92fr)!important;gap:52px!important;align-items:center!important}
.hero-copy h1{font-size:clamp(3rem,5vw,5.25rem)!important;line-height:.99!important;letter-spacing:-.05em!important}
.hero-copy .lead{font-size:18px!important;line-height:1.75!important;max-width:690px!important;color:var(--muted)!important;margin-top:20px!important}
.hero-visual{min-height:560px!important;position:relative!important}
.visual-main{position:absolute!important;inset:0 0 0 52px!important;border-radius:32px!important;overflow:hidden!important;box-shadow:var(--shadow)!important}
.visual-main img{width:100%!important;height:100%!important;object-fit:cover!important}
.visual-card{position:absolute!important;z-index:2!important;min-width:160px!important;border-radius:18px!important;background:rgba(255,255,255,.96)!important;border:1px solid #e8eaf1!important;padding:16px!important;box-shadow:var(--shadow-sm)!important}
.visual-card.one{left:0!important;top:54px!important}.visual-card.two{right:-2px!important;bottom:48px!important}
.visual-card strong{display:block!important;font-size:24px!important}.visual-card span{font-size:11.5px!important;color:var(--muted)!important}

/* homepage alignment */
.mission-grid,.home-premier-grid,.service-long-intro,.contact-location{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(360px,.82fr)!important;
  gap:44px!important;
  align-items:start!important;
}
.outsource-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.home-service-row{
  grid-template-columns:minmax(0,1fr) minmax(400px,.9fr)!important;
  align-items:stretch!important;
}
.home-service-copy{padding:34px!important}
.home-service-ba{min-height:430px!important}
.home-service-ba .compare{height:100%!important;min-height:400px!important}
.why-pixel-wrap{grid-template-columns:minmax(360px,.78fr) minmax(0,1.32fr)!important}
.why-pixel-copy{padding:60px 54px!important}
.why-pixel-media{min-height:600px!important}

/* generic cards */
.feature-grid,.outcome-grid,.usecase-grid,.portfolio-grid,.related-services-grid,.contact-direct-grid,.process-principles{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}
.quality-grid,.company-facts,.home-answer-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}
.about-answer-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.about-service-map{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}

/* before/after */
.ba-grid,.comparegrid{
  display:grid!important;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;
  gap:42px!important;
  align-items:center!important;
}
.compare-shell,.comparebox{max-width:100%!important}
.compare{position:relative!important;overflow:hidden!important;border-radius:18px!important;background:#e6e7eb!important}
.compare img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
.compare .after{clip-path:inset(0 50% 0 0)}
.compare-line,.cline{position:absolute!important;top:0!important;bottom:0!important;left:50%;width:2px!important;background:#fff!important}
.compare-handle,.handle{position:absolute!important;top:50%!important;left:50%;transform:translate(-50%,-50%)!important}
.multi-ba-v7,.ba-showcase-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.ba-v7-card,.ba-case{min-width:0!important}

/* service long pages */
.service-long-layout{display:grid!important;grid-template-columns:225px minmax(0,1fr)!important;gap:30px!important;align-items:start!important}
.service-toc{position:sticky!important;top:108px!important}
.service-long-content{min-width:0!important}
.component-grid,.detail-split{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.workflow-v7-step{grid-template-columns:46px minmax(0,1fr)!important}
.scope-table{width:100%!important;table-layout:fixed!important}
.scope-table th{width:30%!important}

/* services master */
.master-layout{display:grid!important;grid-template-columns:240px minmax(0,1fr)!important;gap:28px!important;align-items:start!important}
.master-nav{position:sticky!important;top:108px!important}
.deep-service-head{grid-template-columns:minmax(0,1fr) 300px!important}
.service-columns{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important}
.inclusion-list,.workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.table-wrap,.matrix-shell{max-width:100%!important;overflow:auto!important}
.service-matrix{min-width:960px!important}

/* legal/content pages */
.legal-hero{padding:112px 0 46px!important}
.prose{max-width:100%!important;overflow-wrap:anywhere!important}
.prose h2{margin-top:32px!important}
.prose h3{margin-top:22px!important}
.policy-index{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* forms/auth */
.form-shell,.formwrap{display:grid!important;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;gap:28px!important;align-items:start!important}
.field-grid,.fieldgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.field-group.full,.field.full{grid-column:1/-1!important}
.auth-shell{min-height:100vh!important;display:grid!important;place-items:center!important;padding:36px 18px!important}
.auth-card{width:min(520px,100%)!important}

/* footer */
.footer{background:var(--dark)!important;color:#c8c5d5!important;padding:58px 0 26px!important}
.footer-top{display:grid!important;grid-template-columns:minmax(280px,1.35fr) repeat(4,minmax(130px,.78fr))!important;gap:26px!important;align-items:start!important}
.footer-top>div{min-width:0!important}
.footer-brand-lockup{display:inline-flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important}
.footer-brand-lockup img{width:228px!important}
.footer-tagline{width:228px!important;text-align:center!important;font-size:9px!important;letter-spacing:.1em!important}
.footer-desc{max-width:390px!important;font-size:13.5px!important;line-height:1.7!important}
.footer-contact{gap:10px!important}
.support-line{font-size:12.5px!important}
.footer-col h4{font-size:13px!important;margin-bottom:14px!important}
.footer-links{display:grid!important;gap:8px!important}
.footer-links a{font-size:12.5px!important;line-height:1.45!important}
.trustpilot-box{max-width:360px!important}
.footer-stars span{width:18px!important;height:18px!important}
.footer-stars svg{width:12px!important;height:12px!important}
.subscribe{grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)!important;gap:26px!important;padding:24px!important}
.subscribe-form{grid-template-columns:minmax(0,1fr) auto!important}
.footer-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important}

/* technical/SEO helpers */
.seo-answer-strip{
  border:1px solid #e4e6ef;
  border-left:4px solid var(--primary);
  background:#fff;
  border-radius:16px;
  padding:18px 20px;
  margin:20px 0 0;
}
.seo-answer-strip strong{display:block;font-size:13px;color:#343e55}
.seo-answer-strip p{font-size:13.5px!important;line-height:1.68!important;color:var(--muted)!important;margin-top:5px!important}
.tech-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.tech-links a{font-size:11px;color:#8f8aa1;text-decoration:underline;text-underline-offset:2px}

/* responsive */
@media(max-width:1320px){
  .nav{display:none!important}
  .mtoggle{display:grid!important}
  .footer-top{grid-template-columns:minmax(280px,1.2fr) repeat(2,minmax(150px,1fr))!important}
  .footer-top>div:first-child{grid-column:1/-1}
  .about-service-map{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:1050px){
  .container{width:min(var(--site-width),calc(100% - 32px))!important}
  .hero-grid,.mission-grid,.home-premier-grid,.service-long-intro,.contact-location,.service-overview-grid,.service-columns,.deep-service-head,.prep-grid{
    grid-template-columns:1fr!important;
  }
  .hero-visual{min-height:500px!important}
  .visual-main{inset:0 0 0 40px!important}
  .subhero-content{grid-template-columns:1fr!important}
  .subhero-copy{grid-column:1!important;padding-left:0!important;margin-left:auto!important}
  .subhero:after{background:linear-gradient(90deg,rgba(12,14,16,.36),rgba(12,14,16,.72))!important}
  .home-service-row{grid-template-columns:1fr!important}
  .home-service-row.reverse .home-service-copy,.home-service-row.reverse .home-service-ba{order:initial!important}
  .why-pixel-wrap{grid-template-columns:1fr!important}
  .why-pixel-media{min-height:420px!important}
  .service-long-layout,.master-layout{grid-template-columns:1fr!important}
  .service-toc,.master-nav{position:static!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .service-toc>strong,.master-nav>.mega-title,.master-nav>.megtitle{grid-column:1/-1!important}
  .feature-grid,.outcome-grid,.usecase-grid,.portfolio-grid,.related-services-grid,.contact-direct-grid,.process-principles{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .quality-grid,.company-facts,.home-answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .outsource-steps{grid-template-columns:1fr!important}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-top>div:first-child{grid-column:1/-1!important}
  .subscribe{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  :root{--site-gutter:12px}
  .hrow{height:78px!important}
  .brand-lockup img{width:172px!important}
  .brand-tagline{width:172px!important;font-size:7.6px!important}
  .mobile{top:78px!important}
  .hero-grid{gap:26px!important}
  .hero-copy h1{font-size:2.75rem!important}
  .hero-visual{min-height:390px!important}
  .visual-main{inset:0 0 0 20px!important;border-radius:24px!important}
  .visual-card{min-width:132px!important;padding:12px!important}
  .visual-card strong{font-size:20px!important}
  .section-head,.head{flex-direction:column!important;align-items:flex-start!important;gap:12px!important}
  .section-title,.title{font-size:2.05rem!important}
  section{padding:54px 0!important}
  .subhero{min-height:430px!important}
  .subhero-content{min-height:430px!important}
  .subhero-copy h1{font-size:2.55rem!important}
  .feature-grid,.outcome-grid,.usecase-grid,.portfolio-grid,.related-services-grid,.contact-direct-grid,.process-principles,.quality-grid,.company-facts,.home-answer-grid,.about-answer-grid,.about-service-map,.component-grid,.detail-split,.multi-ba-v7,.ba-showcase-grid,.inclusion-list,.workflow-steps,.field-grid,.fieldgrid,.policy-index,.pricing-grid{
    grid-template-columns:1fr!important;
  }
  .ba-grid,.comparegrid,.form-shell,.formwrap{grid-template-columns:1fr!important}
  .compare{height:350px!important}
  .home-service-ba .compare{min-height:350px!important;height:350px!important}
  .why-pixel-copy{padding:36px 22px!important}
  .why-pixel-points{grid-template-columns:1fr!important}
  .service-toc,.master-nav{grid-template-columns:1fr 1fr!important}
  .workflow-row{grid-template-columns:44px minmax(0,1fr)!important}
  .workflow-tag{grid-column:2!important;justify-self:start!important}
  .cta-box,.cta,.service-deep-cta{grid-template-columns:1fr!important}
  .footer-top{grid-template-columns:1fr!important}
  .footer-top>div:first-child{grid-column:auto!important}
  .subscribe-form{grid-template-columns:1fr!important}
  .footer-bottom{flex-direction:column!important;align-items:flex-start!important}
}
@media(max-width:500px){
  .service-toc,.master-nav{grid-template-columns:1fr!important}
  .hero-visual{min-height:340px!important}
  .visual-card.two{right:4px!important;bottom:18px!important}
  .visual-card.one{left:4px!important;top:20px!important}
}
