/* ZYLVORA — immersive image, motion and explanatory journeys */
.immersive-hero{position:relative;isolation:isolate;overflow:hidden;background:#07142d;color:#fff;min-height:clamp(690px,calc(100svh - 92px),920px)}
.hero-scene{position:absolute;inset:-5%;z-index:-3;transform:translate3d(var(--depth-x,0px),calc(var(--depth-y,0px) + var(--depth-scroll,0px)),0);transition:transform .45s cubic-bezier(.2,.6,.3,1);will-change:transform}
.hero-depth-image{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,13,33,.79) 0%,rgba(5,13,33,.68) 29%,rgba(5,13,33,.28) 58%,rgba(5,13,33,.02) 82%),linear-gradient(0deg,rgba(5,13,33,.72),transparent 32%)}
.immersive-content{position:relative;min-height:inherit;display:flex;flex-direction:column;padding-top:30px;padding-bottom:24px}
.hero-topline,.hero-bottomline{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#cad9f8}
.hero-topline{padding-bottom:18px;border-bottom:1px solid rgba(216,231,255,.23)}
.immersive-copy{position:relative;z-index:2;margin-block:auto;padding-block:66px;max-width:1010px}
.immersive-copy .eyebrow{color:#d2e0ff;margin-bottom:28px}
.immersive-copy h1{font-size:clamp(60px,7.4vw,112px);line-height:1.02;letter-spacing:-.055em;font-weight:500}
.immersive-copy h1 span{color:#b9d7ff}
.immersive-copy>p{max-width:470px;color:#dce6fc;font-size:16px;line-height:1.8;margin-top:30px}
.immersive-copy .actions{margin-top:33px;gap:27px;align-items:center}
.hero-primary{background:#f0f5ff;color:#12254d;border-color:#f0f5ff;box-shadow:0 10px 38px rgba(0,0,0,.13)}
.hero-primary:hover{background:#cfe1ff;color:#102347}
.hero-contact-link{font-size:12px;position:relative;padding-block:8px}
.hero-contact-link:after{content:'';position:absolute;bottom:2px;left:0;height:1px;width:100%;background:#d0dffe;transform-origin:left;transition:transform .25s}
.hero-contact-link:hover:after{transform:scaleX(.6)}
.hero-bottomline{border-top:1px solid rgba(216,231,255,.23);padding-top:17px;font-size:8px;letter-spacing:.08em}
.hero-bottomline>a{display:flex;align-items:center;gap:17px;color:white;font-size:9px}
.hero-scroll{display:grid;place-items:center;border:1px solid rgba(216,231,255,.4);width:33px;height:33px;font-size:17px;transition:transform .25s}
.hero-bottomline>a:hover .hero-scroll{transform:translateY(4px)}
.hero-glass-note{position:absolute;right:var(--gutter);bottom:130px;width:285px;padding:24px 25px;border:1px solid rgba(214,231,255,.3);background:rgba(12,38,87,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 15px 45px rgba(0,10,38,.13);transform:perspective(800px) rotateY(-9deg);transform-origin:right}
.hero-note-kicker{font-size:8px;letter-spacing:.16em;color:#d4e3ff}
.hero-glass-note p{font-size:10px;letter-spacing:.02em;color:#e4edff}
.hero-mini-flow{display:flex;align-items:center;margin:25px 0}
.hero-mini-flow span{width:15px;height:15px;border:1px solid #cae4ff;transform:rotate(45deg);box-shadow:0 0 12px rgba(172,218,255,.2)}
.hero-mini-flow span:nth-of-type(2){background:#c7dfff}
.hero-mini-flow i{flex:1;height:1px;background:rgba(212,235,255,.35);position:relative;overflow:hidden}
.hero-mini-flow i:after{content:'';display:block;width:45%;height:1px;background:#fff;transform:translateX(-120%)}
.js:not(.loading) .hero-mini-flow i:after{animation:heroSignal 2s .5s 2 ease-in-out}
.js:not(.loading) .immersive-copy{animation:copyEnter .95s both cubic-bezier(.2,.7,.3,1)}
.js:not(.loading) .hero-scene{animation:sceneEnter 1.25s both ease-out}
.hero-topline span:last-child{text-align:right}
.workflow-section{background:#e7edf9}
.workflow-more{display:flex;justify-content:flex-end;margin-top:28px}
.diagram-hint{font-size:13px;color:var(--muted);margin-top:-10px;margin-bottom:25px;max-width:530px}
.diagram{background:#fff;border:1px solid var(--line);padding:30px;position:relative;overflow:hidden;--flow-progress:100}
.flow-track{position:relative;padding-bottom:30px}
.flow-wire{width:100%;height:74px;position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.flow-wire path{fill:none;vector-effect:non-scaling-stroke;stroke-width:1.5}
.flow-base{stroke:#d3def2}
.flow-progress{stroke:var(--blue);stroke-dasharray:100;stroke-dashoffset:var(--flow-progress);transition:stroke-dashoffset .5s cubic-bezier(.2,.6,.3,1)}
.flow-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;z-index:1;gap:7px}
.flow-tab{border:0;background:none;padding:0 4px;display:flex;align-items:center;flex-direction:column;min-width:0;transition:color .2s;color:var(--muted);text-align:center}
.flow-icon{display:grid;place-items:center;width:74px;height:74px;border:1px solid #cdd7eb;background:#f7f9fe;position:relative;transition:background .25s,border .25s,box-shadow .25s,transform .25s}
.flow-icon svg{width:29px;height:29px;transition:transform .25s}
.flow-tab:hover .flow-icon{border-color:var(--blue);transform:translateY(-4px)}
.flow-tab[aria-selected=true]{color:var(--ink)}
.flow-tab[aria-selected=true] .flow-icon{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 9px 25px rgba(38,74,245,.19)}
.flow-tab[aria-selected=true] .flow-icon svg{transform:scale(1.05)}
.flow-number{font-size:9px;letter-spacing:.1em;color:var(--blue);margin-top:16px}
.flow-label{font-family:var(--display);font-size:17px;letter-spacing:-.025em;line-height:1.25;margin-top:7px;overflow-wrap:break-word}
.flow-panels{border-top:1px solid var(--line)}
.flow-panel{padding-top:25px;display:grid;grid-template-columns:1fr 175px;gap:25px;min-height:208px}
.flow-step-caption{font-size:9px!important;text-transform:uppercase;letter-spacing:.1em;color:var(--blue)!important;margin-bottom:12px}
.flow-panel h3{font-size:28px;margin-bottom:13px}
.flow-detail{font-size:13px;line-height:1.8;color:var(--muted);max-width:700px}
.flow-output{border-left:1px solid var(--line);padding-left:22px;display:flex;align-items:flex-start;flex-direction:column}
.flow-output>span{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.flow-output svg{width:32px;height:32px;color:var(--blue);margin-block:18px 13px}
.flow-output strong{font-size:12px;font-weight:650;line-height:1.55}
.flow-navigation{border-top:1px solid var(--line);padding-top:17px;margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.flow-counter{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.flow-next{display:inline-flex;gap:22px;align-items:center;justify-content:space-between;background:none;border:0;border-bottom:1px solid var(--ink);padding:5px 0;font-size:11px;min-height:36px}
.flow-next span{font-size:21px;line-height:1;transition:transform .2s}
.flow-next:hover span{transform:translateX(4px)}
.flow-panel.is-entering{animation:flowPanel .3s both ease-out}
.workflow-section .diagram{padding:45px}
.workflow-section .flow-track{padding-bottom:35px}
.workflow-section .flow-label{font-size:23px}
.workflow-section .flow-panel{grid-template-columns:1fr 300px;min-height:220px;gap:60px}
.workflow-section .flow-panel h3{font-size:39px}
.workflow-section .flow-detail{font-size:16px}
.workflow-section .flow-output{padding-left:35px}
.workflow-section .flow-output strong{font-family:var(--display);font-size:25px;letter-spacing:-.035em;font-weight:500}
.workflow-section .flow-output svg{width:40px;height:40px}
.service-diagram .diagram{margin-top:25px}
.service-diagram>h2{font-size:clamp(29px,3vw,42px)}
.service-visual{overflow:hidden}
.service-visual>img{aspect-ratio:2;transition:transform 1.2s ease}
.service-card .image-link{position:relative}
.service-card .image-link:after{content:'↗';position:absolute;bottom:18px;right:18px;background:rgba(255,255,255,.93);color:var(--ink);width:40px;height:40px;display:grid;place-items:center;transform:translateY(10px);opacity:0;transition:opacity .3s,transform .3s;font-size:23px}
.service-card:hover .image-link:after,.service-card:focus-within .image-link:after{opacity:1;transform:translateY(0)}
.service-card:hover img{transform:scale(1.055)}
.reveal-pending{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:var(--reveal-delay,0ms)}
.reveal-pending.is-visible{opacity:1;transform:none}
html:not(.js) .flow-tab{cursor:default}
html:not(.js) .flow-panel+.flow-panel{margin-top:25px;border-top:1px solid var(--line)}
@keyframes heroSignal{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
@keyframes copyEnter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes sceneEnter{from{opacity:.3}to{opacity:1}}
@keyframes flowPanel{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.immersive-copy h1{font-size:119px}.immersive-copy>p{font-size:18px;max-width:540px}.hero-glass-note{right:calc((100% - 1440px)/2);bottom:160px}}
@media(max-width:1150px){.hero-glass-note{display:none}.immersive-copy{max-width:810px}.immersive-copy h1{font-size:8.4vw}.diagram{padding:23px}.flow-panel{grid-template-columns:1fr 140px;gap:20px}.flow-output{padding-left:18px}.flow-label{font-size:15px}.flow-icon{width:63px;height:63px}.flow-wire{height:63px}.flow-panel h3{font-size:25px}.flow-detail{font-size:12px}.workflow-section .flow-icon{width:74px;height:74px}.workflow-section .flow-wire{height:74px}}
@media(max-width:850px){.immersive-hero{min-height:calc(100svh - 76px);min-height:max(670px,calc(100svh - 76px))}.immersive-copy{padding-block:70px}.immersive-copy h1{font-size:9vw}.immersive-copy>p{max-width:420px}.hero-shade{background:linear-gradient(90deg,rgba(5,13,33,.84),rgba(5,13,33,.56) 58%,rgba(5,13,33,.17)),linear-gradient(0deg,rgba(5,13,33,.6),transparent 50%)}.hero-depth-image{object-position:60% center}.hero-topline{font-size:8px;gap:20px}.hero-topline span:last-child{max-width:175px}.hero-bottomline>span:last-child{display:none}.workflow-section .diagram{padding:30px}.workflow-section .flow-label{font-size:19px}.workflow-section .flow-panel{grid-template-columns:1fr 205px;gap:30px}.workflow-section .flow-panel h3{font-size:32px}.workflow-section .flow-output strong{font-size:22px}.workflow-section .flow-detail{font-size:14px}.workflow-section .flow-output{padding-left:25px}.service-diagram .flow-label{font-size:18px}.service-diagram .flow-panel{grid-template-columns:1fr 175px}.service-diagram .flow-detail{font-size:14px}.service-diagram .flow-panel h3{font-size:29px}}
@media(max-width:600px){.immersive-hero{min-height:max(710px,calc(100svh - 76px))}.immersive-content{padding-top:23px;padding-bottom:20px}.hero-topline{font-size:7px;letter-spacing:.08em;padding-bottom:16px;gap:25px}.hero-topline span:last-child{max-width:132px}.immersive-copy{padding-block:70px 85px}.immersive-copy .eyebrow{font-size:9px;margin-bottom:25px}.immersive-copy h1{font-size:clamp(44px,11.4vw,65px);line-height:1.07;letter-spacing:-.055em}.immersive-copy>p{font-size:14px;max-width:335px;margin-top:25px;line-height:1.8}.immersive-copy .actions{flex-direction:column;align-items:flex-start;gap:19px;margin-top:28px}.hero-primary{min-height:52px}.hero-contact-link{font-size:11px}.hero-bottomline{font-size:7px;letter-spacing:.04em;gap:18px;padding-top:16px}.hero-bottomline>span:first-child{max-width:175px;line-height:1.7}.hero-bottomline>a{font-size:8px;gap:11px}.hero-depth-image{object-position:65% center}.hero-shade{background:linear-gradient(90deg,rgba(5,13,33,.8),rgba(5,13,33,.6)),linear-gradient(0deg,rgba(5,13,33,.55),transparent 45%)}.diagram,.workflow-section .diagram{padding:22px 18px}.flow-track,.workflow-section .flow-track{padding-bottom:25px}.flow-tabs{grid-template-columns:1fr 1fr;gap:19px 14px}.flow-tab{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;gap:2px 9px;text-align:left;align-items:center;padding:0}.flow-icon,.workflow-section .flow-icon{grid-row:span 2;width:38px;height:44px;flex-shrink:0}.flow-icon svg{width:21px;height:21px}.flow-number{margin:0;font-size:8px}.flow-label,.service-diagram .flow-label,.workflow-section .flow-label{margin:0;font-size:14px;line-height:1.25}.flow-wire{display:none}.flow-panel,.service-diagram .flow-panel,.workflow-section .flow-panel{grid-template-columns:1fr;gap:22px;min-height:0;padding-top:23px}.flow-panel h3,.service-diagram .flow-panel h3,.workflow-section .flow-panel h3{font-size:29px;margin-bottom:12px}.flow-detail,.service-diagram .flow-detail,.workflow-section .flow-detail{font-size:13px;line-height:1.8}.flow-output,.workflow-section .flow-output{border-left:0;border-top:1px solid var(--line);padding:15px 0 0;display:grid;grid-template-columns:25px 1fr;gap:4px 14px;align-items:center}.flow-output>span{grid-column:2;font-size:8px;line-height:1.4}.flow-output>svg,.workflow-section .flow-output>svg{grid-row:1/3;grid-column:1;width:25px;height:25px;margin:0}.flow-output strong,.workflow-section .flow-output strong{font-family:var(--body);font-size:12px;font-weight:650;letter-spacing:0;grid-column:2}.flow-navigation{margin-top:20px;padding-top:12px}.workflow-more{justify-content:flex-start}.service-visual>img{aspect-ratio:1.3}.reveal-pending{transform:translate3d(0,15px,0)}.service-card .image-link:after{opacity:1;transform:none;width:34px;height:34px;bottom:13px;right:13px;font-size:20px}}
@media(max-width:360px){.immersive-copy h1{font-size:41px}.hero-topline{font-size:6px}.flow-tabs{gap:17px 8px}.flow-label,.service-diagram .flow-label,.workflow-section .flow-label{font-size:12px}.flow-icon,.workflow-section .flow-icon{width:33px}.flow-tab{grid-template-columns:33px 1fr;gap:2px 6px}}
@media(prefers-reduced-motion:reduce){.hero-scene{transform:none!important;will-change:auto}.reveal-pending{opacity:1!important;transform:none!important}.flow-panel.is-entering{animation:none}.service-card:hover img{transform:none}.flow-tab:hover .flow-icon{transform:none}}
@media print{.hero-scene,.hero-shade,.hero-glass-note,.hero-topline,.hero-bottomline,.hero-contact-link,.flow-tabs,.flow-wire,.flow-navigation{display:none!important}.immersive-hero{color:black;background:white;min-height:0}.immersive-content{min-height:0;padding:15px 0}.immersive-copy{padding:20px 0}.immersive-copy h1,.immersive-copy h1 span,.immersive-copy p{color:black}.flow-panel[hidden]{display:grid!important}.flow-panel{break-inside:avoid}.diagram{overflow:visible}.reveal-pending{opacity:1;transform:none}}

/* Service detail: the same full-width image environment as the home page. */
.service-scene-hero{min-height:clamp(570px,calc(83svh - 92px),720px);width:100%;border-radius:0;margin:0;--service-focus:62% 50%}
.service-scene-hero .hero-depth-image{object-position:var(--service-focus)}
.service-scene-hero .hero-shade{background:linear-gradient(90deg,rgba(5,13,33,.91) 0%,rgba(5,13,33,.8) 29%,rgba(5,13,33,.47) 53%,rgba(5,13,33,.08) 82%),linear-gradient(0deg,rgba(5,13,33,.7),transparent 37%)}
.service-scene-hero .immersive-content{padding-top:25px;padding-bottom:23px}
.service-scene-hero .immersive-copy{max-width:850px;padding-block:45px}
.service-scene-hero .immersive-copy h1{font-size:clamp(52px,5.7vw,83px);line-height:1.04;letter-spacing:-.05em;text-wrap:balance;overflow-wrap:break-word}
.service-scene-hero .immersive-copy>p{font-size:16px;max-width:550px;margin-top:23px}
.service-scene-hero .immersive-copy .eyebrow{font-size:10px;letter-spacing:.1em;margin-bottom:24px}
.service-scene-hero .immersive-copy .actions{margin-top:27px}
.service-scene-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-size:9px;letter-spacing:.06em;color:#d1e0f8}
.service-scene-breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
.service-depth-note{bottom:100px;width:245px;padding:21px 23px}
.service-depth-note .hero-mini-flow{margin-block:21px}
.service-depth-note p{font-size:9px}
.service-scene-hero+.service-content{padding-top:75px}
.service-scene-hero[data-service="knowledge-atlas"]{--service-focus:64% 50%}
.service-scene-hero[data-service="guided-product-path"]{--service-focus:61% 52%}
.service-scene-hero[data-service="qr-asset-register"]{--service-focus:60% 55%}
.service-scene-hero[data-service="mobile-field-journal"]{--service-focus:66% 52%}
.service-scene-hero[data-service="offer-configurator"]{--service-focus:65% 47%}
.service-scene-hero[data-service="document-comparison"]{--service-focus:60% 46%}
.service-scene-hero[data-service="duplicate-free-data"]{--service-focus:63% 55%}
.service-scene-hero[data-service="scheduled-exports"]{--service-focus:65% 51%}
.service-scene-hero[data-service="inclusive-web-journey"]{--service-focus:61% 52%}
.service-scene-hero[data-service="release-greenlight"]{--service-focus:61% 53%}
/* The catalogue remains a set of ordinary cards, with modest image heights. */
.catalog-grid .service-card img{height:230px;aspect-ratio:auto}
.feature-grid .service-card img{height:205px;aspect-ratio:auto}
.related-grid .service-card img{height:210px;aspect-ratio:auto}
@media(min-width:1700px){.service-scene-hero .immersive-copy h1{font-size:88px}}
@media(max-width:1150px){.service-scene-hero{min-height:580px}.service-scene-hero .immersive-copy{max-width:720px}.service-scene-hero .immersive-copy h1{font-size:clamp(53px,6.8vw,77px)}}
@media(max-width:850px){.service-scene-hero{min-height:560px}.service-scene-hero .immersive-copy{max-width:650px;padding-block:42px}.service-scene-hero .immersive-copy h1{font-size:clamp(47px,7.9vw,63px)}.service-scene-hero .immersive-copy>p{font-size:15px;max-width:470px}.service-scene-hero .hero-shade{background:linear-gradient(90deg,rgba(5,13,33,.9),rgba(5,13,33,.65) 58%,rgba(5,13,33,.24)),linear-gradient(0deg,rgba(5,13,33,.65),transparent 48%)}.service-scene-hero .hero-topline>span{max-width:170px;text-align:right}.service-scene-hero+.service-content{padding-top:55px}.catalog-grid .service-card img{height:205px}.feature-grid .service-card img{height:210px}}
@media(max-width:600px){.service-scene-hero{min-height:535px}.service-scene-hero .immersive-content{padding-top:22px;padding-bottom:19px}.service-scene-hero .immersive-copy{padding-block:37px 41px}.service-scene-hero .immersive-copy h1{font-size:clamp(39px,10.3vw,56px);line-height:1.08;max-width:100%}.service-scene-hero .immersive-copy .eyebrow{font-size:8px;line-height:1.6;letter-spacing:.05em;margin-bottom:20px;max-width:300px}.service-scene-hero .immersive-copy>p{font-size:14px;max-width:320px;margin-top:19px;line-height:1.75}.service-scene-hero .immersive-copy .actions{margin-top:24px;gap:17px}.service-scene-hero .hero-topline{padding-bottom:15px}.service-scene-hero .hero-topline>span{font-size:6px;max-width:120px;letter-spacing:.045em}.service-scene-breadcrumb{font-size:8px;letter-spacing:.02em;gap:9px}.service-scene-hero .hero-shade{background:linear-gradient(90deg,rgba(5,13,33,.85),rgba(5,13,33,.7) 60%,rgba(5,13,33,.49)),linear-gradient(0deg,rgba(5,13,33,.62),transparent 45%)}.service-scene-hero .hero-bottomline>span:first-child{max-width:165px}.service-scene-hero+.service-content{padding-top:42px}.catalog-grid .service-card img,.feature-grid .service-card img,.related-grid .service-card img{height:205px}}
@media(max-width:360px){.service-scene-hero .immersive-copy h1{font-size:37px}.service-scene-hero .immersive-copy .eyebrow{font-size:7px}.service-scene-hero .hero-topline>span{max-width:104px;font-size:5px}.service-scene-hero .hero-bottomline{font-size:6px}.service-scene-hero .hero-bottomline>a{font-size:7px;gap:8px}}
@media(prefers-reduced-motion:reduce){.service-scene-hero .hero-scene{transform:none!important;will-change:auto}}
@media print{.service-scene-hero{min-height:0;color:black;background:white}.service-scene-hero .immersive-copy{padding:20px 0}.service-scene-hero .immersive-copy h1,.service-scene-hero .immersive-copy h1 span,.service-scene-hero .immersive-copy p{color:black}.service-scene-hero .hero-scene,.service-scene-hero .hero-shade{display:none!important}}