/* Shared controls for every customer page. Orange belongs to the EMS visuals. */
:root{
  --ui-ink:#181818;
  --ui-muted:#626262;
  --ui-muted-on-dark:#a3a3a3;
  --ui-page:#ededed;
  --ui-surface:#f5f5f5;
  --ui-white:#fff;
  --ui-border:#d4d4d4;
  --ui-border-on-dark:#ffffff40;
  --ui-hover:#313131;
  --ui-error:#a52b16;
  --ui-ease:cubic-bezier(.22,1,.36,1);
}
html{scrollbar-gutter:stable}
.icon,.sales-quick-icon{display:block;width:24px;height:24px;flex-shrink:0;fill:currentColor;stroke:none}
.heading-6{font:600 20px/28px Manrope,sans-serif;text-wrap:balance}
.title-4{font:500 14px/20px Manrope,sans-serif}
.button-sm{font:600 14px/20px Manrope,sans-serif}
.body-6{font:400 14px/20px Manrope,sans-serif;text-wrap:pretty}
.button,.header-cta,.sales-design-continue{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:40px;padding:8px 12px;border:1px solid transparent;border-radius:8px;
  background:var(--ui-ink);color:var(--ui-white);
  font:600 16px/24px Manrope,sans-serif;text-decoration:none;cursor:pointer;
  transition:background-color 300ms var(--ui-ease),color 300ms var(--ui-ease),transform 500ms var(--ui-ease);
}
.button:hover,.header-cta:hover,.sales-design-continue:hover{background:var(--ui-hover);color:var(--ui-white);opacity:1;transform:none}
.button:active,.header-cta:active,.sales-design-continue:active{transform:scale(.98);scale:1}
.button.secondary{border-color:var(--ui-border);background:transparent;color:var(--ui-ink)}
.button.secondary:hover{background:var(--ui-white);color:var(--ui-ink)}
.button.contact-link,.oem-footer .button,.guide-project .button{background:var(--ui-surface);color:var(--ui-ink)}
.button.contact-link:hover,.oem-footer .button:hover,.guide-project .button:hover{background:var(--ui-white);color:var(--ui-ink)}
.header-cta{min-height:36px;font-size:14px;line-height:20px;white-space:normal;text-align:center}
.button .icon,.header-cta .icon,.sales-design-continue .icon{width:20px;height:20px}
.text-link{display:inline-flex;align-items:center;gap:12px;padding:8px 0;font:600 14px/20px Manrope,sans-serif;transition:transform 500ms var(--ui-ease),opacity 300ms var(--ui-ease)}
.text-link .icon{width:20px;height:20px}
.home-guide>span .icon,.footer-contact .icon,.footer-sales-heading .icon{width:20px;height:20px}
.text-link:hover{color:inherit;text-decoration:underline;text-underline-offset:4px;transform:translateX(4px)}
.range-actions{font-size:14px;line-height:20px}
.range-actions .icon{width:20px;height:20px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--ui-ink);outline-offset:4px;box-shadow:0 0 0 4px var(--ui-white);
}
.dialog-close,.sales-dialog-close{
  display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:8px;
  border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface);color:var(--ui-ink);
  transition:background-color 300ms var(--ui-ease),transform 500ms var(--ui-ease);
}
.dialog-close:hover,.sales-dialog-close:hover{background:var(--ui-white);opacity:1}
.dialog-close .icon,.sales-dialog-close .icon{width:20px;height:20px}
.sequence-play{min-width:40px;min-height:40px;padding:8px 12px;border:1px solid var(--ui-border-on-dark);border-radius:8px;background:transparent;color:var(--ui-surface);font-size:14px;line-height:20px;font-weight:600}
.sequence-play .icon{width:20px;height:20px}
.sequence-play:hover{background:var(--ui-hover)}
.site-header{
  top:16px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);
  gap:32px;padding:16px 24px;border-radius:24px;background:#f5f5f5eb;color:var(--ui-ink);
}
.site-header .wordmark{font-size:24px;line-height:32px}
.desktop-nav{display:flex;flex-shrink:0;gap:24px;font-size:14px;line-height:20px;white-space:nowrap}
.desktop-nav a{text-align:center}
.nav-actions{display:flex;align-items:center;gap:12px;min-width:0;margin-inline-start:auto}
.site-header .nav-actions .header-cta,.site-header .menu-toggle{margin:0}
.website-language-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:8px;min-height:40px;padding:8px;
  border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ui-muted);cursor:pointer;
  transition:opacity 300ms var(--ui-ease),transform 500ms var(--ui-ease);
}
.website-language-toggle:hover,.website-language-toggle[aria-expanded=true]{background:var(--ui-white);color:var(--ui-ink)}
.website-language-toggle:active{transform:scale(.98);scale:1}
.website-language-toggle>.icon{width:20px;height:20px}
.website-language-toggle>.language-caret{width:12px;height:12px;transition:transform 500ms var(--ui-ease)}
.website-language-toggle[aria-expanded=true]>.language-caret{transform:rotate(180deg)}
.website-language-dialog{
  position:fixed;inset:var(--language-top) auto auto var(--language-left);margin:0;
  width:512px;max-width:calc(100vw - 48px);max-height:calc(100dvh - var(--language-top) - 24px);overflow-y:auto;
  padding:24px;border:1px solid var(--ui-border);border-radius:24px;background:var(--ui-surface);color:var(--ui-ink);
  box-shadow:0 24px 64px #18181826;opacity:1;transform:none;
  transition:opacity 300ms var(--ui-ease),transform 500ms var(--ui-ease);
}
.website-language-dialog::backdrop{background:#18181840;backdrop-filter:blur(8px);transition:opacity 300ms var(--ui-ease)}
body:has(.website-language-dialog[open]){overflow:hidden}
.language-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.language-dialog-heading>form{margin:0}
.language-dialog-heading>.heading-6{margin:0}
.language-dialog-heading .dialog-close{border-color:transparent;background:transparent}
.language-dialog-heading .dialog-close:hover{background:var(--ui-white)}
.language-dialog-heading .dialog-close:active{transform:scale(.98);scale:1}
.website-language-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.website-language-option{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:48px;padding:12px;
  border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ui-muted);text-align:start;cursor:pointer;
  transition:opacity 300ms var(--ui-ease),transform 500ms var(--ui-ease);
}
.website-language-option:hover{background:var(--ui-white);color:var(--ui-ink)}
.website-language-option[aria-current=true]{background:var(--ui-page);color:var(--ui-ink)}
.website-language-option:active{transform:scale(.98);scale:1}
.website-language-option:disabled{cursor:wait;opacity:.5}
.website-language-option>.icon{width:16px;height:16px}
.website-language-option>span{overflow-wrap:anywhere}
.language-loading{width:16px;height:8px;flex-shrink:0;border-radius:4px;background:currentColor;animation:language-loading 600ms var(--ui-ease) infinite alternate}
.language-error{margin:16px 0 0;color:var(--ui-error)}
@keyframes language-loading{from{opacity:.25}to{opacity:.75}}
@starting-style{
  .website-language-dialog[open]{opacity:0;transform:translateY(16px)}
  .website-language-dialog[open]::backdrop{opacity:0}
}
.desktop-nav a{color:var(--ui-muted)}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--ui-ink)}
.desktop-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:8px}
.menu-toggle,.mobile-nav{display:none}
@media(max-width:1200px){.site-header{gap:24px}.desktop-nav{gap:16px}}
@media(max-width:1000px){
  .site-header{left:16px;right:16px;width:auto;max-width:none;transform:none;gap:16px;padding:12px 16px;border-radius:16px}
  .site-header .desktop-nav{display:none}
  .site-header .header-cta{display:inline-flex;margin-inline-start:auto;font-size:14px;line-height:20px;gap:12px}
  .menu-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;gap:8px;width:40px;height:40px;padding:8px;border:0;background:transparent}
  .menu-toggle span{display:block;width:24px;height:2px;background:var(--ui-ink);transform-origin:center;transition:transform 500ms var(--ui-ease)}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-5px) rotate(-45deg)}
  .mobile-nav{
    position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:24px;overflow-y:auto;
    padding:96px 32px;z-index:90;background:#f5f5f5f5;color:var(--ui-ink);backdrop-filter:blur(32px);
    opacity:0;visibility:hidden;transform:translateY(-32px);transition:opacity 500ms var(--ui-ease),transform 500ms var(--ui-ease);
  }
  .nav-open .mobile-nav,.mobile-nav.is-open{opacity:1;visibility:visible;transform:none}
  .mobile-nav a{font-size:30px;line-height:36px;letter-spacing:-.035em;opacity:0;transform:translateY(24px);transition:opacity 500ms var(--ui-ease),transform 500ms var(--ui-ease);transition-delay:calc(var(--nav-index,0)*60ms)}
  .nav-open .mobile-nav a,.mobile-nav.is-open a{opacity:1;transform:none}
  .mobile-nav a[aria-current=page]{color:var(--ui-ink);text-decoration:underline;text-underline-offset:8px}
  .mobile-nav a:last-child{font-size:16px;line-height:24px;font-weight:600;margin-top:8px}
}
@media(max-width:760px){
  .site-header .nav-actions{flex:1;justify-content:flex-end}
  .site-header .wordmark{font-size:20px;line-height:28px}
  .site-header .header-cta{display:none}
  .sequence-play{padding:8px}
  .website-language-dialog{
    inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px 16px;
    border:0;border-radius:0;background:#f5f5f5f5;backdrop-filter:blur(32px);box-shadow:none;
  }
  .website-language-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px){.site-header{gap:8px}.site-header .header-cta{padding:8px}}
h1,h2,h3,h4,.button,.text-link,.footer-contact,.sales-design-continue{overflow-wrap:normal;hyphens:auto}
.button,.text-link,.header-cta,.sales-design-continue{max-width:100%}
.hero-copy,.page-heading,.split-copy,.chapter-copy,.guide-card-copy,.contact-company,.form-field{min-width:0}
.hero-phrase,.cta-section .button{white-space:normal}
.intro-banner,.banner-products,.garment-visual,.paired-products,.tablet-visual,.controller-explosion-diagram,.sequence-navigation{direction:ltr}
.wordmark,a[href^="mailto:"],a[href^="tel:"],a[href^="https://wa.me/"],input[type="email"],input[type="tel"],input[type="number"],input[name="quantity"],.mini-specs dd,.control-specs b{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .banner-copy,[dir="rtl"] .banner-bottom,[dir="rtl"] .sequence-navigation button,[dir="rtl"] .paired-products .media-label,[dir="rtl"] .garment-visual .image-side{direction:rtl}
[dir="rtl"] :is(h1,h2,h3,h4,.eyebrow,.section-label,.guide-kicker,.sales-dialog-label){letter-spacing:normal}
[dir="rtl"] .icon:has(use[href="#icon-arrow"]){scale:-1 1}
[dir="rtl"] .sales-person-email,[dir="rtl"] .sales-person-phone{flex-direction:row-reverse}
[dir="rtl"] .text-link:hover{transform:translateX(-4px)}
@media(prefers-reduced-motion:reduce){
  .button:active,.header-cta:active,.sales-design-continue:active,.text-link:hover,[dir="rtl"] .text-link:hover{transform:none}
  .mobile-nav,.mobile-nav a{transform:none}
  .website-language-toggle:active,.website-language-option:active,.language-dialog-heading .dialog-close:active,.website-language-dialog[open]{transform:none}
  .language-caret{transition:none!important}
  .language-loading{animation:none;opacity:.5}
  @starting-style{.website-language-dialog[open]{transform:none}}
}