/* Click Experience v3.1.0 — final UX/UI, accessibility and responsive polish.
   Loaded last. It intentionally refines the existing system without redesigning approved sections. */
:root{
  --cxs-focus:#ffbd59;
  --cxs-readable:#526783;
}
html{scrollbar-gutter:stable;scroll-padding-top:96px}
body.cxs-site{text-rendering:optimizeLegibility}
.cxs-site :where(h1,h2,h3,h4){text-wrap:balance}
.cxs-site :where(p,li,blockquote){text-wrap:pretty}
.cxs-site :where(h1,h2,h3,h4,p,li,a,button,strong,span){overflow-wrap:break-word}
.cxs-site :where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--cxs-focus);outline-offset:4px}
.cxs-site :where(input,textarea,select):focus-visible{box-shadow:0 0 0 4px rgba(39,173,255,.18)}
.cxs-skip{border-radius:10px;box-shadow:0 14px 38px rgba(0,13,61,.18);font-weight:700}

/* Navigation: stronger orientation and less tiny text. */
.cxs-desktop-nav>a,.cxs-desktop-nav>button{min-height:44px;display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:rgba(255,255,255,.76)}
.cxs-desktop-nav>a.is-current,.cxs-desktop-nav>button.is-current{color:#fff}
.cxs-desktop-nav>a.is-current::after,.cxs-desktop-nav>button.is-current::after{transform:scaleX(1);width:100%;background:linear-gradient(90deg,#27adff,#ffbd59)}
.cxs-mobile-nav button{min-height:44px;font-size:12px;font-weight:600}
.cxs-site.cxs-has-scrolled .cxs-header{border-bottom:1px solid rgba(39,173,255,.09)}
.cxs-site.cxs-has-scrolled .cxs-header-inner{transition:min-height .28s ease}

/* Home hero readability. */
.cxs-eyebrow{font-size:10px!important;letter-spacing:.12em}
.cxs-location{font-size:10px!important;letter-spacing:.08em}
.cxs-scene-category{font-size:12px}
.cxs-hero-subtitle{font-size:15px;line-height:1.78}
.cxs-scene-action>p{font-size:12px!important;line-height:1.72!important}
.cxs-tiny{font-size:10px!important;line-height:1.65}
.cxs-art figcaption{font-size:10px!important;line-height:1.45}
.cxs-scene-tab{min-height:48px}
.cxs-scene-tab span{font-size:11px!important}
.cxs-scene-tab small{font-size:10px!important}
.cxs-hero-rotation__status strong{font-size:11px!important}
.cxs-hero-rotation__status span{font-size:10px!important}
.cxs-pause{min-height:44px!important;font-size:11px!important}
.cxs-hero-cta{min-height:46px!important;font-size:12px!important;font-weight:700}

/* Assistant: clear enough to scan on a phone without feeling oversized. */
.cxs-assistant-pre{font-size:10px!important}
.cxs-assistant-header h2{font-size:14px}
.cxs-assistant-header p{font-size:11px}
.cxs-chat-kicker{font-size:10px}
.cxs-chat-greeting{font-size:13px!important;line-height:1.75!important}
.cxs-chat-options button{min-height:52px;font-size:12px!important;line-height:1.45}
.cxs-chat-actions button,.cxs-chat-actions>span{font-size:11px}
.cxs-assistant-footer{font-size:10px!important;line-height:1.55}
.cxs-assistant-note{font-size:11px!important;line-height:1.55}
.cxs-field{font-size:12px}
.cxs-field-note,.cxs-consent,.cxs-review div{font-size:11px}
.cxs-chat-trail{font-size:11px}

/* Shared micro labels. */
.cxs-section-eyebrow,.cxs-services-eyebrow,.cxs-why-eyebrow,.cxs-course-kicker,
.cxs-editorial-eyebrow,.cxs-portfolio-eyebrow,.cxs-store-eyebrow,.cxs-corp-eyebrow,
.cxs-corp-kicker,.cxs-service-hero__eyebrow,.cxs-services-directory__eyebrow{
  font-size:10.5px!important;line-height:1.5;letter-spacing:.13em
}
.cxs-reading-meta span{font-size:10px}

/* Filters and contextual rails are real controls, so give them real target sizes. */
.cxs-blog-categories a,.cxs-course-filters button,.cxs-portfolio-filters button,.cxs-store-filters button,
.cxs-corp-journey button,.cxs-service-journey button,.cxs-portfolio-journey button,.cxs-store-journey button{
  min-height:42px;font-size:10.5px!important
}
.cxs-blog-categories a.is-active,.cxs-course-filters button.is-active,.cxs-portfolio-filters button.is-active,.cxs-store-filters button.is-active{
  box-shadow:0 0 0 1px rgba(39,173,255,.14) inset
}

/* Cards: preserve depth but make interactive intent more obvious. */
.cxs-svc-card,.cxs-course-card,.cxs-insight-card,.cxs-blog-card,.cxs-course-directory__card,
.cxs-project-card,.cxs-store-card{transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,border-color .28s ease}
@media(hover:hover) and (pointer:fine){
  .cxs-blog-card:hover,.cxs-course-directory__card:hover,.cxs-project-card:hover,.cxs-store-card:hover{transform:translateY(-5px)}
}
.cxs-editorial-hit,.cxs-project-card__hit,.cxs-store-card__hit{border-radius:inherit}

/* Editorial content: links should look like links inside long-form reading. */
.cxs-editorial-prose :where(a),.cxs-store-prose :where(a),.cxs-project-single__content :where(a){
  color:#0c78c9;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em
}
.cxs-editorial-prose :where(p,li),.cxs-store-prose :where(p,li){font-size:16px;line-height:1.84}
.cxs-editorial-prose :where(h2,h3){scroll-margin-top:110px}

/* Footer: remove the “fine print” feeling while keeping hierarchy. */
.cxs-footer-pro__intro{font-size:13px!important;line-height:1.72!important}
.cxs-footer-pro__status{font-size:10px!important;min-height:38px}
.cxs-footer-pro__sectionhead span{font-size:10px!important}
.cxs-footer-pro__sectionhead h3{font-size:13px!important}
.cxs-footer-pro__site-nav a,.cxs-footer-pro__site-nav button{min-height:40px;font-size:12px!important}
.cxs-footer-pro__service-list button{min-height:46px}
.cxs-footer-pro__service-list button>span{font-size:10px!important}
.cxs-footer-pro__service-list button>strong{font-size:12px!important;line-height:1.4}
.cxs-footer-pro__wa small{font-size:10px!important;letter-spacing:.09em}
.cxs-footer-pro__wa strong{font-size:12px!important}
.cxs-footer-pro__location>span,.cxs-footer-pro__social-block>span{font-size:10px!important}
.cxs-footer-pro__location strong{font-size:12px!important;line-height:1.6!important}
.cxs-footer-pro__social a{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}
.cxs-footer-pro__social svg{width:17px;height:17px}
.cxs-footer-pro__bottom{font-size:10px!important;line-height:1.55}
.cxs-footer-pro__top{min-height:44px;font-size:11px!important}
.cxs-footer-pro__rail-set span{font-size:12px}

/* Forms: stronger contrast, larger controls and clearer errors. */
.cxs-contact-form label,.cxs-contact-consent{font-size:12px!important}
.cxs-contact-form input,.cxs-contact-form select,.cxs-contact-form textarea,
.cxs-blog-search input,.cxs-store-search input{min-height:48px}
.cxs-contact-form__foot>p,.cxs-contact-consent span{font-size:11px!important}
.cxs-chat-error,.cxs-contact-form__foot>p.is-error{font-weight:600}

/* Store/cart: prioritize touch and keep controls comfortably tappable. */
.cxs-store-cart-trigger,.cxs-store-floating-cart,.cxs-store-cart__qty button,.cxs-store-cart__clear,
.cxs-store-cart__wa,.cxs-store-btn{min-height:44px}
.cxs-store-cart__qty button{min-width:44px}

/* Better section anchoring below the sticky header. */
.cxs-site main :where(section[id],article[id]){scroll-margin-top:104px}

/* Progressive cross-document navigation where supported. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:cxsPageOut .16s ease both}
  ::view-transition-new(root){animation:cxsPageIn .28s cubic-bezier(.16,1,.3,1) both}
}
@keyframes cxsPageOut{to{opacity:.72;filter:blur(2px)}}
@keyframes cxsPageIn{from{opacity:.72;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Save-Data / constrained connections: retain design, drop decorative workload. */
.cxs-save-data .cxs-footer-pro__pointer,.cxs-save-data .cxs-immersive-bridge,.cxs-save-data .cxs-immersive-index{display:none!important}
.cxs-save-data .cxs-assistant,.cxs-save-data .cxs-footer-pro__rail-track,.cxs-save-data .cxs-art-halo{animation:none!important}
.cxs-save-data :where(.cxs-footer-pro__media img,.cxs-about-page__hero-photo img){filter:none!important}

/* High-contrast users get less muted text. */
@media(prefers-contrast:more){
  .cxs-site :where(.cxs-hero-subtitle,.cxs-scene-action>p,.cxs-assistant-note,.cxs-footer-pro__intro,.cxs-footer-pro__location strong){color:#fff!important;opacity:1!important}
  .cxs-site :where(.cxs-blog-card,.cxs-course-directory__card,.cxs-project-card,.cxs-store-card){border-color:currentColor}
}

@media(max-width:1120px){
  .cxs-desktop-nav>a,.cxs-desktop-nav>button{font-size:11px}
}

@media(max-width:700px){
  html{scroll-padding-top:82px}
  .cxs-container{width:calc(100% - 32px)}
  .cxs-site main :where(section[id],article[id]){scroll-margin-top:86px}
  .cxs-eyebrow,.cxs-location{font-size:10px!important}
  .cxs-scene-category{font-size:11px}
  .cxs-hero-subtitle{font-size:13px;line-height:1.72}
  .cxs-scene-action>p{font-size:11px!important}
  .cxs-art figcaption{font-size:9.5px!important}
  .cxs-scene-tab span{font-size:10px!important}.cxs-scene-tab small{font-size:9.5px!important}
  .cxs-hero-cta{font-size:11px!important;min-height:44px!important}
  .cxs-assistant-pre{font-size:9.5px!important}
  .cxs-assistant-footer,.cxs-assistant-note{font-size:10.5px!important}
  .cxs-corp-journey button,.cxs-service-journey button,.cxs-portfolio-journey button,.cxs-store-journey button{font-size:10px!important;min-height:40px}
  .cxs-footer-pro__grid{gap:38px}
  .cxs-footer-pro__site-nav a,.cxs-footer-pro__site-nav button{font-size:11.5px!important}
  .cxs-footer-pro__bottom{font-size:10px!important}
  .cxs-dialog{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .cxs-store-cart__panel{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}

@media(max-width:480px){
  .cxs-mobile-nav{gap:12px}
  .cxs-chat-options{grid-template-columns:1fr}
  .cxs-chat-options button{min-height:48px}
  .cxs-hero-title{font-size:clamp(40px,12vw,58px)}
  .cxs-about-page__hero h1,.cxs-contact-hero h1,.cxs-editorial-hero h1,.cxs-portfolio-hero h1,.cxs-store-hero h1{font-size:clamp(40px,12vw,58px)}
  .cxs-footer-pro__service-list{grid-template-columns:1fr}
  .cxs-footer-pro__site-nav{grid-template-columns:1fr 1fr}
  .cxs-footer-pro__site-nav a,.cxs-footer-pro__site-nav button{min-height:42px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .cxs-site :where(.cxs-svc-card,.cxs-course-card,.cxs-insight-card,.cxs-blog-card,.cxs-course-directory__card,.cxs-project-card,.cxs-store-card){transition:none!important}
}
@media(prefers-reduced-motion:no-preference){.cxs-footer-pro__rail:hover .cxs-footer-pro__rail-track{animation-play-state:paused}}
.cxs-dialog-grid .is-current{border-color:#27adff!important;background:#edf8ff!important;color:#00155c!important;box-shadow:0 0 0 1px rgba(39,173,255,.12) inset}