/* ═════════════════════════════════════════════════════
   Metabiz Design — Final · Black Version
   Black background · White type · Editorial
   ═════════════════════════════════════════════════════ */

:root {
  --bg: #161616;
  --bg-soft: #161616;
  --bg-deep: #161616;
  --fg: #ffffff;
  --fg-mid: #b8b8b8;
  --fg-mute: #888888;
  --line: #2a2a2a;
  --line-strong: #e6e4df;
  /* Unified to Pretendard across the whole site */
  --instrument: 'Pretendard', system-ui, sans-serif;
  /* Display/heading face — Pretendard only (heavy weight applied per-element; see "Display heading weight" block) */
  --serif: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'Pretendard', system-ui, sans-serif;
  --t: .4s cubic-bezier(.4,0,.2,1);
}

/* Pages that revert to the original deep black across all sections */
body.dark-bg { background: var(--bg-deep); }

/* Korean pages — unify body typeface to Pretendard so embedded English brand
   names (e.g. "Metabiz Design") render at the same weight as Korean text. */
html[lang="ko"] body { font-family:'Pretendard', system-ui, sans-serif; }

/* About page bottom CTA — unify all copy to Pretendard (both EN and KO versions) */
body.page-about .cta-eyebrow,
body.page-about .cta-title,
body.page-about .cta-title em {
  font-family:'Pretendard', system-ui, sans-serif;
}
body.page-about .cta-title { font-weight:800; }
body.page-about .cta-title em { font-weight:800; font-style:normal; }

/* ─── NAV LANGUAGE TOGGLE (globe icon + lang code) ─── */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 6px 0;
  margin-left: 20px;
  transition: opacity .25s;
}
.nav-lang:hover { opacity: 0.7; }
.nav-lang svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 1.7; }
.nav:not(.scrolled) .nav-lang { color: #fff; }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--fg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img, video, svg { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
/* No italics anywhere — override the browser default italic on em/i */
em, i { font-style: normal; }

::selection { background:#ffffff; color:#161616; }

/* ─── NAV ─────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:38px;
  padding:0 4vw;
  height:70px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t), border-color var(--t), backdrop-filter var(--t), color var(--t);
}
.nav.scrolled {
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav:not(.scrolled) { color:#fff; }
.nav:not(.scrolled) .nav-cta { border-color:#fff; color:#fff; }
.nav:not(.scrolled) .nav-cta:hover { background:#fff; color:var(--fg); }

.nav-logo {
  display:flex; align-items:center;
  flex-shrink:0;
  text-decoration:none;
}
.nav-logo img {
  height:195px; width:auto;
  filter:brightness(0) invert(1);
  transition:filter var(--t);
}
.nav.scrolled .nav-logo img { filter:brightness(0) invert(1); }

.nav-menu {
  display:flex; gap:29px; align-items:center;
  font-size:13px; letter-spacing:.08em;
  text-transform:uppercase;
}
.nav-menu a {
  position:relative; padding:6px 0;
  font-weight:600;
  transition:opacity .25s;
}
.nav-menu a::after {
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
  transform:scaleX(1); transform-origin:left center;
}

.nav-cta {
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px;
  border:1px solid var(--fg);
  font-family:'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  font-size:13px; font-weight:500;
  letter-spacing:.02em;
  transition:background var(--t), color var(--t);
}
.nav-cta:hover { background:#1a2b4a; color:#fff; border-color:#1a2b4a; }
.nav-cta::after { content:"→"; transition:transform .3s; letter-spacing:0; }
.nav-cta:hover::after { transform:translateX(3px); }

/* ─── HERO (fullscreen video) ─────────────────────────── */
.hero {
  position:relative;
  height:100vh;
  min-height:680px;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
  z-index:0;
}

/* Solutions page case rows also card-flip (scoped via body class) */
body.solutions-page .solution-row {
  position:sticky;
  top:0;
  background:var(--bg);
}
.hero-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  background:#000;
  /* Crop the video's built-in cinematic letterbox bars at any viewport aspect.
     Larger scale ensures bars stay off-screen even when window is resized. */
  transform:scale(1.35);
  transform-origin:center center;
}
.hero-overlay {
  position:absolute; inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.62) 15%,
      rgba(0,0,0,0.38) 35%,
      rgba(0,0,0,0.15) 55%,
      rgba(0,0,0,0) 75%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.hero-head {
  position:relative;
  z-index:2;
  height:100%;
  max-width:1600px; margin:0 auto;
  padding:140px 4vw 180px;
  display:flex; flex-direction:column;
  justify-content:flex-end;
}
.hero-eyebrow {
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  margin-bottom:48px;
}
.hero-eyebrow::before {
  content:""; width:32px; height:1px; background:currentColor;
}
.hero-title {
  font-family:var(--instrument);
  font-weight:400;
  font-size:clamp(50px, 10vw, 166px);
  line-height:.92;
  letter-spacing:-0.035em;
  margin-bottom:48px;
  color:#fff;
}
.hero-title em { font-style:normal; font-weight:400; }
/* Korean hero — use Pretendard for comparison */
.hero-head {
  justify-content:center; /* vertically center the title in the hero viewport */
  padding-top:120px; /* clear the fixed nav */
  padding-bottom:120px; /* clear the partners bar at hero bottom */
}
/* Homepage typography — unified Pretendard for both EN and KO */
.hero-title {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(46px, 7.3vw, 122px);
  line-height:0.94;
  letter-spacing:-0.025em;
}
.hero-title em {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
  font-style:normal;
}
.solutions-header h2,
.sb-name {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
}
.sb-num {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:500;
}
.hero-meta {
  display:grid; grid-template-columns: 1fr 1fr; gap:48px;
  align-items:end;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.25);
}
.hero-sub {
  max-width:520px;
  font-size:19px;
  color:rgba(255,255,255,0.85);
  line-height:1.65;
}
.hero-marker {
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  text-align:right;
}

/* ─── HERO PARTNERS BAR (logos directly on hero video, no white panel) ─── */
.hero-partners {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  /* Subtle bottom darkening — no white panel; video remains visible */
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.05) 40%,
    rgba(0,0,0,0.2) 100%);
  overflow:hidden;
}
.hero-partners-inner {
  display:flex; align-items:center;
  padding:18px 48px 24px;
  gap:40px;
  max-width:1600px; margin:0 auto;
}
.hero-partners-label {
  flex-shrink:0;
  font-family:var(--sans);
  font-size:14px; font-weight:500;
  color:rgba(255,255,255,0.9);
  line-height:1.45;
  letter-spacing:-0.005em;
  min-width:200px;
  text-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.hero-partners-scroll {
  flex:1; overflow:hidden;
  position:relative;
  /* Edge fade by mask — logos enter/exit smoothly against video */
  mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.hero-partners-track {
  display:flex; gap:32px; align-items:center;
  width:max-content;
  animation:hero-marquee 60s linear infinite;
}
.partner-logo {
  width:160px; height:64px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.partner-logo img {
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  /* invert + grayscale: white-bg PNGs become black-bg + light logos.
     lighten blend: black bg disappears against video, light logo stays white. */
  filter:grayscale(1) invert(1) brightness(0.88);
  mix-blend-mode:lighten;
  transition:filter .35s;
}
.partner-logo:hover img {
  filter:grayscale(1) invert(1) brightness(1.05);
}
/* Per-logo scale normalization  */
.partner-logo img                  { --s:0.85; transform:scale(var(--s)); }
.partner-logo img[src*="gaurian"]  { --s:1.4; }
.partner-logo img[src*="kict"]     { --s:1.0; }
.partner-logo img[src*="ex"]       { --s:0.7; }
.partner-logo img[src*="busan"]    { --s:1.2; }
@keyframes hero-marquee {
  to { transform:translateX(-50%); }
}
@media (max-width: 900px) {
  .hero-partners-inner { padding:14px 24px 18px; gap:24px; }
  .hero-partners-label { font-size:12px; min-width:140px; }
  .partner-logo { width:120px; height:48px; }
}

/* ─── SECTION SHELL ───────────────────────────────────── */
.block {
  padding:100px 6vw;
  border-top:1px solid var(--line);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.block-head {
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:80px;
  margin-bottom:140px;
  align-items:start;
}
.block-marker {
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mute);
  position:sticky; top:120px;
}
.block-marker .num {
  font-family:var(--serif);
  font-style:normal;
  font-size:18px;
  letter-spacing:0; text-transform:none;
  color:var(--fg);
}
.block-title {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px, 6.5vw, 104px);
  line-height:.98;
  letter-spacing:-0.03em;
  max-width:18ch;
}
.block-title em { font-style:normal; }
.block-sub {
  margin-top:36px;
  font-size:20px;
  color:var(--fg-mid);
  max-width:560px;
  line-height:1.7;
}

/* ─── PRODUCT BLOCK ───────────────────────────────────── */
.product-grid {
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:120px;
  align-items:start;
  max-width:1600px; margin:0 auto;
}
.product-visual {
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  background:var(--bg);
}
.product-visual video {
  width:100%; height:100%;
  object-fit:cover;
}
.product-visual-tag {
  position:absolute; top:18px; left:18px; z-index:2;
  padding:6px 12px;
  background:rgba(255,255,255,0.95);
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg);
}
.product-content { padding-top:8px; }
.product-name {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(40px, 5vw, 72px);
  line-height:1;
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.product-name em { font-style:normal; }
.product-tagline {
  font-size:16px;
  color:var(--fg-mid);
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.feat-row {
  display:grid;
  grid-template-columns: 56px 1fr;
  gap:24px;
  padding:32px 0;
  border-bottom:1px solid var(--line);
}
.feat-row:last-child { border-bottom:none; }
.feat-num {
  font-family:var(--serif);
  font-style:normal;
  font-size:20px;
  color:var(--fg-mute);
  padding-top:6px;
}
.feat-body h3 {
  font-family:var(--sans);
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.01em;
  margin-bottom:10px;
}
.feat-body p {
  font-size:15px;
  color:var(--fg-mid);
  line-height:1.7;
}

/* ─── CASES ───────────────────────────────────────────── */
.case-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:96px 80px;
  max-width:1600px; margin:0 auto;
}
.case-card {
  display:block;
  cursor:pointer;
}
.case-img {
  width:100%; aspect-ratio: 5/4;
  overflow:hidden;
  background:#f1efe9;
  margin-bottom:28px;
  position:relative;
}
.case-img-bg {
  width:100%; height:100%;
  background-size:cover; background-position:center;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.case-card:hover .case-img-bg { transform:scale(1.04); }
.case-img-tag {
  position:absolute; top:18px; left:18px;
  padding:6px 12px;
  background:rgba(255,255,255,0.95);
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg);
}

.case-meta {
  display:flex; gap:16px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:14px;
}
.case-meta .case-num {
  font-family:var(--serif); font-style:normal;
  font-size:14px; letter-spacing:0; text-transform:none;
  color:var(--fg);
}
.case-title {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px, 2.4vw, 38px);
  line-height:1.12;
  letter-spacing:-0.02em;
  margin-bottom:18px;
}
.case-desc {
  font-size:15px;
  color:var(--fg-mid);
  line-height:1.7;
  margin-bottom:28px;
  max-width:54ch;
}
.case-stats {
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.case-stat-num {
  font-family:var(--serif);
  font-weight:500;
  font-size:32px;
  letter-spacing:-0.02em;
  line-height:1;
}
.case-stat-label {
  margin-top:8px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-mute);
}

.view-all {
  margin-top:140px; text-align:center;
}
.btn-line {
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 32px;
  border:1px solid var(--fg);
  font-family:'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  font-weight:500;
  font-size:14px; letter-spacing:.02em;
  transition:background var(--t), color var(--t);
}
.btn-line:hover { background:#1a2b4a; color:#fff; border-color:#1a2b4a; }
.btn-line .arr { transition:transform .3s; }
.btn-line:hover .arr { transform:translateX(4px); }

/* ─── SOLUTIONS BLOCK (editorial row layout) ──────────── */
.solutions-block {
  padding:0 6vw;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.solutions-header {
  max-width:1280px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.solutions-header h2 {
  font-family:'Pretendard', system-ui, sans-serif;
  font-size:clamp(46px, 7.3vw, 122px);
  letter-spacing:-0.02em;
  line-height:1;
  margin-bottom:24px;
  font-weight:800;
}
.solutions-header p {
  font-size:22px;
  color:var(--fg-mid);
  max-width:520px;
  line-height:1.75;
}
.sb-row {
  display:grid;
  grid-template-columns: 34% 1fr;
  gap:60px;
  max-width:none;
  margin:0;
  align-items:start;
  min-height:100vh;
  padding-top:15vh;
}
.sb-meta {
  padding-top:0;
  /* Allow the grid child to shrink below its intrinsic min-content so long
     nowrap spans don't push past the 28% column into the visual area. */
  min-width:0;
}
/* Let inline nowrap spans wrap naturally at ALL widths so long lines never
   overflow past the viewport edge. Korean copy is short enough to stay on one
   line (white-space:normal only wraps when text doesn't fit), while the longer
   English FAQ answers / descriptions now wrap instead of running off-screen on
   desktop too. Covers FAQ answers, product descriptions, hero/page subtitles,
   and any inline-nowrap content in <main>. (Mobile keeps .kr-nowrap-mobile via
   the later !important rule.) */
.sb-desc span,
.faq-answer span,
.page-sub span,
main [style*="white-space:nowrap"] { white-space: normal !important; }
.sb-title-row {
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:16px;
}
.sb-num {
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.22em;
  color:var(--fg-mute);
  flex-shrink:0;
  line-height:1;
  width:28px;
  /* Nudge down so cap-top visually aligns with cap-top of the big serif title */
  padding-top:10px;
}
.sb-name {
  font-family:'Pretendard', system-ui, sans-serif;
  font-size:clamp(44px, 5vw, 80px);
  letter-spacing:-0.03em;
  line-height:.95;
  font-weight:800;
  white-space:normal;
}
/* Desktop/tablet: keep short product names (e.g. GeoGenie X) on one line as
   the window resizes. Long names (Subway, Solar) carry inline white-space:normal
   in the HTML so they still wrap. Not applied on mobile to avoid horizontal overflow. */
@media (min-width: 641px) {
  .sb-name { white-space: nowrap; }
}
.sb-sub {
  font-size:22px;
  color:var(--fg-mid);
  margin-bottom:36px;
  font-style:normal;
  letter-spacing:.01em;
  /* Align left edge with the title (offset by .sb-num width + gap) */
  padding-left:48px;
}
.sb-desc {
  font-size:22px;
  color:var(--fg-mid);
  line-height:1.8;
  max-width:42ch;
  /* Same indentation as .sb-sub to align with title left edge */
  padding-left:48px;
}
.sb-visual {
  width:80.5%;
  aspect-ratio: 11/8;
  background:#0d0d0d;
  justify-self:end;
  overflow:hidden;
  position:relative;
  border-radius:12px;
}
/* No frame/shadow — a very soft vignette darkens the edges so the demo
   melts into the dark background instead of sitting on top of it. */
.sb-visual::after {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 55px 6px rgba(0,0,0,0.5);
  pointer-events:none;
}
.sb-visual video {
  filter:brightness(0.92) contrast(0.94) saturate(0.88);
}
.sb-visual img,
.sb-visual video {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (max-width: 900px) {
  .solutions-block { padding:160px 5vw 140px; }
  .solutions-header { margin-bottom:120px; }
  .sb-row {
    grid-template-columns: 1fr;
    gap:36px;
    margin-bottom:120px;
  }
  .sb-meta { padding-top:0; }
}
/* Tablet (e.g. iPad portrait): once the row stacks at ≤900px, mirror the mobile
   centered alignment so the product name, subtitle, description AND the video all
   line up centered — instead of text-left / video-right, which looked misaligned. */
@media (min-width: 641px) and (max-width: 900px) {
  .sb-num { display: none; }
  .sb-title-row { justify-content: center; gap: 0; }
  .sb-name { text-align: center; }
  .sb-sub { padding-left: 0; text-align: center; }
  .sb-desc { padding-left: 0; max-width: none; text-align: center; }
  .sb-visual { width: 100%; justify-self: stretch; }
}

/* ─── CAPABILITIES ────────────────────────────────────── */
/* ─── FAQ ─────────────────────────────────────────────── */
/* Compact spacing scoped to FAQ section so it fits in 100vh snap viewport */
.block-faq { padding:15vh 6vw 50px; padding-left:calc(6vw + 48px); justify-content:flex-start; }
.block-faq .block-head { grid-template-columns:1fr; gap:24px; margin-bottom:50px; }
.block-faq .block-title { margin-bottom:0; line-height:.8; }
.block-faq .block-sub { margin-top: -22px; }
.block-faq .faq-item summary { padding:18px 0; }
.faq-cta { margin-top:32px; max-width:1280px; }
/* Home FAQ nudged down slightly (desktop only) */
@media (min-width: 641px) {
  body.page-home .block-faq { padding-top: 19vh; }
}
/* Support page — categories use looser spacing between title and sub */
.page-support .block-faq .block-title { line-height:1; margin-bottom:16px; }
.page-support .block-faq .block-sub { margin-top:24px; }

.faq-list {
  max-width:1280px;
  margin:0;
  border-top:1px solid var(--line);
}
.faq-item {
  border-bottom:1px solid var(--line);
}
.faq-item summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:32px 0;
  transition:opacity .25s;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::marker { content:''; }
.faq-item summary:hover { opacity:0.7; }
.faq-q {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--fg);
}
.faq-mark {
  position:relative;
  flex-shrink:0;
  width:22px;
  height:22px;
}
.faq-mark::before,
.faq-mark::after {
  content:'';
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:1px;
  background:var(--fg);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-mark::after {
  transform:rotate(90deg);
}
.faq-item[open] .faq-mark::after {
  transform:rotate(0deg);
}
.faq-answer {
  padding:0 0 32px 0;
  max-width:70ch;
}
.faq-answer p {
  font-family:var(--sans);
  font-size:15px;
  color:var(--fg-mid);
  line-height:1.75;
}

/* ─── HISTORY FAQ (Year-only summary, detailed expand) ── */
.history-faq .faq-q {
  font-family:var(--serif);
  font-size:clamp(28px, 3vw, 44px);
  letter-spacing:-0.01em;
  line-height:1;
}
.history-faq .hist-title {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 1.8vw, 26px);
  letter-spacing:-0.015em;
  line-height:1.2;
  margin:0 0 12px;
  color:var(--fg);
}
.history-faq .faq-answer { max-width:780px; }
.history-faq .faq-answer p { margin-bottom:24px; }
.history-faq .hist-section { margin-top:20px; }
.history-faq .hist-label {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-mute);
  margin-bottom:10px;
}
.history-faq .hist-items {
  list-style:none;
  padding:0;
  margin:0;
}
.history-faq .hist-items li {
  position:relative;
  padding-left:18px;
  font-family:var(--sans);
  font-size:14px;
  color:var(--fg-mid);
  line-height:1.7;
}
.history-faq .hist-items li::before {
  content:'—';
  position:absolute;
  left:0;
  color:var(--fg-mute);
}

/* Compact history block so the section fits within 100vh snap viewport */
.block-history { padding:0 6vw 40px; justify-content:flex-start; }
.block-history .block-head { grid-template-columns:1fr; margin-top:12vh; margin-bottom:28px; }
.block-history .block-title { margin-bottom:0; line-height:.95; }
.block-history .block-sub { margin-top:24px; }
.block-history .faq-item summary { padding:14px 0; }
.block-history .faq-answer { padding-bottom:16px; }

/* ─── HISTORY · Year events (timeline inside each year accordion) ─── */
.year-events {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 6px 0 4px;
}
.year-event {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: flex-start;
}
.year-event-month {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  padding-top: 3px;
}
.year-event-body { min-width: 0; }
.year-event-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin-bottom: 6px;
}
.year-event-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-mid);
  margin: 0;
  max-width: 64ch;
}
.year-event-logos {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.history-logo {
  height: 28px;
  width: 120px;
  object-fit: contain;
  padding: 4px 10px;
  background: #fff;
  border-radius: 4px;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease;
}
/* Color restoration is bound to the parent .timeline-event hover (see about page
   inline styles) so the logo lights up together with the title scale-up. */

/* Award certificate thumbnail — portrait-oriented document image shown beneath
   recognition entries (e.g., 4IR Awards). Smaller and quieter than partner logos. */
.timeline-event-cert {
  margin-top: 14px;
}
.history-cert {
  height: 80px;
  width: auto;
  border-radius: 3px;
  opacity: 0.78;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: opacity .3s ease, transform .3s ease;
}

/* sb-row hero linkable elements */
.sb-name a { color: inherit; text-decoration: none; transition: opacity .25s; }
.sb-name a:hover { opacity: 0.7; }
.sb-visual-link { display: block; }
.sb-visual-link img { transition: opacity .3s; }
.sb-visual-link:hover img { opacity: 0.9; }
/* Placeholder for products still in development (no image exposure) */
.sb-visual-placeholder {
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse at 35% 40%, rgba(255,255,255,0.06) 0%, transparent 55%),
    linear-gradient(135deg, #1f1f1f 0%, #2c2c2c 50%, #1a1a1a 100%);
  border:1px solid var(--line);
  border-radius:4px;
  position:relative;
}
.sb-visual-placeholder::after {
  content:'Coming Soon';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-mute);
}
.block-history .history-faq .faq-q { font-size:clamp(24px, 2.4vw, 36px); }
.block-history .history-faq .hist-title { font-size:clamp(17px, 1.4vw, 21px); margin-bottom:8px; }
.block-history .history-faq .faq-answer p { font-size:13px; line-height:1.6; margin-bottom:14px; }
.block-history .history-faq .hist-section { margin-top:14px; }
.block-history .history-faq .hist-label { font-size:10px; margin-bottom:6px; }
.block-history .history-faq .hist-items li { font-size:13px; line-height:1.55; }

/* ─── CTA ─────────────────────────────────────────────── */
.cta-block {
  padding:100px 6vw;
  text-align:center;
  border-top:1px solid var(--line);
  background:var(--bg-deep);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.cta-eyebrow {
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mid);
  margin-bottom:32px;
}
.cta-title {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(56px, 9vw, 144px);
  line-height:.96;
  letter-spacing:-0.035em;
  margin-bottom:48px;
}
.cta-title em { font-style:normal; }
.cta-row {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}
.btn-solid {
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 36px;
  background:#1a2b4a; color:#fff;
  font-family:'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  font-weight:500;
  font-size:14px; letter-spacing:.02em;
  transition:background var(--t);
}
.btn-solid:hover { background:#0f1a2e; color:#fff; }
.btn-solid .arr { transition:transform .3s; }
.btn-solid:hover .arr { transform:translateX(4px); }

/* ─── FOOTER ──────────────────────────────────────────── */
.footer {
  padding:80px 4vw 32px;
  background:var(--bg);
  border-top:1px solid var(--line);
}
.footer-top {
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:64px;
}
.footer-brand {
  font-family:var(--serif);
  font-size:32px; font-weight:500;
  letter-spacing:-0.02em;
  margin-bottom:16px;
}
.footer-brand em { font-style:normal; }
.footer-tag {
  font-size:14px; color:var(--fg); max-width:340px;
  line-height:1.65;
}
.footer-col h4 {
  font-family:var(--serif);
  font-size:32px; letter-spacing:-0.02em;
  text-transform:uppercase;
  margin-bottom:20px;
  font-weight:500;
}
.footer-col a, .footer-col p {
  display:block;
  font-size:14px;
  color:var(--fg);
  margin-bottom:10px;
  transition:opacity .25s;
}
.footer-col a:hover { opacity:.5; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:32px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-mute);
}
.footer-bottom a { margin-left:24px; }
.footer-bottom a:hover { color:var(--fg); }

/* ─── PAGE HEADER (inner pages) ───────────────────────── */
.page-header {
  padding:120px 4vw 100px;
  border-bottom:1px solid var(--line);
  background:var(--bg-deep);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page-header-inner {
  max-width:1600px; margin:0;
}
.page-header-eyebrow {
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mid);
  margin-bottom:40px;
}
.page-header-eyebrow::before {
  content:""; width:32px; height:1px; background:currentColor;
}
.page-title {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(56px, 7.6vw, 124px);
  line-height:.95;
  letter-spacing:-0.035em;
  margin-bottom:32px;
}
.page-title em { font-style:normal; }
.page-title.page-title-sm { font-size:clamp(40px, 5.2vw, 82px); }
.page-sub {
  max-width:680px;
  font-size:20px;
  color:var(--fg-mid);
  line-height:1.65;
}

/* ─── PRODUCT PAGE ────────────────────────────────────── */
.product-detail {
  padding:100px 4vw 40px;
  border-top:1px solid var(--line);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.product-detail-grid {
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:80px;
  max-width:1600px; margin:0;
  align-items:start;
}
.product-detail-content { display:flex; flex-direction:column; }
.product-detail.reverse .product-detail-grid {
  grid-template-columns: 1fr 1.1fr;
}
.product-detail.reverse .product-detail-visual { order:2; }
.product-detail-visual {
  position:relative;
  aspect-ratio: 4/3;
  background:#0d0d0d;
  overflow:hidden;
  border-radius:12px;
}
/* No frame/shadow — a very soft vignette darkens the edges so the demo melts into the dark background. */
.product-detail-visual::after {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 55px 6px rgba(0,0,0,0.5);
  pointer-events:none;
}
.product-detail-visual video {
  filter:brightness(0.92) contrast(0.94) saturate(0.88);
}
/* Compact FAQ accordion when used inside products page (right column) */
.product-faq .faq-item summary { padding:16px 0; }
.product-faq .faq-q { font-size:20px; }
.product-faq .faq-mark { width:18px; height:18px; }
.product-faq .faq-answer { padding:0 0 18px 0; }
.product-faq .faq-answer p { font-size:20px; line-height:1.65; }
/* Support + Home FAQ accordions — unified to 20px like the products page (desktop only; mobile pinned by the @media block below) */
body.page-support .faq-q { font-size:22px; }
body.page-support .faq-answer p { font-size:20px; }
body.page-home .faq-q { font-size:22px; }
body.page-home .faq-answer p { font-size:20px; }
.product-detail-visual.geo { background-image:url('images/geogenie-product.jpg'); background-size:cover; background-position:center; }
.product-detail-content h2 {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(44px, 5vw, 80px);
  line-height:1;
  letter-spacing:-0.025em;
  margin-bottom:8px;
}
.product-detail-content h2 em { font-style:normal; }
.product-detail-content .btn-line { margin-top:32px; align-self:flex-start; }
.product-detail-tagline {
  font-size:20px; color:var(--fg-mid);
  margin-bottom:20px; padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.product-detail-desc {
  font-size:20px; color:var(--fg-mid);
  line-height:1.65; margin-bottom:24px;
  max-width:54ch;
}

/* ─── FIELD CASES (within products page) ─────────────── */
.field-cases {
  padding: 40px 4vw 100px;
  background: var(--bg);
}
.field-cases-inner {
  max-width: 1600px;
  margin: 0;
}
.field-cases-head { margin-bottom: 40px; }
.field-cases-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 14px;
}
.field-cases-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.field-cases-title em {
  font-family: var(--instrument);
  font-style: normal;
  font-weight: 400;
}
.field-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.field-case {
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color .3s, transform .3s;
}
.field-case:hover {
  border-color: var(--fg-mute);
  transform: translateY(-2px);
}
.field-case-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-soft);
}
.field-case-img.fc-placeholder {
  background: linear-gradient(135deg, #1f1f1f 0%, #2e2e2e 100%);
}
.field-case-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.field-case-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.field-case-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--fg-mid);
}
.field-case-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.field-case-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-mid);
  margin-bottom: 20px;
  flex: 1;
}
.field-case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.field-case-stats > div { display: flex; flex-direction: column; gap: 4px; }
.fc-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fc-num em {
  font-style: normal;
  font-family: var(--instrument);
  font-weight: 400;
}
.fc-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.2;
}
@media (max-width: 1000px) {
  .field-cases-grid { grid-template-columns: 1fr; }
}


/* ─── INLINE FIELD CASES (Option B — inside product content) ─── */
.inline-cases {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.inline-cases-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 14px;
}
.inline-case {
  display: block;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.inline-case:last-child { border-bottom: 0; }
.inline-case > summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 64px 1fr auto 18px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  transition: padding-left .25s ease;
}
.inline-case > summary::-webkit-details-marker { display: none; }
.inline-case > summary::marker { content: ''; }
.inline-case > summary:hover { padding-left: 6px; }
.inline-case-thumb {
  width: 64px;
  height: 44px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-soft);
}
.inline-case-thumb.fc-placeholder {
  background: linear-gradient(135deg, #1f1f1f 0%, #2e2e2e 100%);
}
.inline-case-text { min-width: 0; }
.inline-case-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.inline-case-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.inline-case-stat {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg);
  white-space: nowrap;
}
.inline-case-stat em {
  font-style: normal;
  font-family: var(--instrument);
  font-weight: 400;
}
.inline-case .faq-mark {
  width: 14px;
  height: 14px;
}
.inline-case-detail {
  padding: 4px 0 18px 78px;
}
.inline-case-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-mid);
  margin-bottom: 12px;
  max-width: 60ch;
}
.inline-case-fullstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 360px;
}
.inline-case-fullstats > div { display: flex; flex-direction: column; gap: 3px; }

.product-detail-list { list-style:none; }
.product-detail-list li {
  display:grid; grid-template-columns: 28px 1fr;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.product-detail-list .li-mark {
  font-family:var(--serif); font-style:normal;
  font-size:18px; color:var(--fg);
}
.product-detail-list strong {
  display:block;
  font-size:17px; font-weight:600;
  letter-spacing:-0.005em;
  margin-bottom:6px;
}
.product-detail-list .li-desc {
  font-size:14px; color:var(--fg-mid);
  line-height:1.7;
}
.product-detail-tags {
  display:flex; flex-wrap:wrap; gap:8px;
  margin:20px 0 24px;
}
.product-detail-tag {
  padding:8px 14px;
  border:1px solid var(--line-strong);
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}

/* ─── SOLUTIONS GRID ──────────────────────────────────── */
.solutions-list {
  max-width:1600px; margin:0;
}
.solution-row {
  display:grid;
  grid-template-columns: 80px 1.2fr 1.4fr;
  gap:48px;
  padding:48px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:background var(--t);
}
/* Solutions page case rows snap to full viewport */
body.solutions-page .solution-row {
  min-height:100vh;
  align-items:center;
  padding:60px 4vw;
}
.solution-row:first-child { border-top:1px solid var(--line); }
.solution-row:hover { background:var(--bg-soft); }
.solution-row-num {
  font-family:var(--serif); font-style:normal;
  font-size:24px;
  color:var(--fg);
  padding-top:6px;
}
.solution-row-img {
  aspect-ratio: 4/3;
  overflow:hidden;
  background:#f1efe9;
  background-size:cover; background-position:center;
}
.solution-row-content h3 {
  font-family:var(--serif);
  font-weight:400;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:16px;
}
.solution-row-meta {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:20px;
}
.solution-tag {
  padding:5px 12px;
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-mid);
}
.solution-row-desc {
  font-size:15px; color:var(--fg-mid);
  line-height:1.7; margin-bottom:24px;
}
.solution-row-stats {
  display:flex; gap:48px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.sol-stat-num {
  font-family:var(--serif);
  font-weight:500;
  font-size:28px;
  letter-spacing:-0.02em;
  line-height:1;
}
.sol-stat-label {
  margin-top:6px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-mute);
}

/* ─── ABOUT PAGE ──────────────────────────────────────── */
.about-section {
  padding:100px 4vw;
  border-top:1px solid var(--line);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-grid {
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap:80px;
  max-width:1600px; margin:0;
  align-items:start;
}
.about-photo {
  aspect-ratio: 1/1;
  max-width:420px;
  background:var(--bg-soft);
  overflow:hidden;
}
.about-photo img { width:100%; height:100%; object-fit:cover; }
.about-section:not(.about-section-reverse) .about-photo { transform:translateX(112px); }
.about-section:not(.about-section-reverse) .about-content { padding-top:24px; }
.about-section-reverse .about-grid { grid-template-columns: 1.4fr 1fr; }
.about-section-reverse .about-photo { justify-self:end; transform:translateX(clamp(-240px, calc(498px - 49vw), -56px)); }
.about-section-reverse .about-content { padding-top:24px; transform:translateX(clamp(64px, 8vw, 128px)); }
/* CTO overlap layout only: narrow the bio text so it wraps and clears the
   left-shifted photo instead of running under it. */
@media (min-width: 1281px) {
  .about-section-reverse .about-content p { max-width: 46ch; }
}
/* Stack to single column at narrower viewports — photo on top, content below */
@media (max-width: 1280px) {
  .about-section .about-grid,
  .about-section-reverse .about-grid { grid-template-columns:1fr; gap:48px; }
  .about-section:not(.about-section-reverse) .about-photo,
  .about-section-reverse .about-photo { transform:none; justify-self:center; }
  .about-section:not(.about-section-reverse) .about-content,
  .about-section-reverse .about-content { transform:none; padding-top:0; }
  .about-section-reverse .about-photo { order:-1; }
}
.about-content h2 {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(40px, 5vw, 72px);
  line-height:1;
  letter-spacing:-0.025em;
  margin-bottom:16px;
}
.about-content h2 em { font-style:normal; }
.ceo-linkedin {
  display:inline-flex; align-items:center;
  margin-left:.18em;
  color:#0a66c2;
  transition:color .2s;
  vertical-align:.06em;
}
.ceo-linkedin:hover { color:#4a9eff; }
.ceo-linkedin svg { width:.45em; height:.45em; display:block; }
.ceo-subtitle {
  font-family:'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  font-weight:500;
  font-size:18px;
  letter-spacing:.01em;
  color:var(--fg-mid);
  margin-top:-4px;
  margin-bottom:28px;
}
.about-content .role {
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mid);
  margin-bottom:32px;
}
.about-content p {
  font-size:18px; color:var(--fg-mid);
  line-height:1.75; margin-bottom:20px;
  max-width:60ch;
}

/* ─── CONTACT ─────────────────────────────────────────── */
.contact-section {
  padding:100px 4vw;
  border-top:1px solid var(--line);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-grid {
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: auto auto;
  column-gap:80px;
  row-gap:24px;
  max-width:1600px; margin:0;
  align-items:start;
}
.contact-info { grid-column:1; grid-row:1; }
.contact-info h2 {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(40px, 4.5vw, 64px);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin-bottom:24px;
}
.contact-info h2 em { font-family:'Pretendard', system-ui, sans-serif; font-style:normal; font-weight:500; }
.contact-info p { font-family:'Pretendard', system-ui, sans-serif; color:var(--fg-mid); line-height:1.7; max-width:44ch; }
.contact-list {
  grid-column:1; grid-row:2;
  border-top:1px solid var(--line);
}
.contact-row {
  display:grid; grid-template-columns: 110px 1fr;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.contact-row-label {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:500;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-mute);
  padding-top:4px;
}
.contact-row-value {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:500;
  font-size:20px;
  letter-spacing:-0.005em;
}
.contact-row-map .contact-row-value iframe {
  display:block;
  width:100%;
  max-width:400px;
  aspect-ratio: 2/1;
  border:0;
  border-radius:4px;
  background:var(--bg-soft);
  filter:invert(0.92) hue-rotate(180deg) saturate(0.6);
}

.contact-form {
  grid-column:2; grid-row:2;
  display:flex; flex-direction:column;
  gap:24px;
  padding-top:29px; /* matches .contact-list (1px border + 24px row pad + 4px label pad) so first labels share a baseline */
  border-top:1px solid var(--line); /* visible top line aligned with .contact-list's top border */
}
/* Compact variant — used when contact-info block is omitted (e.g. contact-ko) */
.contact-grid-compact { grid-template-rows: auto; row-gap: 0; }
.contact-grid-compact .contact-list { grid-row: 1; }
.contact-grid-compact .contact-form { grid-row: 1; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label {
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:500;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-mid);
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family:'Pretendard', system-ui, sans-serif;
  font-size:16px;
  background:transparent;
  color:var(--fg);
  border:none;
  border-bottom:1px solid var(--line-strong);
  padding:10px 0;
  outline:none;
  transition:border-color var(--t);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color:var(--fg);
}
.form-group textarea {
  resize:vertical; min-height:120px;
}
.form-group select option {
  background:var(--bg-deep);
  color:var(--fg);
  font-family:'Pretendard', system-ui, sans-serif;
  padding:8px 12px;
}

/* Contact page — unify all body text sizes to the company-name value (20px). Desktop only; page title kept as-is. */
@media (min-width: 641px) {
  body.page-contact .page-sub,
  body.page-contact .contact-row-label,
  body.page-contact .contact-row-value,
  body.page-contact .form-group label,
  body.page-contact .form-group input,
  body.page-contact .form-group select,
  body.page-contact .form-group textarea,
  body.page-contact .contact-form .btn-solid {
    font-size: 20px;
  }
}

/* Contact page (desktop) — align the left info-list separators and the right
   form underlines on the same horizontal grid by giving BOTH columns equal
   fixed-height rows. Label sits to the left of the line in both. */
@media (min-width: 641px) {
  body.page-contact .contact-row,
  body.page-contact .form-group {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    align-items: start;
    min-height: 84px;   /* rows keep 84px (lines stay aligned) but grow for longer values, e.g. the EN address */
    box-sizing: border-box;
    padding: 22px 0 8px 0;
  }
  body.page-contact .contact-row-value { line-height: 1.3; }
  body.page-contact .contact-row-label { padding-top: 0; }

  /* Right form: remove the input's own underline/padding and put the (white)
     line on the row itself at the fixed bottom — same y as the left separators. */
  body.page-contact .contact-form { gap: 0; padding-top: 0; }
  body.page-contact .form-group { border-bottom: 1px solid var(--line-strong); }
  body.page-contact .form-group:focus-within { border-bottom-color: var(--fg); }
  body.page-contact .form-group input,
  body.page-contact .form-group select,
  body.page-contact .form-group textarea {
    border-bottom: none;
    padding: 0;
  }
  /* Message field has a textarea — let it grow and sit below the aligned rows. */
  body.page-contact .form-group:has(textarea) {
    height: auto;
    padding: 22px 0 24px 0;
  }
}

/* ─── SCROLL PROGRESS ─────────────────────────────────── */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--fg);
  z-index:200;
  transition:width .1s linear;
}

/* ─── FADE-UP ANIMATION ───────────────────────────────── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1); }
.fade-up.visible { opacity:1; transform:none; }
/* Mobile: disable fade-up so sections appear instantly (no card-like reveal) */
@media (max-width: 640px) {
  .fade-up { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav { gap:24px; }
  .nav-menu { gap:24px; }
  .product-grid { grid-template-columns:1fr; gap:48px; }
  .case-grid { grid-template-columns:1fr; gap:64px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .block-head { grid-template-columns:1fr; gap:24px; margin-bottom:64px; }
  .block-marker { position:static; }
  .product-detail-grid,
  .product-detail.reverse .product-detail-grid { grid-template-columns:1fr; gap:48px; }
  .product-detail.reverse .product-detail-visual { order:0; }
  .about-grid, .contact-grid { grid-template-columns:1fr; gap:48px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap:48px; }
  .solution-row { grid-template-columns: 60px 1fr; gap:24px; }
  .solution-row-img { grid-column: 1 / -1; }
}
/* Tablet portrait (e.g. iPad Pro 11 at 834px): the full horizontal nav doesn't
   fit, so the language switcher on the far right gets clipped. Tighten the logo,
   gaps, side padding and CTA so the whole bar — including the globe/lang toggle —
   stays on screen. Mobile (hamburger, ≤640px) and desktop are untouched. */
@media (min-width: 641px) and (max-width: 900px) {
  .nav { gap: 16px; padding: 0 3vw; }
  .nav-logo img { height: 140px; }
  .nav-menu { gap: 16px; font-size: 12px; }
  .nav-cta { padding: 8px 12px; font-size: 12px; }
}
@media (max-width: 640px) {
  .nav { padding:16px 5vw; }
  .nav-cta { padding:9px 14px; font-size:11px; letter-spacing:.12em; }
  .hero { padding-top:120px; }
  .hero-meta { grid-template-columns:1fr; gap:16px; }
  .hero-marker { text-align:left; }
  .block { padding:96px 5vw; }
  .cap-grid { grid-template-columns: 1fr; }
  .case-stats { grid-template-columns: repeat(3, 1fr); gap:12px; }
  .case-stat-num { font-size:24px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction:column; gap:12px; align-items:flex-start; }
  .footer-bottom a { margin-left:0; margin-right:16px; }
}

/* ─── Mobile hamburger menu ─────────────────────────── */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  position: relative;
  z-index: 1010;
  color: inherit;
}
.nav-toggle-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  margin: 5px auto;
  transition: transform .3s ease, opacity .3s ease;
}
@media (max-width: 640px) {
  /* Mobile nav bar layout: [logo] ............ [hamburger] [globe] */
  .nav { padding: 0 12px 0 14px; gap: 8px; }
  .nav-cta { display: none !important; }   /* hide Request Demo on mobile */
  .nav-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 1;
    margin-left: auto;
  }
  .nav-lang {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 2;
    margin-left: 4px;
  }
  .nav-toggle { padding: 8px; }

  /* Hamburger overlay menu — top of stack so it covers any scrolled content */
  .nav-menu {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;          /* dynamic viewport height for mobile address bars */
    background: rgba(15,15,15,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1000;
  }
  /* Hide scroll progress bar (z-index:200) and any other floating UI while menu open */
  body.nav-open .scroll-progress { opacity: 0; }
  /* Boost the nav header z-index when menu is open so hamburger stays clickable */
  body.nav-open .nav { z-index: 1005; background: transparent !important; border-bottom-color: transparent !important; }
  .nav-menu a { padding: 12px 24px; color: #fff; }
  body.nav-open .nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  body.nav-open .nav-toggle-line:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
}

/* ═════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE FIXES (≤640px)
   Targets layout, typography, spacing, and tap-target issues
   across all pages.
   ═════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ─── Logo size: shrink from desktop 177px ─── */
  .nav-logo img { height: 120px; }
  .nav { height: 64px; }

  /* ─── Hero ─── */
  /* Use the small viewport height so the bottom partners bar is always visible
     on first load (with the address bar showing), across all mobile devices.
     Falls back to the base height:100vh on browsers without svh support. */
  .hero { min-height: 560px; height: 100svh; }
  .hero-head { padding: 100px 5vw 130px; }
  .hero-title {
    font-size: clamp(38px, 11vw, 64px) !important;
    line-height: 1.0;
    margin-bottom: 32px;
  }
  .hero-eyebrow { font-size: 10px; margin-bottom: 24px; }
  .hero-video { transform: scale(1.6); }    /* crop bars more aggressively */

  /* ─── Hero partners bar ─── */
  /* Extra bottom padding clears the iPhone home indicator / gesture bar. */
  .hero-partners-inner { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); gap: 16px; }
  .hero-partners-label { font-size: 9px; min-width: auto; letter-spacing: 0.08em; }
  .partner-logo { width: 96px; height: 36px; }

  /* ─── Page header (sub-pages) ─── */
  .page-header { padding: 126px 5vw 86px; min-height: auto; }
  .page-title { font-size: clamp(38px, 11vw, 60px) !important; line-height: 1.05; }
  .page-title-sm { font-size: clamp(34px, 10vw, 52px) !important; }
  .page-sub { font-size: 16px; line-height: 1.6; }
  .page-sub span[style*="nowrap"] { white-space: normal !important; }

  /* ─── Section padding (consistent across blocks) ─── */
  .block, .solutions-block, .product-detail, .about-section, .contact-section, .cta-block {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  .solutions-block { padding: 100px 5vw 80px; }
  .solutions-header {
    margin-bottom: 80px;
    /* Mobile-only spacing for Technologies group */
    padding-top: 59vh;
    padding-bottom: 14vh;
    min-height: 100vh;
  }
  .solutions-header h2 { font-size: clamp(36px, 10vw, 56px); }
  .solutions-header p { font-size: 16px; }

  /* ─── sb-row (Solution rows on index) ─── */
  .sb-row {
    min-height: auto !important;
    padding-top: 0 !important;
    margin-bottom: 300px;
    /* Stop below the fixed 64px nav when the hero arrow scrolls here, so the
       GeoGenie X title isn't cut off behind the nav. */
    scroll-margin-top: 88px;
  }
  .sb-row:last-child { margin-bottom: 0; }
  /* Hide product index numbers ("01", "02"...) on mobile and center-align title + sub + desc */
  .sb-num { display: none; }
  .sb-title-row { gap: 0; margin-bottom: 12px; justify-content: center; }
  .sb-name {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1.0;
    text-align: center;
  }
  .sb-desc { padding-left: 0 !important; }
  .sb-sub {
    padding-left: 0 !important;
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 20px;
    text-align: center;
  }
  .sb-desc {
    font-size: 15px;
    max-width: none;
    text-align: center;
  }
  .sb-visual { width: 100% !important; }

  /* ─── Products page detail sections ─── */
  .product-detail { padding-top: 80px; padding-bottom: 80px; }
  .product-detail-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .product-detail-content h2 { font-size: clamp(36px, 10vw, 52px) !important; }
  .product-detail-tagline { font-size: 16px; }
  .product-detail-desc { font-size: 16px; }
  .product-detail-desc span[style*="nowrap"] { white-space: normal !important; }
  .product-detail.reverse .product-detail-visual { order: 0; }
  .product-detail.reverse .product-detail-content { order: 1; }

  /* ─── About page ─── */
  .about-section { padding: 80px 5vw; }
  .about-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .about-photo { max-width: 320px; margin: 0 auto; }
  .about-content h2 { font-size: clamp(34px, 9vw, 48px) !important; }
  .ceo-subtitle { font-size: 12px; }
  .about-content p { font-size: 16px; }
  /* On mobile, photo first then text (reverse layout) */
  .about-section-reverse .about-content { order: 2; }
  .about-section-reverse .about-photo { order: 1; }
  /* Credentials block — keep simple stack */
  .about-section-reverse .profile-credentials { margin-top: 36px; }

  /* ─── CTA block ─── */
  .cta-block { padding: 80px 5vw 100px; }
  .cta-title { font-size: clamp(38px, 11vw, 60px) !important; }
  .cta-eyebrow { font-size: 10px; }
  .cta-row { flex-direction: column; gap: 12px; align-items: stretch; }
  .cta-row .btn-solid, .cta-row .btn-line { width: 100%; justify-content: center; }

  /* ─── FAQ ─── */
  .block-head { margin-bottom: 48px; }
  .block-title { font-size: clamp(32px, 9vw, 48px); }
  .block-sub { font-size: 15px; }
  .faq-q { font-size: 14px; }
  .faq-answer p { font-size: 13px; line-height: 1.7; }
  .faq-answer p span[style*="nowrap"] { white-space: normal !important; }
  /* Keep product accordion answers at their current mobile size (desktop-only bump to 20px) */
  .product-faq .faq-answer p { font-size: 15px; }
  /* Keep product accordion question at its current mobile size (desktop-only bump to 20px) */
  .product-faq .faq-q { font-size: 16px; }

  /* ─── Contact form ─── */
  .contact-section { padding: 80px 5vw; }
  .contact-grid, .contact-grid-compact {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-width: 440px;
    margin: 0 auto;       /* center the form container */
  }
  .contact-list { display: none !important; }   /* Hide company info on mobile */
  .contact-form {
    grid-column: 1 / -1 !important;
    grid-row: 1 / 2 !important;
    margin: 0 auto;
    width: 100%;
    padding-top: 0;
    border-top: none;
  }
  .contact-form .form-group label { font-size: 12px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px !important;   /* Prevent iOS auto-zoom on focus */
    padding: 12px 14px;
  }
  .contact-form button {
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    align-self: center !important;
    margin-top: 16px !important;
  }

  /* ─── Buttons (general) ─── */
  .btn-solid, .btn-line { padding: 11px 18px; font-size: 13px; }

  /* ─── Footer ─── */
  .footer { padding: 56px 5vw 32px; }
  .footer-top { gap: 36px; }
  .footer-brand { font-size: 16px; margin-bottom: 12px; }
  .footer-tag { font-size: 13px; line-height: 1.6; }
  .footer-col h4 { font-size: 16px; margin-bottom: 14px; }
  .footer-col a, .footer-col p { font-size: 13px; }

  /* ─── About page timeline (works with inline styles) ─── */
  .timeline-event-title { font-size: 15.5px !important; }
  .timeline-event-desc { font-size: 12.5px !important; line-height: 1.6 !important; }

  /* ─── Misc: prevent horizontal overflow ─── */
  body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }

  /* ─── Sticky / fixed positioned overrides (e.g., section snap) — disable on mobile ─── */
  .page-about main > section { min-height: auto; }
}

/* ═════════════════════════════════════════════════════════
   Smaller phones (≤380px) — extra tightening for cramped widths
   ═════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .nav { padding: 0 8px; }
  .nav-logo img { height: 100px; }
  .hero-title { font-size: 34px !important; }
  .page-title { font-size: 34px !important; }
  .sb-name { font-size: 28px !important; }
  .product-detail-content h2 { font-size: 30px !important; }
  .cta-title { font-size: 34px !important; }
}


/* ═════════════════════════════════════════════════════════
   HOME PAGE — Mobile typography bump (+20%)
   ═════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body.page-home .hero-title       { font-size: clamp(46px, 13.2vw, 77px) !important; }
  body.page-home .hero-eyebrow     { font-size: 12px; }
  body.page-home .solutions-header h2 { font-size: clamp(34px, 11vw, 67px); }
  body.page-home .solutions-header p  { font-size: 19px; }
  body.page-home .sb-name          { font-size: clamp(38px, 11vw, 62px) !important; }
  /* Subway product (3rd card) — title is long, smaller on mobile so "Subway Alignment" fits in one line */
  body.page-home .solutions-block > div:nth-of-type(4) .sb-name {
    font-size: clamp(32px, 8.6vw, 52px) !important;
  }
  body.page-home .sb-sub           { font-size: 16px; }
  body.page-home .sb-desc          { font-size: 18px; }
  body.page-home .block-title      { font-size: clamp(38px, 11vw, 58px); }
  body.page-home .block-sub        { font-size: 18px; }
  body.page-home .faq-q            { font-size: 17px; }
  body.page-home .faq-answer p     { font-size: 16px; }
  body.page-support .faq-q         { font-size: 17px; }
  body.page-support .faq-answer p  { font-size: 16px; }
  body.page-support .block-sub     { font-size: 18px; }
  body.page-support .block-faq .block-sub { margin-top: 4px; }
}


/* ═════════════════════════════════════════════════════════
   Scroll cue — thin animated down-arrow under "Technologies"
   ═════════════════════════════════════════════════════════ */
.solutions-header .scroll-cue {
  display: flex;
  justify-content: center;
  margin-top: 120px;
  opacity: 0.55;
  transition: opacity 0.4s ease;
  animation: scrollCueFloat 2.2s ease-in-out infinite;
  will-change: opacity, transform;
}
.solutions-header .scroll-cue svg {
  width: 55px;
  height: 55px;
  color: var(--fg);
  display: block;
}
@keyframes scrollCueFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (max-width: 640px) {
  .solutions-header .scroll-cue { margin-top: 48px; }
  .solutions-header .scroll-cue svg { width: 50px; height: 50px; }
}

/* Sub-page header down-arrow — Technologies/Support/About/Contact (desktop + mobile) */
.page-header.with-cue { position: relative; }
.page-header.with-cue .page-cue {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  opacity: 0.55;
  animation: scrollCueFloat 2.2s ease-in-out infinite;
  will-change: transform;
}
.page-header.with-cue .page-cue svg { width: 55px; height: 55px; color: var(--fg); display: block; }

@media (max-width: 640px) {
  /* Mobile: extra padding for content pages only (Contact stays at default 126/86) */
  body.page-products .page-header.with-cue,
  body.page-about .page-header.with-cue,
  body.page-support .page-header.with-cue {
    padding: 276px 5vw 236px;
  }
  body.page-products .page-header.with-cue { padding-bottom: 266px; }
  body.page-support .page-header.with-cue { padding-bottom: 326px; }
  /* Mobile arrow slightly higher and smaller */
  .page-header.with-cue .page-cue { bottom: 24px; }
  .page-header.with-cue .page-cue svg { width: 50px; height: 50px; }
  /* Contact: no arrow on mobile (desktop only) */
  body.page-contact .page-header.with-cue .page-cue { display: none; }
  /* History (About page) partner logos: full color on mobile (no hover) */
  .history-logo { opacity: 1; filter: grayscale(0); }
}



/* ═════════════════════════════════════════════════════════
   MOBILE — Remove all "card-like" full-viewport section effects
   Forces every major section to use natural content height so
   scrolling feels continuous (no chunky 100vh boundaries).
   Hero is intentionally excluded (keeps its 560px height).
   ═════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .block,
  .solutions-block,
  .solutions-header,
  .sb-row,
  .cta-block,
  .page-header,
  .product-detail,
  .about-section,
  .contact-section,
  body.solutions-page .solution-row {
    min-height: auto !important;
  }
  /* Sticky positioning can also feel "card-like" — disable on mobile */
  body.solutions-page .solution-row { position: static !important; }
  /* Trim solutions-header oversized padding (was 55vh) on mobile so the
     section doesn't fill the entire viewport. +15px breathing room each side. */
  .solutions-header {
    padding-top: 185px !important;
    padding-bottom: 180px !important;
  }
}


/* ═════════════════════════════════════════════════════════
   DISPLAY HEADING WEIGHT — unified across ALL viewports
   The base CSS declared font-weight:400 and relied on a
   'Pretendard Black' @font-face pointing at fonts/Pretendard-Black.woff2,
   which is not bundled (no fonts/ folder) → every var(--serif) title
   silently fell back to Pretendard 400, rendering too light and
   clashing with the explicitly-800 hero/page titles. That heavy font
   is removed; instead force explicit 800 (ExtraBold) on every display
   heading / name here so all titles match at every screen size.
   (Small decorative index numbers / stat figures keep their lighter
   weight on purpose.)
   ═════════════════════════════════════════════════════════ */
.page-title,
.page-title em,
.hero-title,
.hero-title em,
.solutions-header h2,
.sb-name,
.block-title,
.block-title em,
.product-name,
.product-detail-content h2,
.product-detail-content h2 em,
.product-detail-tagline,
.cta-title,
.cta-title em,
.faq-q,
.history-faq .faq-q,
.history-faq .hist-title,
.year-event-title,
.timeline-event-title,
.about-content h2,
.about-content h2 em,
.case-title,
.field-cases-title,
.field-case-name,
.inline-case-name,
.solution-row-content h3,
.footer-brand,
.footer-col h4 {
  font-weight: 800 !important;
}


/* Mobile-only line break helper: <br class="br-mobile"> renders only ≤640px */
.br-mobile { display: none; }
@media (max-width: 640px) { .br-mobile { display: inline; } }

/* Desktop-only line break helper: <br class="br-desktop"> hides ≤640px */
.br-desktop { display: inline; }
@media (max-width: 640px) { .br-desktop { display: none; } }

/* Hide element on mobile only */
.hide-mobile { display: inline; }
@media (max-width: 640px) { .hide-mobile { display: none; } }


/* Mobile-only inline nowrap: keeps a specific phrase together on small screens
   even when the parent span has been forced to white-space:normal. */
.kr-nowrap-mobile { white-space: normal; }
@media (max-width: 640px) {
  .kr-nowrap-mobile { white-space: nowrap !important; }
}