/* Shared product chrome for every demo. It floats above the sector layout and
   keeps the real workspace deadline and the catalogue exit in one place. */
html,body{overflow-x:clip}
body{overflow-wrap:normal;word-break:normal;hyphens:none}
body :is(h1,h2,h3,a,button,.button,summary,label,strong,.wordmark,.cover-type em,.architecture-title em){
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.contact-board h2{font-size:clamp(1.15rem,2vw,2rem)!important;overflow-wrap:normal!important;word-break:normal!important}
/* Inner service pages use expressive display type, but their content grids
   must still leave enough room for complete words at every breakpoint. */
.studio .inner-services{grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr))!important}
.studio .hero-copy h1{font-size:clamp(3.4rem,7vw,7.5rem)!important}
.studio .studio-manifest h2{font-size:clamp(2.6rem,4.8vw,4.75rem)!important}
.studio .inner-services h3{font-size:clamp(1.35rem,2vw,2rem)!important}
.ref-hero-copy h1{font-size:clamp(3rem,5.5vw,5rem)!important}
.ref-signature h2,.ref-capabilities h2,.ref-proof h2,.ref-closing h2{font-size:clamp(2.6rem,4.4vw,4rem)!important}
.values h2{font-size:clamp(2rem,3vw,3rem)!important}
.about-hero h1{font-size:clamp(2.8rem,5vw,4.25rem)!important;max-width:none!important}
.studio:not(.page-home) main :is(h1,h2,h3){max-width:100%}
.demo-session-bar{
  box-sizing:border-box;
  position:fixed!important;
  inset:auto auto 1rem 1rem!important;
  z-index:68;
  width:min(48rem,calc(100vw - 8rem))!important;
  max-width:calc(100vw - 2rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  margin:0!important;
  padding:.7rem .85rem .7rem 1rem!important;
  color:#243e35!important;
  background:#fffdf6ee!important;
  border:1px solid #9fac9a!important;
  border-radius:1rem!important;
  box-shadow:0 .9rem 2.8rem #172d2440;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  font:500 .875rem/1.5 Arial,sans-serif;
  letter-spacing:0!important;
}
.demo-session-time{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;color:#536358}
.demo-session-time time{min-width:3.25rem;color:#8d482e;font-size:1rem;font-weight:750;font-variant-numeric:tabular-nums}
.demo-session-catalogue,.demo-session-bar .ex-demo-catalogue{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:2.75rem;
  padding:.45rem .75rem;
  border:1px solid #8a9987;
  border-radius:.7rem;
  color:#243e35!important;
  background:transparent;
  font:500 .875rem/1.4 Arial,sans-serif;
  text-decoration:none;
  white-space:nowrap;
}
.demo-session-catalogue:hover,.demo-session-bar .ex-demo-catalogue:hover{background:#243e35;color:#fffdf6!important}
.demo-session-catalogue:focus-visible,.demo-session-bar .ex-demo-catalogue:focus-visible{outline:3px solid #8d482e;outline-offset:3px}
.demo-session-bar .ex-demo-clock{
  box-sizing:border-box;
  width:100%;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:.5rem 1rem!important;
  margin:0!important;
  padding:0!important;
  color:#243e35!important;
  background:transparent!important;
  border:0!important;
}
.demo-session-bar .ex-demo-clock-copy{display:block!important;min-width:0;flex:initial}
.demo-session-bar .ex-demo-clock-copy .ex-icon,.demo-session-bar .ex-demo-clock-copy p{display:none!important}
.demo-session-bar .ex-demo-clock-copy strong{display:block;font:600 .875rem/1.5 Arial,sans-serif}
.demo-session-bar .ex-demo-clock-time{display:flex;align-items:baseline;gap:.45rem;white-space:nowrap;color:#536358!important;font:500 .8125rem/1.5 Arial,sans-serif}
.demo-session-bar .ex-demo-clock-time [data-demo-countdown]{min-width:3.25rem;color:#8d482e!important;font:750 1rem/1.25 Arial,sans-serif;font-variant-numeric:tabular-nums}
.demo-session-bar .ex-demo-clock-status{grid-column:1/-1;margin:0!important;padding-top:.5rem;border-top:1px solid #c5cec0;color:#536358!important;font-size:.8125rem}
.demo-session-bar #motion-toggle{min-height:2.75rem;padding:.45rem .75rem;border:1px solid #8a9987;border-radius:.7rem;background:transparent;color:#243e35;font:500 .875rem/1.4 Arial,sans-serif}
.demo-session-bar #motion-toggle:hover{background:#243e35;color:#fffdf6}
.demo-session-bar #motion-toggle:focus-visible{outline:3px solid #8d482e;outline-offset:3px}
body:has(>.demo-session-bar) :is(.chat-launch,.service-chat-open,.ex-chat-launch,.ex-cart-launch){bottom:calc(var(--demo-session-bar-height,4.75rem) + 1rem)!important}
body:has(>.demo-session-bar) :is(#notice,#service-notice){bottom:calc(var(--demo-session-bar-height,4.75rem) + 1rem)}
@media(max-width:700px){
  /* At 200% text zoom WCAG reflow takes priority over keeping an unusually
     long label on one line. Normal mobile sizes still have enough room after
     the grid fixes above, so this fallback is only exercised when necessary. */
  body :is(h1,h2,h3,a,button,.button,summary,label,strong,.wordmark,.cover-type em,.architecture-title em){overflow-wrap:break-word!important}
  .build-brand{font-size:min(1.35rem,7vw)!important}
  .etera-hero-copy,.onda-hero-copy,.taglio-hero-copy,.pulse-hero-copy{left:0!important;right:0!important;width:auto!important;max-width:100%!important;box-sizing:border-box}
  .etera-hero-copy h1,.onda-hero-copy h1,.taglio-hero-copy h1,.pulse-hero-copy h1{font-size:min(16vw,80px)!important;max-width:100%!important}
  .pulse-final h2{font-size:min(14vw,72px)!important}
  .torque-cta h2{font-size:min(11vw,64px)!important}
  .po-how-cards article{grid-template-columns:minmax(0,1fr)!important}
  .po-how-cards h3{font-size:min(10vw,1.6rem)!important;margin:1rem 0!important}
  .ex-order-card{overflow:visible!important}
  .ex-kpi strong{font-size:min(9vw,1.9375rem)!important}
  .ex-lineitem>.ex-price{flex:1 0 100%;width:100%;text-align:left!important}
  /* The horizontal product shelves need an explicit mobile track size. A
     minmax(0,80%) auto track is allowed to collapse to a few pixels when all
     cards are generated up front, which used to stack one letter per line. */
  .retail-product-track,.fashion .retail-product-track{grid-auto-columns:80%!important}
  .studio .project-index{grid-template-columns:minmax(0,1fr)!important}
  body.construction:not(.page-home) main h1{font-size:clamp(2.35rem,10.5vw,3.5rem)!important;max-width:none!important;letter-spacing:-.04em!important}
  .config-result h2{font-size:min(9.5vw,2.4rem)!important}
  .studio .studio-project{grid-template-columns:2rem minmax(0,1fr)!important}
  .studio .studio-project h3{font-size:clamp(1.2rem,6vw,1.5rem)!important}
  .demo-session-bar{left:.75rem!important;right:.75rem!important;bottom:.75rem!important;width:auto!important;max-width:none;padding:.55rem .65rem!important;gap:.35rem .65rem}
  .demo-session-bar .ex-demo-clock{grid-template-columns:minmax(0,1fr) auto;gap:.35rem .65rem!important}
  .demo-session-bar .ex-demo-clock-copy{display:none!important}
  .demo-session-bar .ex-demo-clock-time{white-space:normal}
  .demo-session-bar .ex-demo-clock-time>span:first-child{display:none}
  .demo-session-catalogue,.demo-session-bar .ex-demo-catalogue{white-space:normal;text-align:center;padding:.4rem .6rem}
  .demo-session-bar #motion-toggle{width:2.75rem;padding:.35rem;font-size:0}
  .demo-session-bar #motion-toggle:after{content:'◐';font-size:1.1rem}
}
@media(max-width:370px){.demo-session-catalogue,.demo-session-bar .ex-demo-catalogue{font-size:.8125rem}}
@media print{.demo-session-bar{display:none!important}}