@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  scroll-padding-top: calc(var(--header-h) + 16px);
  --bg: #07111d;
  --bg2: #0a1725;
  --panel: #0d1d2d;
  --panel2: #10253a;
  --ink: #eef6fb;
  --muted: #9bb0c1;
  --line: rgba(164, 188, 206, 0.15);
  --teal: #6d8cff;
  --teal2: #d02828;
  --cyan: #d02828;
  --white: #fff;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --r: 18px;
  --max: 1180px;
  --glow: 0 0 36px rgba(32, 56, 120, 0.35);
  --header-h: 82px;
  --header-bg: rgba(7, 17, 29, .9);
  --topbar-bg: rgba(5, 13, 22, .88);
  --nav-fg: #b7c8d3;
  --footer-bg: #06101a;
  --card-bg: linear-gradient(165deg, rgba(16,37,58,.92), rgba(10,23,37,.96));
  --proof-bg: rgba(13,29,45,.75);
  --float-bg: rgba(10,24,38,.92);
}
html[data-theme="light"] {
  --teal: #203878;
  --teal2: #d02828;
  --bg: #f3f6fa;
  --bg2: #e8eef5;
  --panel: #ffffff;
  --panel2: #ffffff;
  --ink: #14202c;
  --muted: #5a6b7a;
  --line: rgba(20, 40, 60, 0.12);
  --header-bg: rgba(255,255,255,.88);
  --topbar-bg: rgba(247,250,253,.92);
  --nav-fg: #3d4d5c;
  --footer-bg: #eef3f8;
  --card-bg: linear-gradient(165deg, #ffffff, #f7fafc);
  --proof-bg: #ffffff;
  --float-bg: rgba(255,255,255,.94);
  --shadow: 0 18px 50px rgba(20,40,60,.1);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(80% 50% at 90% -10%, rgba(208, 40, 40, 0.12), transparent 55%),
    radial-gradient(60% 40% at 10% 20%, rgba(32, 56, 120, 0.10), transparent 50%);
}
html[data-theme="light"] .proof strong { color: #203878; }
html[data-theme="light"] .proof span { color: #4a5b6a; }
html[data-theme="light"] .enquiry input,
html[data-theme="light"] .enquiry select,
html[data-theme="light"] .enquiry textarea {
  background: #f7fafc; color: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
  font-size: 16px;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(80% 50% at 90% -10%, rgba(208, 40, 40, 0.16), transparent 55%),
    radial-gradient(60% 40% at 10% 20%, rgba(32, 56, 120, 0.28), transparent 50%);
}
a { color: inherit; text-decoration: none; transition: color .2s; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: 0; background: none; font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", sans-serif; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
.wrap { width: min(calc(100% - 40px), var(--max)); margin: auto; }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  z-index: 80;
}

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  font-size: .8rem;
  color: var(--muted);
}
.topbar-inner { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; flex-wrap: wrap; }
.topbar-contact { display: flex; gap: 18px; }
.topbar a:hover { color: var(--teal); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(20px);
}
.site-header.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.32); }
.nav { height: var(--header-h); display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-logo { height: 54px; width: auto; display: block; }
.foot-logo { height: 44px; width: auto; margin-bottom: 12px; display: block; }
.foot-logo { height: 42px; width: auto; margin-bottom: 10px; }
.logo-mark {
  display: grid; place-items: center;
  height: 46px; min-width: 58px; padding: 0 10px;
  border: 1px solid rgba(109,140,255,.45);
  border-radius: 12px;
  color: var(--teal);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700; letter-spacing: .12em;
  box-shadow: var(--glow);
}
.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--ink);
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--panel);
}
.theme-toggle:hover { border-color: var(--teal); color: var(--teal); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a, .nav-drop > button {
  padding: 10px 13px; border-radius: 10px;
  color: var(--nav-fg); font-size: .9rem; font-weight: 500;
}
.nav-links > a:hover, .nav-drop > button:hover { color: var(--ink); background: rgba(109,140,255,.08); }
.nav-links > a.active { color: var(--ink); }
.nav-drop { position: relative; }
.nav-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.nav-drop-panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 236px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: .18s; box-shadow: var(--shadow); z-index: 60; pointer-events: none;
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.nav-drop-panel a {
  display: block; padding: 10px 12px; border-radius: 9px; color: var(--muted); font-size: .88rem;
}
.nav-drop-panel a:hover { background: rgba(109,140,255,.1); color: var(--teal); padding-left: 16px; }

.menu {
  display: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--ink);
}
.mobile { display: none; border-top: 1px solid var(--line); background: var(--panel); }
.mobile.open { display: block; }
.mobile a { display: block; padding: 11px 10px; color: var(--nav-fg); border-radius: 9px; }
.mobile a.active, .mobile a:hover { color: var(--teal); background: rgba(109,140,255,.1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px;
  background: linear-gradient(135deg, #203878, #d02828);
  font-weight: 700; font-size: .9rem; color: #fff !important;
  box-shadow: 0 8px 24px rgba(32,56,120,.32);
  position: relative; overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.45) 50%, transparent 75%);
  transform: translateX(-110%); transition: transform .55s; pointer-events: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(208,40,40,.28); }
.btn:hover::after { transform: translateX(110%); }
.btn.ghost {
  background: transparent; border: 1px solid rgba(164,188,206,.28);
  box-shadow: none; color: var(--ink) !important;
}
.btn.ghost:hover { border-color: var(--teal); background: rgba(109,140,255,.07); color: var(--teal) !important; }

.mfg-showcase { position: relative; overflow: hidden; height: min(78vh, 720px); background: #050b14; }
.mfg-track { height: 100%; }
.mfg-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.mfg-slide.is-active { opacity: 1; z-index: 1; }
.mfg-slide img { width: 100%; height: 100%; object-fit: cover; }
.mfg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,10,18,.28) 0%, rgba(4,10,18,.08) 55%, transparent 100%);
  display: grid; align-items: center;
  padding: 0 72px;
  pointer-events: none;
}
.mfg-overlay-inner {
  pointer-events: auto;
  max-width: 560px;
  padding: 28px 30px 26px;
  border-radius: 22px;
  background: rgba(8, 16, 28, 0.84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  color: #fff;
}
.mfg-kicker { color: #8aa4ff; letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; font-weight: 600; }
.mfg-overlay h2 { font-size: clamp(1.65rem, 3.4vw, 2.45rem); margin: 10px 0 12px; color: #fff; }
.mfg-overlay p { color: #d5e2ec; margin: 0 0 16px; }
.mfg-overlay .btn { margin-top: 4px; }
.mfg-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,16,28,.72); color: #fff; font-size: 1.35rem;
}
.mfg-arrow.prev { left: 16px; }
.mfg-arrow.next { right: 16px; }
.mfg-arrow:hover { border-color: #8aa4ff; color: #8aa4ff; }
.mfg-dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; justify-content: center; gap: 8px;
  background: rgba(8,16,28,.55); padding: 8px 12px; border-radius: 999px;
}
.mfg-dots button { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.35); }
.mfg-dots button.on { width: 22px; background: #d02828; }
html[data-theme="light"] .mfg-overlay-inner { background: rgba(8, 16, 28, 0.88); color: #fff; }
html[data-theme="light"] .mfg-overlay h2 { color: #fff; }
html[data-theme="light"] .mfg-overlay p { color: #d5e2ec; }
@media (max-width: 700px) {
  .mfg-overlay { padding: 0 16px; align-items: end; padding-bottom: 54px; }
  .mfg-overlay-inner { max-width: none; }
}

.hero { padding: 56px 0 48px; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .98fr; gap: 40px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--teal); letter-spacing: .14em; text-transform: uppercase;
  font-size: .75rem; font-weight: 600; margin: 0 0 12px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 12px; flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path fill='black' d='M4 2h5v6a3 3 0 0 0 6 0V2h5v6a8 8 0 0 1-16 0V2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path fill='black' d='M4 2h5v6a3 3 0 0 0 6 0V2h5v6a8 8 0 0 1-16 0V2z'/></svg>") center / contain no-repeat;
}
.display { font-size: clamp(2rem, 4.2vw, 3.15rem); margin-bottom: 14px; }
.lede { color: var(--muted); max-width: 540px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 26px; }
.hero-proof { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.proof {
  background: var(--proof-bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 10px; text-align: center;
}
.proof:hover { border-color: rgba(109,140,255,.35); transform: translateY(-2px); box-shadow: var(--glow); }
.proof strong { display: block; font-size: 1.15rem; font-family: "Plus Jakarta Sans", sans-serif; color: var(--teal); }
.proof span { font-size: .72rem; color: #d8e6ef; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: 420px; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); }
.floating-card {
  position: absolute; bottom: 18px; right: 16px;
  background: var(--float-bg); border: 1px solid rgba(109,140,255,.25);
  border-radius: 12px; padding: 12px 14px; font-size: .85rem;
  display: grid; gap: 4px;
}

section { padding: 64px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(1.55rem, 2.8vw, 2.05rem); max-width: 520px; }
.section-head p { color: var(--muted); max-width: 360px; margin: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.card {
  background: var(--card-bg);
  border: 1px solid var(--line); border-radius: var(--r); padding: 22px;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent); opacity: 0;
}
.card:hover { transform: translateY(-5px); border-color: rgba(109,140,255,.32); box-shadow: var(--glow); }
.card:hover::before { opacity: 1; }
.icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(109,140,255,.1); border: 1px solid rgba(109,140,255,.22); color: var(--teal); margin-bottom: 14px;
}
.card p { color: var(--muted); font-size: .9rem; }

.product-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.product-tile img { width: 100%; height: 190px; object-fit: cover; }
.product-tile h3, .product-tile p { padding: 0 16px; }
.product-tile h3 { margin-top: 14px; }
.product-tile p { color: var(--muted); padding-bottom: 16px; }
.product-tile:hover { transform: translateY(-4px); border-color: rgba(109,140,255,.32); }

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
.stat {
  text-align: center; padding: 24px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px;
}
.stat strong { display: block; font-size: 1.75rem; font-family: "Plus Jakarta Sans", sans-serif; color: var(--teal); }
.stat span { font-size: .82rem; color: var(--muted); }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.spec-table th { color: var(--muted); background: rgba(8,18,28,.6); }
.spec-table tbody tr:nth-child(even) { background: rgba(16,37,58,.45); }
.spec-table tbody tr:hover { background: rgba(109,140,255,.06); }

.page-hero { padding: 40px 0 8px; }
.page-hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.45rem); margin-bottom: 10px; }
.crumb { color: var(--muted); font-size: .82rem; margin-bottom: 10px; }
.crumb a:hover { color: var(--teal); }
.page-copy { color: var(--muted); max-width: 640px; }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.split img { width: 100%; border-radius: 16px; border: 1px solid var(--line); height: 340px; object-fit: cover; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.gallery a, .gallery figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #081421; }
.gallery img { width: 100%; height: 210px; object-fit: cover; }
.enquiry { display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.enquiry label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.enquiry input, .enquiry select, .enquiry textarea {
  background: #081421; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); padding: 11px 12px;
}
.form-note { color: var(--muted); font-size: .85rem; }
.cap-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cap-list li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.process { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.process li { list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.process { padding: 0; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; }
@media (max-width: 980px) {
  .split, .grid-2, .gallery, .process, .contact-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .split, .grid-2, .gallery, .process, .contact-grid { grid-template-columns: 1fr; }
}
.band-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px;
}
.text-link { color: var(--teal); font-weight: 600; }
.muted { color: var(--muted); }

footer { margin-top: 48px; border-top: 1px solid var(--line); background: var(--footer-bg); padding: 40px 0 20px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; }
.foot-grid h4 { margin-bottom: 12px; }
.foot-grid a, .foot-grid p { display: block; color: var(--muted); margin: 6px 0; }
.foot-grid a:hover { color: var(--teal); }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; color: #7e90a0; font-size: .82rem; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .nav-links, .nav > .btn { display: none; }
  .menu { display: grid; place-items: center; }
  .hero-grid, .grid-3, .stats, .foot-grid, .hero-proof { grid-template-columns: 1fr 1fr; }
  .band-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .hero-grid, .grid-3, .stats, .foot-grid, .hero-proof, .topbar-inner { grid-template-columns: 1fr; display: grid; }
  .hero-visual img { height: 240px; }
  .mfg-showcase { height: 62vh; }
  .mfg-arrow { display: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
.mfg-slide img { transform: scale(1.04); transition: transform 7s ease, opacity .7s; }
.mfg-slide.is-active img { transform: scale(1); }
.card, .product-tile, .stat, .proof {
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .35s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .mfg-slide img { transform: none; transition: opacity .4s; }
}

.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle { background: rgba(255,255,255,.04); }
.theme-toggle:hover { background: rgba(109,140,255,.1); transform: scale(1.04); }
.ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(109,140,255,.1); border: 1px solid rgba(109,140,255,.22); color: var(--teal); margin-bottom: 14px;
}
.ico svg { width: 22px; height: 22px; }
.h-ico { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.h-ico .ico { margin: 0; }
.h-ico h2 { margin: 0; }
.process li .ico { margin-bottom: 10px; }
.split-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.split-head h2 { margin: 0; }
.split-head .ico { margin: 0; }

.product-tile .ico { margin: 14px 16px 0; }
.contact-line { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.contact-line .ico { margin: 0; width: 36px; height: 36px; }
.contact-line .ico svg { width: 18px; height: 18px; }
.page-hero .split-head h1 { margin: 0; }
.cap-list li { display: flex; gap: 10px; align-items: flex-start; }
.cap-list li::before {
  content: "";
  flex: 0 0 16px; height: 12px; margin-top: 5px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path fill='black' d='M4 2h5v6a3 3 0 0 0 6 0V2h5v6a8 8 0 0 1-16 0V2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><path fill='black' d='M4 2h5v6a3 3 0 0 0 6 0V2h5v6a8 8 0 0 1-16 0V2z'/></svg>") center / contain no-repeat;
}

/* =====================================================================
   ISIT v2 — design layer (magnetic-field identity: navy + red poles)
   ===================================================================== */
:root {
  --pole-n: #e03a3a;
  --pole-s: #5b86ff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --accent-grad: linear-gradient(135deg, #203878, #d02828);
}
html[data-theme="light"] { --pole-n: #d02828; --pole-s: #203878; }
html { scroll-padding-top: 110px; }
::selection { background: rgba(208,40,40,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--pole-s); outline-offset: 3px; border-radius: 6px; }
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px;
  background: var(--accent-grad); color: #fff !important; font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---- scroll progress ---- */
.scroll-progress {
  height: 4px; z-index: 120;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent) 0 0 / 160px 100% no-repeat,
    linear-gradient(90deg, #203878, #5b86ff 55%, #d02828);
  box-shadow: 0 0 12px rgba(91,134,255,.55);
  animation: bar-shine 2.2s linear infinite;
}
@keyframes bar-shine { from { background-position: -160px 0, 0 0; } to { background-position: 110vw 0, 0 0; } }

/* ---- eyebrow marker: animated magnet pole disc ---- */
.eyebrow::before {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
  -webkit-mask: none; mask: none;
  background: conic-gradient(var(--pole-n) 0 50%, var(--pole-s) 0 100%);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgba(128,148,190,.45);
  animation: pole-spin 5s linear infinite, pole-pulse 2s ease-in-out infinite;
}
@keyframes pole-spin { to { transform: rotate(360deg); } }
@keyframes pole-pulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px var(--pole-n)); } 50% { opacity: .55; filter: none; } }
.cap-list li::before {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; -webkit-mask: none; mask: none;
  background: linear-gradient(90deg, var(--pole-n) 50%, var(--pole-s) 50%); opacity: .9;
}

/* ---- top bar & header ---- */
.topbar a { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px; border-radius: 6px; transition: background .2s, color .2s, transform .2s; }
.topbar a svg { width: 14px; height: 14px; }
.topbar a:hover { background: var(--pole-n); color: #fff; transform: translateY(-1px); }
html[data-theme="light"] .topbar a:hover { background: #203878; }
.nav-links > a, .nav-drop > button { position: relative; }
.nav-links > a.active::after, .nav-drop > button.active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pole-n), var(--pole-s));
}
.nav-drop > button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.nav-drop:hover > button::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nav-drop-panel a { display: flex; align-items: center; gap: 10px; }
.nav-drop-panel a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pole-n); opacity: 0; transition: opacity .2s; }
.nav-drop-panel a:hover::before { opacity: 1; }
.btn svg, .nav > .btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }
.mobile .wrap { padding: 8px 0 14px; display: grid; gap: 2px; }
.mobile a.active { border-left: 3px solid var(--pole-n); }

/* ---- page hero with image + field rings ---- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate; padding: 64px 0 56px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.page-hero::before {
  content: ""; position: absolute; inset: -8px; z-index: -2;
  background: var(--hero-img, none) center / cover no-repeat;
  filter: blur(2px) saturate(1.05); transform: scale(1.04);
  animation: hero-zoom 1.8s var(--ease) both;
}
@keyframes hero-zoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 94% 52%, transparent 0 26px, rgba(255,255,255,.07) 26px 27px),
    linear-gradient(100deg, rgba(5,12,22,.94) 0%, rgba(5,12,22,.82) 42%, rgba(5,12,22,.35) 78%, rgba(5,12,22,.15) 100%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.75) 100%); mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.75) 100%);
}
html[data-theme="light"] .page-hero::after {
  background:
    repeating-radial-gradient(circle at 94% 52%, transparent 0 26px, rgba(32,56,120,.10) 26px 27px),
    linear-gradient(100deg, rgba(247,250,253,.97) 0%, rgba(247,250,253,.88) 42%, rgba(247,250,253,.45) 78%, rgba(247,250,253,.2) 100%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.45); max-width: 780px; }
.page-hero .page-copy { color: #e0eaf3; max-width: 680px; text-shadow: 0 1px 8px rgba(0,0,0,.5); font-size: 1.02rem; }
.page-hero .crumb, .page-hero .crumb a { color: #b9cadb; }
.page-hero .eyebrow { color: #9fb8ff; }
html[data-theme="light"] .page-hero h1 { color: #0f1d2b; text-shadow: none; }
html[data-theme="light"] .page-hero .page-copy { color: #2f4152; text-shadow: none; }
html[data-theme="light"] .page-hero .crumb, html[data-theme="light"] .page-hero .crumb a { color: #51657a; }
html[data-theme="light"] .page-hero .eyebrow { color: #203878; }
.page-hero h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; border-radius: 4px; background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); animation: bar-grow .9s .3s var(--ease) both; }
@keyframes bar-grow { from { width: 0; } to { width: 64px; } }
.page-hero .wrap > * { animation: rise .8s var(--ease) both; }
.page-hero .wrap > *:nth-child(2) { animation-delay: .08s; } .page-hero .wrap > *:nth-child(3) { animation-delay: .16s; }
.page-hero .wrap > *:nth-child(4) { animation-delay: .24s; } .page-hero .wrap > *:nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.page-hero.reveal { opacity: 1; transform: none; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb .sep { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.hero-img-about { --hero-img: url("images/slide-machine.webp"); }
.hero-img-capabilities { --hero-img: url("images/slide-metal.webp"); }
.hero-img-characterization { --hero-img: url("images/hero-sem.webp"); }
.hero-img-contact { --hero-img: url("images/hero-shapes.webp"); }
.hero-img-gallery { --hero-img: url("images/slide-field.webp"); }
.hero-img-industries { --hero-img: url("images/app-wind.webp"); }
.hero-img-manufacturing { --hero-img: url("images/hero-furnace.webp"); }
.hero-img-products { --hero-img: url("images/hero-discs.webp"); }

/* ---- home: ticker, hero polish ---- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--panel); padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; gap: 38px; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; gap: 12px; font-size: .84rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.ticker span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(var(--pole-n) 0 50%, var(--pole-s) 0 100%); }
@keyframes ticker { to { transform: translateX(-50%); } }
.hero { position: relative; }
.hero::before { content: ""; position: absolute; right: -120px; top: 20px; width: 520px; height: 520px; border-radius: 50%; z-index: -1; background: repeating-radial-gradient(circle, transparent 0 34px, rgba(91,134,255,.09) 34px 35px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); animation: pole-spin 90s linear infinite; }
.hero-visual { padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.hero-visual img { border: 0; border-radius: 14px; transition: transform .8s var(--ease); }
.hero-visual:hover img { transform: scale(1.02); }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; width: 38px; height: 38px; pointer-events: none; z-index: 2; }
.hero-visual::before { top: -2px; left: -2px; border-top: 3px solid var(--pole-n); border-left: 3px solid var(--pole-n); border-top-left-radius: 22px; }
.hero-visual::after { bottom: -2px; right: -2px; border-bottom: 3px solid var(--pole-s); border-right: 3px solid var(--pole-s); border-bottom-right-radius: 22px; }
.floating-card { animation: float-y 5s ease-in-out infinite; z-index: 3; }
@keyframes float-y { 50% { transform: translateY(-6px); } }
.proof strong, .stat strong { font-variant-numeric: tabular-nums; }
.proof { position: relative; overflow: hidden; }
.proof::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); transition: width .5s var(--ease); }
.proof:hover::after { width: 100%; }

/* ---- section heads, cards ---- */
.section-head h2::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); }
.card { transition: transform .35s var(--ease), border-color .25s, box-shadow .35s; }
.card::before { background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); height: 3px; }
.card:hover { border-color: rgba(91,134,255,.45); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
html[data-theme="light"] .card:hover { box-shadow: 0 18px 40px rgba(20,40,80,.14); }
.ico { background: linear-gradient(145deg, rgba(91,134,255,.18), rgba(208,40,40,.12)); border-color: rgba(128,148,190,.35); transition: transform .35s var(--ease), background .25s, color .25s; }
.card:hover .ico, .product-tile:hover .ico, .process li:hover .ico { transform: rotate(-8deg) scale(1.08); background: var(--accent-grad); color: #fff; border-color: transparent; }
.product-tile { transition: transform .35s var(--ease), border-color .25s, box-shadow .35s; }
.product-tile img { transition: transform .7s var(--ease); }
.product-tile { overflow: hidden; }
.product-tile:hover img { transform: scale(1.06); }
.product-tile:hover { box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.split img { transition: transform .7s var(--ease); }
.split > img, .split > div > img { box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.split img:hover { transform: scale(1.015); }
.stat { position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.stat:hover::before { transform: scaleX(1); }
.reveal { transition-delay: var(--d, 0ms); }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.chips span, .chip {
  font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--panel); transition: all .25s var(--ease);
}
.chips span:hover { border-color: var(--pole-s); color: var(--ink); transform: translateY(-2px); }
.chips.mono span { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: .02em; }

/* ---- sub navigation ---- */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 8px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.subnav a { white-space: nowrap; font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--panel); transition: all .25s var(--ease); }
.subnav a:hover, .subnav a.on { color: #fff; background: var(--accent-grad); border-color: transparent; transform: translateY(-2px); }

/* ---- pipeline (home / manufacturing) ---- */
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; position: relative; padding: 0; margin: 0; list-style: none; }
.pipeline::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--pole-s) 0 10px, transparent 10px 20px); opacity: .5; }
.pipeline li { position: relative; text-align: center; padding: 0 8px; counter-increment: step; }
.pipeline .node { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line); color: var(--teal); position: relative; transition: all .35s var(--ease); }
.pipeline .node svg { width: 28px; height: 28px; }
.pipeline .node::after { content: counter(step); position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.pipeline li:hover .node { border-color: var(--pole-s); transform: translateY(-6px); box-shadow: 0 14px 30px rgba(91,134,255,.28); }
.pipeline h3 { font-size: 1.02rem; margin-bottom: 6px; }
.pipeline p { color: var(--muted); font-size: .86rem; margin: 0; }
.pipeline a { display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 600; color: var(--teal); }

/* ---- bars (magnet comparison) ---- */
.bars-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.bars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.bars-grid h3 { font-size: 1rem; margin-bottom: 4px; }
.bars-grid .sub { color: var(--muted); font-size: .8rem; margin: 0 0 16px; }
.bar-row { display: grid; grid-template-columns: 70px 1fr 74px; align-items: center; gap: 12px; margin: 11px 0; font-size: .86rem; }
.bar-row b { font-weight: 700; }
.bar-row em { font-style: normal; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { height: 12px; border-radius: 99px; background: rgba(128,148,190,.16); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pole-s), var(--pole-n)); transition: width 1.2s var(--ease); }
.in-view .bar-fill, .bars-card.in .bar-fill { width: var(--w); }

/* ---- steps / faq ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px 22px; transition: transform .35s var(--ease), border-color .25s; }
.steps li::before { content: "0" counter(s); position: absolute; top: 14px; right: 18px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 2.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(128,148,190,.35); }
.steps li:hover { transform: translateY(-5px); border-color: var(--pole-s); }
.steps h3 { font-size: 1.05rem; margin-bottom: 6px; padding-right: 48px; }
.steps p { color: var(--muted); font-size: .88rem; margin: 0; }
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .25s; }
.faq details[open] { border-color: var(--pole-s); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; display: grid; place-items: center; background: rgba(91,134,255,.14); color: var(--teal); font-size: 1.2rem; transition: transform .3s var(--ease), background .25s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--pole-n); color: #fff; }
.faq p { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: .92rem; }

/* ---- CTA band ---- */
.band-inner { position: relative; overflow: hidden; color: #fff; border: 0; background: linear-gradient(120deg, #162a5c 0%, #203878 45%, #a81f2a 100%); box-shadow: 0 24px 60px rgba(32,56,120,.35); }
.band-inner::after { content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; border: 30px solid rgba(255,255,255,.09); box-shadow: 0 0 0 30px rgba(255,255,255,.05); }
.band-inner h2, .band-inner p, .band-inner .eyebrow { color: #fff; position: relative; z-index: 1; }
.band-inner p { color: rgba(255,255,255,.85); }
.band-inner .eyebrow::before { box-shadow: 0 0 0 2px #203878, 0 0 0 3px rgba(255,255,255,.5); }
.band-inner .btn { position: relative; z-index: 1; background: #fff; color: #203878 !important; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.band-inner .btn:hover { box-shadow: 0 14px 34px rgba(0,0,0,.35); }

/* ---- tables ---- */
.spec-table th { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
html[data-theme="light"] .spec-table th { background: #eaf0f7; color: #3c5063; }
html[data-theme="light"] .spec-table tbody tr:nth-child(even) { background: #f6f9fc; }
.spec-table td:first-child { font-weight: 600; }
.spec-table tbody tr { transition: background .2s; }
.table-wrap { box-shadow: 0 12px 30px rgba(0,0,0,.18); }
html[data-theme="light"] .table-wrap { box-shadow: 0 12px 30px rgba(20,40,80,.08); }

/* ---- process list (manufacturing) ---- */
.process { position: relative; counter-reset: p; }
.process::before { content: ""; position: absolute; left: 8%; right: 8%; top: 52px; height: 2px; background: repeating-linear-gradient(90deg, var(--pole-s) 0 10px, transparent 10px 20px); opacity: .45; }
.process li { position: relative; transition: transform .35s var(--ease), border-color .25s; }
.process li:hover { transform: translateY(-6px); border-color: var(--pole-s); }
.process li strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; margin-bottom: 4px; }
.process li p { margin: 0; color: var(--muted); font-size: .88rem; }

/* ---- gallery ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filters button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .84rem; font-weight: 600; transition: all .25s var(--ease); }
.filters button:hover { color: var(--ink); border-color: var(--pole-s); }
.filters button.on { color: #fff; background: var(--accent-grad); border-color: transparent; }
.gallery figure { position: relative; cursor: zoom-in; transition: transform .35s var(--ease), opacity .3s; }
.gallery figure:hover { transform: translateY(-5px); }
.gallery img { transition: transform .7s var(--ease); height: 230px; }
.gallery figure:hover img { transform: scale(1.07); }
.gallery figure.hide { display: none; }
.gallery figcaption { position: absolute; inset: auto 0 0; padding: 30px 14px 12px; font-size: .84rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(4,10,18,.88)); transform: translateY(8px); opacity: 0; transition: all .35s var(--ease); }
.gallery figure:hover figcaption { opacity: 1; transform: none; }
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; background: rgba(3,8,15,.92); padding: 24px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox.open { display: grid; animation: rise .3s var(--ease); }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox img { max-height: 78vh; width: auto; margin: auto; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.lightbox figcaption { text-align: center; color: #d5e2ec; margin-top: 12px; font-weight: 600; }
.lightbox button { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.5rem; border: 1px solid rgba(255,255,255,.2); transition: background .2s; }
.lightbox button:hover { background: var(--pole-n); }
.lightbox .lb-close { top: 18px; right: 18px; } .lightbox .lb-prev { left: 18px; top: 50%; } .lightbox .lb-next { right: 18px; top: 50%; }

/* ---- contact page ---- */
.contact-grid { grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; }
.info-stack { display: grid; gap: 14px; }
.info-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.info-card h2 { font-size: 1.15rem; margin-bottom: 10px; }
.info-link { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); transition: all .3s var(--ease); }
.info-link:hover { border-color: var(--pole-s); transform: translateX(5px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.info-link .ico { margin: 0; width: 42px; height: 42px; flex-shrink: 0; }
.info-link small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.info-link strong { font-size: .95rem; word-break: break-all; transition: color .2s; }
.info-link:hover strong { color: var(--teal); }
.map-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); height: 230px; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
html:not([data-theme="light"]) .map-frame iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7) brightness(.95); }
.brief-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .88rem; color: var(--muted); }
.brief-list li { display: flex; gap: 10px; align-items: flex-start; }
.brief-list li::before { content: ""; flex: 0 0 18px; height: 18px; border-radius: 5px; background: linear-gradient(90deg, var(--pole-n) 50%, var(--pole-s) 50%); margin-top: 2px; }

.enquiry { position: relative; overflow: hidden; gap: 16px; padding: 24px; }
.enquiry::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #203878, #5b86ff, #d02828); }
.form-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.form-head .ico { margin: 0; flex-shrink: 0; }
.form-head h2 { font-size: 1.2rem; } .form-head p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
.fl { position: relative; display: block; }
.fl .field { position: relative; border: 1.5px solid var(--line); background: var(--panel); transition: border-color .2s, box-shadow .2s; }
.fl .field:hover { border-color: var(--pole-s); }
.fl .field:focus-within { border-color: var(--pole-s); box-shadow: 0 0 0 3px rgba(91,134,255,.18); }
.fl .tile { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: grid; place-items: center; background: rgba(91,134,255,.12); color: var(--teal); transition: background .2s; }
.fl .tile svg { width: 18px; height: 18px; }
.fl .field:focus-within .tile { background: rgba(91,134,255,.24); }
.fl .field::before, .fl .field::after, .fl .tile::before, .fl .tile::after { content: ""; position: absolute; width: 7px; height: 7px; opacity: .5; pointer-events: none; transition: all .3s var(--ease); z-index: 3; }
.fl .field::before { top: -4px; right: -4px; border-top: 2px solid var(--pole-n); border-right: 2px solid var(--pole-n); }
.fl .field::after { bottom: -4px; right: -4px; border-bottom: 2px solid var(--pole-s); border-right: 2px solid var(--pole-s); }
.fl .tile::before { top: -4px; left: -4px; border-top: 2px solid var(--pole-n); border-left: 2px solid var(--pole-n); }
.fl .tile::after { bottom: -4px; left: -4px; border-bottom: 2px solid var(--pole-s); border-left: 2px solid var(--pole-s); }
.fl .field:focus-within::before, .fl .field:focus-within::after, .fl .field:focus-within .tile::before, .fl .field:focus-within .tile::after { width: 14px; height: 14px; opacity: 1; }
.enquiry .fl input, .enquiry .fl select, .enquiry .fl textarea { width: 100%; background: transparent !important; border: 0; border-radius: 0; color: var(--ink); padding: 13px 14px 13px 56px; min-height: 48px; font: inherit; outline: none; }
.enquiry .fl textarea { min-height: 110px; resize: vertical; }
.enquiry .fl select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px !important; }
.enquiry .fl select option { background: var(--panel2); color: var(--ink); }
.fl .lab { position: absolute; left: 56px; top: 24px; transform: translateY(-50%); pointer-events: none; color: var(--muted); font-size: .9rem; font-weight: 500; transition: top .2s var(--ease), font-size .2s var(--ease), color .2s, left .2s; padding: 0 4px; margin-left: -4px; z-index: 2; }
.fl .lab b { color: var(--pole-n); }
.fl.ta .lab { top: 22px; }
.fl input:focus ~ .lab, .fl input:not(:placeholder-shown) ~ .lab, .fl textarea:focus ~ .lab, .fl textarea:not(:placeholder-shown) ~ .lab {
  top: 0; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal);
  background: linear-gradient(to bottom, var(--bg) 50%, var(--panel) 50%);
}
html[data-theme="light"] .fl input:focus ~ .lab, html[data-theme="light"] .fl input:not(:placeholder-shown) ~ .lab, html[data-theme="light"] .fl textarea:focus ~ .lab, html[data-theme="light"] .fl textarea:not(:placeholder-shown) ~ .lab {
  background: linear-gradient(to bottom, var(--panel) 50%, var(--panel) 50%);
}
.enquiry .fl.invalid .field { border-color: var(--pole-n); box-shadow: 0 0 0 3px rgba(208,40,40,.16); animation: shake .35s; }
.enquiry .fl.invalid .lab { color: var(--pole-n) !important; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.char-count { position: absolute; right: 10px; bottom: 6px; font-size: .68rem; color: var(--muted); pointer-events: none; }
.enquiry .btn { width: 100%; padding: 14px 20px; font-size: .95rem; }
.form-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: .8rem; color: var(--muted); }
.form-foot svg { width: 14px; height: 14px; color: var(--teal); }
.form-done { text-align: center; padding: 18px 6px; animation: rise .5s var(--ease); }
.form-done[hidden], .enquiry form[hidden], .enquiry .form-fields[hidden] { display: none; }
.done-check { width: 80px; height: 80px; margin: 0 auto 12px; color: var(--pole-s); }
.done-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .7s .1s var(--ease) forwards; }
.done-check path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw .5s .6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-list { list-style: none; margin: 14px auto; padding: 0; display: grid; gap: 6px; max-width: 420px; text-align: left; }
.done-list li { padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--pole-n); background: var(--panel); font-size: .88rem; word-break: break-word; }
.done-list small { color: var(--muted); display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }

/* ---- footer ---- */
footer { position: relative; margin-top: 56px; }
footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #203878, #5b86ff, #d02828); }
.foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
.foot-grid h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); }
.foot-grid a:hover { padding-left: 4px; }
.foot-grid a { transition: color .2s, padding .2s; }
.foot-contact .fc { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; }
.foot-contact .fc > svg { width: 34px; height: 34px; padding: 8px; flex-shrink: 0; border-radius: 9px; color: var(--teal); background: rgba(91,134,255,.12); border: 1px solid rgba(91,134,255,.28); }
.foot-contact .fc div { display: grid; min-width: 0; }
.foot-contact small { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7e90a0; }
.foot-contact a, .foot-contact span { margin: 0; color: var(--muted); word-break: break-all; }
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--accent-grad); box-shadow: 0 10px 26px rgba(32,56,120,.45); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-4px); }
.to-top svg { width: 20px; height: 20px; }

@media (max-width: 980px) {
  .pipeline, .steps { grid-template-columns: 1fr 1fr; } .pipeline::before, .process::before { display: none; }
  .bars-grid { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pipeline, .steps { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 44px 0 40px; } .bar-row { grid-template-columns: 58px 1fr 64px; }
  .topbar-inner { display: flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .eyebrow::before, .ticker-track, .floating-card, .hero::before, .page-hero::before, .page-hero .wrap > *, .page-hero h1::after { animation: none !important; }
}

main { overflow-x: clip; }
.fl .field { display: block; }
.fl .field > .lab, .fl .field > .char-count { display: block; }
.fl .tile { border-right: 0; }
.form-fields { display: grid; gap: 18px; }
[hidden] { display: none !important; }

/* FAQ toggle: centered plus / cross drawn with CSS bars */
.faq summary::after { content: ""; font-size: 0; background: none; }
.faq summary::before, .faq summary::after { position: absolute; right: 18px; top: 50%; }
.faq summary::before {
  content: ""; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: rgba(91,134,255,.14); transition: background .25s;
}
.faq summary::after {
  width: 12px; height: 2px; margin: -1px 7px 0 0; border-radius: 2px; background: var(--teal);
  box-shadow: none; transform: none; transition: transform .3s var(--ease), background .25s;
  /* horizontal bar; vertical bar via gradient trick below */
  background: linear-gradient(var(--teal), var(--teal)) center / 100% 2px no-repeat, linear-gradient(var(--teal), var(--teal)) center / 2px 100% no-repeat;
  height: 12px; margin-top: -6px; display: block;
}
.faq details[open] summary::before { background: var(--pole-n); }
.faq details[open] summary::after { transform: rotate(45deg); background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat; }

/* Ticker: draggable */
.ticker { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ticker.dragging { cursor: grabbing; }
.ticker-track { animation: none !important; will-change: transform; }

/* =====  typography refresh  ===== */
body { font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -.015em; line-height: 1.25; }
.nav-links > a, .nav-drop > button { font-size: .95rem; font-weight: 600; color: var(--nav-fg); letter-spacing: 0; }
.nav-links > a:hover, .nav-drop > button:hover, .nav-links > a.active, .nav-drop > button.active { color: var(--ink); }
.nav-drop-panel a { font-size: .92rem; font-weight: 500; }
.topbar { font-size: .84rem; font-weight: 500; }
.btn { font-weight: 700; font-size: .92rem; letter-spacing: .005em; }
.eyebrow { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .14em; }
.display { font-size: clamp(1.7rem, 3.1vw, 2.3rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.lede { font-size: 1.02rem; color: var(--muted); }
.page-hero h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.2; }
.section-head h2 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 800; }
.mfg-overlay h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 800; }
.card h3, .product-tile h3, .steps h3, .pipeline h3 { font-weight: 700; font-size: 1.05rem; }
.card p, .product-tile p { font-size: .93rem; line-height: 1.65; }

/* section heads: heading above, copy below, both full width */
.section-head { display: block; margin-bottom: 30px; }
.section-head > div { max-width: none; }
.section-head h2 { max-width: none; }
.section-head > p { max-width: none; margin: 14px 0 0; font-size: 1rem; color: var(--muted); }
.section-head > .text-link { display: inline-flex; margin-top: 12px; align-items: center; gap: 6px; }

/* hero stats: full row, larger, with icons */
.hero-proof-row { margin-top: 36px; }
.hero-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proof { display: flex; align-items: center; gap: 16px; text-align: left; padding: 20px 22px; border-radius: 16px; background: var(--card-bg); }
.proof-ico { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border-radius: 14px; color: var(--teal); background: linear-gradient(145deg, rgba(91,134,255,.2), rgba(208,40,40,.14)); border: 1px solid rgba(128,148,190,.35); transition: transform .35s var(--ease), background .25s, color .25s; }
.proof-ico svg { width: 24px; height: 24px; }
.proof:hover .proof-ico { transform: rotate(-8deg) scale(1.08); background: var(--accent-grad); color: #fff; border-color: transparent; }
.proof strong { font-size: 1.6rem; line-height: 1.1; font-weight: 800; color: var(--ink); }
.proof span:not(.proof-ico) { display: block; margin-top: 4px; font-size: .88rem; font-weight: 500; color: var(--muted); }
html[data-theme="light"] .proof strong { color: #14202c; }
html[data-theme="light"] .proof span:not(.proof-ico) { color: #4a5b6a; }

/* at-a-glance stats with icons */
.stat { padding: 26px 16px 22px; }
.stat-ico { width: 46px; height: 46px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 13px; color: var(--teal); background: linear-gradient(145deg, rgba(91,134,255,.2), rgba(208,40,40,.14)); border: 1px solid rgba(128,148,190,.35); transition: transform .35s var(--ease); }
.stat-ico svg { width: 22px; height: 22px; }
.stat:hover .stat-ico { transform: translateY(-3px) rotate(-6deg); }
.stat strong { font-weight: 800; }
.stat span:not(.stat-ico) { font-size: .88rem; }

/* pipeline: five stages */
.pipeline { grid-template-columns: repeat(5, 1fr); }
.pipeline::before { left: 5%; right: 5%; }

/* steps: richer cards */
.steps li { padding: 26px 22px 22px; overflow: hidden; background: var(--card-bg); }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.steps li:hover::after { transform: scaleX(1); }
.step-ico { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 15px; color: #fff; background: var(--accent-grad); box-shadow: 0 10px 22px rgba(32,56,120,.35); transition: transform .35s var(--ease); }
.step-ico svg { width: 26px; height: 26px; }
.steps li:hover .step-ico { transform: rotate(-8deg) scale(1.08); }
.steps h3 { padding-right: 0; font-size: 1.08rem; }
.steps p { font-size: .92rem; }
@media (min-width: 981px) {
  .steps li:not(:last-child)::before { /* keep the outlined number */ }
  .steps { gap: 28px; }
  .steps li:not(:last-child) .step-ico::after { content: ""; position: absolute; left: 90px; top: 50px; width: 70%; height: 0; }
}

/* band: eyebrow disc stays visible on the blue gradient */
.band-inner .eyebrow { color: #fff; }
.band-inner .eyebrow::before {
  background: conic-gradient(#ff7b7b 0 50%, #bcd0ff 0 100%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 16px 4px rgba(255,255,255,.55);
}

/* nav: active underline no longer collides with the dropdown chevron */
.nav-drop > button.active::after { content: ""; position: static; width: 6px; height: 6px; margin: 0 0 3px 8px; background: none; border-radius: 0; left: auto; right: auto; bottom: auto; height: 6px; }
.nav-drop > button.active::before { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); }
.nav-drop-panel a.current { color: var(--ink); background: rgba(91,134,255,.12); }
.nav-drop-panel a.current::before { opacity: 1; }

@media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(3, 1fr); } .pipeline::before { display: none; } }
@media (max-width: 980px) { .hero-proof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .hero-proof, .pipeline { grid-template-columns: 1fr; } .proof strong { font-size: 1.4rem; } }
.display { font-size: clamp(1.5rem, 2.5vw, 1.95rem); line-height: 1.25; }
.page-hero h1 { max-width: none; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.page-hero .page-copy { max-width: 900px; }
.split-head h2, .h-ico h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800; }

/* custom subject dropdown */
.fl.sel select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sel-btn { display: block; width: 100%; min-height: 48px; padding: 13px 40px 13px 56px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; position: relative; }
.sel-btn::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s var(--ease), border-color .2s; }
.fl.open .sel-btn::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--pole-s); }
.fl.sel.open .field { border-color: var(--pole-s); box-shadow: 0 0 0 3px rgba(91,134,255,.18); }
.fl.sel.open .field::before, .fl.sel.open .field::after, .fl.sel.open .tile::before, .fl.sel.open .tile::after { width: 14px; height: 14px; opacity: 1; }
.fl.sel.has-value .lab, .fl.sel.open .lab {
  top: 0; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal);
  background: linear-gradient(to bottom, var(--bg) 50%, var(--panel) 50%);
}
html[data-theme="light"] .fl.sel.has-value .lab, html[data-theme="light"] .fl.sel.open .lab { background: var(--panel); }
.sel-list {
  position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  background: var(--panel2); border: 1.5px solid var(--pole-s); box-shadow: 0 18px 44px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
html[data-theme="light"] .sel-list { background: #fff; box-shadow: 0 18px 44px rgba(20,40,80,.18); }
.fl.open .sel-list { opacity: 1; visibility: visible; transform: none; }
.sel-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; cursor: pointer; font-size: .92rem; font-weight: 500; color: var(--muted); transition: background .15s, color .15s, padding-left .2s; }
.sel-list li:hover { background: rgba(91,134,255,.14); color: var(--ink); padding-left: 20px; }
.sel-list li.selected { color: var(--teal); font-weight: 700; }
.sel-list li.selected::after { content: ""; width: 6px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.fl.open { z-index: 20; position: relative; }

/* ===== Laboratories list + aligned image ===== */
.split-stretch { align-items: stretch; }
.split-stretch > img { height: 100%; min-height: 380px; object-fit: cover; align-self: stretch; }
.lab-list { margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card-bg); box-shadow: 0 14px 34px rgba(0,0,0,.2); }
html[data-theme="light"] .lab-list { box-shadow: 0 14px 34px rgba(20,40,80,.08); }
.lab-head { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 18px 12px 100px; background: linear-gradient(90deg, rgba(32,56,120,.55), rgba(168,31,42,.35)); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html[data-theme="light"] .lab-head { background: linear-gradient(90deg, #203878, #a81f2a); }
.lab-row { display: grid; grid-template-columns: 30px 38px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line); position: relative; transition: background .25s, padding-left .25s var(--ease); }
.lab-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--pole-n), var(--pole-s)); transform: scaleY(0); transition: transform .3s var(--ease); }
.lab-row:hover { background: rgba(91,134,255,.09); padding-left: 24px; }
.lab-row:hover::before { transform: scaleY(1); }
.lab-n { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: .78rem; color: var(--muted); opacity: .7; }
.lab-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--teal); background: linear-gradient(145deg, rgba(91,134,255,.18), rgba(208,40,40,.12)); border: 1px solid rgba(128,148,190,.32); transition: transform .3s var(--ease), background .25s, color .25s; }
.lab-ico svg { width: 18px; height: 18px; }
.lab-row:hover .lab-ico { transform: rotate(-8deg) scale(1.08); background: var(--accent-grad); color: #fff; border-color: transparent; }
.lab-row strong { font-size: .95rem; font-weight: 700; }
.spec-pill { justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink); background: rgba(91,134,255,.12); border: 1px solid rgba(91,134,255,.28); }
@media (max-width: 700px) {
  .lab-head { display: none; }
  .lab-row { grid-template-columns: 38px minmax(0, 1fr); row-gap: 6px; }
  .lab-n { display: none; }
  .lab-row .spec-pill { grid-column: 2; }
}

/* ===== Product feature sections ===== */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
.feature.flip .frame { order: 2; }
.frame { position: relative; margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 22px 50px rgba(0,0,0,.3); min-height: 320px; }
.frame img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .9s var(--ease); }
.frame:hover img { transform: scale(1.06); }
.frame::before, .frame::after { content: ""; position: absolute; width: 36px; height: 36px; z-index: 2; pointer-events: none; }
.frame::before { top: 0; left: 0; border-top: 3px solid var(--pole-n); border-left: 3px solid var(--pole-n); border-top-left-radius: 20px; }
.frame::after { bottom: 0; right: 0; border-bottom: 3px solid var(--pole-s); border-right: 3px solid var(--pole-s); border-bottom-right-radius: 20px; }
.frame figcaption { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; background: rgba(8,16,28,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); }
.frame figcaption i { width: 8px; height: 8px; border-radius: 50%; background: conic-gradient(var(--pole-n) 0 50%, var(--pole-s) 0 100%); }
.panel { background: var(--card-bg); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--pole-n), var(--pole-s)); }
.panel p { color: var(--muted); font-size: .96rem; margin: 10px 0; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 6px; }
.kpi { padding: 14px 12px; border-radius: 14px; text-align: center; background: var(--panel); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .25s; }
.kpi:hover { transform: translateY(-4px); border-color: var(--pole-s); }
.kpi strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--teal); line-height: 1.15; }
.kpi span { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature.flip .frame { order: 0; } .frame { min-height: 240px; } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }

/* ===== Data sheet table ===== */
.datasheet { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--card-bg); }
.ds-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(91,134,255,.1), rgba(208,40,40,.06)); }
.ds-head .ico { margin: 0; flex-shrink: 0; }
.ds-head h3 { font-size: 1.1rem; } .ds-head p { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
.ds-scroll { overflow-x: auto; }
.ds-table { min-width: 640px; }
.ds-table th { padding: 14px 24px; font-size: .72rem; background: transparent; border-bottom: 2px solid var(--line); }
html[data-theme="light"] .ds-table th { background: transparent; }
.ds-table td { padding: 16px 24px; font-size: .95rem; vertical-align: middle; }
.ds-table td small { color: var(--muted); font-size: .76rem; }
.ds-table td b { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.05rem; }
.ds-table tbody tr:nth-child(even), html[data-theme="light"] .ds-table tbody tr:nth-child(even) { background: transparent; }
.ds-table tbody tr:hover { background: rgba(91,134,255,.09); }
.mat { display: inline-flex; align-items: center; gap: 12px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 1rem; }
.mdot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(128,148,190,.18); }
.mdot.nd { background: #5b86ff; } .mdot.sm { background: #d02828; } .mdot.al { background: #e0a02a; } .mdot.fe { background: #2fb585; }
.cost { display: inline-flex; align-items: center; gap: 10px; color: var(--pole-n); letter-spacing: 2px; font-size: .8rem; white-space: nowrap; }
.cost em { font-style: normal; letter-spacing: 0; color: var(--muted); font-size: .82rem; font-weight: 600; }

/* ===== magnetic-field texture (very light, behind everything) ===== */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22320%22%20viewBox%3D%22-40%20-30%20480%20320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238fa8ff%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M230%20130C262.5%2085.80000000000001%20137.5%2085.80000000000001%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C262.5%20174.2%20137.5%20174.2%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C295%2041.60000000000001%20105%2041.60000000000001%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C295%20218.39999999999998%20105%20218.39999999999998%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C327.5%20-2.5999999999999943%2072.5%20-2.5999999999999943%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C327.5%20262.6%2072.5%20262.6%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C360%20-46.79999999999998%2040%20-46.79999999999998%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C360%20306.79999999999995%2040%20306.79999999999995%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C392.5%20-91%207.5%20-91%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C392.5%20351%207.5%20351%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C425%20-135.2%20-25%20-135.2%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C425%20395.2%20-25%20395.2%20170%20130%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22170%22%20y%3D%22123%22%20width%3D%2230%22%20height%3D%2214%22%20fill%3D%22%23e03a3a%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%22123%22%20width%3D%2230%22%20height%3D%2214%22%20fill%3D%22%235b86ff%22%2F%3E%3C%2Fsvg%3E") 0 0 / 480px 320px; opacity: .09; }
html[data-theme="light"] body::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22320%22%20viewBox%3D%22-40%20-30%20480%20320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23203878%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M230%20130C262.5%2085.80000000000001%20137.5%2085.80000000000001%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C262.5%20174.2%20137.5%20174.2%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C295%2041.60000000000001%20105%2041.60000000000001%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C295%20218.39999999999998%20105%20218.39999999999998%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C327.5%20-2.5999999999999943%2072.5%20-2.5999999999999943%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C327.5%20262.6%2072.5%20262.6%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C360%20-46.79999999999998%2040%20-46.79999999999998%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C360%20306.79999999999995%2040%20306.79999999999995%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C392.5%20-91%207.5%20-91%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C392.5%20351%207.5%20351%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C425%20-135.2%20-25%20-135.2%20170%20130%22%2F%3E%3Cpath%20d%3D%22M230%20130C425%20395.2%20-25%20395.2%20170%20130%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%22170%22%20y%3D%22123%22%20width%3D%2230%22%20height%3D%2214%22%20fill%3D%22%23d02828%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%22123%22%20width%3D%2230%22%20height%3D%2214%22%20fill%3D%22%23203878%22%2F%3E%3C%2Fsvg%3E"); opacity: .07; }
@media (max-width: 700px) { body::after { background-size: 340px 227px; opacity: .07; } }
.ds-scroll { scrollbar-width: thin; scrollbar-color: rgba(91,134,255,.55) transparent; }
.ds-scroll::-webkit-scrollbar { height: 8px; }
.ds-scroll::-webkit-scrollbar-track { background: transparent; }
.ds-scroll::-webkit-scrollbar-thumb { background: rgba(91,134,255,.5); border-radius: 8px; }
.ds-table { min-width: 560px; }
.ds-table th, .ds-table td { padding-left: 18px; padding-right: 18px; }

/* ===== magnetic-field texture v2: bar magnet with real dipole field lines ===== */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%22640%22%20viewBox%3D%22-500%20-320%201000%20640%22%3E%0A%3Cg%20transform%3D%22rotate(-14)%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%238fa8ff%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M-58.1%201.4L-46.2%202.9L-34.2%204.2L-22.3%205.3L-10.3%206.0L1.7%206.3L13.7%206.1L25.6%205.3L37.6%204.1L49.5%202.7%22%2F%3E%3Cpath%20d%3D%22M-58.8%204.3L-47.5%208.4L-36.2%2012.3L-24.7%2015.7L-12.9%2018.1L-1.0%2019.2L11.0%2018.8L22.9%2017.0L34.4%2013.8L45.8%209.9L56.9%205.5%22%2F%3E%3Cpath%20d%3D%22M-60.1%206.8L-50.2%2013.5L-40.0%2019.9L-29.4%2025.5L-18.3%2030.0L-6.6%2032.7L5.4%2033.2L17.2%2031.4L28.6%2027.5L39.2%2022.0L49.3%2015.5L59.0%208.5%22%2F%3E%3Cpath%20d%3D%22M-62.0%209.0L-54.0%2017.8L-45.5%2026.4L-36.5%2034.2L-26.6%2041.0L-15.7%2046.1L-4.1%2048.9L7.9%2048.9L19.6%2046.1L30.3%2040.9L40.1%2033.9L48.8%2025.7L56.8%2016.8%22%2F%3E%3Cpath%20d%3D%22M-64.4%2010.6L-58.7%2021.2L-52.5%2031.4L-45.6%2041.3L-37.7%2050.3L-28.6%2058.1L-18.2%2064.1L-6.8%2067.7L5.1%2068.4L16.9%2066.1L27.8%2061.1L37.3%2053.9L45.6%2045.2L52.5%2035.4L58.5%2025.0L63.8%2014.2%22%2F%3E%3Cpath%20d%3D%22M-67.1%2011.7L-64.1%2023.3L-60.6%2034.7L-56.3%2045.9L-51.1%2056.7L-44.7%2066.9L-36.9%2076.0L-27.7%2083.7L-17.2%2089.4L-5.7%2092.7L6.3%2093.1L18.0%2090.6L28.8%2085.5L38.3%2078.2L46.3%2069.3L52.9%2059.2L58.1%2048.4L62.1%2037.1L65.2%2025.5L67.7%2013.8%22%2F%3E%3Cpath%20d%3D%22M-70.0%2012.0L-69.8%2024.0L-69.2%2036.0L-68.0%2047.9L-65.9%2059.7L-62.8%2071.3L-58.5%2082.5L-53.0%2093.2L-46.1%20103.0L-37.8%20111.7L-28.2%20118.8L-17.4%20124.0L-5.8%20126.9L6.2%20127.3L17.9%20125.2L29.0%20120.6L39.0%20113.9L47.6%20105.6L54.8%2096.0L60.6%2085.5L64.9%2074.3L68.1%2062.7L70.1%2050.9L71.1%2039.0L71.4%2027.0L71.0%2015.0%22%2F%3E%3Cpath%20d%3D%22M-72.9%2011.7L-75.6%2023.3L-77.9%2035.1L-79.8%2047.0L-81.0%2058.9L-81.5%2070.9L-81.1%2082.9L-79.7%2094.8L-77.4%20106.6L-73.9%20118.1L-69.3%20129.1L-63.6%20139.6L-56.6%20149.4L-48.4%20158.1L-39.0%20165.7L-28.7%20171.7L-17.5%20176.0L-5.7%20178.4L6.3%20178.7L18.1%20176.9L29.5%20173.1L40.1%20167.5L49.7%20160.4L58.2%20151.9L65.5%20142.4L71.5%20132.0L76.3%20121.0L79.9%20109.6L82.4%2097.8L83.8%2085.9L84.3%2073.9L83.8%2061.9L82.5%2050.0L80.4%2038.2L77.7%2026.5L74.6%2014.9%22%2F%3E%3Cpath%20d%3D%22M-75.6%2010.6L-81.0%2021.3L-86.2%2032.1L-91.0%2043.1L-95.4%2054.3L-99.3%2065.6L-102.6%2077.2L-105.3%2088.9L-107.3%20100.7L-108.7%20112.6L-109.3%20124.6L-109.2%20136.6L-108.2%20148.6L-106.4%20160.4L-103.8%20172.1L-100.3%20183.6L-95.8%20194.7L-90.5%20205.5L-84.2%20215.7L-77.0%20225.3L-68.9%20234.1L-59.9%20242.1L-50.1%20249.0L-39.6%20254.8L-28.5%20259.3L-16.9%20262.5L-5.1%20264.1L6.9%20264.3L18.8%20262.9L30.5%20260.0L41.7%20255.7L52.3%20250.1L62.2%20243.4L71.3%20235.5L79.5%20226.8L86.8%20217.3L93.2%20207.2L98.7%20196.5L103.2%20185.4L106.8%20173.9L109.5%20162.2L111.3%20150.4L112.3%20138.4L112.5%20126.4L111.9%20114.4L110.5%20102.5L108.4%2090.7L105.7%2079.0L102.3%2067.5L98.3%2056.2L93.8%2045.1L88.8%2034.2L83.4%2023.5L77.6%2012.9%22%2F%3E%3Cpath%20d%3D%22M-75.6%20-10.6L-81.0%20-21.3L-86.2%20-32.1L-91.0%20-43.1L-95.4%20-54.3L-99.3%20-65.6L-102.6%20-77.2L-105.3%20-88.9L-107.3%20-100.7L-108.7%20-112.6L-109.3%20-124.6L-109.2%20-136.6L-108.2%20-148.6L-106.4%20-160.4L-103.8%20-172.1L-100.3%20-183.6L-95.8%20-194.7L-90.5%20-205.5L-84.2%20-215.7L-77.0%20-225.3L-68.9%20-234.1L-59.9%20-242.1L-50.1%20-249.0L-39.6%20-254.8L-28.5%20-259.3L-16.9%20-262.5L-5.1%20-264.1L6.9%20-264.3L18.8%20-262.9L30.5%20-260.0L41.7%20-255.7L52.3%20-250.1L62.2%20-243.4L71.3%20-235.5L79.5%20-226.8L86.8%20-217.3L93.2%20-207.2L98.7%20-196.5L103.2%20-185.4L106.8%20-173.9L109.5%20-162.2L111.3%20-150.4L112.3%20-138.4L112.5%20-126.4L111.9%20-114.4L110.5%20-102.5L108.4%20-90.7L105.7%20-79.0L102.3%20-67.5L98.3%20-56.2L93.8%20-45.1L88.8%20-34.2L83.4%20-23.5L77.6%20-12.9%22%2F%3E%3Cpath%20d%3D%22M-72.9%20-11.7L-75.6%20-23.3L-77.9%20-35.1L-79.8%20-47.0L-81.0%20-58.9L-81.5%20-70.9L-81.1%20-82.9L-79.7%20-94.8L-77.4%20-106.6L-73.9%20-118.1L-69.3%20-129.1L-63.6%20-139.6L-56.6%20-149.4L-48.4%20-158.1L-39.0%20-165.7L-28.7%20-171.7L-17.5%20-176.0L-5.7%20-178.4L6.3%20-178.7L18.1%20-176.9L29.5%20-173.1L40.1%20-167.5L49.7%20-160.4L58.2%20-151.9L65.5%20-142.4L71.5%20-132.0L76.3%20-121.0L79.9%20-109.6L82.4%20-97.8L83.8%20-85.9L84.3%20-73.9L83.8%20-61.9L82.5%20-50.0L80.4%20-38.2L77.7%20-26.5L74.6%20-14.9%22%2F%3E%3Cpath%20d%3D%22M-70.0%20-12.0L-69.8%20-24.0L-69.2%20-36.0L-68.0%20-47.9L-65.9%20-59.7L-62.8%20-71.3L-58.5%20-82.5L-53.0%20-93.2L-46.1%20-103.0L-37.8%20-111.7L-28.2%20-118.8L-17.4%20-124.0L-5.8%20-126.9L6.2%20-127.3L17.9%20-125.2L29.0%20-120.6L39.0%20-113.9L47.6%20-105.6L54.8%20-96.0L60.6%20-85.5L64.9%20-74.3L68.1%20-62.7L70.1%20-50.9L71.1%20-39.0L71.4%20-27.0L71.0%20-15.0%22%2F%3E%3Cpath%20d%3D%22M-67.1%20-11.7L-64.1%20-23.3L-60.6%20-34.7L-56.3%20-45.9L-51.1%20-56.7L-44.7%20-66.9L-36.9%20-76.0L-27.7%20-83.7L-17.2%20-89.4L-5.7%20-92.7L6.3%20-93.1L18.0%20-90.6L28.8%20-85.5L38.3%20-78.2L46.3%20-69.3L52.9%20-59.2L58.1%20-48.4L62.1%20-37.1L65.2%20-25.5L67.7%20-13.8%22%2F%3E%3Cpath%20d%3D%22M-64.4%20-10.6L-58.7%20-21.2L-52.5%20-31.4L-45.6%20-41.3L-37.7%20-50.3L-28.6%20-58.1L-18.2%20-64.1L-6.8%20-67.7L5.1%20-68.4L16.9%20-66.1L27.8%20-61.1L37.3%20-53.9L45.6%20-45.2L52.5%20-35.4L58.5%20-25.0L63.8%20-14.2%22%2F%3E%3Cpath%20d%3D%22M-62.0%20-9.0L-54.0%20-17.8L-45.5%20-26.4L-36.5%20-34.2L-26.6%20-41.0L-15.7%20-46.1L-4.1%20-48.9L7.9%20-48.9L19.6%20-46.1L30.3%20-40.9L40.1%20-33.9L48.8%20-25.7L56.8%20-16.8%22%2F%3E%3Cpath%20d%3D%22M-60.1%20-6.8L-50.2%20-13.5L-40.0%20-19.9L-29.4%20-25.5L-18.3%20-30.0L-6.6%20-32.7L5.4%20-33.2L17.2%20-31.4L28.6%20-27.5L39.2%20-22.0L49.3%20-15.5L59.0%20-8.5%22%2F%3E%3Cpath%20d%3D%22M-58.8%20-4.3L-47.5%20-8.4L-36.2%20-12.3L-24.7%20-15.7L-12.9%20-18.1L-1.0%20-19.2L11.0%20-18.8L22.9%20-17.0L34.4%20-13.8L45.8%20-9.9L56.9%20-5.5%22%2F%3E%3Cpath%20d%3D%22M-58.1%20-1.4L-46.2%20-2.9L-34.2%20-4.2L-22.3%20-5.3L-10.3%20-6.0L1.7%20-6.3L13.7%20-6.1L25.6%20-5.3L37.6%20-4.1L49.5%20-2.7%22%2F%3E%3C%2Fg%3E%0A%3Cg%20fill%3D%22%238fa8ff%22%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.7%206.3)%20rotate(-0.8)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(3.0%2019.3)%20rotate(-3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.4%2033.3)%20rotate(-3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(-0.1%2049.2)%20rotate(-2.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.1%2068.5)%20rotate(-3.9)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%2093.3)%20rotate(-5.1)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.2%20127.5)%20rotate(-4.3)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%20178.8)%20rotate(-3.5)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.9%20264.4)%20rotate(-3.0)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.9%20-264.4)%20rotate(3.0)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%20-178.8)%20rotate(3.5)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.2%20-127.5)%20rotate(4.3)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%20-93.3)%20rotate(5.1)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.1%20-68.5)%20rotate(3.9)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(-0.1%20-49.2)%20rotate(2.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.4%20-33.3)%20rotate(3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(3.0%20-19.3)%20rotate(3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.7%20-6.3)%20rotate(0.8)%22%2F%3E%3C%2Fg%3E%0A%3Crect%20x%3D%22-84%22%20y%3D%22-17%22%20width%3D%2284%22%20height%3D%2234%22%20rx%3D%223%22%20fill%3D%22%23e03a3a%22%2F%3E%0A%3Crect%20x%3D%220%22%20y%3D%22-17%22%20width%3D%2284%22%20height%3D%2234%22%20rx%3D%223%22%20fill%3D%22%235b86ff%22%2F%3E%0A%3Ctext%20x%3D%22-42%22%20y%3D%226%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20fill%3D%22%23ffffff%22%3EN%3C%2Ftext%3E%0A%3Ctext%20x%3D%2242%22%20y%3D%226%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20fill%3D%22%23ffffff%22%3ES%3C%2Ftext%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") center top / 1000px 640px repeat; opacity: .13; }
html[data-theme="light"] body::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%22640%22%20viewBox%3D%22-500%20-320%201000%20640%22%3E%0A%3Cg%20transform%3D%22rotate(-14)%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23203878%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M-58.1%201.4L-46.2%202.9L-34.2%204.2L-22.3%205.3L-10.3%206.0L1.7%206.3L13.7%206.1L25.6%205.3L37.6%204.1L49.5%202.7%22%2F%3E%3Cpath%20d%3D%22M-58.8%204.3L-47.5%208.4L-36.2%2012.3L-24.7%2015.7L-12.9%2018.1L-1.0%2019.2L11.0%2018.8L22.9%2017.0L34.4%2013.8L45.8%209.9L56.9%205.5%22%2F%3E%3Cpath%20d%3D%22M-60.1%206.8L-50.2%2013.5L-40.0%2019.9L-29.4%2025.5L-18.3%2030.0L-6.6%2032.7L5.4%2033.2L17.2%2031.4L28.6%2027.5L39.2%2022.0L49.3%2015.5L59.0%208.5%22%2F%3E%3Cpath%20d%3D%22M-62.0%209.0L-54.0%2017.8L-45.5%2026.4L-36.5%2034.2L-26.6%2041.0L-15.7%2046.1L-4.1%2048.9L7.9%2048.9L19.6%2046.1L30.3%2040.9L40.1%2033.9L48.8%2025.7L56.8%2016.8%22%2F%3E%3Cpath%20d%3D%22M-64.4%2010.6L-58.7%2021.2L-52.5%2031.4L-45.6%2041.3L-37.7%2050.3L-28.6%2058.1L-18.2%2064.1L-6.8%2067.7L5.1%2068.4L16.9%2066.1L27.8%2061.1L37.3%2053.9L45.6%2045.2L52.5%2035.4L58.5%2025.0L63.8%2014.2%22%2F%3E%3Cpath%20d%3D%22M-67.1%2011.7L-64.1%2023.3L-60.6%2034.7L-56.3%2045.9L-51.1%2056.7L-44.7%2066.9L-36.9%2076.0L-27.7%2083.7L-17.2%2089.4L-5.7%2092.7L6.3%2093.1L18.0%2090.6L28.8%2085.5L38.3%2078.2L46.3%2069.3L52.9%2059.2L58.1%2048.4L62.1%2037.1L65.2%2025.5L67.7%2013.8%22%2F%3E%3Cpath%20d%3D%22M-70.0%2012.0L-69.8%2024.0L-69.2%2036.0L-68.0%2047.9L-65.9%2059.7L-62.8%2071.3L-58.5%2082.5L-53.0%2093.2L-46.1%20103.0L-37.8%20111.7L-28.2%20118.8L-17.4%20124.0L-5.8%20126.9L6.2%20127.3L17.9%20125.2L29.0%20120.6L39.0%20113.9L47.6%20105.6L54.8%2096.0L60.6%2085.5L64.9%2074.3L68.1%2062.7L70.1%2050.9L71.1%2039.0L71.4%2027.0L71.0%2015.0%22%2F%3E%3Cpath%20d%3D%22M-72.9%2011.7L-75.6%2023.3L-77.9%2035.1L-79.8%2047.0L-81.0%2058.9L-81.5%2070.9L-81.1%2082.9L-79.7%2094.8L-77.4%20106.6L-73.9%20118.1L-69.3%20129.1L-63.6%20139.6L-56.6%20149.4L-48.4%20158.1L-39.0%20165.7L-28.7%20171.7L-17.5%20176.0L-5.7%20178.4L6.3%20178.7L18.1%20176.9L29.5%20173.1L40.1%20167.5L49.7%20160.4L58.2%20151.9L65.5%20142.4L71.5%20132.0L76.3%20121.0L79.9%20109.6L82.4%2097.8L83.8%2085.9L84.3%2073.9L83.8%2061.9L82.5%2050.0L80.4%2038.2L77.7%2026.5L74.6%2014.9%22%2F%3E%3Cpath%20d%3D%22M-75.6%2010.6L-81.0%2021.3L-86.2%2032.1L-91.0%2043.1L-95.4%2054.3L-99.3%2065.6L-102.6%2077.2L-105.3%2088.9L-107.3%20100.7L-108.7%20112.6L-109.3%20124.6L-109.2%20136.6L-108.2%20148.6L-106.4%20160.4L-103.8%20172.1L-100.3%20183.6L-95.8%20194.7L-90.5%20205.5L-84.2%20215.7L-77.0%20225.3L-68.9%20234.1L-59.9%20242.1L-50.1%20249.0L-39.6%20254.8L-28.5%20259.3L-16.9%20262.5L-5.1%20264.1L6.9%20264.3L18.8%20262.9L30.5%20260.0L41.7%20255.7L52.3%20250.1L62.2%20243.4L71.3%20235.5L79.5%20226.8L86.8%20217.3L93.2%20207.2L98.7%20196.5L103.2%20185.4L106.8%20173.9L109.5%20162.2L111.3%20150.4L112.3%20138.4L112.5%20126.4L111.9%20114.4L110.5%20102.5L108.4%2090.7L105.7%2079.0L102.3%2067.5L98.3%2056.2L93.8%2045.1L88.8%2034.2L83.4%2023.5L77.6%2012.9%22%2F%3E%3Cpath%20d%3D%22M-75.6%20-10.6L-81.0%20-21.3L-86.2%20-32.1L-91.0%20-43.1L-95.4%20-54.3L-99.3%20-65.6L-102.6%20-77.2L-105.3%20-88.9L-107.3%20-100.7L-108.7%20-112.6L-109.3%20-124.6L-109.2%20-136.6L-108.2%20-148.6L-106.4%20-160.4L-103.8%20-172.1L-100.3%20-183.6L-95.8%20-194.7L-90.5%20-205.5L-84.2%20-215.7L-77.0%20-225.3L-68.9%20-234.1L-59.9%20-242.1L-50.1%20-249.0L-39.6%20-254.8L-28.5%20-259.3L-16.9%20-262.5L-5.1%20-264.1L6.9%20-264.3L18.8%20-262.9L30.5%20-260.0L41.7%20-255.7L52.3%20-250.1L62.2%20-243.4L71.3%20-235.5L79.5%20-226.8L86.8%20-217.3L93.2%20-207.2L98.7%20-196.5L103.2%20-185.4L106.8%20-173.9L109.5%20-162.2L111.3%20-150.4L112.3%20-138.4L112.5%20-126.4L111.9%20-114.4L110.5%20-102.5L108.4%20-90.7L105.7%20-79.0L102.3%20-67.5L98.3%20-56.2L93.8%20-45.1L88.8%20-34.2L83.4%20-23.5L77.6%20-12.9%22%2F%3E%3Cpath%20d%3D%22M-72.9%20-11.7L-75.6%20-23.3L-77.9%20-35.1L-79.8%20-47.0L-81.0%20-58.9L-81.5%20-70.9L-81.1%20-82.9L-79.7%20-94.8L-77.4%20-106.6L-73.9%20-118.1L-69.3%20-129.1L-63.6%20-139.6L-56.6%20-149.4L-48.4%20-158.1L-39.0%20-165.7L-28.7%20-171.7L-17.5%20-176.0L-5.7%20-178.4L6.3%20-178.7L18.1%20-176.9L29.5%20-173.1L40.1%20-167.5L49.7%20-160.4L58.2%20-151.9L65.5%20-142.4L71.5%20-132.0L76.3%20-121.0L79.9%20-109.6L82.4%20-97.8L83.8%20-85.9L84.3%20-73.9L83.8%20-61.9L82.5%20-50.0L80.4%20-38.2L77.7%20-26.5L74.6%20-14.9%22%2F%3E%3Cpath%20d%3D%22M-70.0%20-12.0L-69.8%20-24.0L-69.2%20-36.0L-68.0%20-47.9L-65.9%20-59.7L-62.8%20-71.3L-58.5%20-82.5L-53.0%20-93.2L-46.1%20-103.0L-37.8%20-111.7L-28.2%20-118.8L-17.4%20-124.0L-5.8%20-126.9L6.2%20-127.3L17.9%20-125.2L29.0%20-120.6L39.0%20-113.9L47.6%20-105.6L54.8%20-96.0L60.6%20-85.5L64.9%20-74.3L68.1%20-62.7L70.1%20-50.9L71.1%20-39.0L71.4%20-27.0L71.0%20-15.0%22%2F%3E%3Cpath%20d%3D%22M-67.1%20-11.7L-64.1%20-23.3L-60.6%20-34.7L-56.3%20-45.9L-51.1%20-56.7L-44.7%20-66.9L-36.9%20-76.0L-27.7%20-83.7L-17.2%20-89.4L-5.7%20-92.7L6.3%20-93.1L18.0%20-90.6L28.8%20-85.5L38.3%20-78.2L46.3%20-69.3L52.9%20-59.2L58.1%20-48.4L62.1%20-37.1L65.2%20-25.5L67.7%20-13.8%22%2F%3E%3Cpath%20d%3D%22M-64.4%20-10.6L-58.7%20-21.2L-52.5%20-31.4L-45.6%20-41.3L-37.7%20-50.3L-28.6%20-58.1L-18.2%20-64.1L-6.8%20-67.7L5.1%20-68.4L16.9%20-66.1L27.8%20-61.1L37.3%20-53.9L45.6%20-45.2L52.5%20-35.4L58.5%20-25.0L63.8%20-14.2%22%2F%3E%3Cpath%20d%3D%22M-62.0%20-9.0L-54.0%20-17.8L-45.5%20-26.4L-36.5%20-34.2L-26.6%20-41.0L-15.7%20-46.1L-4.1%20-48.9L7.9%20-48.9L19.6%20-46.1L30.3%20-40.9L40.1%20-33.9L48.8%20-25.7L56.8%20-16.8%22%2F%3E%3Cpath%20d%3D%22M-60.1%20-6.8L-50.2%20-13.5L-40.0%20-19.9L-29.4%20-25.5L-18.3%20-30.0L-6.6%20-32.7L5.4%20-33.2L17.2%20-31.4L28.6%20-27.5L39.2%20-22.0L49.3%20-15.5L59.0%20-8.5%22%2F%3E%3Cpath%20d%3D%22M-58.8%20-4.3L-47.5%20-8.4L-36.2%20-12.3L-24.7%20-15.7L-12.9%20-18.1L-1.0%20-19.2L11.0%20-18.8L22.9%20-17.0L34.4%20-13.8L45.8%20-9.9L56.9%20-5.5%22%2F%3E%3Cpath%20d%3D%22M-58.1%20-1.4L-46.2%20-2.9L-34.2%20-4.2L-22.3%20-5.3L-10.3%20-6.0L1.7%20-6.3L13.7%20-6.1L25.6%20-5.3L37.6%20-4.1L49.5%20-2.7%22%2F%3E%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23203878%22%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.7%206.3)%20rotate(-0.8)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(3.0%2019.3)%20rotate(-3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.4%2033.3)%20rotate(-3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(-0.1%2049.2)%20rotate(-2.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.1%2068.5)%20rotate(-3.9)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%2093.3)%20rotate(-5.1)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.2%20127.5)%20rotate(-4.3)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%20178.8)%20rotate(-3.5)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.9%20264.4)%20rotate(-3.0)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.9%20-264.4)%20rotate(3.0)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%20-178.8)%20rotate(3.5)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.2%20-127.5)%20rotate(4.3)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(2.3%20-93.3)%20rotate(5.1)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.1%20-68.5)%20rotate(3.9)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(-0.1%20-49.2)%20rotate(2.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.4%20-33.3)%20rotate(3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(3.0%20-19.3)%20rotate(3.2)%22%2F%3E%3Cpath%20d%3D%22M-5%20-4L5%200L-5%204z%22%20transform%3D%22translate(1.7%20-6.3)%20rotate(0.8)%22%2F%3E%3C%2Fg%3E%0A%3Crect%20x%3D%22-84%22%20y%3D%22-17%22%20width%3D%2284%22%20height%3D%2234%22%20rx%3D%223%22%20fill%3D%22%23d02828%22%2F%3E%0A%3Crect%20x%3D%220%22%20y%3D%22-17%22%20width%3D%2284%22%20height%3D%2234%22%20rx%3D%223%22%20fill%3D%22%23203878%22%2F%3E%0A%3Ctext%20x%3D%22-42%22%20y%3D%226%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20fill%3D%22%23ffffff%22%3EN%3C%2Ftext%3E%0A%3Ctext%20x%3D%2242%22%20y%3D%226%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20fill%3D%22%23ffffff%22%3ES%3C%2Ftext%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E"); opacity: .10; }
@media (max-width: 1100px) { body::after { background-size: 760px 486px; } }
@media (max-width: 700px) { body::after { background-size: 560px 358px; opacity: .11; } }
/* lighter texture so text stays clear */
body::after { opacity: .075; }
html[data-theme="light"] body::after { opacity: .06; }
@media (max-width: 700px) { body::after { opacity: .07; } html[data-theme="light"] body::after { opacity: .055; } }

/* corner marks sit inside the fields (not outside) */
.fl .field::before { top: 5px; right: 5px; }
.fl .field::after { bottom: 5px; right: 5px; }
.fl .tile::before { top: 5px; left: 5px; }
.fl .tile::after { bottom: 5px; left: 5px; }
.fl .field::before, .fl .field::after, .fl .tile::before, .fl .tile::after { z-index: 0; }
.fl .field > input, .fl .field > textarea, .fl .field > .sel-btn, .fl .field > .lab { position: relative; z-index: 1; }
.fl .field > .lab { position: absolute; }
.fl .tile { z-index: 1; }

/* corner marks hug the field border */
.fl .field::before { top: 1px; right: 1px; }
.fl .field::after { bottom: 1px; right: 1px; }
.fl .tile::before { top: 1px; left: 1px; }
.fl .tile::after { bottom: 1px; left: 1px; }

/* corner marks lie exactly on the field border (outer edges coincide) */
.fl .field::before { top: -1.5px; right: -1.5px; }
.fl .field::after { bottom: -1.5px; right: -1.5px; }
.fl .tile::before { top: -1.5px; left: -1.5px; }
.fl .tile::after { bottom: -1.5px; left: -1.5px; }
.fl .field::before, .fl .field::after, .fl .tile::before, .fl .tile::after { z-index: 3; }

/* on focus the corner marks move 2px inside the field */
.fl .field:focus-within::before, .fl.sel.open .field::before { top: .5px; right: .5px; }
.fl .field:focus-within::after, .fl.sel.open .field::after { bottom: .5px; right: .5px; }
.fl .field:focus-within .tile::before, .fl.sel.open .tile::before { top: .5px; left: .5px; }
.fl .field:focus-within .tile::after, .fl.sel.open .tile::after { bottom: .5px; left: .5px; }

/* focus: marks move 1.5px inward on BOTH axes */
.fl .field::before, .fl .field::after, .fl .tile::before, .fl .tile::after { transition: width .3s var(--ease), height .3s var(--ease), opacity .3s, transform .3s var(--ease); }
.fl .field:focus-within::before, .fl.sel.open .field::before { top: -1.5px; right: -1.5px; transform: translate(-1.5px, 1.5px); }
.fl .field:focus-within::after, .fl.sel.open .field::after { bottom: -1.5px; right: -1.5px; transform: translate(-1.5px, -1.5px); }
.fl .field:focus-within .tile::before, .fl.sel.open .tile::before { top: -1.5px; left: -1.5px; transform: translate(1.5px, 1.5px); }
.fl .field:focus-within .tile::after, .fl.sel.open .tile::after { bottom: -1.5px; left: -1.5px; transform: translate(1.5px, -1.5px); }

/* whole-pixel alignment: marks share the border's outer edge exactly */
.fl .field::before { top: -1px; right: -1px; }
.fl .field::after { bottom: -1px; right: -1px; }
.fl .tile::before { top: -1px; left: -1px; }
.fl .tile::after { bottom: -1px; left: -1px; }
.fl .field:focus-within::before, .fl.sel.open .field::before { top: -1px; right: -1px; transform: translate(-1px, 1px); }
.fl .field:focus-within::after, .fl.sel.open .field::after { bottom: -1px; right: -1px; transform: translate(-1px, -1px); }
.fl .field:focus-within .tile::before, .fl.sel.open .tile::before { top: -1px; left: -1px; transform: translate(1px, 1px); }
.fl .field:focus-within .tile::after, .fl.sel.open .tile::after { bottom: -1px; left: -1px; transform: translate(1px, -1px); }

/* corner marks: 3px strokes centred on the border so no hairline gap can show */
.fl .field::before, .fl .field::after, .fl .tile::before, .fl .tile::after { box-sizing: border-box; border-width: 3px; width: 10px; height: 10px; }
.fl .field::before { top: -2px; right: -2px; }
.fl .field::after { bottom: -2px; right: -2px; }
.fl .tile::before { top: -2px; left: -2px; }
.fl .tile::after { bottom: -2px; left: -2px; }
.fl .field:focus-within::before, .fl .field:focus-within::after, .fl.sel.open .field::before, .fl.sel.open .field::after,
.fl .field:focus-within .tile::before, .fl .field:focus-within .tile::after, .fl.sel.open .tile::before, .fl.sel.open .tile::after { width: 18px; height: 18px; border-width: 3px; }
.fl .field:focus-within::before, .fl.sel.open .field::before { top: -2px; right: -2px; transform: translate(-1px, 1px); }
.fl .field:focus-within::after, .fl.sel.open .field::after { bottom: -2px; right: -2px; transform: translate(-1px, -1px); }
.fl .field:focus-within .tile::before, .fl.sel.open .tile::before { top: -2px; left: -2px; transform: translate(1px, 1px); }
.fl .field:focus-within .tile::after, .fl.sel.open .tile::after { bottom: -2px; left: -2px; transform: translate(1px, -1px); }

/* thank-you panel: short message, one row of actions */
.done-msg { color: var(--muted); margin: 8px auto 0; max-width: 460px; font-size: .95rem; }
.done-actions { flex-wrap: nowrap; gap: 8px; margin-top: 18px; }
.done-actions .btn { flex: 1 1 auto; min-width: 0; padding: 11px 10px; font-size: .84rem; white-space: nowrap; }
.done-actions .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 560px) { .done-actions { flex-wrap: wrap; } .done-actions .btn { flex: 1 1 100%; } }

/* contact form: compact field heights */
.enquiry .fl input, .enquiry .fl select { min-height: 42px; padding: 9px 14px 9px 56px; line-height: 1.4; }
.enquiry .fl textarea { min-height: 84px; padding: 11px 14px 22px 56px; line-height: 1.4; }
.sel-btn { min-height: 42px; padding: 9px 40px 9px 56px; line-height: 1.4; }
.fl .tile { width: 42px; }
.fl .lab { top: 21px; }
.fl.ta .lab { top: 21px; }
.form-fields { gap: 15px; }
.enquiry { gap: 14px; padding: 20px; }
.enquiry .btn { padding: 11px 18px; }
.enquiry .fl textarea { height: 92px; min-height: 92px; }