/* ============================================================
   HANBOO SOLUTION — corporate site
   Type: Archivo (display, variable width) · IBM Plex Sans (body)
         IBM Plex Mono (spec data / labels)
   ============================================================ */

@font-face { font-family:'Archivo'; font-style:normal; font-weight:100 900;
  font-stretch:62% 125%; font-display:swap; src:url('../fonts/archivo-1.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/plexsans-1.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/plexsans-2.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/plexsans-3.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/plexmono-1.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/plexmono-2.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/plexmono-3.woff2') format('woff2'); }
/* Archivo's stylised reversed-3 ampersand reads as a glitch in headings —
   serve U+0026 alone from Plex Sans SemiBold ahead of Archivo in the display stack */
@font-face { font-family:'Display Ampersand'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/plexsans-3.woff2') format('woff2'); unicode-range:U+26; }

:root{
  --ink:#16191D; --ink-2:#1F252B; --ink-3:#2B333B;
  --paper:#F3F4F2; --card:#FFFFFF;
  --line:#DFE2E2; --line-dark:#3A434C;
  --txt:#22272C; --muted:#5D6770;
  --inv:#F2F4F5; --inv-muted:#9AA4AD;
  --green:#6CB329; --green-deep:#3F7A14;
  --blue:#0066A5; --blue-deep:#004E7E;
  --ember:#E4572E;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --disp:'Display Ampersand','Archivo',var(--sans);
  --wrap:1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--txt);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:2px; }

h1,h2,h3,h4{ font-family:var(--disp); color:var(--ink); margin:0; }
.display{ font-stretch:118%; font-weight:740; letter-spacing:-0.015em; line-height:1.04; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.mono{ font-family:var(--mono); }

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.top::after{ /* CI echo: green|blue hairline */
  content:''; display:block; height:2px;
  background:linear-gradient(90deg,var(--green) 0 50%,var(--blue) 50% 100%);
}
.top-in{ display:flex; align-items:center; gap:16px; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand img{ height:34px; width:auto; }
.brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name b{
  font-family:var(--disp); font-stretch:112%; font-weight:760; font-size:15px;
  letter-spacing:.02em; color:var(--ink);
}
.brand-name span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:var(--muted); margin-top:2px; }
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  font-size:13px; font-weight:500; color:var(--ink-2);
  padding:8px 7px; border-radius:3px; white-space:nowrap;
}
.nav a:hover{ background:var(--paper); text-decoration:none; }
.nav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--green); border-radius:3px 3px 0 0; }
.nav .cta{
  margin-left:8px; background:var(--ink); color:#fff; padding:8px 14px;
  border-radius:3px; font-weight:600;
}
.nav .cta:hover{ background:var(--ink-3); }
.burger{ display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:4px; padding:9px 11px; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.12em; }
.nav .lang-switch{
  margin-left:8px; font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; border:1px solid var(--line); border-radius:3px;
  padding:7px 9px; color:var(--ink-2); white-space:nowrap;
}
.nav .lang-switch:hover{ border-color:var(--ink); background:var(--paper); text-decoration:none; }

/* ---------- Korean pages ---------- */
html[lang="ko"]{
  --sans:'IBM Plex Sans','Pretendard','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}
html[lang="ko"] body{ word-break:keep-all; }
html[lang="ko"] .display{ letter-spacing:-0.005em; }
html[lang="ko"] .eyebrow,html[lang="ko"] .ph-tag{ letter-spacing:.08em; }
html[lang="ko"] .hero-word{ letter-spacing:.01em; }
html[lang="ko"] .claim-item,html[lang="ko"] .caption,html[lang="ko"] .sec-aside{ letter-spacing:.06em; }

/* ---------- hero rolling banner ---------- */
.hero-roll{ position:relative; min-height:82vh; background:var(--ink); overflow:hidden; touch-action:pan-y; }
.hero-slide{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding:64px 0 96px; background-size:cover; background-position:center;
  opacity:0; transition:opacity .9s ease; z-index:0; pointer-events:none;
}
.hero-slide.is-on{ opacity:1; z-index:1; pointer-events:auto; }
/* slide 1 loads immediately (preloaded from <head>); slides 2+ get their image once JS adds .bg-ready after load */
.hs-nvh{ background-image:linear-gradient(to top,rgba(12,13,15,.92) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.26) 78%),url('../img/_v/hero-nvh-1920.webp'); }
.hs-nvh{ background-image:linear-gradient(to top,rgba(12,13,15,.92) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.26) 78%),-webkit-image-set(url('../img/_v/hero-nvh-1920.webp') 1x,url('../img/_v/hero-nvh-2560.webp') 2x); }
.hs-nvh{ background-image:linear-gradient(to top,rgba(12,13,15,.92) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.26) 78%),image-set(url('../img/_v/hero-nvh-1920.webp') 1x,url('../img/_v/hero-nvh-2560.webp') 2x); }
.bg-ready .hs-mfg{ background-image:linear-gradient(to top,rgba(12,13,15,.9) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.3) 78%),url('../img/_v/hero-drone-1920.webp'); }
.bg-ready .hs-mfg{ background-image:linear-gradient(to top,rgba(12,13,15,.9) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.3) 78%),-webkit-image-set(url('../img/_v/hero-drone-1920.webp') 1x,url('../img/_v/hero-drone-2560.webp') 2x); }
.bg-ready .hs-mfg{ background-image:linear-gradient(to top,rgba(12,13,15,.9) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.3) 78%),image-set(url('../img/_v/hero-drone-1920.webp') 1x,url('../img/_v/hero-drone-2560.webp') 2x); }
.bg-ready .hs-oxi{ background-image:linear-gradient(to top,rgba(12,13,15,.94) 0%,rgba(12,13,15,.5) 46%,rgba(12,13,15,.2) 78%),url('../img/_v/hero-heat-1920.webp'); }
.bg-ready .hs-oxi{ background-image:linear-gradient(to top,rgba(12,13,15,.94) 0%,rgba(12,13,15,.5) 46%,rgba(12,13,15,.2) 78%),-webkit-image-set(url('../img/_v/hero-heat-1920.webp') 1x,url('../img/_v/hero-heat-2560.webp') 2x); }
.bg-ready .hs-oxi{ background-image:linear-gradient(to top,rgba(12,13,15,.94) 0%,rgba(12,13,15,.5) 46%,rgba(12,13,15,.2) 78%),image-set(url('../img/_v/hero-heat-1920.webp') 1x,url('../img/_v/hero-heat-2560.webp') 2x); }
.hero-copy{ position:relative; max-width:640px; }
.hero-word{
  margin:0 0 .16em; font-family:var(--disp); font-stretch:125%; font-weight:800;
  font-size:clamp(54px,7.2vw,108px); line-height:.95; letter-spacing:-.01em;
  color:#F5F2EE;
}
.hero-word-m{ font-size:clamp(32px,4.8vw,72px); }
html[lang="ko"] .hero-word-m{ letter-spacing:-.01em; }
.hero-copy{ text-shadow:0 1px 3px rgba(0,0,0,.55); }
.hs-mfg{ background-position:center 35%; }
.hero-slide .eyebrow{ color:#8FC7EA; }
.hs-mfg .eyebrow{ color:#9BD46A; }
.hs-oxi .eyebrow{ color:#F0A08A; }
.hs-app .eyebrow{ color:#CFD4D9; }
.hero-sub{ margin:14px 0 20px; font-size:15.5px; max-width:52ch; color:#C9CDD1; }
.hero-link{
  font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; display:inline-flex; gap:10px; align-items:center;
  color:#fff;
}
.hero-link::after{ content:'→'; transition:translate .25s; }
.hero-slide:hover .hero-link::after{ translate:5px 0; }
.hero-ctl{
  position:absolute; z-index:5; left:0; right:0; bottom:22px;
  display:flex; justify-content:center; align-items:center; gap:12px; pointer-events:none;
}
.hero-ctl > *{ pointer-events:auto; }
.hero-dots{ display:flex; gap:10px; margin:0 6px; }
.hero-btn{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.38); border-radius:50%;
  background:rgba(12,13,15,.38); color:#fff; cursor:pointer; font-size:15px; line-height:1;
  display:grid; place-items:center; backdrop-filter:blur(4px); transition:background .25s;
}
.hero-btn:hover{ background:rgba(255,255,255,.22); }
.hero-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.hero-pause{ font-size:11px; letter-spacing:-.05em; }
.hero-dot{
  width:36px; height:4px; border:0; padding:10px 0; box-sizing:content-box; background-clip:content-box; cursor:pointer;
  background-color:rgba(255,255,255,.45); transition:background-color .3s;
}
.hero-dot:hover{ background-color:rgba(255,255,255,.6); }
.hero-dot[aria-current="true"]{ background-color:#fff; }
.hero-dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* claim bar under hero */
.claim{ background:var(--ink); color:var(--inv); border-top:1px solid var(--line-dark); }
.claim-in{ display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; padding-block:18px; }
.claim-lead{ font-family:var(--disp); font-stretch:110%; font-weight:640; font-size:16.5px; color:#fff; margin-right:auto; }
.claim-item{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--inv-muted); text-transform:uppercase; white-space:nowrap; }
.claim-item b{ color:#fff; font-weight:600; }
.claim-item .g{ color:var(--green); } .claim-item .b{ color:#5FB2E8; }

/* ---------- sections ---------- */
.sec{ padding-block:92px; }
.sec-tight{ padding-block:64px; }
.sec-dark{ background:var(--ink); color:var(--inv); }
.sec-dark h2,.sec-dark h3{ color:#fff; }
.sec-felt{
  background:
    linear-gradient(rgba(17,20,23,.94),rgba(17,20,23,.94)),
    url('../img/_v/texture-bg-1280.webp') center/cover;
  color:var(--inv);
}
.sec-felt h2,.sec-felt h3{ color:#fff; }

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:48px;
}
.sec-dark .sec-head,.sec-felt .sec-head{ border-color:var(--line-dark); }
.sec-head h2{ font-size:clamp(26px,3.2vw,38px); margin-top:10px; }
.sec-aside{ font-family:var(--mono); font-size:12px; line-height:2; color:var(--muted); text-align:right; white-space:nowrap; }
.sec-dark .sec-aside,.sec-felt .sec-aside{ color:var(--inv-muted); }
.sec-aside b{ color:var(--ink); font-weight:600; }
.sec-dark .sec-aside b,.sec-felt .sec-aside b{ color:#fff; }
.sec-aside .tick-g{ color:var(--green-deep); }
.sec-dark .sec-aside .tick-g,.sec-felt .sec-aside .tick-g{ color:var(--green); } .sec-aside .tick-b{ color:#5FB2E8; } .sec-aside .tick-e{ color:var(--ember); }
.lede{ font-size:17.5px; max-width:68ch; color:var(--txt); }
.sec-dark .lede,.sec-felt .lede{ color:#C6CCD1; }
p{ margin:0 0 1em; } p:last-child{ margin-bottom:0; }
.muted{ color:var(--muted); }

/* ---------- buttons ---------- */
.btn{ display:inline-block; font-weight:600; font-size:14px; padding:12px 22px;
  border-radius:3px; border:1px solid transparent; }
.btn:hover{ text-decoration:none; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-3); }
.btn-line{ border-color:var(--ink); color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:#fff; }
.btn-inv{ background:#fff; color:var(--ink); }
.btn-inv:hover{ background:var(--paper); }
.btn-ghost-inv{ border-color:var(--line-dark); color:#fff; }
.btn-ghost-inv:hover{ border-color:#fff; }

/* ---------- cards & grids ---------- */
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.gauto{ grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); }

.pcard{
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:translate .25s,box-shadow .25s,border-color .25s;
}
.pcard:hover{ translate:0 -3px; box-shadow:0 14px 30px rgba(22,25,29,.08); border-color:#C4C9CC; }
.pcard-media{ position:relative; aspect-ratio:4/3; background:var(--paper); overflow:hidden; }
.pcard-media img{ width:100%; height:100%; object-fit:cover; }
.pcard-media.contain img{ object-fit:contain; padding:14px; background:#fff; }
.pcard-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pcard-body h3{ font-size:16.5px; font-weight:640; font-stretch:106%; }
.pcard-spec{ font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
.pcard-note{ font-size:13.5px; color:var(--muted); }
.pcard .programs{ margin-top:auto; padding-top:10px; border-top:1px dashed var(--line);
  font-size:12.5px; color:var(--muted); }
.pcard .programs b{ color:var(--txt); font-weight:600; }

/* dark cards */
.dcard{ background:var(--ink-2); border:1px solid var(--line-dark); border-radius:4px; padding:24px; }
.dcard h3{ font-size:17px; }
.dcard .pcard-spec{ color:var(--inv-muted); }

/* photography-pending placeholder */
.ph{
  position:relative; width:100%; height:100%; min-height:100%;
  background:linear-gradient(rgba(238,239,238,.82),rgba(238,239,238,.82)),url('../img/texture-felt.jpg') center/cover;
  display:grid; place-items:center; text-align:center; padding:18px;
}
.ph-dark{ background:linear-gradient(rgba(22,25,29,.82),rgba(22,25,29,.82)),url('../img/texture-felt.jpg') center/cover; }
.ph-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted);
  border:1px dashed #B8BEC2; padding:5px 10px; border-radius:2px; background:rgba(255,255,255,.55);
  text-transform:uppercase;
}
.ph-dark .ph-tag{ color:var(--inv-muted); border-color:#4A545E; background:rgba(22,25,29,.5); }

.badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(22,25,29,.82); color:#fff; padding:4px 9px; border-radius:2px;
}
.badge.low{ background:rgba(228,87,46,.92); }

/* ---------- spec tables ---------- */
.spectable{ width:100%; border-collapse:collapse; font-size:14px; background:var(--card);
  border:1px solid var(--line); }
.spectable caption{ text-align:left; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0 0 10px; }
.spectable th{ text-align:left; font-weight:600; font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); background:var(--paper);
  padding:10px 14px; border-bottom:1px solid var(--line); }
.spectable td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.spectable tr:last-child td{ border-bottom:none; }
.spectable .num{ font-family:var(--mono); font-size:13px; white-space:nowrap; }
.spectable-dark{ background:var(--ink-2); border-color:var(--line-dark); color:var(--inv); }
.spectable-dark th{ background:var(--ink); color:var(--inv-muted); border-color:var(--line-dark); }
.spectable-dark td{ border-color:var(--line-dark); }
/* Wrapper for wide data tables (was an inline style="overflow-x:auto").
   A patent number or a 4-column plant list cannot always fit a 320-375px screen. Mobile
   browsers draw overlay scrollbars, so a cut-off column just looked broken. These edge
   shadows are painted on the wrapper: the "local" gradients scroll with the table and mask
   the fixed "scroll" shadows, so a shadow shows on exactly the side that still has content
   and disappears once the table fits. The table itself must be transparent for them to show. */
.tablewrap{
  --tw-bg:var(--card); --tw-shadow:rgba(0,0,0,.28);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--tw-bg) 40%, rgba(255,255,255,0)) left center/22px 100% no-repeat local,
    linear-gradient(to left,  var(--tw-bg) 40%, rgba(255,255,255,0)) right center/22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--tw-shadow), rgba(255,255,255,0)) left center/11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--tw-shadow), rgba(255,255,255,0)) right center/11px 100% no-repeat scroll,
    var(--tw-bg);
}
.tablewrap > .spectable{ background:transparent; }
.tablewrap-dark{ --tw-bg:var(--ink-2); --tw-shadow:rgba(255,255,255,.30); }
/* desktop pointers additionally get a real (thin) scrollbar */
.tablewrap::-webkit-scrollbar{ height:7px; }
.tablewrap::-webkit-scrollbar-track{ background:transparent; }
.tablewrap::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.tablewrap-dark::-webkit-scrollbar-thumb{ background:var(--line-dark); }

.note{ font-size:13px; color:var(--muted); border-left:3px solid var(--line); padding:6px 0 6px 14px; margin-top:18px; }
.sec-dark .note,.sec-felt .note{ color:var(--inv-muted); border-color:var(--line-dark); }
.note b{ color:var(--txt); } .sec-dark .note b,.sec-felt .note b{ color:#fff; }

/* ---------- split feature ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.split-media{ border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.sec-dark .split-media,.sec-felt .split-media{ border-color:var(--line-dark); }
.caption{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); margin-top:8px; }
.figrow .split-media{ aspect-ratio:16/10; }
.figrow .split-media img{ width:100%; height:100%; object-fit:cover; }
.sec-dark .caption,.sec-felt .caption{ color:var(--inv-muted); }

/* ---------- stat rows ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:22px; }
.stat{ border-top:2px solid var(--ink); padding-top:14px; }
.sec-dark .stat,.sec-felt .stat{ border-color:#fff; }
.stat b{ font-family:var(--disp); font-stretch:116%; font-weight:740; font-size:clamp(26px,2.6vw,36px); color:var(--ink); display:block; line-height:1.1; }
.sec-dark .stat b,.sec-felt .stat b{ color:#fff; }
.stat > span{ font-size:13px; color:var(--muted); display:block; margin-top:4px; }
.sec-dark .stat > span,.sec-felt .stat > span{ color:var(--inv-muted); }
.stat .unit{ font-size:.55em; font-weight:600; letter-spacing:.02em; margin-left:2px; }
.stat-g{ border-top-color:var(--green); } .stat-b{ border-top-color:var(--blue); } .stat-e{ border-top-color:var(--ember); }

/* ---------- process chain ---------- */
.chain{ display:flex; flex-wrap:wrap; gap:10px; counter-reset:step; }
.chain li{
  list-style:none; counter-increment:step; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:12px 16px 12px 44px; font-size:13.5px; font-weight:500;
}
.chain li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:14px; top:50%; translate:0 -50%;
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
}
.chain-dark li{ background:var(--ink-2); border-color:var(--line-dark); color:var(--inv); }
.chain-dark li::before{ color:var(--inv-muted); }
ul.chain{ padding:0; margin:0; }

/* ---------- timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:''; position:absolute; left:86px; top:6px; bottom:6px; width:1px; background:var(--line); }
.timeline li{ position:relative; display:grid; grid-template-columns:70px 1fr; gap:34px; padding:14px 0; }
.timeline li::after{ content:''; position:absolute; left:83px; top:24px; width:7px; height:7px;
  border-radius:50%; background:var(--paper); border:2px solid var(--blue); }
.timeline li.mark-g::after{ border-color:var(--green); }
.tl-year{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); text-align:right; padding-top:1px; }
.tl-body b{ font-weight:600; display:block; }
.tl-body span{ font-size:13.5px; color:var(--muted); }

/* ---------- oem strip ---------- */
.oems{ display:flex; flex-wrap:wrap; gap:10px; }
.oems li{ list-style:none; font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  border:1px solid var(--line-dark); color:var(--inv); border-radius:3px; padding:10px 18px; }
ul.oems{ padding:0; margin:0; }

/* ---------- entity table / sites ---------- */
.sitegrid{ display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }
.kmap{ position:relative; }
.kmap img{ width:100%; }
.kdot{ position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--green); border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.3); }
.kdot.b{ background:var(--blue); }
.klabel{ position:absolute; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  background:var(--ink); color:#fff; padding:3px 8px; border-radius:2px; white-space:nowrap; }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:var(--inv); margin-top:0; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; padding-block:64px 46px; }
.foot-logo{ display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.foot-logo img{ height:30px; background:#fff; padding:4px 7px; border-radius:3px; }
.foot-logo b{ font-family:var(--disp); font-stretch:112%; font-weight:740; font-size:17px;
  letter-spacing:.02em; color:#fff; }
.foot-logo b span{ font-weight:500; font-stretch:100%; font-size:12px; color:var(--inv-muted); margin-left:6px; }
.foot-brand p{ font-size:13.5px; color:var(--inv-muted); max-width:34ch; }
footer h4,footer .foot-h{ color:#fff; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--mono); font-weight:600; margin-bottom:16px; }
.foot-list{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:14px; }
.foot-list a{ color:var(--inv-muted); }
.foot-list a:hover{ color:#fff; }
.foot-list .mono{ font-size:12.5px; color:var(--inv-muted); }
.foot-bottom{ border-top:1px solid var(--line-dark); padding-block:20px;
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-size:12px; color:var(--inv-muted); }
.foot-bottom .mono{ font-size:11px; letter-spacing:.1em; }

/* ---------- subpage head ---------- */
.page-head{
  background:linear-gradient(rgba(17,20,23,.93),rgba(17,20,23,.9)),url('../img/_v/texture-bg-1280.webp') center/cover;
  color:var(--inv); padding-block:76px 60px; border-bottom:2px solid;
  border-image:linear-gradient(90deg,var(--green) 0 50%,var(--blue) 50% 100%) 1;
}
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--inv-muted); margin-bottom:22px; }
.crumb a{ color:var(--inv-muted); } .crumb a:hover{ color:#fff; }
.page-head h1{ color:#fff; font-size:clamp(34px,4.6vw,56px); }
.page-head .lede{ color:#C6CCD1; max-width:60ch; }
.page-head .grid-h{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.page-head .lede{ margin-top:18px; }
.readout{ font-family:var(--mono); font-size:12px; line-height:2.05; color:var(--inv-muted);
  text-align:right; white-space:nowrap; }
.readout b{ color:#fff; font-weight:600; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }

/* ---------- reveal (only hides when JS is live) ---------- */
html.js .rv{ opacity:0; translate:0 20px; transition:opacity .6s ease,translate .6s ease; }
html.js .rv.in{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .rv{ opacity:1; translate:none; transition:none; }
  .hero-slide{ transition:none; }
  .pcard{ transition:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1239px){
  .nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; padding:14px 20px 22px; gap:2px;
    border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(0,0,0,.08); }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 10px; font-size:15px; border-bottom:1px solid var(--paper); }
  .nav .cta{ margin:12px 0 0; text-align:center; }
  .nav .lang-switch{ margin:10px 0 0; text-align:center; }
  .burger{ display:block; }
}
@media (max-width:1120px){
  .g4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .sec{ padding-block:64px; }
  .hero-roll{ min-height:68vh; }
  .hero-slide{ padding:48px 0 84px; }
  .split,.contact-grid,.sitegrid{ grid-template-columns:1fr; gap:36px; }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .sec-aside{ text-align:left; }
  .page-head .grid-h{ flex-direction:column; align-items:flex-start; }
  .readout{ text-align:left; }
  .sec-aside,.readout{ white-space:normal; overflow-wrap:anywhere; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .timeline::before{ left:64px; } .timeline li{ grid-template-columns:48px 1fr; gap:32px; }
  .timeline li::after{ left:61px; }
}
@media (max-width:620px){
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .wrap{ padding-inline:20px; }
  .claim-lead{ font-size:15px; }
}

/* ---------- touch targets on phones & tablets (WCAG 2.5.8 - 24x24 CSS px floor) ----------
   Desktop keeps the designed spacing. Below 900px every standalone link grows its hit area
   into the row gap, so footer nav (was 18px), tel/mail (16px), legal (15px), the breadcrumb
   (14px) and the map links (20px) all clear the floor without the footer ballooning. */
@media (max-width:900px){
  .foot-list{ gap:0; }
  .foot-list > li{ padding-block:8px; }
  .foot-list > li > a{ display:block; margin-block:-8px; padding-block:8px; }
  .foot-legal a{ display:inline-block; padding-block:6px; }
  .crumb a{ display:inline-block; padding-block:6px; }
  .visit-links a{ display:inline-block; padding-block:5px; }
  .cta-line a{ display:inline-block; padding-block:5px; }   /* tel: / mailto: in the CTA band are actions, not prose */
  .spectable td.num > a{ display:inline-block; padding-block:5px; }
}

/* Data tables sit in an overflow-x:auto wrapper, so on a phone the last column was
   cut off at the viewport edge with no visible scroll affordance. Tightening the cell
   padding and type below 620px lets the 4-column plant/line tables fit the 335px
   content width outright. .visit-table keeps its own stacked mobile layout (later rule). */
@media (max-width:620px){
  .spectable{ font-size:13px; }
  .spectable th{ padding:9px 8px; font-size:11.5px; letter-spacing:.03em; }
  .spectable td{ padding:10px 8px; }
  .spectable .num{ font-size:12px; }
}

/* ---------- accessibility helpers ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:9px 14px; border-radius:3px; font-size:13px; font-weight:600; }
.skip:focus{ left:8px; }


/* ---------- process box (Oxi-PAN) ---------- */
.procbox{ background:var(--card); border:1px solid var(--line); border-radius:4px; padding:24px 24px 20px; }
.procbox .eyebrow{ margin-bottom:14px; }
.chain-col{ flex-direction:column; gap:8px; }
.chain-col li{ background:var(--paper); }
.procbox .caption{ margin-top:16px; }

/* ---------- legal pages ---------- */
.legal{ max-width:76ch; }
.legal h2{ font-size:19px; margin:34px 0 10px; }
.legal h2:first-child{ margin-top:0; }
.legal p,.legal li{ font-size:15px; color:var(--txt); }
.legal ul{ padding-left:1.2em; margin:0 0 1em; }
.legal li{ margin-bottom:6px; }
mark.fill{ background:#FFF1A8; color:var(--ink); padding:0 4px; border-radius:2px; font-weight:600; }
.foot-legal a{ color:var(--inv-muted); }
.foot-legal a:hover{ color:#fff; }
picture{ display:contents; }

/* ---------- video embeds ---------- */
.video-embed{ position:relative; background:#0B0C0E; border:1px solid var(--line); border-radius:4px; overflow:hidden; aspect-ratio:16/9; }
.video-embed video{ width:100%; height:100%; display:block; object-fit:cover; background:#000; }
.sec-dark .video-embed,.sec-felt .video-embed{ border-color:var(--line-dark); }
.video-embed + .caption{ margin-top:10px; }

/* ---------- downloads ---------- */
.dl{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.dl > a{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:16px 18px; color:var(--txt); transition:border-color .25s,translate .25s; }
.dl > a:hover{ border-color:var(--ink); text-decoration:none; translate:0 -2px; }
.dl .ico{ width:38px; height:46px; border:1.5px solid var(--ink); border-radius:3px; display:grid; place-items:end center; padding-bottom:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--ink); background:var(--paper); }
.dl .t b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.dl .m{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); margin-top:4px; }

/* ---------- mobile sticky CTA + back to top ---------- */
.mcta{ position:fixed; right:14px; bottom:14px; z-index:60; display:flex; gap:8px; align-items:center; opacity:0; translate:0 12px; pointer-events:none; transition:opacity .3s,translate .3s; }
.mcta.show{ opacity:1; translate:0 0; pointer-events:auto; }
.mcta .btn{ font-size:13px; padding:11px 16px; box-shadow:0 10px 26px rgba(0,0,0,.28); }
.totop{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-dark); background:var(--ink); color:#fff; cursor:pointer; font-size:16px; line-height:1; box-shadow:0 10px 26px rgba(0,0,0,.28); }
.totop:hover{ background:var(--ink-3); }
.totop:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (min-width:900px){ .mcta .btn{ display:none; } }
body[data-page="contact"] .mcta .btn{ display:none; }
@media (prefers-reduced-motion:reduce){ .mcta{ transition:none; } }

html[lang="ko"] .visit-links{ text-transform:none; letter-spacing:.02em; }


/* ===== phase1:home ===== */
/* ============================================================
   HANBOO SOLUTION — home page storyboard (phase 1 · blocks 2–8)
   New class names only. Reuses .sec/.sec-head/.stat/.btn
   from styles.css. Merge target: append after the "oem strip"
   block in site/assets/css/styles.css (or keep as assets/css/home.css).
   ============================================================ */

/* home-only section heads sit a little tighter than the subpages */
.biz .sec-head,.why .sec-head,.mx .sec-head{ margin-bottom:36px; }

/* ---------- 02 · trust bar (directly under the hero) ---------- */
.trust{ background:var(--ink); color:var(--inv); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.trust-in{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; padding-block:16px 18px; }
.trust-lead{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin:0; white-space:nowrap;
}
.trust-lead b{ color:var(--green); font-weight:600; }
.trust-oems{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.trust-oems li{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--inv);
  border:1px solid var(--line-dark); border-radius:3px; padding:7px 13px; white-space:nowrap;
}
.trust-facts{ display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:0 0 0 auto; padding:0; }
.trust-facts li{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--inv-muted); white-space:nowrap;
}
.trust-facts b{ color:#fff; font-weight:600; }
.trust-facts .g{ color:var(--green); } .trust-facts .b{ color:#5FB2E8; }
html[lang="ko"] .trust-lead,html[lang="ko"] .trust-facts li{ letter-spacing:.06em; }

/* ---------- 03 · two businesses ---------- */
.biz-card{
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:26px 28px 28px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; gap:14px 36px; align-items:start; align-content:start;
}
.biz-card h3{ grid-column:1 / -1; font-size:clamp(20px,1.9vw,24px); font-weight:700; font-stretch:112%; letter-spacing:-.01em; }
.biz-card .stat{ min-width:200px; }
.biz-card .stat b{ font-size:clamp(42px,4.2vw,58px); }
.biz-copy{ display:flex; flex-direction:column; gap:12px; align-self:stretch; }
.biz-line{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; line-height:1.85; color:var(--muted); text-transform:uppercase; margin:0; }
.biz-line b{ color:var(--ink); font-weight:600; }
.biz-oxi .biz-line b{ color:#B8421C; }   /* 5.3:1 on white — ember itself is 3.7:1 */
.biz-copy .btn{ align-self:flex-start; margin-top:auto; }
html[lang="ko"] .biz-line{ letter-spacing:.02em; }

/* ---------- 05 · why HANBOO (dark band · plant film) ---------- */
.why-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start; }
.why-fig{ margin:0; }
.why-media{
  position:relative; aspect-ratio:16/9; background:var(--ink-2);
  border:1px solid var(--line-dark); border-radius:4px; overflow:hidden;
}
.why-media::after{ /* CI hairline, same as the header */
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--green) 0 50%,var(--blue) 50% 100%);
}
.why-video{ display:block; width:100%; height:100%; object-fit:cover; background:var(--ink-2); }
.why-media.is-off .why-video{ display:none; }
.why-media.is-off::before{ /* file missing → quiet title card from data-fallback */
  content:attr(data-fallback); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--inv-muted);
}
.why-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.why-cap a{ color:#fff; font-weight:600; white-space:nowrap; }
.why-list{ list-style:none; margin:0; padding:0; }
.why-list li{
  border-top:1px solid var(--line-dark); padding:16px 0 18px;
  display:grid; grid-template-columns:40px 1fr; gap:5px 16px; align-items:start;
}
.why-list li:first-child{ border-top:0; padding-top:0; }
.why-list li:last-child{ padding-bottom:0; }
.why-k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--inv-muted); padding-top:5px; }
.why-list h3{ font-size:17.5px; font-weight:640; font-stretch:106%; color:#fff; }
.why-list p{ grid-column:2; font-size:14px; line-height:1.6; color:#C6CCD1; margin:0; }
.why-list a{
  grid-column:2; justify-self:start; font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#8FC7EA; margin-top:3px;
}
html[lang="ko"] .why-list a{ letter-spacing:.04em; }

/* ---------- 06 · materials + applications chips ---------- */
.mx{ background:var(--card); border-block:1px solid var(--line); }
.mx-row{
  display:grid; grid-template-columns:200px 1fr; gap:12px 32px; align-items:start;
  padding-block:22px; border-top:1px solid var(--line);
}
.mx-row:first-child{ border-top:0; padding-top:0; }
.mx-row:last-child{ padding-bottom:0; }
.mx-row > .eyebrow{ padding-top:10px; margin:0; }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips a,
.chips > li > span{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:8px 14px;
  white-space:nowrap; transition:border-color .2s,background .2s;
}
.chips a:hover{ text-decoration:none; border-color:var(--ink); background:#fff; }
.chips .n{ font-size:10.5px; letter-spacing:.08em; color:var(--muted); }
.chips a:hover .n{ color:var(--blue); }
.mx-env{ grid-column:2; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); margin:0; }
.mx-all{
  grid-column:2; justify-self:start; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
}
html[lang="ko"] .chips a,
html[lang="ko"] .chips > li > span{ letter-spacing:0; }

/* ---------- 07 · sustainability · quality ---------- */
.sq{ background:var(--card); border-top:1px solid var(--line); }
.sq-h2{ font-size:clamp(26px,3.2vw,38px); margin-top:10px; }
.sq-stats{ grid-template-columns:1fr 1fr; margin-top:28px; }
.stat-txt b{ font-size:clamp(22px,2.1vw,28px); padding-top:.25em; }
.sq-btns{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; }
.sq-fig{ margin:0; }
.sq-media img{ max-height:380px; }

/* ---------- 08 · CTA + mini RFQ (dark felt band) ---------- */
.cta.sec{ padding-block:76px; }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.cta-eye{ color:var(--inv-muted); }
.cta-h2{ font-size:clamp(28px,3.6vw,42px); margin-top:12px; }
.cta-grid .lede{ margin-top:18px; }
.cta-line{ margin-top:22px; font-family:var(--mono); font-size:12.5px; line-height:1.9; letter-spacing:.04em; color:var(--inv-muted); }
.cta-line a{ color:#fff; }
.cta-go{ display:flex; justify-content:flex-end; padding-top:34px; }

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .why-grid{ gap:36px; }
}
@media (max-width:900px){
  .biz.sec,.mx.sec,.sq.sec{ padding-block:44px; }
  .why.sec,.cta.sec{ padding-block:48px; }
  .biz .g2{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; gap:26px; }
  .cta-grid{ grid-template-columns:1fr; gap:24px; }
  .cta-go{ justify-content:flex-start; padding-top:0; }
  .mx-row{ grid-template-columns:1fr; gap:12px; padding-block:14px; }
  .mx-row > .eyebrow{ padding-top:0; }
  .mx-env,.mx-all{ grid-column:1; }
  .trust-in{ gap:10px 16px; padding-block:14px 16px; }
  .trust-facts{ margin-left:0; }
  .sq .split{ gap:22px; }
}
@media (max-width:620px){
  /* the mono readouts in these three heads repeat figures the block body already carries — drop them on phones */
  .biz .sec-aside,.why .sec-aside,.mx .sec-aside{ display:none; }
  .biz .sec-head,.why .sec-head,.mx .sec-head{ margin-bottom:22px; padding-bottom:12px; }
  .why .sec-head h2{ font-size:24px; }
  .trust-lead{ white-space:normal; }
  .trust-oems li{ padding:5px 10px; font-size:11.5px; }
  /* business card on phones: figure beside the mono line, button across the card */
  .biz-card{ grid-template-columns:42% 1fr; gap:12px 16px; padding:20px 18px 22px; align-items:center; }
  .biz-card .stat{ min-width:0; }
  .biz-card .stat b{ font-size:38px; }
  .biz-copy{ display:contents; }
  .biz-line{ font-size:11.5px; line-height:1.75; }
  .biz-copy .btn{ grid-column:1 / -1; justify-self:start; margin-top:2px; }
  .why-cap a{ display:none; }                   /* same link sits in proof point 02 */
  .why-list li{ grid-template-columns:32px 1fr; padding:10px 0 12px; }
  .why-list p{ font-size:13.5px; }
  .chips a,
  .chips > li > span{ padding:6px 9px; font-size:11px; gap:8px; }
  .sq-stats{ gap:16px 14px; }
  .stat-txt b{ font-size:19px; }
  .sq-media img{ max-height:180px; }
  .cta-grid .lede{ font-size:15.5px; }
}


/* ===== phase1:vehicle ===== */
/* ============================================================
   Vehicle zone map (Automotive page) — all selectors prefixed .vz-
   Merge into site/assets/css/styles.css (append) or link separately.
   Depends on the site tokens: --ink --paper --card --line --txt --muted --blue --mono
   ============================================================ */

/* ---------- layout ---------- */
.vz{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:36px 44px; align-items:start; }
.vz-stage{
  position:sticky; top:84px;
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:10px 10px 12px;
}
.vz-svg{ display:block; width:100%; height:auto; aspect-ratio:1000/560; overflow:hidden; }
.vz-caption{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:6px 4px 0;
}
.vz-readout{
  display:none; align-items:flex-start; gap:12px;
  margin:12px 0 0; padding:12px 14px 13px;
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  font-size:13px; line-height:1.5; color:var(--muted); min-height:62px;
}
.vz-js .vz-readout{ display:flex; }
.vz-ro-num{
  flex:0 0 auto; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  color:var(--blue); padding-top:2px; min-width:2.2em;
}
.vz-ro-body{ flex:1 1 auto; min-width:0; }
.vz-ro-name{ font-weight:600; color:var(--ink); }
.vz-ro-loc{ color:var(--muted); }
.vz-ro-loc::before{ content:'— '; }
.vz-ro-spec{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); margin-top:2px; }
.vz-ro-prog{ display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
.vz-ro-prog b{ color:var(--txt); font-weight:600; }
.vz-readout.is-hint{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; align-items:center; }
html[lang="ko"] .vz-readout.is-hint{ text-transform:none; letter-spacing:.02em; }

/* ---------- legend ---------- */
.vz-legend{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.vz-item{
  display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start;
  padding:10px 12px 11px 10px; border-bottom:1px solid var(--line);
  transition:background .2s, box-shadow .2s;
}
.vz-js .vz-item{ cursor:pointer; }
.vz-item.is-active{ background:var(--card); box-shadow:inset 3px 0 0 var(--blue); }
.vz-item:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.vz-num{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--blue);
  color:var(--blue); background:var(--card);
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  display:grid; place-items:center; margin-top:1px;
  transition:background .2s, color .2s;
}
.vz-item.is-active .vz-num{ background:var(--blue); color:#fff; }
.vz-item-body{ min-width:0; }
.vz-name{ font-weight:600; font-size:14px; color:var(--ink); line-height:1.3; }
.vz-loc{ font-size:12.5px; color:var(--muted); }
.vz-loc::before{ content:'— '; }
.vz-spec{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.vz-prog{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.5; }
.vz-prog b{ color:var(--txt); font-weight:600; }
@media (hover:hover){
  .vz-js .vz-item:hover{ background:var(--card); }
}

/* ---------- car line art ---------- */
.vz-body{ fill:#E9EBE8; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; }
.vz-glass{ fill:var(--blue); fill-opacity:.07; }
.vz-line{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-opacity:.55; stroke-linejoin:round; stroke-linecap:round; }
.vz-line-soft{ stroke-width:1.25; stroke-opacity:.38; }
.vz-fill{ fill:var(--line); stroke:var(--ink); stroke-width:1.25; stroke-opacity:.6; stroke-linejoin:round; }
.vz-lamp{ fill:var(--card); }
.vz-tire{ fill:#E9EBE8; stroke:var(--ink); stroke-width:2; }
.vz-rim{ fill:var(--card); stroke:var(--ink); stroke-width:1.5; }
.vz-spoke{ fill:none; stroke:var(--ink); stroke-width:1; stroke-opacity:.45; }
.vz-hub{ fill:var(--ink); fill-opacity:.65; }
.vz-ground{ stroke:var(--line); stroke-width:2; }
/* ---------- zones ---------- */
.vz-zone path{
  fill:none; stroke:var(--blue); stroke-width:9; stroke-opacity:.22;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke-opacity .2s;
}
.vz-zone .vz-zone-wide{ stroke-width:11; }
.vz-zone .vz-zone-thin{ stroke-width:8; }
.vz-zone rect{
  fill:var(--blue); fill-opacity:.1; stroke:var(--blue); stroke-width:1.5; stroke-opacity:.55;
  stroke-dasharray:4 3; transition:fill-opacity .2s, stroke-opacity .2s;
}
.vz-zone.is-active path{ stroke-opacity:.6; }
.vz-zone.is-active rect{ fill-opacity:.35; stroke-opacity:1; }
.vz-leader{ stroke:var(--ink); stroke-width:1; stroke-opacity:.45; }

/* ---------- markers ---------- */
.vz-marker{ cursor:pointer; outline:none; }
.vz-halo{ fill:transparent; stroke:var(--blue); stroke-width:2; stroke-opacity:0; transition:stroke-opacity .2s; }
.vz-dot{ fill:var(--card); stroke:var(--blue); stroke-width:1.5; transition:fill .2s; }
.vz-marker text{
  font-family:var(--mono); font-size:11px; font-weight:600; fill:var(--blue);
  text-anchor:middle; dominant-baseline:central; pointer-events:none; user-select:none;
  transition:fill .2s;
}
.vz-marker.is-active .vz-dot{ fill:var(--blue); }
.vz-marker.is-active text{ fill:#fff; }
.vz-marker.is-active .vz-halo,.vz-marker:focus-visible .vz-halo{ stroke-opacity:.45; }
.vz-marker:focus-visible .vz-dot{ stroke-width:2.5; }
.vz-marker:focus-visible .vz-halo{ stroke:var(--ink); stroke-opacity:1; stroke-width:2.5; }
@media (hover:hover){
  .vz-marker:hover .vz-dot{ fill:var(--blue); }
  .vz-marker:hover text{ fill:#fff; }
}

/* ---------- floating label ---------- */
.vz-tip{ pointer-events:none; }
.vz-tip[hidden]{ display:none; }
.vz-tip rect,.vz-tip path{ fill:var(--ink); }
.vz-tip text{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  fill:#fff; text-anchor:middle; dominant-baseline:central;
}
html[lang="ko"] .vz-tip text{ letter-spacing:.02em; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .vz{ grid-template-columns:1fr; gap:28px; }
  .vz-stage{ position:static; }
}
@media (min-width:621px) and (max-width:900px){
  .vz-legend{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
}
@media (max-width:620px){
  .vz-stage{ padding:6px 6px 10px; }
  .vz-dot{ r:10px; } .vz-halo{ r:16px; } .vz-marker text{ font-size:10px; }
  .vz-readout{ padding:10px 12px; }
  .vz-item{ padding:10px 8px 11px 8px; gap:10px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .vz-item,.vz-num,.vz-zone path,.vz-zone rect,.vz-halo,.vz-dot,.vz-marker text{ transition:none; }
}


/* ---------- 3D scene (vz3d) ---------- */
.vz3-shadow{ fill:var(--ink); fill-opacity:.07; }
/* faces carry NO outline (subdivision seams would show); real edges are explicit `lines` parts (.vz3-edge / .vz3-line) */
.vz3-shell{ stroke:none; fill:#E9EBE8; fill-opacity:.42; }
.vz3-solid{ stroke:none; fill:#E9EBE8; }
.vz3-glass{ stroke:none; fill:var(--blue); fill-opacity:.10; }
.vz3-trim{ stroke:none; fill:var(--line); }
.vz3-edge{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-opacity:.88; stroke-linejoin:round; stroke-linecap:round; }
.vz3-t0{ fill:#F5F6F4; } .vz3-t1{ fill:#E9EBE8; } .vz3-t2{ fill:#D7DBD9; } .vz3-t3{ fill:#C3C8C6; }
.vz3-shell.vz3-t0{ fill:#F5F6F4; } .vz3-shell.vz3-t1{ fill:#E9EBE8; } .vz3-shell.vz3-t2{ fill:#D7DBD9; } .vz3-shell.vz3-t3{ fill:#C3C8C6; }
.vz3-tire{ stroke:var(--ink); stroke-width:1.2; stroke-opacity:.7; fill:#B9BEBC; }
.vz3-tire.vz3-t0,.vz3-tire.vz3-t1{ fill:#C9CDCB; } .vz3-tire.vz3-t2{ fill:#AEB3B1; } .vz3-tire.vz3-t3{ fill:#969B99; }
.vz3-tireface{ fill:#CBCFCD; }
.vz3-rim{ fill:var(--card); stroke:var(--ink); stroke-width:1; stroke-opacity:.6; }
.vz3-hub{ fill:var(--ink); fill-opacity:.65; stroke:none; }
.vz3-spoke{ fill:none; stroke:var(--ink); stroke-width:1; stroke-opacity:.45; }
.vz3-line{ fill:none; stroke:var(--ink); stroke-width:1.2; stroke-opacity:.68; stroke-linejoin:round; stroke-linecap:round; }
.vz3-line-soft{ fill:none; stroke:var(--ink); stroke-width:1.1; stroke-opacity:.35; stroke-linecap:round; }
.vz3-zone-line{ fill:none; stroke:var(--blue); stroke-width:8; stroke-opacity:.16; stroke-linecap:round; stroke-linejoin:round; transition:stroke-opacity .2s; }
.vz3-zone-area{ fill:var(--blue); fill-opacity:.08; stroke:var(--blue); stroke-width:1.5; stroke-opacity:.45; stroke-dasharray:4 3; transition:fill-opacity .2s, stroke-opacity .2s; }
.vz-zone.is-active .vz3-zone-line{ stroke-opacity:.7; }
.vz-zone.is-active .vz3-zone-area{ fill-opacity:.42; stroke-opacity:1; }

/* ---------- 3D orbit controls (vz3d.js) — append after VZ3_CSS inside the .vz block ---------- */
@media (max-width:900px){ .vz-stage{ position:relative; } }      /* anchors the on-stage hint pill (desktop keeps sticky, which is positioned too) */
.vz-stage.vz3-ready{ touch-action:pan-y pinch-zoom; }            /* one finger: rotate (x) / scroll (y); two fingers: browser zoom */
.vz-stage:not(.vz3-ready) .vz3-views{ display:none; }            /* no engine (no JS / script blocked): no inert chips */
.vz-stage.vz3-ready .vz-svg{ cursor:grab; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent; }
.vz-stage.vz3-ready .vz-marker{ cursor:pointer; }
.vz-stage.vz3-dragging,.vz-stage.vz3-dragging .vz-svg,.vz-stage.vz3-dragging .vz-marker{ cursor:grabbing; }
.vz-stage.vz3-ready:focus,.vz3-orbit:focus{ outline:none; }
.vz-stage.vz3-ready:focus-visible,.vz3-orbit:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.vz3-orbit{ display:block; border-radius:3px; }

/* markers whose anchor faces away from the camera: dashed disc + muted digit (never dimmed — 3:1 boundary, 4.5:1 digit) */
.vz-marker.is-behind{ opacity:1; }
.vz-marker.is-behind .vz-dot{ fill:var(--paper); stroke-dasharray:3 2; stroke-opacity:.9; }
.vz-marker.is-behind text{ fill:var(--muted); }
.vz-marker.is-behind .vz-halo{ stroke-opacity:0; }
.vz-marker.is-behind.is-active .vz-dot,.vz-marker.is-behind:focus-visible .vz-dot{ fill:var(--blue); stroke-dasharray:none; stroke-opacity:1; }
.vz-marker.is-behind.is-active text,.vz-marker.is-behind:focus-visible text{ fill:#fff; }
.vz-marker.is-behind.is-active .vz-halo,.vz-marker.is-behind:focus-visible .vz-halo{ stroke-opacity:.45; }
.vz-marker.is-behind:focus-visible .vz-halo{ stroke:var(--ink); stroke-opacity:1; }
@media (hover:hover){
  .vz-marker.is-behind:hover .vz-dot{ fill:var(--blue); stroke-dasharray:none; stroke-opacity:1; }
  .vz-marker.is-behind:hover text{ fill:#fff; }
}
/* leader from a displaced marker to its true anchor */
.vz-leader{ stroke:var(--ink); stroke-width:1.5; stroke-opacity:.7; stroke-dasharray:3 3; }

/* preset view bar: a dark viewer-toolbar strip under the drawing — "VIEW" label + five chips, each with a small sedan
   glyph of that view, so the view switch reads as a control (not as tags); pressed chip = brand blue like the active marker.
   >= 36 px tall on desktop, >= 50 px cells on phones */
.vz3-views{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:10px 0 0; padding:7px 8px; background:var(--ink); border-radius:4px; color:#fff;
}
.vz3-views-label{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); padding:0 8px 0 6px; white-space:nowrap;
}
.vz3-views-label::before{ content:'\21BB\00A0'; font-size:13px; color:#fff; }
.vz3-views button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:600; line-height:1; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:transparent; border:1px solid rgba(255,255,255,.36); border-radius:3px;
  min-height:36px; padding:0 14px 0 11px; cursor:pointer; touch-action:manipulation;
  transition:background .15s, color .15s, border-color .15s;
}
.vz3-views button .vz3-ico{
  width:22px; height:15px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round;
}
@media (hover:hover){
  .vz3-views button:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.75); }
}
.vz3-views button[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }
.vz3-views button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
html[lang="ko"] .vz3-views button{ letter-spacing:.02em; text-transform:none; white-space:nowrap; }
html[lang="ko"] .vz3-views-label{ letter-spacing:.04em; text-transform:none; }

/* on-stage "drag to rotate" pill (top-right of the drawing); retires after the first interaction */
.vz3-hint{
  display:none; position:absolute; top:12px; right:12px; z-index:1; pointer-events:none;
  padding:5px 10px; border:1px solid var(--ink); border-radius:999px; background:var(--ink);
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  transition:opacity .4s, visibility .4s;
}
.vz3-hint::before{ content:'\21BB\00A0'; }
html[lang="ko"] .vz3-hint{ letter-spacing:.02em; text-transform:none; }
.vz-stage.vz3-ready .vz3-hint{ display:inline-block; }
.vz-stage.vz3-used .vz3-hint{ opacity:0; visibility:hidden; }

@media (max-width:620px){
  /* phones: label on its own row, five equal cells with the glyph above the word */
  .vz3-views{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin:6px 0 0; padding:6px; border-radius:3px; }
  .vz3-views-label{ grid-column:1 / -1; padding:2px 2px 3px; font-size:10.5px; }
  .vz3-views button{ flex-direction:column; gap:5px; min-height:50px; padding:6px 2px 7px; font-size:9.5px; letter-spacing:.04em; }
  .vz3-views button .vz3-ico{ width:24px; height:16px; }
  .vz3-hint{ top:8px; right:8px; }
}
@media (prefers-reduced-motion:reduce){
  .vz3-views button,.vz3-hint{ transition:none; }
}

/* ---------- integrator additions (namespaced vz3-) ---------- */
/* wheel-arch liners: lighter than .vz3-hub so hubs and liners can be tuned independently */
.vz3-well{ fill:var(--ink); fill-opacity:.32; stroke:none; }
/* seats one tone darker than the floor / dash so the cabin reads in the side view */
.vz3-seat.vz3-t0{ fill:#E2E5E3; } .vz3-seat.vz3-t1{ fill:#D4D8D6; } .vz3-seat.vz3-t2{ fill:#C3C8C6; } .vz3-seat.vz3-t3{ fill:#B1B6B4; }
/* the site's a:hover underline would underline the marker digit on touch devices (sticky hover) */
.vz-stage.vz3-ready .vz-marker:hover{ text-decoration:none; }
/* tyre tread facets carry no outline (28-gon reads as a circle) */
.vz3-tread{ stroke:none; }

/* rest state recedes, the chosen zone pops: every other zone group fades while one is active */
.vz-svg.has-active .vz-zone:not(.is-active){ opacity:.45; transition:opacity .2s; }
/* the floating label ghosts what lies under it */
.vz-tip rect{ fill-opacity:.94; }
/* polite live region for zone / preset announcements */
.vz-live{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:620px){
  /* the stage bleeds to the phone's edges: 366 px of drawing instead of 336 on a 390 px screen */
  .vz-stage{ margin-left:-12px; margin-right:-12px; padding:4px 4px 10px; border-radius:0; }
  .vz-marker text{ font-size:10.5px; }
}
@media (prefers-reduced-motion:reduce){
  .vz-svg.has-active .vz-zone:not(.is-active){ transition:none; }
}
/* readout is part of the static page (no late appearance, visible without JS); the label bar has no arrow */
.vz-readout{ display:flex; }
.vz-tip .vz-tip-arrow{ display:none; }


/* ===== phase1:map ===== */
/* ============================================================
   Korea plant map — inline SVG replacement for .kmap > img
   (Phase 1 · _phase1/map/map.css — append to styles.css after the
   ".sitegrid / .kmap" block; the old .kdot / .klabel rules may stay)
   Geometry is in SVG user units (viewBox 0 0 724 694); the sizes below
   are tuned so that at the 340-px .sitegrid column 1 unit = 0.4696 CSS px:
   dots 12 px, chip text 10.5 px, 1-px strokes.
   ============================================================ */
.km{ position:relative; max-width:420px; }
.km-svg{ display:block; width:100%; height:auto; aspect-ratio:724/694; overflow:visible;
  font-family:var(--mono); text-rendering:optimizeLegibility; }
.km-nk{ display:none; }                                   /* land north of the DMZ — context only */
.km-land{ fill:#E2E5E3; stroke:#9AA4AD; stroke-width:2.1; stroke-linejoin:round; }
.km-prov{ fill:rgba(108,179,41,.16); stroke:#6CB329; stroke-opacity:.55; stroke-width:2.1;
  stroke-linejoin:round; }                                  /* Gyeongsangbuk-do */
.km-lead{ stroke:var(--ink); stroke-width:2.1; stroke-linecap:round; }
.km-chip rect{ fill:var(--ink); }
.km-chip text{ fill:#fff; font-family:var(--mono); font-size:22.4px; letter-spacing:1.8px;
  text-transform:uppercase; white-space:pre; }
.km-dot{ stroke:#fff; stroke-width:4.3; filter:drop-shadow(0 2px 5px rgba(0,0,0,.28)); }
.km-dot-g{ fill:var(--green); }
.km-dot-b{ fill:var(--blue); }
.km-dot-k{ fill:var(--ink); }
.km-cap{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.km-sw{ width:12px; height:12px; border-radius:2px; background:rgba(108,179,41,.35);
  border:1px solid var(--green-deep); flex:none; }
/* Korean labels are shorter — narrower chips (same markup, geometry properties via CSS) */
:lang(ko) .km-chip-seongju rect{ x:210.6px; width:226.1px; }
:lang(ko) .km-chip-yeongcheon rect{ width:88.5px; }
:lang(ko) .km-chip-busan rect{ x:458.1px; width:112.7px; }


/* ===== phase1:visit ===== */
/* ============================================================
   HANBOO SOLUTION — "Visit us" map embed (contact page, #visit)
   Merge into site/assets/css/styles.css (after the contact block).
   All classes are prefixed .visit- ; relies on existing tokens only.
   ============================================================ */

/* two-column split: map panel left, directions right — top-aligned (heights differ) */
.visit-split{ align-items:start; }

/* ---- map panel: dark placeholder card → iframe after consent click ---- */
.visit-map{
  position:relative; aspect-ratio:16/10; background:var(--ink); color:var(--inv);
  border:1px solid var(--line-dark); border-radius:4px; overflow:hidden;
}
.visit-map::before{ /* survey-grid backdrop, drawn in CSS (no image request) */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px; background-position:center;
}
.visit-map::after{ /* CI hairline: green | blue, like the header */
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:linear-gradient(90deg,var(--green) 0 50%,var(--blue) 50% 100%);
}
.visit-ph{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px 24px; gap:4px;
}
.visit-pin{ width:38px; height:auto; margin-bottom:10px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.visit-pin .pin-body{ fill:var(--green); }
.visit-pin .pin-eye{ fill:var(--ink); }
.visit-tag{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--inv-muted); margin:0;
}
.visit-addr{ font-size:15px; line-height:1.5; color:#fff; margin:4px 0 0; max-width:36ch; }
.visit-coord{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--inv-muted); margin:0 0 14px; }
.visit-load{ cursor:pointer; font-family:inherit; }
.visit-load[disabled]{ opacity:.7; cursor:wait; }
.visit-load:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.visit-notice{ font-size:12px; line-height:1.5; color:var(--inv-muted); margin:12px 0 0; max-width:40ch; }
.visit-notice a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.visit-notice a:focus-visible{ outline-color:#fff; }

/* injected by map-embed.js */
.visit-map iframe{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; display:block; background:var(--ink-2); }
.visit-map.is-loaded .visit-ph,
.visit-map.is-loaded::before{ display:none; }
.visit-map.is-loaded{ border-color:var(--line); }
.visit-map.is-loaded:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* links under the panel (no-JS path as well) */
.visit-links{
  display:flex; flex-wrap:wrap; gap:8px 24px; margin:12px 0 0;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.visit-links a{ color:var(--ink-2); }
.visit-links a:hover{ color:var(--blue); }

/* ---- directions table (extends .spectable) ---- */
.visit-table td b{ display:block; font-weight:600; color:var(--ink); }
.visit-route{ display:block; font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:2px; }
.visit-table td:last-child{ width:38%; }
.visit-table .num{ font-size:13px; line-height:1.6; }
.visit-table .num small{ display:block; font-family:var(--sans); font-size:12px; color:var(--muted); white-space:normal; }

html[lang="ko"] .visit-tag,html[lang="ko"] .visit-links{ letter-spacing:.06em; }

@media (max-width:900px){
  .visit-map{ aspect-ratio:16/11; }
}
@media (max-width:620px){
  .visit-map{ aspect-ratio:4/3; }
  .visit-ph{ padding:22px 18px; }
  .visit-addr{ font-size:14px; }
  /* narrow screens: stack each row (origin + route, then the figure line) instead of wrapping the mono figures */
  .visit-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .visit-table tr{ display:block; border-bottom:1px solid var(--line); }
  .visit-table tr:last-child{ border-bottom:0; }
  .visit-table td{ display:block; border-bottom:0; padding:12px 14px 0; }
  .visit-table td:last-child{ width:auto; padding:6px 14px 13px; }
  .visit-table .num small{ margin-top:2px; }
}
@media (prefers-reduced-motion:reduce){
  .visit-load{ transition:none; }
}


/* ===== QA fixes 2026-08-23 ===== */
html,body{ overflow-x:clip; }
main:focus{ outline:none; }
h1.display,h2.display{ text-wrap:balance; }
.sec-dark .eyebrow,.sec-felt .eyebrow,.why .eyebrow{ color:var(--inv-muted); }
.hero-dots{ margin:0 6px; }
.mx + .sq{ border-top:0; }
.chips{ max-width:760px; }
.vz-ro-spec{ font-size:11px; }
.why-toggle{ position:absolute; right:12px; bottom:12px; z-index:3; }
@media (min-width:901px){ .visit-split > div:first-child{ position:sticky; top:84px; } }
@media (max-width:899px){ .foot-bottom{ padding-bottom:76px; } }
@media (max-width:620px){
  .hs-nvh{ background-image:linear-gradient(to top,rgba(12,13,15,.92) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.26) 78%),url('../img/_v/hero-nvh-1280.webp'); }
  .bg-ready .hs-mfg{ background-image:linear-gradient(to top,rgba(12,13,15,.9) 0%,rgba(12,13,15,.62) 46%,rgba(12,13,15,.3) 78%),url('../img/_v/hero-drone-1280.webp'); }
  .bg-ready .hs-oxi{ background-image:linear-gradient(to top,rgba(12,13,15,.94) 0%,rgba(12,13,15,.5) 46%,rgba(12,13,15,.2) 78%),url('../img/_v/hero-heat-1280.webp'); }
}
@media (prefers-reduced-motion:reduce){
  .dl > a,.hero-link::after,.hero-btn,.hero-dot{ transition:none; }
  .dl > a:hover{ translate:none; }
}