/*
Theme Name: detectronic-website-static (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */

/* CSS Variables */
:root {
}

/* Inline Styles */

/* Extracted CSS from page */
:root {
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility 1.1s linear;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
.wp-block-group {
  margin-bottom: 1rem;
}
.wp-block-image {
  margin-bottom: 1rem;
}
.wp-block-button {
  margin-bottom: 1rem;
}
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}
.container {
  max-width: none !important;
}
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: 30s linear 0s infinite normal none running wpconvert-marquee;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50%);
  }
}
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: auto ease 0s 1 normal none running none;
    overflow-x: auto;
  }
}
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: 5s ease-in-out 0s infinite normal none running wpconvert-float-1;
}
.wpconvert-float-2 {
  animation: 6s ease-in-out 0.5s infinite normal none running wpconvert-float-2;
}
.wpconvert-float-3 {
  animation: 5.5s ease-in-out 1s infinite normal none running wpconvert-float-3;
}
.wpconvert-float-4 {
  animation: 6.5s ease-in-out 1.5s infinite normal none running
    wpconvert-float-4;
}
.wpconvert-pulse {
  animation: 4s ease-in-out 0s infinite normal none running wpconvert-pulse;
}
.wpconvert-float-tilt {
  animation: 6s ease-in-out 0s infinite normal none running wpconvert-float-tilt;
}
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: auto ease 0s 1 normal none running none;
  }
}
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0px auto;
}
.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}
.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: 0.3s;
}
.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}
.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}
.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}
.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}
.wpconvert-tab-content {
  flex: 1 1 0%;
  position: relative;
}
.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: 0.3s ease 0s 1 normal none running wpconvert-tab-fade-in;
}
.wpconvert-tab-panel.active {
  display: block;
}
@keyframes wpconvert-tab-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0px auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}
.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}
.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0px auto 1.5rem;
}
.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;
  z-index: 10;
}
.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.wpconvert-tab-prev {
  left: -1rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}
.wpconvert-tab-next {
  right: -1rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}
.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  cursor: pointer;
  transition: 0.3s;
}
.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}
.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: 0.25s ease 0s 1 normal none running wpconvert-step-fade-in;
}
@keyframes wpconvert-step-fade-in {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: rgb(255, 255, 255);
  cursor: crosshair;
  touch-action: none;
}
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}
.entry-content > :first-child,
.site-content > :first-child {
  margin-top: 0px !important;
}
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: rgb(2, 8, 23);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: rgb(2, 8, 23);
}
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  margin: 0px;
  list-style: none !important;
}
@media (min-width: 768px) {
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-flow: row !important;
    list-style: none !important;
    margin: 0px !important;
    padding: 0px !important;
    align-items: center !important;
  }
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    display: flex !important;
    list-style: none !important;
    margin: 0px !important;
    padding: 0px !important;
    align-items: center !important;
    flex-flow: row !important;
  }
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}
#wpconvert-primary-ul > .menu-item > a {
}
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0px !important;
  z-index: 9999 !important;
  list-style: none !important;
  margin: 0px !important;
}
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
  padding: 0.5rem 0px;
  border: 1px solid rgb(229, 231, 235);
  border-radius: 0.375rem;
}
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}
.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}
.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}
.wpconvert-active-link {
  font-weight: 600;
}
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
}
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0px;
  background: white;
  min-width: 200px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
  border-radius: 0.375rem;
  padding: 0.5rem 0px;
  display: none;
  z-index: 9999;
}
.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  break-inside: avoid;
  white-space: normal !important;
}
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 768px) {
  .container {
    padding: 0px 1rem;
  }
  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important;
}
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0px !important;
}
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0px !important;
  right: 0px !important;
}
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}
.site-main {
  margin-top: 0px;
  padding-top: 0px;
  min-height: 60vh;
}
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0px;
}
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}
.site-footer {
  margin-top: auto;
}
body {
  line-height: 1.6;
}
body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
.container {
  max-width: 1200px;
  margin: 0px auto;
  padding-left: 20px;
  padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0px;
}
:where(button, .btn) {
  cursor: pointer;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  transition: 0.3s;
}
button[aria-expanded] {
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

:root {
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility 1.1s linear;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}
.wp-block-group {
  margin-bottom: 1rem;
}
.wp-block-image {
  margin-bottom: 1rem;
}
.wp-block-button {
  margin-bottom: 1rem;
}
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}
.container {
  max-width: none !important;
}
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: 30s linear 0s infinite normal none running wpconvert-marquee;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50%);
  }
}
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: auto ease 0s 1 normal none running none;
    overflow-x: auto;
  }
}
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: 5s ease-in-out 0s infinite normal none running wpconvert-float-1;
}
.wpconvert-float-2 {
  animation: 6s ease-in-out 0.5s infinite normal none running wpconvert-float-2;
}
.wpconvert-float-3 {
  animation: 5.5s ease-in-out 1s infinite normal none running wpconvert-float-3;
}
.wpconvert-float-4 {
  animation: 6.5s ease-in-out 1.5s infinite normal none running
    wpconvert-float-4;
}
.wpconvert-pulse {
  animation: 4s ease-in-out 0s infinite normal none running wpconvert-pulse;
}
.wpconvert-float-tilt {
  animation: 6s ease-in-out 0s infinite normal none running wpconvert-float-tilt;
}
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: auto ease 0s 1 normal none running none;
  }
}
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0px auto;
}
.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}
.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: 0.3s;
}
.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}
.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}
.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}
.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}
.wpconvert-tab-content {
  flex: 1 1 0%;
  position: relative;
}
.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: 0.3s ease 0s 1 normal none running wpconvert-tab-fade-in;
}
.wpconvert-tab-panel.active {
  display: block;
}
@keyframes wpconvert-tab-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0px auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}
.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}
.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0px auto 1.5rem;
}
.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;
  z-index: 10;
}
.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.wpconvert-tab-prev {
  left: -1rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}
.wpconvert-tab-next {
  right: -1rem;
}
@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}
.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  cursor: pointer;
  transition: 0.3s;
}
.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}
.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: 0.25s ease 0s 1 normal none running wpconvert-step-fade-in;
}
@keyframes wpconvert-step-fade-in {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: rgb(255, 255, 255);
  cursor: crosshair;
  touch-action: none;
}
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}
.entry-content > :first-child,
.site-content > :first-child {
  margin-top: 0px !important;
}
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: rgb(2, 8, 23);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: rgb(2, 8, 23);
}
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  margin: 0px;
  list-style: none !important;
}
@media (min-width: 768px) {
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-flow: row !important;
    list-style: none !important;
    margin: 0px !important;
    padding: 0px !important;
    align-items: center !important;
  }
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    display: flex !important;
    list-style: none !important;
    margin: 0px !important;
    padding: 0px !important;
    align-items: center !important;
    flex-flow: row !important;
  }
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}
#wpconvert-primary-ul > .menu-item > a {
}
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0px !important;
  z-index: 9999 !important;
  list-style: none !important;
  margin: 0px !important;
}
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
  padding: 0.5rem 0px;
  border: 1px solid rgb(229, 231, 235);
  border-radius: 0.375rem;
}
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}
.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}
.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}
.wpconvert-active-link {
  font-weight: 600;
}
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
}
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0px;
  background: white;
  min-width: 200px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
  border-radius: 0.375rem;
  padding: 0.5rem 0px;
  display: none;
  z-index: 9999;
}
.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  break-inside: avoid;
  white-space: normal !important;
}
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 768px) {
  .container {
    padding: 0px 1rem;
  }
  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important;
}
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0px !important;
}
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0px !important;
  right: 0px !important;
}
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}
.site-main {
  margin-top: 0px;
  padding-top: 0px;
  min-height: 60vh;
}
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0px;
}
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}
.site-footer {
  margin-top: auto;
}
body {
  line-height: 1.6;
}
body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
.container {
  max-width: 1200px;
  margin: 0px auto;
  padding-left: 20px;
  padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0px;
}
:where(button, .btn) {
  cursor: pointer;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  transition: 0.3s;
}
button[aria-expanded] {
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

.dt-hdr {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --signal: #0072ce;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --r: 12px;
}
.dt-hdr .wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.dt-hdr .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.dt-hdr .skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.dt-hdr .skip:focus {
  left: 8px;
  top: 8px;
}
.dt-hdr .mono,
.dt-hdr .eyebrow,
.dt-hdr .spec td:not(:first-child),
.dt-hdr .spec th:not(:first-child),
.dt-hdr .tel,
.dt-hdr .val {
  font-family: var(--mono);
}
.dt-hdr .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.dt-hdr .eyebrow--sig {
  color: var(--signal);
}
.dt-hdr .top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.dt-hdr .top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.dt-hdr .top__nav {
  display: flex;
  flex-wrap: wrap;
}
.dt-hdr .top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.dt-hdr .top__nav a:first-child {
  padding-left: 0px;
}
.dt-hdr .top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.dt-hdr .top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.dt-hdr .top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.dt-hdr .top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.dt-hdr .top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.dt-hdr .top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.dt-hdr .top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dt-hdr .top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.dt-hdr .top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .dt-hdr .top__mail {
    display: none;
  }
}
.dt-hdr .top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.dt-hdr .top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.dt-hdr .top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.dt-hdr .top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .dt-hdr .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .dt-hdr .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .dt-hdr .top__nav a {
    padding: 8px 6px;
  }
  .dt-hdr .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.dt-hdr .head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.dt-hdr .head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.dt-hdr .brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.dt-hdr .brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .dt-hdr .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .dt-hdr .brand img {
    height: 17px;
  }
}
.dt-hdr .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.dt-hdr .nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dt-hdr .nav__btn:hover,
.dt-hdr .nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.dt-hdr .chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.dt-hdr .nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.dt-hdr .nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.dt-hdr .nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.dt-hdr .searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.dt-hdr .searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.dt-hdr .navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.dt-hdr .mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running dtHdrMegaIn;
}
@keyframes dtHdrMegaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dt-hdr .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.dt-hdr .mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.dt-hdr .mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.dt-hdr .mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.dt-hdr .mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.dt-hdr .mega__h:hover {
  color: var(--blue);
}
.dt-hdr .mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.dt-hdr .mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.dt-hdr .mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.dt-hdr .mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dt-hdr .mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.dt-hdr .mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.dt-hdr .mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.dt-hdr .mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dt-hdr .mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.dt-hdr .mega__card:hover {
  border-color: var(--ink);
}
.dt-hdr .mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.dt-hdr .mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.dt-hdr .mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.dt-hdr .mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.dt-hdr .mega__aside--urgent {
  background: var(--ink);
}
.dt-hdr .mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.dt-hdr .mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.dt-hdr .mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .dt-hdr .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .dt-hdr .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dt-hdr .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .dt-hdr .navbtn {
    display: block;
  }
  .dt-hdr .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .dt-hdr .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .dt-hdr .nav.open {
    display: flex;
  }
  .dt-hdr .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .dt-hdr .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .dt-hdr .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .dt-hdr .mega__cols,
  .dt-hdr .mega__grid,
  .dt-hdr .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .dt-hdr .mega__cols,
  .dt-hdr .mega__grid,
  .dt-hdr .mega__svc {
    grid-template-columns: 1fr;
  }
}
.dt-hdr .srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.dt-hdr .srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.dt-hdr .srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.dt-hdr .srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.dt-hdr .srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.dt-hdr .srch__x:hover {
  color: var(--ink);
}
.dt-hdr .srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.dt-hdr .srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.dt-hdr .srch__res a:hover {
  background: var(--steel-2);
}
.dt-hdr .srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.dt-hdr .srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.dt-hdr .srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.dt-hdr .srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.dt-hdr .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.dt-hdr .btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.dt-hdr .btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.dt-hdr .btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.dt-hdr .btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.dt-hdr .btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.dt-hdr .btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.dt-hdr .btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.dt-hdr .btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.dt-hdr .btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.dt-hdr .btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.dt-hdr .btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.dt-hdr .vhero .eyebrow {
  color: var(--blue-l);
}
.dt-hdr .cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
@media (max-width: 820px) {
  .dt-hdr .cstrip .wrap {
    gap: 14px;
  }
}
.dt-hdr .pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.dt-hdr .pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.dt-hdr .pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.dt-hdr .pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.dt-hdr .pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.dt-hdr .pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.dt-hdr .pcard h3 {
  margin-bottom: 0.4em;
}
.dt-hdr .pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.dt-hdr .pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.dt-hdr .pcard:hover .pcard__go {
  text-decoration: underline;
}
.dt-hdr .mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .dt-hdr .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .dt-hdr .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .dt-hdr .mega__prod {
    grid-template-columns: 1fr;
  }
}
.dt-hdr .pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.dt-hdr .pcard--mini .pcard__img img {
  padding: 10px;
}
.dt-hdr .pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.dt-hdr .pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.dt-hdr .pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.dt-hdr .pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.dt-hdr .mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.dt-hdr .itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.dt-hdr .itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.dt-hdr .itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.dt-hdr .itile:hover img {
  transform: scale(1.04);
}
.dt-hdr .itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.dt-hdr .itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dt-hdr .itile:hover img,
  .dt-hdr .pcard:hover,
  .dt-hdr .qcard:hover,
  .dt-hdr a.card:hover {
    transform: none;
  }
}

/* From assets/css/style.css */
/*
Theme Name: detectronic-website (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */

/* CSS Variables */
:root {
}

/* Inline Styles */

/* Extracted CSS from page */
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}

/* From _source/style.css */
/* Detectronic — dansk website
   Farver og typografi følger Detectronic Brand & Visual Identity Guidelines 2026:
     PANTONE 285C  #0072CE · PANTONE 2905C #8ED6FF · Black C · White
     Display: Eurostile Bold · Brødtekst: Calibri
   Eurostile og Calibri er ikke webskrifter. Stakkene herunder bruger dem, hvor de
   er installeret, og falder ellers tilbage på nærmeste tilgængelige alternativ.
   Al teknisk data sættes i monospace (instrumentaflæsning). */

:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30; /* used only for line-down / breakdown support */

  /* footer: dark neutral blue, deliberately not black, so the footer reads
     as its own band under the black "Send us your product" section */
  --foot: #122633;
  --foot-2: #1c3444; /* hairlines and raised surfaces inside the footer */
  --foot-tx: #93a7b4; /* footer body text */
  --foot-tx-2: #6c818f; /* footer labels and fine print */

  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;

  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px; /* cards, boxes, tables, media */
  --r-sm: 8px; /* buttons, pills, inputs */
  --r-lg: 20px; /* hero blocks, large panels */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0;
}
p {
  margin: 0 0 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}

/* ---------- mono utility ---------- */
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}

/* ---------- top bar: secondary/company navigation ---------- */
.top {
  background: var(--ink);
  color: #b9c4cc;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: #c9d3da;
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0;
}
.top__nav a:hover {
  color: #fff;
  background: #1c1c1c;
}
.top__nav a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: #0086f0;
  color: #fff;
}
.top__call b {
  font-weight: 600;
  color: #cfe9ff;
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: #c9d3da;
  text-decoration: none;
}
.top__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid #2c2c2c;
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: #8d99a2;
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: #fff;
}
.top__lang a:not(.on):hover {
  background: #1c1c1c;
  color: #fff;
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid #1c1c1c;
  }
}

/* ---------- main bar ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
/* The standard wordmark is roughly 14:1, so height drives the width. */
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: #fff;
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}

/* ---------- mega menus ---------- */
.mega {
  border-top: 1px solid var(--line-2);
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(10, 10, 10, 0.35);
  animation: megaIn 0.16s ease-out;
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__cols li a {
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: #b4c1c9;
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}

/* ---------- search ---------- */
.srch {
  position: sticky;
  top: 0;
  z-index: 110;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 30px -22px rgba(10, 10, 10, 0.4);
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1;
  font: inherit;
  font-size: 1.15rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: #fff;
}
.btn--ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--ink:hover {
  background: #000;
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}

/* ---------- sections ---------- */
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: #d6dee3;
}
.sec--ink h2,
.sec--ink h3 {
  color: #fff;
}
.sec--ink a {
  color: #8fd0f5;
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}

/* left spec rail — the "labelled zone" motif from machine panels */
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- SIGNATURE: detektionsskala ---------- */
.scale {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #24343e;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7e919d;
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid #24343e;
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: #54697a;
  animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.22);
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: #b9c6ce;
  letter-spacing: 0.02em;
}
@keyframes pop {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #8fa1ac;
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0 0;
  font-size: 0.76rem;
  color: #7e919d;
  max-width: none;
  line-height: 1.5;
}

/* ---------- cards / grids ---------- */
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}

/* ---------- spec table ---------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(even) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}

/* Editorial marker: content that needs Detectronic's approval before launch.
   Deliberately visible so nothing unapproved slips into production unnoticed. */
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: #eef7fd;
  border: 1px dashed #9fcde8;
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0 5px 5px 0;
  border: 1px solid #cadeeb;
}
.pill--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ---------- lists ---------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}

/* ---------- callout / cta band ---------- */
.note {
  background: var(--steel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0;
}
.note p:last-child {
  margin-bottom: 0;
}
.note--sig {
  border-left-color: var(--signal);
}

.band {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: #fff;
  margin-bottom: 0.4em;
}
.band p {
  color: #b4c1c9;
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}

/* ---------- person / contact ---------- */
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}

/* management contact card: name, role, what they handle, then the two routes */
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: 0 12px 28px -22px rgba(10, 10, 10, 0.5);
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.person__tel {
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}

/* ---------- billeder ---------- */
figure {
  margin: 0;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}

/* ---------- video ---------- */
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}

/* ---------- brancheikon-kort ---------- */
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}

/* ---------- form ---------- */
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1/-1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- breadcrumb ---------- */
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0 6px;
}

/* ---------- footer ----------
   Deep navy rather than black, so it reads as a separate band from the
   black "Send us your product" section that sits directly above it. */
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: #d2dee6;
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: #fff;
}

.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
/* the wordmark is ~14:1, so a small height change moves the width a long way.
   Kept deliberately modest so the claim underneath has room to breathe. */
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}

.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}

/* label above each column */
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}

.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: #c3d2dc;
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: #fff;
  font-weight: 640;
  margin-bottom: 2px;
}

.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  color: #fff !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: #fff !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffd9d6 !important;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: #fff !important;
}

.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  color: #fff !important;
  text-decoration: underline;
}
.foot__cookiebtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}

/* ---------- sticky mobile CTA ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: #fff;
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}

/* ---------- media placeholders (asset not supplied yet) ---------- */
.ph {
  position: relative;
  background: var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16/9;
  min-height: 0;
}
.ph--tall {
  aspect-ratio: 4/5;
  min-height: 0;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: #8fa1ac;
  max-width: 38ch;
  line-height: 1.5;
  margin: 0;
}

/* ---------- hero with full-bleed media ----------
   Two concept panels stacked in the same box. Each carries its own media and
   its own copy, and they cross-fade slowly; the facts row is shared and never
   moves, so the hero never reads as a carousel. */
/* Two complete hero slides stacked in one grid cell. Each slide owns its media,
   its copy and its own figures row, so a slide is a self-contained hero — the
   rotation swaps the whole thing rather than animating parts of it. */
.vhero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1/1;
  position: relative;
  display: grid;
  align-content: center;
  /* reserve the band the indicators sit in, so they never touch the figures row */
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s ease,
    visibility 0s linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s ease,
    visibility 0s;
}
.vhero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0;
  min-height: 0;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
/* both clips occupy the full area; only one is visible at a time */
.vhero__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
/* slide 2's heading is an h2 so the page keeps a single h1. It must render
   identically, so it inherits the same values as the base h1 rule. */
.vhero h1,
.vhero__in h2 {
  color: #fff;
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: #cfd8de;
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* slide indicators — two short bars, deliberately quiet */
.vhero__nav {
  grid-area: 1/1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 0;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s ease,
    width 0.3s ease;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: #fff;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa1ac;
  white-space: nowrap;
}

/* contact strip directly under the hero — no hunting for a phone number */
.cstrip {
  background: var(--blue);
  color: #fff;
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
}
.cstrip__item:hover {
  color: #fff;
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfe9ff;
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}

/* Line down — urgent, but restrained. A red dot and a red icon ring,
   not a red banner. Enough to catch the eye without shouting. */
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: 0 0 0 3px rgba(226, 58, 48, 0.28);
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ffd9d6;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.75);
  animation: pulse 2.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(226, 58, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- WET DETECT feature block ---------- */
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: #000;
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: #fff;
}

/* offset variant: the copy runs past the panel on the right */
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
/* the copy column extends over the panel edge */
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
}
/* keep the copy inside its own column so the panel stays readable */
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, #12212b 0%, #0a0a0a 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: #a9b7c0;
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: #fff;
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa1ac;
}
/* both WET DETECT videos sit together, below the copy */
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: #1e2b34;
}
.wet__videos figcaption {
  background: var(--ink);
  color: #8fa1ac;
  border-top-color: #1e2b34;
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}

/* ---------- quality / why-us grid ---------- */
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.4);
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: #c3cdd4;
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: #fff;
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}

/* ---------- product cards with imagery ---------- */
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(10, 10, 10, 0.45);
}
.pcard__img {
  aspect-ratio: 4/3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}

/* Products grid: four columns, two rows. Every category is styled identically —
   no category gets special colour, badge or emphasis. */
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}

/* Compact card for the dropdown: name and kicker only, so eight products fit
   in a menu that stays a sensible height. */
.pcard--mini .pcard__img {
  aspect-ratio: 3/2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}

/* ---------- hygienic component grid (WET DETECT) ---------- */
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}

/* ---------- 40-year anniversary mark ----------
   Two assets: logo-40-aar.png (dark, for light backgrounds) and
   logo-40-aar-hvid.png (white wordmark, blue slogan, for dark backgrounds). */
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0 0 1.4rem;
}

/* anniversary feature card on the news hub — links out to LinkedIn */
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: #c6d1d8;
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: #fff;
  margin: 0.15em 0 0.5em;
}
.anniv-card p {
  color: #b7c3cb;
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}

/* anniversary panel on the About page */
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0 0 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a8b6bf;
  margin: 0;
}

/* ---------- careers: application contact ---------- */
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: #b7c3cb;
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: #fff;
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: #b7c3cb;
  text-decoration: none;
}
.applybox__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}

/* ---------- exhibitions / events ---------- */
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: 0 10px 24px -20px rgba(10, 10, 10, 0.5);
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0 0 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: #9aa5ac;
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding: 0 0 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0;
  }
}

/* ---------- brochure download slot ---------- */
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}

/* ---------- industries dropdown, larger tiles ---------- */
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}
.itile img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- references ---------- */
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: #fff;
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: #fff;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #b4bec5;
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- customer reference logos ----------
   Greyscale at rest so eight different brand palettes do not fight each
   other or the page; full colour on hover. */
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0;
  background: #fff;
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}

/* ---------- count-up figures ---------- */
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
/* Standalone use outside .refbar (About page and similar) */
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0;
}
.statrow .stat {
  background: #fff;
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: #fff;
}
.statrow--ondark .stat span {
  color: #8fa1ac;
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}

.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 26px;
}
.maplist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.maplist li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}

/* ---------- cases & news ---------- */
.postlist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}

.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0;
}
.kpi div {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}

/* ---------- careers ---------- */
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}

/* ---------- subtle motion & depth on inner pages ----------
   Restrained on purpose: a short fade-and-rise on scroll, and
   slightly warmer hover states. Fully disabled for reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}

/* section rhythm: a hairline accent above alternating bands */
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}

/* cards lift a little more, consistently */
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}

/* spec tables: highlight the row under the cursor */
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}

/* quiet texture behind the darkest bands so they are not flat */
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* rail headings get a soft accent bar that grows in */
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--blue-l);
  transition: height 0.6s ease 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}

/* ---------- misc ---------- */
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}

/* From assets/style.css */
/* Detectronic — dansk website
   Farver og typografi følger Detectronic Brand & Visual Identity Guidelines 2026:
     PANTONE 285C  #0072CE · PANTONE 2905C #8ED6FF · Black C · White
     Display: Eurostile Bold · Brødtekst: Calibri
   Eurostile og Calibri er ikke webskrifter. Stakkene herunder bruger dem, hvor de
   er installeret, og falder ellers tilbage på nærmeste tilgængelige alternativ.
   Al teknisk data sættes i monospace (instrumentaflæsning). */

:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30; /* used only for line-down / breakdown support */

  /* footer: dark neutral blue, deliberately not black, so the footer reads
     as its own band under the black "Send us your product" section */
  --foot: #122633;
  --foot-2: #1c3444; /* hairlines and raised surfaces inside the footer */
  --foot-tx: #93a7b4; /* footer body text */
  --foot-tx-2: #6c818f; /* footer labels and fine print */

  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;

  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px; /* cards, boxes, tables, media */
  --r-sm: 8px; /* buttons, pills, inputs */
  --r-lg: 20px; /* hero blocks, large panels */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0;
}
p {
  margin: 0 0 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}

/* ---------- mono utility ---------- */
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}

/* ---------- top bar: secondary/company navigation ---------- */
.top {
  background: var(--ink);
  color: #b9c4cc;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: #c9d3da;
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0;
}
.top__nav a:hover {
  color: #fff;
  background: #1c1c1c;
}
.top__nav a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: #0086f0;
  color: #fff;
}
.top__call b {
  font-weight: 600;
  color: #cfe9ff;
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: #c9d3da;
  text-decoration: none;
}
.top__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid #2c2c2c;
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: #8d99a2;
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: #fff;
}
.top__lang a:not(.on):hover {
  background: #1c1c1c;
  color: #fff;
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid #1c1c1c;
  }
}

/* ---------- main bar ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
/* The standard wordmark is roughly 14:1, so height drives the width. */
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: #fff;
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}

/* ---------- mega menus ---------- */
.mega {
  border-top: 1px solid var(--line-2);
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(10, 10, 10, 0.35);
  animation: megaIn 0.16s ease-out;
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__cols li a {
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: #b4c1c9;
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}

/* ---------- search ---------- */
.srch {
  position: sticky;
  top: 0;
  z-index: 110;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 30px -22px rgba(10, 10, 10, 0.4);
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1;
  font: inherit;
  font-size: 1.15rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: #fff;
}
.btn--ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--ink:hover {
  background: #000;
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}

/* ---------- sections ---------- */
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: #d6dee3;
}
.sec--ink h2,
.sec--ink h3 {
  color: #fff;
}
.sec--ink a {
  color: #8fd0f5;
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}

/* left spec rail — the "labelled zone" motif from machine panels */
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- SIGNATURE: detektionsskala ---------- */
.scale {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #24343e;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7e919d;
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid #24343e;
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: #54697a;
  animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.22);
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: #b9c6ce;
  letter-spacing: 0.02em;
}
@keyframes pop {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #8fa1ac;
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0 0;
  font-size: 0.76rem;
  color: #7e919d;
  max-width: none;
  line-height: 1.5;
}

/* ---------- cards / grids ---------- */
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}

/* ---------- spec table ---------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(even) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}

/* Editorial marker: content that needs Detectronic's approval before launch.
   Deliberately visible so nothing unapproved slips into production unnoticed. */
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: #eef7fd;
  border: 1px dashed #9fcde8;
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0 5px 5px 0;
  border: 1px solid #cadeeb;
}
.pill--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ---------- lists ---------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}

/* ---------- callout / cta band ---------- */
.note {
  background: var(--steel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0;
}
.note p:last-child {
  margin-bottom: 0;
}
.note--sig {
  border-left-color: var(--signal);
}

.band {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: #fff;
  margin-bottom: 0.4em;
}
.band p {
  color: #b4c1c9;
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}

/* ---------- person / contact ---------- */
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}

/* management contact card: name, role, what they handle, then the two routes */
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: 0 12px 28px -22px rgba(10, 10, 10, 0.5);
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.person__tel {
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}

/* ---------- billeder ---------- */
figure {
  margin: 0;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}

/* ---------- video ---------- */
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}

/* ---------- brancheikon-kort ---------- */
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}

/* ---------- form ---------- */
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1/-1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- breadcrumb ---------- */
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0 6px;
}

/* ---------- footer ----------
   Deep navy rather than black, so it reads as a separate band from the
   black "Send us your product" section that sits directly above it. */
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: #d2dee6;
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: #fff;
}

.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
/* the wordmark is ~14:1, so a small height change moves the width a long way.
   Kept deliberately modest so the claim underneath has room to breathe. */
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}

.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}

/* label above each column */
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}

.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: #c3d2dc;
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: #fff;
  font-weight: 640;
  margin-bottom: 2px;
}

.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  color: #fff !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: #fff !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffd9d6 !important;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: #fff !important;
}

.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  color: #fff !important;
  text-decoration: underline;
}
.foot__cookiebtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}

/* ---------- sticky mobile CTA ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: #fff;
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}

/* ---------- media placeholders (asset not supplied yet) ---------- */
.ph {
  position: relative;
  background: var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16/9;
  min-height: 0;
}
.ph--tall {
  aspect-ratio: 4/5;
  min-height: 0;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: #8fa1ac;
  max-width: 38ch;
  line-height: 1.5;
  margin: 0;
}

/* ---------- hero with full-bleed media ----------
   Two concept panels stacked in the same box. Each carries its own media and
   its own copy, and they cross-fade slowly; the facts row is shared and never
   moves, so the hero never reads as a carousel. */
/* Two complete hero slides stacked in one grid cell. Each slide owns its media,
   its copy and its own figures row, so a slide is a self-contained hero — the
   rotation swaps the whole thing rather than animating parts of it. */
.vhero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1/1;
  position: relative;
  display: grid;
  align-content: center;
  /* reserve the band the indicators sit in, so they never touch the figures row */
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s ease,
    visibility 0s linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s ease,
    visibility 0s;
}
.vhero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0;
  min-height: 0;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
/* both clips occupy the full area; only one is visible at a time */
.vhero__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
/* slide 2's heading is an h2 so the page keeps a single h1. It must render
   identically, so it inherits the same values as the base h1 rule. */
.vhero h1,
.vhero__in h2 {
  color: #fff;
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: #cfd8de;
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* slide indicators — two short bars, deliberately quiet */
.vhero__nav {
  grid-area: 1/1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 0;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s ease,
    width 0.3s ease;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: #fff;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa1ac;
  white-space: nowrap;
}

/* contact strip directly under the hero — no hunting for a phone number */
.cstrip {
  background: var(--blue);
  color: #fff;
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
}
.cstrip__item:hover {
  color: #fff;
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfe9ff;
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}

/* Line down — urgent, but restrained. A red dot and a red icon ring,
   not a red banner. Enough to catch the eye without shouting. */
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: 0 0 0 3px rgba(226, 58, 48, 0.28);
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ffd9d6;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.75);
  animation: pulse 2.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(226, 58, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- WET DETECT feature block ---------- */
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: #000;
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: #fff;
}

/* offset variant: the copy runs past the panel on the right */
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
/* the copy column extends over the panel edge */
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
}
/* keep the copy inside its own column so the panel stays readable */
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, #12212b 0%, #0a0a0a 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: #a9b7c0;
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: #fff;
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa1ac;
}
/* both WET DETECT videos sit together, below the copy */
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: #1e2b34;
}
.wet__videos figcaption {
  background: var(--ink);
  color: #8fa1ac;
  border-top-color: #1e2b34;
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}

/* ---------- quality / why-us grid ---------- */
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.4);
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: #c3cdd4;
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: #fff;
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}

/* ---------- product cards with imagery ---------- */
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(10, 10, 10, 0.45);
}
.pcard__img {
  aspect-ratio: 4/3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}

/* Products grid: four columns, two rows. Every category is styled identically —
   no category gets special colour, badge or emphasis. */
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}

/* Compact card for the dropdown: name and kicker only, so eight products fit
   in a menu that stays a sensible height. */
.pcard--mini .pcard__img {
  aspect-ratio: 3/2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}

/* ---------- hygienic component grid (WET DETECT) ---------- */
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}

/* ---------- 40-year anniversary mark ----------
   Two assets: logo-40-aar.png (dark, for light backgrounds) and
   logo-40-aar-hvid.png (white wordmark, blue slogan, for dark backgrounds). */
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0 0 1.4rem;
}

/* anniversary feature card on the news hub — links out to LinkedIn */
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: #c6d1d8;
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: #fff;
  margin: 0.15em 0 0.5em;
}
.anniv-card p {
  color: #b7c3cb;
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}

/* anniversary panel on the About page */
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0 0 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a8b6bf;
  margin: 0;
}

/* ---------- careers: application contact ---------- */
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: #b7c3cb;
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: #fff;
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: #b7c3cb;
  text-decoration: none;
}
.applybox__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}

/* ---------- exhibitions / events ---------- */
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: 0 10px 24px -20px rgba(10, 10, 10, 0.5);
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0 0 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: #9aa5ac;
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding: 0 0 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0;
  }
}

/* ---------- brochure download slot ---------- */
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}

/* ---------- industries dropdown, larger tiles ---------- */
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}
.itile img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- references ---------- */
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: #fff;
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: #fff;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #b4bec5;
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- customer reference logos ----------
   Greyscale at rest so eight different brand palettes do not fight each
   other or the page; full colour on hover. */
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0;
  background: #fff;
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}

/* ---------- count-up figures ---------- */
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
/* Standalone use outside .refbar (About page and similar) */
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0;
}
.statrow .stat {
  background: #fff;
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: #fff;
}
.statrow--ondark .stat span {
  color: #8fa1ac;
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}

.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 26px;
}
.maplist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.maplist li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}

/* ---------- cases & news ---------- */
.postlist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}

.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0;
}
.kpi div {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}

/* ---------- careers ---------- */
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}

/* ---------- subtle motion & depth on inner pages ----------
   Restrained on purpose: a short fade-and-rise on scroll, and
   slightly warmer hover states. Fully disabled for reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}

/* section rhythm: a hairline accent above alternating bands */
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}

/* cards lift a little more, consistently */
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}

/* spec tables: highlight the row under the cursor */
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}

/* quiet texture behind the darkest bands so they are not flat */
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* rail headings get a soft accent bar that grows in */
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--blue-l);
  transition: height 0.6s ease 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}

/* ---------- misc ---------- */
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}

/* Source extracted CSS */

/* From assets/style.css */
/* Detectronic — dansk website
   Farver og typografi følger Detectronic Brand & Visual Identity Guidelines 2026:
     PANTONE 285C  #0072CE · PANTONE 2905C #8ED6FF · Black C · White
     Display: Eurostile Bold · Brødtekst: Calibri
   Eurostile og Calibri er ikke webskrifter. Stakkene herunder bruger dem, hvor de
   er installeret, og falder ellers tilbage på nærmeste tilgængelige alternativ.
   Al teknisk data sættes i monospace (instrumentaflæsning). */

:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30; /* used only for line-down / breakdown support */

  /* footer: dark neutral blue, deliberately not black, so the footer reads
     as its own band under the black "Send us your product" section */
  --foot: #122633;
  --foot-2: #1c3444; /* hairlines and raised surfaces inside the footer */
  --foot-tx: #93a7b4; /* footer body text */
  --foot-tx-2: #6c818f; /* footer labels and fine print */

  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;

  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px; /* cards, boxes, tables, media */
  --r-sm: 8px; /* buttons, pills, inputs */
  --r-lg: 20px; /* hero blocks, large panels */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0;
}
p {
  margin: 0 0 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}

/* ---------- mono utility ---------- */
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}

/* ---------- top bar: secondary/company navigation ---------- */
.top {
  background: var(--ink);
  color: #b9c4cc;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: #c9d3da;
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0;
}
.top__nav a:hover {
  color: #fff;
  background: #1c1c1c;
}
.top__nav a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: #0086f0;
  color: #fff;
}
.top__call b {
  font-weight: 600;
  color: #cfe9ff;
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: #c9d3da;
  text-decoration: none;
}
.top__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid #2c2c2c;
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: #8d99a2;
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: #fff;
}
.top__lang a:not(.on):hover {
  background: #1c1c1c;
  color: #fff;
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid #1c1c1c;
  }
}

/* ---------- main bar ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
/* The standard wordmark is roughly 14:1, so height drives the width. */
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: #fff;
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}

/* ---------- mega menus ---------- */
.mega {
  border-top: 1px solid var(--line-2);
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(10, 10, 10, 0.35);
  animation: megaIn 0.16s ease-out;
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__cols li a {
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: #b4c1c9;
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}

/* ---------- search ---------- */
.srch {
  position: sticky;
  top: 0;
  z-index: 110;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 30px -22px rgba(10, 10, 10, 0.4);
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1;
  font: inherit;
  font-size: 1.15rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: #fff;
}
.btn--ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--ink:hover {
  background: #000;
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}

/* ---------- sections ---------- */
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: #d6dee3;
}
.sec--ink h2,
.sec--ink h3 {
  color: #fff;
}
.sec--ink a {
  color: #8fd0f5;
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}

/* left spec rail — the "labelled zone" motif from machine panels */
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- SIGNATURE: detektionsskala ---------- */
.scale {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #24343e;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7e919d;
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid #24343e;
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: #54697a;
  animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.22);
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: #b9c6ce;
  letter-spacing: 0.02em;
}
@keyframes pop {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #8fa1ac;
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0 0;
  font-size: 0.76rem;
  color: #7e919d;
  max-width: none;
  line-height: 1.5;
}

/* ---------- cards / grids ---------- */
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}

/* ---------- spec table ---------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(even) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}

/* Editorial marker: content that needs Detectronic's approval before launch.
   Deliberately visible so nothing unapproved slips into production unnoticed. */
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: #eef7fd;
  border: 1px dashed #9fcde8;
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0 5px 5px 0;
  border: 1px solid #cadeeb;
}
.pill--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ---------- lists ---------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}

/* ---------- callout / cta band ---------- */
.note {
  background: var(--steel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0;
}
.note p:last-child {
  margin-bottom: 0;
}
.note--sig {
  border-left-color: var(--signal);
}

.band {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: #fff;
  margin-bottom: 0.4em;
}
.band p {
  color: #b4c1c9;
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}

/* ---------- person / contact ---------- */
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}

/* management contact card: name, role, what they handle, then the two routes */
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: 0 12px 28px -22px rgba(10, 10, 10, 0.5);
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.person__tel {
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}

/* ---------- billeder ---------- */
figure {
  margin: 0;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}

/* ---------- video ---------- */
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}

/* ---------- brancheikon-kort ---------- */
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}

/* ---------- form ---------- */
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1/-1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- breadcrumb ---------- */
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0 6px;
}

/* ---------- footer ----------
   Deep navy rather than black, so it reads as a separate band from the
   black "Send us your product" section that sits directly above it. */
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: #d2dee6;
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: #fff;
}

.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
/* the wordmark is ~14:1, so a small height change moves the width a long way.
   Kept deliberately modest so the claim underneath has room to breathe. */
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}

.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}

/* label above each column */
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}

.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: #c3d2dc;
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: #fff;
  font-weight: 640;
  margin-bottom: 2px;
}

.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  color: #fff !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: #fff !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffd9d6 !important;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: #fff !important;
}

.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  color: #fff !important;
  text-decoration: underline;
}
.foot__cookiebtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}

/* ---------- sticky mobile CTA ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: #fff;
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}

/* ---------- media placeholders (asset not supplied yet) ---------- */
.ph {
  position: relative;
  background: var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16/9;
  min-height: 0;
}
.ph--tall {
  aspect-ratio: 4/5;
  min-height: 0;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: #8fa1ac;
  max-width: 38ch;
  line-height: 1.5;
  margin: 0;
}

/* ---------- hero with full-bleed media ----------
   Two concept panels stacked in the same box. Each carries its own media and
   its own copy, and they cross-fade slowly; the facts row is shared and never
   moves, so the hero never reads as a carousel. */
/* Two complete hero slides stacked in one grid cell. Each slide owns its media,
   its copy and its own figures row, so a slide is a self-contained hero — the
   rotation swaps the whole thing rather than animating parts of it. */
.vhero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1/1;
  position: relative;
  display: grid;
  align-content: center;
  /* reserve the band the indicators sit in, so they never touch the figures row */
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s ease,
    visibility 0s linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s ease,
    visibility 0s;
}
.vhero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0;
  min-height: 0;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
/* both clips occupy the full area; only one is visible at a time */
.vhero__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
/* slide 2's heading is an h2 so the page keeps a single h1. It must render
   identically, so it inherits the same values as the base h1 rule. */
.vhero h1,
.vhero__in h2 {
  color: #fff;
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: #cfd8de;
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* slide indicators — two short bars, deliberately quiet */
.vhero__nav {
  grid-area: 1/1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 0;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s ease,
    width 0.3s ease;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: #fff;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa1ac;
  white-space: nowrap;
}

/* contact strip directly under the hero — no hunting for a phone number */
.cstrip {
  background: var(--blue);
  color: #fff;
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
}
.cstrip__item:hover {
  color: #fff;
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfe9ff;
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}

/* Line down — urgent, but restrained. A red dot and a red icon ring,
   not a red banner. Enough to catch the eye without shouting. */
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: 0 0 0 3px rgba(226, 58, 48, 0.28);
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ffd9d6;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.75);
  animation: pulse 2.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(226, 58, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- WET DETECT feature block ---------- */
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: #000;
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: #fff;
}

/* offset variant: the copy runs past the panel on the right */
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
/* the copy column extends over the panel edge */
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
}
/* keep the copy inside its own column so the panel stays readable */
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, #12212b 0%, #0a0a0a 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: #a9b7c0;
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: #fff;
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa1ac;
}
/* both WET DETECT videos sit together, below the copy */
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: #1e2b34;
}
.wet__videos figcaption {
  background: var(--ink);
  color: #8fa1ac;
  border-top-color: #1e2b34;
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}

/* ---------- quality / why-us grid ---------- */
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.4);
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: #c3cdd4;
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: #fff;
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}

/* ---------- product cards with imagery ---------- */
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(10, 10, 10, 0.45);
}
.pcard__img {
  aspect-ratio: 4/3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}

/* Products grid: four columns, two rows. Every category is styled identically —
   no category gets special colour, badge or emphasis. */
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}

/* Compact card for the dropdown: name and kicker only, so eight products fit
   in a menu that stays a sensible height. */
.pcard--mini .pcard__img {
  aspect-ratio: 3/2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}

/* ---------- hygienic component grid (WET DETECT) ---------- */
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}

/* ---------- 40-year anniversary mark ----------
   Two assets: logo-40-aar.png (dark, for light backgrounds) and
   logo-40-aar-hvid.png (white wordmark, blue slogan, for dark backgrounds). */
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0 0 1.4rem;
}

/* anniversary feature card on the news hub — links out to LinkedIn */
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: #c6d1d8;
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: #fff;
  margin: 0.15em 0 0.5em;
}
.anniv-card p {
  color: #b7c3cb;
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}

/* anniversary panel on the About page */
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0 0 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a8b6bf;
  margin: 0;
}

/* ---------- careers: application contact ---------- */
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: #b7c3cb;
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: #fff;
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: #b7c3cb;
  text-decoration: none;
}
.applybox__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}

/* ---------- exhibitions / events ---------- */
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: 0 10px 24px -20px rgba(10, 10, 10, 0.5);
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0 0 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: #9aa5ac;
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding: 0 0 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0;
  }
}

/* ---------- brochure download slot ---------- */
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}

/* ---------- industries dropdown, larger tiles ---------- */
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}
.itile img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- references ---------- */
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: #fff;
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: #fff;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #b4bec5;
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- customer reference logos ----------
   Greyscale at rest so eight different brand palettes do not fight each
   other or the page; full colour on hover. */
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0;
  background: #fff;
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}

/* ---------- count-up figures ---------- */
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
/* Standalone use outside .refbar (About page and similar) */
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0;
}
.statrow .stat {
  background: #fff;
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: #fff;
}
.statrow--ondark .stat span {
  color: #8fa1ac;
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}

.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 26px;
}
.maplist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.maplist li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}

/* ---------- cases & news ---------- */
.postlist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}

.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0;
}
.kpi div {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}

/* ---------- careers ---------- */
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}

/* ---------- subtle motion & depth on inner pages ----------
   Restrained on purpose: a short fade-and-rise on scroll, and
   slightly warmer hover states. Fully disabled for reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}

/* section rhythm: a hairline accent above alternating bands */
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}

/* cards lift a little more, consistently */
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}

/* spec tables: highlight the row under the cursor */
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}

/* quiet texture behind the darkest bands so they are not flat */
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* rail headings get a soft accent bar that grows in */
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--blue-l);
  transition: height 0.6s ease 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}

/* ---------- misc ---------- */
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
.container {
  max-width: none !important;
}

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* EC-NAV-364: …but an auto margin on the menu <ul> IS the navbar's horizontal
   layout, not a stray UA default. Bootstrap's .navbar-nav.ml-auto (and the
   Tailwind / BS5 spellings) is what pushes the menu away from the brand over to
   the right edge; the ID-scoped "margin: 0 !important" resets above outrank the
   utility's own !important and collapse the whole bar to the left (Butterfly
   Cancer Care Foundation). Re-asserted here — last, and with a 3-element variant
   that ties the highest-specificity reset ("header nav.main-nav ul#…") so it wins
   on both counts. Additive: these selectors match ONLY a <ul> that literally
   carries the utility, so every other menu keeps today's layout byte-for-byte. */
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
/* EC-GALLERY-002d: [data-wpc-live-dialog] opts out — a dialog WPConvert injects on purpose
   (e.g. the gallery lightbox) is not snapshot debris, and these !important rules would
   otherwise beat even its inline styles and leave it permanently invisible. */
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* EC-NAV-361: the rule above uses BARE TAG selectors, but <header> and <nav> are
   also valid SECTIONING content — a hero banner, an article header, a breadcrumb
   trail. Those live inside <main class="site-main">, and inflating them to
   z-index:1000 puts PAGE CONTENT on a layer above almost everything, where it
   beats any overlay the source site authored (Jegson Publicity: the enquiry modal
   is z-index:100, so the 78vh hero <header> painted straight over the open popup).
   Site chrome is always emitted OUTSIDE <main>, so scoping the repair to
   descendants of the content wrapper can never reach the real navbar.
   Only z-index is reset — position is left alone so the EC-NAV-190 absolute-overlay
   and EC-NAV-352 CSS-authored-fixed-nav behaviours are untouched. "auto" is what an
   un-styled hero has, and it is the value that restores the source ordering: the
   base rule already beats a Tailwind z-* utility (it is !important), so exempting
   those would merely leave them inflated to 1000 — the very bug being fixed. */
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
/* EC-NAV-363: same source-neutralisation exemption as the fixed block below. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
/* EC-NAV-363: the substring selectors additionally exempt any framework position
   class the SOURCE cascade already neutralises (Bootstrap .fixed-top redeclared
   in-flow by a later .navbar{position:relative}). The exact-token `nav.fixed`
   (Tailwind) selectors are never guarded — they have no such override. */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it. */
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Skipped hero overlap CSS — nav is not fixed/sticky */

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body {
  line-height: 1.6;
}
body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* EC-ANIM-008b / EC-ANIM-009: carousel-only override — scroll-reveal elements animate via IO in functions.php */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* From style.css */
/*
Theme Name: detectronic-website (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */

/* CSS Variables */
:root {
}

/* Inline Styles */

/* Extracted CSS from page */
:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30;
  --foot: #122633;
  --foot-2: #1c3444;
  --foot-tx: #93a7b4;
  --foot-tx-2: #6c818f;
  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0px 0px 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0px;
}
p {
  margin: 0px 0px 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0px;
  background: var(--ink);
  color: rgb(255, 255, 255);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0px 0px 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}
.top {
  background: var(--ink);
  color: rgb(185, 196, 204);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0px;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: rgb(201, 211, 218);
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0px;
}
.top__nav a:hover {
  color: rgb(255, 255, 255);
  background: rgb(28, 28, 28);
}
.top__nav a[aria-current] {
  color: rgb(255, 255, 255);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: rgb(0, 134, 240);
  color: rgb(255, 255, 255);
}
.top__call b {
  font-weight: 600;
  color: rgb(207, 233, 255);
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: rgb(255, 255, 255);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: rgb(201, 211, 218);
  text-decoration: none;
}
.top__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid rgb(44, 44, 44);
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: rgb(141, 153, 162);
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.top__lang a:not(.on):hover {
  background: rgb(28, 28, 28);
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0px;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid rgb(28, 28, 28);
  }
}
.head {
  position: sticky;
  top: 0px;
  z-index: 100;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid;
  border-bottom: 1.6px solid;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: rgb(255, 255, 255);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: rgb(255, 255, 255);
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.mega {
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
  box-shadow: rgba(10, 10, 10, 0.35) 0px 18px 34px -22px;
  animation: 0.16s ease-out 0s 1 normal none running megaIn;
}
@keyframes megaIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: auto ease 0s 1 normal none running none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.mega__cols li a {
  display: block;
  padding: 5px 0px;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: rgb(180, 193, 201);
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0px;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0px 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}
.srch {
  position: sticky;
  top: 0px;
  z-index: 110;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid var(--line);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 16px 30px -22px;
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1 1 0%;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 1.15rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: none;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0px;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0px;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: rgb(255, 255, 255);
}
.btn--ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0px 0px;
}
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: rgb(214, 222, 227);
}
.sec--ink h2,
.sec--ink h3 {
  color: rgb(255, 255, 255);
}
.sec--ink a {
  color: rgb(143, 208, 245);
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.scale {
  background: var(--ink);
  color: rgb(255, 255, 255);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgb(36, 52, 62);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgb(255, 255, 255);
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(126, 145, 157);
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(36, 52, 62);
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0%;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: rgb(84, 105, 122);
  animation: 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0s 1 normal both running pop;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: rgba(0, 114, 206, 0.22) 0px 0px 0px 4px;
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: rgb(185, 198, 206);
  letter-spacing: 0.02em;
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: auto ease 0s 1 normal none running none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgb(143, 161, 172);
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: rgb(255, 255, 255);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0px 0px;
  font-size: 0.76rem;
  color: rgb(126, 145, 157);
  max-width: none;
  line-height: 1.5;
}
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0px;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0px;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: rgb(255, 255, 255);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0px;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(2n) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: rgb(238, 247, 253);
  border: 1px dashed rgb(159, 205, 232);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0px;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0px 5px 5px 0px;
  border: 1px solid rgb(202, 222, 235);
}
.pill--sig {
  background: var(--blue);
  color: rgb(255, 255, 255);
  border-color: var(--blue);
}
.ticks {
  list-style: none;
  padding: 0px;
  margin: 1.1rem 0px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0px;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.note {
  background: var(--steel-2);
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0px;
}
.note p:last-child {
  margin-bottom: 0px;
}
.note--sig {
  border-left-color: var(--signal);
}
.band {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
}
.band p {
  color: rgb(180, 193, 201);
  margin-bottom: 0px;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0px 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: rgb(255, 255, 255);
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: rgba(10, 10, 10, 0.5) 0px 12px 28px -22px;
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0px 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0px 0px 16px;
  flex: 1 1 0%;
}
.person__tel {
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
  font-family: var(--display) !important;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}
figure {
  margin: 0px;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0px;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(0, 0, 0);
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0px;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1 / -1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0px 0px;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0px;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0px 6px;
}
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: rgb(210, 222, 230);
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: rgb(255, 255, 255);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0px;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}
.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}
.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: rgb(195, 210, 220);
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: rgb(255, 255, 255);
  font-weight: 640;
  margin-bottom: 2px;
}
.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgb(255, 255, 255) !important;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: rgb(255, 255, 255) !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    background 0.16s,
    border-color 0.16s;
  color: rgb(255, 217, 214) !important;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: rgb(255, 255, 255) !important;
}
.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255) !important;
}
.foot__cookiebtn {
  background: none;
  border: 0px;
  padding: 0px;
  cursor: pointer;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  font-family: inherit;
  font-optical-sizing: inherit;
  font-size-adjust: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-language-override: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}
.dock {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1 1 0%;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: rgb(255, 255, 255);
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}
.ph {
  position: relative;
  background-position-x:;
  background-position-y:;
  background-repeat:;
  background-attachment:;
  background-origin:;
  background-clip:;
  background-color:;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16 / 9;
  min-height: 0px;
}
.ph--tall {
  aspect-ratio: 4 / 5;
  min-height: 0px;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0px;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: rgb(143, 161, 172);
  max-width: 38ch;
  line-height: 1.5;
  margin: 0px;
}
.vhero {
  position: relative;
  background: var(--ink);
  color: rgb(255, 255, 255);
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s,
    visibility linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s,
    visibility;
}
.vhero__media {
  position: absolute;
  inset: 0px;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0px;
  min-height: 0px;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
.vhero__v {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
.vhero h1,
.vhero__in h2 {
  color: rgb(255, 255, 255);
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: rgb(207, 216, 222);
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vhero__nav {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0px 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0px;
  cursor: pointer;
  padding: 10px 0px;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s,
    width 0.3s;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: rgb(255, 255, 255);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
  white-space: nowrap;
}
.cstrip {
  background: var(--blue);
  color: rgb(255, 255, 255);
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: rgb(255, 255, 255);
}
.cstrip__item:hover {
  color: rgb(255, 255, 255);
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(207, 233, 255);
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: rgba(226, 58, 48, 0.28) 0px 0px 0px 3px;
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(255, 217, 214);
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: rgba(226, 58, 48, 0.75) 0px 0px 0px 0px;
  animation: 2.1s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running
    pulse;
}
@keyframes pulse {
  0% {
    box-shadow: rgba(226, 58, 48, 0.7) 0px 0px 0px 0px;
  }
  70% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 8px;
  }
  100% {
    box-shadow: rgba(226, 58, 48, 0) 0px 0px 0px 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: auto ease 0s 1 normal none running none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0px;
    width: 100%;
  }
}
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: rgb(214, 222, 227);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: rgb(0, 0, 0);
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0px;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: rgb(255, 255, 255);
}
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  mask-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 55%,
    transparent 100%
  );
}
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, rgb(18, 33, 43) 0%, rgb(10, 10, 10) 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0px;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: rgb(169, 183, 192);
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: rgb(255, 255, 255);
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(143, 161, 172);
}
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: rgb(30, 43, 52);
}
.wet__videos figcaption {
  background: var(--ink);
  color: rgb(143, 161, 172);
  border-top-color: rgb(30, 43, 52);
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0px;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: rgba(10, 10, 10, 0.4) 0px 12px 26px -20px;
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(10, 10, 10);
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: rgb(195, 205, 212);
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: rgb(255, 255, 255);
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 14px 30px -20px;
}
.pcard__img {
  aspect-ratio: 4 / 3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1 1 0%;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}
.pcard--mini .pcard__img {
  aspect-ratio: 3 / 2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0px 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0px 0px 1.4rem;
}
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: rgb(198, 209, 216);
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0px;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: rgb(255, 255, 255);
  margin: 0.15em 0px 0.5em;
}
.anniv-card p {
  color: rgb(183, 195, 203);
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0px 0px 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(168, 182, 191);
  margin: 0px;
}
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: rgb(183, 195, 203);
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: rgb(255, 255, 255);
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: rgb(255, 255, 255);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgb(183, 195, 203);
  text-decoration: none;
}
.applybox__mail:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0px, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: rgba(10, 10, 10, 0.5) 0px 10px 24px -20px;
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0px 0px 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0px;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: rgb(154, 165, 172);
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0px;
    border-bottom: 1px solid var(--line-2);
    padding: 0px 0px 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0px;
  }
}
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0px;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1 1 0%;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.itile img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: rgb(255, 255, 255);
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: rgb(255, 255, 255);
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: rgb(255, 255, 255);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgb(180, 190, 197);
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0px;
  background: rgb(255, 255, 255);
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s,
    opacity 0.25s;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0px;
}
.statrow .stat {
  background: rgb(255, 255, 255);
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: rgb(255, 255, 255);
}
.statrow--ondark .stat span {
  color: rgb(143, 161, 172);
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 26px;
}
.maplist ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.maplist li {
  padding: 6px 0px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}
.postlist {
  display: grid;
  gap: 0px;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0px;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}
.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0px;
}
.kpi div {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  right: 0px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(10, 10, 10, 0.45) 0px 12px 26px -20px;
}
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  width: 2px;
  height: 0px;
  background: var(--blue-l);
  transition: height 0.6s 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}

/* From assets/style.css */
/* Detectronic — dansk website
   Farver og typografi følger Detectronic Brand & Visual Identity Guidelines 2026:
     PANTONE 285C  #0072CE · PANTONE 2905C #8ED6FF · Black C · White
     Display: Eurostile Bold · Brødtekst: Calibri
   Eurostile og Calibri er ikke webskrifter. Stakkene herunder bruger dem, hvor de
   er installeret, og falder ellers tilbage på nærmeste tilgængelige alternativ.
   Al teknisk data sættes i monospace (instrumentaflæsning). */

:root {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --paper: #ffffff;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --blue-w: #e8f4fd;
  --signal: #0072ce;
  --signal-l: #e8f4fd;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --ok: #1b7a4b;
  --urgent: #e23a30; /* used only for line-down / breakdown support */

  /* footer: dark neutral blue, deliberately not black, so the footer reads
     as its own band under the black "Send us your product" section */
  --foot: #122633;
  --foot-2: #1c3444; /* hairlines and raised surfaces inside the footer */
  --foot-tx: #93a7b4; /* footer body text */
  --foot-tx-2: #6c818f; /* footer labels and fine print */

  --display:
    Eurostile, 'Eurostile LT Std', 'Square721 BT', Bahnschrift, 'DIN Alternate',
    'Saira Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --sans:
    Calibri, Carlito, 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui,
    'Helvetica Neue', Arial, sans-serif;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;

  --wrap: 1180px;
  --measure: 68ch;
  --r: 12px; /* cards, boxes, tables, media */
  --r-sm: 8px; /* buttons, pills, inputs */
  --r-lg: 20px; /* hero blocks, large panels */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--blue-d);
}
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  font-weight: 700;
  text-transform: none;
}
h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  letter-spacing: -0.008em;
}
h3 {
  font-size: 1.14rem;
  letter-spacing: 0;
}
p {
  margin: 0 0 1.05em;
  max-width: var(--measure);
}
ul,
ol {
  max-width: var(--measure);
}
strong {
  font-weight: 680;
}
hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 2.4rem 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 820px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus {
  left: 8px;
  top: 8px;
}

/* ---------- mono utility ---------- */
.mono,
.eyebrow,
.spec td:not(:first-child),
.spec th:not(:first-child),
.tel,
.val {
  font-family: var(--mono);
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 0.85rem;
  display: block;
}
.eyebrow--sig {
  color: var(--signal);
}

/* ---------- top bar: secondary/company navigation ---------- */
.top {
  background: var(--ink);
  color: #b9c4cc;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
}
.top__nav a {
  color: #c9d3da;
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.top__nav a:first-child {
  padding-left: 0;
}
.top__nav a:hover {
  color: #fff;
  background: #1c1c1c;
}
.top__nav a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--blue);
}
.top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.top__call:hover {
  background: #0086f0;
  color: #fff;
}
.top__call b {
  font-weight: 600;
  color: #cfe9ff;
  letter-spacing: 0.04em;
}
.top__call .tel {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top__mail {
  color: #c9d3da;
  text-decoration: none;
}
.top__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .top__mail {
    display: none;
  }
}
.top__lang {
  display: flex;
  border: 1px solid #2c2c2c;
  border-radius: 99px;
  overflow: hidden;
}
.top__lang a {
  color: #8d99a2;
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.top__lang a.on {
  background: var(--blue);
  color: #fff;
}
.top__lang a:not(.on):hover {
  background: #1c1c1c;
  color: #fff;
}
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    gap: 0;
  }
  .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .top__nav a {
    padding: 8px 6px;
  }
  .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid #1c1c1c;
  }
}

/* ---------- main bar ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
/* The standard wordmark is roughly 14:1, so height drives the width. */
.brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .brand img {
    height: 17px;
  }
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.nav__btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav__btn:hover,
.nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--blue-d);
  color: #fff;
}
.searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}

/* ---------- mega menus ---------- */
.mega {
  border-top: 1px solid var(--line-2);
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(10, 10, 10, 0.35);
  animation: megaIn 0.16s ease-out;
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega {
    animation: none;
  }
}
.mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.mega__h:hover {
  color: var(--blue);
}
.mega__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__cols li a {
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.mega__card:hover {
  border-color: var(--ink);
}
.mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.mega__aside--urgent {
  background: var(--ink);
}
.mega__aside--urgent p {
  color: #b4c1c9;
}
.mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .navbtn {
    display: block;
  }
  .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .nav.open {
    display: flex;
  }
  .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    padding: 13px 2px;
  }
  .nav__cta {
    margin: 12px 0 4px;
    text-align: center;
  }
  .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .mega__cols,
  .mega__grid,
  .mega__svc {
    grid-template-columns: 1fr;
  }
}

/* ---------- search ---------- */
.srch {
  position: sticky;
  top: 0;
  z-index: 110;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 30px -22px rgba(10, 10, 10, 0.4);
}
.srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.srch input {
  flex: 1;
  font: inherit;
  font-size: 1.15rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.srch input:focus {
  outline: 0;
  border-bottom-color: var(--blue);
}
.srch__x {
  background: none;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.srch__x:hover {
  color: var(--ink);
}
.srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.srch__res a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.srch__res a:hover {
  background: var(--steel-2);
}
.srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.srch__res p {
  color: var(--ink-3);
  padding: 16px 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.btn--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: #fff;
}
.btn--ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--ink:hover {
  background: #000;
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ondark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ondark:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}

/* ---------- sections ---------- */
.sec {
  padding-block: clamp(46px, 6.5vw, 84px);
}
.sec--steel {
  background: var(--steel-2);
  border-block: 1px solid var(--line-2);
}
.sec--ink {
  background: var(--ink);
  color: #d6dee3;
}
.sec--ink h2,
.sec--ink h3 {
  color: #fff;
}
.sec--ink a {
  color: #8fd0f5;
}
.sec--tight {
  padding-block: clamp(32px, 4vw, 52px);
}

/* left spec rail — the "labelled zone" motif from machine panels */
.rail {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}
.rail--sig {
  border-left-color: var(--signal);
}
.rail--blue {
  border-left-color: var(--blue);
}
@media (max-width: 640px) {
  .rail {
    padding-left: 15px;
  }
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(42px, 5.5vw, 74px) clamp(34px, 4.5vw, 58px);
  background: linear-gradient(178deg, var(--steel-2), var(--paper) 62%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 0.42em;
}
.hero__lead {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fact b {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- SIGNATURE: detektionsskala ---------- */
.scale {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  position: relative;
  overflow: hidden;
}
.scale__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid #24343e;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.scale__hd b {
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
}
.scale__hd span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7e919d;
}
.scale__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding-bottom: 14px;
  border-bottom: 1px solid #24343e;
}
.dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1;
}
.dot i {
  display: block;
  border-radius: 50%;
  background: #54697a;
  animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.dot:nth-child(1) i {
  animation-delay: 0.05s;
}
.dot:nth-child(2) i {
  animation-delay: 0.12s;
}
.dot:nth-child(3) i {
  animation-delay: 0.19s;
}
.dot:nth-child(4) i {
  animation-delay: 0.26s;
}
.dot:nth-child(5) i {
  animation-delay: 0.33s;
}
.dot--sig i {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.22);
}
.dot em {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  color: #b9c6ce;
  letter-spacing: 0.02em;
}
@keyframes pop {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot i {
    animation: none;
  }
}
.scale__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.scale__legend div {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #8fa1ac;
  line-height: 1.5;
}
.scale__legend b {
  display: block;
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.scale__note {
  margin: 16px 0 0;
  font-size: 0.76rem;
  color: #7e919d;
  max-width: none;
  line-height: 1.5;
}

/* ---------- cards / grids ---------- */
.grid {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
a.card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.card h3 {
  margin-bottom: 0.35em;
}
.card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  margin-bottom: 0;
}
.card__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 0.7rem;
}
.card__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 620;
  color: var(--blue);
}
a.card:hover .card__more {
  text-decoration: underline;
}

/* ---------- spec table ---------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.92rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 9px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-bottom: 0;
}
.spec tbody th {
  font-weight: 600;
  width: 38%;
  color: var(--ink);
}
.spec tbody tr:nth-child(even) {
  background: var(--steel-2);
}
.spec .ask {
  color: var(--blue);
  font-style: normal;
}
.tw {
  overflow-x: auto;
}

/* Editorial marker: content that needs Detectronic's approval before launch.
   Deliberately visible so nothing unapproved slips into production unnoticed. */
p.ask,
span.ask,
td.ask {
  color: var(--blue-d);
  background: #eef7fd;
  border: 1px dashed #9fcde8;
  border-radius: var(--r-sm);
  padding: 10px 13px;
  display: block;
  font-size: 0.9rem;
}
td.ask {
  display: table-cell;
  border: 0;
  background: none;
  padding: 11px 13px;
  color: var(--blue);
}
span.ask {
  display: inline;
  padding: 2px 7px;
  border-radius: 4px;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--blue-l);
  color: var(--blue-d);
  margin: 0 5px 5px 0;
  border: 1px solid #cadeeb;
}
.pill--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ---------- lists ---------- */
.ticks {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 2px;
  background: var(--signal);
}
.faq {
  border-top: 1px solid var(--line-2);
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  cursor: pointer;
  padding: 15px 0;
  font-weight: 640;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--signal);
  font-size: 1.15rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  padding-bottom: 6px;
  font-size: 0.96rem;
  color: var(--ink-2);
}

/* ---------- callout / cta band ---------- */
.note {
  background: var(--steel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 1.6rem 0;
}
.note p:last-child {
  margin-bottom: 0;
}
.note--sig {
  border-left-color: var(--signal);
}

.band {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 30px;
  align-items: center;
}
.band h2 {
  color: #fff;
  margin-bottom: 0.4em;
}
.band p {
  color: #b4c1c9;
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .band {
    grid-template-columns: 1fr;
  }
}

/* ---------- person / contact ---------- */
.person {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.person b {
  display: block;
  font-size: 1.02rem;
}
.person em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin: 2px 0 10px;
}
.person a {
  display: block;
  font-family: var(--mono);
  font-size: 0.88rem;
  text-decoration: none;
}
.person a:hover {
  text-decoration: underline;
}

/* management contact card: name, role, what they handle, then the two routes */
.person--card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border-top: 3px solid var(--blue);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.person--card:hover {
  box-shadow: 0 12px 28px -22px rgba(10, 10, 10, 0.5);
}
.person--card b {
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}
.person--card em {
  margin: 3px 0 12px;
  color: var(--blue);
}
.person__note {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.person__tel {
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: 1.08rem !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.person__tel:hover {
  color: var(--blue) !important;
}
.person__mail {
  font-size: 0.84rem !important;
  color: var(--ink-3) !important;
}
.person__mail:hover {
  color: var(--blue) !important;
}

/* ---------- billeder ---------- */
figure {
  margin: 0;
}
.fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--steel-2);
  overflow: hidden;
}
.fig img {
  width: 100%;
  height: auto;
  display: block;
}
.fig figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  line-height: 1.45;
}
.fig--plain {
  border: 0;
  background: transparent;
}
.fig--plain img {
  border-radius: var(--r);
}
.fig--pad {
  padding: 18px;
}

/* ---------- video ---------- */
.vid {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.vid video {
  width: 100%;
  height: auto;
  display: block;
}
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line-2);
  line-height: 1.45;
}

/* ---------- brancheikon-kort ---------- */
.ikon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.9rem;
}
.ikon img {
  width: 56px;
  height: auto;
  border-radius: 8px;
  flex: 0 0 auto;
}
.ikon h3 {
  margin: 0;
}
a.card .ikon img {
  transition: transform 0.15s;
}
a.card:hover .ikon img {
  transform: scale(1.06);
}

/* ---------- form ---------- */
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
}
.form h3 {
  margin-bottom: 0.3em;
}
.form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.2rem;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f--full {
  grid-column: 1/-1;
}
.f label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f input,
.f select,
.f textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.f input:focus,
.f select:focus,
.f textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-l);
}
.f textarea {
  min-height: 96px;
  resize: vertical;
}
.form .hint {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0;
}
@media (max-width: 640px) {
  .form .fields {
    grid-template-columns: 1fr;
  }
}

/* ---------- breadcrumb ---------- */
.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  padding-block: 14px 0;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.crumb span {
  opacity: 0.5;
  margin: 0 6px;
}

/* ---------- footer ----------
   Deep navy rather than black, so it reads as a separate band from the
   black "Send us your product" section that sits directly above it. */
.foot {
  background: var(--foot);
  color: var(--foot-tx);
  font-size: 0.9rem;
  padding-block: clamp(46px, 6vw, 74px) 24px;
  border-top: 3px solid var(--blue);
}
.foot a {
  color: #d2dee6;
  text-decoration: none;
  transition: color 0.14s;
}
.foot a:hover {
  color: #fff;
}

.foot__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.foot__brandcol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.foot__logo {
  line-height: 0;
  display: block;
}
/* the wordmark is ~14:1, so a small height change moves the width a long way.
   Kept deliberately modest so the claim underneath has room to breathe. */
.foot__logo img {
  height: 19px;
  width: auto;
  display: block;
}
.foot__claim {
  max-width: 34ch;
  margin: 0;
  color: var(--foot-tx);
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 520px) {
  .foot__logo img {
    height: 16px;
  }
}

.foot__social {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--foot-2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
.foot__social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.foot__social img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.92;
}
.foot__social a:hover img {
  opacity: 1;
}

/* label above each column */
.foot__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-tx-2);
  margin-bottom: 12px;
}

.foot__addr {
  font-style: normal;
  line-height: 1.65;
  color: #c3d2dc;
  font-size: 0.94rem;
}
.foot__addr strong {
  display: block;
  color: #fff;
  font-weight: 640;
  margin-bottom: 2px;
}

.foot__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.foot__phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.34rem;
  color: #fff !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.foot__phone:hover {
  color: var(--blue-l) !important;
}
.foot__mail {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--foot-tx) !important;
}
.foot__mail:hover {
  color: #fff !important;
}
.foot__urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(226, 58, 48, 0.1);
  border: 1px solid rgba(226, 58, 48, 0.34);
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffd9d6 !important;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.foot__urgent:hover {
  background: rgba(226, 58, 48, 0.2);
  border-color: var(--urgent);
  color: #fff !important;
}

.foot__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--foot-2);
  font-family: var(--mono);
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.foot__policies a {
  color: var(--foot-tx-2) !important;
  font-size: 0.71rem;
}
.foot__policies a:hover {
  color: #fff !important;
  text-decoration: underline;
}
.foot__cookiebtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.71rem;
  color: var(--foot-tx-2);
  letter-spacing: 0.02em;
}
.foot__cookiebtn:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .foot__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foot__legal {
    justify-content: flex-start;
  }
}

/* ---------- sticky mobile CTA ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.dock a {
  flex: 1;
  text-align: center;
  padding: 13px 8px;
  text-decoration: none;
  font: 640 0.88rem var(--sans);
  background: var(--paper);
  color: var(--ink);
}
.dock a.p {
  background: var(--signal);
  color: #fff;
}
@media (max-width: 820px) {
  .dock {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
}

/* ---------- media placeholders (asset not supplied yet) ---------- */
.ph {
  position: relative;
  background: var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  text-align: center;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0.035) 75%,
    transparent 75%
  );
  background-size: 16px 16px;
}
.ph--wide {
  aspect-ratio: 16/9;
  min-height: 0;
}
.ph--tall {
  aspect-ratio: 4/5;
  min-height: 0;
}
.ph--hero {
  min-height: clamp(360px, 58vh, 620px);
  border-radius: 0;
}
.ph__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 7px 16px;
}
.ph__tag--play::before {
  content: '▶';
  margin-right: 9px;
  color: var(--blue-l);
}
.ph__note {
  font-size: 0.84rem;
  color: #8fa1ac;
  max-width: 38ch;
  line-height: 1.5;
  margin: 0;
}

/* ---------- hero with full-bleed media ----------
   Two concept panels stacked in the same box. Each carries its own media and
   its own copy, and they cross-fade slowly; the facts row is shared and never
   moves, so the hero never reads as a carousel. */
/* Two complete hero slides stacked in one grid cell. Each slide owns its media,
   its copy and its own figures row, so a slide is a self-contained hero — the
   rotation swaps the whole thing rather than animating parts of it. */
.vhero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: grid;
}
.vhero__slide {
  grid-area: 1/1;
  position: relative;
  display: grid;
  align-content: center;
  /* reserve the band the indicators sit in, so they never touch the figures row */
  padding-bottom: clamp(28px, 3.2vw, 42px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.1s ease,
    visibility 0s linear 1.1s;
}
.vhero__slide.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.1s ease,
    visibility 0s;
}
.vhero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
}
.vhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vhero__media .ph {
  height: 100%;
  border-radius: 0;
  min-height: 0;
}
.vhero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.9) 40%,
    rgba(10, 10, 10, 0.68) 70%,
    rgba(10, 10, 10, 0.58) 100%
  );
}
/* both clips occupy the full area; only one is visible at a time */
.vhero__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.vhero__v.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vhero__v,
  .vhero__slide {
    transition: none;
  }
}
.vhero__in {
  padding-block: clamp(56px, 9vw, 116px);
  max-width: 760px;
}
.vhero .eyebrow {
  color: var(--blue-l);
}
/* slide 2's heading is an h2 so the page keeps a single h1. It must render
   identically, so it inherits the same values as the base h1 rule. */
.vhero h1,
.vhero__in h2 {
  color: #fff;
  margin-bottom: 0.4em;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  letter-spacing: -0.012em;
}
.vhero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  color: #cfd8de;
  max-width: 56ch;
}
.vhero__facts {
  display: flex;
  gap: clamp(14px, 2.1vw, 30px);
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* slide indicators — two short bars, deliberately quiet */
.vhero__nav {
  grid-area: 1/1;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  gap: 9px;
  margin-inline: auto;
  width: 100%;
  max-width: var(--wrap);
  padding: 0 22px clamp(22px, 3vw, 34px);
}
.vhero__dot {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 0;
  line-height: 0;
}
.vhero__dot i {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    background 0.3s ease,
    width 0.3s ease;
}
.vhero__dot:hover i {
  background: rgba(255, 255, 255, 0.6);
}
.vhero__dot.is-on i {
  background: var(--blue-l);
  width: 52px;
}
.vhero__dot:focus-visible i {
  outline: 2px solid var(--blue-l);
  outline-offset: 4px;
}
.vhero__facts b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.85vw, 1.6rem);
  color: #fff;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.vhero__facts span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa1ac;
  white-space: nowrap;
}

/* contact strip directly under the hero — no hunting for a phone number */
.cstrip {
  background: var(--blue);
  color: #fff;
}
.cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
.cstrip__item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
}
.cstrip__item:hover {
  color: #fff;
}
.cstrip__item:hover .cstrip__v {
  text-decoration: underline;
}
.cstrip__ic {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  font-style: normal;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', system-ui, sans-serif;
}
.cstrip__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfe9ff;
}
.cstrip__v {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.cstrip__sep {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.25);
}

/* Line down — urgent, but restrained. A red dot and a red icon ring,
   not a red banner. Enough to catch the eye without shouting. */
.cstrip__item--urgent {
  position: relative;
  border-radius: 99px;
  padding: 5px 16px 5px 6px;
  margin-left: -6px;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.16s;
}
.cstrip__item--urgent:hover {
  background: rgba(255, 255, 255, 0.16);
}
.cstrip__ic--urgent {
  background: var(--urgent);
  box-shadow: 0 0 0 3px rgba(226, 58, 48, 0.28);
}
.cstrip__k--urgent {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ffd9d6;
}
.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--urgent);
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.75);
  animation: pulse 2.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(226, 58, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(226, 58, 48, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}
.cstrip__last {
  margin-left: auto;
}
@media (max-width: 820px) {
  .cstrip .wrap {
    gap: 14px;
  }
  .cstrip__sep {
    display: none;
  }
  .cstrip__last {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- WET DETECT feature block ---------- */
.wetsec {
  position: relative;
  overflow: hidden;
}
.wet {
  background: var(--ink);
  color: #d6dee3;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.wet__body {
  padding: clamp(26px, 4vw, 48px);
}
.wet__media {
  background: #000;
  min-height: 100%;
}
.wet__media .ph,
.wet__media .vid {
  border-radius: 0;
  height: 100%;
}
.wet__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wet h2 {
  color: #fff;
}

/* offset variant: the copy runs past the panel on the right */
.wet--offset {
  background: transparent;
  overflow: visible;
}
.wet--offset .wet__grid {
  grid-template-columns: 1.32fr 0.68fr;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  position: relative;
}
.wet--offset .wet__body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 46px)
    clamp(28px, 4.4vw, 54px) clamp(26px, 4vw, 52px);
}
/* the copy column extends over the panel edge */
.wet--offset .wet__body::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -44px;
  width: 44px;
  background: var(--ink);
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 55%, transparent 100%);
}
/* keep the copy inside its own column so the panel stays readable */
.wet--offset .wet__body p,
.wet--offset .wet__body ul {
  max-width: 47ch;
}
.wet--offset .wet__body h2 {
  max-width: 16ch;
}
.wet__panel {
  position: relative;
  background: linear-gradient(160deg, #12212b 0%, #0a0a0a 78%);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 32px)
    clamp(26px, 3.4vw, 38px) clamp(38px, 4vw, 54px);
}
.wet__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%
  );
  background-size: 14px 14px;
}
.wet__panelin {
  position: relative;
  z-index: 1;
}
.wet__panelin p {
  color: #a9b7c0;
  font-size: 0.92rem;
}
.wet__stats {
  display: grid;
  gap: 14px;
  margin-top: 1.4rem;
}
.wet__stats div {
  border-left: 2px solid var(--blue);
  padding-left: 12px;
}
.wet__stats b {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: #fff;
  line-height: 1.1;
}
.wet__stats span {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa1ac;
}
/* both WET DETECT videos sit together, below the copy */
.wet__videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.wet__videos .vid {
  border-color: #1e2b34;
}
.wet__videos figcaption {
  background: var(--ink);
  color: #8fa1ac;
  border-top-color: #1e2b34;
}
@media (max-width: 900px) {
  .wet--offset .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet--offset .wet__body::after {
    display: none;
  }
  .wet__panel {
    min-height: 200px;
  }
  .wet__videos {
    grid-template-columns: 1fr;
  }
}

/* ---------- quality / why-us grid ---------- */
.qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.6rem 0;
}
.qcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.qcard:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.4);
}
.qcard__k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-w);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.85rem;
}
.qcard h3 {
  margin-bottom: 0.45em;
}
.qcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 700px) {
  .qgrid {
    grid-template-columns: 1fr;
  }
}
.wet__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--blue-l);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1.1rem;
}
.wet ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
}
.wet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.65rem;
  color: #c3cdd4;
}
.wet li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--blue-l);
}
.wet strong {
  color: #fff;
}
@media (max-width: 900px) {
  .wet__grid {
    grid-template-columns: 1fr;
  }
  .wet__media {
    min-height: 280px;
  }
}

/* ---------- product cards with imagery ---------- */
.pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(10, 10, 10, 0.45);
}
.pcard__img {
  aspect-ratio: 4/3;
  background: var(--steel-2);
  overflow: hidden;
}
.pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pcard h3 {
  margin-bottom: 0.4em;
}
.pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1;
}
.pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.pcard:hover .pcard__go {
  text-decoration: underline;
}

/* Products grid: four columns, two rows. Every category is styled identically —
   no category gets special colour, badge or emphasis. */
.mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mega__prod {
    grid-template-columns: 1fr;
  }
}

/* Compact card for the dropdown: name and kicker only, so eight products fit
   in a menu that stays a sensible height. */
.pcard--mini .pcard__img {
  aspect-ratio: 3/2;
}
.pcard--mini .pcard__img img {
  padding: 10px;
}
.pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.pcard--mini .pcard__k {
  margin-bottom: 0;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.pcard--mini:hover .pcard__k {
  color: var(--blue);
}

/* ---------- hygienic component grid (WET DETECT) ---------- */
.hyg {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hyg__c {
  grid-column: span 2;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hyg__c--wide {
  grid-column: span 3;
}
.hyg__c img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--steel-2);
}
.hyg__c figcaption {
  padding: 16px 18px 18px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hyg__c figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .hyg {
    grid-template-columns: repeat(2, 1fr);
  }
  .hyg__c,
  .hyg__c--wide {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .hyg {
    grid-template-columns: 1fr;
  }
}

/* ---------- 40-year anniversary mark ----------
   Two assets: logo-40-aar.png (dark, for light backgrounds) and
   logo-40-aar-hvid.png (white wordmark, blue slogan, for dark backgrounds). */
.anniv {
  display: block;
  height: auto;
  max-width: 100%;
}
.anniv--sm {
  width: min(260px, 60%);
  margin: 1.8rem 0 0.4rem;
}
.anniv--lg {
  width: min(430px, 88%);
  margin: 0 0 1.4rem;
}

/* anniversary feature card on the news hub — links out to LinkedIn */
.anniv-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  margin-top: 2.4rem;
  text-decoration: none;
  color: #c6d1d8;
  border: 1px solid var(--ink);
  transition: border-color 0.18s;
}
.anniv-card:hover {
  border-color: var(--blue);
}
.anniv-card .anniv {
  margin: 0;
  width: 100%;
  max-width: 400px;
}
.anniv-card h2 {
  color: #fff;
  margin: 0.15em 0 0.5em;
}
.anniv-card p {
  color: #b7c3cb;
  margin-bottom: 1rem;
  max-width: 52ch;
}
.anniv-card__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--blue-l);
}
.anniv-card:hover .anniv-card__go {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .anniv-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .anniv-card .anniv {
    width: min(330px, 80%);
  }
}

/* anniversary panel on the About page */
.annivbox {
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-bottom: 14px;
}
.annivbox .anniv {
  width: min(340px, 100%);
  margin: 0 0 1rem;
}
.annivbox p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #a8b6bf;
  margin: 0;
}

/* ---------- careers: application contact ---------- */
.applybox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 1.6rem;
  padding: 26px 30px;
  background: var(--ink);
  border-radius: var(--r);
  color: #b7c3cb;
}
.applybox__who b {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: #fff;
}
.applybox__who em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-l);
  display: block;
  margin-top: 4px;
}
.applybox__routes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.applybox__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.42rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.applybox__tel:hover {
  color: var(--blue-l);
}
.applybox__mail {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: #b7c3cb;
  text-decoration: none;
}
.applybox__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 560px) {
  .applybox {
    padding: 22px;
  }
}

/* ---------- exhibitions / events ---------- */
.evlist {
  display: grid;
  gap: 10px;
}
.ev {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.ev:hover {
  border-color: var(--ink);
  box-shadow: 0 10px 24px -20px rgba(10, 10, 10, 0.5);
}
.ev__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--line-2);
  padding-right: clamp(10px, 1.6vw, 18px);
  align-self: stretch;
}
.ev__when b {
  font-family: var(--display);
  font-size: 1.24rem;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ev__when em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.25;
}
.ev__b h3 {
  margin: 0 0 2px;
  font-size: 1.06rem;
}
.ev__where {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-3);
}
.ev__full {
  color: #9aa5ac;
}
@media (max-width: 900px) {
  .ev__full {
    display: none;
  }
}
.ev__cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.ev__cta:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .ev {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .ev__when {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding: 0 0 10px;
    text-align: left;
  }
  .ev__when em {
    margin-top: 0;
  }
}

/* ---------- brochure download slot ---------- */
.broch {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 1.8rem 0;
  background: var(--steel-2);
}
.broch__ic {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.broch__t {
  flex: 1;
  min-width: 220px;
}
.broch__t b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
}
.broch__t span {
  font-size: 0.87rem;
  color: var(--ink-3);
}

/* ---------- industries dropdown, larger tiles ---------- */
.mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}
.itile img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.itile:hover img {
  transform: scale(1.04);
}
.itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- references ---------- */
.refbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.refbar div {
  background: #fff;
  padding: 20px 18px;
  text-align: center;
}
.refbar b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.refbar span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .refbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.logogrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.logogrid div {
  background: #fff;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #b4bec5;
  text-align: center;
}
@media (max-width: 820px) {
  .logogrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logogrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- customer reference logos ----------
   Greyscale at rest so eight different brand palettes do not fight each
   other or the page; full colour on hover. */
.reflogos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.reflogo {
  margin: 0;
  background: #fff;
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.18s;
}
.reflogo:hover {
  background: var(--steel-2);
}
.reflogo img {
  width: 100%;
  max-width: 190px;
  height: 66px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}
.reflogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.reflogo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 820px) {
  .reflogos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .reflogos {
    grid-template-columns: 1fr;
  }
  .reflogo img {
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reflogo img {
    transition: none;
  }
}

/* ---------- count-up figures ---------- */
.stat b.tick {
  font-variant-numeric: tabular-nums;
}
/* Standalone use outside .refbar (About page and similar) */
.statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin: 1.8rem 0;
}
.statrow .stat {
  background: #fff;
  padding: 22px 18px;
  text-align: center;
}
.statrow .stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.statrow .stat span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.statrow--ondark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
}
.statrow--ondark .stat {
  background: var(--ink);
}
.statrow--ondark .stat b {
  color: #fff;
}
.statrow--ondark .stat span {
  color: #8fa1ac;
}
@media (max-width: 700px) {
  .statrow {
    grid-template-columns: repeat(2, 1fr);
  }
}

.maplist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 26px;
}
.maplist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.maplist li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.maplist li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .maplist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maplist {
    grid-template-columns: 1fr;
  }
}

/* ---------- cases & news ---------- */
.postlist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.post {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.post:hover {
  background: var(--steel-2);
}
.post__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 3px;
}
.post__meta span {
  display: block;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.post h3 {
  margin-bottom: 0.3em;
}
.post p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
  max-width: 64ch;
}
.post__go {
  font-family: var(--mono);
  color: var(--blue);
  padding-top: 4px;
}
@media (max-width: 760px) {
  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .post__go {
    display: none;
  }
}

.kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1.6rem 0;
}
.kpi div {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  padding: 16px 18px;
}
.kpi b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.kpi span {
  font-size: 0.84rem;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .kpi {
    grid-template-columns: 1fr;
  }
}

/* ---------- careers ---------- */
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.job h3 {
  margin-bottom: 0.25em;
}
.job p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job__tags {
  margin-top: 0.6rem;
}
@media (max-width: 640px) {
  .job {
    grid-template-columns: 1fr;
  }
}

/* ---------- subtle motion & depth on inner pages ----------
   Restrained on purpose: a short fade-and-rise on scroll, and
   slightly warmer hover states. Fully disabled for reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-d1 {
  transition-delay: 0.06s;
}
.reveal-d2 {
  transition-delay: 0.12s;
}
.reveal-d3 {
  transition-delay: 0.18s;
}
.reveal-d4 {
  transition-delay: 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .itile:hover img,
  .pcard:hover,
  .qcard:hover,
  a.card:hover {
    transform: none;
  }
}

/* section rhythm: a hairline accent above alternating bands */
.sec--steel {
  position: relative;
}
.sec--steel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue) 0,
    var(--blue) 120px,
    transparent 120px
  );
  opacity: 0.85;
}

/* cards lift a little more, consistently */
a.card {
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}

/* spec tables: highlight the row under the cursor */
.spec tbody tr {
  transition: background 0.14s;
}
.spec tbody tr:hover {
  background: var(--blue-w);
}

/* quiet texture behind the darkest bands so they are not flat */
.sec--ink,
.band {
  position: relative;
  overflow: hidden;
}
.band::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 114, 206, 0.28) 0%,
    transparent 68%
  );
  pointer-events: none;
}

/* rail headings get a soft accent bar that grows in */
.rail {
  position: relative;
}
.rail--sig::after,
.rail--blue::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--blue-l);
  transition: height 0.6s ease 0.1s;
}
.reveal.in .rail--sig::after,
.reveal.in .rail--blue::after,
.rail--sig.in::after,
.rail--blue.in::after {
  height: 38px;
}

/* ---------- misc ---------- */
.lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.small {
  font-size: 0.86rem;
  color: var(--ink-3);
}
.two {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}
@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}
.stick {
  position: sticky;
  top: 92px;
}
@media (max-width: 900px) {
  .stick {
    position: static;
  }
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
.container {
  max-width: none !important;
}

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* EC-NAV-364: …but an auto margin on the menu <ul> IS the navbar's horizontal
   layout, not a stray UA default. Bootstrap's .navbar-nav.ml-auto (and the
   Tailwind / BS5 spellings) is what pushes the menu away from the brand over to
   the right edge; the ID-scoped "margin: 0 !important" resets above outrank the
   utility's own !important and collapse the whole bar to the left (Butterfly
   Cancer Care Foundation). Re-asserted here — last, and with a 3-element variant
   that ties the highest-specificity reset ("header nav.main-nav ul#…") so it wins
   on both counts. Additive: these selectors match ONLY a <ul> that literally
   carries the utility, so every other menu keeps today's layout byte-for-byte. */
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
/* EC-GALLERY-002d: [data-wpc-live-dialog] opts out — a dialog WPConvert injects on purpose
   (e.g. the gallery lightbox) is not snapshot debris, and these !important rules would
   otherwise beat even its inline styles and leave it permanently invisible. */
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* EC-NAV-361: the rule above uses BARE TAG selectors, but <header> and <nav> are
   also valid SECTIONING content — a hero banner, an article header, a breadcrumb
   trail. Those live inside <main class="site-main">, and inflating them to
   z-index:1000 puts PAGE CONTENT on a layer above almost everything, where it
   beats any overlay the source site authored (Jegson Publicity: the enquiry modal
   is z-index:100, so the 78vh hero <header> painted straight over the open popup).
   Site chrome is always emitted OUTSIDE <main>, so scoping the repair to
   descendants of the content wrapper can never reach the real navbar.
   Only z-index is reset — position is left alone so the EC-NAV-190 absolute-overlay
   and EC-NAV-352 CSS-authored-fixed-nav behaviours are untouched. "auto" is what an
   un-styled hero has, and it is the value that restores the source ordering: the
   base rule already beats a Tailwind z-* utility (it is !important), so exempting
   those would merely leave them inflated to 1000 — the very bug being fixed. */
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
/* EC-NAV-363: same source-neutralisation exemption as the fixed block below. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
/* EC-NAV-363: the substring selectors additionally exempt any framework position
   class the SOURCE cascade already neutralises (Bootstrap .fixed-top redeclared
   in-flow by a later .navbar{position:relative}). The exact-token `nav.fixed`
   (Tailwind) selectors are never guarded — they have no such override. */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it. */
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Skipped hero overlap CSS — nav is not fixed/sticky */

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body {
  line-height: 1.6;
}
body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* From dt-header/dt-header.css */
/* Detectronic header — scoped module.
   Every selector is prefixed with .dt-hdr, and the custom properties are declared
   on .dt-hdr rather than :root, so nothing here can reach the rest of the site.
   Generated from the finished site's stylesheet; do not hand-edit. */

.dt-hdr {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --signal: #0072ce;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --r: 12px;
}
.dt-hdr .wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.dt-hdr .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dt-hdr .skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.dt-hdr .skip:focus {
  left: 8px;
  top: 8px;
}
.dt-hdr .mono,
.dt-hdr .eyebrow,
.dt-hdr .spec td:not(:first-child),
.dt-hdr .spec th:not(:first-child),
.dt-hdr .tel,
.dt-hdr .val {
  font-family: var(--mono);
}
.dt-hdr .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 0.85rem;
  display: block;
}
.dt-hdr .eyebrow--sig {
  color: var(--signal);
}
.dt-hdr .top {
  background: var(--ink);
  color: #b9c4cc;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.dt-hdr .top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
}
.dt-hdr .top__nav {
  display: flex;
  flex-wrap: wrap;
}
.dt-hdr .top__nav a {
  color: #c9d3da;
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.dt-hdr .top__nav a:first-child {
  padding-left: 0;
}
.dt-hdr .top__nav a:hover {
  color: #fff;
  background: #1c1c1c;
}
.dt-hdr .top__nav a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--blue);
}
.dt-hdr .top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.dt-hdr .top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.dt-hdr .top__call:hover {
  background: #0086f0;
  color: #fff;
}
.dt-hdr .top__call b {
  font-weight: 600;
  color: #cfe9ff;
  letter-spacing: 0.04em;
}
.dt-hdr .top__call .tel {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dt-hdr .top__mail {
  color: #c9d3da;
  text-decoration: none;
}
.dt-hdr .top__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .dt-hdr .top__mail {
    display: none;
  }
}
.dt-hdr .top__lang {
  display: flex;
  border: 1px solid #2c2c2c;
  border-radius: 99px;
  overflow: hidden;
}
.dt-hdr .top__lang a {
  color: #8d99a2;
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.dt-hdr .top__lang a.on {
  background: var(--blue);
  color: #fff;
}
.dt-hdr .top__lang a:not(.on):hover {
  background: #1c1c1c;
  color: #fff;
}
@media (max-width: 900px) {
  .dt-hdr .top .wrap {
    flex-wrap: wrap;
    gap: 0;
  }
  .dt-hdr .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .dt-hdr .top__nav a {
    padding: 8px 6px;
  }
  .dt-hdr .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid #1c1c1c;
  }
}
.dt-hdr .head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.dt-hdr .head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.dt-hdr .brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.dt-hdr .brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .dt-hdr .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .dt-hdr .brand img {
    height: 17px;
  }
}
.dt-hdr .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.dt-hdr .nav__btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dt-hdr .nav__btn:hover,
.dt-hdr .nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.dt-hdr .chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.dt-hdr .nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.dt-hdr .nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.dt-hdr .nav__cta:hover {
  background: var(--blue-d);
  color: #fff;
}
.dt-hdr .searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.dt-hdr .searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.dt-hdr .navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.dt-hdr .mega {
  border-top: 1px solid var(--line-2);
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(10, 10, 10, 0.35);
  animation: dtHdrMegaIn 0.16s ease-out;
}
@keyframes dtHdrMegaIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dt-hdr .mega {
    animation: none;
  }
}
.dt-hdr .mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.dt-hdr .mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.dt-hdr .mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.dt-hdr .mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.dt-hdr .mega__h:hover {
  color: var(--blue);
}
.dt-hdr .mega__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-hdr .mega__cols li a {
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.dt-hdr .mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.dt-hdr .mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dt-hdr .mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.dt-hdr .mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.dt-hdr .mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.dt-hdr .mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dt-hdr .mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.dt-hdr .mega__card:hover {
  border-color: var(--ink);
}
.dt-hdr .mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.dt-hdr .mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.dt-hdr .mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.dt-hdr .mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.dt-hdr .mega__aside--urgent {
  background: var(--ink);
}
.dt-hdr .mega__aside--urgent p {
  color: #b4c1c9;
}
.dt-hdr .mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.dt-hdr .mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .dt-hdr .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .dt-hdr .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dt-hdr .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .dt-hdr .navbtn {
    display: block;
  }
  .dt-hdr .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .dt-hdr .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .dt-hdr .nav.open {
    display: flex;
  }
  .dt-hdr .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    padding: 13px 2px;
  }
  .dt-hdr .nav__cta {
    margin: 12px 0 4px;
    text-align: center;
  }
  .dt-hdr .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .dt-hdr .mega__cols,
  .dt-hdr .mega__grid,
  .dt-hdr .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .dt-hdr .mega__cols,
  .dt-hdr .mega__grid,
  .dt-hdr .mega__svc {
    grid-template-columns: 1fr;
  }
}
.dt-hdr .srch {
  position: sticky;
  top: 0;
  z-index: 110;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 30px -22px rgba(10, 10, 10, 0.4);
}
.dt-hdr .srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.dt-hdr .srch input {
  flex: 1;
  font: inherit;
  font-size: 1.15rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.dt-hdr .srch input:focus {
  outline: 0;
  border-bottom-color: var(--blue);
}
.dt-hdr .srch__x {
  background: none;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.dt-hdr .srch__x:hover {
  color: var(--ink);
}
.dt-hdr .srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.dt-hdr .srch__res a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.dt-hdr .srch__res a:hover {
  background: var(--steel-2);
}
.dt-hdr .srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.dt-hdr .srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.dt-hdr .srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.dt-hdr .srch__res p {
  color: var(--ink-3);
  padding: 16px 0;
}
.dt-hdr .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.dt-hdr .btn--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.dt-hdr .btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: #fff;
}
.dt-hdr .btn--ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.dt-hdr .btn--ink:hover {
  background: #000;
  color: #fff;
}
.dt-hdr .btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.dt-hdr .btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.dt-hdr .btn--ondark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.dt-hdr .btn--ondark:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.dt-hdr .btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.dt-hdr .btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.dt-hdr .btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}
.dt-hdr .vhero .eyebrow {
  color: var(--blue-l);
}
.dt-hdr .cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
@media (max-width: 820px) {
  .dt-hdr .cstrip .wrap {
    gap: 14px;
  }
}
.dt-hdr .pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.dt-hdr .pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(10, 10, 10, 0.45);
}
.dt-hdr .pcard__img {
  aspect-ratio: 4/3;
  background: var(--steel-2);
  overflow: hidden;
}
.dt-hdr .pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.dt-hdr .pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dt-hdr .pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.dt-hdr .pcard h3 {
  margin-bottom: 0.4em;
}
.dt-hdr .pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1;
}
.dt-hdr .pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.dt-hdr .pcard:hover .pcard__go {
  text-decoration: underline;
}
.dt-hdr .mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .dt-hdr .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .dt-hdr .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .dt-hdr .mega__prod {
    grid-template-columns: 1fr;
  }
}
.dt-hdr .pcard--mini .pcard__img {
  aspect-ratio: 3/2;
}
.dt-hdr .pcard--mini .pcard__img img {
  padding: 10px;
}
.dt-hdr .pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.dt-hdr .pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.dt-hdr .pcard--mini .pcard__k {
  margin-bottom: 0;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.dt-hdr .pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.dt-hdr .mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.dt-hdr .itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.dt-hdr .itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}
.dt-hdr .itile img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.dt-hdr .itile:hover img {
  transform: scale(1.04);
}
.dt-hdr .itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.dt-hdr .itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dt-hdr .itile:hover img,
  .dt-hdr .pcard:hover,
  .dt-hdr .qcard:hover,
  .dt-hdr a.card:hover {
    transform: none;
  }
}

/* Source extracted CSS */

/* From dt-header/dt-header.css */
/* Detectronic header — scoped module.
   Every selector is prefixed with .dt-hdr, and the custom properties are declared
   on .dt-hdr rather than :root, so nothing here can reach the rest of the site.
   Generated from the finished site's stylesheet; do not hand-edit. */

.dt-hdr {
  --ink: #0a0a0a;
  --ink-2: #3c4247;
  --ink-3: #6e767c;
  --steel: #edf1f4;
  --steel-2: #f5f8fa;
  --blue: #0072ce;
  --blue-d: #005aa3;
  --blue-l: #8ed6ff;
  --signal: #0072ce;
  --line: #d4dde3;
  --line-2: #e6ecf0;
  --mono:
    ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas,
    monospace;
  --wrap: 1180px;
  --r: 12px;
}
.dt-hdr .wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.dt-hdr .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dt-hdr .skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.dt-hdr .skip:focus {
  left: 8px;
  top: 8px;
}
.dt-hdr .mono,
.dt-hdr .eyebrow,
.dt-hdr .spec td:not(:first-child),
.dt-hdr .spec th:not(:first-child),
.dt-hdr .tel,
.dt-hdr .val {
  font-family: var(--mono);
}
.dt-hdr .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 0.85rem;
  display: block;
}
.dt-hdr .eyebrow--sig {
  color: var(--signal);
}
.dt-hdr .top {
  background: var(--ink);
  color: #b9c4cc;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
}
.dt-hdr .top .wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 0;
}
.dt-hdr .top__nav {
  display: flex;
  flex-wrap: wrap;
}
.dt-hdr .top__nav a {
  color: #c9d3da;
  text-decoration: none;
  padding: 9px 13px;
  display: block;
  transition:
    background 0.12s,
    color 0.12s;
}
.dt-hdr .top__nav a:first-child {
  padding-left: 0;
}
.dt-hdr .top__nav a:hover {
  color: #fff;
  background: #1c1c1c;
}
.dt-hdr .top__nav a[aria-current] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--blue);
}
.dt-hdr .top__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.dt-hdr .top__call {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  border-radius: 99px;
  padding: 6px 15px;
  transition: background 0.13s;
}
.dt-hdr .top__call:hover {
  background: #0086f0;
  color: #fff;
}
.dt-hdr .top__call b {
  font-weight: 600;
  color: #cfe9ff;
  letter-spacing: 0.04em;
}
.dt-hdr .top__call .tel {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dt-hdr .top__mail {
  color: #c9d3da;
  text-decoration: none;
}
.dt-hdr .top__mail:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  .dt-hdr .top__mail {
    display: none;
  }
}
.dt-hdr .top__lang {
  display: flex;
  border: 1px solid #2c2c2c;
  border-radius: 99px;
  overflow: hidden;
}
.dt-hdr .top__lang a {
  color: #8d99a2;
  text-decoration: none;
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.dt-hdr .top__lang a.on {
  background: var(--blue);
  color: #fff;
}
.dt-hdr .top__lang a:not(.on):hover {
  background: #1c1c1c;
  color: #fff;
}
@media (max-width: 900px) {
  .dt-hdr .top .wrap {
    flex-wrap: wrap;
    gap: 0;
  }
  .dt-hdr .top__nav {
    width: 100%;
    justify-content: space-between;
    font-size: 0.66rem;
  }
  .dt-hdr .top__nav a {
    padding: 8px 6px;
  }
  .dt-hdr .top__right {
    width: 100%;
    justify-content: space-between;
    padding-block: 7px;
    border-top: 1px solid #1c1c1c;
  }
}
.dt-hdr .head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.dt-hdr .head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 13px;
}
.dt-hdr .brand {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
  line-height: 0;
}
.dt-hdr .brand img {
  height: 23px;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .dt-hdr .brand img {
    height: 20px;
  }
}
@media (max-width: 520px) {
  .dt-hdr .brand img {
    height: 17px;
  }
}
.dt-hdr .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.dt-hdr .nav__btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dt-hdr .nav__btn:hover,
.dt-hdr .nav__btn[aria-expanded='true'] {
  background: var(--steel);
  color: var(--ink);
}
.dt-hdr .chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
  opacity: 0.6;
}
.dt-hdr .nav__btn[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.dt-hdr .nav__cta {
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  margin-left: 10px;
  white-space: nowrap;
}
.dt-hdr .nav__cta:hover {
  background: var(--blue-d);
  color: #fff;
}
.dt-hdr .searchbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-2);
  padding: 9px 10px;
  display: inline-flex;
  flex: 0 0 auto;
}
.dt-hdr .searchbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.dt-hdr .navbtn {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: 700 0.85rem var(--display);
  cursor: pointer;
}
.dt-hdr .mega {
  border-top: 1px solid var(--line-2);
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(10, 10, 10, 0.35);
  animation: dtHdrMegaIn 0.16s ease-out;
}
@keyframes dtHdrMegaIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dt-hdr .mega {
    animation: none;
  }
}
.dt-hdr .mega__in {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 36px;
  padding-block: 30px 34px;
}
.dt-hdr .mega--narrow .mega__in {
  grid-template-columns: 1fr 290px;
}
.dt-hdr .mega__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
}
.dt-hdr .mega__h {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.dt-hdr .mega__h:hover {
  color: var(--blue);
}
.dt-hdr .mega__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dt-hdr .mega__cols li a {
  display: block;
  padding: 5px 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  text-decoration: none;
}
.dt-hdr .mega__cols li a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.dt-hdr .mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dt-hdr .mega__ind {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.dt-hdr .mega__ind img {
  border-radius: 8px;
  flex: 0 0 auto;
}
.dt-hdr .mega__ind:hover {
  background: var(--steel-2);
  border-color: var(--line);
  color: var(--blue);
}
.dt-hdr .mega__svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.dt-hdr .mega__card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.13s;
}
.dt-hdr .mega__card:hover {
  border-color: var(--ink);
}
.dt-hdr .mega__card b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.dt-hdr .mega__card span {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
}
.dt-hdr .mega__aside {
  background: var(--steel-2);
  border-radius: var(--r);
  padding: 20px;
}
.dt-hdr .mega__aside p {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.dt-hdr .mega__aside--urgent {
  background: var(--ink);
}
.dt-hdr .mega__aside--urgent p {
  color: #b4c1c9;
}
.dt-hdr .mega__link {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  color: var(--blue);
  text-decoration: none;
}
.dt-hdr .mega__link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .dt-hdr .mega__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .dt-hdr .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dt-hdr .mega__svc {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1020px) {
  .dt-hdr .navbtn {
    display: block;
  }
  .dt-hdr .searchbtn {
    order: -1;
    margin-left: auto;
  }
  .dt-hdr .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line-2);
    margin-top: 10px;
    padding-top: 6px;
  }
  .dt-hdr .nav.open {
    display: flex;
  }
  .dt-hdr .nav__btn {
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    padding: 13px 2px;
  }
  .dt-hdr .nav__cta {
    margin: 12px 0 4px;
    text-align: center;
  }
  .dt-hdr .mega__in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 20px;
  }
  .dt-hdr .mega__cols,
  .dt-hdr .mega__grid,
  .dt-hdr .mega__svc {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .dt-hdr .mega__cols,
  .dt-hdr .mega__grid,
  .dt-hdr .mega__svc {
    grid-template-columns: 1fr;
  }
}
.dt-hdr .srch {
  position: sticky;
  top: 0;
  z-index: 110;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 30px -22px rgba(10, 10, 10, 0.4);
}
.dt-hdr .srch__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.dt-hdr .srch input {
  flex: 1;
  font: inherit;
  font-size: 1.15rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  padding: 9px 2px;
  background: transparent;
  color: var(--ink);
}
.dt-hdr .srch input:focus {
  outline: 0;
  border-bottom-color: var(--blue);
}
.dt-hdr .srch__x {
  background: none;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 8px;
}
.dt-hdr .srch__x:hover {
  color: var(--ink);
}
.dt-hdr .srch__res {
  max-height: 62vh;
  overflow: auto;
  padding-bottom: 18px;
}
.dt-hdr .srch__res a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.dt-hdr .srch__res a:hover {
  background: var(--steel-2);
}
.dt-hdr .srch__res b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.dt-hdr .srch__res em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
}
.dt-hdr .srch__res span {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.dt-hdr .srch__res p {
  color: var(--ink-3);
  padding: 16px 0;
}
.dt-hdr .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.dt-hdr .btn--sig {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.dt-hdr .btn--sig:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  color: #fff;
}
.dt-hdr .btn--ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.dt-hdr .btn--ink:hover {
  background: #000;
  color: #fff;
}
.dt-hdr .btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.dt-hdr .btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.dt-hdr .btn--ondark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.dt-hdr .btn--ondark:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.dt-hdr .btn--sm {
  padding: 10px 14px;
  font-size: 0.86rem;
}
.dt-hdr .btn .ar {
  font-family: var(--mono);
  opacity: 0.75;
}
.dt-hdr .btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}
.dt-hdr .vhero .eyebrow {
  color: var(--blue-l);
}
.dt-hdr .cstrip .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  flex-wrap: wrap;
  padding-block: 15px;
}
@media (max-width: 820px) {
  .dt-hdr .cstrip .wrap {
    gap: 14px;
  }
}
.dt-hdr .pcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.dt-hdr .pcard:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(10, 10, 10, 0.45);
}
.dt-hdr .pcard__img {
  aspect-ratio: 4/3;
  background: var(--steel-2);
  overflow: hidden;
}
.dt-hdr .pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.dt-hdr .pcard__b {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dt-hdr .pcard__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.dt-hdr .pcard h3 {
  margin-bottom: 0.4em;
}
.dt-hdr .pcard p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  flex: 1;
}
.dt-hdr .pcard__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
}
.dt-hdr .pcard:hover .pcard__go {
  text-decoration: underline;
}
.dt-hdr .mega__prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .dt-hdr .mega__prod {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .dt-hdr .mega__prod {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .dt-hdr .mega__prod {
    grid-template-columns: 1fr;
  }
}
.dt-hdr .pcard--mini .pcard__img {
  aspect-ratio: 3/2;
}
.dt-hdr .pcard--mini .pcard__img img {
  padding: 10px;
}
.dt-hdr .pcard--mini .pcard__b {
  padding: 12px 14px 14px;
}
.dt-hdr .pcard--mini h3 {
  font-size: 0.97rem;
  margin-bottom: 0.2em;
  line-height: 1.2;
}
.dt-hdr .pcard--mini .pcard__k {
  margin-bottom: 0;
  font-size: 0.62rem;
  color: var(--ink-3);
  line-height: 1.35;
}
.dt-hdr .pcard--mini:hover .pcard__k {
  color: var(--blue);
}
.dt-hdr .mega__ind2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.dt-hdr .itile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.dt-hdr .itile:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -20px rgba(10, 10, 10, 0.45);
}
.dt-hdr .itile img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.dt-hdr .itile:hover img {
  transform: scale(1.04);
}
.dt-hdr .itile span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 11px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.22;
  color: var(--ink);
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.dt-hdr .itile:hover span {
  color: var(--blue);
}
@media (max-width: 1100px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1020px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .dt-hdr .mega__ind2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dt-hdr .itile:hover img,
  .dt-hdr .pcard:hover,
  .dt-hdr .qcard:hover,
  .dt-hdr a.card:hover {
    transform: none;
  }
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
/* EC-CONTAIN-001: site defines own container/section widths — no override needed */

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* EC-NAV-364: …but an auto margin on the menu <ul> IS the navbar's horizontal
   layout, not a stray UA default. Bootstrap's .navbar-nav.ml-auto (and the
   Tailwind / BS5 spellings) is what pushes the menu away from the brand over to
   the right edge; the ID-scoped "margin: 0 !important" resets above outrank the
   utility's own !important and collapse the whole bar to the left (Butterfly
   Cancer Care Foundation). Re-asserted here — last, and with a 3-element variant
   that ties the highest-specificity reset ("header nav.main-nav ul#…") so it wins
   on both counts. Additive: these selectors match ONLY a <ul> that literally
   carries the utility, so every other menu keeps today's layout byte-for-byte. */
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
/* EC-GALLERY-002d: [data-wpc-live-dialog] opts out — a dialog WPConvert injects on purpose
   (e.g. the gallery lightbox) is not snapshot debris, and these !important rules would
   otherwise beat even its inline styles and leave it permanently invisible. */
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* EC-NAV-361: the rule above uses BARE TAG selectors, but <header> and <nav> are
   also valid SECTIONING content — a hero banner, an article header, a breadcrumb
   trail. Those live inside <main class="site-main">, and inflating them to
   z-index:1000 puts PAGE CONTENT on a layer above almost everything, where it
   beats any overlay the source site authored (Jegson Publicity: the enquiry modal
   is z-index:100, so the 78vh hero <header> painted straight over the open popup).
   Site chrome is always emitted OUTSIDE <main>, so scoping the repair to
   descendants of the content wrapper can never reach the real navbar.
   Only z-index is reset — position is left alone so the EC-NAV-190 absolute-overlay
   and EC-NAV-352 CSS-authored-fixed-nav behaviours are untouched. "auto" is what an
   un-styled hero has, and it is the value that restores the source ordering: the
   base rule already beats a Tailwind z-* utility (it is !important), so exempting
   those would merely leave them inflated to 1000 — the very bug being fixed. */
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
/* EC-NAV-363: same source-neutralisation exemption as the fixed block below. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
/* EC-NAV-363: the substring selectors additionally exempt any framework position
   class the SOURCE cascade already neutralises (Bootstrap .fixed-top redeclared
   in-flow by a later .navbar{position:relative}). The exact-token `nav.fixed`
   (Tailwind) selectors are never guarded — they have no such override. */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it. */
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
 * stack the hero at document top with fixed nav overlaid; body/main background shows through
 * any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
 * (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
 * align with the original SPA.
 * Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
 * :first-of-type required: newline/whitespace between #primary and hero <section> breaks :first-child. */
body.front-page
  .site-main
  #primary
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
  /* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
  margin-top: calc(
    -1 * var(--wpconvert-header-bar-height, 4rem) -
      var(--wp-admin--admin-bar--height, 0px)
  );
}

/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
 * so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer.
 * EC-NAV-323: Also offset header.fixed — React/Vite SPAs (Kai.dev) use <header class="fixed top-0">,
 * not bare nav.fixed, so the round-1 EC-NAV-089 selectors never matched. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav),
body.admin-bar header.fixed.top-0,
body.admin-bar header.fixed[class*='top-0'] {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
 * for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
 * pushes <main> down while body background shows through → white/cream band (~nav height) under
 * the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
  padding-top: 0 !important;
}

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body {
  line-height: 1.6;
}
body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* EC-STATIC-013 / EC-NAV-352: Site CSS sets position:sticky on nav — override WPConvert base relative reset.
   Both selectors are scoped to <nav> and carry :not([class*='absolute']); the
   nav[role='navigation'] variant (1,4,1) beats the base [role='navigation'] rule
   (1,4,0) that the generated primary-nav markup otherwise matches. Source-order wins. */
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
nav[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: sticky !important;
}

/* EC-NAV-162b: Site CSS sets position:sticky on header — override WPConvert base relative reset.
   Non-Tailwind sites define fixed positioning in their stylesheet, not as a utility class.
   EC-NAV-197: selector includes :not([class*='absolute']) so specificity (0,4,0) ties the
   EC-NAV-190 safety-net; source-order then makes this override win the !important cascade. */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']) {
  position: sticky !important;
  z-index: 1000 !important;
}

/* ── Blog Templates ─────────────────────────────────────── */

/* Prose typography for single post content */
/* EC-BLOG-184: Inherit the page's own body text colour instead of forcing the
   shadcn light-mode --foreground token. On dark-themed sites --foreground is the
   light-mode value (near-black), which rendered the entire article body
   invisible (dark text on a dark page). 'inherit' matches whatever the source
   theme authored for readable body copy (e.g. cream on dark, or dark on light),
   so blog content is legible on light AND dark themes. */
.prose {
  line-height: 1.8;
  color: inherit;
}
.prose p {
  margin-bottom: 1.25em;
}
.prose h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.75em;
}
.prose h3 {
  font-size: 1.25em;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.prose a {
  color: hsl(var(--primary, 221 83% 53%));
  text-decoration: underline;
}
.prose a:hover {
  opacity: 0.8;
}
.prose blockquote {
  border-left: 3px solid hsl(var(--accent, 221 83% 53%));
  padding-left: 1em;
  margin: 1.5em 0;
  font-style: italic;
  opacity: 0.9;
}
.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}
.prose li {
  margin-bottom: 0.5em;
}
.prose img {
  border-radius: 0.5rem;
  margin: 1.5em 0;
}
.prose code {
  background: hsl(var(--muted, 0 0% 15%));
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.prose pre {
  background: hsl(var(--muted, 0 0% 15%));
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5em 0;
}
.prose pre code {
  background: none;
  padding: 0;
}

/* Pagination */
.wpconvert-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  border: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers.current {
  background: hsl(var(--primary, 221 83% 53%));
  color: white;
  border-color: transparent;
}
.wpconvert-pagination .page-numbers:hover:not(.current) {
  background: hsl(var(--muted, 0 0% 15%));
}

/* Card hover image zoom (matches Tailwind group-hover:scale-105) */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Post navigation links on single.php */
article .flex.items-center.justify-between a {
  color: hsl(var(--primary, 221 83% 53%));
  text-decoration: none;
  font-weight: 500;
}
article .flex.items-center.justify-between a:hover {
  text-decoration: underline;
}

/* Responsive: stack grid on mobile */
@media (max-width: 768px) {
  [class*='md\:grid-cols-'] {
    grid-template-columns: 1fr !important;
  }
}

/* ── EC-BLOG-186 semantic layout fallback ───────────────────
   This site's stylesheet has no Tailwind utility classes, but the generated
   blog templates use a small set of them for layout. Define them here so the
   single-post article is a centered, readable column (not full-width / left-
   aligned) and card images crop correctly. */
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-none {
  max-width: none;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: 1rem;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.object-cover {
  object-fit: cover;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16 / 9;
}
.prose-lg {
  font-size: 1.125rem;
  line-height: 1.8;
}

/* EC-BLOG-188: the injected category-filter buttons use Tailwind utility
   classes (bg-primary / bg-card / text-muted-foreground …) that do not exist
   on a semantic site, so they render as default white boxes with dark text.
   Style the real .wpconvert-blog-filter / .wpconvert-category-filters classes
   with theme-neutral outlined pills (currentColor-based, so they adapt to dark
   or light themes) and a clear active state. */
.wpconvert-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.wpconvert-blog-filter {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: currentColor;
  opacity: 0.6;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition:
    opacity 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.wpconvert-blog-filter:hover {
  opacity: 1;
}
.wpconvert-blog-filter.active {
  opacity: 1;
  border-color: currentColor;
  background: rgba(128, 128, 128, 0.14);
}

/* Detectronic: anti-spam honeypot, never visible. */
.dt-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}