/* ==========================================================================
   Gummoon Industry — Design System
   Light warm-gray / vivid orange accent
   ========================================================================== */

:root{
  --bg:#e7e5e1;
  --bg-2:#ffffff;
  --surface:#ffffff;
  --surface-2:#f1efeb;
  --line:#dedbd5;
  --line-soft:#e6e3de;
  --text:#1c1a17;
  --text-mid:#57534c;
  --text-dim:#8b8780;
  --red:#ff5a1e;
  --red-soft:#e0491a;
  --amber:#ff8b3d;
  --amber-soft:#c9450f;
  --accent-grad:linear-gradient(90deg,#ff5a1e,#ff8b3d);
  --icon-bg:#f7f6f3;

  --font-en: "Archivo","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-ko: "Pretendard Variable","Pretendard","Archivo",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  --font-base: var(--font-en);

  --container:1180px;
  --header-h:82px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(30,24,14,.08);
  --shadow-md:0 16px 40px rgba(30,24,14,.14);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:normal;
}
[lang="ko"]{ font-family:var(--font-ko); }
[lang="en"]{ font-family:var(--font-en); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

/* ---- Language toggle visibility ---- */
html.lang-ko [lang="en"]{ display:none !important; }
html.lang-en [lang="ko"]{ display:none !important; }

/* ---- Layout helpers ---- */
.container{ max-width:var(--container); margin:0 auto; padding:0 30px; }
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section-divider{ height:1px; background:var(--line); margin:64px 0; }

/* Solid-fill sections read as full-bleed "big cards" — edge-to-edge, no side margin,
   all four corners rounded. Sections stay flush (no gap, no overlap) against whatever
   comes before/after; the rounded corners simply clip each section's own square edge,
   so a sliver of the neighboring section (or the page bg, between two plain sections)
   shows through the curve at both the top and the bottom — the stacked-card look. */
.section--gray, .section--black, .section--dark-accent{
  border-radius:40px;
  position:relative;
  overflow:hidden;
}
.section--gray{ background:var(--bg-2); }
.section--black{ background:var(--bg-2); }
/* Production Lineup card (home page): flush against the stat band above it,
   so only the bottom corners curve — the top stays square. Squaring the top
   alone would still leave the black card's own bottom corners rounded, which
   clip to reveal whatever's behind them — normally the page bg. Pulling this
   section up by that same radius (and padding it back down so the content
   doesn't shift) puts this section's own white behind that curve instead, so
   the reveal is white, not a strip of page-bg gray. z-index keeps the black
   card painting on top everywhere except inside its own corner clip. */
.section--dark-accent{ z-index:2; }
#production-lineup{
  border-top-left-radius:0; border-top-right-radius:0;
  margin-top:-40px; padding-top:calc(96px + 40px);
  z-index:1;
}
.section--black .section-kicker{ color:var(--red-soft); }
.section--black .section-title{ color:var(--text); }
.section--black .section-desc{ color:var(--text-mid); }

.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-kicker{
  display:inline-flex; align-items:center; gap:11px;
  font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red-soft); margin-bottom:16px;
}
.section-kicker::before{ content:""; width:24px; height:2px; border-radius:2px; background:var(--accent-grad); display:inline-block; }
.section-title{ font-size:34px; font-weight:700; letter-spacing:-.02em; color:var(--text); margin-bottom:14px; }
.section-desc{ font-size:16px; color:var(--text-mid); }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-6{ grid-template-columns:repeat(6,1fr); }

/* Pill shape (border-radius:999px) + arrow icon, referenced from
   one-of-one-ai.com/studio's "Reach Out" button: the arrow sits at a natural
   45° (pointing up-right, exactly as drawn in the SVG below — no rotation at
   rest) and rotates clockwise to horizontal/pointing right on hover. Rotating
   a vector that points up-right needs a POSITIVE (clockwise) angle to level
   it out to due-right — rotate(-45deg) would swing it the other way, up to
   due-north/straight-up, which was wrong. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-size:13.5px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  white-space:nowrap;
}
.btn:hover{ border-color:#c9c4bb; transform:translateY(-1px); }
.btn-arrow{ display:inline-flex; transition:transform .3s var(--ease); }
.btn-arrow svg{ width:14px; height:14px; display:block; }
.btn:hover .btn-arrow{ transform:rotate(45deg); }
.btn--outline{ background:transparent; color:var(--text-mid); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--text-dim); color:var(--text); }
.btn--red{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--red:hover{ background:#ff7038; border-color:#ff7038; }
.btn--gray{ background:#d9d6d0; border-color:#d9d6d0; color:var(--text); }
.btn--gray:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--sm{ padding:9px 18px; font-size:12.5px; }

.tag{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px;
  font-weight:700; letter-spacing:.04em; background:var(--surface-2); color:var(--text-mid);
}
.tag--red{ background:rgba(255,90,30,.14); color:var(--red-soft); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
/* Floating "island" nav bar, transplanted from wakatosmedia.com's header:
   inset from the viewport on all sides (not full-bleed), a rounded pill with a
   constant translucent dark fill + backdrop-filter blur (so whatever scrolls
   underneath is always blurred through it — no scroll-position JS needed for
   the blur itself) and a thin, faint 1px stroke. Reference values, used as-is:
   16px top gap, 20px min side gap, 16px corner radius, blur(10px),
   rgba(0,0,0,.5) fill, rgba(255,255,255,.1) border. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:16px 20px 0; background:transparent;
}
.site-header .container{
  display:flex; align-items:center; height:64px; padding:0 28px;
  background:rgba(0,0,0,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1); border-radius:16px;
}

/* The pill's own dark fill is the nav's permanent backdrop regardless of what
   page content is scrolled underneath, so the logo and nav text no longer need
   to track light/dark page state (no more .solid swapping here) — they're
   always styled for a dark surface. */
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-right:150px; }
.brand-mark{ height:26px; width:auto; flex-shrink:0; display:block; }

.nav{ display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-right:200px; }
.nav > li{ position:relative; }
.nav > li > a, .nav > li > button.nav-link{
  display:flex; align-items:center; gap:6px; padding:12px 16px; font-size:14px; font-weight:500;
  color:#fff; border-radius:8px; background:none; border:none;
  transition:opacity .15s var(--ease);
}
.nav > li > a:hover, .nav > li > button.nav-link:hover, .nav > li.active > a, .nav > li.active > button.nav-link{ opacity:.72; }
/* Hamburger <-> X, driven by .dd-open (set in main.js), not :hover — a plain CSS
   :hover trigger can't be "closed" by a click while the mouse is still over it. */
.nav .burger{ position:relative; width:16px; height:11px; flex-shrink:0; }
.nav .burger span{
  position:absolute; left:0; right:0; height:1.6px; border-radius:1px; background:currentColor;
  transition:transform .25s var(--ease), opacity .2s var(--ease), top .25s var(--ease);
}
.nav .burger span:nth-child(1){ top:0; }
.nav .burger span:nth-child(2){ top:4.7px; }
.nav .burger span:nth-child(3){ top:9.4px; }
.nav li.has-dropdown.dd-open .burger span:nth-child(1){ top:4.7px; transform:rotate(45deg); }
.nav li.has-dropdown.dd-open .burger span:nth-child(2){ opacity:0; }
.nav li.has-dropdown.dd-open .burger span:nth-child(3){ top:4.7px; transform:rotate(-45deg); }

.dropdown{
  /* The trigger <li> is shorter than the pill it sits in (vertically centered
     within the pill's fixed height), so anchoring purely off the <li>'s own
     bottom (100%) landed the dropdown a few px above the pill's true bottom
     edge, overlapping it. +15.4px (not the more obvious +8px) is tuned to land
     exactly ~3px below the pill's actual bottom, not the <li>'s. */
  position:absolute; top:calc(100% + 15.4px); left:50%; transform:translateX(-50%);
  min-width:248px; background:var(--surface-2); border-radius:14px; box-shadow:var(--shadow-md);
  border:1px solid var(--line); padding:8px; opacity:0; visibility:hidden;
  transition:opacity .18s var(--ease), visibility .18s;
}
.nav li.has-dropdown.dd-open .dropdown{ opacity:1; visibility:visible; }
.dropdown a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px; font-size:14px; font-weight:500; color:var(--text-mid); }
.dropdown a:hover{ background:rgba(0,0,0,.045); color:var(--text); }
.dropdown a .dot{ width:6px; height:6px; border-radius:50%; background:var(--line); flex-shrink:0; }
.dropdown a:hover .dot{ background:var(--red-soft); }

/* Mega dropdown: one translucent panel with the 3 links stacked as plain text rows
   (not individual boxed cards), stretching open/rolling up via a max-height transition
   (not the base .dropdown's fade) so it visibly grows/retracts. Width is now
   intrinsic (shrink-to-fit) instead of a fixed 260px — align-items:stretch still
   makes every row match the widest one, so the box ends up exactly as wide as
   the longest label plus its own 10px side padding, not an arbitrary fixed size.
   Color matches the nav pill's fill exactly (rgba(0,0,0,.5), same blur/border)
   so the dropdown reads as a continuation of the same surface, not a lighter
   panel bolted underneath it. */
.dropdown--mega{
  box-sizing:border-box; flex-direction:column; align-items:stretch; gap:2px; min-width:0; width:max-content;
  max-height:0; overflow:hidden; padding:8px 4px;
  background:rgba(0,0,0,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.1);
  transition:max-height .38s var(--ease), opacity .18s var(--ease), visibility .18s;
}
.nav li.has-dropdown.dd-open .dropdown--mega{ max-height:280px; }
/* ".dropdown a" (base rule above) also matches these — since it adds a type
   selector its specificity beats plain ".dd-group", so this has to be
   ".dropdown a.dd-group" to actually override the padding/font/color here
   instead of silently losing that fight. It's also flex (inherited from
   ".dropdown a"), so centering needs justify-content, not text-align. */
.dropdown a.dd-group{
  justify-content:center; gap:0; padding:14px 6px; border-radius:8px; font-size:14.5px; font-weight:600; color:#fff;
  background:none; border:none;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.dropdown a.dd-group:hover{ background:rgba(255,255,255,.1); color:#fff; }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }
/* Lang toggle and mobile menu button both mix a light thumb/pill with dark text
   on top of it, so they can't use mix-blend-mode the way the plain nav links do
   (a dark glyph would blend-invert to whatever's behind it and disappear instead
   of staying readable against its own thumb). Instead they carry their own
   frosted-glass surface — legible on any background without needing to track
   light/dark state. */
.lang-toggle{
  display:flex; align-items:center; background:rgba(20,19,18,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:999px; padding:3px; position:relative; border:1px solid rgba(255,255,255,.16);
}
.lang-toggle button{
  position:relative; z-index:1; border:none; background:none; padding:7px 14px; font-size:12px; font-weight:600; letter-spacing:.03em;
  border-radius:999px; color:rgba(255,255,255,.7); transition:color .2s var(--ease);
}
.lang-toggle button.active{ color:var(--text); }
.lang-toggle .thumb{
  position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px);
  background:#fff; border-radius:999px; transition:transform .25s var(--ease);
}
html.lang-en .lang-toggle .thumb{ transform:translateX(100%); }

.menu-toggle{
  display:none; width:40px; height:40px; border:1px solid rgba(255,255,255,.16); border-radius:8px;
  background:rgba(20,19,18,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:#fff; position:relative;
}
.menu-toggle span::before{ position:absolute; top:-6px; }
.menu-toggle span::after{ position:absolute; top:6px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:var(--bg); color:var(--text); overflow:hidden;
}
.hero .hero-slides{ position:absolute; inset:0; }
.hero .hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease-in-out;
}
.hero .hero-slide.is-active{ opacity:1; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 34%, rgba(0,0,0,.62) 72%, #000 100%);
}
.hero-content{
  position:relative; z-index:3; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:48px;
}
.hero-eyebrow-col{ flex:0 0 auto; max-width:320px; }
.hero-headline-col{ flex:0 0 auto; text-align:right; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--red-soft); }
.hero-eyebrow::before{ content:""; width:24px; height:2px; border-radius:2px; background:var(--accent-grad); flex-shrink:0; }
.hero h1{ font-weight:300; letter-spacing:-.02em; max-width:none; color:#fff; }
.hero h1 .line{ display:block; white-space:nowrap; font-size:clamp(12.5px, 3.6vw, 46px); line-height:1.28; }
.hero h1 .line b{ font-weight:600; }
.hero h1 em{ color:var(--red-soft); font-style:normal; }
.hero p.lede{ margin-top:22px; font-size:17px; color:#e7e7ea; max-width:600px; }
.hero-actions{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:900px){
  .hero-content{ flex-direction:column; align-items:flex-start; gap:28px; }
  .hero-eyebrow-col{ max-width:none; }
  .hero-headline-col{ text-align:left; }
}
.hero-location{ position:absolute; right:30px; bottom:32px; z-index:3; text-align:right; font-size:13px; color:rgba(255,255,255,.72); }
.hero-location strong{ display:block; font-size:15px; color:#fff; font-weight:700; }

.hero-scroll-hint{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:3; }
.hero-scroll-hint .line{ display:block; width:1px; height:42px; background:linear-gradient(var(--red), transparent); animation:scrollDrop 1.8s ease-in-out infinite; }
@keyframes scrollDrop{ 0%,100%{ opacity:.3; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* Lead reveal (scroll-triggered centered statement) */
.lead-reveal{ padding:64px 0; text-align:center; }
.lead-reveal-text{
  font-size:clamp(22px, 3.2vw, 38px); font-weight:300; line-height:1.55; letter-spacing:-.01em;
  color:var(--text); max-width:880px; margin:0 auto;
  opacity:0; transform:translateY(36px); filter:blur(8px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.15,1), transform 1.1s cubic-bezier(.2,.7,.15,1), filter 1.1s cubic-bezier(.2,.7,.15,1);
}
.lead-reveal-text.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }
.lead-reveal-text--center{ text-align:center; }

.lead-reveal-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:2.05; padding:48px; box-shadow:var(--shadow-md);
}
.lead-reveal-card::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(10,9,8,.42) 0%, rgba(10,9,8,.58) 100%);
}
.lead-reveal-card .lead-reveal-text{ position:relative; z-index:1; margin:0 auto; }
.lead-reveal-text--onimage{ color:#fff; }
@media (max-width:600px){
  .lead-reveal-card{ padding:80px 24px; }
}

/* Quick links */
.quick-links{ margin-top:-64px; position:relative; z-index:3; }
.quick-links .grid-4{ gap:20px; }
.quick-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 22px; box-shadow:var(--shadow-md); transition:transform .2s var(--ease), border-color .2s var(--ease);
  display:flex; flex-direction:column; gap:14px;
}
.quick-card:hover{ transform:translateY(-4px); border-color:var(--red-soft); }
.quick-card .icon{
  width:46px; height:46px; border-radius:12px; background:var(--surface-2); color:var(--text);
  display:flex; align-items:center; justify-content:center;
}
.quick-card .icon svg{ width:22px; height:22px; }
.quick-card h3{ font-size:16px; font-weight:700; color:var(--text); }
.quick-card span.arrow{ margin-top:auto; font-size:13px; font-weight:700; color:var(--red-soft); display:flex; align-items:center; gap:6px; }

/* ==========================================================================
   Page header (non-home pages)
   ========================================================================== */
.page-header{
  padding:calc(64px + var(--header-h)) 0 48px; background:var(--bg); color:var(--text); position:relative; overflow:hidden;
}
.page-header--slim{ padding-bottom:20px; }
.page-header .container{ position:relative; z-index:1; }
.breadcrumb{ font-size:13px; color:var(--text-dim); margin-bottom:16px; display:flex; gap:10px; align-items:center; }
.breadcrumb a{ color:var(--text-mid); }
.breadcrumb a:hover{ color:var(--text); }
.breadcrumb .sep{ color:rgba(0,0,0,.22); }
.breadcrumb .current{ color:var(--text); font-weight:600; }
.page-header h1{ font-size:clamp(30px,4.4vw,44px); font-weight:300; letter-spacing:-.02em; color:var(--text); }
.page-header p{ margin-top:14px; color:var(--text-mid); max-width:640px; font-size:16px; }
/* Higher specificity than ".page-header p" above, so a .lead-reveal-text placed in a
   page-header keeps its own font-size/weight instead of inheriting the plain-paragraph
   defaults. */
.page-header p.lead-reveal-text{ font-size:clamp(22px, 3.2vw, 38px); font-weight:300; color:var(--text); max-width:880px; }
/* Small centered label above a .subnav row, for grouping multiple pill rows (e.g.
   Exterior / Interior on the Products page). Only affects .subnav margin/alignment
   when it directly follows a label — other pages' plain .subnav (e.g. Production
   Process's left-aligned pill row) keep their existing defaults untouched. */
.subnav-row-label{
  text-align:center; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); margin-top:32px;
}
.subnav-row-label:first-of-type{ margin-top:36px; }
.subnav-row-label + .subnav-rows{ margin-top:14px; }
/* Each column's pills are pre-split (in HTML) into rows of at most 3, rather than one
   flex-wrap row — .subnav-rows stacks those rows; nowrap keeps each row exactly as
   grouped instead of letting the browser reflow item counts per row on its own. */
.subnav-rows{ display:flex; flex-direction:column; gap:10px; }
.subnav-rows .subnav{ justify-content:center; flex-wrap:nowrap; margin-top:0; }
/* Exterior/Interior split left/right instead of stacked rows — each column gets its
   own label + pill rows, so the label no longer needs the block-level top margin above
   (the grid wrapper carries that instead). */
.subnav-columns{ margin-top:100px; gap:48px; }
.subnav-columns .subnav-row-label{ margin-top:0; }
@media (max-width:760px){
  .subnav-columns{ grid-template-columns:1fr; gap:28px; }
  .subnav-rows .subnav{ flex-wrap:wrap; }
}
.subnav{ display:flex; gap:8px; margin-top:32px; flex-wrap:wrap; }
.subnav a{
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:500; border:1px solid var(--line); color:var(--text-mid);
  transition:all .18s var(--ease);
}
.subnav a:hover, .subnav a.active{ background:var(--red); border-color:var(--red); color:#fff; }

/* ==========================================================================
   Cards / components
   ========================================================================== */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#c9c4bb; }
.card .num{ font-size:12px; font-weight:700; color:var(--red-soft); letter-spacing:.08em; margin-bottom:12px; text-transform:uppercase; }
.card .people-icon{ width:72px; height:72px; object-fit:cover; border-radius:16px; background:var(--icon-bg); display:block; margin-bottom:18px; }
.card h3{ font-size:18px; font-weight:600; margin-bottom:10px; color:var(--text); }
.card p{ font-size:14.5px; color:var(--text-mid); }

.icon-tile{ width:48px; height:48px; border-radius:12px; background:rgba(255,90,30,.14); color:var(--red-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.icon-tile svg{ width:24px; height:24px; }
.icon-tile.dark{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); }

.ceo-video-col{ margin-top:117px; }
@media (max-width:680px){ .ceo-video-col{ margin-top:32px; } }
.media-card{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.media-card .media{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); position:relative; }
.media-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); filter:saturate(.94); }
.media-card:hover .media img{ transform:scale(1.05); }
.media-card .media.placeholder, .media.placeholder{ display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:13px; text-align:center; padding:20px; background:var(--bg-2); }
.media-card .body{ padding:18px 20px; }
.media-card .body h3{ font-size:15px; font-weight:600; color:var(--text); }
.media-card .body p{ font-size:13px; color:var(--text-dim); margin-top:4px; }

/* Production Lineup teaser (home page): the photo itself keeps rounded corners,
   but there's no card box (no border/background/shadow) around it — it sits
   directly on the section's own background instead of floating in a white card. */
.product-teaser .media{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-lg); position:relative; }
.product-teaser .body{ padding:18px 4px 0; }
.product-teaser .body h3{ font-size:15px; font-weight:600; color:var(--text); }

/* Product category layout (Products page): one large hero photo per category, then
   a row of smaller supporting shots underneath. */
.product-hero{
  margin:32px 0 0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:21/9; background:var(--bg-2);
}
.product-hero img{ width:100%; height:100%; object-fit:cover; }
/* Real photo categories are all native 3:2 — match the container to that ratio so
   object-fit:cover never has to crop into the subject (was cropping top/bottom on
   the 21:9 hero and left/right on the 4:3 subgrid cards). Placeholder "coming soon"
   categories keep the original 21:9/4:3 boxes untouched. */
.product-hero--photo{ aspect-ratio:3/2; }
.media-card .media--photo{ aspect-ratio:3/2; }
.product-subgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }

/* Subgrid carousel: used instead of the plain 3-col grid when a category has more
   than 3 supporting images — same card look, but the row scrolls with prev/next
   arrows instead of wrapping to extra rows. No side padding/inset on the wrapper,
   so the track's own left/right edges line up exactly with the hero card above. */
.subgrid-carousel{ position:relative; margin-top:16px; }
.product-subgrid--scroll{
  margin-top:0; display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
}
.product-subgrid--scroll::-webkit-scrollbar{ display:none; }
.product-subgrid--scroll .media-card{ flex:0 0 calc((100% - 32px)/3); scroll-snap-align:start; }
/* Minimal arrow glyph, no button chrome — overlaid directly on top of the edge
   photo (prev over the left card, next over the right card), inset a few px from
   the image's own edge rather than flush against it. White with a soft drop-shadow
   so it stays legible over any photo underneath. */
.subgrid-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:20px; height:20px; padding:0; border:none; background:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 4px rgba(0,0,0,.35));
  opacity:.85; transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.subgrid-arrow svg{ width:20px; height:20px; }
.subgrid-arrow:hover{ opacity:1; }
.subgrid-arrow--prev{ left:8px; }
.subgrid-arrow--prev:hover{ transform:translateY(-50%) translateX(-2px); }
.subgrid-arrow--next{ right:8px; }
.subgrid-arrow--next:hover{ transform:translateY(-50%) translateX(2px); }
@media (max-width:760px){
  .product-hero{ aspect-ratio:4/3; }
  .product-hero--photo{ aspect-ratio:3/2; }
  .product-subgrid{ grid-template-columns:1fr; }
  .product-subgrid--scroll .media-card{ flex:0 0 82%; }
}

.section--dark-accent{ background:#141312; }
.stat-band-lead{
  text-align:center; max-width:820px; margin:0 auto 94px; font-size:19px; font-weight:400;
  line-height:1.65; color:rgba(255,255,255,.82);
}

/* Stat band (single bar, 4 columns divided by rules) */
.stat-band{ display:flex; background:#141312; border:1px solid #d9d6d0; border-radius:var(--radius-lg); overflow:hidden; }
.stat-col{ flex:1; min-width:0; padding:40px 32px; border-left:1px solid #d9d6d0; }
.stat-col:first-child{ border-left:none; }
.stat-figure{ font-size:28px; font-weight:800; color:#f7f4f0; letter-spacing:-.01em; }
.stat-figure b{ color:var(--red); font-weight:800; }
.stat-figure .lh-tight{ display:inline-block; line-height:1.32; margin-top:4px; }
.stat-figure span[lang="ko"].lh-tight{ margin-top:6.4px; }
.stat-lead{ margin-top:14px; font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.55); }
@media (max-width:900px){
  .stat-band{ flex-wrap:wrap; border-radius:var(--radius-lg); }
  .stat-col{ flex:0 0 50%; border-left:none; border-top:1px solid #d9d6d0; }
  .stat-col:nth-child(odd){ border-left:none; }
  .stat-col:nth-child(1), .stat-col:nth-child(2){ border-top:none; }
}
@media (max-width:560px){
  .stat-col{ flex:0 0 100%; border-top:1px solid #d9d6d0; }
  .stat-col:first-child{ border-top:none; }
}

.photo-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.photo-strip figure{ margin:0; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--bg-2); }
.photo-strip figure img{ width:100%; height:100%; object-fit:cover; filter:saturate(.94); }

/* History — repeating S-shaped serpentine timeline, scroll-colored */
.history-serpentine{ max-width:1080px; margin:0 auto; position:relative; }
.hs-row{ position:relative; display:flex; padding:0 0 30px; }
.hs-row.reverse{ flex-direction:row-reverse; }

/* row's own horizontal line: gray track + red fill overlay (fills via --fill 0..1) */
.hs-row::before{
  content:""; position:absolute; top:6px; left:12.5%; right:12.5%; height:2px; background:var(--line); z-index:1;
}
.hs-row::after{
  content:""; position:absolute; top:6px; left:12.5%; right:12.5%; height:2px; background:var(--red); z-index:1;
  transform-origin:left center; transform:scaleX(var(--fill,0)); box-shadow:0 0 8px rgba(255,90,30,.55);
}
.hs-row.reverse::after{ transform-origin:right center; }

/* connector: fixed-height flow gap between rows (purely a layout spacer now — the
   turn itself is drawn by a JS-generated .hs-turn SVG, see main.js). .stub is likewise
   unused on desktop — both are repurposed as the mobile fallback spine, see media query below. */
.hs-connector{ height:34px; }
.hs-row .stub{ display:none; }

/* Turn between two rows: ONE continuous semicircle (radius = half the real measured gap
   between the two dots it joins, computed in main.js via getBoundingClientRect), not a
   corner+straight+corner assembly — a true half-circle is tangent-perfect at both ends by
   construction, so there's no seam to misalign and no separate piece to pop into "lit"
   out of sync with the row-line fill it hands off to/from (dash-offset is driven
   continuously alongside --fill in main.js, off the same scroll-progress value). */
.hs-turn{ position:absolute; z-index:1; overflow:visible; pointer-events:none; }
.hs-turn .track{ fill:none; stroke:var(--line); stroke-width:2; stroke-linecap:round; }
.hs-turn .fill{ fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(255,90,30,.55)); }

.hs-item{
  flex:1; min-width:0; position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; text-align:center; padding:0 14px;
}
.hs-item .dot{
  width:12px; height:12px; border-radius:50%; background:var(--bg); border:2.5px solid var(--line);
  margin-bottom:14px; flex-shrink:0; transition:border-color .4s ease, box-shadow .4s ease;
}
.hs-item .dot.lit{ border-color:var(--red); box-shadow:0 0 8px rgba(255,90,30,.55); }
.hs-item .year{ font-weight:700; color:var(--red-soft); font-size:13px; letter-spacing:.03em; }
.hs-item p{ margin-top:5px; font-size:13px; color:var(--text-mid); line-height:1.55; max-width:165px; }

@media (max-width:760px){
  .history-serpentine{ padding-left:28px; }
  .hs-row, .hs-row.reverse{ flex-direction:column; align-items:flex-start; gap:24px; padding-bottom:24px; }
  .hs-row::before, .hs-row::after{ display:none; }
  .hs-turn{ display:none; }
  /* mobile falls back to a single straight left-edge spine: .stub covers each row's own
     height, .hs-connector::before bridges the gap to the next row. */
  .hs-row .stub{ display:block; position:absolute; left:0; top:20px; bottom:0; width:2px; background:var(--line); }
  .hs-connector{ position:relative; }
  .hs-connector::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line); }
  .hs-item{ align-items:flex-start; text-align:left; padding:0 0 0 22px; max-width:none; }
  .hs-item .dot{ position:absolute; left:-6px; top:2px; margin-bottom:0; }
  .hs-item p{ max-width:none; }
}

/* Certification cards */
.cert-card{ text-align:center; padding:32px 24px; }
.cert-card .cert-badge-img{ width:168px; height:168px; margin:0 auto 18px; display:block; }

/* Table */
.data-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.data-table th, .data-table td{ padding:14px 18px; border-bottom:1px solid var(--line); text-align:left; }
.data-table thead th{ background:var(--surface-2); color:var(--text); font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; }
.data-table thead th:first-child{ border-top-left-radius:8px; }
.data-table thead th:last-child{ border-top-right-radius:8px; }
.data-table tbody tr:hover{ background:rgba(0,0,0,.03); }
.data-table tbody tr:last-child td{ font-weight:700; color:var(--red-soft); border-bottom:none; }

/* Locations — one wide card per row: dark photo+text on the left, map on the right */
.locations-list{ display:flex; flex-direction:column; gap:24px; }
.location-card{
  display:flex; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); height:320px;
}
.location-card .map-frame{ flex:0 0 50%; height:100%; background:var(--bg-2); position:relative; }
.location-card .map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.1); }
.location-card .map-badge{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--surface-2); color:var(--text);
  font-size:11px; font-weight:700; letter-spacing:.06em; padding:6px 12px; border-radius:999px; text-transform:uppercase;
  border:1px solid var(--line);
}
.location-card .map-badge.google{ background:var(--red); border-color:var(--red); color:#fff; }

/* Darkened facility photo with the address/facilities text overlaid on top */
.loc-photo{ position:relative; flex:0 0 50%; height:100%; overflow:hidden; background:#2c2a28; }
.loc-photo img{ width:100%; height:100%; object-fit:cover; filter:brightness(.78) saturate(.9); }
.loc-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,8,.08) 0%, rgba(10,9,8,.28) 45%, rgba(10,9,8,.68) 100%);
}
.loc-photo.no-photo{ background:#2c2a28; }
.loc-photo-overlay{
  position:absolute; inset:0; z-index:2; padding:24px; display:flex; flex-direction:column; justify-content:flex-end;
}
.loc-photo-overlay h3{
  font-size:17px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px;
  color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.loc-photo-overlay .addr{ font-size:14px; color:rgba(255,255,255,.88); margin-bottom:14px; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.loc-photo-overlay .facilities{ display:flex; flex-wrap:wrap; gap:8px; }
.loc-photo-overlay .note{ margin-top:12px; font-size:12.5px; color:rgba(255,255,255,.7); text-shadow:0 1px 6px rgba(0,0,0,.6); }
.loc-photo-overlay .tag, .loc-photo-overlay .tag.tag--red{
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); color:#fff; border:1px solid rgba(255,255,255,.30);
}

@media (max-width:760px){
  .location-card{ flex-direction:column; height:auto; }
  .location-card .loc-photo, .location-card .map-frame{ flex:none; width:100%; height:auto; aspect-ratio:16/10; }
}

/* Process line (home page one-stop teaser) */
.process-line{ display:flex; align-items:flex-start; position:relative; gap:12px; }
.process-line::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--red);
  transform:translateY(-50%); z-index:0;
}
.process-card{
  flex:1; min-width:0; aspect-ratio:1/1; background:var(--icon-bg); border:2px solid var(--line); border-radius:var(--radius-lg);
  padding:16px; text-align:center; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:border-color .25s var(--ease);
}
.process-card:hover{ border-color:var(--red); }
.process-card .pc-label{ font-size:13.5px; font-weight:700; white-space:nowrap; color:var(--text); margin:0 0 14px; }
.process-card .pc-label .pc-num{ color:var(--red-soft); margin-right:3px; }
.process-card .pc-icon{
  width:72px; height:72px; margin:0 auto; border-radius:16px; overflow:hidden; background:var(--icon-bg);
  display:flex; align-items:center; justify-content:center;
}
.process-card .pc-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
  .process-line{ flex-wrap:wrap; row-gap:16px; }
  .process-line::before{ display:none; }
  .process-card{ flex:0 0 calc(33.33% - 8px); }
}
@media (max-width:560px){
  .process-card{ flex:0 0 calc(50% - 6px); }
}

/* Process flow row */
.flow-row{ display:flex; align-items:flex-start; gap:0; position:relative; }
.flow-node{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; padding:0 6px; }
.flow-node .fn-circle{
  width:64px; height:64px; border-radius:50%; background:var(--surface-2); color:var(--text);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:19px; margin-bottom:14px;
  position:relative; z-index:2; border:3px solid var(--bg); box-shadow:0 0 0 1px var(--line);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.flow-node:hover .fn-circle{ background:var(--red); color:#fff; transform:scale(1.06); }
.flow-node .fn-label{ font-size:13.5px; font-weight:600; color:var(--text); }
.flow-node .fn-sub{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.flow-row::before{
  content:""; position:absolute; top:32px; left:8%; right:8%; height:2px; background:var(--line); z-index:1;
}
@media (max-width:900px){
  .flow-row{ flex-wrap:wrap; row-gap:32px; }
  .flow-row::before{ display:none; }
  .flow-node{ flex:0 0 33.33%; }
}
@media (max-width:560px){
  .flow-node{ flex:0 0 50%; }
}

/* Diagram wrapper */
.diagram{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; }
.diagram svg{ width:100%; height:auto; display:block; }
.diagram-caption{ margin-top:16px; font-size:13px; color:var(--text-dim); text-align:center; }

/* One-Stop process loop: 7 pill cards arranged evenly around a circle, sitting on
   top of (and breaking up) a single dashed ring. The pills themselves
   (.loop-item/.loop-icon/.loop-label) are unchanged. Circulation is expressed by the
   ring's dash color pulsing gray->orange->gray on an infinite loop. */
.loop-diagram{ position:relative; width:100%; max-width:960px; margin:0 auto; }
.loop-diagram--circle{ max-width:480px; aspect-ratio:1/1; }
.loop-diagram-lines{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
/* Gray track stays put; the orange ring grows on top of it, starting at 01 (rotated
   -90deg so the path's default 3-o'clock start becomes 12-o'clock) and sweeping
   clockwise through 02..07 before snapping back to empty and looping. */
.circle-track{ fill:none; stroke-width:2.5; stroke-dasharray:14 12; stroke-linecap:round; stroke:var(--text-dim); }
.circle-fill{
  fill:none; stroke-width:2.5; stroke-linecap:round; stroke:var(--red);
  stroke-dasharray:1885; stroke-dashoffset:1885;
  animation:circleFill 8s linear infinite;
}
@keyframes circleFill{
  0%{ stroke-dashoffset:1885; }
  85%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:0; }
}

/* Each pill's outline lights up orange the instant the sweep above passes its
   position (7 separate keyframes since each pill flips at a different point in the
   shared 8s cycle — the circumference is split into 7 equal 1/7 spans, matching
   01..07), then reverts to gray in sync with the ring's own reset. */
.loop-diagram--circle .loop-node:nth-of-type(1) .loop-item{ animation:pillLit1 8s linear infinite; }
.loop-diagram--circle .loop-node:nth-of-type(2) .loop-item{ animation:pillLit2 8s linear infinite; }
.loop-diagram--circle .loop-node:nth-of-type(3) .loop-item{ animation:pillLit3 8s linear infinite; }
.loop-diagram--circle .loop-node:nth-of-type(4) .loop-item{ animation:pillLit4 8s linear infinite; }
.loop-diagram--circle .loop-node:nth-of-type(5) .loop-item{ animation:pillLit5 8s linear infinite; }
.loop-diagram--circle .loop-node:nth-of-type(6) .loop-item{ animation:pillLit6 8s linear infinite; }
.loop-diagram--circle .loop-node:nth-of-type(7) .loop-item{ animation:pillLit7 8s linear infinite; }
@keyframes pillLit1{ 0%,1%{ border-color:var(--text-dim); } 1.01%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes pillLit2{ 0%,12.14%{ border-color:var(--text-dim); } 12.15%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes pillLit3{ 0%,24.29%{ border-color:var(--text-dim); } 24.3%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes pillLit4{ 0%,36.43%{ border-color:var(--text-dim); } 36.44%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes pillLit5{ 0%,48.57%{ border-color:var(--text-dim); } 48.58%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes pillLit6{ 0%,60.71%{ border-color:var(--text-dim); } 60.72%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes pillLit7{ 0%,72.86%{ border-color:var(--text-dim); } 72.87%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@media (prefers-reduced-motion: reduce){
  .circle-fill{ animation:none; stroke-dashoffset:1885; }
  .loop-diagram--circle .loop-item{ animation:none; }
}
.loop-node{ position:absolute; z-index:2; transform:translate(-50%,-50%); }
/* 7 points evenly spaced on a circle always have IDENTICAL center-to-center spacing
   (2*R*sin(pi/7)) — so a pill only overlaps its neighbor if its own width grows past
   that shared gap. Number + label stay on one line (no wrap), so the pills are kept
   compact (small icon, tight padding, single-digit numbers) to fit every language's
   longest label within that shared gap without colliding. */
.loop-item{
  display:flex; align-items:center; gap:7px;
  padding:6px 12px 6px 6px; border-radius:999px; background:var(--surface); border:1px solid var(--text-dim);
  white-space:nowrap;
}
.loop-icon{
  width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--icon-bg);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.loop-icon img{ width:100%; height:100%; object-fit:cover; }
.loop-icon--inspect svg{ width:20px; height:20px; }
.loop-label{ font-size:11px; font-weight:700; color:var(--text); white-space:nowrap; }
@media (max-width:760px){
  .loop-item{ padding:5px 10px 5px 5px; gap:5px; }
  .loop-icon{ width:26px; height:26px; }
  .loop-label{ font-size:9px; }
}
@media (max-width:560px){
  .loop-diagram--circle{ max-width:420px; }
  .loop-label{ font-size:8px; }
}

/* Triangular cyclic process diagram (Development card) — big circles with the
   number + label set inside. The 3 nodes sit 120deg apart on a shared circle
   (a true equilateral layout), and each connecting arc is a real segment of that
   same circle (SVG "A" command, constant radius) — not an approximated curve —
   so the lines read as perfectly round, not distorted.
   Same gray-track / orange-fill mechanic as the one-stop loop above: the 3 arcs
   are one continuous path (dasharray = combined arc length), so the fill sweeps
   1->2->3->1 and each circle's outline lights up the instant the sweep reaches it. */
.tri-cycle{ position:relative; width:100%; max-width:340px; aspect-ratio:1/1; margin:20px auto 0; }
.tri-cycle-lines{ position:absolute; inset:0; width:100%; height:100%; }
.tri-track{ fill:none; stroke-width:3; stroke-linecap:round; stroke:var(--text-dim); }
.tri-fill{
  fill:none; stroke-width:3; stroke-linecap:round; stroke:var(--red);
  stroke-dasharray:440; stroke-dashoffset:440;
  animation:triFill 4.5s linear infinite;
}
@keyframes triFill{
  0%{ stroke-dashoffset:440; }
  85%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:0; }
}
/* Sized as % of .tri-cycle (a definite width) rather than fixed px, so the circles
   always scale with the container instead of overflowing/overlapping in narrower
   card widths (e.g. the 2-up grid before it collapses to 1 column). */
.tri-node{ position:absolute; transform:translate(-50%,-50%); z-index:2; width:34.21%; }
.tri-circle{
  width:100%; aspect-ratio:1/1; border-radius:50%; background:var(--surface-2); border:2px solid var(--text-dim);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px;
}
.tri-node:nth-of-type(1) .tri-circle{ animation:triNodeLit1 4.5s linear infinite; }
.tri-node:nth-of-type(2) .tri-circle{ animation:triNodeLit2 4.5s linear infinite; }
.tri-node:nth-of-type(3) .tri-circle{ animation:triNodeLit3 4.5s linear infinite; }
@keyframes triNodeLit1{ 0%,1%{ border-color:var(--text-dim); } 1.01%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes triNodeLit2{ 0%,28.33%{ border-color:var(--text-dim); } 28.34%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@keyframes triNodeLit3{ 0%,56.67%{ border-color:var(--text-dim); } 56.68%,99.9%{ border-color:var(--red); } 100%{ border-color:var(--text-dim); } }
@media (prefers-reduced-motion: reduce){
  .tri-fill{ animation:none; stroke-dashoffset:440; }
  .tri-circle{ animation:none; }
}
.tri-circle .tri-num{ font-size:13px; font-weight:600; color:var(--text); }
.tri-circle .tri-text{ font-size:11px; font-weight:500; color:var(--text); line-height:1.35; padding:0 10%; }
@media (min-width:900px){
  .tri-circle .tri-num{ font-size:16px; }
  .tri-circle .tri-text{ font-size:13.5px; }
}

/* Equipment / spec list */
.spec-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.spec-item{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--line); }
.spec-item .dot{ width:8px; height:8px; border-radius:50%; background:var(--red-soft); margin-top:6px; flex-shrink:0; }
.spec-item p{ font-size:14px; color:var(--text-mid); }

/* R&D "Laboratory & Testing" cards: point image + text, 3-up, filling the section width */
.lab-card{ text-align:center; }
.lab-card-img{
  aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; background:var(--bg-2);
  margin-bottom:18px;
}
.lab-card-img img{ width:100%; height:100%; object-fit:cover; }
.lab-card p{ font-size:14px; color:var(--text-mid); text-align:left; }

/* Test-equipment inventory: a compact multi-column grid (not a tall single list) so
   17 items stay a short, wide block instead of a long scroll. Sits on a true dark
   section (.section--dark-accent) alongside the photo carousel below it, so the
   section-head text needs its own light-on-dark colors — the equip-row cards keep
   their own white background regardless, so they don't need any override. */
.section--dark-accent .section-kicker{ color:var(--amber); }
.section--dark-accent .section-kicker::before{ background:var(--amber); }
.section--dark-accent .section-title{ color:#f7f4f0; }
.section--dark-accent .section-desc{ color:rgba(255,255,255,.65); }
.equip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
/* Matches the home page's 4-up stat cards (.stat-figure/.stat-lead on the dark
   .section--dark-accent band) in structure and palette, but with the emphasis
   inverted: the number is the small label here, the equipment name is the content
   that needs to read clearly, so it gets the size and weight instead. */
.equip-row{
  display:flex; flex-direction:column; gap:8px; padding:20px 18px;
  background:transparent; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md);
}
.equip-row .num{ font-size:11px; font-weight:700; color:var(--red); letter-spacing:.04em; }
.equip-row .name{ font-size:16px; font-weight:600; color:#f7f4f0; line-height:1.4; }
@media (max-width:900px){ .equip-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .equip-grid{ grid-template-columns:1fr; } }

/* Peek carousel: center card full width, neighbors cropped at the edges, auto-advancing
   and looping (see main.js). Side padding = (100% - card width)/2 so scroll-snap-align:
   center lands each card dead-center with equal peek on both sides. A mask-image fades
   the side cards out at the edges instead of the hard clip a plain overflow:hidden gives —
   the crop is still there (mask still needs a box to fade within), it just now dissolves
   into the section background instead of cutting sharply. */
.peek-carousel{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.peek-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 20% 14px;
  scrollbar-width:none; -ms-overflow-style:none; /* the custom .peek-nav bar below replaces this */
}
.peek-track::-webkit-scrollbar{ display:none; }
.peek-card{
  position:relative; flex:0 0 60%; scroll-snap-align:center; margin:0; aspect-ratio:4/3;
  border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2);
}
.peek-card img{ width:100%; height:100%; object-fit:cover; }
.peek-card::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.14); pointer-events:none; }
@media (max-width:760px){
  .peek-track{ padding:4px 12% 14px; gap:14px; }
  .peek-card{ flex-basis:76%; }
}

/* Carousel progress nav: thin light-gray track with a short, noticeably *thicker*
   orange pill riding on top of it (not just filling the track's own height — the
   track stays visible above/below the pill). The visual line is only 3px, so .peek-nav
   itself is a much taller invisible hit box (drawn via ::before instead of its own
   background) — otherwise the click/drag target would be a near-impossible 3px sliver.
   Width set in JS = 1/cardCount of the track. */
.peek-nav{ position:relative; max-width:260px; height:24px; margin:16px auto 0; cursor:pointer; touch-action:none; }
.peek-nav::before{
  content:""; position:absolute; top:50%; left:0; right:0; height:3px; transform:translateY(-50%);
  border-radius:999px; background:rgba(255,255,255,.22); pointer-events:none;
}
.peek-nav-thumb{
  position:absolute; top:50%; left:0; height:7px; transform:translateY(-50%);
  background:var(--red); border-radius:999px; pointer-events:none;
  transition:left .5s cubic-bezier(.2,.7,.15,1);
}

/* Chips (grievance-type tags on the Sustainable Management page) */
.chip-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ padding:14px 22px; border:1px solid var(--line); border-radius:10px; font-weight:600; font-size:14.5px; color:var(--text-mid); background:var(--surface); transition:.2s; }
.chip:hover{ border-color:var(--red-soft); background:rgba(255,90,30,.12); color:var(--text); }

/* Customer footprint image (Certifications page) */
.customer-map{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:#fff; }
.customer-map img{ width:100%; height:auto; display:block; }

/* Reusable process photo card: spec points overlaid directly on the image, text
   anchored to the bottom. Darkened image + gradient + a translucent backing on each
   chip triple up to keep the text legible regardless of what's underneath. Used by
   both the Plating and Assembly/Packaging sections. */
.overlay-photo{ position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:#2c2a28; }
/* Assembly's source photos are landscape (3:2), unlike Plating's — use this modifier
   to match the card shape to the actual image instead of forcing a portrait crop. */
.overlay-photo--wide{ aspect-ratio:3/2; }
.overlay-photo img{ width:100%; height:100%; object-fit:cover; filter:brightness(.85) saturate(.95); }
.overlay-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,8,.05) 0%, rgba(10,9,8,.15) 55%, rgba(10,9,8,.45) 100%);
}
.overlay-photo-text{
  position:absolute; inset:0; z-index:2; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; gap:14px;
}
.overlay-photo-text .spec-item{
  background:rgba(10,9,8,.68); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16);
}
.overlay-photo-text .spec-item .dot{ background:var(--red); }
.overlay-photo-text .spec-item p{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
@media (max-width:760px){
  .overlay-photo{ aspect-ratio:4/5.5; }
  .overlay-photo--wide{ aspect-ratio:3/2; }
  .overlay-photo-text{ padding:18px; gap:10px; }
}

/* Compliance / contact box */
.info-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 28px; }
.info-box h4{ font-weight:700; font-size:15px; margin-bottom:10px; color:var(--text); }
.info-box .row{ display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-bottom:1px dashed var(--line); }
.info-box .row:last-child{ border-bottom:none; }
.info-box .row .k{ color:var(--text-dim); }
.info-box .row .v{ font-weight:600; color:var(--text); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--bg); color:var(--text-mid); padding:80px 0 28px; border-top:1px solid var(--line-soft); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(0,0,0,.08); }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:13.5px; color:var(--text-dim); max-width:280px; }
.site-footer h5{ color:var(--text); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.site-footer .addr-block{ font-size:13.5px; margin-bottom:14px; }
.site-footer .addr-block .label{ color:var(--red-soft); font-weight:600; display:block; margin-bottom:2px; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ font-size:13.5px; color:var(--text-mid); transition:color .15s; }
.footer-links a:hover{ color:var(--text); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; color:var(--text-dim); flex-wrap:wrap; gap:12px; }
.footer-bottom .ethics{ color:var(--text-dim); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-6{ grid-template-columns:repeat(3,1fr); }
  .photo-strip{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  .brand{ margin-right:0; }
  .site-header .container{ justify-content:space-between; }
}
@media (max-width: 680px){
  .container{ padding:0 18px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .grid-6{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:64px 0; }
  .section-title{ font-size:26px; }
  .footer-top{ grid-template-columns:1fr; }
  .spec-list{ grid-template-columns:1fr; }
  .hero{ min-height:580px; }
}

/* Mobile nav drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:300; background:var(--bg); transform:translateX(100%);
  transition:transform .25s var(--ease); overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav .mn-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
.mobile-nav .mn-close{ width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:none; font-size:18px; color:var(--text); }
.mobile-nav ul{ padding:12px; }
.mobile-nav li > a, .mobile-nav li > button{ display:flex; width:100%; justify-content:space-between; align-items:center; padding:16px 12px; font-size:16px; font-weight:600; color:var(--text); border-bottom:1px solid var(--line-soft); background:none; border-top:none; border-left:none; border-right:none; text-align:left; }
.mobile-nav .sub{ padding-left:16px; display:none; }
.mobile-nav .sub.open{ display:block; }
.mobile-nav .sub a{ font-size:14.5px; font-weight:500; color:var(--text-mid); padding:12px; }
.mobile-nav .sub-title{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red-soft); padding:16px 12px 6px; }
.mobile-nav .sub-title:first-child{ padding-top:6px; }

/* ==========================================================================
   Custom cursor — small circle that replaces the native pointer and inverts
   whatever color is underneath it (mix-blend-mode:difference), matching the
   reference cursor at one-of-one-ai.com. Only enabled on fine-pointer (mouse/
   trackpad) devices via the .has-custom-cursor class added in main.js, so
   touchscreens keep their normal (cursor-less) behavior untouched.
   ========================================================================== */
.has-custom-cursor, .has-custom-cursor *{ cursor:none !important; }
.cursor-dot{
  position:fixed; top:0; left:0; width:20px; height:20px; border-radius:50%;
  background:#fff; mix-blend-mode:difference; pointer-events:none; z-index:9999;
  opacity:0; transition:opacity .2s var(--ease);
}
.cursor-dot.is-active{ opacity:1; }