*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:960px}
section.band{padding:86px 0}
@media(max-width:760px){
section.band{padding:56px 0}
}
section.band.alt{background:var(--paper)}
section.band.navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.14}
h1{font-weight:800;font-size:clamp(32px,4.7vw,52px);letter-spacing:-.02em}
h2{font-weight:800;font-size:clamp(26px,3.5vw,40px);letter-spacing:-.02em}
h3{font-weight:600;font-size:20px;letter-spacing:-.01em}
h4{font-weight:600;font-size:15px}
/* Heading levels below were corrected so the document outline is valid for
screen readers. These classes carry the original visual size, so nothing
on the page moves. */
.h-as-h3{font-weight:600;font-size:20px;letter-spacing:-.01em}
.h-as-h4{font-weight:600;font-size:15px;letter-spacing:normal}
@media(max-width:760px){.h-as-h3{font-size:16.5px}}
.fcol h2{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-glow);margin:0 0 20px}
.fcol h2{margin:0 0 13px;font-size:10.5px}
.tl-body h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.tl-body h3{font-size:16.5px}
.step h2{margin-bottom:9px}
p{margin:0 0 1.05em}
.lede{font-size:17px;line-height:1.65;color:var(--muted);max-width:64ch}
.small{font-size:13.5px;color:var(--dim);line-height:1.55}
.kicker{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:14px}
section.navy .kicker,.navy .kicker{color:var(--blue-glow)}
.sec-head h2::after,.bar-after::after{content:"";display:block;width:52px;height:3px;background:var(--blue);border-radius:2px;margin-top:18px}
section.navy .sec-head h2::after{background:var(--blue-glow)}
.sec-head{max-width:64ch;margin-bottom:40px}
.sec-head .lede{margin-top:20px}
.hl{color:var(--blue)}
section.navy .hl,.navy .hl{color:var(--blue-glow)}
.utility{background:var(--navy);color:#fff;font-size:13px}
.utility-in{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding:9px 0;min-height:38px}
.utility a{color:rgba(255,255,255,.86);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.utility a:hover{color:#fff}
.utility .sep{margin-left:auto;color:rgba(255,255,255,.55)}
@media(max-width:760px){
.utility .sep{display:none}
.utility-in{gap:6px 18px;font-size:12px}
}
.brand .b2{color:var(--blue)}
nav.main a:hover{color:var(--ink)}
nav.main a.active{color:var(--blue);font-weight:600}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue);border-radius:2px}
.head-cta:active{background:var(--blue-press)}
@media(max-width:940px){
nav.main.open{display:flex}
nav.main a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
nav.main a.active::after{display:none}
.menu-btn{display:block}
}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--body);font-weight:600;font-size:15px;padding:14px 24px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:background .16s,transform .16s,border-color .16s,color .16s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover);transform:translateY(-1px)}
.btn-primary:active{background:var(--blue-press)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
section.navy .btn-ghost,.navy .btn-ghost{background:transparent;border-color:var(--navy-line);color:#fff}
section.navy .btn-ghost:hover,.navy .btn-ghost:hover{border-color:var(--blue-glow);color:var(--blue-glow)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero{position:relative;padding:78px 0 64px;overflow:hidden;background:linear-gradient(170deg,var(--blue-tint) 0%,#fff 62%)}
.hero::after{content:"";position:absolute;top:-180px;right:-140px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(0,75,238,.10) 0%,transparent 66%);pointer-events:none}
.hero-in{position:relative;z-index:1;max-width:900px}
@media(max-width:760px){
.hero{padding:52px 0 44px}
}
.stat-strip{background:var(--blue);color:#fff}
.stat-strip .stat:first-child{border-left:none}
.stats-light .sn{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--blue)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){
.g3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:660px){
.g2,.g3{grid-template-columns:1fr}
}
.cell .idx{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:14px}
.cell h3{margin-bottom:9px}
.cell p{color:var(--muted);font-size:15px;margin-bottom:0}
.cell ul{margin:16px 0 0;padding:0;list-style:none}
.cell li{font-size:14px;color:var(--muted);padding:7px 0 7px 16px;position:relative;border-top:1px solid var(--line)}
.cell li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.cell .badge{position:absolute;top:20px;right:22px;font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:var(--blue-tint);border-radius:8px;padding:5px 9px}
.cell.ghost::before{content:attr(data-n);position:absolute;right:-8px;bottom:-30px;font-family:var(--display);font-weight:800;font-size:130px;line-height:1;color:var(--blue-tint-2);letter-spacing:-.05em;pointer-events:none;z-index:0}
.cell.ghost > *{position:relative;z-index:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tag{font-family:var(--body);font-size:11.5px;font-weight:500;color:var(--muted);background:var(--paper-2);border-radius:8px;padding:5px 9px;white-space:nowrap}
.marquee{overflow:hidden;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:mq 46s linear infinite}
.marquee + .marquee .marquee-track{animation-duration:58s;animation-direction:reverse}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
.marquee-track{animation:none;flex-wrap:wrap;width:auto}
}
.marquee-track span{font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 16px;white-space:nowrap}
section.alt .marquee-track span{background:#fff}
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:96px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.step .n{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--blue);padding-top:3px}
.step h3{margin-bottom:9px}
.step p{color:var(--muted);margin-bottom:0;max-width:68ch;font-size:15.5px}
@media(max-width:600px){
.step{grid-template-columns:1fr;gap:8px}
}
.panel-head{padding:26px 28px 22px;background:var(--navy);color:#fff}
.panel-head h3{color:#fff;font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.panel-head .sub{font-size:13.5px;color:rgba(255,255,255,.7)}
.chip{display:inline-block;font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-glow);border:1px solid var(--navy-line);border-radius:8px;padding:5px 10px;margin-bottom:14px}
.panel-body{padding:26px 28px 28px}
.panel-body p{color:var(--muted);font-size:15.5px}
.spec{display:grid;margin-top:20px;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.spec div::before{content:"\2713";color:var(--green);font-weight:700}
@media(max-width:660px){
.panel-head,.panel-body{padding-left:20px;padding-right:20px}
}
.callout{border:1px solid var(--blue-line);border-left:3px solid var(--blue);border-radius:8px;background:var(--blue-tint);padding:20px 22px;font-size:15px;color:var(--muted)}
.callout b{color:var(--ink)}
.callout p:last-child{margin-bottom:0}
section.navy .callout{background:rgba(93,154,255,.08);border-color:var(--navy-line);border-left-color:var(--blue-glow);color:rgba(255,255,255,.82)}
section.navy .callout b{color:#fff}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
th{background:var(--paper-2);font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
td b{color:var(--ink);font-weight:600}
tr:last-child td{border-bottom:none}
.work{display:grid;gap:16px}
.wrow .wn{font-family:var(--display);font-weight:800;font-size:18px;color:var(--blue);letter-spacing:-.03em;padding-top:3px}
.wrow h3{margin-bottom:8px}
.wrow p{color:var(--muted);font-size:15px;margin:0;max-width:62ch}
.wrow .wmeta{font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:right;white-space:nowrap;padding-top:5px;line-height:1.8}
@media(max-width:760px){
.wrow{grid-template-columns:auto 1fr;gap:16px}
.wrow .wmeta{grid-column:2;text-align:left;padding-top:8px}
}
.check{display:grid;border-top:1px solid var(--line)}
.check div{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted);position:relative}
.check div::before{content:"\2713";position:absolute;left:0;top:12px;color:var(--green);font-weight:700}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-family:var(--display);font-weight:700;font-size:21px;line-height:1;flex:none}
details[open] summary::after{content:"\2013"}
details p{margin:12px 0 0;color:var(--muted);max-width:74ch;font-size:15.5px}
.cta{position:relative;border-radius:14px;padding:52px 46px;overflow:hidden;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
.cta::after{content:"";position:absolute;right:-120px;top:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(93,154,255,.18) 0%,transparent 68%);pointer-events:none}
.cta > *{position:relative;z-index:1}
.cta h2{color:#fff}
.cta h2::after{content:"";display:block;width:52px;height:3px;background:var(--blue-glow);border-radius:2px;margin-top:18px}
.cta .lede{color:rgba(255,255,255,.78)}
@media(max-width:660px){
.cta{padding:36px 24px}
}
form.k{display:grid;gap:18px;max-width:640px}
.field{display:grid;gap:7px}
label{font-family:var(--body);font-weight:600;font-size:13px;color:var(--ink)}
input,select,textarea{font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:13px 14px;width:100%}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
textarea{min-height:140px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){
.two{grid-template-columns:1fr}
}
.crow{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.crow .ck{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.crow a{color:var(--blue);text-decoration:none;font-weight:500}
.crow a:hover{text-decoration:underline}
@media(max-width:520px){
.crow{grid-template-columns:1fr;gap:4px}
}
@media(max-width:860px){
.fgrid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:520px){
.fgrid{grid-template-columns:1fr}
}
footer .brand{color:#fff}
footer .brand .b2{color:var(--blue-glow)}
.fgrid h4{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-glow);margin-bottom:16px}
footer .small{color:rgba(255,255,255,.6)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){
.pair{grid-template-columns:1fr}
}
.contact-split{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){
.contact-split{grid-template-columns:1fr;gap:44px}
}
.ic{width:22px;height:22px;display:block}
.ibx{width:46px;height:46px;border-radius:12px;background:var(--blue-tint);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none;border:1px solid var(--blue-line);transition:background .2s,color .2s,transform .2s}
.cell:hover .ibx,.wrow:hover .ibx{background:var(--blue);color:#fff;transform:translateY(-2px)}
.ibx.round{border-radius:50%}
section.navy .ibx,.navy .ibx{background:rgba(93,154,255,.12);border-color:var(--navy-line);color:var(--blue-glow)}
.ibx.sm{width:36px;height:36px;border-radius:10px;margin-bottom:0}
.ibx.sm .ic{width:18px;height:18px}
.inline-ic .ic{width:17px;height:17px;color:var(--blue);flex:none}
:root{/* brand blue */
--blue:#004BEE;--blue-hover:#003CC0;--blue-bright:#3D82FF;--blue-glow:#5E9AFF;--blue-tint:#EAF1FF;--blue-tint-2:#D5E3FF;--blue-line:#BFD6FF;--blue-press:#002E95;/* navy */
--navy:#0A1330;--navy-2:#0E1B41;--navy-3:#132352;--navy-line:rgba(120,160,255,.2);/* neutrals + semantic */
--paper:#F5F8FF;--paper-2:#EDF2FD;--line:#E1E8F5;--line-2:#CBD6EA;--ink:#0D1424;--muted:#5B6580;--dim:#8892A8;--green:#12A05C;/* system */
--container:1160px;--gutter:24px;--display:"Poppins",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--spark:var(--blue);--spark-soft:var(--blue-hover);--fg:var(--ink);--fg-2:var(--muted);--fg-3:var(--dim);--surface:#fff;--bg:#fff;--raised:var(--paper);--mono:var(--body);--sh-1:0 1px 2px rgba(13,20,36,.04), 0 1px 3px rgba(13,20,36,.05);--sh-2:0 2px 4px rgba(13,20,36,.04), 0 12px 24px -14px rgba(13,20,36,.16);--sh-3:0 4px 8px rgba(13,20,36,.05), 0 24px 48px -24px rgba(0,75,238,.28)}
.cell{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 26px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;box-shadow:var(--sh-1)}
.cell:hover{border-color:var(--blue-line);box-shadow:var(--sh-3);transform:translateY(-2px)}
.panel{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh-2)}
.wrow:hover{border-color:var(--blue-line);box-shadow:var(--sh-3)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--sh-1)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;font-size:14px;text-decoration:none}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
section.navy a:focus-visible,footer a:focus-visible,.utility a:focus-visible{outline-color:var(--blue-glow)}
.hero-art-wrap .photo,.hero-art-wrap .photo img{opacity:1 !important;transform:none !important}
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
}
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust-it:first-child{border-left:none}
@media(max-width:520px){
.trust-it{border-left:none}
.trust-it+.trust-it{border-top:1px solid var(--line)}
}
.trust-it b{display:block;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:3px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media(max-width:940px){
.tiers{grid-template-columns:1fr}
}
.tier{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.tier.feature{border-color:var(--blue);box-shadow:var(--sh-3)}
.tier-head{padding:26px 26px 22px;border-bottom:1px solid var(--line)}
.tier.feature .tier-head{background:var(--blue-tint);border-bottom-color:var(--blue-line)}
.tier-head h3{font-size:21px;font-weight:700;margin-bottom:6px}
.tier-head .tdesc{font-size:14px;color:var(--muted);margin:0}
.tier-price{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--blue);margin:18px 0 4px;line-height:1}
.tier-price small{font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0;display:block;margin-top:7px}
.tier-body{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1}
.tier-body .check{border-top:none;margin-bottom:20px}
.tier-body .check div:first-child{border-top:1px solid var(--line)}
.tier-body .btn{width:100%;justify-content:center;margin-top:auto}
.tflag{display:inline-block;font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:8px;padding:5px 10px;margin-bottom:12px}
.defs{display:grid;gap:0;border-top:1px solid var(--line)}
.defs > div{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.defs dt,.defs .dt{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);margin:0}
.defs dd,.defs .dd{margin:0;font-size:15px;color:var(--muted);max-width:68ch}
@media(max-width:760px){
.defs > div{grid-template-columns:1fr;gap:8px}
}
.err{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 0}
.err .code{font-family:var(--display);font-weight:800;font-size:96px;color:var(--blue-tint-2);letter-spacing:-.05em;line-height:1}
@media print{
.utility,.site-head,.menu-btn,.marquee,.cta,.btn,footer.site-foot .flinks,.skip{display:none !important}
body{background:#fff;color:#000;font-size:11pt}
section.band{padding:18pt 0;break-inside:avoid}
section.band.navy,footer.site-foot,.panel-head,.stat-strip{background:#fff !important;color:#000 !important}
.panel-head h3,.stat-strip .sn,footer .brand{color:#000 !important}
.cell,.panel,.wrow,.tier{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
.rv{opacity:1 !important;transform:none !important}
}
.art{width:100%;height:auto;display:block}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
@media(max-width:940px){
.hero-grid{grid-template-columns:1fr;gap:36px}
.hero-grid .hero-copy{max-width:none}
}
.art-frame{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:22px;box-shadow:var(--sh-1);overflow:hidden}
.art-frame.tight{padding:0;background:transparent;border:none;box-shadow:none}
.psplit{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
@media(max-width:900px){
.psplit{grid-template-columns:1fr;gap:26px}
}
.psplit.rev .psplit-art{order:-1}
@media(max-width:900px){
.psplit.rev .psplit-art{order:0}
}
.wrow{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;display:grid;grid-template-columns:auto 120px 1fr auto;gap:22px;align-items:start;transition:border-color .2s,box-shadow .2s;box-shadow:var(--sh-1)}
@media(max-width:900px){
.wrow{grid-template-columns:auto 1fr}
.wrow .wthumb{display:none}
}
.wthumb{width:120px}
.wthumb .thumb{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center}
@media(max-width:900px){
.split{grid-template-columns:1fr;gap:34px}
}
.split.rev .split-art{order:-1}
@media(max-width:900px){
.split.rev .split-art{order:0}
}
.split .sec-head{margin-bottom:0}
.cap{font-size:12.5px;color:var(--dim);text-align:center;margin-top:14px}
.photo{position:relative;border-radius:14px;overflow:hidden;background:var(--navy);box-shadow:var(--sh-2);isolation:isolate}
.photo img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(165deg,rgba(0,75,238,.10) 0%,transparent 42%,rgba(10,19,48,.42) 100%)}
.photo:hover img{transform:scale(1.035)}
.photo.flat{box-shadow:var(--sh-1)}
.photo .plabel{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;color:#fff;font-size:13.5px;line-height:1.5;background:linear-gradient(transparent,rgba(10,19,48,.86))}
.photo .plabel b{display:block;font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:3px}
.photo.tall img{aspect-ratio:4/5;object-fit:cover}
.hero-art-wrap .photo{border-radius:16px}
.hero-art-wrap .photo::before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;z-index:3;pointer-events:none;border-radius:16px;border:1px solid rgba(255,255,255,.14)}
.banner{position:relative;border-radius:0;overflow:hidden;background:var(--navy)}
.banner img{width:100%;height:auto;display:block;opacity:.9}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,19,48,.88) 0%,rgba(10,19,48,.45) 55%,transparent 100%)}
.banner-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.banner-copy .wrap{width:100%}
.banner-copy h2,.banner-copy p{color:#fff;max-width:44ch}
.banner-copy h2::after{background:var(--blue-glow)}
.banner-copy p{color:rgba(255,255,255,.8)}
@media(max-width:760px){
.banner img{min-height:300px;object-fit:cover}
.banner::after{background:linear-gradient(180deg,rgba(10,19,48,.55) 0%,rgba(10,19,48,.9) 100%)}
}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){
.gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.gallery{grid-template-columns:1fr}
}
.gallery .photo img{aspect-ratio:3/2;object-fit:cover}
.stat-strip .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-strip .stat{padding:34px 0;border-left:none;position:relative;display:flex;flex-direction:column}
.stat-strip .stat + .stat{padding-left:34px}
.stat-strip .stat:not(:last-child){padding-right:34px}
.stat-strip .stat + .stat::before{content:"";position:absolute;left:0;top:32px;bottom:32px;width:1px;background:rgba(255,255,255,.24)}
.stat-strip .sn{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.stat-strip .sl{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:10px;line-height:1.45;max-width:26ch}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust-it{display:flex;gap:14px;align-items:flex-start;padding:30px 0;border-left:none;border-top:none;position:relative}
.trust-it + .trust-it{padding-left:34px}
.trust-it:not(:last-child){padding-right:34px}
.trust-it + .trust-it::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:var(--line)}
.trust-it > div{min-width:0}
.trust-it span{font-size:13.5px;color:var(--muted);line-height:1.5;display:block;max-width:30ch}
@media(max-width:1000px){
.stat-strip .stat + .stat{padding-left:24px}
.stat-strip .stat:not(:last-child){padding-right:24px}
.trust-it + .trust-it{padding-left:24px}
.trust-it:not(:last-child){padding-right:24px}
}
@media(max-width:860px){
.trust-in{grid-template-columns:repeat(2,1fr)}
.trust-it{padding:26px 0}
.trust-it:nth-child(odd){border-left:none;padding-left:0;padding-right:22px}
.trust-it:nth-child(even){padding-left:22px;padding-right:0}
.trust-it:nth-child(odd)::before{display:none}
.trust-it:nth-child(even)::before{display:block;top:26px;bottom:26px}
.trust-it:nth-child(n+3){border-top:1px solid var(--line);padding-top:26px}
}
@media(max-width:760px){
.stat-strip .stats{grid-template-columns:repeat(2,1fr)}
.stat-strip .stat{padding:28px 0}
.stat-strip .stat:nth-child(odd){border-left:none;padding-left:0;padding-right:22px}
.stat-strip .stat:nth-child(even){padding-left:22px;padding-right:0}
.stat-strip .stat:nth-child(odd)::before{display:none}
.stat-strip .stat:nth-child(even)::before{display:block;top:26px;bottom:26px}
.stat-strip .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2);padding-top:28px}
.stat-strip .sn{font-size:29px}
}
@media(max-width:520px){
.trust-in{grid-template-columns:1fr}
.trust-it,.trust-it:nth-child(odd),.trust-it:nth-child(even){padding-left:0;padding-right:0;padding-top:22px;padding-bottom:22px}
.trust-it::before{display:none !important}
.trust-it + .trust-it{border-top:1px solid var(--line)}
.trust-it span{max-width:none}
}
.stats-light .stat{background:#fff;padding:26px 22px;display:flex;flex-direction:column}
.stats-light .sl{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.45}
@media(max-width:900px){
.split.wide-art{grid-template-columns:1fr;gap:32px}
}
.split.wide-art .photo img{width:100%;height:auto}
.brand img.logo.foot{height:46px;margin-bottom:18px}
@media(max-width:520px){
.brand img.logo{height:34px}
}
.brand svg{width:26px;height:26px;flex:none;display:none}
@media(max-width:1080px){
.fbrand{grid-column:1/-1;padding-bottom:36px;border-bottom:1px solid var(--navy-line)}
.fdesc{max-width:60ch}
}
@media(max-width:480px){
footer.site-foot{padding:52px 0 24px}
.fbrand{padding-bottom:28px}
}
@media(max-width:1080px){
.fgrid{grid-template-columns:repeat(4,1fr);gap:36px 32px}
}
@media(max-width:820px){
.fgrid{grid-template-columns:repeat(2,1fr);gap:34px 28px}
}
@media(max-width:480px){
.fgrid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:760px){
.fgrid{grid-template-columns:1fr;gap:36px}
}
.fbrand{border:none;padding-bottom:0}
@media(max-width:480px){
.fbot{margin-top:34px;flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:900px){
.fgrid{grid-template-columns:1fr 1fr;gap:36px 32px}
.fbrand{grid-column:1/-1;padding-bottom:32px;border-bottom:1px solid var(--navy-line)}
}
@media(max-width:560px){
.fgrid{grid-template-columns:1fr;gap:30px}
}
footer .fcol address{margin-top:0;padding-top:0;border-top:none}
address{font-style:normal;font-size:15px;color:var(--muted);line-height:1.7}
.crow address{font-size:15px;color:var(--muted);margin:0}
footer address, footer .foffice address, section.navy address, .cta address, .banner-copy address{color:rgba(255,255,255,.72)}
footer address{font-style:normal;font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.7;margin-top:20px;padding-top:18px;border-top:1px solid var(--navy-line)}
footer.site-foot{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:76px 0 28px}
.fgrid{display:grid;grid-template-columns:1.55fr 1fr .92fr 1.02fr 1.05fr;gap:44px 40px;align-items:start}
@media(max-width:1120px){
.fgrid{grid-template-columns:repeat(4,1fr);gap:40px 32px}
.fbrand{grid-column:1/-1;padding-bottom:38px;border-bottom:1px solid var(--navy-line)}
.fbrand .fdesc{max-width:56ch}
.fbrand .fcontact-rows{grid-template-columns:repeat(3,auto);justify-content:start;gap:14px 44px}
}
@media(max-width:780px){
.fgrid{grid-template-columns:repeat(2,1fr);gap:34px 28px}
.fbrand .fcontact-rows{grid-template-columns:1fr;gap:14px}
}
@media(max-width:470px){
.fgrid{grid-template-columns:1fr;gap:30px}
}
.fbrand .brand{display:block;margin-bottom:22px}
.fbrand .brand img.logo.foot{height:44px;margin:0}
.fdesc{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.72);max-width:40ch;margin:0 0 26px;margin-bottom:0}
.fcontact-rows{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.fcontact-rows li{display:flex;align-items:flex-start;gap:13px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.fcontact-rows a{color:rgba(255,255,255,.78);text-decoration:none;transition:color .16s;word-break:normal;overflow-wrap:break-word}
.fcontact-rows a:hover{color:#fff}
.fic{width:34px;height:34px;flex:none;border-radius:50%;background:rgba(93,154,255,.12);border:1px solid var(--navy-line);display:inline-flex;align-items:center;justify-content:center;color:var(--blue-glow)}
.fic .ic{width:15px;height:15px}
.fsocial{display:flex;gap:10px}
.fsocial a{width:38px;height:38px;border-radius:50%;border:1px solid var(--navy-line);background:rgba(93,154,255,.08);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);transition:background .18s,border-color .18s,color .18s,transform .18s}
.fsocial a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.fsocial .ic{width:17px;height:17px}
.fcol h4{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-glow);margin:0 0 20px}
.flinks{display:grid;gap:13px;align-content:start}
.flinks a{text-decoration:none;font-size:14.5px;color:rgba(255,255,255,.74);transition:color .16s,padding-left .16s;line-height:1.45;width:fit-content}
.flinks a:hover{color:#fff}
.fstart-copy{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.72);margin:0 0 20px}
.fbtn{width:100%;justify-content:center;padding:13px 18px;font-size:14.5px;margin-bottom:11px}
.fbtn .ic{width:17px;height:17px;flex:none}
.fstart .btn-ghost{background:rgba(255,255,255,.05);border-color:var(--navy-line);color:#fff}
.fstart .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--blue-glow);color:var(--blue-glow)}
.fbot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--navy-line);font-size:13.5px;color:rgba(255,255,255,.55);align-items:center}
.ftagline{color:var(--blue-glow);font-weight:600}
@media(max-width:520px){
.fbot{flex-direction:column;align-items:flex-start;gap:10px;margin-top:38px}
}
.globe-band{overflow:hidden;position:relative}
.globe-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;margin-top:8px}
@media(max-width:980px){
.globe-grid{grid-template-columns:1fr;gap:40px}
.globe-art{order:-1}
}
.hq-pill{display:inline-flex;align-items:center;gap:9px;background:var(--blue-tint);border:1px solid var(--blue-line);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--blue);margin-bottom:26px}
.hq-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;position:relative}
.hq-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--blue);opacity:.5;animation:hqpulse 2.4s ease-out infinite}
@keyframes hqpulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){
.hq-dot::after{animation:none;opacity:.35}
}
.mlabel{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.mchips{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){
.mchips{grid-template-columns:1fr}
}
.mchip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;transition:border-color .18s,box-shadow .18s,transform .18s}
.mchip:hover{border-color:var(--blue-line);box-shadow:var(--sh-2);transform:translateY(-1px)}
.mchip.hq{background:var(--blue-tint);border-color:var(--blue-line)}
.mflag{grid-row:1/3;font-size:20px;line-height:1}
.mname{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.mregion{font-size:12px;color:var(--dim);line-height:1.3}
.gstats{display:grid;gap:10px}
.gstat{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 16px}
.gsn{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--blue);line-height:1.25}
.gsl{font-size:13px;color:var(--muted);line-height:1.5}
.gsl b{display:block;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:2px}
@media(max-width:420px){
.gstat{grid-template-columns:1fr;gap:6px}
}
.globe-art{display:flex;flex-direction:column;align-items:center}
.globe-wrap{position:relative;width:100%;max-width:460px;aspect-ratio:1}
.globe-wrap::before{content:"";position:absolute;inset:-14%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(0,75,238,.13) 0%,rgba(0,75,238,.05) 46%,transparent 68%)}
canvas.globe{width:100%;height:100%;display:block;position:relative;z-index:1}
.globe-art .cap{margin-top:6px}
@media(max-width:1040px){
.brand img.logo{height:46px}
.head-in{height:80px}
}
@media(max-width:1080px){
nav.main{gap:17px}
nav.main a{font-size:14px}
.head-cta{padding:11px 16px;font-size:14px}
}
@media(max-width:940px){
nav.main{position:absolute;top:80px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gutter) 18px;display:none;box-shadow:0 18px 30px -22px rgba(13,20,36,.3)}
.head-cta{margin-top:14px;text-align:center;padding:13px 20px;justify-content:center}
}
@media(max-width:560px){
nav.main{top:72px}
}
.split.wide-art{grid-template-columns:.92fr 1.18fr;gap:52px;align-items:start}
.split.wide-art .sec-head{margin-bottom:0}
.grid.why-cards{margin-top:40px}
@media(max-width:900px){
.grid.why-cards{margin-top:32px}
}
nav.main{margin-left:auto;display:flex;align-items:center;gap:24px;flex:0 1 auto;min-width:0}
nav.main a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);position:relative;padding:4px 0;transition:color .16s;white-space:nowrap;flex:0 0 auto}
@media(max-width:1240px){
nav.main{gap:19px}
nav.main a{font-size:14.5px}
.head-cta{padding:12px 19px;font-size:14.5px}
.brand img.logo{height:50px}
}
@media(max-width:1100px){
.menu-btn{display:block;margin-left:auto}
nav.main{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -22px rgba(13,20,36,.3);flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 20px;display:none;margin-left:0}
nav.main.open{display:flex}
nav.main a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;width:auto}
nav.main a.active::after{display:none}
nav.main a.active{color:var(--blue)}
.head-cta{margin-top:16px;width:100%;padding:14px 20px}
.head-in{height:84px}
.brand img.logo{height:48px}
}
@media(min-width:1101px){
.menu-btn{display:none}
nav.main{display:flex !important;position:static}
}
@media(max-width:560px){
.head-in{height:72px}
.brand img.logo{height:40px}
}
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line);overflow:visible}
.site-head .wrap{max-width:1280px;width:100%}
.brand{display:flex;align-items:center;gap:0;text-decoration:none;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap;color:var(--ink);flex:0 0 auto;min-width:0}
.brand img.logo{height:52px;width:auto;display:block;flex:none;max-width:none}
.head-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.head-cta{text-decoration:none;font-size:15px;font-weight:600;padding:12px 22px;border-radius:8px;background:var(--blue);color:#fff;white-space:nowrap;transition:background .16s,transform .16s;flex:0 0 auto !important;line-height:1;display:inline-flex;align-items:center;width:auto !important;min-width:max-content;justify-content:center;margin-top:0 !important}
.head-cta:hover{background:var(--blue-hover);transform:translateY(-1px)}
.menu-btn{display:inline-flex;margin-left:0;background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:11px 15px;color:var(--ink);font-family:var(--body);font-size:14.5px;font-weight:600;cursor:pointer;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
.menu-btn:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:1279px){
nav.main{position:absolute;top:100%;left:0;right:0;width:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 34px -24px rgba(13,20,36,.34);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;display:none;margin:0}
nav.main.open{display:flex}
nav.main a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:16px;width:auto;white-space:normal}
nav.main a:last-child{border-bottom:none}
nav.main a.active{color:var(--blue)}
nav.main a.active::after{display:none}
nav.main .head-cta{display:none}
}
@media(min-width:1280px){
.menu-btn{display:none !important}
nav.main{display:flex !important;position:static;flex-direction:row;align-items:center;gap:26px;padding:0;border:none;box-shadow:none;background:none;width:auto;margin-left:auto;flex:0 0 auto}
nav.main a{border:none;padding:5px 0;font-size:15px;white-space:nowrap}
nav.main .head-cta{display:inline-flex}
.head-actions .head-cta{display:none}
}
@media(max-width:620px){
.brand img.logo{height:40px}
.head-cta{padding:11px 16px;font-size:14px}
.menu-btn{padding:10px 12px;font-size:14px}
}
@media(max-width:420px){
.head-actions .head-cta{display:none}
}
nav.main a.head-cta:active, a.head-cta:active{background:var(--blue-press);color:#fff !important}
nav.main a.head-cta::after{display:none !important}
nav.main a.head-cta.active{color:#fff !important}
a.head-cta{min-width:max-content;white-space:nowrap;text-align:center}
nav.main a.head-cta, .head-actions a.head-cta, a.head-cta{color:#fff !important;background:var(--blue);border:none;font-weight:600 !important;padding:15px 30px !important;font-size:15.5px !important;line-height:1 !important;border-radius:9px !important;letter-spacing:-.005em;box-shadow:0 8px 18px -10px rgba(0,75,238,.55);transition:background .16s, transform .16s, box-shadow .16s}
nav.main a.head-cta:hover, .head-actions a.head-cta:hover, a.head-cta:hover{color:#fff !important;background:var(--blue-hover);transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(0,75,238,.6)}
@media(max-width:1279px){
.head-actions a.head-cta{padding:14px 26px !important;font-size:15px !important}
}
@media(max-width:620px){
.head-actions a.head-cta{padding:12px 18px !important;font-size:14px !important;box-shadow:none}
}
.head-in{display:flex;align-items:center;gap:16px;height:92px;flex-wrap:nowrap;min-width:0;justify-content:space-between}
@media(max-width:1279px){
.head-in{height:88px}
}
@media(max-width:620px){
.head-in{height:74px;gap:10px}
}
.caps-track{display:flex;gap:10px;width:max-content;animation:capscroll 48s linear infinite}
@keyframes capscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.caps:hover .caps-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.caps-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}
.cap-chip{flex:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;box-shadow:0 1px 2px rgba(13,20,36,.03)}
.proof-stats{display:grid;grid-template-columns:repeat(5,1fr);background:linear-gradient(120deg,var(--blue) 0%,#0B3FC4 100%);position:relative}
.proof-stats::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% -30%,rgba(255,255,255,.16),transparent 58%)}
.pn i{font-style:normal;opacity:.66;font-size:.72em;margin-left:1px}
.proof-trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line)}
.pt-ic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--blue-tint);border:1px solid var(--blue-line);color:var(--blue);display:inline-flex;align-items:center;justify-content:center}
.pt-ic .ic{width:17px;height:17px}
.proof-trust b{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.proof-trust span span,.proof-trust li > span:last-child{font-size:13px;color:var(--muted);line-height:1.5;display:block}
@media(max-width:1100px){
.proof-stats{grid-template-columns:repeat(3,1fr)}
.pstat:nth-child(3n+1)::before{display:none}
.pstat:nth-child(n+4){border-top:1px solid rgba(255,255,255,.2)}
.proof-trust{grid-template-columns:repeat(2,1fr)}
.proof-trust li:nth-child(odd)::before{display:none}
.proof-trust li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:680px){
.proof-stats{grid-template-columns:repeat(2,1fr)}
.pstat::before{display:none}
.pstat:nth-child(even)::before{display:block;top:22px;bottom:22px}
.pstat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
.pn{font-size:28px}
}
@media(max-width:460px){
.proof-stats{grid-template-columns:1fr}
.pstat::before{display:none !important}
.pstat + .pstat{border-top:1px solid rgba(255,255,255,.2)}
.proof-trust{grid-template-columns:1fr}
.proof-trust li::before{display:none !important}
.proof-trust li + li{border-top:1px solid var(--line)}
.proof-card{border-radius:14px}
}
.cnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pn,.sn,.gsn{font-variant-numeric:tabular-nums}
.timeline{list-style:none;margin:44px 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:tl}
.timeline::before{content:"";position:absolute;top:38px;left:10%;right:10%;height:2px;z-index:0;background:linear-gradient(90deg,var(--blue-line),var(--blue) 22%,var(--blue) 78%,var(--blue-line))}
.tl-step{position:relative;text-align:center;padding:0 18px;z-index:1}
.tl-marker{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 9px var(--paper), 0 12px 26px -14px rgba(0,75,238,.55);transition:background .22s, color .22s, transform .22s, box-shadow .22s}
.tl-marker .ic{width:28px;height:28px}
.tl-badge{position:absolute;top:-4px;right:-4px;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff}
.tl-step:hover .tl-marker{background:var(--blue);color:#fff;transform:translateY(-3px);box-shadow:0 0 0 9px var(--paper), 0 18px 32px -14px rgba(0,75,238,.65)}
.tl-body h4{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.tl-body p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:30ch;margin-inline:auto}
@media(max-width:900px){
.timeline{grid-template-columns:1fr;gap:0;margin-top:34px}
.timeline::before{top:12px;bottom:12px;left:37px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--blue-line),var(--blue) 18%,var(--blue) 82%,var(--blue-line))}
.tl-step{display:grid;grid-template-columns:76px 1fr;gap:20px;text-align:left;padding:0 0 30px;align-items:start}
.tl-step:last-child{padding-bottom:0}
.tl-marker{margin:0;width:76px;height:76px}
.tl-body{padding-top:12px}
.tl-body p{max-width:52ch;margin-inline:0}
}
@media(max-width:520px){
.timeline::before{left:29px}
.tl-step{grid-template-columns:60px 1fr;gap:16px;padding-bottom:26px}
.tl-marker{width:60px;height:60px;box-shadow:0 0 0 7px var(--paper)}
.tl-marker .ic{width:23px;height:23px}
.tl-badge{min-width:22px;height:22px;font-size:10.5px;top:-3px;right:-3px}
.tl-body{padding-top:6px}
.tl-body h4{font-size:16.5px}
}
.proof{padding:0 0 8px;position:relative;background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 46%,#fff 46%,#fff 100%)}
.pstat{padding:34px 30px;position:relative;z-index:1}
.pstat + .pstat::before{content:"";position:absolute;left:0;top:32px;bottom:32px;width:1px;background:rgba(255,255,255,.2)}
.pn{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.035em;color:#fff;line-height:1}
.pl{font-size:14px;color:rgba(255,255,255,.82);margin-top:11px;line-height:1.4}
.proof-trust li{display:flex;gap:15px;align-items:flex-start;padding:26px 30px;position:relative}
.proof-trust li + li::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:var(--line)}
.proof-card{border-radius:18px;overflow:hidden;box-shadow:0 6px 14px rgba(13,20,36,.05), 0 32px 60px -34px rgba(0,75,238,.42);transform:translateY(-6px)}
.caps{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:17px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@media(max-width:680px){
.pstat{padding:24px 22px}
.proof-trust li{padding:20px 22px}
}
/* ============ SPACING: hero -> capability strip -> proof card ============
The chip row sat flush against the blue card with no breathing room. */
.caps{padding:20px 0;margin:0}
.cap-chip{padding:10px 20px;font-size:14.5px}
.proof{padding:46px 0 58px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 30%,#fff 30%,#fff 100%)}
.proof-card{transform:none;border-radius:20px}
.pstat{padding:32px 28px}
.pn{font-size:36px}
.pl{margin-top:10px}
.proof-trust li{padding:24px 28px}
/* the section after the proof band should not double up on padding */
.proof + section.band{padding-top:clamp(2.4rem,5vw,4rem)}
/* timeline breathing room */
.timeline{margin-top:52px}
.tl-body p{font-size:14.5px;max-width:32ch}
section.band:has(.timeline){padding-bottom:clamp(3rem,6vw,5rem)}
@media(max-width:900px){
.proof{padding:34px 0 42px}
.caps{padding:16px 0}
}
/* ============ COMPACTION: imagery and card grids ============
Banners were rendering at their natural aspect, so a 3:2 source filled the
viewport height. They are now cinematic strips with a hard height cap. */
.banner img{
width:100%;height:100%;display:block;opacity:.92;
object-fit:cover;object-position:center 42%;
}
.banner{height:clamp(220px,26vw,300px)}
.banner-copy h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.banner-copy .lede{font-size:15px;margin-top:12px !important;max-width:52ch}
@media(max-width:760px){
.banner{height:auto;min-height:260px}
.banner img{min-height:260px}
}
/* split / panel photography capped so it never dominates a section */
.split-art .photo img,.psplit-art .photo img{max-height:420px;object-fit:cover}
.split.wide-art .photo img{max-height:360px;object-fit:cover}
.gallery .photo img{aspect-ratio:16/10;object-fit:cover}
.wthumb{width:96px}
.wthumb .thumb{border-radius:8px}
.wrow{grid-template-columns:auto 96px 1fr auto;padding:22px;gap:18px}
/* denser card grids - the services page carries 39 of these */
.grid{gap:14px}
.cell{padding:22px 20px;border-radius:11px}
.cell h3{font-size:17px;margin-bottom:7px}
.cell p{font-size:14px;line-height:1.6}
.cell .idx{font-size:11px;margin-bottom:11px}
.cell ul{margin-top:13px}
.cell li{font-size:13.5px;padding:6px 0 6px 15px}
.cell li::before{top:13px}
.ibx{width:40px;height:40px;border-radius:10px;margin-bottom:14px}
.ibx .ic{width:19px;height:19px}
.cell .badge{top:16px;right:18px;font-size:10px;padding:4px 8px}
/* four-across on wide screens keeps long service lists compact */
@media(min-width:1180px){
section.band .grid.g3{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1179px) and (min-width:900px){
.grid.g3{grid-template-columns:repeat(3,1fr)}
}
/* section rhythm tightened a touch */
section.band{padding:clamp(2.8rem,5.4vw,4.4rem) 0}
.sec-head{margin-bottom:32px}
.panel-body{padding:22px 24px 24px}
.panel-head{padding:22px 24px 18px}
.panel-head h3{font-size:23px}
/* ============ BLOG ============ */
.bchips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.bchip{
background:#fff;border:1px solid var(--line);border-radius:999px;
padding:9px 17px;font-family:var(--body);font-size:14px;font-weight:500;
color:var(--muted);cursor:pointer;transition:border-color .16s,color .16s,background .16s;
}
.bchip:hover{border-color:var(--blue-line);color:var(--blue)}
.bchip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
.post{
background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 22px;
display:flex;flex-direction:column;box-shadow:var(--sh-1);
transition:border-color .2s,box-shadow .2s,transform .2s;
}
.post:hover{border-color:var(--blue-line);box-shadow:var(--sh-3);transform:translateY(-2px)}
.post.feat{grid-column:span 2;background:linear-gradient(150deg,var(--blue-tint),#fff 62%);border-color:var(--blue-line)}
@media(max-width:640px){.post.feat{grid-column:span 1}}
.post-meta{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.post-cat{
font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--blue);background:var(--blue-tint);
border:1px solid var(--blue-line);border-radius:6px;padding:4px 9px;
}
.post-read{font-size:12.5px;color:var(--dim)}
.post h3{font-size:19px;line-height:1.3;margin-bottom:10px}
.post.feat h3{font-size:24px}
.post h3 a{text-decoration:none;color:var(--ink)}
.post h3 a:hover{color:var(--blue)}
.post p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 18px}
.post-more{
margin-top:auto;text-decoration:none;font-size:13.5px;font-weight:600;color:var(--blue);
transition:gap .16s;
}
.post-more:hover{text-decoration:underline;text-underline-offset:3px}
/* ---- article ---- */
.back-link{font-size:14px;font-weight:600;color:var(--blue);text-decoration:none}
.back-link:hover{text-decoration:underline;text-underline-offset:3px}
.article{max-width:760px}
.article p{font-size:17px;line-height:1.75;color:var(--ink-2,var(--muted));margin:0 0 22px}
.article h2{
font-size:clamp(21px,2.4vw,27px);margin:40px 0 16px;
}
.article h2::after{content:"";display:block;width:40px;height:3px;background:var(--blue);border-radius:2px;margin-top:14px}
.article blockquote{
margin:30px 0;padding:22px 26px;background:var(--blue-tint);
border-left:3px solid var(--blue);border-radius:0 10px 10px 0;
font-size:17px;line-height:1.65;color:var(--ink);font-style:normal;
}
.art-list{margin:0 0 24px;padding:0 0 0 4px;list-style:none;counter-reset:al}
.art-list li{
counter-increment:al;position:relative;padding:0 0 18px 44px;
font-size:16px;line-height:1.7;color:var(--muted);
}
.art-list li::before{
content:counter(al);position:absolute;left:0;top:1px;
width:28px;height:28px;border-radius:50%;background:var(--blue-tint);
border:1px solid var(--blue-line);color:var(--blue);
font-family:var(--display);font-weight:700;font-size:13px;
display:flex;align-items:center;justify-content:center;
}
.art-list b{color:var(--ink);font-weight:600}
/* ============ TICKS: brand blue instead of green ============
The green confirmation ticks were the only element outside the blue/navy
palette and read as disconnected in the product panels. They are now
tinted blue discs, consistent with the icon badges used elsewhere. */
.spec div{grid-template-columns:21px 1fr;gap:13px;align-items:start}
.spec div::before{
content:"\2713";
width:21px;height:21px;flex:none;margin-top:1px;
border-radius:50%;
background:var(--blue-tint);
border:1px solid var(--blue-line);
color:var(--blue);
font-size:11px;font-weight:700;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
}
.check div{padding-left:32px}
.check div::before{
content:"\2713";
left:0;top:11px;
width:21px;height:21px;
border-radius:50%;
background:var(--blue-tint);
border:1px solid var(--blue-line);
color:var(--blue);
font-size:11px;font-weight:700;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
}
/* on navy surfaces the disc inverts so it stays legible */
section.navy .check div::before,
.cta .check div::before,
.panel-head .spec div::before{
background:rgba(93,154,255,.14);
border-color:var(--navy-line);
color:var(--blue-glow);
}
/* product panel: a little more contrast between head and body */
.panel-head{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%)}
.panel{border-color:var(--line)}
.spec div{border-bottom:1px solid var(--line);padding:10px 0}
.spec{border-top:1px solid var(--line)}
/* ============ PRODUCT PANEL HEADERS: navy -> brand blue gradient ============
Same gradient as the proof band so the two blue moments on the site match. */
.panel-head{
background:linear-gradient(120deg,var(--blue) 0%,#0B3FC4 100%);
position:relative;overflow:hidden;
}
.panel-head::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 90% -40%,rgba(255,255,255,.18),transparent 60%);
}
.panel-head > *{position:relative;z-index:1}
/* the eyebrow chip needs to read on blue, not on navy */
.panel-head .chip{
color:#fff;
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.34);
}
.panel-head h3{color:#fff}
.panel-head .sub{color:rgba(255,255,255,.82)}
/* keep the panel body clearly separated from the new header */
.panel{border-color:var(--line)}
.panel-body{border-top:none}
/* ============ ROLLING HEADER POSTER ============ */
.poster{
position:relative;overflow:hidden;background:var(--navy);
min-height:clamp(520px,62vh,660px);display:flex;align-items:stretch;
}
.pslides{position:absolute;inset:0}
.pslide{
position:absolute;inset:0;display:flex;align-items:center;
opacity:0;visibility:hidden;transition:opacity .9s ease, visibility .9s;
}
.pslide.on{opacity:1;visibility:visible}
.pslide-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 42%;transform:scale(1.06);
transition:transform 9s linear;
}
.pslide.on .pslide-img{transform:scale(1)}
.pslide-veil{
position:absolute;inset:0;
background:
linear-gradient(90deg,rgba(10,19,48,.95) 0%,rgba(10,19,48,.86) 42%,rgba(10,19,48,.42) 72%,rgba(10,19,48,.3) 100%),
linear-gradient(180deg,rgba(0,75,238,.22) 0%,transparent 46%,rgba(10,19,48,.6) 100%);
}
.pslide-copy{position:relative;z-index:2;width:100%;padding-top:26px;padding-bottom:96px}
.pslide-copy .kicker{color:var(--blue-glow)}
.pslide-copy .ph1,.pslide-copy h1{
color:#fff;max-width:15ch;
font-size:clamp(34px,5vw,58px);letter-spacing:-.04em;line-height:1.06;
}
.pslide-copy .hl{color:var(--blue-glow)}
.pslide-copy .lede{color:rgba(255,255,255,.82);max-width:58ch;margin-top:20px;font-size:16.5px}
.pslide-copy .btn-row{margin-top:30px}
.poster-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.poster-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
/* entrance motion for the active slide */
.pslide-copy > *{opacity:0;transform:translateY(16px)}
.pslide.on .pslide-copy > *{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.pslide.on .pslide-copy > *:nth-child(1){transition-delay:.10s}
.pslide.on .pslide-copy > *:nth-child(2){transition-delay:.18s}
.pslide.on .pslide-copy > *:nth-child(3){transition-delay:.26s}
.pslide.on .pslide-copy > *:nth-child(4){transition-delay:.34s}
/* controls */
.poster-ui{
position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:4;
display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.pdots{display:flex;gap:9px}
.pdot{
width:34px;height:5px;padding:0;border:none;border-radius:999px;cursor:pointer;
background:rgba(255,255,255,.26);transition:background .2s,width .3s;
}
.pdot span{display:none}
.pdot:hover{background:rgba(255,255,255,.48)}
.pdot.on{background:var(--blue-glow);width:46px}
.parrows{display:flex;gap:9px}
.parrow{
width:42px;height:42px;border-radius:50%;cursor:pointer;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
color:#fff;font-size:16px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
transition:background .18s,border-color .18s,transform .18s;
}
.parrow:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
/* progress bar */
.pbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14);z-index:4}
.pbar-fill{display:block;height:100%;width:0;background:var(--blue-glow)}
@media(max-width:820px){
.poster{min-height:auto}
.pslide{position:relative;height:auto}
.pslide:not(.on){display:none}
.pslide-copy{padding-top:56px;padding-bottom:120px}
.pslide-copy .ph1,.pslide-copy h1{max-width:none}
.poster-ui{bottom:26px;width:calc(100% - 40px)}
.parrow{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
.pslide-img,.pslide,.pslide-copy > *{transition:none !important;transform:none !important}
.pbar{display:none}
}
/* ============ FOOTER: reduced height ============ */
footer.site-foot{padding:46px 0 22px}
.fgrid{gap:30px 32px}
.fbrand .brand{margin-bottom:16px}
.brand img.logo.foot{height:36px;margin:0}
.fdesc{font-size:13.5px;line-height:1.62;margin:0 0 18px;max-width:36ch}
.fcontact-rows{margin:0 0 18px;gap:10px}
.fcontact-rows li{font-size:13.5px;gap:11px}
.fic{width:29px;height:29px}
.fic .ic{width:13px;height:13px}
.fsocial{gap:8px}
.fsocial a{width:33px;height:33px}
.fsocial .ic{width:15px;height:15px}
.fcol h4{margin:0 0 13px;font-size:10.5px}
.flinks{gap:9px}
.flinks a{font-size:13.5px;line-height:1.35}
.fstart-copy{font-size:13.5px;line-height:1.6;margin:0 0 15px}
.fbtn{padding:11px 16px;font-size:14px;margin-bottom:9px}
.fstart a.head-cta,.fstart .btn{padding:11px 16px !important;font-size:14px !important}
footer address{margin-top:14px;padding-top:13px;font-size:13px;line-height:1.6}
.foffice address{font-size:13px}
.foffices{gap:16px}
.fbot{margin-top:30px;padding-top:16px;font-size:12.5px}
@media(max-width:900px){
footer.site-foot{padding:38px 0 20px}
.fgrid{gap:26px 24px}
.fbrand{padding-bottom:24px}
.fbot{margin-top:22px}
}
/* ============ IMAGERY: consistent, contained sizes ============ */
.poster{min-height:clamp(440px,54vh,560px)}
@media(max-width:820px){.poster{min-height:auto}}
.pslide-copy{padding-bottom:84px}
.pslide-copy .ph1,.pslide-copy h1{font-size:clamp(30px,4.4vw,50px)}
.pslide-copy .lede{font-size:15.5px;max-width:54ch}
.banner{height:clamp(190px,21vw,250px)}
.banner img{height:100%;object-fit:cover}
@media(max-width:760px){
.banner{height:auto;min-height:210px}
.banner img{min-height:210px}
}
.split-art .photo img,.psplit-art .photo img{max-height:340px;object-fit:cover}
.split.wide-art .photo img{max-height:300px;object-fit:cover}
.gallery .photo img{aspect-ratio:16/10;object-fit:cover;max-height:230px}
.hero-art-wrap .photo img{max-height:360px;object-fit:cover}
.globe-wrap{max-width:400px}
.wthumb{width:88px}
/* ============ HEADER: utility strip removed, proportions reset ============ */
.utility{display:none !important}
.site-head{
position:sticky;top:0;z-index:60;
background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line);
}
.site-head .wrap{max-width:1280px;width:100%}
.head-in{
display:flex;align-items:center;justify-content:space-between;
gap:18px;flex-wrap:nowrap;min-width:0;height:80px;
}
.brand{flex:0 0 auto}
.brand img.logo{height:46px;width:auto;display:block}
.head-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
nav.main a{font-size:14.5px;font-weight:500;letter-spacing:-.005em}
@media(min-width:1280px){
nav.main{gap:24px;margin-left:auto;margin-right:20px}
nav.main a{padding:6px 0}
}
a.head-cta{
padding:12px 24px !important;font-size:14.5px !important;
border-radius:8px !important;box-shadow:0 6px 14px -8px rgba(0,75,238,.5);
}
.menu-btn{padding:10px 14px;font-size:14px}
@media(max-width:1279px){
.head-in{height:74px}
.brand img.logo{height:42px}
nav.main{top:100%}
}
@media(max-width:620px){
.head-in{height:66px;gap:10px}
.brand img.logo{height:34px}
a.head-cta{padding:10px 15px !important;font-size:13.5px !important;box-shadow:none}
.menu-btn{padding:9px 12px;font-size:13.5px}
}
@media(max-width:400px){
.head-actions a.head-cta{display:none}
}
/* blog: filter states and unwritten pieces */
.post.hide{display:none}
.post.draft{opacity:.86}
.post.draft h3{color:var(--ink)}
.post-soon{
margin-top:auto;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--dim);border:1px dashed var(--line-2);border-radius:999px;padding:6px 12px;width:fit-content;
}
.bempty{padding:26px 0;color:var(--muted);font-size:15px;display:none}
.bempty.on{display:block}
/* ============ MOBILE: contain wide content, calm the scale ============
Anything wider than the screen must scroll inside its own box; nothing may
widen the page itself. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,table{max-width:100%}
.tscroll,.t-scroll,.ppg .t-scroll{
overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--line);border-radius:12px;background:#fff;
scrollbar-width:thin;
}
.ppg .t-scroll{margin:18px 0}
.ppg .t-scroll table{min-width:560px;width:100%}
.tscroll::-webkit-scrollbar,.t-scroll::-webkit-scrollbar,
.subnav-in::-webkit-scrollbar,.caps::-webkit-scrollbar{height:6px}
.tscroll::-webkit-scrollbar-thumb,.t-scroll::-webkit-scrollbar-thumb{
background:var(--line-2);border-radius:99px}
@media(max-width:760px){
/* type: smaller floors so headings do not fill the screen */
h1{font-size:clamp(27px,7.4vw,34px)}
h2{font-size:clamp(21px,5.6vw,26px)}
h3{font-size:16.5px}
body{font-size:15.5px}
.lede{font-size:15px;line-height:1.6}
.pslide-copy .ph1,.pslide-copy h1{font-size:clamp(26px,7.6vw,34px)}
.pslide-copy .lede{font-size:14.5px}
.article p{font-size:15.5px;line-height:1.7}
/* rhythm */
section.band{padding:34px 0}
.sec-head{margin-bottom:22px}
.wrap{padding:0 18px}
.cell{padding:18px 16px}
.grid{gap:12px}
.cta{padding:28px 20px}
.panel-head{padding:18px 18px 15px}
.panel-body{padding:18px}
.pn{font-size:26px}
.proof-card{border-radius:14px}
.btn{padding:12px 18px;font-size:14.5px}
.btn-row{gap:9px;margin-top:20px}
/* the partner page carries its own scale */
.ppg h1{font-size:clamp(26px,7.4vw,34px) !important}
.ppg h2{font-size:clamp(20px,5.6vw,26px) !important}
.ppg .wrap{padding-left:18px;padding-right:18px}
.ppg .subnav-in{height:50px;padding:0 18px;gap:4px}
.ppg .subnav a{padding:7px 12px;font-size:13px}
}
@media(max-width:420px){
.wrap{padding:0 15px}
h1{font-size:clamp(25px,8vw,30px)}
.cell{padding:16px 14px}
section.band{padding:28px 0}
.ppg .wrap{padding-left:15px;padding-right:15px}
}
/* ============ FIX: capability marquee on mobile ============
mask-image blanks this strip on several mobile browsers. Edge fades are
drawn as overlays instead, and the track is sized so the -50% loop is
seamless even on a narrow screen. */
.caps{
position:relative;
display:block;
overflow:hidden;
padding:0;
background:var(--paper);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
-webkit-mask-image:none !important;
mask-image:none !important;
}
.caps::before,.caps::after{
content:"";position:absolute;top:0;bottom:0;width:42px;z-index:2;pointer-events:none;
}
.caps::before{left:0;background:linear-gradient(90deg,var(--paper) 10%,rgba(245,248,255,0) 100%)}
.caps::after{right:0;background:linear-gradient(270deg,var(--paper) 10%,rgba(245,248,255,0) 100%)}
.caps-track{
display:flex;
align-items:center;
gap:10px;
width:max-content;
min-width:200%;
padding:16px 0;
animation:capscroll 40s linear infinite;
will-change:transform;
backface-visibility:hidden;
transform:translate3d(0,0,0);
}
.caps:hover .caps-track{animation-play-state:paused}
.cap-chip{
flex:0 0 auto;
background:#fff;border:1px solid var(--line);border-radius:999px;
padding:10px 20px;font-size:14.5px;font-weight:500;color:var(--ink);
white-space:nowrap;box-shadow:0 1px 2px rgba(13,20,36,.03);
}
@media(max-width:760px){
.caps-track{animation-duration:26s;gap:8px;padding:12px 0}
.cap-chip{padding:8px 15px;font-size:13px}
.caps::before,.caps::after{width:26px}
}
@media(max-width:420px){
.caps-track{animation-duration:22s}
.cap-chip{padding:8px 13px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
.caps{overflow-x:auto;-webkit-overflow-scrolling:touch}
.caps-track{animation:none;min-width:0;width:max-content}
}
/* ============ FIX: poster keeps its full-bleed treatment on mobile ============
The earlier mobile rules put the slides back into normal flow with auto
height, so the absolutely-positioned photo had no box to fill and the
section collapsed to flat navy. Mobile now uses the same model as desktop:
a fixed-height stage with the image covering it. */
@media(max-width:820px){
.poster{
min-height:600px !important;
position:relative;overflow:hidden;display:flex;align-items:stretch;
}
.pslide{
position:absolute !important;inset:0 !important;height:auto !important;
display:flex !important;align-items:center;
}
.pslide:not(.on){opacity:0;visibility:hidden}
.pslide.on{opacity:1;visibility:visible}
.pslide-img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 38%;
}
/* a left-to-right veil leaves the right edge bright when text is full width */
.pslide-veil{
background:
linear-gradient(180deg,rgba(10,19,48,.62) 0%,rgba(10,19,48,.80) 46%,rgba(10,19,48,.94) 100%),
linear-gradient(90deg,rgba(10,19,48,.72) 0%,rgba(10,19,48,.42) 100%);
}
.pslide-copy{
padding-top:20px;padding-bottom:104px;
display:flex;flex-direction:column;justify-content:center;
}
.pslide-copy .ph1,.pslide-copy h1{max-width:none}
.pslide-copy .lede{max-width:none}
.poster-ui{bottom:24px;width:calc(100% - 36px);left:50%;transform:translateX(-50%)}
}
@media(max-width:520px){
.poster{min-height:540px !important}
.pslide-copy{padding-bottom:96px}
.pslide-copy .btn-row{gap:8px;margin-top:22px}
.pslide-copy .btn{padding:12px 18px;font-size:14px}
.poster-ui{bottom:20px}
.pdot{width:26px}
.pdot.on{width:36px}
.parrow{width:36px;height:36px;font-size:15px}
}
@media(max-width:400px){
.poster{min-height:500px !important}
.pslide-copy .lede{font-size:14px;line-height:1.55}
}
/* ============ PRODUCT FAMILY GRID ============ */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.vgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.vgrid{grid-template-columns:1fr}}
.vcard{
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:20px 18px;box-shadow:var(--sh-1);
transition:border-color .2s,box-shadow .2s,transform .2s;
}
.vcard:hover{border-color:var(--blue-line);box-shadow:var(--sh-3);transform:translateY(-2px)}
.vcard .ibx{width:38px;height:38px;border-radius:10px;margin-bottom:14px}
.vcard .ibx .ic{width:18px;height:18px}
.vcard:hover .ibx{background:var(--blue);color:#fff}
.vsector{
display:block;font-family:var(--body);font-weight:700;font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:7px;
}
.vnew{
display:inline-block;margin-left:6px;background:var(--blue);color:#fff;
border-radius:5px;padding:2px 6px;font-size:9.5px;letter-spacing:.08em;
}
.vcard h3{font-size:17px;margin:0 0 6px;letter-spacing:-.02em}
.vcard p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
.vcard.feat{background:linear-gradient(150deg,var(--blue-tint),#fff 66%);border-color:var(--blue-line)}
@media(max-width:760px){.vcard{padding:16px 15px}.vcard h3{font-size:16px}}
/* poster headlines are carousel copy, not the page heading - styled as h1,
marked up as a paragraph so the homepage keeps exactly one real heading */
.pslide-copy .ph1,.pslide-copy h1{
font-family:var(--display);font-weight:700;letter-spacing:-.035em;
line-height:1.04;color:#fff;margin:0 0 14px;
}
/* ============ PRODUCT PORTFOLIO (26) ============ */
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pchip{
font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.01em;
background:#fff;color:var(--muted);border:1px solid var(--line);
border-radius:999px;padding:8px 14px;cursor:pointer;
transition:background .18s,color .18s,border-color .18s;
display:inline-flex;align-items:center;gap:7px;
}
.pchip:hover{border-color:var(--blue-line);color:var(--ink)}
.pchip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pchip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pcn{
font-size:10.5px;font-weight:700;background:var(--blue-tint);color:var(--blue);
border-radius:999px;padding:2px 7px;min-width:20px;text-align:center;
}
.pchip.on .pcn{background:rgba(255,255,255,.22);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr}}
.pcard{
position:relative;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:16px 16px 15px;box-shadow:var(--sh-1);overflow:hidden;
transition:border-color .2s,box-shadow .2s,transform .2s;
}
.pcard::before{
content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--blue);
transform:scaleY(0);transform-origin:top;transition:transform .24s ease;
}
.pcard:hover{border-color:var(--blue-line);box-shadow:var(--sh-3);transform:translateY(-2px)}
.pcard:hover::before{transform:scaleY(1)}
.pcard.hide{display:none}
.pcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pnum{
font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.1em;
color:var(--blue);background:var(--blue-tint);border-radius:6px;padding:3px 8px;
}
.pico{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:8px;background:var(--wash);color:var(--muted);
transition:background .2s,color .2s;
}
.pico .ic{width:16px;height:16px}
.pcard:hover .pico{background:var(--blue);color:#fff}
.pcat{
display:block;font-family:var(--body);font-weight:700;font-size:10px;
letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.pcard h3{font-size:16.5px;margin:0 0 7px;letter-spacing:-.02em;line-height:1.22}
.pcard p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 13px;flex:1}
.palone{
align-self:flex-start;font-family:var(--body);font-size:10px;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;color:var(--blue);
border:1px solid var(--blue-line);border-radius:999px;padding:3px 9px;
}
.pempty{display:none;text-align:center;color:var(--muted);padding:34px 0;font-size:14px}
.pempty.on{display:block}
@media(max-width:760px){
.pcard{padding:14px 14px 13px}
.pcard h3{font-size:15.5px}
.pchips{gap:7px;margin-bottom:18px}
.pchip{font-size:12px;padding:7px 12px}
}
/* ============ 26-PRODUCT INDEX + PANELS ============ */
.pcard{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.pcard h3{color:var(--ink)}
.pgo{
align-self:flex-start;font-family:var(--body);font-size:11px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
}
.pgo::after{content:" \2192";transition:margin-left .18s}
.pcard:hover .pgo::after{margin-left:4px}
.panel-stack{display:flex;flex-direction:column;gap:22px}
.prod-panel{scroll-margin-top:96px}
.prod-panel.hide{display:none}
.prod-panel .panel-head .chip{letter-spacing:.13em}
.prod-panel .panel-body{padding:26px}
.plead{
font-size:15.5px;line-height:1.62;color:var(--muted);
margin:0 0 20px;max-width:74ch;
}
.prod-panel .cell{padding:16px 15px}
.prod-panel .cell h4{
font-family:var(--display);font-weight:700;font-size:15.5px;
letter-spacing:-.015em;margin:0 0 6px;color:var(--ink);
}
.prod-panel .cell p{font-size:13px;line-height:1.55;margin:0}
.prod-panel .btn-row{margin-top:20px}
.pempty2{margin-top:20px}
@media(max-width:760px){
.prod-panel .panel-body{padding:18px 16px}
.plead{font-size:14.5px;margin-bottom:16px}
.panel-stack{gap:16px}
.prod-panel{scroll-margin-top:74px}
}
/* ============ KAIZEN ONE - the custom flagship ============ */
.kone-band{background:linear-gradient(180deg,var(--blue-tint),transparent 62%)}
.panel.kone{border-color:var(--blue-line);box-shadow:0 18px 50px -22px rgba(0,75,238,.34)}
.panel.kone .panel-head{
background:linear-gradient(126deg,var(--navy) 0%,var(--blue) 58%,#2f6bff 100%);
}
.panel.kone .panel-head .chip{
background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);
letter-spacing:.15em;font-weight:700;
}
.panel.kone .panel-head h3{font-size:clamp(26px,3.4vw,36px)}
.panel.kone .plead{max-width:82ch;color:var(--ink)}
.panel.kone .plead b{color:var(--blue)}
.panel.kone .cell{background:var(--wash);border-color:transparent}
.panel.kone .cell:hover{background:#fff;border-color:var(--blue-line)}
@media(max-width:760px){.panel.kone .panel-head h3{font-size:24px}}
/* ============ PRODUCT PANEL MOCKUPS ============ */
.pbody-top{
display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);
gap:28px;align-items:start;margin-bottom:24px;
}
.pshot-wrap{
margin:0;border-radius:12px;padding:14px;
background:linear-gradient(150deg,var(--blue-tint),#fff 78%);
border:1px solid var(--line);
}
.pshot{display:block;width:100%;height:auto}
.panel.kone .pshot-wrap{
background:linear-gradient(150deg,#dce8ff,#fff 78%);border-color:var(--blue-line);
}
.pbody-top .plead{margin:0;max-width:none}
@media(max-width:900px){
.pbody-top{grid-template-columns:1fr;gap:18px}
.pshot-wrap{padding:11px}
}
/* ============ CLIENT LOGIN ============ */
.login-band{padding-top:56px}
.login-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:44px;align-items:start}
.login-copy h1{font-size:clamp(30px,4vw,46px);margin:10px 0 14px}
.login-cells{margin-top:26px;gap:12px}
.login-cells .cell{display:flex;gap:13px;align-items:flex-start;padding:14px 15px}
.login-cells .ibx{flex:0 0 34px;width:34px;height:34px;border-radius:9px;margin:0}
.login-cells .ibx .ic{width:16px;height:16px}
.login-cells h3{font-size:15px;margin:0 0 4px}
.login-cells p{font-size:13px;line-height:1.5;margin:0}
.login-card{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:28px 26px;box-shadow:var(--sh-3);position:sticky;top:96px;
}
.login-form h2{font-size:21px;margin:0 0 4px;letter-spacing:-.02em}
.lf-sub{font-size:13px;color:var(--muted);margin:0 0 20px}
.login-form label{
display:block;font-family:var(--body);font-size:12.5px;font-weight:600;
color:var(--ink);margin:0 0 6px;
}
.login-form input[type=email],.login-form input[type=password]{
width:100%;font-family:var(--body);font-size:14.5px;color:var(--ink);
background:var(--wash);border:1px solid var(--line);border-radius:9px;
padding:11px 12px;transition:border-color .16s,background .16s,box-shadow .16s;
}
.login-form input:focus{
outline:none;background:#fff;border-color:var(--blue);
box-shadow:0 0 0 3px rgba(0,75,238,.14);
}
.login-form input.bad{border-color:#C6392F;background:#FFF6F5}
.lf-passwrap{position:relative}
.lf-passwrap input{padding-right:64px}
.lf-eye{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--blue);background:transparent;border:0;
padding:6px 8px;cursor:pointer;border-radius:6px;
}
.lf-eye:hover{background:var(--blue-tint)}
.lf-eye:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lf-err{display:none;font-size:12px;color:#C6392F;margin:6px 0 0}
.lf-err.on{display:block}
.login-form>.lf-err+label,.lf-err+label{margin-top:16px}
.lf-check{
display:flex;align-items:center;gap:9px;margin:18px 0 20px;
font-weight:500!important;font-size:13px!important;color:var(--muted)!important;cursor:pointer;
}
.lf-check input{width:16px;height:16px;accent-color:var(--blue);flex:0 0 16px}
.lf-submit{width:100%;justify-content:center}
.lf-note{font-size:12.5px;line-height:1.55;margin:14px 0 0;color:var(--muted)}
.lf-note.warn{color:#8A4B00;background:#FFF7EC;border:1px solid #F2DFC2;border-radius:9px;padding:11px 12px}
.lf-note.err{color:#C6392F;background:#FFF6F5;border:1px solid #F3D2CE;border-radius:9px;padding:11px 12px}
.lf-links{
display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center;
margin-top:18px;font-size:12.5px;color:var(--muted);
}
.lf-links a{color:var(--blue);text-decoration:none}
.lf-links a:hover{text-decoration:underline}
.lf-secure{
display:flex;gap:9px;align-items:flex-start;margin:20px 0 0;padding-top:18px;
border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--muted);
}
.lf-secure .ic{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--blue)}
@media(max-width:940px){
.login-wrap{grid-template-columns:1fr;gap:30px}
.login-card{position:static;order:-1}
}
@media(max-width:760px){.login-card{padding:22px 18px}}
/* ---- home strip ---- */
.clogin-strip{padding-top:0}
.clogin-in{
display:flex;align-items:center;justify-content:space-between;gap:26px;
background:linear-gradient(122deg,var(--navy),#10265e);
border-radius:16px;padding:28px 32px;
}
.clogin-txt .kicker{color:var(--blue-glow)}
.clogin-txt h2{color:#fff;font-size:clamp(20px,2.5vw,27px);margin:8px 0 6px;letter-spacing:-.025em}
.clogin-txt p{color:rgba(255,255,255,.72);font-size:14px;margin:0;max-width:56ch}
.clogin-btn{flex:0 0 auto;background:#fff!important;color:var(--navy)!important}
.clogin-btn:hover{background:var(--blue-glow)!important;color:var(--navy)!important}
@media(max-width:760px){
.clogin-in{flex-direction:column;align-items:flex-start;padding:22px 20px}
.clogin-btn{width:100%;justify-content:center}
}
/* header secondary link */
nav.main a.head-login,.head-actions .head-login{
color:var(--ink)!important;font-weight:600;padding:9px 14px!important;
border:1px solid var(--line);border-radius:999px;background:#fff;
transition:border-color .18s,color .18s;
}
nav.main a.head-login:hover,.head-actions .head-login:hover{
border-color:var(--blue);color:var(--blue)!important;
}
/* Exactly one "Client login" is visible at any width. The markup carries two
copies - one inside nav.main, one in .head-actions - mirroring the CTA, so
each breakpoint must hide the copy it is not using. Getting this wrong shows
both on desktop, which is what happened before. */
nav.main a.head-login{display:none}
.head-actions .head-login{display:inline-flex}
/* wide: the nav is a horizontal row, so the link sits in it */
@media(min-width:1280px){
nav.main a.head-login{display:inline-flex}
.head-actions .head-login{display:none}
}
/* narrow: the header bar is too cramped, so it moves into the drawer */
@media(max-width:1020px){
.head-actions .head-login{display:none}
nav.main a.head-login{
display:flex!important;justify-content:center;margin-top:12px;
padding:13px 20px!important;border-radius:10px;font-size:15px;
}
}
/* ============ ENQUIRY FORM: everything resolves on the page ============ */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fx-err{
display:none;font-family:var(--body);font-size:12.5px;line-height:1.4;
color:#C6392F;margin-top:6px;
}
.fx-err.on{display:block}
.k input.bad,.k textarea.bad,.k select.bad{
border-color:#C6392F!important;background:#FFF6F5;
}
.fx-note{margin:0}
.fx-note.err{color:#C6392F;font-weight:600}
.fx-note.warn{color:#8A5B00}
.fx-copy{margin-top:14px}
.fx-copy pre{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.65;
white-space:pre-wrap;word-break:break-word;background:var(--wash);color:var(--ink);
border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 0 10px;
max-height:260px;overflow:auto;
}
.fx-done{
background:linear-gradient(150deg,var(--blue-tint),#fff 70%);
border:1px solid var(--blue-line);border-radius:14px;padding:30px 26px;
}
.fx-done h3{font-size:22px;margin:0 0 10px;letter-spacing:-.02em}
.fx-done p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;max-width:56ch}
@media(max-width:760px){.fx-done{padding:22px 18px}.fx-done h3{font-size:19px}}
/* ---- login page: a launch point, not a second sign-in form ---- */
.lg-card{padding:30px 28px}
.lg-card h2{font-size:23px;margin:0 0 10px}
.lg-lede{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 22px}
.lg-go{width:100%;justify-content:center;padding:14px 22px!important;font-size:15.5px!important}
.lg-sub{color:var(--muted);font-size:13px;line-height:1.55;margin:12px 0 0;text-align:center}
.lg-help{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.lg-help p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.lg-help p:last-child{margin-bottom:0}
.lg-help b{color:var(--ink)}
@media(max-width:760px){.lg-card{padding:22px 18px}.lg-card h2{font-size:20px}}
/* consent banner */
.ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--navy);color:#fff;
border-top:3px solid var(--blue);transform:translateY(110%);transition:transform .3s ease;padding:14px 0}
.ck-bar.on{transform:none}
.ck-in{max-width:var(--container,1160px);margin:0 auto;padding:0 24px;display:flex;
align-items:center;gap:18px;flex-wrap:wrap}
.ck-t{flex:1;min-width:240px;margin:0;font-size:13.6px;line-height:1.55;color:rgba(255,255,255,.84)}
.ck-t a{color:#fff;text-decoration:underline}
.ck-b{display:flex;gap:10px}
.ck-bar .btn{padding:9px 18px;font-size:13.5px}
.ck-bar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34);background:transparent}
.ck-bar .btn-ghost:hover{border-color:#fff}
@media(max-width:620px){.ck-b{width:100%}.ck-bar .btn{flex:1;text-align:center}}
@media (prefers-reduced-motion: reduce){.ck-bar{transition:none}}
/* ---- blog card pieces the published cards need ----------------------------
These live here rather than in the article template, because the blog index
renders the same tag chips and the index is the page that was missing them.
Without .ptag the tags rendered as one run-together line of plain text. */
.post-thumb{border-radius:9px;overflow:hidden;border:1px solid var(--line);margin-bottom:14px;
aspect-ratio:16/9;background:var(--paper)}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-date{font-size:12.5px;color:var(--dim);margin-left:auto;white-space:nowrap}
.ptags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.ptag{display:inline-block;font-size:11px;line-height:1;padding:5px 9px;border:1px solid var(--line);
border-radius:100px;color:var(--muted);background:var(--paper);white-space:nowrap}
.post h2{font-size:19px;line-height:1.3;margin-bottom:10px}
.post h2 a{text-decoration:none;color:var(--ink)}
.post h2 a:hover{color:var(--blue)}
.post-more{margin-top:auto}
@media(max-width:560px){.ptag{font-size:10.5px;padding:4px 8px}}