/* ILJIN TOOL TECH — homepage draft 2 (reference: axiom-power).  Tokens are shared with css/lab.css — see _SPEC.md. */
:root{
  --bg:#0b0c0d; --bg-1:#111315; --bg-2:#16181b; --bg-3:#1c1f22;
  --line:#2e3236; --line-soft:rgba(243,241,236,.08);
  --tx:#f3f1ec; --tx-2:#a5a29a; --tx-3:#8e8b83;   /* tx-3: ≥4.5:1 on bg … bg-3 for small text */
  --red:#d6112e; --red-2:#b30e26;
  --gold:#d9a21b; --coolant:#6fb7e0;
  /* gutter / inset: fixed up to 1440, then scale with the viewport like the reference (no max-width) */
  --radius:8px; --gutter:clamp(42px,2.917vw,72px); --inset:clamp(18px,1.25vw,24px);
  --f-sans:'Archivo','Pretendard Variable','Pretendard','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Hangul must reach a proportional font before the generic 'monospace' (which Chrome resolves to GulimChe / MS Gothic) */
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,'Pretendard Variable','Pretendard','Noto Sans KR',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:56px;
}
html[data-lang="en"]{ --f-sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; }   /* no Hangul face: en pages do not fetch Pretendard */
html[data-lang="ja"]{ --f-sans:'Archivo','Noto Sans JP','Hiragino Sans','Yu Gothic UI','Yu Gothic','Meiryo',system-ui,sans-serif; --f-mono:'IBM Plex Mono',Consolas,'Noto Sans JP','Hiragino Sans','Yu Gothic','Meiryo',sans-serif; }
html[data-lang="zh"]{ --f-sans:'Archivo','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif; --f-mono:'IBM Plex Mono',Consolas,'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--inset) + 12px); }
body{ margin:0; background:var(--bg); color:var(--tx); font-family:var(--f-sans); font-size:15px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; }
img,video,svg{ display:block; max-width:100%; }
html[data-lang="ko"] body{ word-break:keep-all; overflow-wrap:break-word; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
/* red rings vanish on red surfaces (1:1): cream there, and on the red buttons */
.foot :focus-visible, .statement :focus-visible, .btn-red:focus-visible, .skip:focus-visible{ outline-color:var(--tx); }
::selection{ background:var(--red); color:var(--tx); }
[hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:var(--inset); top:-60px; z-index:100; background:var(--red); padding:10px 14px; border-radius:6px; transition:top .2s; }
.skip:focus{ top:var(--inset); }

.wrap{ max-width:none; margin:0 auto; padding:0 var(--gutter); }
.section{ padding:112px 0; position:relative; }

/* ---------- type (sizes = the 1440 design, growing with the viewport above it) ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:clamp(12px,.833vw,16px); font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-2); margin:0 0 22px; }
.eyebrow::before{ content:''; width:6px; height:6px; background:var(--red); flex:none; }
.h2{ font-size:clamp(32px,3vw,64px); font-weight:400; line-height:1.02; letter-spacing:-.02em; margin:0; }
.h2 .l2{ display:block; color:var(--tx-2); }
html[data-lang="ko"] .h2, html[data-lang="ja"] .h2, html[data-lang="zh"] .h2{ line-height:1.14; }
.lead{ color:var(--tx-2); font-weight:300; font-size:clamp(15.4px,1.07vw,20px); line-height:1.35; max-width:clamp(330px,23vw,440px); margin:28px 0 0; }
html[data-lang="ko"] .lead, html[data-lang="ja"] .lead, html[data-lang="zh"] .lead{ line-height:1.6; font-weight:400; }
/* no one-word last lines; headings balanced */
.hero h1, .h2, .pcard h3, .foot h2, .card4 h3{ text-wrap:balance; }
#statementText, .how-quote, .lead, .hero-desc, .card4 p, .pcard p, .stat p{ text-wrap:pretty; }
html[lang="ja"] :is(.hero h1, .h2, .pcard h3, .foot h2, .card4 h3){ word-break:auto-phrase; }
.mono{ font-family:var(--f-mono); }
.tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-2); }
em{ font-style:normal; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:12px; height:34px; padding:0 5px 0 14px; border-radius:6px; font-size:13.5px; font-weight:500; letter-spacing:-.005em; white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.btn .ar{ width:24px; height:24px; border-radius:4px; display:grid; place-items:center; flex:none; transition:transform .25s var(--ease); }
.btn .ar svg{ width:12px; height:12px; }
.btn:hover .ar{ transform:translateX(2px); }
.btn:active{ transform:scale(.98); }
.btn-red{ background:var(--red); color:var(--tx); }
.btn-red .ar{ background:var(--bg); color:var(--tx); }
.btn-red:hover{ background:#c20f2a; }   /* darker, so the cream label stays ≥4.5:1 */
.btn-light{ background:var(--tx); color:var(--bg); }
.btn-light .ar{ background:var(--bg); color:var(--tx); }
.btn-light:hover{ background:#fff; }
.btn-dark{ background:var(--bg); color:var(--tx); height:40px; font-size:14px; }
.btn-dark .ar{ background:var(--tx); color:var(--bg); }
.btn-dark:hover{ background:#000; }
.link-mono{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:clamp(12px,.833vw,16px); letter-spacing:.14em; text-transform:uppercase; color:var(--tx-2); transition:color .18s; }
.link-mono svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.link-mono:hover{ color:var(--tx); }
.link-mono:hover svg{ transform:translateX(3px); }

/* ---------- header ---------- */
.header{ position:fixed; z-index:50; top:var(--inset); left:var(--inset); right:var(--inset); height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 11px 0 12px; border:1px solid var(--line-soft); border-radius:var(--radius); background:rgba(17,19,21,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); transition:background-color .3s, border-color .3s; }
.header.is-scrolled{ background:rgba(17,19,21,.86); border-color:var(--line); }
.brand{ display:flex; align-items:center; height:100%; flex:none; }
.brand img{ height:36px; width:auto; }
.nav{ display:flex; gap:34px; font-size:clamp(14px,.972vw,18px); }
.nav a{ position:relative; padding:6px 0; color:var(--tx); opacity:.92; transition:opacity .18s; }
.nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav a:hover{ opacity:1; }
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); }
.nav .ext{ display:inline-flex; align-items:center; gap:6px; }
.nav .ext svg{ width:11px; height:11px; opacity:.7; }
/* 제품 dropdown: hover or keyboard focus opens the product families; the 제품 link itself still scrolls to #products */
.nav-dd{ position:relative; display:flex; align-items:center; }
.nav .nav-dd-btn{ display:inline-flex; align-items:center; gap:6px; }
.nav-dd-btn svg{ width:10px; height:10px; opacity:.7; transition:transform .25s var(--ease); }
.nav-dd:hover .nav-dd-btn svg, .nav-dd:focus-within .nav-dd-btn svg{ transform:rotate(180deg); }
.nav-dd-menu{ position:absolute; left:-14px; top:100%; min-width:210px; padding:6px; margin-top:12px; display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius);
  opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.nav-dd-menu::before{ content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }   /* bridge the gap so the menu stays open on the way down */
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.nav .nav-dd-menu a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 10px; border-radius:5px; font-size:14px; white-space:nowrap; color:var(--tx-2); opacity:1; transition:background-color .15s, color .15s; }
.nav .nav-dd-menu a::after{ content:none; }
.nav .nav-dd-menu a:hover, .nav .nav-dd-menu a:focus-visible{ background:var(--bg-2); color:var(--tx); }
.nav-dd-new i{ font-style:normal; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--red); }
.nav .nav-dd-menu .nav-dd-all{ margin-top:4px; padding-top:11px; border-top:1px solid var(--line); border-radius:0 0 5px 5px; font-size:13px; color:var(--tx-3); }
/* 제품 찾기: the one nav item that leaves the page, set as a quiet pill */
.nav .nav-find{ display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 10px; border:1px solid var(--line); border-radius:999px; transition:border-color .18s, opacity .18s; }
.nav .nav-find::after{ content:none; }
.nav .nav-find:hover{ border-color:#454a50; }
.nav-find svg{ width:13px; height:13px; opacity:.8; }
.head-r{ display:flex; align-items:center; gap:10px; flex:none; }
.lang{ position:relative; }
.lang-btn{ height:34px; padding:0 10px; display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--tx-2); border-radius:6px; transition:color .18s, background-color .18s; }
.lang-btn:hover,.lang-btn[aria-expanded="true"]{ color:var(--tx); background:var(--line-soft); }
.lang-btn svg{ width:10px; height:10px; transition:transform .25s var(--ease); }
.lang-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.lang-menu{ position:absolute; right:0; top:calc(100% + 10px); min-width:150px; padding:6px; margin:0; list-style:none; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius);
  opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.lang-menu.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.lang-menu button{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 10px; border-radius:5px; font-size:14px; text-align:left; color:var(--tx-2); }
.lang-menu button span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--tx-3); }
.lang-menu button:hover{ background:var(--bg-2); color:var(--tx); }
.lang-menu button[aria-current="true"]{ color:var(--tx); }
.lang-menu button[aria-current="true"] span{ color:var(--red); }
.burger{ display:none; width:36px; height:34px; border-radius:6px; place-items:center; }
.burger span{ display:block; width:16px; height:1.5px; background:var(--tx); box-shadow:0 -5px 0 var(--tx), 0 5px 0 var(--tx); }

.mnav{ position:fixed; inset:0; z-index:60; background:var(--bg); padding:calc(var(--header-h) + var(--inset) + 28px) var(--gutter) 32px; display:flex; flex-direction:column; gap:6px;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), visibility 0s linear .25s; }
.mnav.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s var(--ease); }
.mnav > *{ flex-shrink:0; }   /* when the menu scrolls (landscape) its items keep their height */
.mnav a{ font-size:30px; letter-spacing:-.02em; padding:8px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.mnav a small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--tx-3); }
.mnav-x{ position:absolute; top:calc(var(--inset) + 11px); right:calc(var(--inset) + 11px); width:36px; height:34px; display:grid; place-items:center; }
.mnav-x svg{ width:18px; height:18px; }
.mnav .btn{ margin-top:22px; align-self:flex-start; height:40px; }
.mnav-sub{ display:flex; flex-wrap:wrap; gap:6px 8px; padding:12px 0 14px; border-bottom:1px solid var(--line); }
.mnav .mnav-sub a{ font-size:14px; letter-spacing:0; padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--tx-2); }

/* ---------- intro wordmark ---------- */
.intro{ position:relative; height:100svh; min-height:560px; max-height:1200px; background:#0b0c0d; }
.intro-wm{ position:absolute; inset:0; }

/* ---------- hero ---------- */
/* the hero is the second screen now: hold its entrance until it scrolls into view (site.js adds .is-in) */
.js .hero:not(.is-in) h1 .ln > span, .js .hero:not(.is-in) .hero-desc, .js .hero:not(.is-in) .hero-card{ animation-play-state:paused; }
.hero{ position:relative; height:100svh; min-height:680px; max-height:1200px; overflow:hidden; isolation:isolate; }
.hero-media{ position:absolute; inset:0; z-index:-2; background:#0b0c0d center/cover no-repeat; }
.hero-media video{ width:100%; height:100%; object-fit:cover; object-position:72% 50%; }
.hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,12,13,.82) 0%, rgba(11,12,13,.5) 34%, rgba(11,12,13,0) 62%),
             linear-gradient(0deg, rgba(11,12,13,.95) 0%, rgba(11,12,13,0) 32%),
             linear-gradient(180deg, rgba(11,12,13,.55) 0%, rgba(11,12,13,0) 22%); }
.hero-inner{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:42px; }
.hero h1{ margin:0; position:absolute; top:46%; transform:translateY(-50%); font-weight:400; font-size:clamp(52px,6.8vw,140px); line-height:1; letter-spacing:-.03em; }
html[data-lang="ko"] .hero h1, html[data-lang="ja"] .hero h1, html[data-lang="zh"] .hero h1{ line-height:1.1; letter-spacing:-.035em; font-weight:500; }
html[data-lang="ko"] .hero h1{ font-weight:400; }
/* ja / zh lines run longer than ko / en and would cross the BTA head in the video on the right */
@media (min-width:761px){
  html[data-lang="ja"] .hero h1{ max-width:40vw; word-break:keep-all; }   /* wraps after 、: 深い穴も、 / まっすぐ、 / 正確に。 */
  html[data-lang="zh"] .hero h1{ font-size:clamp(48px,5.8vw,120px); }
}
/* portrait tablets: the video fills the height, so the head sits mid-screen — drop the headline to the bottom like phones */
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .hero-media video{ object-position:70% 42%; }
  .hero::before{ background:linear-gradient(0deg, rgba(11,12,13,.97) 0%, rgba(11,12,13,.6) 34%, rgba(11,12,13,0) 58%), linear-gradient(180deg, rgba(11,12,13,.55) 0%, rgba(11,12,13,0) 22%); }
  .hero h1{ position:static; transform:none; margin-bottom:34px; }
  html[data-lang="ja"] .hero h1{ max-width:none; }
}
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero h1 .ln > span{ display:block; transform:translateY(105%); animation:rise 1.1s var(--ease) forwards; }
.hero h1 .ln:nth-child(2) > span{ color:var(--tx-2); animation-delay:.12s; }
@keyframes rise{ to{ transform:none; } }
.hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.hero-desc{ max-width:clamp(360px,25vw,480px); color:var(--tx-2); font-size:clamp(15.4px,1.07vw,20px); font-weight:300; line-height:1.4; margin:0; opacity:0; animation:fadeUp .9s .45s var(--ease) forwards; }
html[data-lang="ko"] .hero-desc, html[data-lang="ja"] .hero-desc, html[data-lang="zh"] .hero-desc{ font-weight:400; line-height:1.65; }
.hero-card{ width:350px; display:grid; grid-template-columns:1fr 88px; gap:14px; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(17,19,21,.66);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; animation:fadeUp .9s .6s var(--ease) forwards; transition:border-color .2s; }
.hero-card:hover{ border-color:#454a50; }
.hero-card .tag{ font-size:11px; display:flex; align-items:center; gap:7px; }
.hero-card .tag::before{ content:''; width:5px; height:5px; background:var(--red); }
.hero-card p{ margin:8px 0 10px; font-size:14px; line-height:1.35; font-weight:500; letter-spacing:-.005em; }
html[data-lang="ko"] .hero-card p{ line-height:1.5; }
.hero-card .more{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--tx-2); display:flex; align-items:center; gap:8px; text-transform:uppercase; }
.hero-card .more svg{ width:12px; height:12px; transition:transform .25s var(--ease); }
.hero-card:hover .more svg{ transform:translateX(3px); }
.hero-card img{ width:88px; height:100%; min-height:88px; object-fit:cover; border-radius:5px; filter:brightness(.75) saturate(.7); }
/* z-index: .hero-inner comes later in the DOM and would otherwise take the clicks */
.hero-pause{ position:absolute; z-index:2; top:calc(var(--header-h) + var(--inset) + 18px); right:var(--inset); width:40px; height:40px; border-radius:6px; display:grid; place-items:center; background:rgba(17,19,21,.5); border:1px solid var(--line-soft); color:var(--tx); transition:background-color .2s; }
.hero-pause:hover{ background:rgba(17,19,21,.85); }
.hero-pause svg{ width:14px; height:14px; }
.hero-pause .i-play{ display:none; }
.hero-pause.is-paused .i-play{ display:block; }
.hero-pause.is-paused .i-pause{ display:none; }
/* phones (2026-09-28, owner: "the 700 is cut off"): a 16:9 film covering a tall portrait screen is blown up ~3.8x, so only the
   middle of the head shows. Here the film gets its own band instead: 105vw tall (so 187vw wide), shifted so the head (69 % across
   the frame) sits mid-screen at ~82vw wide, with its top and bottom edges faded into the page (short phones: at most half the screen tall). The poster background goes too. */
@media (max-width:760px){
  .hero-media{ background-image:none !important; }
  .hero-media video{ --hv:min(105vw, 50svh);   /* short phones: capped by height, so the head stays clear of the heading */
    position:absolute; left:50%; top:max(calc(var(--header-h) + var(--inset)), calc(36svh - var(--hv) * .46)); width:calc(var(--hv) * 16 / 9); max-width:none; height:var(--hv); object-fit:cover;
    transform:translateX(-69%); -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 76%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 76%, transparent 100%); }
}
/* touch devices (2026-09-28, owner: scrolling stutters on the phone): no frosted glass. A backdrop blur over the playing film,
   the 3D viewer or any scrolling content is re-rendered every frame; near-solid panels look the same on a phone. */
@media (hover:none) and (pointer:coarse){
  :is(.header, .hero-card, .pcard-top .ico, .play, .lab-spec, .lab-explode){ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .header, .header.is-scrolled{ background:rgba(17,19,21,.94); }
  .hero-card{ background:rgba(17,19,21,.9); }
  .pcard-top .ico{ background:rgba(17,19,21,.9); }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- statement / #company ----------
   2026-09-28 (owner, option B): a short headline + the statement at reading size beside the metal logo, and the journey
   below carries the story in four columns (the earlier display-size statement read too large on small monitors;
   old rules in _build/backup_company_0928/site.css).
   --q (0 … 1) = the journey's own progress, so its rail draws while it is on screen (site.js writes it; without JS it stays 1).
   The logo and the copy are not scroll-linked: they play once, time-based, when they are in view (motion block below). */
.statement{ --q:1; --ex:cubic-bezier(.16,1,.3,1); margin:0 var(--inset); border-radius:14px; background:#0b0c0d; border:1px solid var(--line); color:var(--tx);
  position:relative; overflow:hidden; padding:clamp(56px,6vw,110px) 0 clamp(40px,3.6vw,64px); }
.statement .wrap{ width:100%; position:relative; z-index:1; }
/* text inside the panel sits on the page's gutter line, not gutter + panel inset */
@media (min-width:761px){ .statement .wrap, .foot .wrap{ padding-left:calc(var(--gutter) - var(--inset)); padding-right:calc(var(--gutter) - var(--inset)); } }
.statement .st-wrap{ display:grid; row-gap:clamp(36px,3.6vw,68px); }

/* head: eyebrow left, founding line right */
.st-head{ display:flex; justify-content:space-between; align-items:center; gap:24px; }
.statement .st-head .eyebrow{ margin:0; color:var(--tx-2); }
.statement .eyebrow::before{ background:var(--red); }
.st-meta{ margin:0; font-family:var(--f-mono); font-size:clamp(12px,.833vw,16px); letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); white-space:nowrap; }

/* body: the logo on the left, headline + statement on the right */
.st-body{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(40px,5vw,96px); align-items:center; }
.st-year{ position:relative; margin:0; line-height:0; user-select:none; pointer-events:none; }
.st-emb{ display:block; width:clamp(240px,22vw,440px); height:auto; }
/* its one light sweep (motion block below): a band masked to the logo's own shape, so it only crosses the metal */
.st-year::after{ content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%) 115% 0 / 250% 100% no-repeat;
  -webkit-mask:url(../assets/img/logo-metal-900.webp) left top / contain no-repeat;
  mask:url(../assets/img/logo-metal-900.webp) left top / contain no-repeat; }
.st-h{ margin:0; font-size:clamp(28px,2.5vw,48px); font-weight:500; line-height:1.28; letter-spacing:-.025em; text-wrap:balance; }
.st-h > span{ display:block; }
.st-h .l2{ color:var(--tx-2); }
.statement #statementText{ margin:clamp(18px,1.4vw,26px) 0 0; max-width:44em; font-size:clamp(15.5px,1.02vw,19px); line-height:1.75; letter-spacing:-.005em; font-weight:400; color:var(--tx-2); }
/* key phrases (i18n 'stmt.hl'): set in the text colour, a little heavier */
.statement .hl{ color:var(--tx); font-weight:500; }
/* ja / zh: the words come from Intl.Segmenter, so keep each one whole; ja also keeps ー and small kana off a line start
   and breaks between phrases, never inside a word or before a particle */
html:is([data-lang="ja"],[data-lang="zh"]) .statement .w{ white-space:nowrap; }
html[data-lang="ja"] .statement{ line-break:strict; }
html[data-lang="ja"] .statement #statementText, html[data-lang="ja"] .st-h, html[data-lang="ja"] .st-d{ word-break:auto-phrase; }

/* the journey: four columns under one rail; each node lights and its stretch of rail draws as --q passes its --at */
.st-path{ list-style:none; margin:clamp(12px,1vw,20px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.st-step{ --lit:clamp(0, calc((var(--q) - var(--at)) * 30 + 1), 1); --seg:clamp(0, calc((var(--q) - var(--at)) / .25), 1);
  position:relative; padding:clamp(24px,2vw,36px) clamp(18px,1.6vw,30px) 0; border-left:1px solid var(--line); }
.st-step:first-child{ padding-left:0; border-left:0; }
.st-step::before, .st-step::after{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); }
.st-step::after{ background:var(--tx-2); transform-origin:0 50%; transform:scaleX(var(--seg)); transition:transform .3s linear; }
/* the last stretch runs on and fades out: the development does not end */
.st-step.is-last::before{ background:linear-gradient(90deg, var(--line), transparent); }
.st-step.is-last::after{ background:linear-gradient(90deg, var(--tx-2), transparent 85%); }
.st-node{ position:absolute; z-index:1; top:-4px; left:-5px; width:9px; height:9px; border:1px solid var(--tx-3); background:var(--bg); }
.st-step:first-child .st-node{ left:0; }
.st-node::after{ content:''; position:absolute; inset:-1px; background:var(--tx); opacity:var(--lit); transition:opacity .3s linear; }
.is-origin .st-node, .is-origin .st-node::after{ border-color:var(--red); background:var(--red); }
.st-k, .st-t, .st-d{ display:block; opacity:calc(.45 + .55 * var(--lit)); transition:opacity .3s linear; }
.st-k{ font-family:var(--f-mono); font-size:12px; line-height:1.35; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }
.st-t{ margin-top:14px; font-size:clamp(19px,1.35vw,25px); font-weight:500; line-height:1.3; letter-spacing:-.015em; color:var(--tx); }
.st-d{ margin-top:10px; font-size:clamp(14px,.92vw,17px); line-height:1.65; color:var(--tx-2); text-wrap:pretty; }

/* tablets: the labels track a little tighter */
@media (min-width:761px) and (max-width:1180px){
  .st-k{ letter-spacing:.1em; }
}
/* narrow tablets (iPad portrait): the journey runs in two rows */
@media (min-width:761px) and (max-width:1019px){
  .st-path{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; }
  .st-step:nth-child(3){ padding-left:0; border-left:0; }
  .st-step:nth-child(3) .st-node{ left:0; }
}
@media (max-width:760px){
  .statement{ padding:56px 0 64px; }
  .statement .st-wrap{ row-gap:36px; }
  .st-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .statement .st-meta{ font-size:12px; letter-spacing:.12em; }
  .st-body{ grid-template-columns:1fr; row-gap:28px; }
  .st-emb{ width:min(100%, 360px); }
  .st-h{ font-size:26px; }
  .statement #statementText{ font-size:16px; }
  /* the journey turns vertical: rail down the left edge */
  .st-path{ grid-template-columns:1fr; margin-top:0; }
  .st-step, .st-step:first-child{ padding:0 0 30px 32px; border-left:0; }
  .st-step.is-last{ padding-bottom:0; }
  .st-step::before, .st-step::after{ top:14px; bottom:-2px; left:4px; right:auto; width:1px; height:auto; }
  .st-step::after{ transform-origin:50% 0; transform:scaleY(var(--seg)); }
  .st-step.is-last::before{ background:linear-gradient(180deg, var(--line), transparent); }
  .st-step.is-last::after{ background:linear-gradient(180deg, var(--tx-2), transparent 85%); }
  .st-node, .st-step:first-child .st-node{ top:3px; left:0; }
  .st-t{ margin-top:8px; font-size:19px; }
  .st-d{ margin-top:6px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .statement{ --q:1 !important; }
}
/* motion, once and time-based: site.js adds .is-in to .st-year / .st-copy when each is really in view.
   Only where motion is welcome: without JS, with reduced motion and in print it all just stands.
   --i = word index, --n = last index, --st = stagger (≤ 35 ms, capped so every language sets in ~1.8 s), all from site.js. */
@media screen and (prefers-reduced-motion:no-preference){
  /* the logo: rises out of focus into place, then one light sweeps across the metal, left to right */
  .js .st-emb{ transition:opacity 1.2s var(--ex), transform 1.6s var(--ex), filter 1.2s var(--ex); }
  .js .st-year:not(.is-in) .st-emb{ opacity:0; transform:translateY(12px) scale(.97); filter:blur(10px); }
  .js .st-year.is-in::after{ animation:st-shine 1.5s cubic-bezier(.45,0,.25,1) 1s both; }
  @keyframes st-shine{ from{ opacity:1; background-position:115% 0; } to{ opacity:1; background-position:-15% 0; } }
  /* the headline rises in, then the statement sets itself word by word: up from under the line, out of focus into crisp */
  .js .st-h > span{ transition:opacity 1s var(--ex), transform 1s var(--ex), filter 1s var(--ex); }
  .js .st-h > .l2{ transition-delay:.12s; }
  .js .st-copy:not(.is-in) .st-h > span{ opacity:0; transform:translateY(.5em); filter:blur(8px); }
  .js .st-copy:not(.is-in) [data-split]:not(.is-split){ visibility:hidden; }   /* the unsplit text never flashes */
  .js .statement .w{ position:relative; transition:opacity .9s var(--ex), top .9s var(--ex), filter .9s var(--ex);
    transition-delay:calc(.35s + var(--i, 0) * var(--st, 35ms)); }
  .js .st-copy:not(.is-in) .w{ opacity:0; top:.55em; filter:blur(9px); }
}

/* ---------- why ---------- */
.why-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.42fr); gap:48px; align-items:start; }
.cards4{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.card4{ padding:28px 28px 32px; min-height:245px; display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background-color .3s; }
.card4:nth-child(2n){ border-right:0; }
.card4:nth-last-child(-n+2){ border-bottom:0; }
.card4-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.ico{ width:42px; height:42px; border:1px solid var(--line); border-radius:6px; display:grid; place-items:center; color:var(--red); background:var(--bg-1); flex:none; }
.ico svg{ width:18px; height:18px; }
.card4 .tag{ font-size:13px; margin-top:10px; }
.card4 h3{ margin:52px 0 0; font-size:clamp(21px,1.46vw,28px); font-weight:500; line-height:1.2; letter-spacing:-.01em; max-width:clamp(300px,21vw,400px); }
.card4 p{ margin:16px 0 0; color:var(--tx-2); font-size:clamp(14px,.972vw,18.7px); line-height:1.35; font-weight:300; max-width:clamp(280px,19.5vw,380px); }
html[data-lang="ko"] .card4 p, html[data-lang="ja"] .card4 p, html[data-lang="zh"] .card4 p{ line-height:1.6; font-weight:400; }

/* ---------- how ---------- */
.how-top{ display:flex; justify-content:space-between; align-items:flex-start; }
/* two open rows on one grid: 01 BTA (STS | EJECTOR), 02 gundrilling (indexable | reconditioning).
   Rows are ruled like the applications row below: 96px, hairline, 34px */
.how-block{ margin-top:12px; }
.how-block + .how-block{ margin-top:96px; padding-top:34px; border-top:1px solid var(--line); }
.how-count{ display:flex; gap:14px; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--tx-2); margin:0 0 20px; }
.how-n{ color:var(--tx); flex:none; }
.how-diag{ border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--bg-1),var(--bg)); padding:14px; aspect-ratio:720/440; display:grid; place-items:center; overflow:hidden; }
@media (max-width:389px){ .how-diag{ padding:0; } }   /* small phones: the diagram needs every pixel so its labels stay ~12 px */
.how-diag svg{ width:100%; height:auto; font-family:var(--f-mono); }
html:not([data-lang="en"]) .how-diag svg{ font-family:var(--f-sans); }   /* labels are almost all Hangul / kana / hanzi: mono spaces open wide gaps */
.how-name{ margin:26px 0 2px; font-size:18px; font-weight:500; letter-spacing:-.01em; }
.how-sub{ margin:0; color:var(--tx-2); font-size:14px; }
.meta{ margin:18px 0 0; max-width:none; }
.meta div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; }
.meta dt{ color:var(--tx-3); text-transform:uppercase; }
.meta dd{ margin:0; color:var(--tx); text-align:right; }
.how-quote{ position:relative; isolation:isolate; margin:0; font-size:clamp(24px,2.55vw,52px); line-height:1.22; letter-spacing:-.018em; color:var(--tx-2); font-weight:400; }
html[data-lang="ko"] .how-quote, html[data-lang="ja"] .how-quote, html[data-lang="zh"] .how-quote{ line-height:1.45; letter-spacing:-.025em; }
.how-quote::before{ content:'\201C'; position:absolute; left:-4px; top:-.72em; font-size:3.2em; line-height:1; color:var(--bg-3); z-index:-1; font-family:Georgia,serif; }
.how-quote em{ color:var(--tx); }
/* each row: two columns side by side, same orientation, mirrored around a centre rule (they fade up via data-reveal) */
.pair{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(48px,5.6vw,112px); }
.pair::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line); }
.pair-quote{ margin:28px 0 0; font-size:clamp(18px,1.6vw,30px); line-height:1.35; }
html[data-lang="ko"] .pair-quote, html[data-lang="ja"] .pair-quote, html[data-lang="zh"] .pair-quote{ line-height:1.55; }
.pair-quote::before{ content:none; }
/* reconditioning: caveat under the quote, then the process film */
.how-note{ margin:20px 0 0; font-size:13px; line-height:1.6; color:var(--tx-3); }
.how-film{ margin-top:24px; color:var(--tx); }
.how-play{ width:30px; height:30px; border:1px solid var(--line); border-radius:6px; display:grid; place-items:center; flex:none; transition:border-color .18s, background-color .18s; }
.how-film .how-play svg{ width:11px; height:11px; }
.how-film:hover .how-play{ border-color:#50555b; background:var(--bg-1); }
.how-film:hover svg{ transform:none; }
.sq{ width:34px; height:34px; border:1px solid var(--line); border-radius:6px; display:grid; place-items:center; color:var(--tx); transition:border-color .18s, background-color .18s; }
.sq:hover{ border-color:#50555b; background:var(--bg-1); }
.sq svg{ width:14px; height:14px; }
.apps{ margin-top:96px; border-top:1px solid var(--line); padding-top:34px; display:flex; align-items:center; gap:40px; overflow:hidden; }
.apps-l{ display:flex; align-items:center; gap:14px; flex:none; }
.apps .eyebrow{ margin:0; flex:none; }
.apps-pause{ width:28px; height:28px; }
.apps-pause svg{ width:11px; height:11px; }
.apps-pause .i-play, .apps.paused .apps-pause .i-pause{ display:none; }
.apps.paused .apps-pause .i-play{ display:block; }
.marquee{ flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width:max-content; animation:marq 48s linear infinite; }
.marquee:hover .marquee-track, .apps.paused .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-size:22px; letter-spacing:-.01em; color:var(--tx-3); padding:0 26px; white-space:nowrap; display:flex; align-items:center; gap:52px; }
.marquee-track span::after{ content:''; width:5px; height:5px; background:var(--line); transform:rotate(45deg); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- products ----------
   2026-09-28 (owner, option B): the heading runs across the top (lead lines up with the cards), and the sticky index
   below names each family in the page language with a thumbnail and its range — the old 12px mono list was hard to read */
.prod-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(685px,1.16fr); gap:48px; align-items:end; margin-bottom:clamp(40px,3.6vw,64px); }
.prod-head .lead{ margin:0; max-width:34em; }
.prod-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(685px,1.16fr); gap:48px; align-items:start; }   /* cards never under 685px (1181-1400): narrower, the fixed-size tag and copy run into the renders; wider squeezes the ja heading */
.plist{ position:sticky; top:calc(var(--header-h) + var(--inset) + 24px); container-type:inline-size; }   /* fills its column; wide enough, each row also shows its one-line pitch (2026-09-28: the gap before the cards read as empty) */
.plist-g{ margin:20px 0 8px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; color:var(--tx-3); text-transform:uppercase; }
.plist-g:first-child{ margin-top:0; }
.plist a{ position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; column-gap:14px; padding:6px 14px 6px 8px;
  border:1px solid transparent; border-radius:8px; color:var(--tx-2); transition:background-color .2s, border-color .2s, color .2s; }
.plist a + a{ margin-top:4px; }
.plist a:hover{ background:var(--bg-1); color:var(--tx); }
.plist a.is-active{ background:var(--bg-2); border-color:var(--line); color:var(--tx); }
.plist a::before{ content:''; position:absolute; left:-1px; top:12px; bottom:12px; width:3px; border-radius:2px; background:var(--red); transform:scaleY(0); transition:transform .3s var(--ease); }
.plist a.is-active::before{ transform:none; }
.plist-th{ width:72px; height:46px; border-radius:5px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(ellipse 80% 80% at 60% 45%, #24282c, #0d0e10); transition:box-shadow .2s; }
.plist-th img{ width:100%; height:100%; object-fit:cover; }
.plist-th.cut img{ object-fit:contain; padding:3px; }
.plist-th.txt{ font-size:15px; font-weight:600; letter-spacing:.04em; color:var(--tx-2); }
.plist a.is-active .plist-th{ box-shadow:0 0 0 1px #454a50; }
.plist-nm{ font-size:clamp(16px,1.1vw,19px); font-weight:500; line-height:1.25; letter-spacing:-.01em; }
.plist-en{ display:block; margin-top:3px; font-family:var(--f-mono); font-size:10.5px; font-weight:400; letter-spacing:.12em; color:var(--tx-3); text-transform:uppercase; }
html[data-lang="en"] .plist-en{ display:none; }   /* en: the name already says it */
.plist-rg{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; color:var(--tx-3); white-space:nowrap; text-align:right; transition:color .2s; }
.plist a.is-active .plist-rg{ color:var(--tx-2); }
.plist-tag{ display:none; font-size:clamp(13.5px,.85vw,16px); line-height:1.4; color:var(--tx-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s; }
.plist a.is-active .plist-tag, .plist a:hover .plist-tag{ color:var(--tx-2); }
@container (min-width:680px){
  .plist a{ grid-template-columns:72px minmax(150px,.8fr) minmax(0,1.25fr) 7.5rem; }
  .plist-tag{ display:block; }
}
.pcards{ display:grid; gap:14px; }
.pcard{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:1.46; min-height:0; isolation:isolate;   /* a min-height here forces a 613px min width via the ratio (8px sideways scroll at 1181–1190) */ background:radial-gradient(ellipse 70% 70% at 64% 44%, #24282c 0%, #15181b 52%, #0d0e10 100%); transition:border-color .25s; }
.pcard:hover{ border-color:#454a50; }
.pcard-img{ position:absolute; inset:0; z-index:-1; }
.pcard-img img{ width:100%; height:100%; object-fit:cover; }
/* bright catalogue cut-outs graded down to sit with the dark studio renders */
.pcard-img.cut img{ object-fit:contain; padding:8% 5% 30% 30%; filter:brightness(.78) contrast(1.12) saturate(.8) drop-shadow(0 28px 34px rgba(0,0,0,.55)); }
/* our own studio renders (same rig as the full-bleed cards) keep their grade: shadow only */
.pcard-img.cut.render img{ filter:drop-shadow(0 28px 34px rgba(0,0,0,.55)); }
@media (min-width:761px){   /* larger cut-outs (owner, 2026-09-26): per-card room, measured clear of tag / icon / copy at 768–1920 in ko·en·ja·zh */
  .pcard-img.cut img{ object-position:100% 50%; }
  #p-milling .pcard-img.cut img{ padding:3% 2% 20% 10%; }
  #p-gundrill .pcard-img.cut img{ padding:9% 2% 16% 6%; }
  #p-indexable .pcard-img.cut img{ padding:8% 2% 15% 9%; }
}
.pcard::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(0deg, rgba(11,12,13,.92) 0%, rgba(11,12,13,.55) 30%, rgba(11,12,13,0) 58%); }
.pcard-top{ position:absolute; top:28px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:flex-start; }
.pcard-top .ico{ background:rgba(17,19,21,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.pcard-top .tag{ margin-top:12px; font-size:11px; }
.pcard-body{ position:absolute; left:28px; right:28px; bottom:26px; }
.pcard h3{ margin:0; font-size:clamp(22px,1.53vw,30px); font-weight:500; letter-spacing:-.012em; line-height:1.22; max-width:430px; }
.pcard h3 small{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--tx-2); font-weight:400; text-transform:uppercase; margin-bottom:10px; }
.pcard p{ margin:12px 0 0; color:var(--tx-2); font-size:clamp(14px,.972vw,18.7px); line-height:1.4; font-weight:300; max-width:clamp(440px,30.5vw,580px); }
html[data-lang="en"] .pcard h3 small{ display:none; }   /* en: the corner tag already names the family */
html[data-lang="ko"] .pcard p, html[data-lang="ja"] .pcard p, html[data-lang="zh"] .pcard p{ line-height:1.6; font-weight:400; }
.pcard-foot{ margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.pstat{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--tx-3); display:flex; align-items:baseline; gap:10px; text-transform:uppercase; }
.pstat b{ font-family:var(--f-sans); font-size:17px; letter-spacing:-.01em; color:var(--tx); font-weight:500; text-transform:none; }
.pstat > span{ white-space:nowrap; }   /* the long LINE-UP values must not break the label itself */
.pcard .link-mono{ color:var(--tx); }
.pcard-foot .pstat + .link-mono{ margin-left:auto; }   /* the links sit together on the right, the stat on the left */
/* 신제품 card: no photo yet, so the year and the new names are set as type */
.pcard-type{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; padding:max(9%,76px) 6% 0 0;   /* starts under the corner tag on tall phone cards */
  background:radial-gradient(ellipse 60% 70% at 72% 40%, rgba(214,17,46,.16) 0%, rgba(214,17,46,0) 70%); }
.pnew-yr{ font-family:var(--f-mono); font-size:clamp(80px,9.5vw,190px); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.2); }
.pnew-list{ max-width:72%; text-align:right; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; line-height:1.9; color:var(--tx-3); }
.pcard-new .ico{ color:var(--red); }

/* ---------- lab ---------- */
.lab-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end; margin-bottom:44px; }
.lab-head .lead{ max-width:420px; justify-self:end; margin:0; }

/* ---------- range ---------- */
.range-hero{ position:relative; min-height:min(900px,100svh); overflow:hidden; isolation:isolate; display:flex; align-items:flex-start; padding-top:130px; }
.range-media{ position:absolute; inset:0; z-index:-2; background:#0b0c0d center/cover no-repeat; }
.range-media video{ width:100%; height:100%; object-fit:cover; object-position:50% 70%; }
.range-hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,12,13,.9) 0%, rgba(11,12,13,.35) 36%, rgba(11,12,13,0) 60%, rgba(11,12,13,.85) 100%),
             linear-gradient(90deg, rgba(11,12,13,.7) 0%, rgba(11,12,13,0) 50%); }
.range-hero .wrap{ width:100%; }
.range-hero .h2{ font-size:clamp(46px,5.4vw,112px); letter-spacing:-.03em; }
html[data-lang="ko"] .range-hero .h2, html[data-lang="ja"] .range-hero .h2, html[data-lang="zh"] .range-hero .h2{ line-height:1.1; }
.range-hero .lead{ max-width:340px; }
.range-hero .btn{ margin-top:30px; }
.range-status{ position:absolute; right:var(--gutter); bottom:84px;   /* clears the ruler card, which overlaps the hero by 60px */
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--tx-3); }
.ruler{ margin-top:-60px; position:relative; z-index:1; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); padding:34px 36px 30px; }
.ruler-head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:26px; flex-wrap:wrap; }
.ruler-head h3{ margin:0; font-size:clamp(21px,1.46vw,28px); font-weight:500; letter-spacing:-.01em; }
.ruler-head p{ margin:0; color:var(--tx-3); font-size:13px; max-width:520px; }
.rl{ display:grid; grid-template-columns:230px minmax(0,1fr); }
.rl-axis{ position:relative; height:26px; grid-column:2; }
.rl-axis span{ position:absolute; top:0; transform:translateX(-50%); font-family:var(--f-mono); font-size:11px; color:var(--tx-3); letter-spacing:.06em; }
.rl-group{ grid-column:1 / -1; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--tx-3); text-transform:uppercase; padding:14px 0 6px; border-top:1px solid var(--line); }
.rl-label{ display:flex; align-items:baseline; gap:10px; padding:9px 12px 9px 0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-label .mono{ font-size:11px; letter-spacing:.1em; color:var(--tx-2); }
.rl-track{ position:relative; height:38px; }
.rl-track::before{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-soft); }
.rl-grid{ position:absolute; top:0; bottom:0; width:1px; background:var(--line-soft); }
.rl-bar{ position:absolute; top:50%; height:10px; margin-top:-5px; border-radius:2px; background:linear-gradient(90deg, var(--red-2), var(--red)); transform-origin:left center; transform:scaleX(0); transition:transform 1.1s var(--ease), filter .2s; }
.ruler.in .rl-bar{ transform:scaleX(1); }
.rl-bar::before,.rl-bar::after{ content:''; position:absolute; top:-5px; bottom:-5px; width:1px; background:var(--tx); opacity:.85; }
.rl-bar::before{ left:0; } .rl-bar::after{ right:0; }
.rl-val{ position:absolute; top:50%; transform:translateY(-50%); font-family:var(--f-mono); font-size:11px; color:var(--tx-2); letter-spacing:.04em; white-space:nowrap; padding-left:12px; opacity:0; transition:opacity .4s .7s; }
.ruler.in .rl-val{ opacity:1; }
.rl-row:hover .rl-bar{ filter:brightness(1.25); }

/* ---------- stats ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto; gap:14px; }
.stat{ background:var(--bg-1); border-radius:var(--radius); padding:34px 34px 36px; min-height:380px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.stat-top{ display:flex; flex-direction:column; gap:14px; }
.stat-top .num{ align-self:flex-end; }
.stat .tag{ display:flex; align-items:center; gap:8px; font-size:11px; margin-top:8px; }
.stat .tag::before{ content:''; width:5px; height:5px; background:var(--red); }
.num{ font-size:clamp(64px,7.2vw,150px); font-weight:300; line-height:.9; letter-spacing:-.045em; display:flex; align-items:flex-start; gap:6px; font-variant-numeric:tabular-nums; }
.num .u{ font-size:.26em; letter-spacing:0; color:var(--tx-2); margin-top:.18em; font-weight:400; }
.num .pre{ font-size:.5em; color:var(--tx-2); margin-top:.12em; font-weight:300; }
.stat h3{ margin:0; font-size:clamp(21px,1.46vw,28px); font-weight:500; letter-spacing:-.01em; }
.stat p{ margin:12px 0 0; color:var(--tx-2); font-size:clamp(14px,.972vw,18.7px); line-height:1.4; font-weight:300; max-width:clamp(320px,22vw,420px); min-height:2.8em; }   /* titles in a row line up */
html:not([data-lang="en"]) .stat p{ min-height:3.2em; }
html[data-lang="ko"] .stat p{ line-height:1.6; font-weight:400; }
.stat-img{ grid-column:3; grid-row:1 / span 2; padding:0; background:#0e0f10; border:1px solid var(--line); }
/* the line-up render is small in a big black frame: crop in on the two large heads */
.stat-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 55%; transform:scale(1.7); transform-origin:66% 55%; }
.stat-img .tag{ position:absolute; top:28px; right:28px; margin:0; color:var(--tx); z-index:1; }

/* ---------- resources ---------- */
.res-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; }
.res-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.rcard{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-1); display:flex; flex-direction:column; transition:border-color .25s; }
.rcard:hover{ border-color:#454a50; }
.rcard-img, .rcard-body, .cat-cover{ display:block; }
.rcard-img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0e0f10; }
/* one grade for every resource image: dark, desaturated, darker toward the caption */
.rcard-img img{ width:100%; height:100%; object-fit:cover; filter:brightness(.72) saturate(.75) contrast(1.08); transition:transform 1.2s var(--ease), filter .4s var(--ease); }
.rcard:hover .rcard-img img{ transform:scale(1.03); filter:brightness(.9) saturate(.9); }
.rcard-img::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(11,12,13,.5),rgba(11,12,13,0) 55%); }
.play{ position:absolute; z-index:1; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:var(--radius); background:rgba(11,12,13,.55); border:1px solid rgba(243,241,236,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:grid; place-items:center; transition:background-color .25s var(--ease), border-color .25s var(--ease); }
.play svg{ width:18px; height:18px; margin-left:2px; }
.rcard:hover .play{ background:var(--red); border-color:var(--red); }
.rcard-body{ padding:24px 28px 28px; }
.rcard-body .tag{ font-size:11px; }
.rcard-body h3{ margin:14px 0 0; font-size:clamp(21px,1.46vw,28px); font-weight:500; letter-spacing:-.01em; line-height:1.25; }
.rcard-body p{ margin:10px 0 0; color:var(--tx-2); font-size:clamp(14px,.972vw,18.7px); line-height:1.5; max-width:520px; }
.rcard-body .link-mono{ margin-top:18px; color:var(--tx); }
/* catalogues by language: ko → KOR editions + milling, other languages → EN editions + milling (3 cards, lined up with the 3 cards above) */
html[data-lang="ko"] .cat[data-cat-lang="en"], html:not([data-lang="ko"]) .cat[data-cat-lang="ko"]{ display:none; }
.cats{ margin-top:14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cat{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); padding:14px; display:grid; grid-template-columns:clamp(96px,10.5vw,170px) minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:clamp(14px,1.4vw,24px); row-gap:8px; transition:border-color .25s, background-color .25s; }
.cat:hover{ border-color:#454a50; background:var(--bg-2); }
.cat-cover{ grid-row:1 / 4; aspect-ratio:210/297; border-radius:4px; overflow:hidden; background:#0e0f10; }
.cat-cover img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.cat:hover .cat-cover img{ transform:scale(1.03); }
.cat .tag{ font-size:10.5px; letter-spacing:.12em; margin-top:4px; }
.cat h3{ margin:0; font-size:clamp(16px,1.25vw,21px); font-weight:500; letter-spacing:-.01em; line-height:1.3; }
.cat .link-mono{ align-self:end; font-size:11px; color:var(--tx); }

/* ---------- footer ---------- */
/* dark panel; the tornado (js/tornado.js) fills the right side, text on the left */
.foot{ margin:112px var(--inset) var(--inset); border-radius:14px; background:#0b0c0d; border:1px solid var(--line); color:var(--tx); overflow:hidden; position:relative; isolation:isolate; }
.foot .wrap{ position:relative; z-index:1; padding-top:40px; }
.foot-tornado{ position:absolute; z-index:0; top:0; right:0; width:58%; height:clamp(480px,46vw,760px); pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 22%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 22%); mask-composite:intersect; }
.tornado-host{ width:100%; height:100%; }
.foot-top{ min-height:clamp(440px,42vw,700px); display:flex; align-items:center; padding:24px 0 56px; border-bottom:1px solid var(--line); }
.foot-lead{ max-width:min(44%,640px); }
.foot h2{ margin:0; font-size:clamp(34px,3.2vw,64px); font-weight:400; line-height:1.02; letter-spacing:-.02em; }
html[data-lang="ko"] .foot h2, html[data-lang="ja"] .foot h2, html[data-lang="zh"] .foot h2{ line-height:1.15; }
.foot h2 .l2{ display:block; color:var(--tx-2); }
.foot-lead > p{ margin:28px 0 0; max-width:420px; font-size:clamp(14px,.97vw,17px); line-height:1.6; color:var(--tx-2); }
.foot-lead .btn{ margin-top:32px; height:40px; }
.foot-meta{ margin:44px 0 0; max-width:360px; }
.foot-meta div{ display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; }
.foot-meta dt{ color:var(--tx-3); }
.foot-meta dd{ margin:0; color:var(--tx); }
.foot-cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding:44px 0; border-bottom:1px solid var(--line); }
.foot-cols h3{ margin:0 0 20px; font-family:var(--f-mono); font-size:12px; font-weight:400; letter-spacing:.14em; color:var(--tx-3); }
.foot-cols ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.foot-cols a{ font-size:15px; transition:opacity .18s; }
.foot-cols a:hover{ opacity:.7; }
.foot-contact li{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; line-height:1.5; }
.foot-contact li b{ font-weight:400; color:var(--tx-3); margin-right:10px; letter-spacing:.14em; }
.foot-contact li a{ font-size:inherit; }   /* TEL value = FAX value size */
.foot-contact .addr{ font-family:var(--f-sans); font-size:13.5px; letter-spacing:0; max-width:320px; color:var(--tx-2); }
.foot-contact .addr b{ display:block; margin:0 0 2px; font-family:var(--f-mono); font-size:12.5px; }   /* OFFICE / FACTORY above each address */
/* the privacy policy link: set apart from the other footer links, as the privacy law guidance asks */
.foot-cols a.foot-privacy{ font-weight:700; color:var(--tx); }
/* the consent line of the enquiry forms: the policy, right after the sentence */
.agree .agree-link{ color:var(--tx); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.agree .agree-link:hover{ color:#fff; }
/* business details (사업자등록증), Korean pages only */
.foot-biz{ margin:0; padding:18px 0 0; font-size:12.5px; line-height:1.7; color:var(--tx-3); }
.foot-biz span{ white-space:nowrap; }
.foot-biz span::before{ content:"·"; margin:0 10px; color:var(--line); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; flex-wrap:wrap; color:var(--tx-2); }
.foot-bottom a{ display:inline-flex; align-items:center; gap:8px; }
.foot-bottom svg{ width:12px; height:12px; }
.wordmark{ margin:14px 0 -1.1vw; font-size:clamp(60px,12.6vw,300px); font-weight:500; line-height:.8; letter-spacing:-.055em; color:var(--bg-3); white-space:nowrap; text-align:center; user-select:none; font-stretch:112%; }

/* ---------- modals ---------- */
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:var(--inset); background:rgba(5,6,7,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease), visibility 0s linear .25s; }
.modal.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s var(--ease); }
.modal-box{ position:relative; width:min(760px,100%); max-height:calc(100svh - 2*var(--inset)); overflow:auto; background:var(--bg-1); border:1px solid var(--line); border-radius:12px; padding:34px;
  transform:translateY(12px) scale(.985); transition:transform .35s var(--ease); overscroll-behavior:contain; }
.modal.open .modal-box{ transform:none; }
.modal-x{ position:absolute; top:14px; right:14px; }
/* film: the close button sits above the frame (not over the logo burned into the film's corner), so the dialog keeps 64px free on top */
.modal.modal-video{ padding-top:64px; }
.modal-video .modal-box{ width:min(1200px, 100%, calc((100svh - 64px - var(--inset)) * 16 / 9)); max-height:calc(100svh - 64px - var(--inset)); padding:0; background:#000; overflow:visible; }   /* short screens: limited by height, so the controls stay visible */
.modal-video video{ width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; }
.modal-video .modal-x{ z-index:2; top:auto; bottom:calc(100% + 10px); right:0; background:rgba(17,19,21,.7); }
.form h2{ margin:0; font-size:30px; font-weight:400; letter-spacing:-.02em; padding-right:40px; }
.form .lead{ max-width:560px; margin:12px 0 26px; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--tx-2); text-transform:uppercase; }
html[data-lang="ko"] .field label, html[data-lang="ja"] .field label, html[data-lang="zh"] .field label{ font-family:var(--f-sans); font-size:13px; letter-spacing:0; }
.field label i{ font-style:normal; color:var(--red); margin-left:3px; }
.field input,.field select,.field textarea{ background:var(--bg); border:1px solid #62676e; border-radius:6px; padding:11px 12px; font-size:14.5px; outline:none; transition:border-color .18s, box-shadow .18s; width:100%; }
.field textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--tx-2); }
.field :is(input,select,textarea):focus-visible{ border-color:var(--tx); box-shadow:0 0 0 1px var(--tx); }
.field input[type=file]{ padding:9px; font-size:13px; color:var(--tx-2); }
.field input[type=file]::file-selector-button{ background:var(--bg-3); color:var(--tx); border:1px solid var(--line); border-radius:4px; padding:6px 10px; margin-right:10px; cursor:pointer; }
.field .bad{ border-color:var(--red); }
.agree{ display:flex; flex-direction:row; gap:10px; align-items:flex-start; font-size:13px; color:var(--tx-2); line-height:1.5; margin-top:4px; }
.field.agree input{ margin-top:1px; accent-color:var(--red); width:20px; height:20px; flex:none; padding:0; }
.field.agree input:focus-visible{ outline:2px solid var(--red); outline-offset:2px; box-shadow:none; }
.form-foot{ margin-top:22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-foot .btn{ height:40px; }
.form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }   /* spam trap field, off screen */
.form-msg{ font-size:13.5px; color:var(--tx-2); flex:1; min-width:220px; }
.form-msg.err{ color:#ff6b7f; }
.form-msg.ok{ color:#9fd8a8; }
/* sent: the confirmation replaces the form, centred in the dialog */
.form-done{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 16px 40px; outline:none; }
.form-done[hidden]{ display:none; }
.form-done-ic{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center; margin-bottom:26px;
  color:#9fd8a8; background:rgba(159,216,168,.12); box-shadow:inset 0 0 0 1.5px rgba(159,216,168,.55); }
.form-done-ic svg{ width:34px; height:34px; }
.form-done h2{ margin:0; font-size:clamp(24px,2.4vw,30px); font-weight:400; letter-spacing:-.02em; text-wrap:balance; }
.form-done p{ max-width:440px; margin:14px 0 30px; color:var(--tx-2); line-height:1.6; text-wrap:balance; }
.form-done .btn{ height:44px; min-width:140px; justify-content:center; }
@media screen and (prefers-reduced-motion:no-preference){
  .form-done:not([hidden]) .form-done-ic{ animation:done-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
  .form-done:not([hidden]) .form-done-ic path{ stroke-dasharray:22; animation:done-tick .45s ease-out .25s both; }
  .form-done:not([hidden]) :is(h2, p, .btn){ animation:done-up .5s var(--ease) both; }
  .form-done:not([hidden]) p{ animation-delay:.08s; } .form-done:not([hidden]) .btn{ animation-delay:.16s; }
  @keyframes done-pop{ from{ transform:scale(.6); opacity:0; } }
  @keyframes done-tick{ from{ stroke-dashoffset:22; } to{ stroke-dashoffset:0; } }
  @keyframes done-up{ from{ transform:translateY(8px); opacity:0; } }
}

/* ---------- reveal ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.js [data-reveal]:not(.in){ scroll-margin-top:18px; }   /* anchors land where the card ends up after it rises 18px */
.js [data-reveal].in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav{ gap:22px; }
  .why-grid, .prod-grid{ grid-template-columns:1fr; }
  .prod-head{ grid-template-columns:1fr; gap:28px; }
  .plist{ display:none; }
  .pair{ grid-template-columns:1fr; }
  .pair::before{ content:none; }
  .pair-col + .pair-col{ margin-top:56px; padding-top:56px; border-top:1px solid var(--line); }
  .pair-quote, .how-note{ max-width:40em; }   /* stacked rows run 940-1096px wide: keep the reading line near 75 characters */
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .stat-img{ grid-column:1 / -1; grid-row:auto; min-height:460px; }
  .cats{ gap:10px; }
  .res-row{ grid-template-columns:1fr 1fr; }
  .res-row > :last-child{ grid-column:1 / -1; }
  .foot-lead{ max-width:52%; }
  .foot-tornado{ width:62%; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .lab-head{ grid-template-columns:1fr; gap:0; }
  .lab-head .lead{ justify-self:start; margin-top:28px; }
}
/* the expo card, full width on tablets: image and text side by side instead of one 700px-tall card */
@media (min-width:761px) and (max-width:1180px){
  .res-row > :last-child{ display:grid; grid-template-columns:1fr 1fr; }
  .res-row > :last-child .rcard-img{ aspect-ratio:auto; min-height:260px; }
  .res-row > :last-child .rcard-body{ align-self:center; }
}
/* short laptop screens: the sticky product index must fit under the header (1366×657: seven rows + three labels) */
@media (min-width:1181px) and (max-height:860px){
  .plist{ top:calc(var(--header-h) + var(--inset) + 12px); }
  .plist-g{ margin:12px 0 6px; }
  .plist a{ padding-top:4px; padding-bottom:4px; }
  .plist a + a{ margin-top:2px; }
  .plist-th{ height:42px; }
}
@media (min-width:1181px) and (max-height:600px){
  .plist{ position:static; }
}
/* small laptops / landscape tablets: seven items only fit if 제품 찾기 shrinks to its icon (the label stays for screen readers) */
@media (min-width:961px) and (max-width:1100px){
  .nav{ gap:16px; }
  .nav .nav-find{ padding:5px 8px; }
  .nav-find span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:960px){
  .nav, .nav-expo{ display:none; }
  .burger{ display:grid; }
  /* catalogues as a compact list: small cover + title */
  .cats{ grid-template-columns:1fr; gap:10px; }
  .cat{ grid-template-columns:72px 1fr; column-gap:14px; row-gap:6px; padding:12px; }
}
@media (max-width:480px){
  .head-r .btn-red .t{ display:none; }
  .head-r .btn-red{ width:40px; padding:0; gap:0; justify-content:center; }
}
/* landscape phones: the menu scrolls, and is set tighter */
@media (max-height:520px){
  .mnav{ padding-top:calc(var(--header-h) + var(--inset) + 8px); }
  .mnav a{ font-size:22px; padding:6px 0; }
}
@media (max-width:760px){
  :root{ --gutter:16px; --inset:10px; --header-h:52px; }
  body{ font-size:15px; }
  .section{ padding:84px 0; }
  .brand img{ height:30px; }
  .hero{ min-height:540px; }
  /* touch targets ≥ 40px */
  .lang-btn, .burger, .head-r .btn-red{ height:40px; }
  .burger{ width:40px; }
  .sq{ width:44px; height:44px; }
  .mnav-x{ width:40px; height:40px; top:calc(var(--inset) + 6px); }
  .btn-light, .btn-dark, .form-foot .btn{ height:44px; }
  .pcard-foot .link-mono, .res-top .link-mono, .foot-bottom a{ padding:12px 0; margin:-12px 0; }
  .how-film{ padding:7px 0; margin:17px 0 -7px; }   /* 44px tap height, drawn in the same place */
  .foot-cols a{ display:inline-block; padding:8px 0; }
  .foot-cols ul{ gap:2px; }
  .foot-contact .addr{ margin-top:8px; }   /* no link in these rows, so none of the links' 8px padding: keep them as far apart */
  .field input, .field select, .field textarea{ font-size:16px; }   /* iOS zooms into fields under 16px */
  .cat .tag, .pstat{ font-size:12px; }
  html[data-lang="ja"] .hero h1{ font-size:clamp(34px,10vw,64px); }
  .hero-media video{ object-position:70% 50%; }
  .hero::before{ background:linear-gradient(0deg, rgba(11,12,13,.97) 0%, rgba(11,12,13,.55) 45%, rgba(11,12,13,.15) 70%), linear-gradient(180deg, rgba(11,12,13,.6) 0%, rgba(11,12,13,0) 25%); }
  .hero h1{ position:static; transform:none; margin-bottom:22px; font-size:clamp(44px,12.4vw,64px); }
  .hero-inner{ padding-bottom:22px; }
  .hero-foot{ flex-direction:column; align-items:stretch; gap:22px; }
  .hero-card{ width:100%; }
  .statement{ border-radius:10px; }
  .cards4{ grid-template-columns:1fr; }
  .card4{ border-right:0; min-height:0; }
  .card4:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
  .card4:last-child{ border-bottom:0; }
  .card4 h3{ margin-top:36px; }
  .how-top{ flex-direction:column; }
  .apps{ flex-direction:column; align-items:flex-start; gap:18px; margin-top:64px; }
  .marquee{ width:100%; }
  /* cut-out images go above the text in normal flow, so long copy never runs over the product */
  .pcard{ aspect-ratio:auto; min-height:520px; display:flex; flex-direction:column; }
  .pcard-img.cut{ position:relative; inset:auto; flex:none; height:clamp(260px,78vw,360px); }
  .pcard-img.cut img{ padding:48px 2% 0; }
  .pcard-img.cut ~ .pcard-body{ position:relative; left:auto; right:auto; bottom:auto; margin-top:auto; padding:0 18px 18px; }
  .pcard-img:not(.cut) img{ object-position:62% 30%; }
  /* full-bleed renders keep a fixed 480px frame at the top and reserve 300px of it; longer copy (ja) grows the card instead of covering the product */
  .pcard-img:not(.cut){ position:relative; inset:auto; flex:none; height:300px; }
  .pcard-img:not(.cut) img{ position:absolute; top:0; left:0; height:480px; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent); }
  .pcard-img:not(.cut) ~ .pcard-body{ position:relative; left:auto; right:auto; bottom:auto; margin-top:auto; padding:0 18px 18px; }
  .pcard::after{ background:linear-gradient(0deg, rgba(11,12,13,.96) 0%, rgba(11,12,13,.7) 40%, rgba(11,12,13,0) 68%); }
  .pcard-top{ top:16px; left:16px; right:16px; }
  .pcard-body{ left:18px; right:18px; bottom:18px; }
  /* the six-item milling LINE-UP: label on its own line, the value gets the full width and breaks only between items */
  #p-milling .pstat{ flex-wrap:wrap; row-gap:6px; }
  #p-milling .pstat b{ flex-basis:100%; word-break:keep-all; text-wrap:balance; }
  .range-hero{ padding-top:110px; min-height:640px; }
  /* video below the copy: the text sits on plain dark, the heads show underneath */
  .range-hero{ padding-bottom:300px; }
  .range-media{ inset:auto 0 0 0; height:420px; }
  .range-status{ display:none; }
  .ruler{ margin-top:-40px; padding:24px 16px; }
  .rl{ grid-template-columns:1fr; }
  .rl-axis{ grid-column:1; }
  .rl-label{ padding:10px 0 0; }
  .rl-track{ height:30px; }
  /* value on the label row, right-aligned (site.js places it inline next to the bar on wide screens) */
  .rl-val{ top:-10px; left:auto !important; right:0 !important; padding:0 !important; font-size:12px; color:var(--tx); }
  .rl-axis span, .rl-label .mono{ font-size:12px; }
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ min-height:0; gap:44px; padding:26px; }
  .stat-img{ min-height:360px; }
  .res-top{ flex-direction:column; align-items:flex-start; margin-bottom:36px; }
  .res-row{ grid-template-columns:1fr; }
  .res-row > :last-child{ grid-column:auto; }
  .cats{ grid-template-columns:1fr; }
  .foot{ margin-top:84px; border-radius:10px; }
  .foot-tornado{ position:relative; width:100%; height:340px; margin-bottom:-120px;
    -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 45%); mask-image:linear-gradient(0deg, transparent 0%, #000 45%); }
  .foot-top{ min-height:0; padding-top:0; }
  .foot-lead{ max-width:none; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-cols > div:first-child{ grid-column:1 / -1; }
  .fgrid{ grid-template-columns:1fr; }
  .modal-box{ padding:24px 18px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero h1 .ln > span, .hero-desc, .hero-card{ transform:none; opacity:1; }
  .marquee-track{ animation:none; }
  .js #how [data-reveal]{ transition-delay:0s; }   /* the second column of a row must not pop in 80ms after the first */
}

/* translated text that sits in mono-styled slots: mono letter-spacing looks broken on Hangul / kana / hanzi */
html:not([data-lang="en"]) :is(.pcard h3 small, .link-mono > span, .hero-card .more > span, .meta dd, .rl-group, .foot-bottom a > span){
  font-family:var(--f-sans); letter-spacing:.01em; text-transform:none; }
html:not([data-lang="en"]) :is(.link-mono > span, .hero-card .more > span, .foot-bottom a > span){ font-size:13px; font-weight:500; }
html:not([data-lang="en"]) .pcard h3 small{ font-size:13px; color:var(--tx-2); }
html:not([data-lang="en"]) .meta dd{ font-size:13px; }
html:not([data-lang="en"]) .rl-group{ font-size:12.5px; color:var(--tx-2); }
/* en: sentence-case copy in mono slots next to uppercase mono labels reads as a mistake */
html[data-lang="en"] .foot-bottom, html[data-lang="en"] .meta dd{ text-transform:uppercase; }