/* REFTHE alarm archive: photographic technical header and restrained route tabs. */
body>header{
  position:relative;
  overflow:hidden;
  min-height:370px;
  border-bottom:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 28%,rgba(255,255,255,.36) 58%,rgba(255,255,255,.08) 100%),
    url("alarm-page-header-v1.webp") 66% 50%/cover no-repeat;
  box-shadow:0 18px 42px rgba(10,50,55,.10);
}
body>header::after{
  content:"";
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:#ef6a32;
}
body>header .top{
  position:relative;
  z-index:3;
  min-height:370px;
  padding:38px 0 34px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:24px;
}
body>header .brand{
  width:max-content;
  padding:14px 18px 12px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:12px;
  background:rgba(255,255,255,.80);
  box-shadow:0 10px 28px rgba(17,50,54,.09),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
body>header .brand img{width:196px;height:auto}
body>header .brand small{font-weight:650;letter-spacing:.075em;color:#40575a}
body>header nav{
  position:absolute;
  z-index:3;
  bottom:-4px;
  left:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  width:min(780px,68vw);
  gap:14px;
  margin:0;
}
body>header nav a[data-path-tone]{
  position:relative;
  isolation:isolate;
  min-width:142px;
  min-height:116px;
  justify-content:center;
  padding:28px 10px 24px!important;
  border:2px solid var(--way)!important;
  border-bottom-width:3px!important;
  border-radius:11px 11px 2px 2px!important;
  background:#fbfcfd!important;
  background-image:none!important;
  color:#162d32!important;
  box-shadow:0 8px 18px rgba(16,47,56,.13)!important;
  font-size:14px;
  font-weight:760!important;
  line-height:1.12;
  text-decoration:none!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
}
body>header nav a[data-path-tone]::before{
  display:none!important;
}
body>header nav a[data-path-tone]::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:calc(50% - 25px);
  bottom:-22px;
  width:50px;
  height:25px;
  background:#fbfcfd;
  clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%);
  filter:drop-shadow(1px 0 var(--way)) drop-shadow(-1px 0 var(--way)) drop-shadow(0 2px var(--way)) drop-shadow(0 5px 4px rgba(16,47,56,.11));
}
body>header nav a[data-path-tone]:hover,
body>header nav a[data-path-tone]:focus-visible{
  border-color:var(--way)!important;
  background:#fbfcfd!important;
  background-image:none!important;
  color:#162d32!important;
  box-shadow:0 8px 18px rgba(16,47,56,.13)!important;
  text-decoration:none!important;
  transform:translateY(-8px);
}
body>header nav a[data-path-tone][aria-current="page"]::after{
  background:#fbfcfd;
}
body>header nav a[data-path-tone][aria-current="page"]{box-shadow:inset 0 -5px 0 var(--way),0 8px 18px rgba(16,47,56,.13)!important}
@media(max-width:850px){
  body>header{min-height:390px;background-position:61% 50%}
  body>header .top{min-height:390px;padding-top:28px}
  body>header nav{position:static;grid-template-columns:repeat(2,minmax(150px,1fr));width:min(100%,430px);margin-top:auto;padding-bottom:5px;gap:9px}
  body>header nav a[data-path-tone]{min-width:0;min-height:76px;padding:20px 10px 15px!important}
  body>header nav a[data-path-tone]::after{display:none}
}
@media(max-width:520px){
  body>header{min-height:430px;background-position:64% 50%}
  body>header .top{min-height:430px;padding:24px 0 28px;gap:18px}
  body>header .brand{padding:10px 13px}
  body>header .brand img{width:170px}
  body>header nav{grid-template-columns:1fr 1fr;gap:9px;width:100%}
  body>header nav a[data-path-tone]{min-height:70px;padding:18px 8px 12px!important;font-size:13px}
}
@media(prefers-reduced-motion:reduce){body>header nav a[data-path-tone]{transition:none!important}body>header nav a[data-path-tone]:hover{transform:none}}

@media(max-width:700px){
  body>header{background-image:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 28%,rgba(255,255,255,.36) 58%,rgba(255,255,255,.08) 100%),url("alarm-page-header-v1-mobile.webp")}
}