/* Compact screens keep the full narrative in document flow. */
:root{--raw-gutter:clamp(20px,6vw,80px);--raw-touch:44px;--raw-reading:1440px;--layout-gutter:var(--raw-gutter);--control-size:var(--raw-touch);--content-limit:var(--raw-reading);--page-gutter:var(--layout-gutter);--touch-target:var(--control-size);--page-max:var(--content-limit)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:24px}
body{min-width:0}
button,input,select,textarea{font:inherit}
.mobile-menu-toggle,.mobile-navigation{display:none}
.static-flow .mobile-menu-toggle{display:flex;align-items:center;gap:12px;position:absolute;right:var(--page-gutter);top:24px;z-index:50;min-height:var(--touch-target);padding:8px 16px;border:1px solid var(--line);border-radius:30px;background:var(--color-surface);color:var(--color-text);cursor:pointer}
.mobile-navigation[open]{display:block;position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:80px var(--page-gutter) 32px;border:0;background:var(--color-surface);color:var(--color-text);overflow:auto}
.mobile-navigation::backdrop{background:var(--color-surface)}
.mobile-navigation nav{display:grid;gap:12px;max-width:650px;margin:5vh auto}
.mobile-navigation a{font-size:clamp(24px,5vw,44px);text-decoration:none;color:inherit;padding:12px 0;border-bottom:1px solid var(--line)}
.menu-close{position:absolute;top:24px;right:var(--page-gutter);min-height:var(--touch-target);padding:8px 16px;background:none;border:1px solid var(--line);border-radius:30px;color:inherit;cursor:pointer}
body:has(.mobile-navigation[open]){overflow:hidden}
.static-flow .hero-title{font-size:clamp(30px,6.8vw,64px);margin:120px var(--page-gutter) 28px;letter-spacing:-.055em}
.static-flow .hero-info-block{padding-inline:var(--page-gutter);max-width:850px;margin:auto}
.static-flow .hero-info-block:before{height:clamp(140px,25vw,230px);margin:0 0 24px}
.static-flow .hi-text{font-size:16px;line-height:1.65}
.static-flow .hero-logo{left:var(--page-gutter);max-width:145px;width:32vw}
.static-flow .scroll-content-wrapper,.static-flow .phase4-container,.static-flow .glass-container,.static-flow .particle-chapter,.static-flow .flower-meaning{padding:clamp(40px,7vw,80px) var(--page-gutter);max-width:var(--page-max);margin-inline:auto}
.static-flow .flow-title{font-size:clamp(28px,4.8vw,54px)!important;line-height:1.2;white-space:normal!important}
.static-flow .flow-title span{display:block;margin-top:24px}
.static-flow #growth-verbs{font-size:clamp(27px,5vw,48px)!important;text-align:center!important;width:100%;padding:0;gap:.25em .4em}
.static-flow .feature-container{padding:0!important}
.static-flow .particle-universe{opacity:1!important;transform:none!important;padding:32px 0;border-top:1px solid var(--line);min-width:0}
.static-flow .particle-universe .particle-copy{width:100%;min-width:0}
.static-flow .particle-universe .universe-mark{margin:0 0 24px;max-width:min(200px,100%)}
.static-flow .particle-copy h2{font-size:clamp(30px,4.5vw,54px);overflow-wrap:break-word}
.static-flow .particle-copy p{font-size:16px}
.static-flow .gradient-content{padding:clamp(20px,4vw,48px)}
.static-flow .gc-bottom-right{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
.static-flow .stat-num{font-size:clamp(36px,5.5vw,64px)}
.static-flow .stat-desc{font-size:15px}
.static-flow .annotated-flower{max-width:660px}
.static-flow .marquee-container{overflow:hidden}
#complete-site section{max-width:none}
#complete-site .section-head,#complete-site .contact-form{max-width:var(--page-max);margin-inline:auto}
.service-grid,.form-grid{min-width:0}
.service-card,.form-grid label{min-width:0}
.service-card h3,.service-card p,.section-label,.chapter-label{overflow-wrap:break-word}
#expertise:not(.cascade-enabled) .service-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));max-width:var(--page-max);margin-inline:auto}
#expertise:not(.cascade-enabled) .service-card{padding:clamp(20px,3vw,32px);height:auto;overflow:visible}
#expertise:not(.cascade-enabled) .service-card>img{max-width:100%}
#expertise-title span,#expertise-title em{white-space:normal}
.cascade-ticks button{width:var(--touch-target);height:var(--touch-target)}
.cascade-ticks{gap:4px}
.cascade-current{max-height:90px}
.form-grid input,.form-grid select,.form-grid textarea{min-width:0;max-width:100%;font-size:16px}
.form-grid textarea{resize:vertical}
.text-link,.hi-btn,.service-card>a,.service-card summary{min-height:var(--touch-target)}
.clarix-footer p{max-width:100%;overflow-wrap:break-word;text-wrap:balance}
@media(max-width:1023px),(max-height:599px){
 #complete-site h2{font-size:clamp(32px,5.7vw,60px)}
 #complete-site section{padding:64px var(--page-gutter)}
 .cascade-rail,.cascade-hint{display:none}
 .section-label{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
 .meaning-intro h2{font-size:clamp(30px,5vw,54px)}
 .static-flow .particle-chapter{visibility:visible!important;opacity:1!important}
}
@media(max-width:480px){
 .static-flow .hero-title{margin-top:112px;font-size:clamp(28px,7.5vw,36px)}
 .static-flow .hero-logo{top:32px}
 .static-flow .hi-text{font-size:15px}
 .static-flow .partner-logo{height:72px}
 .static-flow .client-row{gap:24px}
 .static-flow .gc-bottom-right{gap:28px 12px}
 .static-flow .stat-desc{font-size:13px}
 .static-flow .gradient-content{padding:24px 16px}
 .static-flow .gc-top-left{font-size:28px}
 .static-flow .annotated-flower{height:220px}
 .flower-label{font-size:11px}
 .form-submit button{width:100%}
}
@media(min-width:1800px){
 body:not(.static-flow) .hero-info-block{max-width:620px}
 body:not(.static-flow) .hero-info-block .hi-text{font-size:20px}
 .particle-universe{right:max(7%,calc((100vw - 1800px)/2))}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The hidden DOM transcript must not extend the particle canvas's viewport. */
body:not(.static-flow).particle-ready #scroll-title{overflow:clip;max-width:100%}
.static-flow .hero-char,.static-flow .char-mask{opacity:1!important;transform:none!important;filter:none!important}
.static-flow .animated-title,.static-flow .hi-text,.static-flow .hi-btn{opacity:1!important;transform:none!important}
/* Compact cinematic stage: the same travelling cloud, arranged vertically. */
@media(max-width:1023px){
 body:not(.static-flow) .mobile-menu-toggle{display:flex;align-items:center;gap:8px;position:absolute;right:6%;top:22px;z-index:50;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:30px;background:var(--color-surface);color:var(--color-text)}
 body:not(.static-flow) .hero-nav{display:none}
 body:not(.static-flow) .hero-logo{left:6%;top:30px;width:125px}
 body:not(.static-flow) .hero-title{top:18dvh;left:6%;width:88%;font-size:clamp(27px,6.6vw,50px);line-height:1.18}
 body:not(.static-flow) .hero-info-block{top:61dvh;left:6%;width:88%;max-width:none}
 body:not(.static-flow) .hero-info-block .hi-text{font-size:clamp(13px,2.9vw,17px);line-height:1.5;margin-bottom:12px}
 body:not(.static-flow) .hi-btn{padding:10px 22px;min-height:40px}
 body:not(.static-flow) .hero-clients{top:83dvh;height:14dvh}
 body:not(.static-flow) .hero-clients .client-row{padding-block:6px;gap:24px}
 body:not(.static-flow) .hero-clients .partner-logo{height:65px}
 body:not(.static-flow) .universe-steps{top:8dvh;gap:4px;left:3%;right:3%}
 body:not(.static-flow) .universe-steps a{width:40px;height:40px}
 body:not(.static-flow) .particle-universe{inset:42dvh 7% 9dvh;justify-content:flex-start;overflow:auto;overscroll-behavior:auto}
 body:not(.static-flow) .particle-universe>.universe-mark,body:not(.static-flow) .particle-universe>.ati-wordmark{display:none}
 body:not(.static-flow) .particle-copy h2{font-size:clamp(25px,5.4vw,40px);margin:12px 0}
 body:not(.static-flow) .particle-copy p{font-size:clamp(13px,2.8vw,17px);line-height:1.5;margin:10px 0}
 body:not(.static-flow) .particle-copy .universe-proof{font-size:12px;padding-top:10px}
 body:not(.static-flow) .particle-scroll{bottom:3dvh;font-size:8px;letter-spacing:1px}
 body:not(.static-flow).particle-ready #growth-verbs{width:90%;font-size:clamp(25px,5vw,42px)}
 body:not(.static-flow) .gc-bottom-right{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 body:not(.static-flow) .stat-num{font-size:36px}
 body:not(.static-flow) .stat-desc{font-size:13px}
 body:not(.static-flow) .gc-top-left{font-size:28px}
 body:not(.static-flow) .gradient-content{padding:24px}
 body:not(.static-flow) .phase4-container .split-feature-container{display:block;width:100%;padding:38dvh 7% 5dvh;height:100dvh;background:none}
 body:not(.static-flow) .phase4-container .hi-top{display:none}
 body:not(.static-flow) #phase4-title{font-size:clamp(27px,5.7vw,44px);white-space:normal}
 body:not(.static-flow) .phase4-container .hi-text{font-size:15px;line-height:1.5}
 body:not(.static-flow) .phase4-container .clients-line{margin:18px 0!important}
 body:not(.static-flow) .flower-meaning{padding:6dvh 6%}
 body:not(.static-flow) .meaning-intro h2{font-size:30px}
 body:not(.static-flow) .meaning-intro>p:last-child{font-size:15px;line-height:1.45}
 .preview-motion{font-size:10px;right:12px;bottom:8px;padding:8px 12px}
 #complete-site .cascade-enabled .cascade-intro{top:3%;left:6%;width:88%;transform:none;text-align:center}
 #complete-site .cascade-enabled h2{font-size:clamp(27px,6vw,44px);margin:12px 0}
 .cascade-enabled .section-lead{display:none}
 .cascade-enabled .service-grid{perspective-origin:50% 45%}
 .cascade-enabled .service-card{left:50%;top:52%;padding:20px}
 .cascade-enabled .service-card p{font-size:13px;line-height:1.45}
 .cascade-enabled .cascade-rail{display:flex;top:auto;bottom:22px;right:0;left:0;transform:none;flex-direction:row;justify-content:center;gap:0}
 .cascade-enabled .cascade-count,.cascade-enabled .cascade-current,.cascade-enabled .cascade-hint{display:none}
 .cascade-enabled .cascade-ticks{flex-direction:row;gap:2px}
 .cascade-enabled .cascade-ticks button{width:40px;height:44px}
}
@media(max-width:1023px){
 .cascade-enabled .service-grid{clip-path:inset(150px 0 70px)}
 .cascade-enabled .cascade-intro{pointer-events:none}
}