/* Midnight-blue depth and local light fields around the approved office hero. */
:root{--section-space:72px;--space-base:#071020;--space-ink:#e8f1ff;--space-copy:#bfd0e7;--space-edge:#91bffb2e;--office-line:#8ab7e5;--office-detail:#b8e2ff;--office-fill:#8acbff08;--grid-ink:#88baff06;--light-wash:#214b7938}
body{background:var(--space-base)}
.section-pad{padding-block:var(--section-space)}
.contact.section-pad{padding-bottom:32px}
:is(.approach,.services,.scenarios,.capabilities,.delivery,.team,.faq,.contact){color:var(--space-ink)}
.approach{--section-top:#050a16;--section-bottom:#0f2341;background:radial-gradient(ellipse at 84% 45%,#1a3e6745,transparent 58%),linear-gradient(180deg,var(--section-top),#0d1c34 30%,#0d1c34 70%,var(--section-bottom))}
.services{--section-top:#0f2341;--section-bottom:#08172e;background:radial-gradient(ellipse at 8% 43%,#1c46733b,transparent 58%),linear-gradient(180deg,var(--section-top),#102544 26%,#102544 72%,var(--section-bottom))}
.scenarios{--section-top:#08172e;--section-bottom:#102744;background:radial-gradient(ellipse at 92% 45%,#19395f38,transparent 59%),linear-gradient(180deg,var(--section-top),#071326 25%,#071326 72%,var(--section-bottom))}
.capabilities{--section-top:#102744;--section-bottom:#102744;background:radial-gradient(ellipse at 24% 43%,#214b793b,transparent 57%),linear-gradient(180deg,var(--section-top),#132d50 30%,#132d50 68%,var(--section-bottom))}
.delivery.zflow{--section-top:#102744;--section-bottom:#0d1c34;--flow-muted:#bfd0e7;background:radial-gradient(ellipse at 52% 43%,#173a634d,transparent 60%),linear-gradient(180deg,var(--section-top),#0e2140 28%,#0e2140 72%,var(--section-bottom))}
.team{--section-top:#0d1c34;--section-bottom:#0e2440;background:radial-gradient(ellipse at 92% 30%,#183b6233,transparent 53%),linear-gradient(180deg,var(--section-top),#0b192f 25%,#0b192f 75%,var(--section-bottom))}
.faq{--section-top:#0e2440;--section-bottom:#08172c;background:radial-gradient(ellipse at 13% 45%,#214b7933,transparent 57%),linear-gradient(180deg,var(--section-top),#112b4c 30%,#112b4c 68%,var(--section-bottom))}
.contact{--section-top:#08172c;--section-bottom:#050b17;background:radial-gradient(ellipse at 78% 65%,#173b633b,transparent 57%),linear-gradient(180deg,var(--section-top),#070f20 38%,#070f20 75%,var(--section-bottom))}

/* Adjacent chapters share one boundary anchor; wide fades only soften the decorative layers. */
.fx-section:not(:where(.hero)) .section-fx:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,var(--section-top),transparent 140px,transparent calc(100% - 140px),var(--section-bottom))}
.contact .section-fx:after{inset:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;transform:none}
.fx-section:not(:where(.hero)) .fx-edge{display:none}
.fx-section:not(:where(.hero)) .fx-grid{opacity:.65;background-image:linear-gradient(var(--grid-ink) 1px,transparent 1px),linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(110deg,transparent 10%,#000 65%,transparent)}
.fx-section:not(:where(.hero)) .fx-light{background:radial-gradient(ellipse,var(--light-wash),transparent 68%);animation:space-light-breathe 14s ease-in-out infinite alternate;animation-play-state:paused}
.approach .fx-light{top:-15%;right:-18%;width:850px;height:850px}.team .fx-light{top:8%;right:-30%;width:950px;height:1000px}.faq .fx-light{left:-460px;top:-150px;width:900px;height:750px;background:radial-gradient(ellipse,var(--light-wash),transparent 66%)}
.capabilities .fx-light{left:-30%;top:-22%;width:900px;height:800px}.delivery .fx-light{top:0;left:15%;height:800px}.contact .fx-light{top:-20%;right:-25%;width:1100px;height:1000px}

/* One readable text palette across the restrained range of blue surfaces. */
:is(.approach,.services,.delivery,.team) .section-index{color:#9eb6d5}
:is(.approach,.services,.delivery,.team) .section-heading>p{color:var(--space-copy)}
.approach h2{color:var(--space-ink)}.approach h2 span{color:#9dc3ee}.approach-copy>p{color:var(--space-copy)}
.principles>span{color:#cce3ff;background:linear-gradient(135deg,#18325466,#10213c66);border-color:#8bb8e438;box-shadow:inset 0 1px #cbe5ff0d}
.principles .ui-icon{color:#9dccff}.approach :is(a,button):focus-visible{outline-color:#b1dbff}
.service-list{border-color:#a7cef74d}.services :is(.service-desc,.service-copy>p,.service-detail>p){color:#c4d7ee}.services .row-number{color:#b6d8fa}.service-row:hover,.service-row[open]{background:linear-gradient(100deg,#1b3651ad,#10223a61);box-shadow:inset 2px 0 #96cbff}
.case-demo{background:linear-gradient(145deg,#1c3150ed,#0e1b31f5);border-color:#9acaff52;box-shadow:0 24px 65px #02061266,0 0 65px #629eff0c,inset 0 1px #d0e9ff1a}
.demo-question{background:linear-gradient(110deg,#274869,#1e3757);color:#e5f3ff;border-color:#b5dcff36}
.tool-grid>:is(a,button,article){background:linear-gradient(135deg,#0d25433d,#10213b55);border-color:#b0d6ff3b}.capabilities :is(.toolkit-intro>p,.tool-note,.tool-grid p){color:#d4e3f4}.capabilities .section-index{color:#bed4ed}.capabilities .tool-grid h3{color:#f0f6ff}
.delivery :is(.zflow-toolbar,.zflow-detail-header,.zflow-output,.zflow-number,.zflow-panel-title>span){color:#c5dbf4}.zflow-panel-title h3{color:#e5f0ff}.zflow-panel h4{color:#cce4ff}.zflow-panel li{color:var(--space-copy)}
.zflow-panel li strong{color:#e8f3ff}.zflow-detail-header>span{color:#ccdef8}

/* Original portrait colors remain untouched; light is confined to their frames. */
.team .portrait{background:#132440;border-color:#9bcaff38;box-shadow:0 18px 38px #02081770,inset 0 1px #c5e5ff1c;border-radius:8px}
.team .portrait img,.team .person:hover .portrait img{filter:none}
.team .person h3{color:#edf5ff}.team .person h3:before{background:linear-gradient(#b4dfff,#648ec4);box-shadow:0 0 10px #8bcaff20}
.team .person>p{color:#b6c9e3;font-size:13px;line-height:1.9}
.team .person-index{color:#d9ecff;background:#071628d9;border-color:#b2d5ff3b;box-shadow:0 3px 15px #0002}
.faq .eyebrow{color:#9eb6d5}.faq h2,.faq summary{color:var(--space-ink)}
.faq .faq-list details,.faq .faq-list details:first-child{border-color:#94bdf331}
.faq summary span{color:#aad4ff}.faq details p{color:var(--space-copy);font-size:14px;line-height:1.9}
.faq .faq-list summary.ix-summary:is(:hover,:focus-visible,:active){color:#eff7ff;background:#8bc3ff0b}
.faq .faq-list summary.ix-summary:focus-visible{outline-color:#b1dbff}
.faq details[open]{background:linear-gradient(100deg,#97caff07,transparent)}
.contact-bottom>p,.contact-phone{color:#b6c8e3}.contact-phone>span{color:#d9edff}
.contact footer{background:transparent;border-top:0}footer p,footer>a:last-child{color:#adc3df}

/* Office motifs vary by chapter: plans, isolated displays, and restrained data routes. */
.fx-section:not(:where(.hero)) .office-blueprint{stroke:var(--office-line);stroke-width:1;opacity:.19;mask-image:linear-gradient(125deg,transparent 5%,#000 48%,transparent 98%)}
.fx-section:not(:where(.hero)) .office-monitor{fill:var(--office-fill);stroke:var(--office-line)}.fx-section:not(:where(.hero)) .office-core{fill:var(--office-fill);stroke:var(--office-detail)}.fx-section:not(:where(.hero)) .office-screen-line{stroke:var(--office-detail)}.fx-section .office-route{stroke:var(--office-line)}
.approach .office-blueprint{width:640px;right:-175px;bottom:-180px;transform:perspective(800px) rotateX(27deg) rotateZ(-18deg);opacity:.22}
.services .office-blueprint{width:860px;right:-365px;bottom:7%;transform:perspective(900px) rotateY(-22deg) rotateZ(-16deg);opacity:.15}
.scenarios .office-blueprint{width:690px;left:-280px;right:auto;bottom:4%;transform:rotate(17deg);opacity:.13}
.capabilities .office-blueprint{width:630px;right:-120px;bottom:-240px;transform:perspective(750px) rotateX(32deg) rotateZ(-13deg);opacity:.21}
.delivery .office-blueprint{width:660px;right:-230px;bottom:-260px;transform:rotate(-16deg);opacity:.18}
.team .office-blueprint{width:760px;left:-410px;right:auto;top:10%;bottom:auto;transform:rotate(15deg);opacity:.15}
.faq .office-blueprint{width:540px;right:-340px;bottom:-240px;transform:rotate(-17deg);opacity:.15}
.contact .office-blueprint{width:570px;right:-25px;bottom:-120px;opacity:.29;transform:perspective(700px) rotateY(-20deg) rotateZ(-17deg)}
.office-console{position:absolute;width:440px;height:auto;stroke:var(--office-line);stroke-width:1;right:-110px;bottom:-85px;opacity:.22;pointer-events:none;mask-image:linear-gradient(135deg,transparent,#000 36%,#000 75%,transparent);animation:space-console-drift 13s ease-in-out infinite alternate;animation-play-state:paused}
.console-frame{stroke:var(--office-line);fill:var(--office-fill)}.console-desk{stroke:var(--office-line)}.console-screen{stroke:var(--office-detail);fill:var(--office-fill)}.console-data{stroke:var(--office-detail);stroke-width:1.5}.console-core{stroke:var(--office-detail);fill:var(--office-fill)}.console-mark{stroke:var(--office-line);stroke-dasharray:3 5}
.approach .office-console{width:360px;left:-180px;right:auto;bottom:-55px;opacity:.18;transform:rotate(-8deg)}
.capabilities .office-console{width:370px;left:-210px;right:auto;top:3%;bottom:auto;opacity:.18;transform:rotate(8deg)}
.team .office-console{width:430px;right:-180px;bottom:4%;opacity:.22;transform:rotate(-9deg)}
.faq .office-console{width:360px;left:-100px;right:auto;bottom:-80px;opacity:.23;transform:rotate(-5deg)}
.fx-section:not(:where(.hero)) .office-signal{stroke:var(--office-detail);stroke-width:1.8;stroke-dasharray:9 210;animation-duration:9s}
@keyframes space-light-breathe{from{opacity:.6;translate:0 0}to{opacity:1;translate:18px 12px}}
@keyframes space-console-drift{from{translate:0 -4px}to{translate:0 5px}}
.fx-section[data-effects-active=true] :is(.fx-light,.office-console){animation-play-state:running}
body[data-motion-paused=true] :is(.fx-light,.office-console),body[data-effects-hidden=true] :is(.fx-light,.office-console){animation-play-state:paused!important}
@media(max-width:1100px){:root{--section-space:60px}.fx-section:not(:where(.hero)) .office-blueprint{opacity:.13}.office-console{opacity:.15}.team .office-console{right:-250px}.faq .office-console{left:-160px}}
@media(max-width:760px){
 :root{--section-space:48px}
 .fx-section:not(:where(.hero)) .section-fx:after{background:linear-gradient(180deg,var(--section-top),transparent 96px,transparent calc(100% - 96px),var(--section-bottom))}
 .fx-section:not(:where(.hero)) .fx-grid{background-size:64px 64px;opacity:.45}.fx-section:not(:where(.hero)) .fx-light{width:650px;height:700px}
 .fx-section:not(:where(.hero)) .office-blueprint{width:470px;right:-250px;left:auto;bottom:-170px;top:auto;opacity:.12}
 .team .office-blueprint{left:-300px;right:auto;top:5%;bottom:auto;width:600px;opacity:.1}.contact .office-blueprint{right:-180px;bottom:-150px;opacity:.2}
 .office-console{display:none}.faq .office-console{display:block;width:310px;left:-170px;right:auto;bottom:-90px;opacity:.15}
 .team .person>p{font-size:13px}.faq details p{font-size:14px;padding-right:0}
}
@media(prefers-reduced-motion:reduce){.fx-section :is(.fx-light,.office-console,.office-signal){animation:none!important}}


/* Contact cards use the original QR images on an uninterrupted white margin. */
.contact-layout{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(28px,5vw,80px);margin-top:32px}
.contact-lead h2{margin:0 0 22px}
.contact-lead>p,.contact-lead address{color:var(--space-copy);font-size:14px;line-height:1.75}
.contact-lead .button{margin:16px 0 26px}
.contact-lead address{font-style:normal}
.contact-lead address span{display:block;font-size:12px;color:#a1bbda}
.contact-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-card{display:grid;align-content:center;justify-items:center;gap:16px;text-align:center;padding:20px 12px;border:1px solid #88b6ed40;border-radius:12px;background:linear-gradient(145deg,#152c47eb,#0a1629ef);scroll-margin-top:100px}
.contact-card:target,.contact-card:focus-visible{outline:2px solid #a8d5ff;outline-offset:2px}
.contact-info h3{font-size:22px;color:#edf6ff;line-height:1.3;margin:0}
.contact-info p{font-size:13px;color:#b6c9e3;margin:4px 0}
.contact-number{display:inline-flex;align-items:center;min-height:34px;font-size:15px;color:#d2e7ff;font-variant-numeric:tabular-nums;white-space:nowrap}
.contact-number:hover,.contact-number:focus-visible{text-decoration:underline;text-underline-offset:4px}
.contact-qr{display:block;box-sizing:border-box;width:196px;max-width:100%;height:auto;background:#fff;padding:14px;border-radius:6px}
@media(max-width:1000px) and (min-width:761px){
  .contact-layout{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:24px}
  .contact-cards{gap:12px}
}
@media(max-width:760px){
  .contact-layout{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:20px}
  .contact-lead h2{margin-bottom:14px}
  .contact-lead .button{margin:12px 0 18px}
}
@media(max-width:520px){
  .contact-cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .contact-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:start;text-align:left;padding:14px;gap:10px}
  .contact-qr{width:clamp(132px,39vw,174px);padding:11px}
  .contact-card{scroll-margin-top:85px}
}

#business-qr{display:none;position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent}
#business-qr:popover-open{display:block}
#business-qr::backdrop{background:#050c19bd}
#business-qr button{display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;outline:none}
#business-qr .contact-qr{width:min(264px,80vw,80vh);padding:18px;box-shadow:0 16px 64px #020a1d80}
#business-qr button:focus-visible .contact-qr{outline:2px solid #72b8ff;outline-offset:3px}
html:has(#business-qr:popover-open){overflow:hidden}