/* (주)네오이엔지 — www.neoeng.kr
   Layout: verification first. The hero pairs the three businesses with the registration card,
   one TMS station drawing carries the visual identity, everything else is plain type and tables.
   Brand standard: docs/브랜드_기준.md (A안 맑은 청록, IBM Plex Sans KR). */

/* Site subset (only the glyphs these pages use). Characters added later fall back to the
   complete IBM Plex Sans KR files below, which load only when such a character appears. */
@font-face { font-family: "Plex Neo"; src: url("../fonts/plex-neo-400.woff2?v=2026110906") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Neo"; src: url("../fonts/plex-neo-600.woff2?v=2026110906") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Neo"; src: url("../fonts/plex-neo-700.woff2?v=2026110906") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url("../fonts/plex/IBMPlexSansKR-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url("../fonts/plex/IBMPlexSansKR-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url("../fonts/plex/IBMPlexSansKR-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* A안 맑은 청록 */
  --teal: #0A7470;          /* buttons, links */
  --teal-strong: #085E5B;   /* hover, teal text on mist */
  --aqua: #4DB6B2;          /* water and lines in the drawing (never text) */
  --mist: #E3F2F0;          /* small backgrounds only */
  /* text and neutrals */
  --ink: #1D2B36;           /* same as the logo's company name */
  --ink-2: #4A5863;
  --label: #5E6D79;
  --paper: #FFFFFF;
  --band: #F3F6F6;
  --line: #DCE4E3;
  --line-strong: #C9D3D2;

  --font: "Plex Neo", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  /* type scale, ratio ≈ 1.25 from a 17px body */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-ui: 0.9375rem;  /* 15 */
  --fs-body: 1.0625rem;/* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem);   /* 26–34 */
  --fs-hero: clamp(2.125rem, 1.35rem + 3.1vw, 3.25rem);   /* 34–52 */

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(56px, 7vw, 96px);
  --header-h: 72px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--teal-strong); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw { white-space: nowrap; }
.muted { color: var(--label); font-weight: 400; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { flex: none; display: block; border-radius: 3px; }
.brand img { width: 160px; height: 33px; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; list-style: none; }
.site-nav a { display: block; padding: 10px 12px; color: var(--ink); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--teal); }
.site-nav a[aria-current="page"] { color: var(--teal-strong); border-bottom-color: var(--teal); }
.header-tel { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-strong); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 44px; }
.header-tel:hover { text-decoration: underline; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.menu-toggle .icon { width: 24px; height: 24px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header__inner { gap: 16px; }
  .site-nav ul { gap: 0; }
  .site-nav a { padding-inline: 9px; }
  .header-tel__label { display: none; }
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .brand img { width: 140px; height: 29px; }
  .menu-toggle { display: inline-flex; }
  .header-tel { margin-left: auto; }
  .js .site-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--paper); border-bottom: 1px solid var(--line); display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 4px var(--gutter) 12px; }
  .site-nav a { padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
  .site-nav li:last-child a { border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .no-js .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
  .no-js .site-nav { order: 3; width: 100%; }
  .no-js .menu-toggle { display: none; }
}
@media (max-width: 479px) {
  .header-tel__label { display: none; }
  .site-header__inner { gap: 12px; }
  .brand img { width: 124px; height: 26px; }
}
/* very small phones: keep the call button, show the number to screen readers only */
@media (max-width: 359px) {
  .header-tel { min-width: 44px; justify-content: center; }
  .header-tel .num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 6px; border: 1.5px solid var(--teal); font-size: var(--fs-ui); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-strong); border-color: var(--teal-strong); color: #fff; }
.btn--secondary { background: var(--paper); color: var(--teal-strong); }
.btn--secondary:hover { background: var(--mist); color: var(--teal-strong); }
.btn--small { min-height: 40px; padding: 0 14px; font-size: var(--fs-sm); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__title { font-size: var(--fs-hero); line-height: 1.22; letter-spacing: -0.025em; }
.hero__title span { display: inline-block; }
.hero__lead { margin-top: 22px; max-width: 34em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .hero__actions .btn { width: 100%; }
}

/* registration card: the one boxed element on the page */
.reg-card { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); padding: 24px 26px 18px; }
.reg-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.reg-card__title { font-size: var(--fs-ui); font-weight: 600; color: var(--label); letter-spacing: 0; }
.reg-card__kind { font-size: var(--fs-sm); font-weight: 600; color: var(--teal-strong); background: var(--mist); padding: 2px 10px; border-radius: 4px; }
.reg-card dl div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 11px; border-bottom: 1px solid var(--line); }
.reg-card dl div:last-child { border-bottom: 0; }
.reg-card dt { font-size: var(--fs-sm); font-weight: 600; color: var(--label); }
.reg-card dd { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.reg-card .reg-no { font-size: var(--fs-lg); font-weight: 700; color: var(--teal-strong); letter-spacing: -0.01em; }
@media (max-width: 479px) {
  .reg-card { padding: 20px 18px 14px; }
  .reg-card dl div { grid-template-columns: 1fr; gap: 2px; }
}
/* copy button (business number, email) */
.copy-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); color: var(--ink-2); font: 600 var(--fs-sm) var(--font); cursor: pointer; }
.copy-btn:hover { border-color: var(--teal); color: var(--teal-strong); }
.copy-btn .icon { width: 15px; height: 15px; }
.copy-btn.is-done { border-color: var(--teal); background: var(--mist); color: var(--teal-strong); }

/* ---------- station drawing ---------- */
.figure-band .section-head { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 5vw, 72px); align-items: end; }
.figure-band .section-head p { margin-top: 0; max-width: 36em; }
@media (max-width: 899px) { .figure-band .section-head { grid-template-columns: 1fr; } }
.figure-table { margin-top: clamp(36px, 5vw, 56px); }
.station-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.station { width: 100%; min-width: 880px; height: auto; padding: 8px 4px 0; }
.station-hint { display: none; margin-top: 10px; font-size: var(--fs-sm); color: var(--label); }
@media (max-width: 919px) { .station-hint { display: block; } }
.d-ground { stroke: var(--line-strong); stroke-width: 1.5; }
.d-wall, .d-house { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.d-box, .d-pump { fill: var(--paper); stroke: var(--ink); stroke-width: 1.75; }
.d-screen { fill: var(--mist); stroke: var(--ink-2); stroke-width: 1; }
.d-trace { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linejoin: round; }
.d-trace-strong { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linejoin: round; }
.d-led { fill: var(--line-strong); }
.d-led-on { fill: var(--teal); }
.d-thin { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.d-bottle { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.25; }
.d-liquid { fill: var(--aqua); opacity: 0.75; }
.d-probe { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.d-water-fill { fill: var(--mist); }
.d-water, .d-wave { fill: none; stroke: var(--aqua); stroke-width: 2.5; stroke-linecap: round; }
.d-wave { stroke-width: 1.5; }
.d-flow { fill: none; stroke: var(--aqua); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.d-pipe { fill: none; stroke: var(--line-strong); stroke-width: 7; stroke-linejoin: round; }
.d-sample, .d-sample-in, .d-sample-drop { fill: none; stroke: var(--aqua); stroke-width: 3; stroke-linejoin: round; }
.d-sample-drop { stroke-width: 2; }
.d-signal { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; }
.d-data { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 4 7; stroke-linecap: round; }
.d-tag { font-family: var(--font); font-size: 12px; font-weight: 600; fill: var(--ink); }
.d-tag-house { font-size: 13px; fill: var(--ink-2); }
.d-label { font-family: var(--font); font-size: 14px; font-weight: 700; fill: var(--ink); }
.d-sub { font-family: var(--font); font-size: 12.5px; fill: var(--label); }
.d-tick { stroke: var(--line-strong); stroke-width: 1.25; }
/* Station sequence: plays once, in the order the water moves, when the drawing scrolls into view.
   site.js adds .is-armed (start frame held) and then .is-playing. Without JS, or with reduced motion,
   the finished drawing is shown as is. */
@media (prefers-reduced-motion: no-preference) {
  .station.is-armed .a-flow,
  .station.is-armed .a-draw,
  .station.is-armed .a-pump,
  .station.is-armed .a-tank,
  .station.is-armed .a-tankwave,
  .station.is-armed .a-fill,
  .station.is-armed .a-trace,
  .station.is-armed .a-led,
  .station.is-armed .a-dau,
  .station.is-armed .a-signal,
  .station.is-armed .a-data { animation-fill-mode: both; animation-play-state: paused; animation-timing-function: ease-out; }
  .station.is-playing * { animation-play-state: running !important; }

  .station.is-armed .a-flow { animation-name: st-flow; animation-duration: 1.1s; animation-delay: 0s; }
  .station.is-armed .a-draw { stroke-dasharray: 1; animation-name: st-draw; }
  .station.is-armed .a-pipe { animation-duration: 0.9s; animation-delay: 0.6s; animation-timing-function: linear; }
  .station.is-armed .a-pump { animation-name: st-pump; animation-duration: 0.9s; animation-delay: 0.6s; }
  .station.is-armed .a-tank,
  .station.is-armed .a-tankwave { transform-box: fill-box; animation-duration: 0.8s; animation-delay: 1.45s; }
  .station.is-armed .a-tank { transform-origin: 50% 100%; animation-name: st-rise; }
  .station.is-armed .a-tankwave { animation-name: st-wave; }
  .station.is-armed .a-header { animation-duration: 0.8s; animation-delay: 2.2s; animation-timing-function: linear; }
  .station.is-armed .a-drop { animation-duration: 0.25s; animation-delay: 2.65s; }
  .station.is-armed .a-fill { transform-box: fill-box; transform-origin: 50% 100%; animation-name: st-rise; animation-duration: 0.5s; animation-delay: 2.9s; }
  .station.is-armed .a-trace { stroke-dasharray: 1; animation-name: st-draw; animation-duration: 0.5s; }
  .station.is-armed .a-led { animation-name: st-led; animation-duration: 0.3s; }
  .station.is-armed .a-drop.a-s1 { animation-delay: 2.75s; }
  .station.is-armed .a-drop.a-s2 { animation-delay: 2.85s; }
  .station.is-armed .a-drop.a-s3 { animation-delay: 2.95s; }
  .station.is-armed .a-trace.a-s1, .station.is-armed .a-led.a-s1 { animation-delay: 3.1s; }
  .station.is-armed .a-trace.a-s2, .station.is-armed .a-led.a-s2 { animation-delay: 3.35s; }
  .station.is-armed .a-trace.a-s3, .station.is-armed .a-led.a-s3 { animation-delay: 3.6s; }
  .station.is-armed .a-dau { animation-name: st-on; animation-duration: 0.3s; animation-delay: 3.95s; }
  .station.is-armed .a-signal { animation-name: st-on; animation-duration: 0.4s; animation-delay: 4.1s; }
  .station.is-armed .a-data { animation-name: st-data; animation-duration: 0.6s; animation-delay: 4.3s; animation-timing-function: linear; }
  .station.is-armed .a-centre { animation-duration: 0.7s; animation-delay: 4.85s; }
}
@keyframes st-flow { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes st-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-pump { 0%, 100% { stroke: var(--ink); } 30%, 70% { stroke: var(--teal); } }
@keyframes st-rise { from { transform: scaleY(0); } to { transform: none; } }
@keyframes st-wave { from { opacity: 0; transform: translateY(68px); } 15% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes st-led { from { fill: var(--line-strong); } 50% { fill: var(--teal); r: 4.5px; } to { fill: var(--teal); } }
@keyframes st-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-data { from { opacity: 0; stroke-dashoffset: 22; } 20% { opacity: 1; } to { opacity: 1; stroke-dashoffset: 0; } }

/* ---------- treatment process drawing (reagents page) ---------- */
.plant-switch { margin-bottom: clamp(36px, 5vw, 56px); }
.plant-title { font-size: var(--fs-lg); margin-bottom: 14px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tabs[hidden] { display: none; }
.tab { min-height: 44px; padding: 0 2px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--label); cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--teal-strong); border-bottom-color: var(--teal); }
@media (max-width: 599px) { .tab__long { display: none; } .tabs { gap: 4px 20px; } }
.tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
.plant-panel + .plant-panel { margin-top: 24px; }
.plant-note { margin-top: 14px; max-width: 46em; color: var(--ink-2); }
.plant-cap { font-weight: 600; margin-bottom: 10px; }
.is-tabbed .plant-cap { display: none; }
.is-tabbed .plant-panel + .plant-panel { margin-top: 0; }
.plant-panel[hidden] { display: none; }
.p-tag { fill: var(--paper); stroke: var(--teal); stroke-width: 1.5; }
.p-tagt { font-family: var(--font); font-size: 12px; font-weight: 600; fill: var(--teal-strong); }
.p-lead { stroke: var(--teal); stroke-width: 1.25; stroke-dasharray: 2 3; }
.p-tip { fill: var(--teal); }
.p-sonic { fill: none; stroke: var(--teal); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.p-bubble { fill: var(--paper); stroke: var(--aqua); stroke-width: 1.2; }
.p-recycle { fill: none; stroke: var(--aqua); stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; }
.p-cycle { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.p-arrow { fill: none; stroke: var(--aqua); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-cycle-arrow { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.p-module { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.p-step { font-family: var(--font); font-size: 14px; font-weight: 700; fill: var(--ink); }
.p-ras { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linejoin: round; opacity: .55; }
.p-arrow-ras { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-blanket { stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 5 4; }
.p-sludge { fill: var(--line-strong); opacity: .45; }
/* sequence: tN sets the start time (N x 0.2 s); the a-* class sets what moves */
.plant .t0 { --d: 0.0s; }
.plant .t1 { --d: 0.2s; }
.plant .t2 { --d: 0.4s; }
.plant .t3 { --d: 0.6s; }
.plant .t4 { --d: 0.8s; }
.plant .t5 { --d: 1.0s; }
.plant .t6 { --d: 1.2s; }
.plant .t7 { --d: 1.4s; }
.plant .t8 { --d: 1.6s; }
.plant .t9 { --d: 1.8s; }
.plant .t10 { --d: 2.0s; }
.plant .t11 { --d: 2.2s; }
.plant .t12 { --d: 2.4s; }
.plant .t13 { --d: 2.6s; }
.plant .t14 { --d: 2.8s; }
.plant .t15 { --d: 3.0s; }
.plant .t16 { --d: 3.2s; }
.plant .t17 { --d: 3.4s; }
.plant .t18 { --d: 3.6s; }
.plant .t19 { --d: 3.8s; }
.plant .t20 { --d: 4.0s; }
.plant .t21 { --d: 4.2s; }
.plant .t22 { --d: 4.4s; }
.plant .t23 { --d: 4.6s; }
.plant .t24 { --d: 4.8s; }
.plant .t25 { --d: 5.0s; }
.plant .t26 { --d: 5.2s; }
.plant .t27 { --d: 5.4s; }
.plant .t28 { --d: 5.6s; }
.plant .t29 { --d: 5.8s; }
.plant .t30 { --d: 6.0s; }
@media (prefers-reduced-motion: no-preference) {
  .plant.is-armed .a-flow, .plant.is-armed .a-draw, .plant.is-armed .a-rise, .plant.is-armed .a-wave,
  .plant.is-armed .a-fade, .plant.is-armed .a-tag .p-tag, .plant.is-armed .a-tag .p-tagt,
  .plant.is-armed .a-tag .p-tip, .plant.is-armed .a-tag .p-lead, .plant.is-armed .a-tag .p-sonic {
    animation-delay: var(--d, 0s); animation-fill-mode: both; animation-play-state: paused; animation-timing-function: ease-out;
  }
  .plant.is-playing * { animation-play-state: running !important; }
  .plant.is-armed .a-flow { animation-name: st-flow; animation-duration: 0.8s; }
  .plant.is-armed .a-draw { stroke-dasharray: 1; animation-name: st-draw; animation-duration: 0.5s; animation-timing-function: linear; }
  .plant.is-armed .a-rise { transform-box: fill-box; transform-origin: 50% 100%; animation-name: st-rise; animation-duration: 0.6s; }
  .plant.is-armed .a-wave { transform-box: fill-box; animation-name: st-wave2; animation-duration: 0.6s; }
  .plant.is-armed .a-fade { animation-name: st-on; animation-duration: 0.5s; }
  .plant.is-armed .a-tag .p-tag { animation-name: st-tagbox; animation-duration: 0.45s; }
  .plant.is-armed .a-tag .p-tagt { animation-name: st-tagtext; animation-duration: 0.45s; }
  .plant.is-armed .a-tag .p-tip { animation-name: st-tip; animation-duration: 0.45s; }
  .plant.is-armed .a-tag .p-lead, .plant.is-armed .a-tag .p-sonic { animation-name: st-on; animation-duration: 0.45s; }
}
@keyframes st-wave2 { from { opacity: 0; transform: translateY(40px); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes st-tagbox { from { stroke: var(--line-strong); } 55% { stroke: var(--teal); fill: var(--mist); } to { stroke: var(--teal); fill: var(--paper); } }
@keyframes st-tagtext { from { fill: var(--label); } to { fill: var(--teal-strong); } }
@keyframes st-tip { from { fill: var(--line-strong); } to { fill: var(--teal); } }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section--band { background: var(--band); border-block: 1px solid var(--line); }
.section-head { max-width: 42em; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p { margin-top: 12px; color: var(--ink-2); }
.h3 { font-size: var(--fs-lg); }

/* three business areas, divided by rules rather than boxed */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-top: 2px solid var(--ink); }
.area { padding: 26px 28px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.area + .area { padding-left: 28px; border-left: 1px solid var(--line); }
.area h3 { font-size: var(--fs-xl); }
.area p { color: var(--ink-2); }
.area .text-link { margin-top: auto; }
@media (max-width: 899px) {
  .areas { grid-template-columns: 1fr; }
  .area, .area + .area { padding: 22px 0 10px; border-left: 0; }
  .area + .area { border-top: 1px solid var(--line); }
}

/* task list (not a sequence, so no numbers) */
.tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); list-style: none; }
.task { padding-block: 20px 22px; border-top: 1px solid var(--line-strong); }
.task h3 { font-size: var(--fs-body); font-weight: 700; }
.task p { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.7; }
.tasks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .tasks, .tasks--two { grid-template-columns: 1fr; } }

/* fact tables */
.facts { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: var(--fs-body); }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line); }
.facts th { width: 11em; font-size: var(--fs-ui); font-weight: 600; color: var(--label); }
.facts td { font-weight: 500; }
.facts .reg-no { font-weight: 700; color: var(--teal-strong); }
.facts caption { text-align: left; font-size: var(--fs-lg); font-weight: 700; padding-bottom: 14px; }
.facts--items th { width: 12em; color: var(--ink); font-weight: 700; font-size: var(--fs-body); }
.facts--items td { color: var(--ink-2); font-weight: 400; }
@media (max-width: 599px) {
  .facts th, .facts td { display: block; width: auto; padding: 0; border: 0; }
  .facts tr { display: block; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .facts th { margin-bottom: 2px; }
}

.sheet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); }
.sheet__label h2 { font-size: var(--fs-2xl); }
.sheet__label p { margin-top: 12px; color: var(--ink-2); }
@media (max-width: 899px) { .sheet { grid-template-columns: 1fr; } }
.sheet + .sheet { margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line); }
.prose p { max-width: 40em; }
.prose p + p { margin-top: 14px; }

.checklist { list-style: none; border-top: 1px solid var(--line-strong); }
.checklist li { padding: 12px 0 12px 22px; position: relative; border-bottom: 1px solid var(--line); }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 1.25em; width: 8px; height: 8px; border-radius: 2px; background: var(--aqua); }
.checklist__sub { display: block; font-size: var(--fs-sm); color: var(--label); }
.split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.split--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split h3 { font-size: var(--fs-lg); margin-bottom: 12px; }
@media (max-width: 899px) { .split, .split--two { grid-template-columns: 1fr; } }

/* instrument categories */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px clamp(20px, 2.5vw, 32px); list-style: none; }
.cat { padding-top: 18px; border-top: 2px solid var(--ink); }
.cat h3 { font-size: var(--fs-lg); }
.cat dl { margin-top: 10px; }
.cat dt { font-size: var(--fs-sm); font-weight: 600; color: var(--label); margin-top: 10px; }
.cat dd { font-size: var(--fs-ui); color: var(--ink-2); line-height: 1.65; }
@media (max-width: 899px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 479px) { .cats { grid-template-columns: 1fr; } }
.note { margin-top: 24px; color: var(--ink-2); }
.sub-head { margin: 32px 0 12px; }
.map-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* FAQ */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translateY(-3px) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover { color: var(--teal-strong); }
.faq__a { padding-bottom: 20px; max-width: 44em; color: var(--ink-2); }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.contact-item { padding: 20px 24px 20px 0; display: flex; flex-direction: column; gap: 6px; }
.contact-item + .contact-item { padding-left: 24px; border-left: 1px solid var(--line); }
.contact-item dt { font-size: var(--fs-sm); font-weight: 600; color: var(--label); }
.contact-item dd { font-size: var(--fs-lg); font-weight: 700; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.contact-item dd a { color: var(--ink); text-decoration: none; }
.contact-item dd a:hover { color: var(--teal-strong); text-decoration: underline; }
.contact-item dd.contact-item__text { font-size: var(--fs-body); font-weight: 600; display: block; }
.contact-item__sub { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--label); margin-top: 2px; }
.contact-item dd .contact-item__link { display: block; width: fit-content; margin-top: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--teal); text-decoration: underline; }
.contact-item .map-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .contact-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 599px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-item, .contact-item + .contact-item { padding: 16px 0; border-left: 0; }
  .contact-item + .contact-item { border-top: 1px solid var(--line); }
}

/* page header for inner pages */
.page-head { padding-block: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--fs-hero); line-height: 1.22; letter-spacing: -0.025em; }
.page-head__lead { margin-top: 16px; max-width: 40em; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-bottom: 14px; font-size: var(--fs-sm); color: var(--label); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; }
.breadcrumb a { color: var(--label); }
.breadcrumb a:hover { color: var(--teal-strong); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 44px 36px; font-size: var(--fs-sm); color: var(--ink-2); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 28px clamp(24px, 4vw, 56px); }
.site-footer__brand img { width: 160px; height: 33px; }
.legal { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }
.legal dt { color: var(--label); font-weight: 600; }
.legal dd { color: var(--ink); }
.legal a { color: var(--ink); text-decoration: none; }
.legal a:hover { color: var(--teal-strong); text-decoration: underline; }
.footer-nav ul { list-style: none; display: grid; gap: 4px; }
.footer-nav a { color: var(--ink); font-weight: 600; text-decoration: none; display: inline-block; padding-block: 4px; }
.footer-nav a:hover { color: var(--teal-strong); text-decoration: underline; }
.site-footer__copy { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--label); }
@media (max-width: 899px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .legal { gap: 4px 14px; }
}

.notfound__links { display: flex; flex-wrap: wrap; gap: 10px; }

@media print {
  .site-header, .menu-toggle, .hero__actions, .station-hint { display: none !important; }
  .station { min-width: 0; }
}