/* Codex visual layer: service-specific line art, subtle backgrounds and scroll-linked motion. */
:root{--visual-blue:#075cc4;--visual-ink:#132c4b;--visual-paper:#f4f8fd}
/* Show the supplied Codex mark and wordmark without the slogan printed beneath it. */
.brand img,.footer-brand img,.page-brand img,.footer-logo img,.logo-panel img,.story-logo{clip-path:inset(0 0 9.3% 0)}
.brand-copy small,.page-brand small,.footer-brand small,.footer-logo small{font-size:8px;letter-spacing:.2em;color:#68788d}
/* A faint technical pattern gives each large background a little depth without competing with text. */
.hero,.page-hero{background-image:url('codex-tech-pattern.svg'),radial-gradient(ellipse at 86% 25%,#eaf3ff 0,transparent 36%),linear-gradient(120deg,#fff 45%,#f7faff);background-repeat:repeat,no-repeat,no-repeat;background-size:320px 320px,auto,auto}
.section.wash{background-image:url('assets/codex-tech-pattern.svg'),linear-gradient(145deg,#f5f8fc,#f9fbfe);background-repeat:repeat,no-repeat;background-size:320px 320px,cover}
.story-visual{background-image:url('assets/codex-tech-pattern.svg'),linear-gradient(145deg,#eaf3ff,#f7faff);background-size:300px,cover}
/* Animated logo: a restrained rise/fall, with a rotating orbit in the hero lockup. */
.brand img,.page-brand img,.footer-brand img,.footer-logo img{animation:codex-logo-drift 6s ease-in-out infinite;transform-origin:center}
.logo-panel{isolation:isolate}.logo-panel:after{content:"";position:absolute;inset:11%;border:1px solid #075cc422;border-radius:50%;z-index:-1;animation:codex-orbit 18s linear infinite}.logo-panel:before{content:"";position:absolute;inset:5%;border:1px dashed #075cc41b;border-radius:50%;z-index:-1;animation:codex-orbit 26s linear infinite reverse}.logo-panel img{animation:codex-logo-drift 4.8s ease-in-out infinite}
@keyframes codex-logo-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes codex-orbit{to{transform:rotate(360deg)}}
/* Scroll-following Codex chevrons move down and back up with the reader. */
.scroll-motif{position:fixed;z-index:8;right:1.2vw;top:46vh;width:clamp(70px,11vw,150px);height:clamp(70px,11vw,150px);color:#075cc4;opacity:.105;pointer-events:none;transform:translate3d(0,var(--scroll-shift,0px),0) rotate(var(--scroll-angle,0deg));transition:transform .12s linear;mix-blend-mode:multiply}.scroll-motif svg{width:100%;height:100%;overflow:visible;animation:motif-breathe 5.5s ease-in-out infinite}@keyframes motif-breathe{0%,100%{scale:1}50%{scale:1.045}}body[dir=rtl] .scroll-motif{right:auto;left:1.2vw;transform:translate3d(0,var(--scroll-shift,0px),0) rotate(calc(var(--scroll-angle,0deg) * -1))}
/* Each homepage service gets its own tinted illustration in the card background. */
.service{--service-accent:#075cc4;--service-tint:#f5f9ff;position:relative;isolation:isolate;background-image:url('assets/codex-tech-pattern.svg'),radial-gradient(circle at 100% 100%,var(--service-tint),transparent 54%),linear-gradient(135deg,#fff,#fcfdff);background-size:240px,auto,cover;border-color:#e1e8f1}
.service:nth-child(2){--service-accent:#147b83;--service-tint:#effaf8}.service:nth-child(3){--service-accent:#8051b4;--service-tint:#f7f1ff}.service:nth-child(4){--service-accent:#b26720;--service-tint:#fff7ec}.service:nth-child(5){--service-accent:#3e5caf;--service-tint:#f0f3ff}.service:nth-child(6){--service-accent:#16815b;--service-tint:#eff9f3}
.service-icon{position:relative;width:50px;height:50px;border:1px solid color-mix(in srgb,var(--service-accent) 18%,white);border-radius:16px;background:linear-gradient(145deg,#fff,var(--service-tint));color:var(--service-accent);box-shadow:0 7px 22px color-mix(in srgb,var(--service-accent) 9%,transparent);z-index:2}.service-icon:after{content:"";position:absolute;inset:-5px;border:1px dashed color-mix(in srgb,var(--service-accent) 22%,transparent);border-radius:20px;pointer-events:none}.service-watermark{position:absolute;right:-18px;bottom:-24px;width:148px;height:148px;color:var(--service-accent);opacity:.105;z-index:0;pointer-events:none;transform:rotate(-8deg);transition:transform .4s,opacity .4s}.service-watermark svg{width:100%;height:100%}.service:hover .service-watermark{opacity:.17;transform:rotate(0) scale(1.06)}.service>*:not(.service-watermark){position:relative;z-index:1}body[dir=rtl] .service-watermark{right:auto;left:-18px;transform:rotate(8deg)}body[dir=rtl] .service:hover .service-watermark{transform:rotate(0) scale(1.06)}
/* Large, service-specific line drawings in the individual detail-page backgrounds. */
.page-watermark{position:absolute;right:clamp(20px,8vw,130px);top:18%;width:clamp(150px,26vw,330px);height:clamp(150px,26vw,330px);color:var(--page-accent,#075cc4);opacity:.105;pointer-events:none;z-index:0}.page-watermark svg{width:100%;height:100%;animation:watermark-drift 9s ease-in-out infinite}.page-hero .container>*:not(.page-watermark){position:relative;z-index:1}.page-hero{isolation:isolate}.page-hero:after{z-index:0;border-color:#075cc426}.service-page{--page-accent:#075cc4;--page-glow:#eaf3ff}.service-page .page-hero{background-image:url('assets/codex-tech-pattern.svg'),radial-gradient(circle at 84% 27%,var(--page-glow),transparent 34%),linear-gradient(115deg,#fff,#f8fbff)}.service-data{--page-accent:#075cc4;--page-glow:#e5f0ff}.service-it{--page-accent:#147b83;--page-glow:#e5f7f4}.service-marketing{--page-accent:#8051b4;--page-glow:#f2eaff}.service-employment{--page-accent:#b26720;--page-glow:#fff1de}.service-business{--page-accent:#3e5caf;--page-glow:#e9edff}.service-financial{--page-accent:#16815b;--page-glow:#e7f5ec}
@keyframes watermark-drift{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-13px) rotate(3deg)}}.detail-card{position:relative;overflow:hidden;background-image:url('assets/codex-tech-pattern.svg'),linear-gradient(145deg,#fff,#fbfdff);background-size:210px,cover}.detail-card:after{content:"";position:absolute;width:96px;height:96px;right:-60px;bottom:-60px;border:1px solid color-mix(in srgb,var(--page-accent,#075cc4) 20%,transparent);border-radius:50%;pointer-events:none}.detail-icon{width:48px;height:48px;position:relative;border-radius:16px;background:linear-gradient(140deg,#fff,var(--page-glow,#eaf3ff));color:var(--page-accent,#075cc4);border:1px solid color-mix(in srgb,var(--page-accent,#075cc4) 15%,white)}.detail-icon svg{width:24px;height:24px}.process-step .number{display:inline-flex;align-items:center;gap:8px}.process-step .number:after{content:"";width:40px;border-top:1px dashed color-mix(in srgb,var(--page-accent,#075cc4) 40%,transparent)}
/* The online-system cards carry their own category illustration in the background. */
.system-card{background-image:url('assets/codex-tech-pattern.svg'),linear-gradient(140deg,#fff,var(--tile-bg,#f6f9ff));background-size:230px,cover}.sys-icon{position:relative;background:linear-gradient(145deg,#fff,var(--tile-bg,#edf4ff));border:1px solid color-mix(in srgb,var(--tile-color,#075cc4) 22%,white);color:var(--tile-color,#075cc4)}.sys-icon:after{content:"";position:absolute;inset:-5px;border:1px dashed color-mix(in srgb,var(--tile-color,#075cc4) 24%,transparent);border-radius:50%}.system-card:after{opacity:.32}
/* Fine decorations remain behind body copy on every page. */
.section.wash,.section:not(.wash),.page-section{position:relative;isolation:isolate}.section.wash>.container,.section:not(.wash)>.container,.page-section>.container{position:relative;z-index:1}.section:not(.wash){background-image:url('assets/codex-tech-pattern.svg');background-repeat:repeat;background-size:360px 360px}.industry-note{background-image:url('assets/codex-tech-pattern.svg'),linear-gradient(135deg,#10213b,#143761);background-size:240px,cover}.cta-band{background-image:url('assets/codex-tech-pattern.svg'),linear-gradient(115deg,#075cc4,#073c91);background-size:260px,cover}
@media(max-width:680px){.scroll-motif{width:70px;height:70px;right:-8px;opacity:.08}.page-watermark{right:6vw;top:16%;width:130px;height:130px;opacity:.075}.service-watermark{width:118px;height:118px}}
@media(prefers-reduced-motion:reduce){.brand img,.page-brand img,.footer-brand img,.footer-logo img,.logo-panel img,.logo-panel:before,.logo-panel:after,.page-watermark svg,.scroll-motif svg{animation:none!important}.scroll-motif{transition:none!important}}