/* ============================================================
   ArthRegen — Brand System v0.2 implementation
   Strategic palette: Navy #1E3A8A · Blue #2168A0 · Teal #2DB1A4
   Type pair: Inter (Latin) + Pretendard (Korean) + IBM Plex Mono (data)
   ============================================================ */

:root {
  /* ---- Brand colors (Brand System v0.2 §5.2) ---- */
  --navy: #1E3A8A;          /* primary type, wordmark, primary UI */
  --navy-700: #182E6E;
  --navy-900: #0F1E54;
  --blue: #2168A0;          /* mid-tone, gradient anchor */
  --blue-mid: #2796A1;      /* interpolated mid-teal */
  --teal: #2DB1A4;          /* accent within range, data highlights */
  --teal-600: #229588;
  --teal-100: #E5F4F2;
  --teal-50:  #F2FAF8;

  /* ---- Neutrals (Brand System v0.2 §5.3) ---- */
  --ink: #0F172A;           /* body type on light surfaces */
  --ink-soft: #1F2937;      /* slightly softer ink for long copy */
  --slate: #475569;         /* secondary type, captions */
  --slate-300: #94A3B8;     /* tertiary, hairline-on-dark */
  --mist: #E2E8F0;          /* dividers, subtle backgrounds */
  --bone: #F8FAFC;          /* page backgrounds */
  --line: #E5E8EE;          /* slightly cooler hairline */
  --line-strong: #D5DAE3;
  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --bg-soft: #EEF2F8;
  --muted: #475569;
  --text: #0F172A;

  /* ---- Signature gradient (Brand System §5.5 — navy → blue → teal) ---- */
  --grad-brand: linear-gradient(90deg,
    #1E3A8A 0%,
    #2168A0 45%,
    #2796A1 80%,
    #2DB1A4 100%);
  --grad-brand-diag: linear-gradient(135deg,
    #1E3A8A 0%,
    #2168A0 45%,
    #2796A1 80%,
    #2DB1A4 100%);
  --grad-brand-soft: linear-gradient(135deg,
    rgba(30,58,138,.96) 0%,
    rgba(33,104,160,.92) 45%,
    rgba(39,150,161,.86) 80%,
    rgba(45,177,164,.82) 100%);
  --grad-brand-rule: linear-gradient(90deg,
    #1E3A8A 0%,
    #2168A0 45%,
    #2DB1A4 100%);

  /* ---- Typography (Brand System v0.2 §6) ---- */
  --f-sans: 'Inter','Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --f-display: var(--f-sans);
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Rhythm ---- */
  --container: 1200px;
  --container-narrow: 960px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  /* Restrained, clinical-brand shadows (Brand System §9: calm, restrained) */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 6px 18px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --shadow-focus: 0 0 0 3px rgba(45,177,164,.35);
  --nav-h: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-settle: cubic-bezier(.16,1,.3,1);

  /* ---- Section rhythm tokens ---- */
  --section-y: clamp(80px, 10vw, 144px);
  --section-y-tight: clamp(56px, 7vw, 96px);
}

/* -------- Skip link & a11y -------- */
.skip-link {
  position: absolute;
  left: 8px; top: 8px;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  z-index: 200;
  transform: translateY(-150%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* -------- Reset & base -------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Match the footer color so any overscroll (macOS rubber-band) past the
     footer or extra space on tall viewports doesn't reveal a white gap. */
  background: var(--navy-900);
}
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 19px;             /* upsized for stronger editorial presence */
  line-height: 1.65;           /* Latin default per §3.6, slightly loosened for breathability */
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern', 'liga', 'calt', 'ss01';
  text-rendering: optimizeLegibility;
}
@media (max-width: 720px) {
  body { font-size: 17px; line-height: 1.6; }
}
img, svg { max-width: 100%; display: block; }
main { flex: 1 0 auto; display: block; }
.site-footer { flex-shrink: 0; }
/* Footer doesn't need the nav dropdown — it was duplicated from the header
   markup. The hidden (opacity:0) absolute-positioned UL was extending past
   the body and inflating scrollHeight, creating dead space below the footer. */
.site-footer .site-nav__dropdown,
.site-footer .dropdown-caret { display: none; }
/* Mobile dropdowns (About, News) stay visible inside the hamburger drawer
   so users can expand to the sub-items (Company/Founder, Announcements/etc.)
   — the inline-nested layout is defined under the mobile media query below
   and the JS already toggles `.is-open` on the parent <li>. */
a { color: var(--navy); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--teal-600); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;            /* upsized weight for stronger title emphasis */
  text-wrap: balance;
}
/* Display (hero) — upsized for stronger presence */
.display, h1.display {
  font-size: clamp(3rem, 6vw, 4.5rem);
  letter-spacing: -0.024em;
  line-height: 1.04;
  font-weight: 700;
}
/* H1 — upsized */
h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
}
/* H2 — upsized */
h2 {
  font-size: clamp(2.5rem, 3.8vw, 3.375rem);
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: #1E293B;
}
/* H3 — upsized, bumped to SemiBold for clearer hierarchy */
h3 {
  font-size: clamp(1.3125rem, 1.7vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
h4 { font-size: 1.1875rem; letter-spacing: -0.006em; font-weight: 600; }

p  { margin: 0 0 1rem; text-wrap: pretty; }
::selection { background: rgba(45,177,164,.30); color: var(--ink); }

/* Korean rhythm: tighter break logic, taller line-height */
:lang(ko) { word-break: keep-all; line-break: strict; line-height: 1.72; }
[lang="ko"] { line-height: 1.72; }
/* Korean tracking on display headlines — slightly less aggressive than Latin */
h1[lang="ko"], h2[lang="ko"], h3[lang="ko"],
h1 [lang="ko"], h2 [lang="ko"], h3 [lang="ko"] { letter-spacing: -0.012em; }
/* Korean spans inside headings should inherit the heading's tight line-height,
   not the global :lang(ko) body line-height of 1.72.
   Also covers .grad spans nested inside lang="ko" — without this, :lang(ko)
   matches them too and forces 1.72 line-height on the gradient text, causing
   uneven line spacing when the gradient phrase wraps across lines. */
h1 [lang="ko"], h2 [lang="ko"], h3 [lang="ko"], h4 [lang="ko"],
h1[lang="ko"], h2[lang="ko"], h3[lang="ko"], h4[lang="ko"],
h1 .grad, h2 .grad, h3 .grad, h4 .grad { line-height: inherit; }

/* Mono accent class */
.mono, code, samp, kbd { font-family: var(--f-mono); }
.mono { color: var(--slate); font-size: .82em; letter-spacing: .01em; }

/* -------- Layout -------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px 0 48px; }
@media (max-width: 720px) { .container { padding: 0 22px 0 24px; } }
.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-y-tight) 0; }
/* Tighten the last section's bottom padding so it doesn't create a large
   empty gap above the footer */
main > section:last-child { padding-bottom: clamp(90px, 8.8vw, 138px); }
@media (min-width: 768px) {
  main > section:last-child { padding-bottom: clamp(110px, 10vw, 160px); }
}
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--navy-900); color: rgba(255,255,255,.82); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.82); }
.section--dark .lead { color: rgba(255,255,255,.78); }
/* Tighten the padding between two adjacent same-background sections so the
   transition reads as one continuous flow rather than two separate bands. */
.section:has(+ .section:not(.section--alt):not(.section--dark)) {
  padding-bottom: clamp(48px, 6vw, 88px);
}
.section + .section:not(.section--alt):not(.section--dark) {
  padding-top: clamp(48px, 6vw, 88px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--teal);
  flex-shrink: 0;
}
.section--dark .eyebrow { color: rgba(255,255,255,.72); }
.section--dark .eyebrow::before { background: var(--teal); }

/* Signature gradient text — for headline emphasis (Brand Guidelines §5.5).
   Used sparingly: gradient is connective element, not default surface.
   On light backgrounds the gradient reads navy → teal. On dark backgrounds
   the gradient lifts into teal-mint range to maintain contrast.
   Animated: background-size 200% + slow position shift creates subtle
   shimmer in the gradient without changing the color scheme. */
.grad {
  background: var(--grad-brand);
  background-size: 250% 250%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  animation: gradShift 6s ease-in-out infinite alternate;
}
@keyframes gradShift {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .grad { animation: none; }
}
.page-hero .grad,
.callout .grad,
.section--dark .grad {
  background: linear-gradient(90deg, #7DEFE8 0%, #4DDCD0 45%, #2DB1A4 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
          background-clip: text;
}
/* Hero — full brand-signature gradient (navy → blue → teal),
   brightness-lifted so the navy stop stays legible against the dark hero */
.hero .grad {
  background: linear-gradient(90deg,
    #6FA1DA 0%,
    #5BA8C9 35%,
    #4FBDB6 70%,
    #6FE5D8 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
          background-clip: text;
}
@supports not (background-clip: text) {
  .grad { color: var(--teal-600); -webkit-text-fill-color: currentColor; }
  .hero .grad, .page-hero .grad, .callout .grad, .section--dark .grad {
    color: #7DEFE8; -webkit-text-fill-color: currentColor;
  }
}

.lead {
  font-size: 1.0625rem;
  color: var(--slate);
  max-width: 62ch;
  line-height: 1.6;
  letter-spacing: -0.004em;
}
:lang(ko) .lead, [lang="ko"].lead, .lead[lang="ko"] { line-height: 1.72; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font: 500 1rem/1 var(--f-sans);
  letter-spacing: -0.002em;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-700); color: #fff; box-shadow: var(--shadow-md); }
.btn--accent { background: var(--teal); color: #fff; }
.btn--accent:hover { background: var(--teal-600); color: #fff; box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--bone); }
.btn--on-dark { background: #fff; color: var(--navy); }
.btn--on-dark:hover { background: var(--teal-100); color: var(--navy); }
.btn--link {
  padding: 0;
  background: transparent;
  color: var(--navy);
  border-radius: 0;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.btn--link:hover { color: var(--teal-600); background: transparent; box-shadow: none; }
.btn .arrow { transition: transform .2s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

/* -------- Nav -------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  /* 1fr auto 1fr grid centers the nav (auto column) within the viewport
     instead of just spacing it between logo and right-side items.
     Logo and right side get equal space on either side. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  gap: 24px;
}
/* Override the global .container's asymmetric padding (48px left / 32px right)
   on the nav so the menu sits true-center in the viewport. */
.site-nav__inner.container { padding-left: 32px; padding-right: 32px; }
.site-nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  justify-self: start;
}
.site-nav__logo img {
  display: block;
  width: auto;
  height: 42px;
}
@media (max-width: 720px) {
  .site-nav__logo img { height: 40px; }
}

/* Footer brand logo */
.site-footer__brand-img {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: 4px;
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__links a {
  display: inline-block;
  padding: 10px 14px;
  font-weight: 500;
  font-size: .9375rem;
  color: var(--ink);
  border-radius: 6px;
  transition: color .15s var(--ease);
}
.site-nav__links a:hover { color: var(--navy); }
.site-nav__links a.is-active { color: var(--navy); font-weight: 600; }

/* ── Dropdown sub-menu ── */
.site-nav__links li.has-dropdown { position: relative; }
.site-nav__links li.has-dropdown > a { display: inline-flex; align-items: center; gap: 4px; }
.dropdown-caret {
  display: inline-block;
  font-size: .65em;
  transition: transform .2s var(--ease);
  margin-left: 2px;
  color: var(--slate);
}
.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
  z-index: 60;
}
.site-nav__dropdown li { margin: 0; }
.site-nav__dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: 8px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus-visible {
  background: var(--bg-soft);
  color: var(--navy);
}
/* Show on hover (desktop) and keyboard focus */
.site-nav__links li.has-dropdown:hover > .site-nav__dropdown,
.site-nav__links li.has-dropdown:focus-within > .site-nav__dropdown,
.site-nav__links li.has-dropdown.is-open > .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__links li.has-dropdown:hover > a > .dropdown-caret,
.site-nav__links li.has-dropdown:focus-within > a > .dropdown-caret,
.site-nav__links li.has-dropdown.is-open > a > .dropdown-caret {
  transform: rotate(180deg);
  color: var(--navy);
}
.site-nav__links a.is-active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--teal);
  margin-top: 4px;
  border-radius: 2px;
}
/* Dropdown items: underline only the word, matching the nav bar's bar style
   (2px teal bar with a 4px gap below the text). Drawn on the visible lang
   <span> so it spans only the word width. */
.site-nav__dropdown a.is-active::after { display: none; }
.site-nav__dropdown a.is-active > span[lang] {
  display: inline-block;
  position: relative;
}
.site-nav__dropdown a.is-active > span[lang]::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--teal);
  margin-top: 4px;
  border-radius: 2px;
}
.site-nav__right { display: flex; align-items: center; gap: 14px; justify-self: end; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bone);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--line);
}
.lang-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--slate);
  padding: 6px 10px;
  font: 600 .75rem/1 var(--f-mono);
  letter-spacing: .08em;
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.lang-toggle button:hover { color: var(--navy); }
.lang-toggle button.is-active {
  background: var(--navy);
  color: #fff;
}

.nav-toggle {
  appearance: none;
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}

@media (max-width: 1080px) {
  .site-nav__links a { padding: 10px 10px; font-size: .9rem; }
}
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    padding: 12px 20px 24px;
    border-bottom: 1px solid var(--line);
    gap: 0;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: all .25s var(--ease);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .site-nav.is-open .site-nav__links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-nav__links a { padding: 14px 10px; border-bottom: 1px solid var(--line); border-radius: 0; }

  /* Mobile dropdown — render inline (nested) instead of absolute popover */
  .site-nav__dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--bg-alt);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s var(--ease);
  }
  .site-nav__links li.has-dropdown.is-open > .site-nav__dropdown { max-height: 280px; }
  .site-nav__dropdown a {
    padding: 12px 24px;
    font-size: .9rem;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .site-nav__dropdown li:last-child a { border-bottom: 0; }

  /* Mobile-only: News has no dropdown — render it as a plain link */
  .site-nav__links a[href="news.html"] + .site-nav__dropdown { display: none; }
  .site-nav__links a[href="news.html"] .dropdown-caret { display: none; }
}

/* -------- Hero -------- */
.hero {
  position: relative;
  min-height: 92dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 82% 8%, rgba(45,177,164,.18), transparent 60%),
    radial-gradient(720px 480px at 8% 95%, rgba(33,104,160,.22), transparent 65%),
    linear-gradient(150deg, #0c1c52 0%, #15276b 55%, #1E3A8A 100%);
  color: rgba(255,255,255,.86);
  padding: clamp(88px, 10vw, 140px) 0 clamp(50px, 5.3vw, 74px);
}
/* Force the grid to fill the container so `margin: 0 auto` centers based on
   the standard 1200px max-width (aligning hero text with the nav logo)
   instead of the grid's intrinsic 720px track width. */
.hero > .container.hero__grid { width: 100%; }
@media (max-width: 720px) {
  .hero {
    min-height: 0;
    display: block;
    padding: 76px 0 64px;
  }
  /* Shift the hero background video slightly left on mobile */
  .hero .hero__video { object-position: 20% center; }
}
/* Background video */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -3;
  pointer-events: none;
  filter: saturate(0.88) brightness(0.82) contrast(1.12) blur(1px);
}
/* Brand-color overlay layered on top of the video — stronger gradient so
   the teal/blue color shift reads clearly as the primary surface treatment */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 620px at 84% 6%, rgba(45,177,164,.32), transparent 62%),
    radial-gradient(900px 580px at 6% 96%, rgba(33,104,160,.36), transparent 64%),
    linear-gradient(150deg, rgba(8,18,52,.78) 0%, rgba(15,30,84,.66) 50%, rgba(30,58,138,.48) 100%);
  pointer-events: none;
}
/* Soft vertical wash + localized darken behind the text block for legibility
   (dot-grid texture removed — was distracting against the gradient) */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 24% 48%, rgba(8,18,52,.55), transparent 72%),
    linear-gradient(180deg, rgba(8,18,52,.42) 0%, rgba(8,18,52,.14) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.65) 60%, rgba(0,0,0,.35));
          mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.65) 60%, rgba(0,0,0,.35));
  pointer-events: none;
}

.hero h1 {
  color: #fff;
  max-width: 19ch;
  font-size: clamp(3.25rem, 6.5vw, 5rem);
  letter-spacing: -0.024em;
  line-height: 1.04;
  font-weight: 700;
  margin-bottom: 12px;
}
.hero .eyebrow {
  color: rgba(229,244,242,.92);
  font-size: 17px;
  margin-bottom: 20px;
}
.hero .eyebrow::before { background: var(--teal); }
.hero p {
  color: rgba(255,255,255,.78);
  font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
  max-width: 52ch;
  line-height: 1.65;
  margin-bottom: 8px;
}
.hero__cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero__chips {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(229,244,242,.92);
  white-space: nowrap;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.hero__chips li:hover {
  border-color: rgba(45,177,164,.5);
  background: rgba(45,177,164,.08);
}
.hero__chips li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(45,177,164,.45);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__chips li::before { animation: chipPulse 3s ease-in-out infinite; }
  .hero__chips li:nth-child(2)::before { animation-delay: 1s; }
  .hero__chips li:nth-child(3)::before { animation-delay: 2s; }
}
@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,177,164,.45); }
  50% { box-shadow: 0 0 0 6px rgba(45,177,164,0); }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 820px);
  gap: 60px;
  align-items: center;
  min-height: clamp(420px, 60vh, 620px);
}
@media (max-width: 860px) {
  .hero__chips { margin-top: 26px; }
}

/* -------- Section header -------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 40px;
}
.sec-head > div:first-child h2 { margin-bottom: 0; }
.sec-head p {
  margin: 0;
  max-width: 52ch;
  padding-top: 60px;
}
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  .sec-head p { padding-top: 0; max-width: none; }
}

/* -------- Cards -------- */
.cards { display: grid; gap: 20px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .cards--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .cards--3, .cards--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  display: flex; flex-direction: column; height: 100%;
  position: relative;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand-rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-settle);
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card:hover::after { transform: scaleX(1); }

/* Whole-card link variant */
a.card.card--link { text-decoration: none; color: inherit; }
a.card.card--link:hover { color: inherit; border-color: var(--navy); }
a.card.card--link:hover .card__link { color: var(--teal-600); }
a.card.card--link:hover .card__link .arrow { transform: translateX(3px); }
a.card.card--link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}
.card__link .arrow { display: inline-block; transition: transform .2s var(--ease); }

.card__tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--teal-100);
  color: var(--teal-600);
  margin-bottom: 20px;
  align-self: flex-start;
}
.card__name {
  font-family: var(--f-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--navy);
  margin: 2px 0 12px;
  letter-spacing: -0.018em;
  line-height: 1.2;
}
.card__desc {
  color: var(--slate);
  margin-bottom: 22px;
  flex: 1;
  line-height: 1.6;
  font-size: .9375rem;
}
@media (max-width: 720px) {
  .card__desc,
  .pillar p { font-size: .8125rem; }
}
.card__link {
  font-weight: 600;
  font-size: .875rem;
  color: var(--navy);
  display: inline-flex; align-items: center; gap: 6px;
}
.card__link:hover { color: var(--teal-600); }

/* Product visual */
.product-visual {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.product-visual--carti {
  background: radial-gradient(circle at 30% 40%, #2DB1A4 0%, transparent 52%),
              radial-gradient(circle at 70% 60%, #2168A0 0%, transparent 55%),
              linear-gradient(135deg, #0a1a4a, #1E3A8A);
}
.product-visual--meni {
  background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(45,177,164,.4) 0%, transparent 60%),
              linear-gradient(135deg, #15296b, #2DB1A4);
}
.product-visual--meniful {
  background: radial-gradient(circle at 20% 80%, rgba(45,177,164,.5) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(33,104,160,.45) 0%, transparent 50%),
              linear-gradient(135deg, #1E3A8A, #0a1a4a);
}
.product-visual__glyph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .92;
}
.product-visual--photo {
  padding: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(45,177,164,.10), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(33,104,160,.10), transparent 65%),
    var(--bone);
}
.product-visual--photo img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: 14px;
}
/* AR-001 (cell aggregates photo) and AR-002 (pipette/dECM) leave excess
   whitespace inside the product-visual frame — scale them up slightly so
   they fill the border like AR-003 does naturally. */
.product-visual--photo img[src*="carti-index"],
.product-visual--photo img[src*="meniful-index"] {
  padding: 0;
  transform: scale(0.92);
}

/* -------- Stats -------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.stat { background: #fff; padding: 36px 32px; }
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.022em;
  line-height: 1;
}
.stat__num em {
  color: var(--teal);
  font-style: normal;
  font-family: var(--f-mono);
  font-size: .5em;
  padding-left: 4px;
  vertical-align: top;
  font-weight: 500;
}
.stat__label {
  font-size: .8125rem;
  color: var(--slate);
  margin-top: 14px;
  line-height: 1.45;
  font-family: var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* -------- Feature row -------- */
.feature-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: start;
  margin-bottom: 90px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row--reverse { direction: rtl; }
.feature-row--reverse > * { direction: ltr; }
.feature-row__media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 30%, rgba(45,177,164,.12), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(33,104,160,.10), transparent 65%),
    var(--bone);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.feature-row__media:empty {
  background: var(--grad-brand-diag);
}
.feature-row__media:empty::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%);
  pointer-events: none;
}
.feature-row__media img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: 18px;
  display: block;
}
.feature-row ul {
  padding: 0; margin: 20px 0 0;
  list-style: none;
}
.feature-row li {
  padding: 12px 0 12px 28px;
  position: relative;
  border-top: 1px solid var(--line);
  color: var(--slate);
}
.feature-row li:first-child { border-top: 0; }
.feature-row li::before {
  content: "";
  position: absolute;
  left: 0; top: 19px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-100);
}
@media (max-width: 860px) {
  .feature-row, .feature-row--reverse { grid-template-columns: 1fr; gap: 30px; direction: ltr; margin-bottom: 56px; }
}

/* -------- Pull quote / callout -------- */
.callout {
  padding: clamp(32px, 4vw, 60px) clamp(40px, 5.5vw, 80px) clamp(42px, 5.2vw, 72px);
  /* Diagonal gradient — top-left to bottom-right, navy to blue. */
  background: linear-gradient(135deg, #1E3A8A 0%, #2566A0 100%);
  color: rgba(255,255,255,.86);
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}
.callout > * { position: relative; }
.callout a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.5);
  transition: text-decoration-color .15s var(--ease);
}
.callout a:not(.btn):hover { text-decoration-color: #fff; color: #fff; }
.callout .eyebrow { color: rgba(229,244,242,.92); }
.callout .eyebrow::before { background: var(--teal); }
.callout h2 {
  color: #fff;
  max-width: 24ch;
  font-size: clamp(2.375rem, 3.8vw, 3.25rem);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.callout p { color: rgba(255,255,255,.84); max-width: 62ch; font-size: 1.0625rem; }
.callout .eyebrow { margin-bottom: 18px; }
.callout .mt-m { margin-top: 22px; }

/* -------- Timeline -------- */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line-strong);
}
.timeline__item { position: relative; padding: 0 0 64px 24px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -29px; top: 10px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px #fff;
}
.section--alt .timeline__item::before { box-shadow: 0 0 0 4px var(--bg-alt); }
.timeline__year {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.2vw, 2.625rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.022em;
  line-height: 1;
  display: block;
}
.timeline__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin: 16px 0 20px;
  letter-spacing: -0.012em;
}
.timeline__item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.timeline__item li {
  padding: 14px 0;
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.55;
  border-top: 1px solid var(--line);
}
.timeline__item li:first-child { border-top: 0; padding-top: 6px; }
.timeline__item li strong {
  display: block;
  color: var(--teal-600);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* -------- Team -------- */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team__card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 28px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.team__card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.team__avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 1.3rem var(--f-display);
  margin-bottom: 18px;
  letter-spacing: .02em;
  overflow: hidden;
}
.team__avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.team__name { font-size: 1.0625rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; letter-spacing: -0.01em; }
.team__role { font-family: var(--f-mono); font-size: .7rem; font-weight: 600; color: var(--teal-600); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.team__bio { color: var(--slate); font-size: .9rem; line-height: 1.6; margin: 0; }
.team__bio li { padding: 4px 0; list-style: none; }
.team__bio ul { padding: 0; margin: 8px 0 0; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .team { grid-template-columns: 1fr; } }

/* -------- Tables -------- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
/* Pipeline chart table runs full container width to match the sec-head
   text above it (overrides the 1080px cap from .table-wrap). */
.table-wrap.pipeline-chart {
  max-width: none;
}
/* Desktop: cap the pipeline chart to the same 1080px max as the other tables
   so it lines up with the Competitive positioning table below. Columns
   compress proportionally via table-layout: auto. */
@media (min-width: 821px) {
  .table-wrap.pipeline-chart { max-width: 1080px; }
}
table.ir {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  background: #fff;
}
table.ir th, table.ir td {
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
table.ir thead th {
  background: var(--bone);
  color: var(--navy);
  font-weight: 600;
  font-family: var(--f-mono);
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  padding-top: 16px;
  padding-bottom: 16px;
}
body[data-lang="en"] table.ir thead th {
  font-size: .75rem;
}
table.ir tbody th { font-weight: 600; color: var(--navy); }
table.ir tbody td { color: var(--ink-soft); }
table.ir tr:last-child td, table.ir tr:last-child th { border-bottom: 0; }
table.ir .is-ours { background: rgba(45,177,164,.06); font-weight: 600; color: var(--navy); }
table.ir th.is-ours { background: var(--teal); color: #fff; border-bottom: 1px solid var(--teal-600); }

/* -------- Pipeline stage bar chart -------- */
.pipeline-table th.pipeline-stage {
  text-align: center;
  /* Equal-width stage columns so the gray grid lines in .pipeline-track__grid
     (which divides the colspan=5 track into 5 equal 1fr columns) line up
     exactly with the header column boundaries. min-width must exceed the
     widest header (PRECLINICAL + padding) so all 5 collapse to the same width. */
  width: 95px;
  min-width: 95px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  color: #4b5563;
}
/* Desktop-only break inside pipeline Indication cells — hidden on mobile so
   the text flows naturally inside the scroll-wrapped column */
.desktop-only-break { display: inline; }
@media (max-width: 820px) {
  .desktop-only-break { display: none; }
}
/* Tighten the Indication column so the stage track (and bars) start closer
   to the indication text instead of leaving a wide gap */
.pipeline-table thead th:nth-child(1),
.pipeline-table tbody th:nth-child(1) {
  width: 180px;
}
.pipeline-table thead th:nth-child(2),
.pipeline-table tbody td:nth-child(2) {
  width: 180px;
}
.pipeline-table thead th:nth-child(3),
.pipeline-table tbody td:nth-child(3) {
  width: 270px;
}
/* Equalize tbody row heights so single-line rows match the two-line ones */
.pipeline-table tbody tr { height: 84px; }
/* Higher specificity to win over `body[data-lang="en"] table.ir thead th` */
body[data-lang="en"] .pipeline-table th.pipeline-stage,
body[data-lang="ko"] .pipeline-table th.pipeline-stage { font-size: 11px; }
.pipeline-table td.pipeline-track {
  position: relative;
  padding: 0;
  vertical-align: middle;
  background: #fff;
}
.pipeline-track__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
}
.pipeline-track__grid span {
  border-right: 1px solid var(--line);
}
.pipeline-track__grid span:last-child { border-right: 0; }
.pipeline-bar {
  position: relative;
  margin: 18px 0;
  height: 26px;
  width: var(--bar-end, 25%);
  border-radius: 3px;
  background: linear-gradient(90deg, #23579A 0%, #28759B 100%);
}

/* -------- Pipeline roadmap -------- */
.roadmap-wrap {
  position: relative;
  /* Allow horizontal scroll on screens too narrow for full grid */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  /* Subtle right-edge fade hint that more content scrolls into view */
  background:
    linear-gradient(to right, transparent calc(100% - 28px), rgba(248,250,252,.85)) right center / 28px 100% no-repeat;
}
.roadmap__hint {
  display: none;
  margin: 0 0 10px;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--slate);
  text-transform: uppercase;
}
.roadmap {
  display: grid;
  grid-template-columns: 200px repeat(5, 1fr);
  gap: 2px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* Lock minimum width so columns stay readable; outer wrapper scrolls */
  min-width: 880px;
}
.roadmap > div { background: #fff; padding: 16px 14px; font-size: .9rem; }
.roadmap__head {
  background: var(--navy) !important;
  color: #fff;
  font-family: var(--f-mono);
  font-weight: 500;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .06em;
}
.roadmap__label {
  background: var(--bg-alt) !important;
  font-weight: 600;
  color: var(--ink);
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--line);
}
.roadmap__head:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--navy) !important;
  box-shadow: 1px 0 0 var(--navy-700);
}
.roadmap__cell { position: relative; min-height: 56px; }
.bar {
  position: absolute;
  left: 6px; right: 6px;
  top: 50%; transform: translateY(-50%);
  min-height: 24px;
  padding: 4px 6px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600; color: #fff;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.bar--prep { background: #8ba2c4; }
.bar--glp  { background: #2168A0; }
.bar--clin { background: var(--navy); }
.bar--launch { background: var(--teal); }

@media (max-width: 1080px) {
  .roadmap { grid-template-columns: 160px repeat(5, minmax(120px, 1fr)); }
  .roadmap > div { padding: 14px 10px; font-size: .85rem; }
}
@media (max-width: 720px) {
  .roadmap__hint { display: block; }
  .roadmap__hint::before { content: ""; }
  .roadmap > div { padding: 12px 8px; font-size: .82rem; }
  .roadmap__head { font-size: .78rem; padding: 12px 8px; }
  .bar { font-size: .68rem; padding: 4px 4px; min-height: 26px; }
  .roadmap-wrap {
    /* Add a soft scroll-edge gradient to indicate scrollability */
    background-size: 24px 100%;
    padding-bottom: 4px;
  }
  /* Custom scrollbar styling so it's visible but tasteful */
  .roadmap-wrap::-webkit-scrollbar { height: 6px; }
  .roadmap-wrap::-webkit-scrollbar-track { background: var(--mist); border-radius: 3px; }
  .roadmap-wrap::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }
}

/* -------- News items -------- */
.news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.news__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  display: flex; flex-direction: column; gap: 10px;
}
.news__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.news__date { font-family: var(--f-mono); color: var(--teal-600); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.news__title { font-size: 1.1875rem; font-weight: 600; color: var(--ink); margin: 8px 0 4px; line-height: 1.4; letter-spacing: -0.014em; }
.news__body { color: var(--slate); font-size: .9375rem; margin: 0; line-height: 1.6; }
@media (max-width: 900px) { .news { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .news { grid-template-columns: 1fr; } }

/* News press list — editorial table-row feel rather than card stack */
.press-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.press-list__item {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background .15s var(--ease);
  text-decoration: none;
  color: inherit;
}
.press-list__item:hover { background: var(--bone); color: inherit; }
.press-list__source {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-600);
  font-weight: 600;
}
.press-list__title {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.012em;
}
.press-list__cta {
  font-size: .8125rem;
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.press-list__item:hover .press-list__cta { color: var(--teal-600); }
@media (max-width: 720px) {
  .press-list__item { grid-template-columns: 1fr; gap: 6px; }
  .press-list__source { order: 0; }
}

/* Media (videos) grid */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.media-grid__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.media-grid__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.media-grid__thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #000;
}
.media-grid__thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.media-grid__thumb::after {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease);
}
.media-grid__item:hover .media-grid__thumb::after { transform: translate(-50%, -50%) scale(1.06); }
.media-grid__body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.media-grid__meta { font-family: var(--f-mono); font-size: .72rem; color: var(--slate); letter-spacing: .08em; text-transform: uppercase; }
.media-grid__title { font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.4; letter-spacing: -0.008em; }
@media (max-width: 900px) { .media-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .media-grid { grid-template-columns: 1fr; } }

/* Notice */
.notice-list { display: grid; gap: 28px; }
.notice {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 36px;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.notice__body { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; }
.notice__date { font-family: var(--f-mono); color: var(--teal-600); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.notice__title { font-size: 1.3125rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.35; letter-spacing: -0.016em; }
.notice__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--mist);
  min-height: 220px;
}
.notice__media--single {
  grid-template-columns: 1fr;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  padding: clamp(20px, 3vw, 36px);
}
.notice__media--triple { grid-template-columns: repeat(3, 1fr); }
.notice__media img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  background: var(--bone);
  padding: 10px;
  aspect-ratio: 4/3;
}
/* Single thumbnails are smaller — centered, capped width and height */
.notice__media--single img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 220px;
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
}
@media (max-width: 820px) {
  .notice__media--single img { max-width: 50%; max-height: 180px; }
}

/* Clickable notice (card link) */
a.notice {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.notice:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
  color: inherit;
}
a.notice:hover .notice__title { color: var(--navy); }
a.notice:focus-visible {
  outline: 3px solid rgba(40,185,170,.55);
  outline-offset: 2px;
}
.notice__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-600);
  font-weight: 500;
}
.notice__cta .arrow { transition: transform .25s var(--ease); }
a.notice:hover .notice__cta { color: var(--navy); }
a.notice:hover .notice__cta .arrow { transform: translateX(4px); }

/* ─── Announcement detail page (editorial-post style) ─── */
.detail-hero {
  background: #fff;
  color: var(--ink);
  padding: clamp(36px, 4.5vw, 56px) 0 clamp(24px, 2.5vw, 36px);
  position: relative;
  overflow: visible;
}
.detail-hero::before { content: none; }
.detail-hero .container {
  max-width: 920px;
}
.detail-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 28px;
  text-decoration: none;
}
.detail-hero__back:hover { color: var(--navy); }
.detail-hero__date {
  font-family: var(--f-mono);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--teal-600);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.detail-hero h1 {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 50ch;
  text-wrap: balance;
}
.detail-hero p {
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  color: var(--slate);
  max-width: 64ch;
  line-height: 1.7;
  margin: 0;
}
/* Mobile (both languages): bump h1 to 25px, drop lead p to 14px */
@media (max-width: 720px) {
  .detail-hero h1 { font-size: 25px; line-height: 1.18; }
  .detail-hero p { font-size: 14px; line-height: 1.5; }
}
.detail-hero__divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(28px, 3vw, 40px) auto 0;
  max-width: 920px;
}

/* Gallery — editorial sizing, larger on desktop */
.detail-gallery-section {
  padding: clamp(28px, 3vw, 44px) 0 clamp(40px, 5vw, 64px);
}
.detail-gallery-section .container {
  max-width: 980px;
}

/* ─── Carousel (announcement detail page) ─── */
.carousel {
  position: relative;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 1.4vw, 18px);
  user-select: none;
  max-width: 880px;
  margin: 0 auto;
}
.carousel__viewport {
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  position: relative;
  background: #fff;
}
.carousel__track {
  display: flex;
  align-items: stretch;
  transition: transform .45s var(--ease-settle);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: zoom-in;
  position: relative;
  min-height: 280px;
}
.carousel__slide img {
  max-width: 100%;
  max-height: 58vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 1079px) {
  .carousel__slide img { max-height: 54vh; }
}
@media (max-width: 720px) {
  .carousel__slide img { max-height: 48vh; }
}

/* Arrow buttons */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.carousel__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); color: var(--teal-600); }
.carousel__arrow:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.carousel__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.carousel__arrow--prev { left: clamp(14px, 2vw, 28px); }
.carousel__arrow--next { right: clamp(14px, 2vw, 28px); }
@media (max-width: 720px) {
  .carousel__arrow { width: 44px; height: 44px; font-size: 1.25rem; }
  .carousel__arrow--prev { left: 8px; }
  .carousel__arrow--next { right: 8px; }
}

/* Footer: counter + dots */
.carousel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 6px 0;
}
.carousel__count {
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--slate);
}
.carousel__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.carousel__dot {
  appearance: none;
  border: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mist);
  padding: 0;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), width .25s var(--ease);
}
.carousel__dot:hover { background: var(--slate); }
.carousel__dot.is-active {
  background: var(--teal);
  width: 24px;
  border-radius: 999px;
}
.carousel__dot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Hint when only 1 slide exists — controls hidden via JS */
.carousel.is-single .carousel__arrow,
.carousel.is-single .carousel__footer,
.carousel.is-single .carousel__thumbs { display: none; }

/* Thumbnail strip — clickable previews under the main carousel */
.carousel__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
}
.carousel__thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
  opacity: .55;
}
.carousel__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel__thumb:hover { opacity: 1; }
.carousel__thumb.is-active {
  opacity: 1;
  border-color: var(--teal);
}
.carousel__thumb:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .carousel__thumbs { gap: 8px; }
  .carousel__thumb { width: 72px; height: 48px; }
}

.detail-nav {
  max-width: 920px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  /* Grid with 1fr auto 1fr keeps the middle item (All announcements) true-
     center even when prev or next is missing (first/last announcement). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  /* Compensate for the global .container's asymmetric padding (48px left /
     32px right) so this centered nav block reads as true-center in the
     viewport. */
  transform: translateX(-8px);
}
.detail-nav__prev { justify-self: start; }
.detail-nav__back { justify-self: center; }
.detail-nav__next { justify-self: end; }
.detail-nav a {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}
.detail-nav a:hover { color: var(--navy); }
/* List of all announcements rendered as a visible block below the
   prev/next nav row. Matches the detail-nav font for visual consistency. */
.detail-nav__list {
  max-width: 920px;
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  /* Same translateX(-8px) as .detail-nav for true viewport-center alignment */
  transform: translateX(-8px);
}
.detail-nav__list li { margin: 0; border-bottom: 1px solid var(--line); }
.detail-nav__list li:last-child { border-bottom: 0; }
.detail-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 4px;
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.45;
  color: var(--slate);
  text-transform: none;
  transition: color .15s var(--ease);
}
.detail-nav__list a:hover,
.detail-nav__list a:focus-visible { color: var(--navy); }
.detail-nav__list a[aria-current="page"] { color: var(--navy); font-weight: 500; }
.detail-nav__list .date {
  flex: 0 0 auto;
  color: var(--slate);
  font-weight: 500;
  letter-spacing: .04em;
}
.detail-nav__back { font-weight: 500; }
.detail-nav__prev::before { content: "← "; }
.detail-nav__next::after { content: " →"; }
/* Mobile: replace "Previous: <date>" / "Next: <date>" text with just larger arrows */
@media (max-width: 720px) {
  .detail-nav__prev span,
  .detail-nav__next span { display: none; }
  .detail-nav__prev::before,
  .detail-nav__next::after {
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 300;
    color: var(--navy);
  }
  .detail-nav__prev::before { content: "←"; }
  .detail-nav__next::after { content: "→"; }
}
@media (max-width: 820px) {
  .notice { grid-template-columns: 1fr; }
  .notice__media { min-height: 180px; }
}

/* -------- Contact -------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.contact-grid__box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.contact-grid label {
  display: block;
  font-weight: 500;
  font-size: .88rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.contact-grid input, .contact-grid textarea, .contact-grid select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  margin-bottom: 18px;
  background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-grid input:focus, .contact-grid textarea:focus, .contact-grid select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45,177,164,.18);
}
.contact-grid textarea { min-height: 130px; resize: vertical; }
.contact-info__row { display: flex; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.contact-info__row:first-of-type { border-top: 0; }
.contact-info__label { font-family: var(--f-mono); font-size: .9375rem; font-weight: 600; color: var(--slate); letter-spacing: .12em; text-transform: uppercase; min-width: 120px; }
.contact-info__value { color: var(--ink); font-size: .9375rem; }
@media (max-width: 720px) {
  .contact-info__row { flex-direction: column; gap: 6px; }
  .contact-info__label { min-width: 0; }
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } }

/* -------- Footer -------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,.7);
  padding: 80px 0 12px;
  position: relative;
}
/* Signature gradient hairline above footer (Brand Guidelines closing-bar pattern §5.5) */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-brand-rule);
}
.site-footer h4 {
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--f-mono);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a {
  color: rgba(255,255,255,.78);
  font-size: .9375rem;
  transition: color .15s var(--ease);
}
.site-footer a:hover { color: var(--teal); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 3.5fr 1fr 1fr 1fr;
  column-gap: 56px;
  row-gap: 40px;
  padding-bottom: 24px;
}
.site-footer__brand p {
  color: rgba(255,255,255,.7);
  font-size: .9375rem;
  max-width: 34ch;
  margin-top: 18px;
  line-height: 1.6;
}
/* Mobile-only simplified footer nav — hidden by default, shown via media query below */
.site-footer__mobile-nav { display: none; }

.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px;
  padding-bottom: 24px;
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  flex-wrap: wrap; gap: 12px;
  font-family: var(--f-mono);
  letter-spacing: .04em;
}
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
/* Compact mobile footer — brand full-width on top, then 3 menu groups in
   a 2-column grid (회사 + 플랫폼 on row 1, 투자자 on row 2). Tighter
   spacing throughout. */
@media (max-width: 720px) {
  .site-footer { padding: 56px 0 28px; }
  .site-footer__grid {
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding-bottom: 8px;
  }
  /* Hide the grouped Company/Platform/Investors columns on mobile */
  .site-footer__grid > div:not(.site-footer__brand) { display: none; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__brand-img { height: 36px; }
  .site-footer__brand p { margin-top: 8px; font-size: .75rem; line-height: 1.4; max-width: 36ch; }
  /* Simplified mobile-only nav (mirrors top nav) */
  .site-footer__mobile-nav { display: block; padding-bottom: 8px; }
  .site-footer__mobile-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .site-footer__mobile-nav li { margin: 0; line-height: 1.35; }
  .site-footer__mobile-nav a {
    color: rgba(255,255,255,.85);
    font-size: .8125rem;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .site-footer__mobile-nav a:hover { color: var(--teal); }
  .site-footer__mobile-nav .dropdown-caret {
    font-size: .75rem;
    opacity: .7;
  }
  .site-footer__bottom { padding-top: 16px; padding-bottom: 12px; font-size: .75rem; line-height: 1.4; }
  /* Break the rights-reserved phrase onto its own line on mobile */
  .site-footer__rights { display: block; }
  /* Korean only: stack "대한민국 서울" below the copyright block */
  body[data-lang="ko"] .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* -------- Page hero -------- */
.page-hero {
  /* Modern mesh gradient — 7 overlapping color regions softly blended into
     organic flowing patterns. Each blob has a soft transparent-edge falloff
     so adjacent colors merge into painterly mid-tones rather than hard
     boundaries. Brightest mid-tones sit on the right; deep navy anchors the
     left where the eyebrow/h1/lead text reads. */
  background:
    /* Mint shimmer — far-right edge highlight */
    radial-gradient(ellipse 40% 50% at 100% 30%, rgba(125,239,232,0.55) 0%, transparent 75%),
    /* Teal core — large mid-right wash */
    radial-gradient(ellipse 55% 70% at 80% 60%, rgba(45,177,164,0.55) 0%, transparent 70%),
    /* Bone glow — soft light fingerprint upper-right */
    radial-gradient(ellipse 35% 30% at 70% 12%, rgba(248,250,252,0.30) 0%, transparent 75%),
    /* Blue-mid wash — large middle band creating curved boundary */
    radial-gradient(ellipse 70% 50% at 55% 40%, rgba(39,150,161,0.45) 0%, transparent 70%),
    /* Blue body — covers middle-left */
    radial-gradient(ellipse 80% 65% at 30% 55%, rgba(33,104,160,0.55) 0%, transparent 70%),
    /* Navy core — deepest pool on the left */
    radial-gradient(ellipse 55% 90% at 5% 50%, rgba(30,58,138,0.95) 0%, transparent 70%),
    /* Navy depth — bottom-left for grounding */
    radial-gradient(ellipse 60% 50% at 15% 100%, rgba(15,30,84,0.85) 0%, transparent 75%),
    /* Diagonal base — walks through full palette */
    linear-gradient(120deg, #0A1745 0%, #0F1E54 22%, #182E6E 42%, #1E3A8A 62%, #2168A0 80%, #2796A1 94%, #2DB1A4 100%);
  color: rgba(255,255,255,.86);
  padding: clamp(56px, 8vw, 96px) 0 clamp(60px, 7vw, 88px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255,255,255,.06);
  /* Unified height across pages + languages so the navy band is consistent
   — must be tall enough to exceed the longest content + padding so short
   pages (news) and long pages (about/rd) all settle to the same height.
   Top-align content so the eyebrow/h1 start at the same y-position on
   every page (otherwise centering shifts them as content length varies). */
  min-height: clamp(560px, 62vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* In flex context the .container shrinks to its content width and the auto
   margins re-center it, pushing text rightward off the logo. Force full
   width so `margin: 0 auto` centers the standard 1200px container and the
   text aligns with the nav logo (matching the home page hero). */
.page-hero > .container { width: 100%; }

/* English-only home hero sizing — Korean stays at its current sizes.
   Buttons unchanged so they read consistently in both languages. */
body[data-lang="en"] .hero .eyebrow {
  font-size: 18px;
}
body[data-lang="en"] .hero h1 {
  font-size: clamp(2.75rem, 5.625vw, 4.5rem);
}
body[data-lang="en"] .hero p {
  font-size: clamp(1rem, 1.35vw, 1.0625rem);
}
body[data-lang="en"] .hero__chips li {
  font-size: .8rem;
}
body[data-lang="en"] .hero__cta .btn {
  padding: 16px 22px;
}
/* Mesh glow layer — 5 large color regions with heavy 110px blur, fully
   blending into a cinematic painterly atmosphere on top of the base mesh. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(ellipse 35% 30% at 25% 20%, rgba(248,250,252,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 75% 80%, rgba(45,177,164,0.70) 0%, transparent 65%),
    radial-gradient(ellipse 40% 45% at 88% 30%, rgba(125,239,232,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 35% 55%, rgba(33,104,160,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 30% 50% at 60% 38%, rgba(39,150,161,0.45) 0%, transparent 70%);
  filter: blur(110px);
  opacity: 0.92;
  pointer-events: none;
  will-change: transform;
}
/* Dark overlay (text readability) + fine grain texture. The noise SVG
   tiles at 180px so the grain particles stay small and film-like rather
   than stretching into chunky pixelation. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(
      95deg,
      rgba(15,30,84,0.88) 0%,
      rgba(15,30,84,0.55) 38%,
      rgba(15,30,84,0.20) 100%
    );
  background-size: 180px 180px, auto;
  background-repeat: repeat, no-repeat;
  background-blend-mode: overlay, normal;
  opacity: 1;
}
.page-hero .container {
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::before {
    animation: pageHeroMesh 28s ease-in-out infinite alternate;
  }
}
@keyframes pageHeroMesh {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}
.page-hero .eyebrow {
  color: rgba(229,244,242,.92);
  font-size: 17px;
  margin-bottom: 24px;
}
.page-hero .eyebrow::before { background: var(--teal); }
.page-hero h1 {
  color: #fff;
  max-width: 22ch;
  margin-bottom: 20px;
  font-size: clamp(2.375rem, 4.2vw, 3.375rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
  font-weight: 700;
}
.page-hero p {
  color: rgba(255,255,255,.78);
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.65;
}
:lang(ko) .page-hero p, .page-hero p[lang="ko"] { line-height: 1.78; }
/* English subtext: sized close to Korean for readability — wider max-width
   handles the longer English copy without shrinking the type. */
body[data-lang="en"] .page-hero p {
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  max-width: 70ch;
}
body[data-lang="en"] .page-hero h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  max-width: 26ch;
}
/* About page, English, desktop only — slightly trim the page-hero copy size */
@media (min-width: 821px) {
  body.page-about[data-lang="en"] .page-hero h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
  body.page-about[data-lang="en"] .page-hero p { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); }
  /* English desktop, all non-home pages: tighten vertical spacing between
     eyebrow / h1 / p inside the page-hero container */
  body[data-lang="en"]:not(.home) .page-hero .eyebrow { margin-bottom: 16px; }
  body[data-lang="en"]:not(.home) .page-hero h1 { margin-bottom: 14px; }
  body[data-lang="en"]:not(.home) .page-hero p { margin-top: 0; margin-bottom: 12px; }
}
/* Match the Korean page-hero height in English too. Reduce EN's top/bottom
   padding so the smaller English content still sits comfortably centered
   within the same band, without extending the section's overall height. */
body[data-lang="en"] .page-hero {
  padding-top: clamp(40px, 5.5vw, 64px);
  padding-bottom: clamp(40px, 5.5vw, 64px);
}

/* Mobile-only type scale reductions for hero, callout, page-hero — these
   sections take too much vertical room at default sizes on small screens.
   Placed after the base rules so they win the cascade at the same
   specificity. */
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(2.5rem, 9vw, 3rem); line-height: 1.2; }
  body[data-lang="en"] .hero h1 { font-size: clamp(1.75rem, 7.8vw, 2.25rem); line-height: 1.2; }
  .hero p { line-height: 1.45; }
  .hero p :lang(ko), .hero p [lang="ko"] { line-height: 1.5; }
  .callout h2 { font-size: clamp(1.875rem, 7vw, 2.25rem); line-height: 1.18; }
  .callout h2 :lang(ko), .callout h2 [lang="ko"] { line-height: 1.22; }
  .callout p { font-size: .8125rem; line-height: 1.5; }
  /* Tighten vertical rhythm between callout elements on mobile */
  .callout .eyebrow { margin-bottom: 10px; }
  .callout h2 { margin-bottom: 8px; }
  .callout .mt-s { margin-top: 8px; }
  .callout .mt-m { margin-top: 14px; }
  .callout p :lang(ko), .callout p [lang="ko"] { line-height: 1.55; }
  /* Page-hero (about / rd / news / investors / announcement details) on mobile —
     both languages: h1 34px, lead p 14px */
  .page-hero h1 { font-size: 34px; line-height: 1.15; }
  body[data-lang="en"] .page-hero h1 { font-size: 34px; line-height: 1.15; }
  .page-hero p { font-size: 14px; }
  body[data-lang="en"] .page-hero p { font-size: 14px; }
  /* English-only: trim page-hero padding a bit on mobile so the band isn't
     visibly taller than the Korean version */
  body[data-lang="en"] .page-hero { padding-top: 72px; padding-bottom: 72px; }
  /* Mobile: shorten the page-hero band — the default 560px floor leaves a
     lot of empty navy above the eyebrow on phones */
  .page-hero { min-height: 480px; }
  /* News page only (both languages): reduce hero height on mobile.
     Must override the unified .page-hero min-height: clamp(560px, ...). */
  body.page-news .page-hero { padding-top: 32px; padding-bottom: 110px; min-height: 440px; justify-content: flex-end; }
  /* Eyebrows: unify to 15px on mobile across hero, page-hero, section, callout */
  .eyebrow,
  .hero .eyebrow,
  .page-hero .eyebrow,
  .callout .eyebrow,
  body[data-lang="en"] .hero .eyebrow,
  body[data-lang="en"] .page-hero .eyebrow { font-size: 15px; }
  /* English: drop non-hero eyebrows to 12px on mobile */
  body[data-lang="en"] .eyebrow,
  body[data-lang="en"] .page-hero .eyebrow,
  body[data-lang="en"] .callout .eyebrow { font-size: 12px; }
  /* Hero eyebrow — English mobile: 10px */
  body[data-lang="en"] .hero .eyebrow { font-size: 10px; }
  /* Hero H1 — English mobile: 34px (covers .grad via inherit) */
  body[data-lang="en"] .hero h1 { font-size: 34px; line-height: 1.2; }
  /* Hero lead paragraph — English mobile: 14px */
  body[data-lang="en"] .hero p { font-size: 14px; }
  /* Hero CTA buttons — Korean mobile (base): slightly smaller font/pill */
  .hero__cta .btn { padding: 9px 14px; font-size: .8125rem; border-radius: 12px; }
  /* Hero CTA buttons — English mobile: 12px font, taller pill */
  body[data-lang="en"] .hero__cta .btn { padding: 12px 16px; font-size: 12px; }
  /* Hero chips — Korean mobile (base): smaller font/height */
  .hero__chips li { font-size: .75rem; padding: 4px 12px; }
  /* Hero chips — Korean only: shorter pill height (same 12px font) */
  body[data-lang="ko"] .hero__chips li { padding: 1px 12px; line-height: 1.4; }
  /* Hero chips — EN mobile: 10px, total height 27px */
  body[data-lang="en"] .hero__chips li { font-size: 10px; padding: 5px 14px; line-height: 1.5; }
  /* Tighten the gap between CTAs and the chip row on mobile */
  .hero__chips { margin-top: 28px; }
  /* Stack hero chips vertically on mobile so each chip sits on its own line
     (both languages — KR was wrapping into 2 rows, EN already stacked). */
  .hero__chips { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* English-only: slightly smaller product card tag pill */
  body[data-lang="en"] .card__tag { font-size: .72rem; padding: 5px 10px; }
}
/* Eyebrow line break helper — shown only on mobile */
.eyebrow-break-mobile { display: none; }
@media (max-width: 720px) {
  .eyebrow-break-mobile { display: inline; }
}
/* About-page CEO heading: line break "Founder's / message." on mobile only,
   and let the otherwise-nowrap heading wrap. Also hide the desktop-only
   forced break in the CEO lead paragraph so EN text flows naturally on mobile. */
.ceo-h2-break-mobile { display: none; }
@media (max-width: 720px) {
  .ceo-h2-break-mobile { display: inline; }
  body[data-lang="en"] #ceo .sec-head h2 { text-wrap: wrap; }
  .lead-break-desktop { display: none; }
}

/* -------- Pillars -------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  padding: 32px 32px 36px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.pillar:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Pillar accent rule — top-left, evokes the mark's triangular geometry */
.pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 32px;
  width: 32px;
  height: 3px;
  background: var(--teal);
  border-radius: 0 0 2px 2px;
  transition: width .35s var(--ease-settle), background .35s var(--ease-settle);
}
.pillar:hover::before {
  width: 72px;
  background: var(--grad-brand-rule);
}
.pillar__icon {
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.pillar:hover .pillar__icon {
  transform: scale(1.06);
  background: var(--teal);
  color: #fff;
}
.pillar__icon {
  width: 48px; height: 48px;
  border-radius: 8px;
  background: var(--teal-100);
  color: var(--teal-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
}
.pillar h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.25;
}
.pillar p {
  color: var(--slate);
  font-size: 1.0625rem;
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .pillar p { font-size: .875rem; } }
.section--dark .pillar {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.section--dark .pillar h3 { color: #fff; }
.section--dark .pillar p { color: rgba(255,255,255,.78); }
.section--dark .pillar__icon { background: rgba(45,177,164,.18); color: var(--teal); }

/* -------- Partners -------- */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.partners__cell {
  background: #fff;
  padding: 26px 20px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; color: var(--slate);
  font-size: .95rem;
  text-align: center;
  min-height: 84px;
}

/* -------- Reveal on scroll (with subtle stagger) -------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease-settle), transform .8s var(--ease-settle);
  }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  /* Stagger direct children of revealed grids and lists for editorial rhythm */
  [data-reveal].is-visible > .pillar,
  [data-reveal].is-visible > .card,
  [data-reveal].is-visible > .media-grid__item,
  [data-reveal].is-visible > .press-list__item,
  [data-reveal].is-visible > .news__item {
    animation: revealStagger .7s var(--ease-settle) backwards;
  }
  [data-reveal].is-visible > :nth-child(1) { animation-delay: .05s; }
  [data-reveal].is-visible > :nth-child(2) { animation-delay: .15s; }
  [data-reveal].is-visible > :nth-child(3) { animation-delay: .25s; }
  [data-reveal].is-visible > :nth-child(4) { animation-delay: .35s; }
  [data-reveal].is-visible > :nth-child(5) { animation-delay: .45s; }
  [data-reveal].is-visible > :nth-child(6) { animation-delay: .55s; }
}
@keyframes revealStagger {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------- Image galleries (pipeline figures) -------- */
.figure-grid {
  display: grid;
  gap: 20px;
}
.figure-grid--3 { grid-template-columns: repeat(3, 1fr); }
.figure-grid--2 { grid-template-columns: repeat(2, 1fr); }
.figure {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.figure__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.figure__img img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.figure__cap {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--slate);
  margin: 0;
}
.figure__title { font-weight: 600; color: var(--ink); font-size: 1rem; margin: 0; }
@media (max-width: 820px) {
  .figure-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .figure-grid--3, .figure-grid--2 { grid-template-columns: 1fr; }
}

/* -------- Zoomable images (click to enlarge) -------- */
[data-zoom] {
  cursor: zoom-in;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
[data-zoom]:hover { transform: translateY(-2px); }
[data-zoom]::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background:
    rgba(255,255,255,.95)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A8A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='20' y2='20'/><line x1='10.5' y1='7.5' x2='10.5' y2='13.5'/><line x1='7.5' y1='10.5' x2='13.5' y2='10.5'/></svg>") center / 18px no-repeat;
  box-shadow: 0 4px 14px rgba(15,23,42,.18);
  pointer-events: none;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
[data-zoom]:hover::after,
[data-zoom]:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
[data-zoom]:focus-visible {
  outline: 3px solid rgba(45,177,164,.55);
  outline-offset: 2px;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,26,74,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
  padding: clamp(24px, 5vw, 60px);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__inner {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  transform: scale(.96);
  transition: transform .3s var(--ease);
}
.lightbox.is-open .lightbox__inner { transform: scale(1); }
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  background: #fff;
  display: block;
}
.lightbox__cap {
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  color: #d3deef;
  text-align: center;
  margin: 0;
  max-width: 80ch;
}
.lightbox__close {
  position: absolute;
  top: -54px;
  right: -8px;
  appearance: none;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,.22); transform: scale(1.05); }
.lightbox__close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.lightbox__hint {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .lightbox__close { top: -50px; right: 0; }
  .lightbox__hint { display: none; }
}

body.is-locked { overflow: hidden; }

/* Wide single-figure block (for pipeline product summary figures) */
.product-figure {
  background:
    radial-gradient(circle at 30% 30%, rgba(45,177,164,.08), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(33,104,160,.08), transparent 65%),
    var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(12px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* Left-align with the features-list / table-wrap (both 1080px max,
     centered). The 50% − 540px calc puts our left edge at the same x as
     the 1080-wide centered block; clamped to 0 on narrow viewports. */
  margin: 36px auto 0 max(0px, calc(50% - 540px));
  max-width: 760px;
}
.product-figure img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 420px;
  display: block;
  object-fit: contain;
}
.product-figure figcaption {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--slate);
  text-align: center;
}
.product-figure__cap {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--slate);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

/* Lifestyle hero photo strip */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.photo-strip__item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(45,177,164,.12), transparent 60%),
    var(--bone);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.photo-strip__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 720px) {
  .photo-strip { grid-template-columns: 1fr; }
}

/* -------- Utility -------- */
.text-center { text-align: center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }
.mb-s { margin-bottom: 14px; } .mb-m { margin-bottom: 28px; } .mb-l { margin-bottom: 48px; }
.badge {
  display: inline-block;
  padding: 5px 10px;
  background: var(--teal-100);
  color: var(--teal-600);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge--navy { background: rgba(30,58,138,.08); color: var(--navy); }

/* CEO greeting */
.ceo-greeting {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 72px;
  align-items: start;
}
.ceo-greeting__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bone);
  border: 1px solid var(--line);
  position: sticky; top: calc(var(--nav-h) + 32px);
}
.ceo-greeting__photo img {
  width: 100%; height: auto;
  display: block;
  object-fit: contain;
}
.ceo-greeting__body {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.78;
  max-width: 660px;
}
.ceo-greeting__body p { margin: 0 0 1.15rem; }
:lang(ko) .ceo-greeting__body, .ceo-greeting__body[lang="ko"] { line-height: 1.85; }
@media (max-width: 720px) {
  /* English: lighter weight 300 + tighter line-height */
  body[data-lang="en"] .ceo-greeting__body { font-size: .9375rem; font-weight: 300; line-height: 1.55; }
  /* Korean: keep readable normal weight, just slightly smaller font + tighter line-height */
  body[data-lang="ko"] .ceo-greeting__body { font-size: .9375rem; font-weight: 400; line-height: 1.65; }
  body[data-lang="ko"] .ceo-greeting__body :lang(ko),
  body[data-lang="ko"] .ceo-greeting__body [lang="ko"] { font-weight: 400; line-height: 1.65; }
}
.ceo-greeting__sign {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--slate);
  font-weight: 500;
  text-transform: uppercase;
}
.ceo-greeting__sign strong {
  color: var(--navy);
  font-family: 'adobe-handwriting-ernie', 'Gowun Dodum', cursive;
  font-weight: 400;
  font-size: 2.25rem;
  letter-spacing: 0;
  line-height: 1.1;
  display: block;
  margin-top: 10px;
  text-transform: none;
}
.ceo-greeting__sign strong [lang="ko"] {
  font-family: 'Gowun Dodum', sans-serif;
  font-size: 2.25rem;
  font-weight: 400;
}
body[data-lang="ko"] .ceo-greeting__sign strong {
  margin-top: 0;
  line-height: 1;
}
/* Subtle CTA under the founder signature linking to the dedicated profile page */
.ceo-greeting__profile-link {
  margin-top: 24px;
}
.ceo-greeting__profile-link .arrow {
  display: inline-block;
  transition: transform .2s var(--ease);
}
.ceo-greeting__profile-link:hover .arrow { transform: translateX(3px); }

/* Founder page — metrics disclaimer caption under the key metrics grid */
.metrics-disclaimer {
  margin-top: 28px;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--slate);
  max-width: 60ch;
}
/* Founder page — closing CTA button row, no callout box */
.founder-closing-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  align-self: end;
}
/* Founder page — timeline labels are word phrases (not 4-digit years), so
   scale the label down and bump the body copy for readability. */
body.page-founder .timeline__year {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  letter-spacing: -0.012em;
}
body.page-founder .timeline__item li {
  font-size: 1rem;
  line-height: 1.6;
}
/* Founder page — Key Metrics pillars: 4 across on desktop, 2×2 on mobile */
body.page-founder #metrics .pillars {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
  body.page-founder #metrics .pillars {
    grid-template-columns: 1fr 1fr;
  }
}
/* Founder page — Key Metrics: hide the 01/02/... number badges (and their
   bordered box) so each card leads with the stat itself */
body.page-founder #metrics .pillar__icon { display: none; }
/* Founder page — Key Metrics: equalize card heights across rows so all 4
   cards share the same border/box. Tighter padding + caption line-height
   make each card read closer to a square. */
body.page-founder #metrics .pillars {
  grid-auto-rows: 1fr;
}
body.page-founder #metrics .pillar {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
body.page-founder #metrics .pillar h3 {
  margin: 0;
}
body.page-founder #metrics .pillar p {
  margin: 0;
  line-height: 1.35;
}
/* Founder page — intro variant without portrait: body spans the full width */
.ceo-greeting--no-photo {
  grid-template-columns: 1fr;
  gap: 0;
}
/* Founder page — Founder Intro sec-head: stack h2 and lead vertically on
   every screen size (mirroring the mobile single-column layout), with
   tighter gap below the lead before the body paragraphs */
body.page-founder #intro .sec-head {
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
body.page-founder #intro .sec-head p {
  padding-top: 0;
  max-width: none;
}
/* Founder page — tighter vertical padding for the Founder Intro section */
body.page-founder #intro { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 720px) {
  body.page-founder #intro { padding-top: 48px; padding-bottom: 48px; }
}
/* Founder page — slightly reduce top padding of Key Metrics section */
body.page-founder #metrics { padding-top: 56px; }
@media (max-width: 720px) {
  body.page-founder #metrics { padding-top: 32px; }
}
/* Founder page — Career Foundation timeline: tighter gap between items
   (last item keeps its existing padding-bottom: 0 from base rule) */
body.page-founder #career .timeline__item { padding-bottom: 14px; }
body.page-founder #career .timeline__item:last-child { padding-bottom: 0; }
/* Founder page — Career Foundation: align li description text with the year
   label (these items don't use the date-prefix <strong>, so the negative
   ul margin and large li padding-left aren't needed) */
body.page-founder #career .timeline__item ul { margin-left: 0; }
body.page-founder #career .timeline__item li { padding-left: 0; }
/* Founder page — Founder Intro body paragraphs: tighter spacing between them */
body.page-founder #intro .ceo-greeting__body p { margin: 0 0 .6rem; }
body.page-founder #intro .ceo-greeting__body p:last-of-type { margin-bottom: 0; }
/* Founder page — Areas of Expertise pillars: equalize heights across rows
   on every screen size (desktop, tablet, mobile) */
body.page-founder #expertise .pillars { grid-auto-rows: 1fr; }
/* Same equalization for Global Relevance pillars */
body.page-founder #relevance .pillars { grid-auto-rows: 1fr; }
/* Global Relevance: keep all 3 pillars in a single horizontal row on
   tablet too (base rule collapses to 2 cols at ≤900px, restored here).
   Mobile (≤720px) still falls back to a single-column stack. */
@media (min-width: 721px) {
  body.page-founder #relevance .pillars { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile only: strip card border / background / ::after gradient strip on
   the four content-heavy pillar sections so the copy reads inline instead
   of in heavy boxes (Home Mission, Founder Expertise & Relevance, Investors
   Why). Founder Key Metrics keeps its boxed cards. */
@media (max-width: 720px) {
  body.home #mission .pillar,
  body.page-founder #expertise .pillar,
  body.page-founder #relevance .pillar,
  #why .pillar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  body.home #mission .pillar::before,
  body.home #mission .pillar::after,
  body.page-founder #expertise .pillar::before,
  body.page-founder #expertise .pillar::after,
  body.page-founder #relevance .pillar::before,
  body.page-founder #relevance .pillar::after,
  #why .pillar::before,
  #why .pillar::after {
    display: none;
  }
  /* Restore vertical rhythm between stacked items since cards collapse */
  body.home #mission .pillars,
  body.page-founder #expertise .pillars,
  body.page-founder #relevance .pillars,
  #why .pillars {
    gap: 28px;
    grid-auto-rows: auto;
  }
  /* Home Platform (AR-001/002/003) product cards: keep all original
     positioning/padding, only hide the visible border on mobile. */
  body.home #platform .card {
    border-color: transparent;
    box-shadow: none;
  }
  body.home #platform .card::after { display: none; }
  /* Slightly smaller product tag pill on mobile */
  body.home #platform .card__tag {
    font-size: .6875rem;
    padding: 5px 10px;
    margin-bottom: 10px;
  }
  /* Tighter spacing between product visual → tag → name on mobile */
  body.home #platform .product-visual { margin-bottom: 14px; }
  body.home #platform .card__name { margin: 0 0 8px; }
  /* Tighter gap between AR-001/002/003 stacked cards on mobile.
     With invisible borders, vertical padding inside each card just creates
     dead space — collapse it so the next image sits closer to the previous
     card's "자세히 보기 →" link. */
  body.home #platform .cards { gap: 0; }
  body.home #platform .card { padding-top: 20px; padding-bottom: 20px; }
  /* Tighter gap between the platform sec-head (lead p) and the cards row */
  body.home #platform .sec-head { margin-bottom: 16px; }
  /* Tighter gap between the mission sec-head (lead p) and the pillars row */
  body.home #mission .sec-head { margin-bottom: 20px; }
  /* Tighten gap between the Platform section and the "How we design
     regeneration" callout section that follows it (mobile only) */
  body.home #platform { padding-bottom: 24px; }
  body.home #platform + .section { padding-top: 24px; }
  /* Slightly smaller mission lead on mobile */
  body.home #mission .lead { font-size: .9375rem; }
  /* Slightly smaller platform lead on mobile (same treatment as mission lead) */
  body.home #platform .lead { font-size: .9375rem; }
  /* Slightly reduce page-hero lead p on mobile (about / rd / news / investors) */
  .page-hero p,
  body[data-lang="en"] .page-hero p { font-size: 13px; }
  /* About page #company info cards: hide visible borders on mobile only */
  #company .card {
    border-color: transparent;
    box-shadow: none;
  }
  #company .card::after { display: none; }
  /* Lay each pillar out as: number badge + h3 on row 1, body p on row 2.
     This makes the icon read inline with the title (side-by-side) and the
     body copy flows the full content width underneath. */
  body.home #mission .pillar,
  body.page-founder #expertise .pillar,
  body.page-founder #relevance .pillar,
  #why .pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon h3"
      "p    p";
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
  }
  /* Strip the colored badge box — keep just the number itself, left-aligned */
  body.home #mission .pillar__icon,
  body.page-founder #expertise .pillar__icon,
  body.page-founder #relevance .pillar__icon,
  #why .pillar__icon {
    grid-area: icon;
    margin-bottom: 0;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    color: var(--teal-600);
    font-size: 1.25rem;
    letter-spacing: .04em;
  }
  body.home #mission .pillar h3,
  body.page-founder #expertise .pillar h3,
  body.page-founder #relevance .pillar h3,
  #why .pillar h3 {
    grid-area: h3;
    margin-bottom: 0;
  }
  body.home #mission .pillar p,
  body.page-founder #expertise .pillar p,
  body.page-founder #relevance .pillar p,
  #why .pillar p {
    grid-area: p;
  }
}
/* Tablet-only: shrink Global Relevance cards so they read closer to square
   (213px wide → ~260–290px tall instead of 447px) by reducing padding,
   font sizes, and line-heights. */
@media (min-width: 721px) and (max-width: 900px) {
  body.page-founder #relevance .pillar {
    padding: 22px 20px 24px;
  }
  body.page-founder #relevance .pillar__icon {
    width: 40px; height: 40px;
    font-size: .75rem;
    margin-bottom: 16px;
  }
  body.page-founder #relevance .pillar h3 {
    font-size: 1.125rem;
    margin-bottom: 8px;
    line-height: 1.25;
  }
  body.page-founder #relevance .pillar p {
    font-size: .8125rem;
    line-height: 1.45;
  }
}
@media (max-width: 820px) {
  .ceo-greeting { grid-template-columns: 1fr; gap: 36px; }
  .ceo-greeting__photo { max-width: 180px; position: static; aspect-ratio: auto; }
  /* Mobile: bump the month label size for readability */
  .timeline__item li strong { font-size: 1rem; }
  /* Mobile: drop the divider line between timeline list items and tighten
     the vertical gap between them */
  .timeline__item li { border-top: 0; padding: 8px 0; }
  .timeline__item li:first-child { padding-top: 6px; }
  /* Mobile: tighten vertical spacing around the year/title block */
  .timeline__title { margin: 8px 0 10px; }
}

/* Hide whichever language is inactive */
body[data-lang="en"] [lang="ko"] { display: none !important; }
body[data-lang="ko"] [lang="en"] { display: none !important; }

/* Mono accents in chips/tags/labels stay small per Brand System §6.4 (sparingly).
   Removed the legacy 1rem override that pushed mono labels too large. */

/* -------- Section heading emphasis — Mission/Vision + .sec-head h2s -------- */
.feature-row h2,
.sec-head h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.125rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 18px;
}
/* Larger display sizing for short, signature section titles on About page */
#ceo .sec-head h2,
#company .sec-head h2 {
  font-size: clamp(2.75rem, 4.4vw, 3.75rem);
  text-wrap: nowrap;
}
/* English-only: slightly smaller about-page h2s (English copy is longer
   so reducing the type keeps better line-breaks). Korean unchanged. */
body[data-lang="en"] #ceo .sec-head h2,
body[data-lang="en"] #company .sec-head h2 {
  font-size: clamp(2.5rem, 4.2vw, 3.375rem);
}
body[data-lang="en"] .feature-row h2,
body[data-lang="en"] #history .sec-head h2,
body[data-lang="en"] .sec-head h2 {
  font-size: clamp(2rem, 3.125vw, 2.5rem);
}
/* Home Mission h2 only — +2px bump for EN */
body[data-lang="en"].home .section--alt .sec-head h2 {
  font-size: 2.625rem;
}
body[data-lang="en"] .feature-row p {
  font-size: 1rem;
}
/* Compensate lead column padding-top so it visually top-aligns with the
   enlarged h2 baseline in these signature sections (desktop only — on
   mobile the grid stacks to a single column so the offset isn't needed) */
#ceo .sec-head p,
#company .sec-head p {
  padding-top: 61px;
}
/* Match the ceo-greeting grid (300px photo + 72px gap + 1fr body) so the
   lead text on the right of the sec-head h2 aligns exactly with the
   founder's message body below it. Desktop only — on mobile (≤820px) the
   base `.sec-head` rule stacks them into a single column. */
@media (min-width: 821px) {
  #ceo .sec-head {
    grid-template-columns: 300px 1fr;
    gap: 72px;
  }
  #ceo .sec-head p {
    max-width: none;
  }
}
@media (max-width: 820px) {
  #ceo .sec-head p,
  #company .sec-head p { padding-top: 0; }
}
@media (max-width: 720px) {
  #ceo .sec-head { margin-bottom: 18px; }
  /* Tighten the gap between the CEO photo and the message body on mobile */
  #ceo .ceo-greeting { gap: 20px; }
  /* Slightly smaller portrait on mobile */
  #ceo .ceo-greeting__photo { max-width: 160px; }
  /* Slightly inset the company-info cards on mobile so they don't run edge-to-edge */
  #company .cards { padding-inline: 10px; }
  /* Trim bottom padding inside the company cards on mobile */
  #company .card { padding-bottom: 20px; }
}
/* Stack the CEO lead paragraph BELOW the h2 instead of beside it (both
   languages) so the subtext aligns with the heading's left edge. */
#ceo .sec-head {
  grid-template-columns: 1fr;
  gap: 8px;
}
#ceo .sec-head p {
  padding-top: 4px;
  max-width: none;
}
/* Korean: slightly larger lead under the CEO h2 */
body[data-lang="ko"] #ceo .sec-head p.lead { font-size: 21px; }
.feature-row p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
:lang(ko) .feature-row p, .feature-row p[lang="ko"] { line-height: 1.8; }

/* -------- Mission/Vision visual (about page) -------- */
.mission-vision-visual-wrap {
  /* Offset top to align figure-box top with the Mission h2 baseline
     (skipping past the Mission eyebrow above it). */
  margin: 52px 0 0;
}
.mission-vision-visual {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mission-vision-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
/* Shared "click to enlarge" hint — hidden across the site (zoom interaction
   still works on the figure itself). */
p.zoom-hint {
  display: none;
}
p.zoom-hint span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--teal);
  color: var(--teal-600);
  border-radius: 50%;
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 500;
}
@media (max-width: 860px) {
  .mission-vision-visual-wrap {
    margin-top: 8px;
    max-width: 560px;
  }
}

/* -------- R&D product features list -------- */
.features-list {
  list-style: none;
  padding: 0;
  margin: 32px auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.features-list li {
  padding: 20px 0 20px 26px;
  position: relative;
  color: var(--slate);
  font-size: 1.0625rem;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}
.features-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 28px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--teal);
}
.features-list li strong {
  display: block;
  color: var(--navy);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.008em;
  margin-bottom: 4px;
}
@media (max-width: 820px) {
  .features-list { grid-template-columns: 1fr; }
}

/* -------- IR email block (investors) -------- */
.ir-email {
  margin-top: 24px;
  font-family: var(--f-mono);
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.ir-email a {
  color: #fff;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
}
.ir-email a:hover { color: var(--teal); }

/* -------- Section sub-head (mid-section header above content blocks) -------- */
.section-subhead {
  margin: 8px 0 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.section-subhead .eyebrow { margin-bottom: 12px; }
.section-subhead h3 {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0;
  max-width: 32ch;
}

/* -------- IR contact layout (news.html#contact) -------- */
.ir-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.ir-contact-grid__intro h3 {
  color: rgba(255,255,255,.92);
  font-weight: 500;
  margin: 14px 0 18px;
}
.ir-contact-grid__intro p {
  max-width: 42ch;
}
.ir-contact-grid__form {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}
@media (max-width: 960px) {
  .ir-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .ir-contact-grid__form { position: static; }
}

/* -------- Contact form -------- */
.contact-form {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  background: #fff;
  padding: clamp(32px, 4vw, 44px);
  border-radius: var(--radius-lg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.contact-form label {
  display: block;
  font-weight: 600;
  font-size: .8125rem;
  margin: 18px 0 8px;
  color: var(--ink);
  letter-spacing: -0.004em;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: .9375rem;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--slate-300); }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45,177,164,.18);
}
.contact-form textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.contact-form .btn { margin-top: 24px; justify-self: start; }

.privacy-consent {
  margin-top: 28px;
  padding: 24px 26px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.65;
}
/* Override section--dark inheritance — privacy consent sits on bone bg */
.privacy-consent,
.privacy-consent p,
.privacy-consent li,
.privacy-consent ol > li {
  color: var(--ink-soft);
}
.privacy-consent strong {
  color: var(--navy);
  font-weight: 600;
}
.privacy-consent h4 {
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -0.008em;
  font-family: var(--f-display);
  text-transform: none;
}
.privacy-consent .consent-checkbox,
.privacy-consent .consent-checkbox span {
  color: var(--ink);
}
.privacy-consent ol {
  padding-left: 20px;
  margin: 0;
}
.privacy-consent ol > li { margin-bottom: 12px; }
.privacy-consent ol > li:last-child { margin-bottom: 0; }
.privacy-consent strong { color: var(--ink); }
.privacy-consent p { margin: 6px 0; }
.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: .95rem;
  color: var(--ink);
  font-weight: 500;
}
.consent-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-top: 2px;
  flex-shrink: 0;
}