/* ==========================================================================
   NiTi Brush / HANS Korea Co., Ltd.
   Static site stylesheet — rebuilt 2026
   ========================================================================== */

:root{
  --blue:#2383B5;
  --blue-dark:#1B6A93;
  --blue-light:#B4F0F0;
  --navy:#2B3140;
  --navy-deep:#20242F;
  --ink:#333;
  --muted:#666;
  --line:#DADADA;
  --line-soft:#EAEAEA;
  --bg-soft:#F9F9F9;
  --white:#fff;
  --max:1180px;
  --font: 'Arial', 'Helvetica Neue', Helvetica, 'Malgun Gothic', '맑은 고딕',
          'Apple SD Gothic Neo', 'Nanum Gothic', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.35; color:#222; }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.3em; }
table{ border-collapse:collapse; width:100%; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--blue); color:#fff; padding:10px 16px; z-index:999;
}
.skip:focus{ left:0; }

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--line-soft);
  background:var(--white);
  position:sticky; top:0; z-index:100;
}
.header-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 0;
}
.logo{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.logo:hover{ text-decoration:none; }
.logo img{ height:34px; width:auto; }
.logo-tag{ font-size:12.5px; font-weight:700; color:#2a2f38; letter-spacing:.01em; white-space:nowrap; }
@media (max-width:980px){ .logo-tag{ display:none; } }

/* brand wordmarks from the 2025 banner material */
.origin-sign{ display:block; width:min(100%, 380px); height:auto; margin-top:22px; opacity:.88; }
.script-opener{ margin:0 0 10px; }
.script-opener img{ width:min(100%, 520px); height:auto; display:block; }
.pair-grid{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .pair-grid{ grid-template-columns:1fr; } }
.ba-pair.square figure img{ aspect-ratio:1 / 1; }
.ba-pair .pair-label{ grid-column:1 / -1; margin:0 0 -6px; font-size:12.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.header-meta{
  font-size:12.5px; color:var(--muted); text-align:right; line-height:1.5;
}
.header-meta a{ color:var(--muted); }
.header-meta strong{ color:var(--blue); }

/* ---------- Navigation ---------- */
.site-nav{ background:var(--navy); }
.nav-list{
  display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none;
  max-width:var(--max); margin-inline:auto;
}
.nav-list > li{ position:relative; }
.nav-list > li > a{
  display:block; padding:14px 22px;
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
  transition:background .15s, color .15s;
}
/* hover is a light touch, so it never reads as "you are here" */
.nav-list > li > a:hover,
.nav-list > li > a:focus-visible{
  background:rgba(255,255,255,.10); color:#fff; text-decoration:none;
}
/* the page you are on: solid brand blue with an underscore bar */
.nav-list > li.is-current > a{
  background:var(--blue); color:#fff; text-decoration:none;
  box-shadow:inset 0 -4px 0 rgba(255,255,255,.55);
}
.nav-list > li.is-current > a:hover,
.nav-list > li.is-current > a:focus-visible{
  background:var(--blue-dark); color:#fff;
}
.nav-list .submenu{
  position:absolute; left:0; top:100%; min-width:190px;
  margin:0; padding:6px 0; list-style:none;
  background:var(--navy-deep); border-top:2px solid var(--blue);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:110;
}
.nav-list > li:hover .submenu,
.nav-list > li:focus-within .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.submenu a{
  display:block; padding:9px 22px; color:#DDE3EC; font-size:13.5px;
  text-decoration:none;
}
.submenu a:hover, .submenu a:focus-visible{
  color:var(--blue-light); background:rgba(255,255,255,.06); text-decoration:none;
}

.nav-toggle{
  display:none; width:100%; padding:12px 20px;
  background:var(--navy); color:#fff; border:0;
  font:inherit; font-weight:700; text-align:left; cursor:pointer;
}

/* ---------- Page head ---------- */
.page-head{
  background:var(--navy) url('../img/upload_design__20181227101200-3a532b6376.jpg') center/cover no-repeat;
  color:#fff; padding:44px 0;
}
.page-head h1{ color:#fff; font-size:30px; letter-spacing:-.01em; }
.breadcrumb{
  margin:0 0 8px; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
  font-size:12.5px; color:rgba(255,255,255,.72);
}
.breadcrumb li::after{ content:'/'; margin-left:8px; opacity:.5; }
.breadcrumb li:last-child::after{ content:''; }
.breadcrumb a{ color:rgba(255,255,255,.72); }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Sections ---------- */
main{ display:block; }
.section{ padding:52px 0; }
.section + .section{ border-top:1px solid var(--line-soft); }
.section-alt{ background:var(--bg-soft); }

.section-title{
  font-size:22px; margin-bottom:6px;
  padding-bottom:12px; border-bottom:2px solid var(--navy);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.section-title small{ font-size:13px; font-weight:400; color:var(--muted); }
.section-intro{ color:var(--muted); margin:14px 0 26px; max-width:70ch; }

h2.h-sub{
  font-size:18px; margin:34px 0 12px;
  padding-left:12px; border-left:4px solid var(--blue);
}
h3.h-min{ font-size:16px; margin:24px 0 8px; color:var(--blue-dark); }

.lead{ font-size:17px; color:#444; }
.muted{ color:var(--muted); }
.center{ text-align:center; }

/* ---------- Home ---------- */
.hero{
  position:relative; overflow:hidden;
  background:#fff;
  background-image:
    radial-gradient(60% 80% at 82% 45%, rgba(35,131,181,.10), rgba(35,131,181,0) 70%),
    linear-gradient(180deg, #fff 0%, #F5F7F9 100%);
  border-bottom:1px solid var(--line-soft);
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center; gap:40px;
  min-height:520px; padding-top:56px; padding-bottom:48px;
}
.hero-eyebrow{
  margin:0 0 18px; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-dark); font-weight:700;
}
.hero h1{
  font-size:50px; line-height:1.08; letter-spacing:-.02em; color:#1B2230;
  margin:0 0 22px; font-weight:700;
}
.hero h1 sup{ font-size:.38em; vertical-align:top; position:relative; top:.35em; font-weight:400; color:#6b7480; }
.hero-lead{
  font-size:18px; line-height:1.6; color:#4a5260; max-width:34em; margin:0 0 28px;
}
.hero-actions{ margin:0 0 34px; }
.hero-trust{
  list-style:none; margin:0; padding:18px 0 0; display:flex; flex-wrap:wrap; gap:6px 0;
  border-top:1px solid var(--line-soft); font-size:13px; color:#6b7480; letter-spacing:.01em;
}
.hero-trust li{ padding-right:16px; margin-right:16px; border-right:1px solid var(--line); line-height:1.2; }
.hero-trust li:last-child{ border-right:0; margin-right:0; padding-right:0; }
.hero-visual{ display:flex; justify-content:center; align-items:center; }
.hero-visual img{
  width:min(100%, 500px); height:auto;
  filter:drop-shadow(0 30px 40px rgba(27,34,48,.18));
}

@media (max-width:980px){
  .hero-grid{ gap:24px; min-height:0; padding-top:44px; padding-bottom:40px; }
  .hero h1{ font-size:40px; }
  .hero-visual img{ width:min(100%, 360px); }
}

.card-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.card{
  border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover{
  border-color:var(--blue); box-shadow:0 4px 14px rgba(0,0,0,.08);
  transform:translateY(-2px); text-decoration:none;
}
.card-body{ padding:18px 20px 22px; }
.card h3{ font-size:16px; margin-bottom:6px; color:var(--navy); }
.card p{ margin:0; font-size:13.5px; color:var(--muted); }

/* ---------- Product ---------- */
.product-table th, .product-table td{
  border:1px solid var(--line); padding:14px; vertical-align:middle;
  text-align:center; font-size:14px;
}
.product-table thead th{ background:var(--navy); color:#fff; font-weight:700; }
.product-table tbody th{ background:var(--bg-soft); font-weight:700; }
.product-table img{ margin:0 auto; }

.spec-table th, .spec-table td{
  border:1px solid var(--line); padding:12px 14px; font-size:14px; text-align:center;
}
.spec-table thead th{ background:var(--navy); color:#fff; }
.spec-table tbody th{ background:var(--bg-soft); text-align:left; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Figures / galleries ---------- */
.fig-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
figure{ margin:0; }
figure img{ width:100%; border:1px solid var(--line); background:#fff; }
figcaption{
  margin-top:8px; font-size:13px; color:var(--muted); text-align:center;
}
.ba-pair{
  display:grid; gap:16px; grid-template-columns:1fr 1fr;
  border:1px solid var(--line-soft); padding:16px; background:#fff;
}
.ba-pair .tag{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  padding:2px 8px; margin-bottom:6px; text-transform:uppercase;
}
.tag-before{ background:#EEE; color:#555; }
.tag-after{ background:var(--blue); color:#fff; }

/* ---------- Steps ---------- */
.steps{ counter-reset:step; list-style:none; padding:0; margin:0; }
.steps > li{
  counter-increment:step; position:relative;
  padding:0 0 26px 58px; margin:0;
}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps h3{ font-size:16px; margin-bottom:4px; }
.steps p{ margin:0; color:var(--muted); font-size:14px; }

/* ---------- Video ---------- */
.video-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.video-embed{
  position:relative; padding-top:56.25%; background:#000;
  border:1px solid var(--line);
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-title{ margin-top:10px; font-size:14px; font-weight:700; }

/* ---------- IFU ---------- */
.ifu-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.ifu-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line); padding:14px 16px;
  color:var(--ink); text-decoration:none; background:#fff;
  transition:border-color .15s, background .15s;
}
.ifu-item:hover{
  border-color:var(--blue); background:#F4FAFD; text-decoration:none;
}
.ifu-code{
  font-weight:700; font-size:15px; color:var(--navy);
}
.ifu-lang{ display:block; font-size:12.5px; color:var(--muted); font-weight:400; }
.ifu-dl{
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  color:var(--blue); white-space:nowrap;
}

/* ---------- Downloads / buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border:1px solid var(--blue);
  background:var(--blue); color:#fff; font-size:14px; font-weight:700;
  text-decoration:none; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{ background:var(--blue-dark); border-color:var(--blue-dark); text-decoration:none; color:#fff; }
.btn-outline{ background:transparent; color:var(--blue); }
.btn-outline:hover{ background:var(--blue); color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }

/* ---------- Articles ---------- */
.article-list{ list-style:none; padding:0; margin:0; }
.article-list > li{
  border:1px solid var(--line-soft); border-left:4px solid var(--blue);
  background:#fff; padding:20px 24px; margin-bottom:14px;
}
.article-list h3{ font-size:16px; margin-bottom:8px; line-height:1.45; }
.article-meta{ font-size:13px; color:var(--muted); margin:0 0 6px; }
.article-authors{ font-size:13px; color:#555; margin:0; }
.article-doi{
  font-size:12.5px; color:var(--muted);
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ---------- Timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{
  content:''; position:absolute; left:70px; top:6px; bottom:6px;
  width:2px; background:var(--line);
}
.timeline > li{
  position:relative; padding:0 0 30px 100px; margin:0;
}
.timeline > li::before{
  content:''; position:absolute; left:65px; top:7px;
  width:12px; height:12px; border-radius:50%;
  background:var(--blue); border:2px solid #fff;
  box-shadow:0 0 0 2px var(--blue);
}
.tl-year{
  position:absolute; left:0; top:0; width:56px; text-align:right;
  font-size:15px; font-weight:700; color:var(--navy);
}
.timeline p{ margin:0 0 6px; font-size:14px; }
.timeline .tl-note{ font-size:13px; color:var(--muted); }

/* ---------- Distributors ---------- */
.dist-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
}
.dist-item{
  border:1px solid var(--line); background:#fff; padding:20px;
  text-align:center; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:border-color .15s, box-shadow .15s;
}
.dist-item:hover{ border-color:var(--blue); box-shadow:0 3px 12px rgba(0,0,0,.07); text-decoration:none; }
.dist-item img{ max-height:46px; width:auto; object-fit:contain; }
.dist-country{ font-size:14px; font-weight:700; color:var(--navy); }

/* ---------- Contact / form ---------- */
.contact-grid{
  display:grid; gap:40px; grid-template-columns:1fr 1fr; align-items:start;
}
.info-table th, .info-table td{
  border-bottom:1px solid var(--line-soft); padding:12px 4px;
  text-align:left; font-size:14px; vertical-align:top;
}
.info-table th{ width:104px; color:var(--muted); font-weight:700; }

.form-field{ margin-bottom:16px; }
.form-field label{
  display:block; font-size:13.5px; font-weight:700; margin-bottom:6px;
}
.form-field .req{ color:#C0392B; }
.form-field input[type=text],
.form-field input[type=email],
.form-field select,
.form-field textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:14px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:0;
}
.form-field textarea{ min-height:130px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 2px rgba(35,131,181,.18);
}
.radio-row{ display:flex; flex-wrap:wrap; gap:18px; }
.radio-row label{ display:flex; align-items:center; gap:7px; font-weight:400; }
.form-note{
  font-size:12.5px; color:var(--muted); margin-top:14px;
  padding:12px 14px; background:var(--bg-soft); border-left:3px solid var(--line);
}

/* ---------- Callout ---------- */
.callout{
  border:1px solid var(--line); border-left:4px solid var(--blue);
  background:var(--bg-soft); padding:18px 22px; margin:24px 0;
}
.callout h3{ font-size:15px; margin-bottom:6px; }
.callout p:last-child{ margin-bottom:0; }
.callout-warn{ border-left-color:#C0392B; }

.keywords{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12px; color:#999; line-height:1.9;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy-deep); color:#A9B2C4; padding:44px 0 26px; margin-top:60px;
}
.footer-grid{
  display:grid; gap:34px; grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-logo img{ height:28px; width:auto; filter:brightness(0) invert(1); opacity:.9; margin-bottom:14px; }
.footer-grid h4{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:#8792A6; margin-bottom:14px;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:#C8D0DD; font-size:13.5px; }
.footer-grid a:hover{ color:#fff; }
.footer-addr{ font-size:13px; line-height:1.9; margin:0; }
.footer-addr a{ color:#C8D0DD; }
.footer-rights{
  margin:26px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.10);
  font-size:12px; line-height:1.7; color:#8792A6; max-width:900px;
}
.footer-rights a{ color:#C8D0DD; white-space:nowrap; }
.footer-bottom{
  padding-top:14px; font-size:12px; color:#6E7A8E;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .header-meta{ display:none; }

  .nav-toggle{ display:block; }
  .nav-list{
    display:none; flex-direction:column; padding:0 0 8px;
  }
  .nav-list.is-open{ display:flex; }
  .nav-list > li > a{ padding:12px 20px; border-top:1px solid rgba(255,255,255,.08); }
  .nav-list .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    border-top:0; background:rgba(0,0,0,.25); padding:0;
  }
  .submenu a{ padding:10px 20px 10px 36px; font-size:13px; }

  .page-head{ padding:32px 0; }
  .page-head h1{ font-size:23px; }
  .section{ padding:38px 0; }
  .ba-pair{ grid-template-columns:1fr; }

  .timeline::before{ left:6px; }
  .timeline > li{ padding-left:30px; }
  .timeline > li::before{ left:1px; }
  .tl-year{
    position:static; width:auto; text-align:left; display:block;
    margin-bottom:4px; color:var(--blue);
  }

  .footer-grid{ grid-template-columns:1fr; gap:26px; }
}

@media print{
  .site-nav, .nav-toggle, .site-footer, .page-head{ display:none; }
  body{ font-size:11pt; }
}

/* ==========================================================================
   Product line-up (4 models)
   ========================================================================== */

.model-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.model-card{
  border:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s;
}
.model-card:hover{ border-color:var(--blue); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.model-card .shot{
  background:#fff; border-bottom:1px solid var(--line-soft); padding:6px;
}
.model-card .shot img{ width:100%; }
.model-card .body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.model-name{
  font-family:var(--font); font-size:19px; font-weight:700; color:var(--navy);
  letter-spacing:-.01em; margin:0;
}
.model-card p{ margin:0; font-size:14px; color:var(--muted); line-height:1.65; }
.model-card .use{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); }
.model-card .use dt{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#8A93A0; margin-bottom:2px;
}
/* reserve two lines so the rule and the label sit at the same height on every card */
.model-card .use dd{
  margin:0; font-size:14px; color:var(--ink); font-weight:700;
  line-height:1.45; min-height:2.9em;
}
/* where subgrid is available, align the four bands exactly, at any column count */
@supports (grid-template-rows: subgrid){
  .model-grid{ grid-auto-rows:auto auto 1fr auto; }
  .model-card{ display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; }
  .model-card .body{ display:grid; grid-row:2 / span 3; grid-template-rows:subgrid; row-gap:8px; }
  .model-card .use{ margin-top:0; }
}

/* selection table */
.select-table th, .select-table td{
  border:1px solid var(--line); padding:13px 14px; font-size:14px; text-align:center;
  vertical-align:middle;
}
.select-table thead th{ background:var(--navy); color:#fff; font-weight:700; }
.select-table tbody th{ background:var(--bg-soft); text-align:left; font-weight:700; white-space:nowrap; }
.select-table td strong{ color:var(--navy); }
.select-table .yes{ color:var(--blue); font-weight:700; }
.select-table .na{ color:#B4BAC4; }

/* spec list */
.spec-pairs{
  display:grid; gap:0; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  border-top:1px solid var(--line);
}
.spec-pairs div{
  padding:16px 18px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
}
.spec-pairs dt{
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#8A93A0; font-weight:700; margin-bottom:5px;
}
.spec-pairs dd{ margin:0; font-size:15px; color:var(--ink); }

/* full-bleed product hero */
.product-hero{
  background:var(--navy-deep);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:0;
}
.product-hero .copy{ padding:52px 44px; color:#fff; }
.product-hero .copy h2{ color:#fff; font-size:27px; margin-bottom:14px; letter-spacing:-.01em; }
.product-hero .copy p{ color:rgba(255,255,255,.76); font-size:15.5px; margin-bottom:0; }
.product-hero .shot img{ width:100%; display:block; }
@media (max-width:820px){
  .product-hero{ grid-template-columns:1fr; }
  .product-hero .copy{ padding:34px 24px; }
}

/* evidence pair with real captions */
.evidence-pair{
  display:grid; gap:20px; grid-template-columns:1fr 1fr;
}
@media (max-width:700px){ .evidence-pair{ grid-template-columns:1fr; } }
.evidence-pair figure img{ width:100%; border:1px solid var(--line); }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.faq-item{
  padding:26px 0; border-bottom:1px solid var(--line);
}
.faq-item h3{
  font-size:17px; color:var(--navy); margin-bottom:10px; line-height:1.4;
  padding-left:16px; border-left:3px solid var(--blue);
}
.faq-item p, .faq-item li{ font-size:15px; color:#444; }
.faq-item p:last-child, .faq-item ol:last-child, .faq-item ul:last-child{ margin-bottom:0; }
.faq-item ul, .faq-item ol{ margin-top:10px; }
.faq-item li{ margin-bottom:7px; }
.faq-item li strong{ color:var(--navy); }

/* ---------- Origin / first-in-world claim ---------- */
.origin{
  background:var(--navy-deep); color:#fff; padding:44px 0;
  border-top:3px solid var(--blue);
}
.origin .inner{
  display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center;
}
@media (max-width:760px){ .origin .inner{ grid-template-columns:1fr; gap:20px; } }
.origin .year{
  font-size:60px; font-weight:700; line-height:1; color:var(--blue-light);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.origin .year small{ display:block; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#8FA3B8; margin-top:8px; }
.origin h2{ color:#fff; font-size:24px; margin-bottom:10px; letter-spacing:-.01em; }
.origin p{ color:rgba(255,255,255,.76); margin:0 0 8px; font-size:15.5px; max-width:62ch; }
.origin p:last-child{ margin-bottom:0; }
.origin .patent{
  display:inline-block; margin-top:14px; padding:7px 14px;
  border:1px solid rgba(255,255,255,.28);
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:12.5px; letter-spacing:.03em; color:#C8D6E4;
}

/* ---------- Evidence statistics row ---------- */
.stat-row{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  border:1px solid var(--line); margin-top:28px;
}
.stat{ background:#fff; padding:22px 18px; text-align:center; }
.stat .n{
  display:block; font-size:30px; font-weight:700; color:var(--blue-dark);
  line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.stat .l{
  display:block; margin-top:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:#8A93A0; line-height:1.45;
}
.section-alt .stat{ background:#fff; }

/* ==========================================================================
   Benchmark additions — problem framing, footnotes, authenticity, founder
   ========================================================================== */

/* --- The clinical problem --- */
.problem{ background:#fff; }
.problem-grid{
  display:grid; gap:0; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  border:1px solid var(--line); margin-top:26px;
}
.problem-grid > div{
  padding:26px 24px; border-right:1px solid var(--line);
}
.problem-grid > div:last-child{ border-right:0; }
.problem-grid .big{
  display:block; font-size:34px; font-weight:700; color:var(--navy);
  line-height:1; letter-spacing:-.02em; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.problem-grid .cap{ font-size:14px; color:var(--muted); line-height:1.6; }
.problem-grid .cap strong{ color:var(--ink); }
@media (max-width:700px){
  .problem-grid > div{ border-right:0; border-bottom:1px solid var(--line); }
  .problem-grid > div:last-child{ border-bottom:0; }
}

/* --- Footnote references --- */
sup.ref{
  font-size:.66em; line-height:0; vertical-align:super;
  font-weight:700; color:var(--blue); margin-left:1px;
}
sup.ref a{ color:inherit; text-decoration:none; }
sup.ref a:hover{ text-decoration:underline; }
.footnotes{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.footnotes h3{
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:#8A93A0; margin-bottom:14px;
}
.footnotes ol{ margin:0; padding-left:1.4em; }
.footnotes li{ margin-bottom:9px; line-height:1.65; }
.footnotes li:target{ background:#EAF4FA; }

/* --- Authenticity / the original --- */
.authentic{
  background:var(--navy); color:#fff; padding:46px 0;
  border-top:3px solid var(--blue);
}
.authentic .grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center;
}
@media (max-width:820px){ .authentic .grid{ grid-template-columns:1fr; gap:26px; } }
.authentic h2{ color:#fff; font-size:25px; margin-bottom:14px; letter-spacing:-.01em; }
.authentic p{ color:rgba(255,255,255,.78); margin-bottom:12px; font-size:15.5px; }
.authentic p:last-child{ margin-bottom:0; }
.authentic .marks{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;
}
.authentic .marks span{
  border:1px solid rgba(255,255,255,.3); padding:8px 14px;
  font-size:12.5px; letter-spacing:.03em; color:#D6E2EC;
}
.authentic .shot img{ width:100%; border:1px solid rgba(255,255,255,.2); }

/* --- Founder --- */
.founder{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center;
}
@media (max-width:820px){ .founder{ grid-template-columns:1fr; gap:24px; } }
.founder blockquote{
  margin:0; font-size:19px; line-height:1.62; color:var(--ink);
  padding-left:20px; border-left:4px solid var(--blue);
}
.founder .who{
  margin-top:18px; font-size:13.5px; color:var(--muted); line-height:1.7;
}
.founder .who strong{ color:var(--navy); display:block; font-size:15px; }
.founder .shot img{ width:100%; border:1px solid var(--line); }

/* --- Foundation positioning --- */
.foundation{
  border:1px solid var(--line); border-left:4px solid var(--blue);
  background:#fff; padding:28px 30px; margin-top:26px;
}
.foundation h3{ font-size:18px; color:var(--navy); margin-bottom:12px; }
.foundation p{ font-size:15px; }
.foundation p:last-child{ margin-bottom:0; }
.foundation .layers{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:20px 0 6px; font-size:13.5px;
}
.foundation .layer{
  border:1px solid var(--line); padding:9px 15px; background:var(--bg-soft);
}
.foundation .layer.base{
  background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700;
}
.foundation .plus{ color:var(--muted); font-weight:700; }

/* ==========================================================================
   Mobile refinement
   ========================================================================== */

@media (max-width:760px){

  /* --- compact header: recovers vertical space on a phone --- */
  .header-top{ padding:9px 0; }
  .logo img{ height:26px; }
  .nav-toggle{ padding:11px 20px; font-size:14px; }

  /* --- hero: stack, image first so the product is seen before the copy --- */
  .hero-grid{ grid-template-columns:1fr; gap:8px; padding-top:22px; padding-bottom:30px; text-align:left; }
  .hero-visual{ order:-1; }
  .hero-visual img{ width:min(72%, 260px); transform:none; filter:drop-shadow(0 18px 24px rgba(27,34,48,.14)); }
  .hero-eyebrow{ margin-bottom:10px; font-size:11.5px; }
  .hero h1{ font-size:31px; margin-bottom:12px; }
  .hero-lead{ font-size:15.5px; margin-bottom:18px; }
  .hero-actions{ margin-bottom:20px; }
  .hero-trust{ font-size:12px; }

  /* --- origin band --- */
  .origin{ padding:30px 0; }
  .origin .year{ font-size:42px; }
  .origin .year small{ font-size:11px; margin-top:6px; }
  .origin h2{ font-size:20px; }
  .origin p{ font-size:14.5px; }
  .origin .patent{ font-size:11.5px; padding:6px 11px; }

  /* --- problem figures --- */
  .problem-grid > div{ padding:20px 18px; }
  .problem-grid .big{ font-size:28px; margin-bottom:7px; }
  .problem-grid .cap{ font-size:13.5px; }

  /* --- product cards: tighter, image not too tall --- */
  .model-grid{ gap:16px; }
  .model-card .body{ padding:16px 18px 20px; gap:7px; }
  .model-name{ font-size:18px; }
  .model-card p{ font-size:13.5px; }

  /* --- founder + authenticity --- */
  .founder blockquote{ font-size:17px; padding-left:16px; }
  .authentic{ padding:32px 0; }
  .authentic h2{ font-size:21px; }
  .authentic p{ font-size:14.5px; }
  .authentic .marks span{ font-size:11.5px; padding:7px 11px; }

  /* --- foundation diagram: stack the layers --- */
  .foundation{ padding:20px 18px; }
  .foundation h3{ font-size:16px; }
  .foundation .layers{ flex-direction:column; align-items:stretch; gap:7px; }
  .foundation .layer{ text-align:center; }
  .foundation .plus{ text-align:center; }

  /* --- headings and body copy --- */
  .section-title{ font-size:19px; }
  .section-title small{ font-size:12.5px; }
  .lead{ font-size:16px; }
  h2.h-sub{ font-size:17px; margin:26px 0 10px; }

  /* --- breadcrumb: easier to tap --- */
  .breadcrumb{ font-size:12px; }
  .breadcrumb a{ display:inline-block; padding:4px 0; }

  /* --- footnote markers: usable tap target without changing the look --- */
  sup.ref a{
    display:inline-block; min-width:22px; min-height:22px;
    line-height:22px; text-align:center; margin:-6px -2px;
  }
  .footnotes{ font-size:12.5px; }
  .footnotes li{ margin-bottom:11px; }

  /* --- buttons: full width, comfortable height --- */
  .btn{ padding:13px 20px; }
  .btn-row{ gap:10px; }
  .btn-row .btn{ flex:1 1 100%; justify-content:center; }

  /* --- distributor and IFU tiles --- */
  .ifu-item{ padding:15px 16px; }
  .dist-item{ padding:18px; }

  /* --- keywords line --- */
  .keywords{ font-size:11.5px; }

  /* --- tables get a hint that they scroll --- */
  .table-scroll{
    position:relative;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}

@media (max-width:420px){
  .wrap{ padding:0 16px; }
  .origin .year{ font-size:36px; }
  .section-title{ font-size:18px; }
}

@media (max-width:760px){
  /* footer: comfortable tap targets and spacing */
  .site-footer{ padding:34px 0 22px; }
  .footer-grid{ gap:24px; padding-bottom:22px; }
  .footer-grid li{ margin-bottom:2px; }
  .footer-grid ul a{
    display:inline-block; padding:8px 0; font-size:14.5px;
  }
  .footer-addr{ font-size:13.5px; }
  .footer-addr a{ display:inline-block; padding:6px 0; }
  .footer-bottom{ font-size:11.5px; gap:8px; }
  .footer-bottom a{ display:inline-block; padding:6px 0; }

  /* header contact link */
  .header-meta a{ display:inline-block; padding:4px 0; }

  /* in-body links inside paragraphs stay inline but get a bigger hit area */
  .section p > a, .faq-item a, .article-list a{
    padding:3px 0; display:inline-block;
  }
}

@media (max-width:760px){
  /* iOS zooms the viewport when a focused field is under 16px — prevent that */
  .form-field input[type=text],
  .form-field input[type=email],
  .form-field select,
  .form-field textarea{
    font-size:16px; padding:13px 14px;
  }
  .form-field label{ font-size:14px; }
  .radio-row{ gap:14px; }
  .radio-row label{ padding:6px 0; font-size:14.5px; }
  .radio-row input{ width:18px; height:18px; }

  /* contact info table */
  .info-table th{ width:88px; font-size:13px; }
  .info-table td{ font-size:14px; }
}

/* ==========================================================================
   Before / after pairs — both panes must render at exactly the same size
   so the comparison is visually fair regardless of source dimensions.
   ========================================================================== */
.evidence-pair figure img,
.ba-pair figure img{
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  width:100%;
  height:auto;
}

/* keep the caption baselines aligned even when captions wrap differently */
.evidence-pair, .ba-pair{ align-items:start; }
.evidence-pair figure, .ba-pair figure{ display:flex; flex-direction:column; }
.evidence-pair figcaption, .ba-pair figcaption{ margin-top:auto; padding-top:8px; }

/* bristle head comparison — all four panes identical */
.head-grid figure img{
  aspect-ratio:1 / 1;
  object-fit:contain;
  background:#fff;
  width:100%;
}
.head-grid figcaption{ line-height:1.5; }
.head-grid figcaption strong{ color:var(--navy); }

/* ---------- Regulatory symbols (ISO 15223-1) ---------- */
.symbols{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 34px;
}
.symbols li{
  display:flex; align-items:center; gap:12px; margin:0;
}
.symbols img{
  width:48px; height:48px; object-fit:contain;
  flex:0 0 48px; background:#fff;
}
.symbols span{ font-size:13.5px; color:var(--muted); line-height:1.5; }

@media (max-width:760px){
  .symbols{ gap:12px 20px; }
  .symbols li{ flex:1 1 100%; }
  .symbols img{ width:42px; height:42px; flex-basis:42px; }
}

/* ==========================================================================
   Treatment protocol — numbered steps with paired imagery
   ========================================================================== */
.protocol{ counter-reset:pstep; list-style:none; margin:0; padding:0; }
.protocol > li{
  counter-increment:pstep;
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;
  padding:34px 0; border-top:1px solid var(--line);
}
.protocol > li:first-child{ border-top:2px solid var(--navy); }
.protocol .pcopy{ position:relative; padding-left:58px; }
.protocol .pcopy::before{
  content:counter(pstep,decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  width:42px; height:42px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.protocol h3{ font-size:19px; color:var(--navy); margin-bottom:10px; line-height:1.35; }
.protocol .plead{ font-size:15.5px; color:#444; }
.protocol ul{ margin:0; padding-left:1.2em; }
.protocol li ul li{ font-size:14.5px; color:var(--muted); margin-bottom:7px; }
.protocol li ul li strong{ color:var(--ink); }
.protocol .pshot img{ width:100%; border:1px solid var(--line); background:#fff; }
.protocol .pcap{
  margin:8px 0 0; font-size:12.5px; color:var(--muted); text-align:center;
}
.protocol .callout h3{ font-size:14px; margin-bottom:6px; }

@media (max-width:820px){
  .protocol > li{ grid-template-columns:1fr; gap:20px; padding:26px 0; }
  .protocol .pcopy{ padding-left:52px; }
  .protocol .pcopy::before{ width:38px; height:38px; font-size:13px; }
  .protocol h3{ font-size:17px; }
}

/* images are not draggable or long-press-savable; text stays fully selectable */
img{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }

/* ---------- Print ---------- */
@media print{
  .site-header, .site-footer, .btn-row, .breadcrumb, .hero, .hero-mobile{ display:none !important; }
  body{ color:#000; background:#fff; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; color:#444; }
  /* every printed page carries the notice */
  @page{ margin:16mm; }
  body::after{
    content:"© 2026 HANS KOREA CO.,Ltd. All rights reserved. www.nitibrush.com — Reproduction or redistribution without written permission is prohibited.";
    display:block; margin-top:14mm; padding-top:4mm; border-top:1px solid #999;
    font-size:9pt; color:#333;
  }
}

/* form hint under a field */
.field-hint{
  margin:6px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted);
}

/* distribution map */
.dist-map{ margin:26px 0 0; }
.dist-map img{ width:100%; height:auto; border:1px solid var(--line-soft); background:#fff; }
.dist-map figcaption{ text-align:left; max-width:70ch; margin-top:10px; }

/* MDR transition plan — timeline without images */
.mdr-plan > li{ grid-template-columns:1fr; }
.mdr-plan .pcopy h3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stage{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:2px; white-space:nowrap;
}
.stage-done{ background:#E4F2E7; color:#1F6B34; border:1px solid #BEDFC7; }
.stage-plan{ background:#EAF4FA; color:var(--blue-dark); border:1px solid #CFE5F1; }

/* a milestone still ahead of us reads as outlined, not filled */
.timeline > li.tl-future::before{ background:#fff; border:2px solid var(--blue); }
.timeline > li.tl-future .tl-year{ color:var(--muted); }
.timeline > li.tl-future .stage{ margin-left:8px; vertical-align:2px; }

/* ==========================================================================
   Audience switch — clinician (default) vs dental industry.
   One set of content; only order and a few lines of copy change.
   Search engines see the source (clinician) order; nothing is removed.
   ========================================================================== */
main{ display:flex; flex-direction:column; }
main > *{ width:100%; }

/* industry-only blocks are folded away unless the visitor has chosen industry */
.for-industry{ display:none; }
body[data-audience="industry"] .for-industry{ display:block; }
body[data-audience="industry"] .for-clinician{ display:none; }

/* home page order for the industry visitor: the case for the company first */
body[data-audience="industry"] #h-hero      { order:0; }
body[data-audience="industry"] #h-reference { order:3; }
body[data-audience="industry"] #h-evidence  { order:4; }
body[data-audience="industry"] #h-regulatory{ order:5; }
body[data-audience="industry"] #h-origin    { order:6; }
body[data-audience="industry"] #h-partners  { order:7; }
body[data-audience="industry"] #h-models    { order:8; }
body[data-audience="industry"] #h-surface   { order:9; }
body[data-audience="industry"] #h-protocol  { order:10; }
body[data-audience="industry"] #h-founder   { order:11; }
body[data-audience="industry"] #h-authentic { order:12; }
body[data-audience="industry"] #h-problem   { order:13; }

/* header switch */
.audience-switch{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.audience-switch .audience-label{ margin-right:2px; }
.audience-switch button{
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--navy);
  transition:background .15s, color .15s, border-color .15s;
}
.audience-switch button:hover{ border-color:var(--blue); color:var(--blue); }
.audience-switch button[aria-pressed="true"]{
  background:var(--blue); border-color:var(--blue); color:#fff;
}

/* first-visit bar */
.audience-bar{ background:#EAF4FA; border-bottom:1px solid #CFE5F1; }
.audience-bar[hidden]{ display:none; }
.audience-bar .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:12px; padding-bottom:12px; font-size:14px; color:var(--navy);
}
.audience-bar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.audience-bar .btn{ padding:8px 14px; font-size:13px; }
.audience-dismiss{
  font:inherit; font-size:20px; line-height:1; cursor:pointer;
  background:none; border:0; color:var(--muted); padding:4px 8px;
}
.audience-dismiss:hover{ color:var(--navy); }

@media (max-width:900px){
  .header-top{ flex-wrap:wrap; }
  .audience-switch{ flex-basis:100%; justify-content:flex-start; }
  .audience-switch .audience-label{ display:none; }
}

/* one-line outcome under each literature entry */
.article-result{
  margin:10px 0 8px; padding:10px 14px; border-left:3px solid var(--blue);
  background:var(--bg-soft); font-size:14px; line-height:1.6;
}
.article-result strong{ color:var(--blue-dark); }