/* Navigation and reading hierarchy. Existing brand, motion and case accents stay intact. */
:root{--ui-accent:#8bd9ff;--ui-ink:#eaf7ff;--shell-top:90px;--shell-bottom:86px}
.topbar{height:var(--shell-top);gap:22px}.header-links{display:flex;gap:10px;align-items:center;margin-left:auto}.edition{margin-left:auto}.header-links .contact-tab,.header-links .index-toggle,.header-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 17px;margin:0;border:1px solid #83cfff32;border-radius:999px;background:#0b1826b3;color:#d2e3f4;font:500 13px/1.2 Noto,Arial,sans-serif;white-space:nowrap}
.header-links .index-toggle{color:#d2e3f4}.header-links .contact-tab span,.header-links .index-toggle span{margin:0;color:inherit}.header-links .index-toggle .index-arrow{margin-left:3px}.header-link[aria-current=true]{color:#b3eaff;border-color:#8bd9ff72}.header-links .fullscreen{margin:0;width:44px;height:44px;border:1px solid #83cfff32;border-radius:50%}.header-links svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.scene{inset:var(--shell-top) 0 var(--shell-bottom)}
.navigation{height:var(--shell-bottom);gap:17px;padding-top:7px;border-top:0}.navigation .progress{position:absolute;top:0;left:0;right:0;max-width:none;height:2px;width:100%;background:#ffffff16}.navigation .progress span{height:2px}.navigation-meta{display:flex;flex-direction:column;gap:3px;min-width:67px}.navigation-label{font-size:10px;letter-spacing:.13em;color:#8babc1;font-weight:700}.scene-counter{font-size:12px;gap:7px;min-width:0}.scene-counter b{font-size:23px}.scene-caption{margin:0;font-size:14px;color:#d1e4f4;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navigation-hint{font-size:12px;line-height:1.4;color:#8babc1;margin-left:auto;text-align:right;max-width:220px}.navigation .nav-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:auto;min-width:112px;height:46px;padding:0 17px;font-size:19px;border-radius:999px;border-color:#8bd9ff45;color:var(--ui-ink);background:#0c1b2b}.navigation .nav-text{font:500 13px Noto,Arial,sans-serif}.navigation .next{color:#e1edf6}.navigation .nav-button:focus-visible{outline-color:var(--ui-accent)}
.edge-nav{position:fixed;z-index:35;top:50%;transform:translateY(-50%);width:36px;height:60px;display:grid;place-items:center;border:1px solid #b5ddff20;border-radius:999px;background:#07111cb3;backdrop-filter:blur(12px);color:#adbdcb;box-shadow:none}.edge-nav svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.edge-prev{left:1.5vw}.edge-next{right:1.5vw}.edge-nav:disabled{opacity:0;pointer-events:none}.entrance-busy .edge-nav,.entrance-busy .read-more-cue{pointer-events:none;opacity:0}
.cover-help{font-size:13px;line-height:1.55;color:#a7c4d9;max-width:360px;margin:18px 0 0;animation:none!important}.cover-help-mobile{display:none}.cover-copy{padding-bottom:28px}.cover-foot{bottom:16px}
.case-summary{font-size:17px;line-height:1.6;color:#b8c7d7;margin:0 0 25px;max-width:510px}.case-copy .case-promise{font-size:13px;margin-bottom:14px}.case-copy .metrics{margin-top:8px}.case-details{margin-top:20px;border:1px solid color-mix(in srgb,var(--accent) 28%,#172231);border-radius:12px;background:#08121fbd;overflow:hidden}.case-details>summary{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:50px;padding:14px 18px;list-style:none;cursor:pointer;color:#deebf6;font-size:14px;font-weight:700;transition:color .25s,background .25s;outline-offset:-4px}.case-details>summary::-webkit-details-marker{display:none}.case-details>summary::marker{content:''}.case-details>summary svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;transition:rotate .25s}.case-details[open]>summary svg{rotate:180deg}.case-details>summary:hover,.case-details>summary:focus-visible{color:#fff;background:color-mix(in srgb,var(--accent) 11%,transparent)}.case-detail-content{padding:5px 19px 20px}.case-detail-content .case-description{font-size:16px;line-height:1.65;margin-bottom:18px}.case-detail-content .tags{margin-bottom:20px}.case-detail-content .journey{margin-top:0}.case-detail-content .step-description{margin-bottom:0}.case-scene:has(.case-details[open]){align-items:flex-start}.case-details[open] .case-detail-content{animation:detail-unfold .3s ease-out}.case-visual{flex-shrink:0}.case-copy h2{overflow-wrap:normal}.case-details .journey-step{min-height:49px}.concept-note{display:block;margin-top:10px;font-size:12px;color:#99b0c4;line-height:1.5}
.read-more-cue{position:fixed;z-index:38;bottom:calc(var(--shell-bottom) + 9px);left:50%;translate:-50% 0;display:flex;align-items:center;gap:9px;padding:8px 14px;border:1px solid #8bd9ff45;border-radius:999px;background:#071320ed;color:#c1e9ff;box-shadow:0 5px 30px #0009;font:700 12px/1.4 Noto,Arial,sans-serif}.read-more-cue svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.read-more-cue:not([hidden]){animation:cue-arrival .3s ease-out}.scene.has-more-content{padding-bottom:72px}
:where(.header-link,.contact-tab,.index-toggle,.nav-button,.icon-button,.edge-nav,.primary,.shiny-cta,.text-button,.case-demo,.close,.front-card,.index-card,.delivery-step,.capability,.read-more-cue){transition:color .25s,border-color .25s,background-color .25s,box-shadow .25s,translate .25s,filter .25s}
@media(hover:hover){:where(.header-link,.header-links .contact-tab,.header-links .index-toggle,.nav-button,.icon-button,.edge-nav,.primary,.shiny-cta,.case-demo,.close):not(:disabled):hover{color:#f3fbff;border-color:#8bd9ff70;box-shadow:0 0 18px #329efc14;translate:0 -1px;filter:brightness(1.04)}.text-button:hover{color:#e3f6ff;border-bottom-color:#8bd9ff;translate:0 -2px}.front-card:hover,.index-card:hover,.delivery-step:hover,.capability:hover{translate:0 -2px;filter:brightness(1.1)}}
:where(.header-link,.header-links .contact-tab,.header-links .index-toggle,.nav-button,.icon-button,.edge-nav,.primary,.shiny-cta,.case-demo,.close):not(:disabled):focus-visible{outline:2px solid #a5e4ff;outline-offset:4px;color:#f3fbff;box-shadow:0 0 24px #329efc24}
:where(.header-link,.contact-tab,.index-toggle,.nav-button,.icon-button,.edge-nav,.primary,.shiny-cta,.case-demo,.front-card,.index-card,.capability):not(:disabled):active{translate:0 1px;filter:brightness(1.2)}.nav-button:disabled{opacity:.25;translate:none;filter:none;box-shadow:none}.front-card:hover{transform:none}.shiny-cta:is(:hover,:focus-visible){--gradient-percent:20%;--gradient-angle-offset:95deg;--gradient-shine:#b3e7ff}.shiny-cta{transition:--gradient-angle-offset .8s,--gradient-percent .8s,--gradient-shine .8s,color .25s,border-color .25s,box-shadow .25s,translate .25s,filter .25s}.shiny-cta:is(:hover,:focus-visible) b{transform:translate(2px,-2px)}
.index-dialog .dialog-top h2{margin-bottom:12px}.index-description{font-size:14px;color:#aabed2;margin:0 0 23px;line-height:1.5}.index-bottom{padding-top:20px}.index-bottom button{min-height:44px}.header-links .contact-tab .nav-label{display:inline}
@keyframes detail-unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes cue-arrival{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Small navigation pills share the CTA's light treatment without competing with the content. */
@font-face{font-family:Noto;src:url('assets/NotoSansDisplay-Medium.ttf');font-weight:500;font-display:swap}
.header-links .quiet-cta,.contact-dialog .quiet-cta{isolation:isolate;position:relative;overflow:hidden;border:1px solid #c2dfff22;background:#07111cbb;color:#bdcbd7;box-shadow:none;translate:none;filter:none;transition:color .25s,border-color .3s,background-color .3s}
.quiet-cta::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 20%,#55baff0b 43%,#a4dfff16 49%,#55baff09 56%,transparent 76%);background-size:240% 100%;background-position:100% 0;transition:background-position 1.2s,opacity .3s;opacity:.6}
.header-links .quiet-cta[aria-current=true],.header-links .quiet-cta[aria-expanded=true],.navigation .quiet-cta[aria-pressed=true]{color:#edf7ff;border-color:#c2dfff40;background:#091622bb}
@media(hover:hover){.header-links .quiet-cta:not(:disabled):hover,.navigation .quiet-cta:not(:disabled):hover,.contact-dialog .quiet-cta:hover{color:#f3faff;border-color:#9ed9ff66;background:#0a1621;box-shadow:none;translate:none;filter:none}.quiet-cta:not(:disabled):hover::before{background-position:0 0;opacity:1}.edge-nav:not(:disabled):hover{color:#e1f3ff;border-color:#9ed9ff55;box-shadow:none;translate:none;filter:none;background:#0a1621}}
.quiet-cta:not(:disabled):focus-visible{outline:2px solid #a5e4ff;outline-offset:4px;box-shadow:none}.navigation .quiet-cta:disabled{background:#07111c55;border-color:#c2dfff14;color:#9aafbf;opacity:.28}
/* A compact digital visiting card, using the original G without altering its shape. */
.contact-dialog{width:540px;max-width:calc(100vw - 32px);padding:28px 30px;border:1px solid #b4d6f329;border-radius:22px;background:radial-gradient(ellipse at 87% 48%,#12344e77,transparent 60%),#070e17;box-shadow:0 24px 90px #0008}
.contact-dialog .dialog-top{align-items:center}.contact-dialog .contact-signature{width:135px}.contact-dialog .close{width:34px;height:34px;font-size:23px}
.contact-card-body{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:19px 0 21px;min-height:130px}
.contact-dialog .contact-person{display:block;margin:0;min-width:0}.contact-dialog .contact-person h2{margin:0;font-size:22px;font-weight:700;letter-spacing:.05em;line-height:1.4;white-space:nowrap}.contact-dialog .contact-person p{font-size:13px;line-height:1.6;color:#8fa6b9;margin:7px 0 0}
.contact-mark{position:relative;flex:0 0 138px;aspect-ratio:1;mix-blend-mode:screen}.contact-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px #159bff22)}.contact-dialog[open] .contact-mark{animation:contact-float 6s ease-in-out infinite}.contact-mark .logo-sheen{opacity:.35}
.contact-dialog .whatsapp-link{font-size:13px;min-height:52px;padding:16px 44px;box-shadow:inset 0 0 0 1px #a2d9ff1c;--highlight:#3b88b3;--gradient-shine:#c3eaff88}.contact-dialog .shiny-shimmer{opacity:.65}.contact-dialog .shiny-cta::before{opacity:.45}
@keyframes contact-float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
.delivery-detail h3{min-height:2.2em}
@media(max-width:800px){.contact-dialog{padding:24px}.contact-card-body{gap:12px;margin:25px 0;min-height:104px}.contact-mark{flex-basis:108px}.contact-dialog .contact-person h2{font-size:18px;letter-spacing:.035em}.contact-dialog .contact-person p{font-size:12px}.contact-dialog .whatsapp-link{font-size:13px}.contact-dialog .contact-signature{width:124px}}
@media(max-width:370px){.contact-dialog{padding:22px}.contact-mark{flex-basis:88px}.contact-dialog .contact-person h2{font-size:17px}.contact-dialog .contact-person p{font-size:11px}}

@media(max-width:1200px){.edition{display:none}.header-links{margin-left:auto}.topbar{gap:16px}.navigation-hint{max-width:155px}.scene-caption{max-width:190px}}
@media(max-width:1050px){.edge-nav{display:none}.navigation-hint{display:none}.topbar .brand{width:140px}.header-links{gap:7px}.header-links .header-link,.header-links .contact-tab,.header-links .index-toggle{padding-inline:13px}.header-links .fullscreen{display:none}}
@media(min-width:801px) and (max-height:780px){:root{--shell-top:80px;--shell-bottom:76px}.case-summary{font-size:16px;margin-bottom:20px}.case-copy .case-promise{font-size:12px}.case-copy h2{font-size:clamp(34px,3.6vw,54px)}.case-details{margin-top:16px}.case-details>summary{min-height:46px;padding:12px 16px}.cover-help{margin-top:14px}.cover-copy{padding-bottom:20px}.cover .intro{margin:20px 0}}
@media(max-width:800px){:root{--shell-top:76px;--shell-bottom:80px}.topbar{left:5vw;right:5vw;gap:10px}.topbar .brand{width:112px}.header-links{gap:8px}.header-links .header-link,.header-links .fullscreen{display:none}.header-links .contact-tab,.header-links .index-toggle{min-height:42px;padding:10px 13px;font-size:12px;margin:0}.header-links .index-toggle .index-label{font-size:12px}.header-links .index-toggle .index-label::after{content:none}.header-links .index-toggle .index-arrow{display:none}.header-links .index-toggle svg{width:16px;height:16px}.navigation{left:5vw;right:5vw;gap:10px;padding-top:5px}.navigation-meta{min-width:52px}.navigation-label{font-size:9px;letter-spacing:.08em}.scene-counter{gap:5px;font-size:11px}.scene-counter b{font-size:21px}.scene-caption{display:block;max-width:none;min-width:0;flex:1;font-size:12px;line-height:1.4;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.navigation .nav-text{display:none}.navigation .nav-button{width:42px;height:44px;min-width:42px;padding:0;font-size:20px}.cover-help-desktop{display:none}.cover-help-mobile{display:inline}.cover-help{font-size:12px;max-width:290px;line-height:1.6;margin-top:16px}.cover-copy{padding-bottom:35px}.cover-foot{bottom:10px;font-size:9px}.case-scene{gap:24px}.case-copy .case-summary{font-size:16px;line-height:1.6;margin-bottom:20px}.case-copy .case-promise{font-size:12px}.case-copy h2{font-size:clamp(32px,8vw,49px)}.case-copy .metrics{margin-top:0}.case-details{margin-top:16px}.case-detail-content{padding:4px 15px 20px}.case-details>summary{font-size:14px;min-height:50px;padding:14px 15px}.case-detail-content .case-description{font-size:16px}.case-detail-content .journey-step{font-size:12px}.case-detail-content .tags>span{font-size:11px}.case-scene:has(.case-details[open]){align-items:stretch}.read-more-cue{font-size:11px;padding:7px 13px;bottom:calc(var(--shell-bottom) + 7px)}.scene.has-more-content{padding-bottom:65px}.closing-scene.has-more-content{padding-bottom:65px}.concept-note{font-size:11px}.index-description{font-size:14px}}
@media(max-width:370px){.topbar .brand{width:96px}.header-links{gap:6px}.header-links .contact-tab,.header-links .index-toggle{padding:9px 10px}.navigation{gap:7px}.navigation .nav-button{width:39px;min-width:39px}.scene-caption{font-size:11px}}

/* Reuse the entrance CTA's conic rim, dots and rotating sheen only on interaction. */
.header-links{gap:7px}.header-links .nav-shiny{min-height:36px;height:36px;padding:8px 13px;font:500 12px/1.2 Noto,Arial,sans-serif}.header-links .fullscreen{width:36px;height:36px}
.header-links .nav-shiny,.navigation .nav-shiny{--shiny-bg:#07111c;--highlight:transparent;--gradient-shine:transparent;--gradient-percent:5%;--gradient-angle-offset:0deg;border:1px solid transparent;background:linear-gradient(var(--shiny-bg),var(--shiny-bg)) padding-box,conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),transparent,var(--highlight) var(--gradient-percent),var(--gradient-shine) calc(var(--gradient-percent)*2),var(--highlight) calc(var(--gradient-percent)*3),transparent calc(var(--gradient-percent)*4)) border-box;box-shadow:inset 0 0 0 1px #c2dfff22;color:#bdcbd7;filter:none;translate:none;animation:gradient-orbit 3s linear infinite paused;transition:--gradient-angle-offset .8s,--gradient-percent .8s,--gradient-shine .8s,color .25s,box-shadow .4s,translate .25s}
.navigation .nav-shiny{min-height:46px}.nav-shiny>span{position:relative;z-index:2}.header-links .contact-tab .nav-label{display:inline;color:inherit;margin:0}.nav-shiny::before{opacity:0;transition:opacity .35s}.nav-shiny .shiny-shimmer{opacity:0;animation-play-state:paused;transition:opacity .35s}
.header-links .nav-shiny[aria-current=true],.header-links .nav-shiny[aria-expanded=true]{color:#edf7ff;box-shadow:inset 0 0 0 1px #c2dfff40}
@media(hover:hover){.header-links .nav-shiny:not(:disabled):hover,.navigation .nav-shiny:not(:disabled):hover{--highlight:#189fff;--gradient-percent:20%;--gradient-angle-offset:95deg;--gradient-shine:#b3e7ff;border-color:transparent;color:#edf9ff;box-shadow:inset 0 0 20px #168eff24,0 0 40px #009dff28;animation-play-state:running;translate:0 -2px;filter:none}.nav-shiny:not(:disabled):hover::before{opacity:1}.nav-shiny:not(:disabled):hover .shiny-shimmer{opacity:1;animation-play-state:running}}
.header-links .nav-shiny:focus-visible,.navigation .nav-shiny:focus-visible{--highlight:#189fff;--gradient-percent:20%;--gradient-angle-offset:95deg;--gradient-shine:#b3e7ff;border-color:transparent;color:#edf9ff;animation-play-state:running;box-shadow:inset 0 0 20px #168eff24,0 0 40px #009dff28;outline:2px solid #a5e4ff;outline-offset:4px}.nav-shiny:focus-visible::before,.nav-shiny:focus-visible .shiny-shimmer{opacity:1;animation-play-state:running}
.navigation .nav-shiny:disabled{opacity:.25;--highlight:transparent;--gradient-shine:transparent;box-shadow:inset 0 0 0 1px #c2dfff22;translate:none;animation-play-state:paused}.navigation .nav-shiny:disabled::before,.navigation .nav-shiny:disabled .shiny-shimmer{opacity:0;animation-play-state:paused}
@media(max-width:1050px){.navigation #prev{margin-left:auto}}
@media(max-width:800px){.header-links .nav-shiny{min-height:34px;height:34px;padding:8px 11px;font-size:11.5px}.header-links .index-toggle .index-label{font-size:11.5px}.navigation .nav-shiny{min-height:44px}.navigation #prev{margin-left:0}}
@media(max-width:370px){.header-links .nav-shiny{padding-inline:10px}.header-links{gap:6px}}

/* Text-only header navigation. Font, hit area and spacing match the approved size. */
.header-links .menu-text,.header-links .menu-text:is(:hover,:focus-visible,[aria-current=true],[aria-expanded=true]){position:relative;isolation:isolate;overflow:visible;min-height:36px;height:36px;padding:8px 13px;border:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:#bdcbd7;font:500 12px/1.2 Noto,Arial,sans-serif;filter:none;translate:none;animation:none;transition:none}
.header-links .menu-text::before,.header-links .menu-text::after{content:none}
.header-links .menu-text>span{display:block;position:relative;margin:0;color:inherit;transition:color .25s,text-shadow .25s,transform .25s}
.header-links .menu-text[aria-current=true]>span,.header-links .menu-text[aria-expanded=true]>span{color:#edf7ff}
.header-links .menu-text>span::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:linear-gradient(90deg,transparent,#6fcaff 22%,#c6f0ff 50%,#6fcaff 78%,transparent);transform:scaleX(0);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
.header-links .menu-text .index-label::after{content:''}
@media(hover:hover){.header-links .menu-text:hover>span{color:transparent;background:linear-gradient(105deg,#dbf3ff 25%,#7ad6ff 41%,#f4fcff 50%,#7ad6ff 59%,#dbf3ff 75%);background-size:280% 100%;background-clip:text;-webkit-background-clip:text;text-shadow:0 0 14px #58bcff66;transform:translateY(-1px);animation:menu-word-light 1.2s ease both}.header-links .menu-text:hover>span::after{transform:scaleX(1);opacity:1}}
.header-links .menu-text:is(.is-touched,:focus-visible)>span{color:transparent;background:linear-gradient(105deg,#dbf3ff 25%,#7ad6ff 41%,#f4fcff 50%,#7ad6ff 59%,#dbf3ff 75%);background-size:280% 100%;background-clip:text;-webkit-background-clip:text;text-shadow:0 0 14px #58bcff66;transform:translateY(-1px);animation:menu-word-light 1.2s ease both}
.header-links .menu-text:is(.is-touched,:focus-visible)>span::after{transform:scaleX(1);opacity:1}
@keyframes menu-word-light{from{background-position:140% 0}to{background-position:-40% 0}}
@media(max-width:800px){.header-links .menu-text,.header-links .menu-text:is(:hover,:focus-visible,[aria-current=true],[aria-expanded=true]){min-height:34px;height:34px;padding:8px 11px;font-size:11.5px}}
@media(max-width:370px){.header-links .menu-text,.header-links .menu-text:is(:hover,:focus-visible,[aria-current=true],[aria-expanded=true]){padding-inline:10px}}
