/* ==========================================================================
AeroRink — air hockey tables & game tables theme
Project: air-hockey-arena Prefix: ar- Theme file: aerorink.css
Load order: master style.css -> variants.css -> aerorink.css
========================================================================== */
/* 1. Tokens
-------------------------------------------------------------------------- */
:root{
--ar-ink:#070B14;
--ar-ink2:#0D1424;
--ar-ink3:#151F35;
--ar-ink4:#1E2B45;
--ar-ice:#F2F7FF;
--ar-frost:#DCE8F7;
--ar-line:#D8E2F0;
--ar-lined:#243350;
--ar-body:#4A5872;
--ar-mute:#8DA2BF;
--ar-cyan:#23D3EE;
--ar-cyan-d:#0E9FBC;
--ar-rose:#FF2E63;
--ar-blue:#2F6BFF;
--ar-green:#18B67A;
--ar-head:"Arial Narrow","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--ar-text:"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
--ar-num:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
--ar-r:2px;
--ar-r-lg:6px;
--ar-shadow:0 16px 38px rgba(7,11,20,.13);
--ar-shadow-ink:0 20px 50px rgba(0,0,0,.45);
--ar-wrap:1240px;
}
/* 2. Reset & base
-------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--ar-text);
font-size:16px;
line-height:1.65;
color:var(--ar-body);
background:var(--ar-ice);
overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ar-cyan-d)}
button{font:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
font-family:var(--ar-head);
color:var(--ar-ink);
margin:0 0 14px;
font-weight:800;
line-height:1.1;
text-transform:uppercase;
letter-spacing:-.01em;
}
h1{font-size:clamp(30px,4.4vw,54px)}
h2{font-size:clamp(24px,3vw,38px)}
h3{font-size:clamp(18px,2vw,23px)}
p{margin:0 0 16px}
.skip-nav{
position:absolute;left:-9999px;top:0;z-index:999;
background:var(--ar-cyan);color:var(--ar-ink);padding:10px 18px;font-weight:700;
}
.skip-nav:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--ar-cyan);outline-offset:2px}
/* 3. Layout helpers
-------------------------------------------------------------------------- */
.ar-wrap{width:min(var(--ar-wrap),93vw);margin:0 auto}
.ar-sec{padding:96px 0}
.ar-sec-sm{padding:60px 0}
.ar-sec-ink{background:var(--ar-ink);color:#C9D6EA}
.ar-sec-ink h2,.ar-sec-ink h3{color:#fff}
.ar-sec-soft{background:#E7EFFA}
.ar-mt{margin-top:34px}
.ar-mt-sm{margin-top:18px}
.ar-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ar-split>*{min-width:0}
.ar-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:38px}
.ar-headrow>*{min-width:0}
.ar-eyebrow{
display:inline-block;font-family:var(--ar-num);
font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
color:var(--ar-cyan-d);margin-bottom:12px;
}
.ar-eyebrow-light{color:var(--ar-cyan)}
.ar-lead{font-size:17px;color:var(--ar-body);max-width:64ch}
.ar-sec-ink .ar-lead{color:#A8B9D4}
.ar-note{font-size:13.5px;color:var(--ar-mute)}
.ar-tiny{font-size:12.5px;color:var(--ar-mute)}
.ar-link{
display:inline-flex;align-items:center;gap:9px;font-weight:700;
font-family:var(--ar-head);text-transform:uppercase;letter-spacing:.04em;
font-size:14px;color:var(--ar-ink);
}
.ar-link i{font-size:12px;color:var(--ar-cyan-d)}
.ar-link:hover{color:var(--ar-cyan-d)}
.ar-morelink{
display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--ar-cyan-d);
}
.ar-noimg{
display:flex;align-items:center;justify-content:center;width:100%;height:100%;
background:linear-gradient(135deg,#101A2E,#1D2C49);
color:rgba(255,255,255,.32);font-size:40px;
}
/* 4. Buttons & chips
-------------------------------------------------------------------------- */
.ar-btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:14px 24px;border:2px solid transparent;border-radius:var(--ar-r);
font-family:var(--ar-head);font-weight:800;font-size:14.5px;
text-transform:uppercase;letter-spacing:.06em;line-height:1;
transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
white-space:nowrap;
}
.ar-btn i{font-size:14px}
.ar-btn-cyan{background:var(--ar-cyan);color:var(--ar-ink)}
.ar-btn-cyan:hover{background:#fff;color:var(--ar-ink);transform:translateY(-2px)}
.ar-btn-ink{background:var(--ar-ink);color:#fff}
.ar-btn-ink:hover{background:var(--ar-ink3);color:var(--ar-cyan);transform:translateY(-2px)}
.ar-btn-line{border-color:var(--ar-line);color:var(--ar-ink);background:transparent}
.ar-btn-line:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
.ar-btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.ar-btn-ghost:hover{border-color:var(--ar-cyan);color:var(--ar-cyan)}
.ar-btn-white{background:#fff;color:var(--ar-ink)}
.ar-btn-rose{background:var(--ar-rose);color:#fff}
.ar-btn-rose:hover{background:#fff;color:var(--ar-ink)}
.ar-btn-sm{padding:10px 16px;font-size:12.5px}
.ar-btn-lg{padding:18px 32px;font-size:16px}
.ar-btn-block{width:100%}
.ar-btn:disabled{opacity:.5;cursor:not-allowed}
.ar-chip{
display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:100px;
background:rgba(35,211,238,.12);color:var(--ar-cyan-d);
font-family:var(--ar-num);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.ar-chip-rose{background:rgba(255,46,99,.14);color:#D6194E}
.ar-chip-ice{background:rgba(255,255,255,.12);color:#fff}
.ar-band{
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:26px 30px;border-radius:var(--ar-r-lg);background:#fff;
border-left:4px solid var(--ar-cyan);box-shadow:var(--ar-shadow);
}
.ar-band>*{min-width:0}
.ar-band>div{display:flex;align-items:flex-start;gap:16px}
.ar-band>div>i{font-size:26px;color:var(--ar-cyan-d);margin-top:3px}
.ar-band strong{display:block;font-family:var(--ar-head);text-transform:uppercase;color:var(--ar-ink);font-size:17px}
.ar-band p{margin:4px 0 0;font-size:14.5px}
.ar-band-soft{background:transparent;border-left:0;border:1px solid var(--ar-line);box-shadow:none}
.ar-empty{
text-align:center;padding:70px 26px;border:2px dashed var(--ar-line);border-radius:var(--ar-r-lg);background:#fff;
}
.ar-empty>i{font-size:44px;color:var(--ar-cyan-d);display:block;margin-bottom:16px}
.ar-checklist{margin:18px 0 0}
.ar-checklist li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:14.5px}
.ar-checklist li i{color:var(--ar-cyan-d);margin-top:4px}
.ar-checklist-light li{color:#C9D6EA}
.ar-checklist-light li i{color:var(--ar-cyan)}
.ar-numlist{counter-reset:arnum}
.ar-numlist li{
position:relative;padding:12px 0 12px 52px;border-bottom:1px solid var(--ar-line);
font-size:15px;counter-increment:arnum;
}
.ar-numlist li::before{
content:counter(arnum,decimal-leading-zero);
position:absolute;left:0;top:12px;font-family:var(--ar-num);font-weight:700;
color:var(--ar-cyan-d);font-size:14px;
}
/* 5. Toast / modal / floats / cookie
-------------------------------------------------------------------------- */
.toast-notify{
position:fixed;bottom:96px;left:50%;transform:translate(-50%,18px);
max-width:calc(100vw - 40px);z-index:1200;
background:var(--ar-ink);color:#fff;padding:14px 20px;border-radius:var(--ar-r);
border-left:4px solid var(--ar-cyan);box-shadow:var(--ar-shadow-ink);
display:flex;align-items:center;gap:16px;font-size:14px;
opacity:0;transition:opacity .25s ease,transform .25s ease;
}
.toast-notify.show{opacity:1;transform:translate(-50%,0)}
.toast-notify a{color:var(--ar-cyan);font-weight:700;white-space:nowrap}
.modal-overlay{
position:fixed;inset:0;background:rgba(4,7,14,.78);z-index:1100;
display:none;justify-content:flex-end;backdrop-filter:blur(3px);
}
.modal-overlay.on{display:flex}
.ar-panel{
width:min(520px,100%);height:100%;overflow-y:auto;background:#fff;
border-left:5px solid var(--ar-cyan);padding:34px 30px 44px;
}
.ar-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.ar-panel-head h3{font-size:24px;margin:6px 0 0}
.modal-close{
width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border:1px solid var(--ar-line);border-radius:var(--ar-r);cursor:pointer;color:var(--ar-ink);
}
.modal-close:hover{background:var(--ar-ink);color:var(--ar-cyan);border-color:var(--ar-ink)}
.modal-desc{font-size:14.5px;margin:16px 0 22px}
.ar-panel-trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--ar-line)}
.ar-panel-trust span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ar-mute)}
.ar-panel-trust i{color:var(--ar-cyan-d)}
.success-overlay{
position:fixed;inset:0;background:rgba(4,7,14,.8);z-index:1300;
display:flex;align-items:center;justify-content:center;padding:20px;
}
.success-box{
background:var(--ar-ink);color:#fff;border:1px solid var(--ar-lined);
border-radius:var(--ar-r-lg);padding:40px 34px;max-width:420px;text-align:center;
}
.success-icon i{font-size:48px;color:var(--ar-cyan)}
.success-box h3{color:#fff;margin:18px 0 10px}
.ar-cookie{
position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;
display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
background:var(--ar-ink);color:#C9D6EA;padding:18px 22px;
border:1px solid var(--ar-lined);border-left:4px solid var(--ar-cyan);
border-radius:var(--ar-r-lg);box-shadow:var(--ar-shadow-ink);
}
.ar-cookie-ico i{font-size:28px;color:var(--ar-cyan)}
.ar-cookie-copy{font-size:13.5px}
.ar-cookie-copy strong{display:block;color:#fff;font-family:var(--ar-head);text-transform:uppercase;margin-bottom:4px}
.ar-cookie-copy a{color:var(--ar-cyan);text-decoration:underline}
.ar-cookie-actions{display:flex;gap:10px}
.ar-cookie-decline,.ar-cookie-accept{
padding:11px 18px;border-radius:var(--ar-r);font-weight:700;font-size:13px;
font-family:var(--ar-head);text-transform:uppercase;letter-spacing:.05em;
}
.ar-cookie-decline{background:transparent;border:1px solid var(--ar-lined);color:#C9D6EA}
.ar-cookie-accept{background:var(--ar-cyan);border:1px solid var(--ar-cyan);color:var(--ar-ink)}
.wa-float{
position:fixed;right:18px;bottom:96px;z-index:900;
width:52px;height:52px;border-radius:50%;background:#1FAF54;
display:flex;align-items:center;justify-content:center;box-shadow:var(--ar-shadow-ink);
}
.back-to-top{
position:fixed;right:18px;bottom:160px;z-index:900;
width:52px;height:52px;border-radius:50%;background:var(--ar-ink);color:var(--ar-cyan);
display:flex;align-items:center;justify-content:center;border:1px solid var(--ar-lined);
font-size:24px;line-height:1;
}
.mobile-inquiry-bar{display:none}
/* 6. Header
-------------------------------------------------------------------------- */
/* Keeps the whole header subtree — including the mobile drawer (z-index:1150)
and its scrim — above the fixed floating widgets (toolbar 950, cookie 1000,
whatsapp / back-to-top 900) but below the inquiry modal (1100) and toast (1200). */
.ar-header{position:relative;z-index:1050}
.ar-ticker{
background:var(--ar-ink);border-bottom:1px solid var(--ar-lined);color:#A8B9D4;
font-family:var(--ar-num);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
}
/* Two balanced, centred lines. The four factory messages own the first line and
never wrap; the longer sentences need more room than the 1240px content wrap,
so the strip runs on a wider container with real side margins. The contact
tools sit centred underneath, which keeps the two rows symmetrical instead of
leaving one line hugging each edge. */
.ar-ticker-in{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:5px 24px;min-height:42px;padding:3px 0;width:min(1760px,95vw);
}
.ar-ticker-in>*{min-width:0}
.ar-ticker-lane{
display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
gap:6px 28px;flex:1 1 100%;overflow:hidden;letter-spacing:.06em;font-size:10.5px;
}
.ar-ticker-lane span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ar-ticker-lane i{color:var(--ar-cyan);font-size:10px}
.ar-ticker-tools{
display:flex;align-items:center;gap:20px;flex:0 0 auto;margin:0 auto;
letter-spacing:.06em;font-size:10.5px;
}
.ar-ticker-tools a{display:flex;align-items:center;gap:8px;color:#A8B9D4}
.ar-ticker-tools a:hover{color:var(--ar-cyan)}
/* As the viewport narrows the tail messages are dropped rather than ever being
broken onto a second line; phones (<=900px) hide the strip completely. */
@media (max-width:1720px){.ar-ticker-lane span:nth-child(n+4){display:none}}
@media (max-width:1300px){.ar-ticker-lane span:nth-child(n+3){display:none}}
@media (max-width:1000px){.ar-ticker-lane{display:none}}
@media (max-width:900px){.ar-ticker{display:none}}
/* The open language list drops down over the sticky header row, which carries
z-index:650 inside the same .ar-header stacking context. Keep the switcher
above it, otherwise the first languages are covered by the header bar and
only the last ones remain visible. */
.ar-lang{position:relative;z-index:700}
.ar-lang-btn{
display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--ar-lined);
color:#A8B9D4;padding:5px 10px;border-radius:var(--ar-r);font-size:11.5px;
font-family:var(--ar-num);text-transform:uppercase;letter-spacing:.08em;
}
.ar-lang-btn:hover{border-color:var(--ar-cyan);color:var(--ar-cyan)}
.ar-lang-flag{width:18px;height:13px;object-fit:cover;border-radius:1px}
.ar-lang-menu{
position:absolute;right:0;top:calc(100% + 8px);min-width:172px;background:#fff;
border:1px solid var(--ar-line);border-radius:var(--ar-r);box-shadow:var(--ar-shadow);
padding:8px;display:none;z-index:700;
}
/* invisible bridge across the 8px gap so the list stays open while moving down */
.ar-lang-menu::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.ar-lang:hover .ar-lang-menu,.ar-lang:focus-within .ar-lang-menu{display:block}
.ar-lang-menu a{
display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--ar-r);
font-size:13px;color:var(--ar-ink);
}
.ar-lang-menu a:hover{background:var(--ar-ice)}
.ar-lang-menu a.on{background:var(--ar-ink);color:var(--ar-cyan)}
.ar-head{
position:sticky;top:0;z-index:650;background:rgba(7,11,20,.97);
border-bottom:1px solid var(--ar-lined);backdrop-filter:blur(8px);
}
.ar-brandrow{display:flex;align-items:center;gap:24px;min-height:76px}
.ar-brandrow>*{min-width:0}
.ar-logo{flex:0 0 auto;display:flex;align-items:center}
.ar-logo img{height:38px;width:auto}
/* Single row, never wrapping: the links are tightened enough to keep the usual
column count inline, and aerorink.js moves whatever still cannot fit into the
"MORE" item so the row never runs under the search / quote buttons. */
.ar-nav{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;flex:1 1 auto;min-width:0}
.ar-nav>a,.ar-navitem>a{
display:flex;align-items:center;gap:7px;padding:10px 8px;border-radius:var(--ar-r);
font-family:var(--ar-head);font-weight:800;font-size:13px;text-transform:uppercase;
letter-spacing:.02em;color:#D9E4F4;white-space:nowrap;
}
.ar-nav>a:hover,.ar-navitem>a:hover,.ar-nav>a.active,.ar-navitem>a.active{
background:rgba(35,211,238,.12);color:var(--ar-cyan);
}
.ar-navitem{position:relative}
.ar-navitem>a i{font-size:10px;opacity:.7}
.ar-mega{
position:absolute;left:0;top:calc(100% + 10px);min-width:300px;background:#fff;
border:1px solid var(--ar-line);border-top:3px solid var(--ar-cyan);
border-radius:var(--ar-r);box-shadow:var(--ar-shadow);padding:20px;
display:none;z-index:30;
}
.ar-navitem:hover .ar-mega,.ar-navitem:focus-within .ar-mega{display:block}
.ar-mega-group{margin-bottom:14px}
.ar-mega-group>a{
display:block;font-family:var(--ar-head);font-weight:800;text-transform:uppercase;
font-size:13.5px;color:var(--ar-ink);margin-bottom:6px;
}
.ar-mega-group>a:hover{color:var(--ar-cyan-d)}
.ar-mega-sub{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid var(--ar-line)}
.ar-mega-sub a{font-size:13.5px;color:var(--ar-body);padding:4px 0}
.ar-mega-sub a:hover{color:var(--ar-cyan-d)}
.ar-mega-all{
display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:12px;
border-top:1px solid var(--ar-line);font-size:13px;font-weight:700;color:var(--ar-cyan-d);
}
/* Overflow bucket for the top nav — filled by aerorink.js, hidden while everything fits.
[hidden] needs !important: the nav links carry an author `display:flex`. */
.ar-nav>[hidden]{display:none !important}
.ar-navmore-panel{
left:auto;right:0;min-width:236px;max-width:min(330px,88vw);
max-height:min(72vh,440px);overflow-y:auto;overscroll-behavior:contain;
}
.ar-navmore-item+.ar-navmore-item{margin-top:14px;padding-top:14px;border-top:1px solid var(--ar-line)}
.ar-navmore-title{
display:block;font-family:var(--ar-head);font-weight:800;text-transform:uppercase;
font-size:13.5px;color:var(--ar-ink);
}
.ar-navmore-title:hover,.ar-navmore-title.active{color:var(--ar-cyan-d)}
.ar-navmore-sub{
display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-left:12px;
border-left:2px solid var(--ar-line);
}
.ar-navmore-sub a{font-size:13.5px;color:var(--ar-body);padding:4px 0}
.ar-navmore-sub a:hover{color:var(--ar-cyan-d)}
.ar-headtools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ar-toolbtn{
width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
background:transparent;border:1px solid var(--ar-lined);border-radius:var(--ar-r);color:#D9E4F4;
}
.ar-toolbtn:hover{border-color:var(--ar-cyan);color:var(--ar-cyan)}
.ar-quotelink{
display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--ar-r);
border:1px solid var(--ar-lined);color:#D9E4F4;font-size:13px;font-weight:700;
font-family:var(--ar-head);text-transform:uppercase;
}
.ar-quotelink:hover{border-color:var(--ar-cyan);color:var(--ar-cyan)}
.ar-qbadge{
min-width:20px;height:20px;padding:0 5px;border-radius:100px;background:var(--ar-rose);color:#fff;
font-family:var(--ar-num);font-size:11px;display:none;align-items:center;justify-content:center;
}
.ar-qbadge.show{display:inline-flex}
.ar-searchwrap{
display:flex;align-items:center;gap:0;max-width:0;overflow:hidden;
transition:max-width .3s ease;border-radius:var(--ar-r);
}
.ar-searchwrap.on{max-width:420px;border:1px solid var(--ar-lined);background:rgba(255,255,255,.06)}
.ar-searchwrap form{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 12px;width:100%}
.ar-searchwrap label{position:absolute;left:-9999px}
.ar-searchwrap input{
flex:1 1 auto;min-width:0;background:transparent;border:0;color:#fff;padding:9px 4px;font-size:14px;
}
.ar-searchwrap input::placeholder{color:#7F92B0}
.ar-searchwrap button{
flex:0 0 auto;background:var(--ar-cyan);border:0;color:var(--ar-ink);
padding:9px 14px;border-radius:var(--ar-r);font-weight:800;font-size:13px;
font-family:var(--ar-head);text-transform:uppercase;
}
/* The expanded field has a translucent background and the nav links cannot
shrink below their text, so while search is open the labels would show
through it. Clear a lane instead: the row hides them until search closes. */
.ar-nav{transition:opacity .22s ease,visibility .22s ease}
.ar-brandrow.ar-searching .ar-nav{opacity:0;visibility:hidden;pointer-events:none}
.ar-burger{display:none}
.ar-burger span{display:block;width:22px;height:2.5px;background:#fff;margin:3px 0}
/* 7. Mobile drawer
-------------------------------------------------------------------------- */
.ar-drawer{
position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:1150;
background:var(--ar-ink);border-left:1px solid var(--ar-lined);
transform:translateX(102%);transition:transform .32s ease;
display:flex;flex-direction:column;
}
.ar-drawer.on{transform:translateX(0)}
.ar-drawer-head{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 22px;border-bottom:1px solid var(--ar-lined);
}
.ar-drawer-head strong{color:#fff;font-family:var(--ar-head);text-transform:uppercase;letter-spacing:.08em}
.ar-drawer-close{
width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
background:transparent;border:1px solid var(--ar-lined);border-radius:var(--ar-r);color:#fff;
}
.ar-drawer nav{flex:1 1 auto;overflow-y:auto;padding:14px 22px}
.ar-drawer nav>a,.ar-drawer-sec>button{
display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
padding:15px 0;border-bottom:1px solid var(--ar-lined);background:transparent;border-left:0;
border-right:0;border-top:0;color:#D9E4F4;font-family:var(--ar-head);font-weight:800;
font-size:15px;text-transform:uppercase;letter-spacing:.04em;text-align:left;
}
.ar-drawer nav>a.active{color:var(--ar-cyan)}
.ar-drawer-sub{display:none;padding:8px 0 14px 14px;border-left:2px solid var(--ar-lined)}
.ar-drawer-sec.on .ar-drawer-sub{display:block}
.ar-drawer-sec.on>button{color:var(--ar-cyan)}
.ar-drawer-sub a{display:block;padding:9px 0;color:#A8B9D4;font-size:14px}
.ar-drawer-sub a.ar-l3{padding-left:14px;font-size:13px;color:#8DA2BF}
.ar-drawer-foot{padding:18px 22px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--ar-lined);display:flex;flex-direction:column;gap:10px}
.ar-drawer-foot .ar-searchwrap{max-width:none;border:1px solid var(--ar-lined);background:rgba(255,255,255,.06)}
.ar-drawer-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ar-drawer-lang a{
display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--ar-lined);
border-radius:var(--ar-r);font-size:12.5px;color:#A8B9D4;
}
.ar-drawer-lang a.on{border-color:var(--ar-cyan);color:var(--ar-cyan)}
.ar-scrim{position:fixed;inset:0;background:rgba(4,7,14,.6);z-index:1100;display:none}
.ar-scrim.on{display:block}
/* 8. Hero — the rink
-------------------------------------------------------------------------- */
.ar-hero{
position:relative;overflow:hidden;background:
radial-gradient(1100px 520px at 78% -10%,rgba(35,211,238,.20),transparent 62%),
radial-gradient(760px 460px at 6% 108%,rgba(255,46,99,.16),transparent 60%),
linear-gradient(180deg,var(--ar-ink) 0%,var(--ar-ink2) 58%,var(--ar-ink) 100%);
color:#C9D6EA;
padding:78px 0 0;
}
.ar-hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:80px 80px;
mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 90%);
}
.ar-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.ar-hero-in>*{min-width:0}
.ar-hero h1{color:#fff;margin-bottom:18px}
.ar-hero h1 em{font-style:normal;color:var(--ar-cyan);display:block}
.ar-hero-sub{font-size:17.5px;color:#A8B9D4;max-width:60ch}
.ar-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 6px}
.ar-hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ar-hero-tags span{
display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:100px;
border:1px solid rgba(255,255,255,.18);font-family:var(--ar-num);font-size:11.5px;
letter-spacing:.1em;text-transform:uppercase;color:#C9D6EA;
}
.ar-hero-tags i{color:var(--ar-cyan);font-size:10px}
/* scoreboard panel */
.ar-score{
position:relative;border:1px solid var(--ar-lined);border-radius:var(--ar-r-lg);
background:linear-gradient(180deg,rgba(21,31,53,.92),rgba(13,20,36,.92));
padding:26px 26px 20px;box-shadow:var(--ar-shadow-ink);backdrop-filter:blur(6px);
}
.ar-score::after{
content:"";position:absolute;left:26px;right:26px;top:78px;height:1px;
background:repeating-linear-gradient(90deg,rgba(35,211,238,.5) 0 8px,transparent 8px 16px);
}
.ar-score-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px}
.ar-score-head strong{
font-family:var(--ar-head);font-weight:800;text-transform:uppercase;letter-spacing:.1em;
color:#fff;font-size:14px;
}
.ar-score-live{
display:inline-flex;align-items:center;gap:7px;font-family:var(--ar-num);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--ar-cyan);
}
.ar-score-live i{width:7px;height:7px;border-radius:50%;background:var(--ar-rose);box-shadow:0 0 0 4px rgba(255,46,99,.18)}
.ar-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ar-lined)}
.ar-score-cell{background:rgba(7,11,20,.86);padding:18px 16px}
.ar-score-cell b{
display:block;font-family:var(--ar-num);font-size:26px;font-weight:700;color:#fff;
font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em;
}
.ar-score-cell b i{font-style:normal;font-size:14px;color:var(--ar-cyan);margin-left:4px}
.ar-score-cell span{
display:block;margin-top:8px;font-size:12px;color:#8DA2BF;text-transform:uppercase;
letter-spacing:.08em;
}
.ar-score-foot{
margin-top:18px;padding-top:16px;border-top:1px solid var(--ar-lined);
display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12.5px;color:#8DA2BF;
}
.ar-score-foot a{color:var(--ar-cyan);font-weight:700}
/* rink surface under the hero */
.ar-rink{
position:relative;height:150px;margin-top:44px;border-top:1px solid var(--ar-lined);
background:linear-gradient(180deg,rgba(35,211,238,.05),transparent 70%);
}
.ar-rink-line{
position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
background:repeating-linear-gradient(90deg,rgba(35,211,238,.55) 0 22px,transparent 22px 44px);
}
.ar-rink-circle{
position:absolute;top:50%;left:50%;width:190px;height:190px;transform:translate(-50%,-50%);
border:2px solid rgba(35,211,238,.28);border-radius:50%;
}
.ar-rink-circle::after{
content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%);
border-radius:50%;background:rgba(35,211,238,.35);
}
.ar-rink-crease{
position:absolute;top:50%;width:112px;height:168px;transform:translateY(-50%);
border:2px solid rgba(255,46,99,.34);border-radius:50%;
}
.ar-rink-crease-l{left:-56px}
.ar-rink-crease-r{right:-56px;border-color:rgba(47,107,255,.4)}
.ar-rink-puck{
position:absolute;top:50%;left:62%;width:34px;height:14px;transform:translate(-50%,-50%);
border-radius:50%;background:#111;border:2px solid var(--ar-cyan);
box-shadow:0 0 22px rgba(35,211,238,.6);
}
.ar-rink-puck::after{
content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);
width:130px;height:3px;border-radius:3px;
background:linear-gradient(90deg,transparent,rgba(35,211,238,.75));
}
/* 9. Scoreboard stats strip
-------------------------------------------------------------------------- */
.ar-strip{background:var(--ar-ink2);border-top:1px solid var(--ar-lined);border-bottom:1px solid var(--ar-lined)}
.ar-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ar-lined)}
.ar-strip-item{background:var(--ar-ink2);padding:30px 24px;display:flex;gap:16px;align-items:flex-start}
.ar-strip-item i{font-size:22px;color:var(--ar-cyan);margin-top:4px}
.ar-strip-item b{
display:block;font-family:var(--ar-num);font-size:24px;color:#fff;font-variant-numeric:tabular-nums;
}
.ar-strip-item span{display:block;font-size:13.5px;color:#8DA2BF;margin-top:4px}
/* 10. Category tiles
-------------------------------------------------------------------------- */
.ar-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ar-tile{
position:relative;display:flex;flex-direction:column;justify-content:space-between;
min-height:250px;padding:24px;border-radius:var(--ar-r);overflow:hidden;
background:linear-gradient(160deg,var(--ar-ink3),var(--ar-ink));
color:#C9D6EA;border:1px solid var(--ar-lined);
transition:transform .18s ease,box-shadow .18s ease;
}
.ar-tile::after{
content:"";position:absolute;right:-58px;bottom:-58px;width:130px;height:130px;
border:2px solid rgba(35,211,238,.28);border-radius:50%;
transition:transform .3s ease;
}
.ar-tile:hover{transform:translateY(-5px);box-shadow:var(--ar-shadow-ink)}
.ar-tile:hover::after{transform:scale(1.12)}
.ar-tile-faceoff{
position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(35,211,238,.14);border:1px solid rgba(35,211,238,.45);
font-family:var(--ar-num);font-size:12px;color:var(--ar-cyan);
}
.ar-tile h3{color:#fff;font-size:19px;margin:0 0 8px}
.ar-tile p{font-size:13.5px;color:#93A7C4;margin:0}
.ar-tile-foot{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:12.5px;color:var(--ar-cyan);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ar-tile-wide{grid-column:span 2}
.ar-tile-rose::after{border-color:rgba(255,46,99,.34)}
.ar-tile-blue::after{border-color:rgba(47,107,255,.4)}
/* 11. Product snap rail
-------------------------------------------------------------------------- */
.ar-railwrap{position:relative}
.ar-rail{
display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:6px 2px 22px;-webkit-overflow-scrolling:touch;
}
.ar-rail::-webkit-scrollbar{height:6px}
.ar-rail::-webkit-scrollbar-thumb{background:var(--ar-lined);border-radius:6px}
.ar-card{
flex:0 0 296px;scroll-snap-align:start;background:#fff;border:1px solid var(--ar-line);
border-radius:var(--ar-r);overflow:hidden;display:flex;flex-direction:column;
transition:transform .18s ease,box-shadow .18s ease;
}
.ar-card:hover{transform:translateY(-5px);box-shadow:var(--ar-shadow)}
.ar-card-media{position:relative;aspect-ratio:16/11;background:var(--ar-ink);overflow:hidden}
.ar-card-media img{width:100%;height:100%;object-fit:contain;padding:14px}
.ar-card-series{
position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:100px;
background:rgba(7,11,20,.82);border:1px solid rgba(35,211,238,.4);
font-family:var(--ar-num);font-size:10.5px;letter-spacing:.1em;color:var(--ar-cyan);
text-transform:uppercase;
}
.ar-card-body{padding:20px;flex:1 1 auto;display:flex;flex-direction:column}
.ar-card-body h3{font-size:17px;margin:0 0 8px}
.ar-card-body h3 a:hover{color:var(--ar-cyan-d)}
.ar-card-body p{font-size:13.5px;color:var(--ar-body);margin:0 0 14px}
.ar-specs-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.ar-specs-chips span{
padding:4px 9px;border:1px solid var(--ar-line);border-radius:var(--ar-r);
font-family:var(--ar-num);font-size:10.5px;letter-spacing:.05em;color:var(--ar-body);
}
.ar-card-foot{display:flex;gap:8px;padding:0 20px 20px}
.ar-card-foot .ar-btn{flex:1 1 auto}
.ar-railnav{display:flex;gap:8px}
.ar-railnav button{
width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border:1px solid var(--ar-line);background:#fff;border-radius:var(--ar-r);color:var(--ar-ink);
}
.ar-railnav button:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
.ar-quotetile{
flex:0 0 260px;scroll-snap-align:start;border:2px dashed var(--ar-lined);
border-radius:var(--ar-r);background:var(--ar-ink);color:#C9D6EA;
display:flex;flex-direction:column;justify-content:center;padding:28px;
}
.ar-quotetile h3{color:#fff;font-size:18px}
.ar-quotetile p{font-size:13.5px;color:#93A7C4}
/* 12. Powerplay OEM band
-------------------------------------------------------------------------- */
.ar-play{
position:relative;overflow:hidden;background:var(--ar-ink);color:#C9D6EA;
}
.ar-play::before{
content:"";position:absolute;inset:0;
background:repeating-linear-gradient(115deg,rgba(35,211,238,.07) 0 2px,transparent 2px 26px);
}
.ar-play-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ar-play-in>*{min-width:0}
.ar-play-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ar-play-card{
border:1px solid var(--ar-lined);border-radius:var(--ar-r);background:rgba(255,255,255,.03);
padding:22px;
}
.ar-play-card i{font-size:22px;color:var(--ar-cyan);display:block;margin-bottom:12px}
.ar-play-card h3{font-size:16px;color:#fff;margin:0 0 8px}
.ar-play-card p{font-size:13.5px;color:#93A7C4;margin:0}
/* 13. Manufacturing shift board
-------------------------------------------------------------------------- */
.ar-shift{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ar-shift-item{
position:relative;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);
padding:26px 24px 24px;overflow:hidden;
}
.ar-shift-item::before{
content:"";position:absolute;left:0;top:0;width:100%;height:3px;
background:linear-gradient(90deg,var(--ar-cyan),transparent);
}
.ar-shift-item b{
display:block;font-family:var(--ar-num);font-size:12px;letter-spacing:.14em;
color:var(--ar-cyan-d);margin-bottom:12px;
}
.ar-shift-item h3{font-size:16px;margin:0 0 8px}
.ar-shift-item p{font-size:13.5px;margin:0}
.ar-shift-item i{position:absolute;right:20px;top:22px;font-size:30px;color:rgba(35,211,238,.16)}
/* 14. Documentation grid
-------------------------------------------------------------------------- */
.ar-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ar-doc{
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;
display:flex;flex-direction:column;transition:box-shadow .18s ease;
}
.ar-doc:hover{box-shadow:var(--ar-shadow)}
.ar-doc figure{
margin:0;aspect-ratio:4/3;background:linear-gradient(160deg,#EEF4FC,#DCE8F7);
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ar-doc figure img{width:100%;height:100%;object-fit:contain;padding:16px}
.ar-doc figure .ar-noimg{background:linear-gradient(160deg,#EEF4FC,#DCE8F7);color:rgba(7,11,20,.22)}
.ar-doc-body{padding:18px 20px 20px;flex:1 1 auto;display:flex;flex-direction:column;gap:8px}
.ar-doc-body strong{font-family:var(--ar-head);text-transform:uppercase;color:var(--ar-ink);font-size:15px;line-height:1.25}
.ar-doc-body small{font-family:var(--ar-num);font-size:11px;color:var(--ar-mute);letter-spacing:.06em}
/* 15. Channel cards (solutions)
-------------------------------------------------------------------------- */
.ar-chans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ar-chan{
display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:center;
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:18px;
transition:transform .18s ease,box-shadow .18s ease;
}
.ar-chan>*{min-width:0}
.ar-chan:hover{transform:translateX(6px);box-shadow:var(--ar-shadow)}
.ar-chan figure{margin:0;aspect-ratio:4/3;background:var(--ar-ink);border-radius:var(--ar-r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ar-chan figure img{width:100%;height:100%;object-fit:contain;padding:10px}
.ar-chan h3{font-size:16px;margin:0 0 6px}
.ar-chan p{font-size:13.5px;margin:0}
.ar-chan>i{color:var(--ar-cyan-d)}
/* 16. Insights feed
-------------------------------------------------------------------------- */
.ar-feed{display:grid;grid-template-columns:1.05fr .95fr;gap:30px}
.ar-feed>*{min-width:0}
.ar-feed-lead{
display:block;border-radius:var(--ar-r);overflow:hidden;background:var(--ar-ink);color:#C9D6EA;
}
.ar-feed-lead figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ar-ink3)}
.ar-feed-lead figure img{width:100%;height:100%;object-fit:cover}
.ar-feed-lead-body{padding:26px}
.ar-feed-lead h3{color:#fff;font-size:22px;margin:14px 0 10px}
.ar-feed-lead p{font-size:14px;color:#93A7C4;margin:0}
.ar-feed-list{display:flex;flex-direction:column}
.ar-feed-row{
display:grid;grid-template-columns:78px 1fr;gap:18px;padding:20px 0;
border-bottom:1px solid var(--ar-line);align-items:start;
}
.ar-feed-row:first-child{border-top:1px solid var(--ar-line)}
.ar-feed-row time{
font-family:var(--ar-num);font-size:11.5px;color:var(--ar-mute);letter-spacing:.06em;
border-left:2px solid var(--ar-cyan);padding-left:10px;
}
.ar-feed-row strong{display:block;font-family:var(--ar-head);text-transform:uppercase;color:var(--ar-ink);font-size:15px;line-height:1.3}
.ar-feed-row span{display:block;font-size:13px;color:var(--ar-body);margin-top:5px}
.ar-feed-row:hover strong{color:var(--ar-cyan-d)}
/* 17. FAQ accordion
-------------------------------------------------------------------------- */
.ar-faqcta{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.ar-faqcta>*{min-width:0}
.ar-acc{border-top:1px solid var(--ar-line)}
.ar-acc-item{border-bottom:1px solid var(--ar-line)}
.ar-acc-item summary{
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:19px 0;cursor:pointer;list-style:none;
font-family:var(--ar-head);font-weight:800;text-transform:uppercase;
color:var(--ar-ink);font-size:16px;line-height:1.3;
}
.ar-acc-item summary::-webkit-details-marker{display:none}
.ar-acc-item summary i{
flex:0 0 auto;width:26px;height:26px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--ar-ice);color:var(--ar-cyan-d);font-size:11px;transition:transform .2s ease;
}
.ar-acc-item[open] summary i{transform:rotate(45deg);background:var(--ar-cyan);color:var(--ar-ink)}
.ar-acc-body{padding:0 0 22px;font-size:14.5px;max-width:78ch}
.ar-cta-panel{
background:var(--ar-ink);color:#C9D6EA;border-radius:var(--ar-r-lg);padding:36px 32px;
border:1px solid var(--ar-lined);border-top:4px solid var(--ar-cyan);
}
.ar-cta-panel h3{color:#fff;font-size:24px}
.ar-cta-panel .ar-btn{margin-top:8px}
.ar-cta-panel .ar-checklist{margin-bottom:22px}
/* 18. Footer
-------------------------------------------------------------------------- */
.ar-foot-strip{background:var(--ar-ink);border-top:1px solid var(--ar-lined);color:#C9D6EA}
.ar-foot-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ar-lined)}
.ar-foot-strip-item{background:var(--ar-ink);padding:26px 22px;display:flex;gap:14px;align-items:flex-start}
.ar-foot-strip-item i{font-size:20px;color:var(--ar-cyan);margin-top:4px}
.ar-foot-strip-item strong{display:block;color:#fff;font-family:var(--ar-head);text-transform:uppercase;font-size:14.5px}
.ar-foot-strip-item span{display:block;font-size:12.5px;color:#8DA2BF;margin-top:3px}
.ar-foot{
background:linear-gradient(180deg,var(--ar-ink2),var(--ar-ink));color:#8DA2BF;
padding:66px 0 0;border-top:1px solid var(--ar-lined);
}
.ar-foot-main{
display:grid;grid-template-columns:1.25fr .8fr .8fr .8fr 1fr;gap:34px;
padding-bottom:52px;border-bottom:1px solid var(--ar-lined);
}
.ar-foot-main>*{min-width:0}
.ar-foot-brand img{height:34px;width:auto;margin-bottom:16px}
.ar-foot-brand p{font-size:13.5px;color:#8DA2BF}
.ar-foot-news{margin-top:20px}
.ar-foot-news strong{display:block;color:#fff;font-family:var(--ar-head);text-transform:uppercase;font-size:14px;margin-bottom:6px}
.ar-foot-news p{font-size:12.5px;margin-bottom:12px}
.ar-foot-news form{display:flex;gap:8px}
.ar-foot-news input{
flex:1 1 auto;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--ar-lined);
border-radius:var(--ar-r);padding:11px 13px;color:#fff;font-size:13.5px;
}
.ar-foot-news input::placeholder{color:#6E82A2}
.ar-foot-news button{
flex:0 0 auto;background:var(--ar-cyan);border:0;color:var(--ar-ink);
border-radius:var(--ar-r);padding:11px 15px;font-weight:800;font-size:12.5px;font-family:var(--ar-head);
text-transform:uppercase;
}
.ar-foot-social{display:flex;gap:9px;margin-top:18px}
.ar-foot-social a{
width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border:1px solid var(--ar-lined);border-radius:var(--ar-r);color:#A8B9D4;
}
.ar-foot-social a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan)}
.ar-foot-col>span{
display:block;color:#fff;font-family:var(--ar-head);text-transform:uppercase;
font-size:13.5px;letter-spacing:.06em;margin-bottom:14px;
}
.ar-foot-col nav{display:flex;flex-direction:column;gap:9px}
.ar-foot-col a{font-size:13.5px;color:#8DA2BF}
.ar-foot-col a:hover{color:var(--ar-cyan)}
.ar-foot-base{
padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;
font-size:12.5px;flex-wrap:wrap;
}
.ar-foot-base-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ar-foot-legal{display:flex;flex-wrap:wrap;gap:16px}
.ar-foot-legal a:hover{color:var(--ar-cyan)}
/* 19. Page head / crumb / toolbar / sidebar
-------------------------------------------------------------------------- */
.ar-pagehead{
background:var(--ar-ink);color:#C9D6EA;padding:52px 0 46px;
border-bottom:1px solid var(--ar-lined);
}
.ar-pagehead-in{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end}
.ar-pagehead-in>*{min-width:0}
.ar-pagehead h1{color:#fff;margin:10px 0 12px}
.ar-pagehead p{font-size:15.5px;color:#93A7C4;max-width:76ch;margin:0}
.ar-pagehead-plain{background:var(--ar-ice);color:var(--ar-body);border-bottom:1px solid var(--ar-line)}
.ar-pagehead-plain h1{color:var(--ar-ink)}
.ar-pagehead-plain p{color:var(--ar-body)}
.ar-pagehead-side{display:flex;gap:10px;flex-wrap:wrap}
.ar-pagehead-stats{display:flex;gap:28px;flex-wrap:wrap}
.ar-pagehead-stats div{border-left:2px solid rgba(35,211,238,.5);padding-left:14px}
.ar-pagehead-stats strong{display:block;font-family:var(--ar-num);font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.ar-pagehead-stats small{font-size:12px;color:#8DA2BF;text-transform:uppercase;letter-spacing:.06em}
.ar-crumb{display:flex;flex-wrap:wrap;gap:9px;font-size:12.5px;color:#8DA2BF;font-family:var(--ar-num);letter-spacing:.04em}
.ar-crumb a{color:#A8B9D4}
.ar-crumb a:hover{color:var(--ar-cyan)}
.ar-crumb-light{color:#8DA2BF}
.ar-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding:14px 18px;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);
margin-bottom:22px;font-size:13.5px;
}
.ar-toolbar>*{min-width:0}
.ar-viewtoggle{display:flex;gap:6px}
.ar-viewtoggle button{
width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border:1px solid var(--ar-line);background:#fff;border-radius:var(--ar-r);color:var(--ar-body);
}
.ar-viewtoggle button.on{background:var(--ar-ink);border-color:var(--ar-ink);color:var(--ar-cyan)}
.ar-catalog{display:grid;grid-template-columns:266px 1fr;gap:34px;align-items:start}
.ar-catalog>*{min-width:0}
.ar-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.ar-sidebox{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:22px}
.ar-sidebox h3{font-size:15px;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.ar-sidebox h3 i{color:var(--ar-cyan-d);font-size:15px}
.ar-sidebox-ink{background:var(--ar-ink);color:#C9D6EA;border-color:var(--ar-lined)}
.ar-sidebox-ink h3{color:#fff}
.ar-sidebox-ink h3 i{color:var(--ar-cyan)}
.ar-sidebox-ink p{font-size:13.5px;color:#93A7C4}
.ar-cattree{display:flex;flex-direction:column;gap:3px}
.ar-cattree>a{
display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
border-radius:var(--ar-r);font-size:14px;font-weight:600;color:var(--ar-ink);
}
.ar-cattree>a:hover{background:var(--ar-ice)}
.ar-cattree>a.on{background:var(--ar-ink);color:var(--ar-cyan)}
.ar-catkids{display:flex;flex-direction:column;gap:2px;padding-left:13px;margin:4px 0 8px 11px;border-left:2px solid var(--ar-line)}
.ar-catkids a{font-size:13.5px;font-weight:500;color:var(--ar-body);padding:4px 0}
.ar-catkids a.on{color:var(--ar-cyan-d);font-weight:700}
.ar-helpful{display:flex;flex-direction:column;gap:2px}
.ar-helpful a{
display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;
border-bottom:1px solid var(--ar-line);font-size:13.5px;color:var(--ar-body);
}
.ar-helpful a:last-child{border-bottom:0}
.ar-helpful a:hover{color:var(--ar-cyan-d)}
.ar-minilist{display:flex;flex-direction:column;gap:12px}
.ar-minilist a{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;font-size:13.5px;font-weight:600;color:var(--ar-ink)}
.ar-minilist a>*{min-width:0}
.ar-minilist img{width:58px;height:44px;object-fit:contain;background:var(--ar-ink);border-radius:var(--ar-r);padding:4px}
/* 20. Product cards & listing
-------------------------------------------------------------------------- */
.ar-plist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ar-plist.ar-view-list{grid-template-columns:1fr}
.ar-pcard{
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;
display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;
}
.ar-pcard:hover{transform:translateY(-5px);box-shadow:var(--ar-shadow)}
.ar-pcard-media{
position:relative;display:block;aspect-ratio:4/3;background:var(--ar-ink);overflow:hidden;
}
.ar-pcard-media img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .3s ease}
.ar-pcard:hover .ar-pcard-media img{transform:scale(1.05)}
.ar-pcard-media .ar-chip{position:absolute;top:12px;left:12px;background:rgba(7,11,20,.86);color:var(--ar-cyan)}
.ar-pcard-body{padding:20px;flex:1 1 auto;display:flex;flex-direction:column;gap:10px}
.ar-pcard-body h2{font-size:17px;margin:0;text-transform:none;letter-spacing:0;font-family:var(--ar-text);font-weight:700;line-height:1.35}
.ar-pcard-body h2 a:hover{color:var(--ar-cyan-d)}
.ar-pcard-body p{font-size:13.5px;margin:0;flex:1 1 auto}
.ar-pcard-foot{display:flex;gap:8px;flex-wrap:wrap}
.ar-pcard-foot .ar-btn{flex:1 1 auto}
.ar-view-list .ar-pcard{display:grid;grid-template-columns:270px 1fr}
.ar-view-list .ar-pcard-media{aspect-ratio:auto;height:100%;min-height:190px}
.ar-view-list .ar-pcard-body{padding:24px}
/* 21. Product detail
-------------------------------------------------------------------------- */
.ar-pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ar-pdp>*{min-width:0}
.ar-gallery{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.ar-gallery-main{
background:var(--ar-ink);border:1px solid var(--ar-lined);border-radius:var(--ar-r);
aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;
position:relative;
}
.ar-gallery-main::after{
content:"";position:absolute;inset:auto 0 0 0;height:3px;
background:linear-gradient(90deg,var(--ar-cyan),transparent 70%);
}
.ar-gallery-main img{width:100%;height:100%;object-fit:contain;padding:26px}
.ar-gallery-thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.ar-gallery-thumbs button{
flex:0 0 84px;width:84px;height:66px;background:var(--ar-ink);border:1px solid var(--ar-lined);
border-radius:var(--ar-r);overflow:hidden;padding:6px;
}
.ar-gallery-thumbs button.active{border-color:var(--ar-cyan)}
.ar-gallery-thumbs img{width:100%;height:100%;object-fit:contain}
.ar-pdp-info h1{text-transform:none;letter-spacing:0;font-size:clamp(24px,2.8vw,36px);font-family:var(--ar-head)}
.ar-pdp-info>p{font-size:15.5px}
.ar-pdp-facts{display:flex;flex-direction:column;gap:11px;margin:20px 0;padding:20px;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r)}
.ar-pdp-facts div{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.ar-pdp-facts i{color:var(--ar-cyan-d);margin-top:4px}
.ar-pdp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.ar-pdp-share{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ar-mute);margin-bottom:24px}
.ar-pdp-share a{
width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border:1px solid var(--ar-line);border-radius:var(--ar-r);color:var(--ar-body);
}
.ar-pdp-share a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
.ar-tabs{border:1px solid var(--ar-line);border-radius:var(--ar-r);background:#fff;overflow:hidden}
/* All three tabs stay on ONE row: they never wrap, and if a longer translation
still cannot fit the row scrolls sideways instead of breaking onto two lines. */
.ar-tabs-nav{
display:flex;flex-wrap:nowrap;gap:2px;background:var(--ar-ice);
border-bottom:1px solid var(--ar-line);overflow-x:auto;overscroll-behavior-x:contain;
}
.ar-tabs-nav button{
flex:0 0 auto;white-space:nowrap;padding:14px 13px;background:transparent;border:0;
border-bottom:3px solid transparent;
font-family:var(--ar-head);font-weight:800;font-size:12.5px;text-transform:uppercase;
letter-spacing:.02em;color:var(--ar-body);
}
.ar-tabs-nav button.on{background:#fff;border-bottom-color:var(--ar-cyan);color:var(--ar-ink)}
.ar-tabs-panel{display:none;padding:24px}
.ar-tabs-panel.on{display:block}
.ar-specs{width:100%;border-collapse:collapse;font-size:14px}
.ar-specs th,.ar-specs td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--ar-line)}
.ar-specs th{
width:42%;font-family:var(--ar-head);text-transform:uppercase;font-size:12.5px;
letter-spacing:.05em;color:var(--ar-ink);background:#F7FAFE;
}
.ar-related{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ar-related a{
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;
display:flex;flex-direction:column;gap:8px;padding-bottom:16px;
}
.ar-related a:hover{border-color:var(--ar-cyan)}
.ar-related figure{margin:0;aspect-ratio:4/3;background:var(--ar-ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ar-related figure img{width:100%;height:100%;object-fit:contain;padding:12px}
.ar-related strong{padding:0 16px;font-size:14px;color:var(--ar-ink);font-family:var(--ar-head);text-transform:uppercase;line-height:1.3}
.ar-related .ar-tiny{padding:0 16px}
.ar-pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.ar-pager>*{min-width:0}
.ar-pager-cell{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:18px}
.ar-pager-next{text-align:right}
.pager-link{
display:inline-flex;align-items:center;gap:10px;font-family:var(--ar-head);font-weight:800;
text-transform:uppercase;font-size:14px;color:var(--ar-ink);
}
.pager-link:hover{color:var(--ar-cyan-d)}
.pager-empty{color:var(--ar-mute);font-size:13px;text-transform:none;font-family:var(--ar-text);font-weight:500}
.ar-stickybar{
position:fixed;left:0;right:0;bottom:0;z-index:800;background:var(--ar-ink);
border-top:1px solid var(--ar-lined);transform:translateY(105%);transition:transform .28s ease;
}
.ar-stickybar.on{transform:translateY(0)}
.ar-stickybar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.ar-stickybar-in>*{min-width:0}
.ar-stickybar-in strong{color:#fff;font-family:var(--ar-head);text-transform:uppercase;font-size:14px}
.ar-stickybar-in>div{display:flex;gap:10px;flex:0 0 auto}
/* 22. Inquiry / quote page
-------------------------------------------------------------------------- */
.ar-steps{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.ar-steps li{
display:flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--ar-line);
border-radius:100px;font-size:13.5px;background:#fff;
}
.ar-steps li b{
width:24px;height:24px;border-radius:50%;background:var(--ar-ice);color:var(--ar-body);
display:flex;align-items:center;justify-content:center;font-family:var(--ar-num);font-size:12px;
}
.ar-steps li.on{border-color:var(--ar-cyan);background:var(--ar-ink);color:#fff}
.ar-steps li.on b{background:var(--ar-cyan);color:var(--ar-ink)}
.ar-steps li.done b{background:var(--ar-cyan);color:var(--ar-ink)}
.ar-quotepage{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start}
.ar-quotepage>*{min-width:0}
.ar-qtable{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden}
.ar-qhead,.ar-qrow{display:grid;grid-template-columns:96px 1fr 170px 54px;gap:16px;align-items:center;padding:16px 20px}
.ar-qhead{background:var(--ar-ink);color:#fff;font-family:var(--ar-head);text-transform:uppercase;font-size:12.5px;letter-spacing:.06em}
.ar-qrow{border-bottom:1px solid var(--ar-line)}
.ar-qrow>*{min-width:0}
.ar-qrow img{width:96px;height:72px;object-fit:contain;background:var(--ar-ink);border-radius:var(--ar-r);padding:6px}
.ar-qrow h3{font-size:15px;margin:0;text-transform:none;letter-spacing:0;font-family:var(--ar-text);font-weight:700}
.ar-qty{display:flex;align-items:center;gap:0;border:1px solid var(--ar-line);border-radius:var(--ar-r);width:130px}
.ar-qty a{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ar-ice);color:var(--ar-ink)}
.ar-qty input{width:60px;min-width:0;border:0;text-align:center;padding:9px 4px;font-family:var(--ar-num);font-size:14px}
.ar-qremove{
width:34px;height:34px;display:flex;align-items:center;justify-content:center;justify-self:end;
border:1px solid var(--ar-line);border-radius:var(--ar-r);color:var(--ar-rose);
}
.ar-qremove:hover{background:var(--ar-rose);color:#fff;border-color:var(--ar-rose)}
.ar-formcard{
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);
padding:28px;box-shadow:var(--ar-shadow);position:sticky;top:96px;
}
.ar-formcard-head{margin-bottom:18px}
.ar-formcard h2{font-size:20px;margin:0 0 8px}
.ar-formcard>p{font-size:14px}
.ar-formcard-static{position:static}
/* 23. Forms
-------------------------------------------------------------------------- */
.ar-form{display:flex;flex-direction:column;gap:14px}
.ar-form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ar-form-2>*{min-width:0}
.ar-form input[type=text],.ar-form input[type=email],.ar-form input[type=tel],.ar-form textarea,.ar-form select{
width:100%;background:var(--ar-ice);border:1px solid var(--ar-line);border-radius:var(--ar-r);
padding:13px 15px;font-size:14.5px;font-family:var(--ar-text);color:var(--ar-ink);
}
.ar-form input:focus,.ar-form textarea:focus{outline:none;border-color:var(--ar-cyan);background:#fff}
.ar-form textarea{resize:vertical;min-height:110px}
.ar-form input[readonly]{background:#EEF3FB;color:var(--ar-body)}
.ar-field{display:flex;flex-direction:column;gap:6px}
.ar-field>span{font-family:var(--ar-head);text-transform:uppercase;font-size:12px;letter-spacing:.06em;color:var(--ar-ink)}
.ar-form-vertify{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center}
.ar-captcha{width:100%;height:48px;object-fit:cover;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r)}
.ar-form-vertify input{
background:var(--ar-ice);border:1px solid var(--ar-line);border-radius:var(--ar-r);
padding:13px 15px;font-size:14.5px;
}
.ar-faqsearch{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:6px 6px 6px 14px}
.ar-faqsearch input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:9px 4px;font-size:14px}
.ar-faqsearch i{color:var(--ar-mute)}
/* 24. Article list / detail / solutions
-------------------------------------------------------------------------- */
.ar-masthead{background:var(--ar-ink);color:#C9D6EA;padding:52px 0 44px;border-bottom:1px solid var(--ar-lined)}
.ar-masthead h1{color:#fff;margin:12px 0 14px}
.ar-masthead-row p{font-size:15.5px;color:#93A7C4;max-width:80ch;margin:0}
.ar-masthead-tags{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:22px;font-size:12.5px;color:#8DA2BF}
.ar-masthead-tags a{
padding:5px 11px;border:1px solid var(--ar-lined);border-radius:100px;color:#C9D6EA;
font-family:var(--ar-num);font-size:11.5px;
}
.ar-masthead-tags a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan)}
.ar-stream{display:flex;flex-direction:column;gap:20px}
.ar-lead-story{
display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#fff;
border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;
}
.ar-lead-story>*{min-width:0}
.ar-lead-story-img{display:block;background:var(--ar-ink);min-height:300px}
.ar-lead-story-img img{width:100%;height:100%;object-fit:cover}
.ar-lead-story-body{padding:36px 34px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.ar-lead-story-body h2{font-size:26px;margin:0;text-transform:none;letter-spacing:0;font-family:var(--ar-head)}
.ar-lead-story-body h2 a:hover{color:var(--ar-cyan-d)}
.ar-lead-story-body p{font-size:14.5px;margin:0}
.ar-story{
display:grid;grid-template-columns:230px 1fr;gap:24px;background:#fff;
border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;
transition:box-shadow .18s ease;
}
.ar-story:hover{box-shadow:var(--ar-shadow)}
.ar-story>*{min-width:0}
.ar-story-img{display:block;background:var(--ar-ink);min-height:170px}
.ar-story-img img{width:100%;height:100%;object-fit:cover}
.ar-story-body{padding:24px 26px;display:flex;flex-direction:column;gap:9px}
.ar-story-body h3{font-size:19px;margin:0;text-transform:none;letter-spacing:0;font-family:var(--ar-head)}
.ar-story-body p{font-size:14px;margin:0}
.ar-story-meta{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--ar-num);font-size:11.5px;color:var(--ar-mute);text-transform:uppercase;letter-spacing:.06em}
.ar-certs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ar-cert{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;display:flex;flex-direction:column}
.ar-cert:hover{box-shadow:var(--ar-shadow)}
.ar-cert figure{margin:0;aspect-ratio:4/3;background:linear-gradient(160deg,#EEF4FC,#DCE8F7);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ar-cert figure img{width:100%;height:100%;object-fit:contain;padding:18px}
.ar-cert figure .ar-noimg{background:linear-gradient(160deg,#EEF4FC,#DCE8F7);color:rgba(7,11,20,.2)}
.ar-cert-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px}
.ar-cert-body strong{font-family:var(--ar-head);text-transform:uppercase;font-size:15px;color:var(--ar-ink);line-height:1.3}
.ar-cert-body small{font-family:var(--ar-num);font-size:11px;color:var(--ar-mute)}
.ar-ledger{border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;background:#fff}
.ar-ledger-row{display:grid;grid-template-columns:1.05fr .5fr 1.6fr;gap:18px;padding:18px 22px;border-bottom:1px solid var(--ar-line);font-size:14px;align-items:start}
.ar-ledger-row>*{min-width:0}
.ar-ledger-row:last-child{border-bottom:0}
.ar-ledger-head{background:var(--ar-ink);color:#fff;font-family:var(--ar-head);text-transform:uppercase;font-size:12.5px;letter-spacing:.06em}
.ar-ledger-row b{font-family:var(--ar-head);text-transform:uppercase;color:var(--ar-ink);font-size:14px}
.ar-solrows{display:flex;flex-direction:column;gap:22px}
.ar-solrow{
display:grid;grid-template-columns:380px 1fr;gap:0;background:#fff;border:1px solid var(--ar-line);
border-radius:var(--ar-r);overflow:hidden;
}
.ar-solrow>*{min-width:0}
.ar-solrow-media{position:relative;display:block;background:var(--ar-ink);min-height:250px}
.ar-solrow-media img{width:100%;height:100%;object-fit:cover}
.ar-solrow-num{
position:absolute;left:20px;top:18px;font-family:var(--ar-num);font-size:13px;
color:var(--ar-cyan);letter-spacing:.14em;
}
.ar-solrow-body{padding:30px 32px;display:flex;flex-direction:column;gap:11px}
.ar-solrow-body h2{font-size:23px;margin:0;text-transform:none;letter-spacing:0;font-family:var(--ar-head)}
.ar-solrow-body p{font-size:14.5px;margin:0}
.ar-solrow-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ar-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ar-line);border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden}
/* icon and title share the first row, the note runs full width underneath */
.ar-selector-item{
background:#fff;padding:24px 20px;
display:grid;grid-template-columns:20px 1fr;column-gap:9px;align-items:start;
}
.ar-selector-item i{font-size:18px;color:var(--ar-cyan-d);grid-column:1;grid-row:1;text-align:center}
.ar-selector-item strong{grid-column:2;grid-row:1;display:block;font-family:var(--ar-head);text-transform:uppercase;font-size:14.5px;color:var(--ar-ink)}
.ar-selector-item span{grid-column:1/-1;grid-row:2;display:block;font-size:13px;color:var(--ar-body);margin-top:6px}
.ar-readhead{background:var(--ar-ice);padding:44px 0 38px;border-bottom:1px solid var(--ar-line)}
.ar-readhead h1{text-transform:none;letter-spacing:0;margin:14px 0 12px}
.ar-readhead .ar-lead{font-size:16.5px}
.ar-byline{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:13px;color:var(--ar-mute)}
.ar-byline-avatar{
width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--ar-ink);color:var(--ar-cyan);
display:flex;align-items:center;justify-content:center;
}
.ar-byline strong{display:block;color:var(--ar-ink);font-family:var(--ar-head);text-transform:uppercase;font-size:13.5px}
.ar-read{display:grid;grid-template-columns:64px 1fr 300px;gap:34px;align-items:start}
.ar-read>*{min-width:0}
.ar-read-rail{position:sticky;top:110px;display:flex;flex-direction:column;gap:9px;align-items:center}
.ar-read-rail-label{font-family:var(--ar-num);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ar-mute);writing-mode:vertical-rl}
.ar-read-rail a{
width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border:1px solid var(--ar-line);border-radius:var(--ar-r);background:#fff;color:var(--ar-body);
}
.ar-read-rail a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
.ar-read-hero{margin:0 0 26px;border-radius:var(--ar-r);overflow:hidden;background:var(--ar-ink)}
.ar-read-hero img{width:100%;height:auto}
.ar-read-tags{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:30px 0 0;font-size:12.5px;color:var(--ar-mute)}
.ar-read-tags a{padding:5px 11px;border:1px solid var(--ar-line);border-radius:100px;background:#fff;font-size:12.5px}
.ar-read-tags a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
.ar-read-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.ar-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1080;background:transparent}
.ar-progress span{display:block;height:100%;width:0;background:var(--ar-cyan)}
.ar-casehero{position:relative;background:var(--ar-ink);padding:56px 0 0;overflow:hidden}
.ar-casehero-bg{position:absolute;inset:0;opacity:.2}
.ar-casehero-bg img{width:100%;height:100%;object-fit:cover}
.ar-casecard{position:relative;z-index:2;background:rgba(13,20,36,.9);border:1px solid var(--ar-lined);border-top:4px solid var(--ar-cyan);border-radius:var(--ar-r-lg);padding:40px 38px;max-width:900px;margin-bottom:-38px}
.ar-casecard h1{color:#fff;margin:12px 0 12px}
.ar-casecard p{color:#A8B9D4;font-size:15.5px}
.ar-inline-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ar-case{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;margin-top:60px}
.ar-case>*{min-width:0}
.ar-casefacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ar-line);border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden;margin-bottom:28px}
.ar-casefacts>div{background:#fff;padding:22px 20px}
.ar-casefacts i{font-size:18px;color:var(--ar-cyan-d);display:block;margin-bottom:10px}
.ar-casefacts strong{display:block;font-family:var(--ar-head);text-transform:uppercase;font-size:13.5px;color:var(--ar-ink);margin-bottom:6px}
.ar-casefacts span{font-size:13.5px;color:var(--ar-body)}
.ar-case-side{display:flex;flex-direction:column;gap:18px}
.ar-sharebar{display:flex;gap:9px}
.ar-sharebar a{
width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
border:1px solid var(--ar-line);border-radius:var(--ar-r);color:var(--ar-body);
}
.ar-sharebar a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
/* 25. Single pages
-------------------------------------------------------------------------- */
.ar-abhero{background:var(--ar-ink);color:#C9D6EA;padding:56px 0 0;border-bottom:1px solid var(--ar-lined)}
.ar-abhero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.ar-abhero-in>*{min-width:0}
.ar-abhero h1{color:#fff;margin:14px 0 16px}
.ar-abhero .ar-lead{color:#A8B9D4}
.ar-abhero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ar-lined);border:1px solid var(--ar-lined);border-radius:var(--ar-r);overflow:hidden;margin-top:30px}
.ar-abhero-kpis>div{background:var(--ar-ink2);padding:20px 18px}
.ar-abhero-kpis strong{display:block;font-family:var(--ar-num);font-size:22px;color:var(--ar-cyan);font-variant-numeric:tabular-nums}
.ar-abhero-kpis span{display:block;font-size:12px;color:#8DA2BF;margin-top:5px;text-transform:uppercase;letter-spacing:.06em}
.ar-abhero-media{position:relative;display:grid;gap:14px}
.ar-abhero-media figure{margin:0;border:1px solid var(--ar-lined);border-radius:var(--ar-r);overflow:hidden;background:var(--ar-ink3);position:relative}
.ar-abhero-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ar-abhero-media figcaption{
position:absolute;left:0;bottom:0;right:0;padding:10px 14px;font-family:var(--ar-num);
font-size:11.5px;letter-spacing:.06em;color:#C9D6EA;background:linear-gradient(180deg,transparent,rgba(7,11,20,.9));
}
.ar-abbody{display:grid;grid-template-columns:246px 1fr;gap:44px;align-items:start}
.ar-abbody>*{min-width:0}
.ar-abnav{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.ar-abnav nav{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:10px}
.ar-abnav nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--ar-r);font-size:13.5px;font-weight:600;color:var(--ar-body)}
.ar-abnav nav a:hover{background:var(--ar-ice);color:var(--ar-cyan-d)}
.ar-abnav nav a i{color:var(--ar-cyan-d);font-size:13px;width:16px}
.ar-abblock{padding:0 0 44px;margin-bottom:44px;border-bottom:1px solid var(--ar-line)}
.ar-abblock:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ar-abblock>.ar-eyebrow{font-size:13px}
.ar-values{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.ar-value{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:24px}
.ar-value i{font-size:22px;color:var(--ar-cyan-d);display:block;margin-bottom:14px}
.ar-value h3{font-size:16px;margin:0 0 8px}
.ar-value p{font-size:13.5px;margin:0}
.ar-timeline{margin-top:20px;border-left:2px solid var(--ar-line);padding-left:24px;display:flex;flex-direction:column;gap:22px}
.ar-timeline li{position:relative}
.ar-timeline li::before{
content:"";position:absolute;left:-31px;top:7px;width:13px;height:13px;border-radius:50%;
background:var(--ar-cyan);border:3px solid var(--ar-ice);
}
.ar-timeline time{display:block;font-family:var(--ar-num);font-size:12.5px;letter-spacing:.1em;color:var(--ar-cyan-d);margin-bottom:5px}
.ar-timeline p{margin:0;font-size:14.5px}
.ar-markets{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}
.ar-market{background:#fff;border:1px solid var(--ar-line);border-top:3px solid var(--ar-cyan);border-radius:var(--ar-r);padding:24px}
.ar-market-flag{
display:inline-block;padding:4px 10px;border-radius:100px;background:var(--ar-ink);color:var(--ar-cyan);
font-family:var(--ar-num);font-size:11px;letter-spacing:.1em;margin-bottom:12px;
}
.ar-market h3{font-size:16px;margin:0 0 8px}
.ar-market p{font-size:13.5px;margin:0}
.ar-contact{background:var(--ar-ink);color:#C9D6EA;padding:56px 0}
.ar-contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.ar-contact-grid>*{min-width:0}
.ar-desk h1{color:#fff;margin:14px 0 14px}
.ar-desk .ar-lead{color:#A8B9D4}
.ar-desk-status{display:flex;align-items:center;gap:10px;font-family:var(--ar-num);font-size:12px;letter-spacing:.06em;color:#8DA2BF;margin:18px 0 24px}
.ar-dot{width:8px;height:8px;border-radius:50%;background:var(--ar-green);box-shadow:0 0 0 4px rgba(24,182,122,.2)}
.ar-channels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ar-channel{
display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--ar-lined);
border-radius:var(--ar-r);background:rgba(255,255,255,.03);
}
.ar-channel>*{min-width:0}
.ar-channel i{font-size:19px;color:var(--ar-cyan);margin-top:3px}
.ar-channel strong{display:block;font-family:var(--ar-head);text-transform:uppercase;font-size:13.5px;color:#fff}
.ar-channel span{display:block;font-size:13px;color:#93A7C4;word-break:break-word}
/* icon and title share the first row, the note runs full width underneath */
.ar-desk-regions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.ar-desk-regions>div{
border-top:2px solid var(--ar-cyan);padding-top:14px;
display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;
}
.ar-desk-regions>div>i{grid-column:1;grid-row:1;color:var(--ar-cyan)}
.ar-desk-regions>div>strong{grid-column:2;grid-row:1;margin:0}
.ar-desk-regions>div>small{grid-column:1/-1;grid-row:2;margin-top:7px}
.ar-desk-regions strong{display:block;color:#fff;font-family:var(--ar-head);text-transform:uppercase;font-size:13.5px;margin:8px 0 4px}
.ar-desk-regions small{font-size:12.5px;color:#8DA2BF}
.ar-contact .ar-formcard{background:#fff}
.ar-contact .ar-formcard-head h2{color:var(--ar-ink)}
.ar-helphero{background:var(--ar-ink);color:#C9D6EA;padding:52px 0 44px}
.ar-helphero h1{color:#fff;margin:14px 0 12px}
.ar-helphero p{font-size:15.5px;color:#93A7C4;max-width:70ch}
.ar-helpsearch{
display:flex;align-items:center;gap:12px;margin-top:26px;padding:8px 8px 8px 18px;
background:rgba(255,255,255,.06);border:1px solid var(--ar-lined);border-radius:var(--ar-r);max-width:640px;
}
.ar-helpsearch i{color:var(--ar-cyan)}
.ar-helpsearch input{flex:1 1 auto;min-width:0;background:transparent;border:0;color:#fff;padding:10px 4px;font-size:15px}
.ar-helpsearch input::placeholder{color:#6E82A2}
.ar-helpsearch-count{flex:0 0 auto;font-family:var(--ar-num);font-size:12px;color:#8DA2BF;padding-right:12px}
.ar-helpsearch-count b{color:var(--ar-cyan)}
.ar-topicchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.ar-topicchips button{
padding:8px 15px;border:1px solid var(--ar-lined);border-radius:100px;background:transparent;
color:#A8B9D4;font-size:13px;
}
.ar-topicchips button.active{border-color:var(--ar-cyan);background:rgba(35,211,238,.12);color:var(--ar-cyan)}
.ar-help{display:grid;grid-template-columns:1fr 330px;gap:36px;align-items:start}
.ar-help>*{min-width:0}
.ar-qa{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);overflow:hidden}
.ar-qa-item{border-bottom:1px solid var(--ar-line)}
.ar-qa-item:last-child{border-bottom:0}
.ar-qa-item summary{
display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;
}
.ar-qa-item summary::-webkit-details-marker{display:none}
.ar-qa-num{flex:0 0 auto;font-family:var(--ar-num);font-size:12px;color:var(--ar-cyan-d);letter-spacing:.08em}
.ar-qa-q{flex:1 1 auto;min-width:0;font-family:var(--ar-head);font-weight:800;text-transform:uppercase;font-size:15.5px;color:var(--ar-ink);line-height:1.35}
.ar-qa-item summary i{flex:0 0 auto;color:var(--ar-mute);font-size:12px}
.ar-qa-item[open] summary i{color:var(--ar-cyan-d);transform:rotate(180deg)}
.ar-qa-body{padding:0 22px 22px 62px;font-size:14.5px}
.ar-help-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.ar-catalogsplit,.ar-legalsplit{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start}
.ar-catalogsplit>*,.ar-legalsplit>*{min-width:0}
.ar-catlist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.ar-catlist a{
display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);
font-family:var(--ar-head);text-transform:uppercase;font-size:14.5px;color:var(--ar-ink);
}
.ar-catlist a:hover{border-color:var(--ar-cyan)}
/* 26. Search & tags
-------------------------------------------------------------------------- */
.ar-finder-head{background:var(--ar-ink);color:#C9D6EA;padding:48px 0 42px}
.ar-finder-head h1{color:#fff;margin:12px 0 20px}
.ar-finder-bar{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid var(--ar-lined);border-radius:var(--ar-r);padding:8px 8px 8px 16px;max-width:720px}
.ar-finder-bar i{color:var(--ar-cyan)}
.ar-finder-bar input{flex:1 1 auto;min-width:0;background:transparent;border:0;color:#fff;padding:11px 4px;font-size:15px}
.ar-finder-bar input::placeholder{color:#6E82A2}
.ar-finder-hints{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:18px;font-size:12.5px;color:#8DA2BF}
.ar-finder-hints a{padding:5px 11px;border:1px solid var(--ar-lined);border-radius:100px;color:#C9D6EA;font-size:12px}
.ar-finder{display:grid;grid-template-columns:266px 1fr;gap:34px;align-items:start}
.ar-finder>*{min-width:0}
.ar-finder-rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.ar-facet{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:20px}
.ar-facet h3{font-size:14px;margin:0 0 12px}
.ar-facet-link{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--ar-body);border-bottom:1px solid var(--ar-line)}
.ar-facet-link:last-child{border-bottom:0}
.ar-facet-link i{color:var(--ar-cyan-d);font-size:12px}
.ar-facet-link:hover{color:var(--ar-cyan-d)}
.ar-finder-summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 20px;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);margin-bottom:20px;font-size:14px}
.ar-finder-summary b{font-family:var(--ar-head);text-transform:uppercase;color:var(--ar-ink)}
.ar-finder-count{margin-left:auto;font-family:var(--ar-num);font-size:12.5px;background:var(--ar-ink);color:var(--ar-cyan);padding:4px 11px;border-radius:100px}
.ar-results{display:flex;flex-direction:column;gap:16px}
.ar-result{
display:grid;grid-template-columns:190px 1fr auto;gap:22px;align-items:center;
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:16px;
}
.ar-result>*{min-width:0}
.ar-result-media{display:block;aspect-ratio:4/3;background:var(--ar-ink);border-radius:var(--ar-r);overflow:hidden}
.ar-result-media img{width:100%;height:100%;object-fit:contain;padding:10px}
.ar-result-body{display:flex;flex-direction:column;gap:7px}
.ar-result-body h2{font-size:17px;margin:0;text-transform:none;letter-spacing:0;font-family:var(--ar-text);font-weight:700}
.ar-result-body p{font-size:13.5px;margin:0}
.ar-result-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ar-result-noimg{grid-template-columns:1fr auto}
.ar-result-noimg .ar-result-actions{align-items:flex-end}
.ar-taghead{background:var(--ar-ink);color:#C9D6EA;padding:44px 0 38px}
.ar-taghead h1{color:#fff;margin:12px 0 14px}
.ar-morelink-light{color:var(--ar-cyan)}
.ar-tagpage{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:start}
.ar-tagpage>*{min-width:0}
.ar-tagrail{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:22px;position:sticky;top:96px}
.ar-tagrail h3{font-size:14.5px;margin:0 0 14px}
.ar-tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.ar-tagcloud a{
padding:5px 11px;border-radius:100px;background:var(--ar-ice);font-size:12.5px;color:var(--ar-body);
}
.ar-tagcloud a:hover{background:var(--ar-ink);color:var(--ar-cyan)}
.ar-tagboard{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ar-tagboard a{
display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--ar-line);
background:#fff;border-radius:var(--ar-r);font-size:13.5px;color:var(--ar-body);
}
.ar-tagboard a i{color:var(--ar-cyan-d);font-size:11px}
.ar-tagboard a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
.ar-timeline-list{display:flex;flex-direction:column;gap:18px}
.ar-tl-item{display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:start}
.ar-tl-item>*{min-width:0}
.ar-tl-date{font-family:var(--ar-num);font-size:11.5px;color:var(--ar-mute);text-transform:uppercase;letter-spacing:.06em;border-right:2px solid var(--ar-line);padding-right:16px}
.ar-tl-card{display:grid;grid-template-columns:170px 1fr;gap:20px;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:14px}
.ar-tl-card>*{min-width:0}
.ar-tl-img{display:block;aspect-ratio:4/3;background:var(--ar-ink);border-radius:var(--ar-r);overflow:hidden}
.ar-tl-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.ar-tl-card h2{font-size:16.5px;margin:0 0 6px;text-transform:none;letter-spacing:0;font-family:var(--ar-text);font-weight:700}
.ar-tl-card p{font-size:13.5px;margin:0 0 8px}
/* 26b. Document library (catalogue & download pages)
-------------------------------------------------------------------------- */
.ar-library{display:grid;grid-template-columns:1fr 380px;gap:36px;align-items:start}
.ar-library>*{min-width:0}
.ar-library-form>*{min-width:0}
.ar-library-shelf{
display:grid;grid-template-columns:210px 1fr;gap:26px;align-items:start;
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:24px;
}
.ar-library-shelf>*{min-width:0}
.ar-shelf-cover{
position:relative;aspect-ratio:3/4;background:var(--ar-ink);border-radius:var(--ar-r);
overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.ar-shelf-cover img{width:100%;height:100%;object-fit:contain;padding:12px}
.ar-shelf-cover .ar-noimg{color:rgba(35,211,238,.28);font-size:34px}
.ar-shelf-tag{
position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:100px;background:rgba(35,211,238,.16);color:var(--ar-cyan);
font-family:var(--ar-num);font-size:11px;letter-spacing:.06em;
}
.ar-shelf-meta h2{font-size:21px;margin:8px 0 14px;text-transform:none;letter-spacing:0;font-family:var(--ar-head)}
.ar-shelf-facts{display:flex;flex-direction:column;gap:9px;margin:0 0 16px}
.ar-shelf-facts li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ar-body)}
.ar-shelf-facts li i{color:var(--ar-cyan-d);margin-top:4px;flex:0 0 auto}
.ar-docindex{margin-top:30px}
.ar-docindex h3{font-size:15px;margin:0 0 16px}
.ar-docindex-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ar-docrow{
display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);padding:18px 20px;
}
.ar-docrow i{font-size:18px;color:var(--ar-cyan-d);margin-top:3px}
.ar-docrow strong{display:block;font-family:var(--ar-head);text-transform:uppercase;font-size:14px;color:var(--ar-ink);line-height:1.3}
.ar-docrow span{display:block;font-size:13px;color:var(--ar-body);margin-top:5px}
.ar-docrow small{font-family:var(--ar-num);font-size:11px;color:var(--ar-mute);letter-spacing:.06em;white-space:nowrap}
/* 26c. Legal documents (privacy / terms)
-------------------------------------------------------------------------- */
.ar-legalsummary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.ar-legalsum{
background:#fff;border:1px solid var(--ar-line);border-top:3px solid var(--ar-cyan);
border-radius:var(--ar-r);padding:22px;
}
.ar-legalsum i{font-size:20px;color:var(--ar-cyan-d);display:block;margin-bottom:12px}
.ar-legalsum strong{display:block;font-family:var(--ar-head);text-transform:uppercase;font-size:14.5px;color:var(--ar-ink);margin-bottom:8px}
.ar-legalsum span{display:block;font-size:13.5px;color:var(--ar-body)}
.ar-legaltoc{
background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-r);
padding:22px;position:sticky;top:96px;
}
.ar-legaltoc h3{font-size:14.5px;margin:0 0 14px;display:flex;gap:9px;align-items:center}
.ar-legaltoc h3 i{color:var(--ar-cyan-d)}
.ar-toc{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto}
.ar-toc a{display:flex;gap:10px;align-items:flex-start;padding:7px 9px;border-radius:var(--ar-r);font-size:13px;color:var(--ar-body)}
.ar-toc a:hover{background:var(--ar-ice)}
.ar-toc a.on{background:var(--ar-ink);color:var(--ar-cyan)}
.ar-toc a b{font-family:var(--ar-num);font-size:11.5px;color:var(--ar-cyan-d);flex:0 0 auto;padding-top:1px}
.ar-toc a.on b{color:var(--ar-cyan)}
.ar-toc a.ar-toc-sub{padding-left:31px;font-size:12.5px;color:var(--ar-mute)}
.ar-legallinks{
margin-top:18px;padding-top:16px;border-top:1px solid var(--ar-line);
display:flex;flex-direction:column;gap:2px;
}
.ar-legallinks a{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:13px;color:var(--ar-body);border-bottom:1px solid var(--ar-line)}
.ar-legallinks a:last-child{border-bottom:0}
.ar-legallinks a i{color:var(--ar-cyan-d);font-size:12px}
.ar-legallinks a:hover{color:var(--ar-cyan-d)}
.ar-legaldoc{min-width:0}
.ar-pagehead-legal{background:var(--ar-ice);color:var(--ar-body);border-bottom:1px solid var(--ar-line)}
.ar-pagehead-legal h1{color:var(--ar-ink)}
.ar-pagehead-legal p{font-size:15.5px;color:var(--ar-body);max-width:76ch;margin:0}
.ar-pagehead-legal .ar-crumb{margin-bottom:16px}
.ar-pagehead-legal .ar-chip{margin-bottom:12px}
/* 27. Pagination (required by P0 validator)
--------------------------------------------------------------------------
pagelist wraps every item as …. The visual box therefore
belongs to the inner only — styling the wrapper as well put a box
inside a box (the doubled border on the current page). */
.pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:34px 0 0}
.pagination>span{display:inline-flex}
.pagination a{
min-width:42px;height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--ar-line);border-radius:var(--ar-r);background:#fff;
font-family:var(--ar-num);font-size:13.5px;color:var(--ar-body);
}
.pagination a:hover{border-color:var(--ar-cyan);color:var(--ar-cyan-d)}
.pagination i.iconfont{font-style:normal;line-height:1}
.pagination i.icon-arrow5::before{content:"\2039";font-size:18px}
.pagination i.icon-arrow6::before{content:"\203A";font-size:18px}
/* current page */
.pagination span.active a{border-color:var(--ar-cyan);background:var(--ar-ink);color:#fff}
.pagination a:focus-visible{outline:2px solid var(--ar-cyan);outline-offset:2px}
/* 28. Rich text content & responsive tables (required by P0 validator)
-------------------------------------------------------------------------- */
.detail-content{font-size:15px;color:var(--ar-body);min-width:0}
.detail-content>*{min-width:0}
.detail-content h2,.detail-content h3,.detail-content h4{margin:26px 0 12px}
.detail-content h2{font-size:23px}
.detail-content h3{font-size:19px}
.detail-content p{margin:0 0 15px}
.detail-content ul,.detail-content ol{margin:0 0 16px;padding-left:22px;list-style:disc}
.detail-content ol{list-style:decimal}
.detail-content li{margin-bottom:8px}
.detail-content img{border-radius:var(--ar-r);margin:16px 0}
.detail-content a{color:var(--ar-cyan-d);text-decoration:underline}
.detail-content blockquote{
margin:22px 0;padding:18px 22px;border-left:4px solid var(--ar-cyan);
background:#fff;border-radius:var(--ar-r);font-size:15px;
}
.detail-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;width:100%;font-size:14px;margin:18px 0}
.detail-content table th,.detail-content table td{border:1px solid var(--ar-line);padding:11px 13px;text-align:left;background:#fff}
.detail-content table th{background:#F3F8FE;font-family:var(--ar-head);text-transform:uppercase;font-size:12.5px;color:var(--ar-ink)}
.detail-content table tr:nth-child(even) td{background:#FAFCFF}
.tablewrap{position:relative}
.tablewrap-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.tablewrap.is-scrollable .tablewrap-scroll{box-shadow:inset -18px 0 18px -18px rgba(7,11,20,.35)}
.tablewrap-hint{
display:none;font-family:var(--ar-num);font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ar-mute);margin-top:8px;
}
.tablewrap.is-scrollable .tablewrap-hint{display:block}
.tablewrap.at-end .tablewrap-hint{display:none}
/* 29. Split-column min-width guards (wide tables must not blow out columns)
-------------------------------------------------------------------------- */
.ar-catalog>*,.ar-pdp>*,.ar-pdp-detail>*,.ar-quotepage>*,.ar-contact-grid>*,.ar-catalogsplit>*,
.ar-legalsplit>*,.ar-faqcta>*,.ar-help>*,.ar-finder>*,.ar-tagpage>*,.ar-read>*,.ar-case>*,
.ar-abbody>*,.ar-split>*,.ar-feed>*,.ar-story>*,.ar-lead-story>*,.ar-solrow>*,.ar-chan>*,
.ar-hero-in>*,.ar-play-in>*,.ar-abhero-in>*,.ar-tl-item>*,.ar-tl-card>*,.ar-result>*,
.ar-qrow>*,.ar-ledger-row>*,.ar-pagehead-in>*,.ar-form-2>*,.ar-ticker-in>*,.ar-brandrow>*,
.ar-headrow>*,.ar-band>*,.ar-foot-main>*,.ar-foot-strip-in>*, .detail-content{min-width:0}
/* 30. Reveal animation
-------------------------------------------------------------------------- */
.ar-reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.ar-reveal.ar-in{opacity:1;transform:none}
/* 31. Responsive — <=1100px
-------------------------------------------------------------------------- */
@media (max-width:1100px){
.ar-nav>a,.ar-navitem>a{padding:10px 7px;font-size:12.5px}
.ar-plist{grid-template-columns:repeat(2,1fr)}
.ar-tiles{grid-template-columns:repeat(3,1fr)}
.ar-foot-main{grid-template-columns:1fr 1fr 1fr;row-gap:34px}
.ar-shift{grid-template-columns:repeat(2,1fr)}
.ar-docs{grid-template-columns:repeat(2,1fr)}
.ar-related{grid-template-columns:repeat(3,1fr)}
.ar-read{grid-template-columns:52px 1fr;}
.ar-read-side{display:none}
.ar-certs{grid-template-columns:repeat(2,1fr)}
.ar-library{grid-template-columns:1fr 330px}
.ar-docindex-list{grid-template-columns:repeat(2,1fr)}
.ar-legalsummary{grid-template-columns:1fr 1fr}
}
/* 32. Responsive — <=900px
-------------------------------------------------------------------------- */
@media (max-width:900px){
body{font-size:15.5px}
.ar-wrap{width:auto;margin:0 20px}
.ar-sec{padding:62px 0}
.ar-sec-sm{padding:44px 0}
.ar-headrow{flex-direction:column;align-items:flex-start;gap:16px}
.ar-split,.ar-hero-in,.ar-play-in,.ar-abhero-in,.ar-feed,.ar-faqcta,.ar-contact-grid,.ar-quotepage,
.ar-catalog,.ar-abbody,.ar-help,.ar-finder,.ar-tagpage,.ar-case,.ar-pdp{grid-template-columns:1fr;gap:32px}
.ar-nav{display:none}
.ar-burger{display:flex;align-items:center;justify-content:center;flex-direction:column;
width:40px;height:40px;flex:0 0 auto;background:transparent;border:1px solid var(--ar-lined);
border-radius:var(--ar-r)}
.ar-brandrow{min-height:66px;gap:12px}
.ar-logo{min-width:0}
.ar-logo img{height:32px}
.ar-headtools{gap:8px}
.ar-quotelink span{display:none}
.ar-searchwrap.on{max-width:none;flex:1 1 100%}
.ar-strip-in{grid-template-columns:1fr 1fr}
.ar-tiles{grid-template-columns:1fr 1fr}
.ar-tile-wide{grid-column:span 2}
.ar-shift{grid-template-columns:1fr}
.ar-docs{grid-template-columns:1fr}
.ar-chans{grid-template-columns:1fr}
.ar-chan{grid-template-columns:120px 1fr auto;gap:16px}
.ar-play-grid{grid-template-columns:1fr 1fr}
.ar-selector{grid-template-columns:1fr 1fr}
.ar-plist,.ar-plist.ar-view-list{grid-template-columns:1fr}
.ar-view-list .ar-pcard{grid-template-columns:1fr}
.ar-view-list .ar-pcard-media{aspect-ratio:4/3;min-height:0}
.ar-related{grid-template-columns:1fr 1fr}
.ar-certs{grid-template-columns:1fr}
.ar-values,.ar-markets,.ar-channels,.ar-desk-regions,.ar-play-grid,.ar-catlist{grid-template-columns:1fr}
.ar-casefacts,.ar-selector{grid-template-columns:1fr}
.ar-abhero-kpis{grid-template-columns:1fr 1fr}
.ar-solrow,.ar-lead-story,.ar-story,.ar-tl-card,.ar-tl-item{grid-template-columns:1fr}
.ar-tl-date{border-right:0;border-left:2px solid var(--ar-cyan);padding:0 0 0 12px;margin-bottom:12px}
.ar-solrow-media{min-height:210px}
.ar-solrow-num{left:16px;top:14px}
.ar-ledger-row{grid-template-columns:1fr;gap:8px}
.ar-ledger-head{display:none}
.ar-side,.ar-finder-rail,.ar-tagrail,.ar-abnav,.ar-help-side,.ar-formcard,.ar-gallery,.ar-read-rail,.ar-read-side,.ar-legaltoc{position:static}
.ar-library,.ar-catalogsplit,.ar-legalsplit{grid-template-columns:1fr;gap:32px}
.ar-library-shelf{grid-template-columns:170px 1fr;gap:20px}
.ar-docindex-list{grid-template-columns:1fr 1fr}
.ar-legaltoc{padding:18px}
.ar-toc{max-height:none}
.ar-read{grid-template-columns:1fr}
.ar-read-rail{flex-direction:row;flex-wrap:wrap;writing-mode:horizontal-tb;justify-content:flex-start}
.ar-read-rail-label{writing-mode:horizontal-tb}
.ar-gallery{flex-direction:column}
.ar-pagehead-in{grid-template-columns:1fr;gap:24px;align-items:start}
.ar-foot-main{grid-template-columns:1fr 1fr}
.ar-foot-strip-in{grid-template-columns:1fr 1fr}
.ar-steps li{font-size:12.5px;padding:9px 14px}
.ar-toolbar{flex-direction:column;align-items:flex-start;gap:12px}
.ar-toolbar>*{width:100%}
.ar-viewtoggle{align-self:flex-start;width:auto}
.ar-tabs-nav{overflow-x:auto;flex-wrap:nowrap}
.ar-tabs-nav button{white-space:nowrap}
.ar-qhead{display:none}
.ar-qrow{grid-template-columns:70px 1fr auto;grid-template-areas:"img title remove" "img qty qty";gap:12px}
.ar-qrow .ar-qrow-img{grid-area:img}
.ar-qrow h3{grid-area:title}
.ar-qrow .ar-qty{grid-area:qty;justify-self:start;align-self:center}
.ar-qrow .ar-qremove{grid-area:remove;justify-self:end;align-self:center}
.ar-qrow img{width:70px;height:56px}
.ar-cookie{grid-template-columns:1fr;gap:14px}
.ar-cookie-actions{justify-content:flex-start}
.ar-panel{width:100%;border-left:0;border-top:5px solid var(--ar-cyan);padding:26px 20px 40px}
.ar-prex{display:none}
.ar-result{grid-template-columns:130px 1fr;gap:16px}
.ar-result-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center}
.ar-result-noimg{grid-template-columns:1fr}
.ar-abhero-media img{aspect-ratio:16/9}
.ar-casecard{padding:30px 24px;margin-bottom:-26px}
.ar-footer-news form{flex-wrap:wrap}
}
/* 33. Responsive — <=600px
-------------------------------------------------------------------------- */
@media (max-width:600px){
h1{font-size:clamp(26px,8vw,34px)}
h2{font-size:clamp(21px,6.4vw,27px)}
.ar-sec{padding:48px 0}
.ar-sec-sm{padding:36px 0}
.ar-wrap{width:auto;margin:0 16px}
.ar-hero{padding-top:48px}
.ar-hero-actions .ar-btn{width:100%}
.ar-rink{height:96px}
.ar-rink-circle{width:120px;height:120px}
.ar-rink-crease{width:74px;height:110px}
.ar-rink-crease-l{left:-37px}
.ar-rink-crease-r{right:-37px}
.ar-score{padding:20px}
.ar-score-grid{grid-template-columns:1fr 1fr}
.ar-score-cell{padding:14px 12px}
.ar-score-cell b{font-size:21px}
.ar-strip-in{grid-template-columns:1fr}
.ar-tiles{grid-template-columns:1fr}
.ar-tile-wide{grid-column:span 1}
.ar-tile{min-height:196px}
.ar-plist{grid-template-columns:1fr}
.ar-related{grid-template-columns:1fr}
.ar-abhero-kpis,.ar-desk-regions,.ar-channels,.ar-play-grid,.ar-casefacts,.ar-selector,.ar-catlist{grid-template-columns:1fr}
.ar-foot-main,.ar-foot-strip-in{grid-template-columns:1fr}
.ar-foot-base-in{flex-direction:column;align-items:flex-start}
.ar-band{flex-direction:column;align-items:flex-start;padding:22px}
.ar-band .ar-btn{width:100%}
.ar-chan{grid-template-columns:96px 1fr;gap:14px}
.ar-chan>i{display:none}
.ar-qa-body{padding:0 18px 20px 18px}
.ar-qa-item summary{padding:16px 18px;gap:11px}
.ar-qa-q{font-size:14px}
.ar-helpsearch{flex-wrap:wrap;padding:10px 12px}
.ar-helpsearch-count{padding-right:0}
.ar-form-2{grid-template-columns:1fr}
.ar-form-vertify{grid-template-columns:1fr}
.ar-result{grid-template-columns:1fr}
.ar-result-media{aspect-ratio:16/9}
.ar-tl-card{grid-template-columns:1fr}
.ar-pdp-actions .ar-btn,.ar-stickybar-in>div .ar-btn{width:100%}
.ar-stickybar-in{flex-direction:column;align-items:stretch;gap:10px;padding:12px 0}
.ar-stickybar-in strong{font-size:13px}
.ar-pdp-share{flex-wrap:wrap}
.ar-gallery-thumbs button{flex:0 0 70px;width:70px;height:56px}
.ar-ledger-row,.ar-abblock{padding-left:0;padding-right:0}
.ar-legalsummary,.ar-docindex-list{grid-template-columns:1fr}
.ar-library-shelf{grid-template-columns:1fr}
.ar-shelf-cover{aspect-ratio:16/9}
.ar-toc a{font-size:12.5px;padding:7px 8px}
.ar-docrow{grid-template-columns:auto 1fr;gap:12px}
.ar-docrow small{grid-column:2;white-space:normal}
.ar-docrow{padding:16px}
.ar-timeline{padding-left:18px}
.ar-timeline li::before{left:-25px}
/* stacked tables: card layout with data-label headers */
.detail-content table.table-stack{display:block;border:0;overflow:visible}
.detail-content table.table-stack thead{display:none}
.detail-content table.table-stack tr{
display:block;border:1px solid var(--ar-line);border-radius:var(--ar-r);
margin-bottom:14px;background:#fff;overflow:hidden;
}
.detail-content table.table-stack td{
display:block;width:auto;white-space:normal;border:0;border-bottom:1px solid var(--ar-line);
padding:11px 14px;background:transparent;
}
.detail-content table.table-stack tr td:last-child{border-bottom:0}
.detail-content table.table-stack td::before{
content:attr(data-label);display:block;
font-family:var(--ar-head);text-transform:uppercase;font-size:11.5px;
letter-spacing:.06em;color:var(--ar-mute);margin-bottom:4px;
}
.detail-content table.table-stack td:first-child{
background:#F3F8FE;font-family:var(--ar-head);text-transform:uppercase;
font-size:14px;color:var(--ar-ink);
}
.detail-content table.table-stack td:first-child::before{display:none}
.detail-content table td,.detail-content table th{white-space:nowrap;font-size:13.5px;padding:9px 12px}
.tablewrap-hint{font-size:10.5px}
}
/* 34. Fixed mobile inquiry bar + safe area
-------------------------------------------------------------------------- */
@media (max-width:900px){
.mobile-inquiry-bar{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
position:fixed;left:0;right:0;bottom:0;z-index:950;
background:rgba(7,11,20,.98);border-top:1px solid var(--ar-lined);
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.mib-btn{
display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;
border-radius:var(--ar-r);font-family:var(--ar-head);font-weight:800;font-size:13px;
text-transform:uppercase;letter-spacing:.04em;min-width:0;
}
.mib-quote{background:var(--ar-cyan);color:var(--ar-ink)}
.mib-wa{background:transparent;border:1px solid var(--ar-lined);color:#fff}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.back-to-top{bottom:84px;right:14px;width:48px;height:48px;font-size:22px}
.wa-float{bottom:148px;right:14px;width:48px;height:48px}
.toast-notify{bottom:calc(90px + env(safe-area-inset-bottom))}
}
/* 35. Motion preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
.ar-reveal{opacity:1;transform:none}
}
/* 36. Narrow-screen label guard — long labels must never force page scroll
--------------------------------------------------------------------------
`.ar-btn` is nowrap by design on wide screens, and article pager links carry a
full editorial title. Below 900px a long translated label (de "Angebot anfordern")
or a long headline overflowed its container and pushed the whole document wide.
Caught by the 390px overflow QA on /de/ (CTA panel), /single/manufacturing/
(inline links) and the article "next" pager. Wrap instead of overflowing. */
.ar-btn,.pager-link{max-width:100%}
.ar-cta-panel,.ar-inline-links,.ar-pager-cell{min-width:0}
@media (max-width:900px){
.ar-btn,.pager-link{white-space:normal;overflow-wrap:anywhere}
.ar-btn{text-align:center}
.pager-link{flex-wrap:wrap}
}
/* 37. Long-compound word guard — one word must never force page scroll
--------------------------------------------------------------------------
Section 29 gives these flex/grid items `min-width:0`, but a *column* flex
container with `align-items:flex-start` still sizes each item from its
intrinsic min-content width. A single long uppercase compound is itself wider
than the 390px content box, so the item grows past the wrap instead of
wrapping. Two live cases on the German site, both caught by the 390px sweep:
- /de/ headline "Produktkontrollen & Papierkram"
-> h2 box grew to 364px (wrap is 343px)
- /de/single/manufacturing/ h1 "…vom Schaltschrankelement…"; the word
"SCHALTSCHRANKELEMENT" renders ~472px wide on a
343px box -> 113px of page overflow (the tail of
the headline was being clipped, not just scrolled)
`overflow-wrap:anywhere` also lowers min-content, which is what lets the
intrinsically-sized item stay inside its container; `word-break:break-word`
is kept as the legacy WebKit fallback. The max-width clamp is the belt-and-
braces net for any other intrinsically-sized row in section 29. */
h1,h2,h3,h4,h5,h6{overflow-wrap:anywhere;word-break:break-word}
.ar-headrow>*,.ar-pagehead-in>*,.ar-qrow>*,.ar-ledger-row>*,.ar-band>*,.ar-foot-main>*,
.ar-foot-strip-in>*,.ar-form-2>*,.ar-brandrow>*,.ar-ticker-in>*{max-width:100%}
.ar-pagehead h1,.ar-pagehead p,.ar-lead,.ar-card-body h3,.ar-card-body h3 a,.ar-quotetile h3,
.detail-content h1,.detail-content h2,.detail-content h3,.detail-content p,.detail-content li,
.detail-content td{overflow-wrap:break-word}
/* 38. Nav mega-panel hover bridge — the 10px gap must not close the panel
--------------------------------------------------------------------------
Section 6 puts the panel at `top:calc(100% + 10px)`, so those 10px belong to
neither `.ar-navitem` nor `.ar-mega`. Crossing them leaves the hover target,
`:hover` is dropped and the panel hides — the "the submenu closes just as I
move towards it, though it works if I move fast" report. A quick flick jumps
the whole strip inside one frame; a slow move does not.
Fix: a transparent bridge on the item that spans the gap. It is rendered only
while the item is hovered, so an idle nav item keeps exactly the hover surface
it had before; once the pointer is on the bridge the item stays hovered and the
bridge keeps rendering, so the state is stable in both directions. The measured
gap on this build is 11px (navitem bottom y=100, panel top y=111). The bridge is
sized to the panel's own `min-width` (300px) so it never reaches further right
than the panel already does and adds no horizontal overflow of its own.
`.ar-navitem` is `position:relative` and a pseudo-element counts as part of its
hit area, so this needs no JS and no markup change. Below 900px
`.ar-nav{display:none}` hides the bridge with it. */
.ar-navitem::after{
content:"";display:none;position:absolute;left:0;top:100%;
width:100%;min-width:300px;height:12px;
}
.ar-navitem:hover::after,.ar-navitem:focus-within::after{display:block}