/* Aboxon interaction system: hard edges, directional fill, tactile press. */
:root{--action-ease:cubic-bezier(.22,1,.36,1);--action-fast:180ms;--action-sweep:440ms}
:where(button,a,summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:is(.btn,.concept-back,.werk-contact){
  --action-base:#101116;--action-ink:#fff;--action-fill:var(--accent);--action-hover-ink:#101116;--action-edge:#101116;
  position:relative;isolation:isolate;overflow:hidden;align-items:center;justify-content:center;gap:12px;
  min-height:56px;max-width:100%;padding:15px 24px;border:1px solid var(--action-edge);border-radius:0!important;
  background:var(--action-base);color:var(--action-ink);font-weight:800;line-height:1.25;text-align:center;text-decoration:none;
  white-space:normal;box-shadow:0 0 0 transparent;transform:translate(0,0);
  transition:color var(--action-fast),border-color var(--action-fast),box-shadow 260ms var(--action-ease),transform 260ms var(--action-ease);
}
.btn-red{--action-base:var(--accent);--action-ink:#101116;--action-fill:#101116;--action-hover-ink:#fff;--action-edge:var(--accent)}
.btn-outline{--action-base:transparent;--action-ink:#101116;--action-fill:#101116;--action-hover-ink:#fff}
.btn-light{--action-base:#fff;--action-ink:#101116;--action-fill:var(--accent);--action-hover-ink:#101116;--action-edge:#fff}
:is(.btn,.concept-back,.werk-contact)::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--action-fill);clip-path:inset(0 100% 0 0);
  transition:clip-path var(--action-sweep) var(--action-ease);pointer-events:none;
}
:is(.btn,.concept-back,.werk-contact)::after{
  content:'';position:absolute;inset:5px;border:1px solid currentColor;opacity:0;
  transition:opacity 240ms var(--action-ease);pointer-events:none;
}
.btn .icon{flex-shrink:0;transition:transform 360ms var(--action-ease);color:inherit}
/* Text actions have a traveling underline, without a filled button frame. */
.link-more{position:relative;padding-block:9px;text-decoration:none;line-height:1.4;max-width:100%;transition:color 180ms}
.link-more::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:2px;background:currentColor;transform:scaleX(.2);transform-origin:left;transition:transform 380ms var(--action-ease)}
.link-more .icon{flex-shrink:0;transition:transform 380ms var(--action-ease)}
/* Selection controls share the same straight moving panel. */
.hero-choices button,.language-switch a,.menu-toggle{position:relative;isolation:isolate;overflow:hidden;transition:color 180ms,background 180ms,border-color 180ms,box-shadow 260ms,transform 180ms}
.hero-choices button{min-height:56px;background:#f0f1f3;color:#101116;border:1px solid #cbd0d8}
.hero-choices button::before,.language-switch a::before{content:'';position:absolute;inset:0;background:var(--accent);z-index:-1;transform:translateY(102%);transition:transform 340ms var(--action-ease)}
.hero-choices button::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 340ms var(--action-ease)}
.hero-choices button[aria-pressed=true]{background:#101116;border-color:#101116;color:#fff}
.hero-choices button[aria-pressed=true]::after{transform:scaleX(1)}
.language-switch a{min-height:44px;height:auto}
.concept-banner{min-height:52px;padding-block:8px}
.language-switch a[aria-current=page]{background:var(--accent);color:#101116;box-shadow:inset 0 -3px #fff}
.menu-toggle{flex-shrink:0;min-height:48px}
.menu-toggle .icon{transition:transform 360ms var(--action-ease)}
.menu-toggle[aria-expanded=true]{border-color:var(--accent);background:var(--accent);color:#101116}
.menu-toggle[aria-expanded=true] .icon{transform:rotate(90deg)}
/* Navigation uses a quiet panel sweep and a precise baseline. */
.nav-inner>a,.mobile-nav>a{position:relative;isolation:isolate;overflow:hidden;transition:color 180ms,background 180ms}
.nav-inner>a::before,.mobile-nav>a::before{content:'';position:absolute;inset:0;background:#30343f;z-index:-1;transform:translateX(-102%);transition:transform 400ms var(--action-ease)}
.nav-inner>a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 360ms var(--action-ease)}
.nav-inner>a[aria-current=page]::after{transform:scaleX(1)}
.mobile-nav>a:active{background:#30343f}
.footer-grid a:not(.footer-brand a),.footer-bottom>a,.werk-nav>a,.atelier-nav>a,.radius-nav>a{width:fit-content;position:relative;text-decoration:none}
.footer-grid a:not(.footer-brand a)::after,.footer-bottom>a::after,.werk-nav>a::after,.atelier-nav>a::after,.radius-nav>a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--action-ease)}
.faq summary{transition:background 220ms,color 220ms,box-shadow 220ms}
.faq summary .icon{flex-shrink:0;transition:transform 300ms var(--action-ease)}
.faq summary:active{background:#f0f1f3}
/* Square controls in the three concept pages. */
.concept-back{position:fixed;display:inline-flex;--action-base:var(--accent);--action-ink:#111216;--action-fill:#111216;--action-hover-ink:#fff;--action-edge:var(--accent);min-height:48px;padding:14px 19px}
.werk-contact{display:inline-flex;--action-base:transparent;--action-ink:#26231d;--action-fill:#26231d;--action-hover-ink:#e9dfce;--action-edge:#26231d;min-height:48px}
.concept-round,.atelier-menu,.radius-count{position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;transition:background 220ms,color 220ms,transform 260ms var(--action-ease),box-shadow 260ms var(--action-ease)}
.concept-round::before,.atelier-menu::before,.radius-count::before{content:'';position:absolute;inset:0;background:var(--accent);z-index:-1;transform:translateY(102%);transition:transform 380ms var(--action-ease)}
.concept-round .concept-icon{transition:transform 300ms var(--action-ease)}
/* Keyboard focus gives the same fill, plus a high-contrast double frame. */
:is(.btn,.concept-back,.werk-contact):focus-visible{background:var(--action-base);color:var(--action-hover-ink);outline:2px solid #101116;outline-offset:5px;box-shadow:0 0 0 3px #fff}
:is(.btn,.concept-back,.werk-contact):focus-visible::before{clip-path:inset(0)}
:where(.hero-choices button,.language-switch a,.menu-toggle,.link-more,.nav-inner>a,.mobile-nav>a,.concept-round,.atelier-menu,.radius-count,.faq summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px;box-shadow:0 0 0 2px #fff}
:is(.btn,.concept-back,.werk-contact):active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--action-edge);color:var(--action-hover-ink)}
:is(.btn,.concept-back,.werk-contact):active::before{clip-path:inset(0)}
.hero-choices button:active,.language-switch a:active,.menu-toggle:active,.concept-round:active,.atelier-menu:active,.radius-count:active{transform:translateY(2px)}
.btn:disabled,.btn[aria-disabled=true],button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
@media(hover:hover) and (pointer:fine){
  :is(.btn,.concept-back,.werk-contact):hover{background:var(--action-base);color:var(--action-hover-ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--action-edge)}
  :is(.btn,.concept-back,.werk-contact):hover::before{clip-path:inset(0)}
  :is(.btn,.concept-back,.werk-contact):hover::after{opacity:.28}
  .btn:hover .icon{transform:translateY(-2px)}
  .link-more:hover::after,.link-more:focus-visible::after{transform:scaleX(1)}
  .link-more:hover .icon{transform:translateX(4px)}
  .hero-choices button:not([aria-pressed=true]):hover{color:#101116;border-color:var(--accent)}
  .hero-choices button:not([aria-pressed=true]):hover::before,.language-switch a:hover::before{transform:translateY(0)}
  .language-switch a:hover{background:transparent;color:#101116}
  .language-switch a[aria-current=page]:hover{background:var(--accent)}
  .menu-toggle:hover{border-color:var(--accent);background:#292d36}
  .menu-toggle[aria-expanded=true]:hover{background:var(--accent);color:#101116}
  .nav-inner>a:hover::before,.mobile-nav>a:hover::before{transform:translateX(0)}
  .nav-inner>a:hover::after{transform:scaleX(1)}
  .footer-grid a:not(.footer-brand a):hover::after,.footer-bottom>a:hover::after,.werk-nav>a:hover::after,.atelier-nav>a:hover::after,.radius-nav>a:hover::after{transform:scaleX(1)}
  .faq summary:hover{background:#f7f7f5;box-shadow:inset 3px 0 var(--accent)}
  .concept-round:hover,.atelier-menu:hover,.radius-count:hover{background:transparent;color:#111216;transform:translate(-2px,-2px);box-shadow:4px 4px 0 currentColor}
  .concept-round:hover::before,.atelier-menu:hover::before,.radius-count:hover::before{transform:translateY(0)}
  .concept-round:hover .concept-icon{transform:rotate(90deg) translateX(3px)}
  :is(.btn,.concept-back,.werk-contact):active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--action-edge)}
}
@media(max-width:620px){.btn{padding:14px 19px;font-size:.87rem;min-height:54px}.language-switch a{min-width:30px}.hero-choices button{min-height:54px}.concept-back{font-size:10px}}
/* Distinct silhouettes: opposing cuts, an asymmetric tab, and an oblique slab. */
:is(.btn,.concept-back,.werk-contact){
  --button-shape:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  clip-path:var(--button-shape);border:0;padding-inline:30px;min-height:58px;
}
.btn-outline{--action-base:#edf0f3;--button-shape:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.btn-light{--button-shape:polygon(13px 0,100% 0,calc(100% - 13px) 100%,0 100%);padding-inline:32px}
:is(.btn,.concept-back,.werk-contact)::after{inset:5px;border:1px solid currentColor;clip-path:var(--button-shape)}
:is(.btn,.concept-back,.werk-contact):is(:hover,:active){box-shadow:none}
:is(.btn,.concept-back,.werk-contact):focus-visible{outline:2px solid currentColor;outline-offset:-6px;box-shadow:none}
:is(.btn,.concept-back,.werk-contact):focus-visible::after{opacity:.7;border-width:2px}
.hero-choices button{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);border:0;padding:12px 9px}
.hero-choices button[aria-pressed=true]{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.language-switch{border:0;gap:3px}
.language-switch a{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);background:#252832;border:0}
.language-switch a+a{border-left:0}
.language-switch a[aria-current=page]{box-shadow:inset 0 -3px #fff}
.menu-toggle{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);background:#20232b;border:0}
.concept-round,.atelier-menu,.radius-count{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);background:rgba(140,140,140,.12)}
.concept-back,.werk-contact{padding-inline:25px;min-height:50px}
:is(.hero-choices button,.language-switch a,.menu-toggle,.concept-round,.atelier-menu,.radius-count):focus-visible{outline:2px solid currentColor;outline-offset:-5px;box-shadow:none}
@media(max-width:620px){.btn{padding-inline:26px;min-height:56px}.btn-light{padding-inline:29px}.language-switch a{min-width:30px}.concept-back{padding-inline:23px}}
@media(prefers-reduced-motion:reduce){
  :where(.btn,.link-more,.hero-choices button,.language-switch a,.menu-toggle,.nav-inner>a,.mobile-nav>a,.concept-back,.werk-contact,.concept-round,.atelier-menu,.radius-count,.faq summary),:where(.btn,.link-more,.hero-choices button,.language-switch a,.nav-inner>a,.mobile-nav>a,.concept-back,.werk-contact,.concept-round,.atelier-menu,.radius-count)::before,:where(.btn,.link-more,.hero-choices button,.nav-inner>a,.concept-back,.werk-contact)::after{transition:none!important;animation:none!important}
  :where(.btn,.concept-back,.werk-contact,.concept-round,.atelier-menu,.radius-count):is(:hover,:active){transform:none!important}
  .btn .icon,.link-more .icon,.menu-toggle .icon,.concept-round .concept-icon,.faq summary .icon{transition:none!important}
}