/* Serene components applied as a presentation layer; original layout CSS remains authoritative. */
@import url('./design-system/glass.css?v=2.0.0') layer(serene-components);
:root.rg-root{font-family:var(--font);line-height:normal;color:var(--ink);background:var(--paper);color-scheme:light}
/* The capsule keeps the original header's 94px document footprint and content center. */
/* Clear glass uses only the official royal blue, white and black. */
.site-serene .header{--header-inset:clamp(12px,2vw,24px);--header-ink:#0a0a0a;--rg-glass-ink:var(--header-ink);--rg-glass-rim:transparent;height:70px;top:12px;width:calc(100% - var(--header-inset)*2);margin:12px auto;padding:0 max(18px,calc(var(--gutter) - var(--header-inset)));border:none;border-radius:999px;background:linear-gradient(115deg,rgb(255 255 255 / .24),rgb(255 255 255 / .06) 48%,rgb(255 255 255 / .15));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 8px 28px rgb(10 10 10 / .045),inset 0 1px 2px rgb(255 255 255 / .65),inset 0 -1px 3px rgb(36 85 255 / .06);color:var(--header-ink);text-shadow:none;overflow:visible}
/* Remove the library's multicolour rim. */
.site-serene .header::before{display:none}
.site-serene .header::after{border-radius:inherit;inset:1px;background:linear-gradient(175deg,rgb(255 255 255 / .14),transparent 38%);opacity:1}
.site-serene .desktop-nav a{color:rgb(10 10 10 / .68);transition:color .2s,text-shadow .2s}
.site-serene .desktop-nav a:hover,.site-serene .desktop-nav a.active{color:#2455ff}
.site-serene .desktop-nav a.active::after{background:#2455ff}
.site-serene .header.header-on-dark{--header-ink:#fff;background:linear-gradient(115deg,rgb(255 255 255 / .12),rgb(255 255 255 / .035) 48%,rgb(255 255 255 / .08));box-shadow:0 8px 28px rgb(10 10 10 / .08),inset 0 1px 2px rgb(255 255 255 / .32)}
.site-serene .header-on-dark .desktop-nav a{color:rgb(255 255 255 / .85)}
.site-serene .header-on-dark .desktop-nav a:hover,.site-serene .header-on-dark .desktop-nav a.active{color:#c7ff3d}
.site-serene .header-on-dark .desktop-nav a.active::after{background:#c7ff3d}
.site-serene .header.rg-glass .header-cta{--rg-glass-rim:#2455ff;border-color:#2455ff;color:#0a0a0a;background:rgb(255 255 255 / .55)}
.site-serene .header.rg-glass .menu-toggle{--rg-glass-rim:#2455ff;border-color:#2455ff;background:rgb(255 255 255 / .24)}
.site-serene .header.rg-glass .menu-toggle>span{background:var(--header-ink)}
/* Shared brand material. Optical tints derive only from royal blue, lime, white and black. */
.site-serene .glass-action{--flow-pale:rgb(255 255 255 / .14);--flow-blue:rgb(36 85 255 / .3);--flow-glow:rgb(255 255 255 / .06);--flow-duration:7.5s;--rg-glass-rim:linear-gradient(135deg,rgb(255 255 255 / .8),rgb(36 85 255 / .3),rgb(255 255 255 / .5));position:relative;isolation:isolate;overflow:hidden;box-shadow:0 6px 18px rgb(10 10 10 / .09),inset 0 1px 1px rgb(255 255 255 / .55);text-shadow:none;transition:background .25s,box-shadow .3s,transform .25s;-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.site-serene .button.glass-action{border:0;border-radius:999px}
.site-serene .button-dark.glass-action{background:linear-gradient(140deg,rgb(10 10 10 / .02),rgb(10 10 10 / .2)),var(--blue);color:#fff}
.site-serene .button-dark.glass-action:hover{background:linear-gradient(140deg,rgb(10 10 10 / .08),rgb(10 10 10 / .26)),var(--blue)}
.site-serene .glass-action::before{z-index:1;pointer-events:none;border-radius:inherit}
.site-serene .glass-action::after{content:'';position:absolute;inset:-110% -20%;z-index:-1;pointer-events:none;border-radius:46% 54% 42% 58%;opacity:.65;background-image:url('./assets/serene-liquid.svg'),radial-gradient(ellipse at 25% 45%,var(--flow-pale),transparent 53%),radial-gradient(ellipse at 78% 62%,var(--flow-blue),transparent 51%),radial-gradient(ellipse at var(--flow-x,60%) var(--flow-y,30%),var(--flow-glow),transparent 48%);background-size:100% 100%;background-repeat:no-repeat;filter:blur(.6px);transform:translate3d(-6%,1%,0) rotate(-8deg);animation:serene-liquid var(--flow-duration) ease-in-out infinite;animation-play-state:paused;transition:opacity .25s,filter .25s}
.site-serene .glass-action.liquid-visible::after{animation-play-state:running}
@keyframes serene-liquid{0%,100%{transform:translate3d(-7%,2%,0) rotate(-9deg) scale(1.02);border-radius:46% 54% 42% 58%}35%{transform:translate3d(7%,-5%,0) rotate(10deg) scale(1.08,.96);border-radius:58% 42% 56% 44%}70%{transform:translate3d(1%,5%,0) rotate(-3deg) scale(.98,1.06);border-radius:42% 58% 45% 55%}}
.site-serene .glass-action:hover{--flow-duration:3.6s;box-shadow:0 8px 24px rgb(10 10 10 / .12),inset 0 1px 2px rgb(255 255 255 / .75)}
.site-serene .glass-action:hover::after{opacity:.85}
.site-serene .glass-action:active::after{filter:blur(.3px) brightness(1.04);opacity:1}
.site-serene .button-icon{position:relative;z-index:2;background:#fff;color:var(--blue);border:1px solid rgb(255 255 255 / .75);box-shadow:0 2px 6px rgb(10 10 10 / .07)}
.site-serene .button-lime.glass-action{--flow-pale:rgb(255 255 255 / .6);--flow-blue:rgb(36 85 255 / .12);--flow-glow:rgb(255 255 255 / .4);background:rgb(255 255 255 / .94);color:var(--blue)}
.site-serene .button-lime.glass-action:hover{background:#fff}
.site-serene .button-lime .button-icon{background:var(--blue);color:#fff;border-color:rgb(255 255 255 / .4)}
.site-serene .header-cta.glass-action{--flow-pale:rgb(255 255 255 / .6);--flow-blue:rgb(36 85 255 / .1);--flow-glow:rgb(255 255 255 / .4);color:var(--ink);border:1px solid var(--blue);box-shadow:0 3px 10px rgb(10 10 10 / .03),inset 0 1px 2px rgb(255 255 255 / .7)}
.site-serene .header-cta.glass-action:hover{background:rgb(255 255 255 / .8)}
.site-serene :is(.service-toggle,.project-view,.scroll-circle,.menu-toggle,.mascot-reaction).glass-action{--flow-pale:rgb(255 255 255 / .6);--flow-blue:rgb(36 85 255 / .14);--flow-glow:rgb(255 255 255 / .5);background:rgb(255 255 255 / .72);color:var(--blue);border-color:rgb(36 85 255 / .18);box-shadow:0 3px 10px rgb(10 10 10 / .06),inset 0 1px 2px #fff;text-shadow:none}
.site-serene :is(.service-toggle,.project-view,.scroll-circle,.menu-toggle,.mascot-reaction).glass-action::after{animation-play-state:paused}
.site-serene :is(.service-toggle,.project-view,.scroll-circle,.menu-toggle,.mascot-reaction).glass-action:hover::after,.site-serene .service summary:hover .service-toggle::after,.site-serene .project-card:hover .project-view::after{animation-play-state:running}
.site-serene .service[open] .service-toggle.glass-action{background:var(--blue);color:#fff;border-color:var(--blue)}
.site-serene .project-card:hover .project-view.glass-action{background:var(--lime);color:var(--ink)}
.site-serene .mascot-reaction.glass-action{border-radius:24px;color:var(--ink)}
.site-serene .simulation-tabs button.glass-action{--flow-pale:rgb(255 255 255 / .08);--flow-blue:rgb(36 85 255 / .16);--flow-glow:rgb(255 255 255 / .06);background:rgb(255 255 255 / .04);color:#fff;border:0;border-radius:8px;box-shadow:inset 0 1px 1px rgb(255 255 255 / .12)}
.site-serene .simulation-tabs button[aria-selected="true"].glass-action{--flow-pale:rgb(255 255 255 / .2);--flow-blue:rgb(199 255 61 / .2);background:var(--lime);color:var(--ink);box-shadow:inset 0 1px 2px rgb(255 255 255 / .6)}
.site-serene .simulation-tabs button.glass-action::after{opacity:.3;animation-play-state:paused}
.site-serene .simulation-tabs button.glass-action:hover::after{animation-play-state:running}
.site-serene .glass-action:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.site-serene .contact .glass-action:focus-visible,.site-serene .benefits .glass-action:focus-visible{outline-color:#fff}
@media(max-width:1000px){
 .site-serene .desktop-nav,.site-serene .header-cta{display:none}
 .site-serene .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px;width:44px;height:44px;border-radius:50%}
 .site-serene .menu-toggle>span{position:relative;z-index:2;width:22px;height:1px;transition:transform .25s}
 .site-serene .mobile-nav:not([hidden]){display:flex;position:absolute;flex-direction:column;top:calc(100% + 10px);left:0;right:0;width:100%;background:rgb(255 255 255 / .94);border:1px solid var(--blue);border-radius:26px;padding:12px 23px 18px;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 12px 36px rgb(10 10 10 / .08);color:var(--ink)}
 .site-serene .mobile-nav a{padding:12px 0;min-height:48px;font-size:20px;letter-spacing:-.5px;border-bottom:1px solid rgb(36 85 255 / .13);color:var(--ink)}
 .site-serene .mobile-nav a[aria-current]{color:var(--blue)}
}
@media(max-width:760px){.site-serene .header{--header-inset:12px;height:60px;top:8px;margin:8px auto;width:calc(100% - 24px);padding:0 calc(var(--gutter) - 12px);border-radius:999px}.site-serene .glass-action{--flow-duration:8.5s}.site-serene .glass-action:hover{--flow-duration:5s}}
@media(prefers-reduced-motion:reduce){.site-serene .glass-action::after{animation:none!important;transform:none;filter:none;opacity:.2}.site-serene .glass-action{transition:none}}
.motion-off .site-serene .glass-action::after{animation:none!important;transform:none;filter:none;opacity:.2}
.serene-page-hidden .site-serene .glass-action::after{animation-play-state:paused!important}

/* Native scrollbars retain keyboard, touch, dragging and OS behaviour. */
:root.rg-root,.site-serene :is(dialog,textarea){scrollbar-width:thin;scrollbar-color:#2455ff #fff}
@supports selector(::-webkit-scrollbar){
 :root.rg-root,.site-serene :is(dialog,textarea){scrollbar-width:auto;scrollbar-color:auto}
 :root.rg-root::-webkit-scrollbar,.site-serene :is(dialog,textarea)::-webkit-scrollbar{width:12px;height:12px}
 :root.rg-root::-webkit-scrollbar-track,.site-serene :is(dialog,textarea)::-webkit-scrollbar-track{background:#fff;border-left:1px solid rgb(36 85 255 / .1)}
 :root.rg-root::-webkit-scrollbar-thumb,.site-serene :is(dialog,textarea)::-webkit-scrollbar-thumb{min-height:48px;border:3px solid #fff;border-radius:999px;background:#2455ff}
 :root.rg-root::-webkit-scrollbar-thumb:hover,.site-serene :is(dialog,textarea)::-webkit-scrollbar-thumb:hover{background:#c7ff3d;box-shadow:inset 0 0 0 1px #2455ff}
 :root.rg-root::-webkit-scrollbar-thumb:active,.site-serene :is(dialog,textarea)::-webkit-scrollbar-thumb:active{background:#2455ff;box-shadow:inset 0 0 0 1px #c7ff3d}
 :root.rg-root::-webkit-scrollbar-corner,.site-serene :is(dialog,textarea)::-webkit-scrollbar-corner{background:#fff}
}

/* Accessibility alternatives take priority over optical effects. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 .site-serene .header,.site-serene .mobile-nav:not([hidden]){background:#fff;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
 .site-serene .header.header-on-dark{--header-ink:#fff;background:var(--ink)}
 .site-serene .header::after,.site-serene .glass-action::after{display:none}
 .site-serene .glass-action{-webkit-backdrop-filter:none;backdrop-filter:none}
 .site-serene .button-dark.glass-action,.site-serene .button-dark.glass-action:hover,.site-serene .service[open] .service-toggle.glass-action{background:var(--blue)}
 .site-serene .button-lime.glass-action,.site-serene .header-cta.glass-action,.site-serene :is(.service-toggle,.project-view,.scroll-circle,.menu-toggle,.mascot-reaction).glass-action{background:#fff}
 .site-serene .service[open] .service-toggle.glass-action{background:var(--blue)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-serene .header{background:#fff}.site-serene .header.header-on-dark{background:var(--ink)}.site-serene .header-cta.glass-action{background:#fff}}
@media(forced-colors:active){
 :root.rg-root,.site-serene :is(dialog,textarea){scrollbar-color:auto;scrollbar-width:auto}
 .site-serene .header,.site-serene .glass-action{background:Canvas!important;color:CanvasText!important;border:1px solid ButtonText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none}
 .site-serene .header::after,.site-serene .glass-action::before,.site-serene .glass-action::after{display:none}
 .site-serene .header :is(.desktop-nav a,.header-cta){color:LinkText}
 .site-serene .header.rg-glass .menu-toggle>span{background:ButtonText}
 .site-serene .glass-action:focus-visible{outline-color:Highlight}
 .site-serene .button-icon{background:ButtonFace;color:ButtonText;border-color:ButtonText}
 :root.rg-root::-webkit-scrollbar-track,.site-serene :is(dialog,textarea)::-webkit-scrollbar-track{background:Canvas;border-color:CanvasText}
 :root.rg-root::-webkit-scrollbar-thumb,.site-serene :is(dialog,textarea)::-webkit-scrollbar-thumb{background:ButtonText;border-color:Canvas;box-shadow:none}
}