/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  /* Brand */
  --brand: #1D4ED8;
  --brand-dark: #15379E;
  --brand-tint: #EEF2FF;
  --brand-tint-2: #E0E7FF;
  --print: #365493;

  /* Neutral / paper */
  --ink: #14171F;
  --ink-soft: #363B47;
  --muted: #5B616E;
  --light: #7C8290;
  --line: #DADDE3;
  --line-strong: #B9BEC8;
  --paper: #FFFFFF;
  --paper-alt: #F5F6F8;

  /* Radius — sharp, document-like */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  /* Typography */
  --font-head: 'Noto Sans KR', sans-serif;
  --font-body: 'Noto Sans KR', sans-serif;

  --max-w: 1040px;
  --section-py: 104px;

  /* Header heights */
  --nav-h: 72px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Utility ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section { padding: var(--section-py) 0; }
.section--alt { background: var(--paper-alt); }
.section--dark { background: #0b0f19; }

/* Dark section specific typography overrides */
.section--dark .doc-title { color: #ffffff; }
.section--dark .doc-eyebrow { color: #60A5FA; }
.section--dark .doc-rule { border-top-color: rgba(255, 255, 255, 0.1); }

.section + .section,
.section--alt + .section,
.section + .section--alt,
.section--dark + .section,
.section + .section--dark {
  border-top: 1px solid var(--line);
}

.section--dark + .section--dark {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Document-style section heading */
.doc-heading {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.doc-num {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--r-sm);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.doc-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 6px;
}

.doc-title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.doc-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0 auto 48px;
}

.doc-desc {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 620px;
  margin: -8px 0 40px 60px;
}

.placeholder-note {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px dashed var(--brand-tint-2);
  border-radius: var(--r-sm);
  padding: 3px 10px;
  margin-top: 8px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-md);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
  min-height: 44px;
}

.btn:focus-visible, a:focus-visible, .footer-link:focus-visible, .privacy-modal-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-dark); }

.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-outline:hover { background: var(--brand-tint); }

.btn-lg { font-size: 16px; padding: 15px 34px; }

/* ── Reveal ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.06s; }
.reveal-d2 { transition-delay: 0.12s; }
.reveal-d3 { transition-delay: 0.18s; }

/* ══════════════════════════════════════════════════════════════
   HEADER — main GNB with hover dropdowns
══════════════════════════════════════════════════════════════ */
.header-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* Main GNB
   주의: backdrop-filter/transform 등은 position:fixed 자손의 containing
   block을 바꿔버리므로(스펙상 필터가 걸린 요소 기준으로 좌표가 다시 잡힘)
   .mega-panel이 이 안에 있는 한 절대 여기에 filter 계열 속성을 걸지 않는다. */
.nav {
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Home hero variant: opaque black bar + white text while the video hero
   is still on screen. JS (main.js) removes this class once the hero
   scrolls past, so the header falls back to the default white style
   shared with every other page. */
.header-fixed.header--on-hero .nav {
  background: rgba(0, 0, 0, 0.4);
  border-bottom-color: transparent;
}

.header-fixed.header--on-hero .mega-panel {
  background: rgba(0, 0, 0, 0.4);
  border-bottom-color: transparent;
}

.header-fixed.header--on-hero .mega-col a {
  color: rgba(255, 255, 255, 0.75);
}
.header-fixed.header--on-hero .mega-col a:hover,
.header-fixed.header--on-hero .mega-col a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.header-fixed.header--on-hero .nav-logo-word,
.header-fixed.header--on-hero .nav-link {
  color: #fff;
}
.header-fixed.header--on-hero .nav-link:hover,
.header-fixed.header--on-hero .nav-link:focus-visible {
  color: #A9C0FF;
}
.header-fixed.header--on-hero .nav-burger svg { stroke: #fff; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo-mark { height: 26px; width: auto; }

.nav-logo-word {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.gnb {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 12px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item > a.nav-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.18s;
  position: relative;
}

.nav-item > a.nav-link::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.18s ease;
}

.nav-item:hover > a.nav-link,
.nav-item:focus-within > a.nav-link {
  color: var(--brand);
}

.nav-item:hover > a.nav-link::after,
.nav-item:focus-within > a.nav-link::after {
  transform: scaleX(1);
}

.nav-link.is-current { color: var(--brand); }
.nav-link.is-current::after { transform: scaleX(1); }

/* Mega menu — hovering any GNB item reveals the full menu at once
   (참고: 김앤장/서울아산병원류 기관 사이트의 풀너비 메가메뉴 패턴) */
.gnb-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.mega-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 44px rgba(20, 23, 31, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 90;
}

.gnb-wrap:hover .mega-panel,
.gnb-wrap:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* While the panel is open, drop the nav's own bottom rule so the header
   and the panel read as one continuous surface instead of two stacked
   blocks with a seam between them. */
.nav:has(.gnb-wrap:hover),
.nav:has(.gnb-wrap:focus-within) {
  border-bottom-color: transparent;
}

/* mega-panel-inner: equal-width column grid on the same 8px spacing scale
   as the rest of the site (M3 menu spec: 8dp top/bottom padding, 48dp min
   touch target; NN/g mega-menu guidance: generous, uniform column gutters
   rather than gutters tied to each label's variable text width, which reads
   as uneven). Its left edge/width are set inline by assets/main.js to match
   the GNB row's own bounding box exactly, so the open panel starts and ends
   flush with the visible menu row above it — no repeated category title
   inside it. */
.mega-panel-inner {
  position: absolute;
  top: 0;
  display: block;
  padding: 28px 0 40px;
}

.mega-col {
  position: absolute;
  top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center; /* centers each link under the GNB item (main.js centers the column itself) */
  gap: 4px;
}

.mega-col a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: background 0.15s, color 0.15s;
}

.mega-col a:hover,
.mega-col a:focus-visible {
  background: var(--paper-alt);
  color: var(--brand);
}

.mega-col a.current { color: var(--brand); font-weight: 700; }

.nav-cta { flex-shrink: 0; margin-left: 12px; }

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-burger svg { width: 22px; height: 22px; stroke: var(--ink); }

.nav-mobile-panel { display: none; }

@media (max-width: 900px) {
  .gnb-wrap, .nav-cta { display: none; }
  .nav-burger { display: flex; }

  .nav-mobile-panel {
    display: block;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    bottom: 0;
    background: #fff;
    overflow-y: auto;
    padding: 8px 24px 32px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-mobile-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-group { border-bottom: 1px solid var(--line); }

  .mobile-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
  }

  .mobile-group-toggle svg {
    width: 16px; height: 16px; stroke: var(--light);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .mobile-group.open .mobile-group-toggle svg { transform: rotate(180deg); }

  .mobile-sublist {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .mobile-group.open .mobile-sublist { max-height: 320px; }

  .mobile-sublist a {
    display: block;
    padding: 12px 0 12px 14px;
    font-size: 14.5px;
    color: var(--muted);
  }

  .mobile-quicklinks {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .mobile-quicklinks a {
    padding: 10px 0;
    font-size: 14px;
    color: var(--light);
  }

  .nav-mobile-panel .btn { width: 100%; margin-top: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   COVER — home page title page
══════════════════════════════════════════════════════════════ */
.cover {
  padding: calc(var(--nav-h) + 104px) 24px 96px;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}

/* Full-height video hero: fills the entire viewport and sits behind the
   fixed header (header--on-hero makes the header translucent black here,
   so the video shows through it rather than the header covering it). */
.cover--video {
  position: relative;
  height: 100vh;
  min-height: 560px; /* keeps title + sub + CTAs from cramping on short/landscape viewports */
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, var(--brand-dark) 100%);
}

@supports (height: 100svh) {
  .cover--video { height: 100svh; }
}

.cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Darkens the video so white hero text keeps WCAG AA contrast regardless
   of the footage's own brightness. */
.cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 23, 31, 0.55) 0%, rgba(20, 23, 31, 0.7) 100%);
  z-index: 1;
}

.cover--video .cover-inner { position: relative; z-index: 2; }

.cover--video .cover-meta { color: rgba(255, 255, 255, 0.75); }
.cover--video .cover-meta span:not(:last-child)::after { color: rgba(255, 255, 255, 0.4); }
.cover--video .cover-title { color: #fff; }
.cover--video .cover-title em { color: #A9C0FF; }
.cover--video .cover-sub { color: rgba(255, 255, 255, 0.88); }

.cover--video .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.cover--video .btn-outline:hover { background: rgba(255, 255, 255, 0.12); }

.cover-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.cover-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 28px;
}

.cover-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  color: var(--line-strong);
}

.cover-title {
  font-family: var(--font-head);
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 24px;
}

.cover-title em { font-style: normal; color: var(--brand); }

.cover-sub {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto 40px;
}

.cover-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Page hero (sub pages) ──────────────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 64px) 24px 56px;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.page-hero-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.page-hero-title {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  color: var(--ink);
}

.page-hero-desc {
  font-size: 15.5px;
  color: var(--muted);
  max-width: 580px;
  margin: 16px auto 0;
  line-height: 1.8;
}

/* Section index nav — quick jump within a sub page */
.page-jump {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.page-jump a {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 16px;
  transition: border-color 0.15s, color 0.15s;
}

.page-jump a:hover { border-color: var(--brand); color: var(--brand); }

/* ══════════════════════════════════════════════════════════════
   HOME — teaser cards linking to sub pages
══════════════════════════════════════════════════════════════ */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.teaser-card {
  padding: 32px 24px;
  background: var(--paper);
  transition: background 0.18s;
}
.teaser-card:not(:last-child) { border-right: 1px solid var(--line); }
.teaser-card:hover { background: var(--paper-alt); }

.teaser-index {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 14px;
}

.teaser-card h3 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.teaser-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.teaser-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════
   ABOUT — sub-tabs (sticky + scrollspy) / Mission / CEO / History / Location
══════════════════════════════════════════════════════════════ */
/* Sticks to top: var(--nav-h) once scrolled to it, and un-sticks again once
   its container (the .container it's the first child of, which wraps every
   .about-block) scrolls past — so it never overlaps the footer. */
.subtabs {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.subtab-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 16px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.subtab-link:hover { border-color: var(--brand); color: var(--brand); }

.subtab-link.is-active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

/* scroll-margin-top clears the fixed header (--nav-h) plus the sticky
   subtabs bar right below it, so a clicked tab's section doesn't land
   hidden underneath either. */
.about-block {
  margin-left: 60px;
  margin-bottom: 72px;
  scroll-margin-top: calc(var(--nav-h) + 64px);
}
.about-block:last-child { margin-bottom: 0; }

.about-block-title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* CEO greeting */
.ceo-quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  padding: 32px 36px;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.85;
}

.ceo-sign {
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.ceo-sign span {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--light);
  margin-top: 2px;
}

/* History timeline table */
.history-table { width: 100%; border-collapse: collapse; }
.history-table tr { border-bottom: 1px solid var(--line); }
.history-table tr:first-child { border-top: 1px solid var(--line); }

.history-table td {
  padding: 16px 8px;
  font-size: 14.5px;
  vertical-align: top;
}

.history-table td:first-child {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--brand);
  width: 100px;
  white-space: nowrap;
}

.history-table td:last-child { color: var(--ink-soft); }

/* Location */
.location-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.location-map {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 260px;
}

.location-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

.location-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.location-info strong { color: var(--ink); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   HOME — overview full-width pane with vertical transparent tiles
══════════════════════════════════════════════════════════════ */
.overview-section {
  padding-top: 100px;
  padding-bottom: 0;
}

.overview-pane {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 480px;
  overflow: hidden;
  margin-top: 56px;
}

.overview-pane-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 10s ease; /* Ultra slow zoom */
}

.overview-pane:hover .overview-pane-bg {
  transform: scale(1.05);
}

.overview-pane-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(10, 15, 30, 0.9) 0%,
    rgba(15, 23, 42, 0.8) 100%);
  z-index: 1;
}

.overview-pane-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 480px;
  box-sizing: border-box;
}

.overview-tile {
  position: relative;
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.3s;
}

/* Vertical separating lines between tiles */
.overview-tile:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.overview-tile:hover {
  background: rgba(255, 255, 255, 0.03);
}

.overview-tile-num {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 24px;
  transition: color 0.3s;
}

.overview-tile:hover .overview-tile-num {
  color: #60A5FA;
}

.overview-tile-title {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.3;
}

.overview-tile-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 280px;
}

.overview-tile-more {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 6px 18px;
  width: fit-content;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}

.overview-tile:hover .overview-tile-more {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
  transform: translateX(4px);
}

/* Responsive mobile tiles */
@media (max-width: 900px) {
  .overview-pane-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 40px 24px;
  }

  .overview-tile {
    padding: 48px 16px;
  }

  .overview-tile:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ══════════════════════════════════════════════════════════════
   BUSINESS AREAS
══════════════════════════════════════════════════════════════ */
.biz-grid {
  margin-left: 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Same bordered-grid recipe as .biz-grid, just 3 columns — used by the
   about page's 미션·비전·핵심가치 block, which reuses .biz-card for its
   three cards. */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.biz-card { padding: 32px 28px; background: var(--paper); }
.biz-card:not(:last-child) { border-right: 1px solid var(--line); }

.biz-index {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 14px;
}

.biz-card h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.4;
}

.biz-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.biz-steps { display: flex; flex-direction: column; gap: 6px; }

.biz-steps li {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.biz-steps li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  transform: translateY(-3px);
}

.biz-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}

.biz-card-more svg { transition: transform 0.15s; }
.biz-card-more:hover svg { transform: translateX(3px); }



/* ══════════════════════════════════════════════════════════════
   HOME — customer center (quick link cards + gradient CTA)
══════════════════════════════════════════════════════════════ */
.cs-section {
  padding-bottom: var(--section-py);
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  margin-bottom: 24px;
}

.cs-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-lg);
  padding: 48px 40px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s;
}

.cs-card:hover {
  transform: translateY(-6px);
  border-color: rgba(29, 78, 216, 0.25);
  box-shadow: 0 20px 40px rgba(29, 78, 216, 0.07);
}

.cs-card-num {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--brand);
  margin-bottom: 20px;
  transition: color 0.3s;
}

.cs-card:hover .cs-card-num {
  color: var(--brand-dark);
}

.cs-card-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.3;
}

.cs-card-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 28px;
  flex-grow: 1;
}

.cs-card-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
  width: fit-content;
}

.cs-card:hover .cs-card-link {
  color: var(--brand-dark);
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cs-card {
    padding: 36px 28px;
  }
}

@media (max-width: 900px) {
  .cs-pane-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 30px 24px;
  }

  .cs-tile {
    padding: 36px 16px;
  }

  .cs-tile:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Gradient CTA banner */
.cs-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 40px 48px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #14171F 0%, #1E293B 50%, var(--brand-dark) 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative dots pattern */
.cs-cta-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  pointer-events: none;
}

.cs-cta-banner::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 20%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(29, 78, 216, 0.08);
  pointer-events: none;
}

.cs-cta-content {
  position: relative;
  z-index: 1;
}

.cs-cta-title {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.4;
}

.cs-cta-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.cs-cta-btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: #fff;
  color: var(--brand-dark) !important;
  font-weight: 700;
  border: none;
}

.cs-cta-btn:hover {
  background: #E0E7FF !important;
}

@media (max-width: 900px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-cta-banner { padding: 32px; }
}

@media (max-width: 640px) {
  .cs-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
  .cs-cta-btn { width: 100%; text-align: center; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   HOME — service showcase diagonal split layout (full-width)
══════════════════════════════════════════════════════════════ */
.svc-section {
  padding-top: 100px;
  padding-bottom: 0;
}

/* ── Full-width diagonal split container ── */
.svc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 540px;
  overflow: hidden;
  margin-top: 56px;
  background: #0f172a;
}

.svc-half {
  position: relative;
  width: 100%;
  min-height: 540px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Background image layer */
.svc-half-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-half:hover .svc-half-bg {
  transform: scale(1.06);
}

/* Overlay layers */
.svc-half-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.svc-half-overlay--dark {
  background: linear-gradient(135deg,
    rgba(15, 23, 42, 0.9) 0%,
    rgba(15, 23, 42, 0.75) 100%);
}

.svc-half-overlay--brand {
  background: linear-gradient(135deg,
    rgba(29, 78, 216, 0.88) 0%,
    rgba(99, 102, 241, 0.78) 100%);
}

/* Stable Diagonal split clip paths — Left slants out, overlaps right completely with no gap */
.svc-half--left {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  z-index: 2;
  margin-right: -10%; /* Pull left card over to overlap the right card completely */
  width: 110%; /* Compensate width for the overlap pull */
}

.svc-half--right {
  /* No clip-path needed since the left card overlays with clip-path, creating a seamless join */
  z-index: 1;
}

/* ── Content overlay ── */
.svc-half-content {
  position: relative;
  z-index: 2;
  padding: 80px 60px;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.svc-half--left .svc-half-content {
  margin-left: auto;
  padding-right: 10%;
}

.svc-half--right .svc-half-content {
  margin-right: auto;
  margin-left: 13%; /* Keep clear of the diagonal slant */
  padding-left: 0;
}

.svc-split-num {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 24px;
}

.svc-split-title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 18px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  min-height: 2.6em; /* height of 2 text lines */
}

.svc-split-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.85;
  margin-bottom: 24px;
  min-height: 5.5em; /* height of 3 text lines */
}

/* Process step flow — horizontal */
.svc-split-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
}

.svc-split-step {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 5px 14px;
}

.svc-split-dot {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.svc-split-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-sm);
  padding: 11px 22px;
  transition: background 0.2s, gap 0.2s;
}

.svc-split-cta:hover {
  background: rgba(255, 255, 255, 0.28);
  gap: 12px;
}

/* Responsive */
@media (max-width: 900px) {
  .svc-split {
    grid-template-columns: 1fr;
    min-height: auto;
    width: auto;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .svc-half {
    width: 100% !important;
    flex: 0 0 100% !important;
    min-height: 440px;
  }

  .svc-half--left {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    padding-right: 0;
    margin-right: 0;
  }

  .svc-half--right {
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    margin-left: 0;
    margin-top: -6%;
  }

  .svc-half-content {
    padding: 60px 32px;
    max-width: none;
  }

  .svc-half--left .svc-half-content { padding-right: 32px; }
  .svc-half--right .svc-half-content { padding-left: 32px; margin-left: 0; }
}

@media (max-width: 640px) {
  .svc-half-content { padding: 48px 20px; }
  .svc-split-title { font-size: 26px; }
  .svc-split-steps { gap: 4px; }
  .svc-split-step { font-size: 11px; padding: 4px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   HOME — product carousel (legacy, kept for backward compatibility)
══════════════════════════════════════════════════════════════ */
.carousel { position: relative; }

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 56px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.carousel-card h3 {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.35;
}

.carousel-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 18px;
  max-width: 46ch; /* keeps the line measure readable even at full slide width */
}

.carousel-card .teaser-link { display: inline-block; font-size: 14px; }

.carousel-card-steps {
  padding: 24px 28px;
  background: var(--paper-alt);
  border-radius: var(--r-md);
}

/* Arrows float over the slide edges rather than taking up track width,
   so the slide itself can occupy the full carousel window. */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; /* WCAG touch target minimum */
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink-soft);
  background: var(--paper);
  box-shadow: 0 6px 16px rgba(20, 23, 31, 0.1);
  transition: border-color 0.15s, color 0.15s;
}
.carousel-btn:hover { border-color: var(--brand); color: var(--brand); }
.carousel-btn:disabled { opacity: 0.35; pointer-events: none; }
.carousel-btn--prev { left: -8px; }
.carousel-btn--next { right: -8px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 0.15s, transform 0.15s;
}
.carousel-dot.is-active { background: var(--brand); transform: scale(1.25); }

/* ══════════════════════════════════════════════════════════════
   HOME — customer center CTA banner
══════════════════════════════════════════════════════════════ */
.cta-banner {
  margin-left: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-banner-desc {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 460px;
}

.cta-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   TRACK RECORD & NETWORK
══════════════════════════════════════════════════════════════ */
.partner-bar {
  margin-left: 60px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.partner-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.partner-badge .partner-tag {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: var(--r-sm);
  padding: 2px 8px;
}

.track-record-empty {
  margin-left: 60px;
  padding: 48px 32px;
  text-align: center;
  background: var(--paper-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMER SUPPORT
══════════════════════════════════════════════════════════════ */
.support-list { margin-left: 60px; border-top: 1px solid var(--line); }

.support-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.support-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  flex-shrink: 0;
}

.support-row-title { color: var(--ink-soft); flex: 1; }
.support-row-date { color: var(--light); font-size: 13px; flex-shrink: 0; }

.resource-list {
  margin-left: 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.resource-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.resource-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.resource-icon svg { width: 17px; height: 17px; stroke: var(--brand); }

.resource-name { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.resource-sub { font-size: 12.5px; color: var(--light); margin-top: 2px; }

.resource-download {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--light);
  flex-shrink: 0;
}

/* Inquiry form */
.apply-form {
  margin-left: 60px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--muted); }

.form-group input, .form-group textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.form-group input::placeholder, .form-group textarea::placeholder { color: #a1a1aa; }

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.apply-form .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 15px;
  margin-top: 4px;
}

.btn-loading { pointer-events: none; opacity: 0.85; }

.spinner-dots { display: inline-flex; gap: 4px; align-items: center; }
.spinner-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; animation: dotPulse 1.2s ease-in-out infinite;
}
.spinner-dots span:nth-child(2) { animation-delay: 0.15s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.btn-success {
  background: var(--brand-tint) !important;
  color: var(--brand-dark) !important;
  pointer-events: none;
}
.btn-success svg { width: 16px; height: 16px; stroke: var(--brand-dark); flex-shrink: 0; }

.apply-msg { font-size: 14px; text-align: center; min-height: 20px; margin-top: 4px; }
.apply-msg--error { color: #dc2626; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.footer { padding: 40px 0; background: var(--ink); }

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-left { display: flex; flex-direction: column; gap: 16px; }

.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo-mark { height: 22px; width: auto; }
.footer-logo-word { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #fff; }

.footer-info { font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; }
.footer-info span { display: inline; }
.footer-info span::before { content: '\00B7'; margin: 0 6px; color: rgba(255, 255, 255, 0.4); }
.footer-info span:first-child::before { display: none; }

.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.footer-links { display: flex; gap: 16px; }

.footer-link, .footer-links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 12px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}
.footer-link:hover, .footer-links a:hover { color: rgba(255, 255, 255, 0.85); }

.footer-copy { font-size: 12px; color: rgba(255, 255, 255, 0.4); }

/* ── Privacy Modal ─────────────────────────────────────────── */
.privacy-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 23, 31, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.privacy-modal-overlay.open { opacity: 1; visibility: visible; }

.privacy-modal-box {
  background: #fefefe;
  border-radius: var(--r-lg);
  width: 90%; max-width: 560px; max-height: 80vh;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.privacy-modal-overlay.open .privacy-modal-box { transform: translateY(0) scale(1); }

.privacy-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.privacy-modal-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); }

.privacy-modal-close {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--light); transition: background 0.15s, color 0.15s;
}
.privacy-modal-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }

.privacy-modal-body { padding: 24px 28px 28px; overflow-y: auto; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.privacy-modal-body h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 20px 0 8px; }
.privacy-modal-body h4:first-child { margin-top: 0; }
.privacy-modal-body p { margin-bottom: 8px; }
.privacy-modal-body ul { list-style: disc; padding-left: 20px; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --section-py: 72px; }

  .cover-image {
    object-position: 20% center;
  }

  .biz-grid, .teaser-grid, .mission-grid { grid-template-columns: 1fr; }
  .biz-card:not(:last-child) { border-right: none; border-bottom: 1px solid var(--line); }
  .teaser-card:not(:last-child) { border-right: none; border-bottom: 1px solid var(--line); }

  .location-row { grid-template-columns: 1fr; }
  .resource-list { grid-template-columns: 1fr; }

  .cover--video { min-height: 480px; }
  .carousel-card { grid-template-columns: 1fr; padding: 40px; }
  .carousel-btn--prev { left: 8px; }
  .carousel-btn--next { right: 8px; }
}

@media (max-width: 640px) {
  :root { --section-py: 56px; }

  .about-block, .biz-grid, .partner-bar, .track-record-empty,
  .support-list, .resource-list, .apply-form,
  .cta-banner {
    margin-left: 0;
  }

  .carousel-card { padding: 28px 24px; }

  .cta-banner { flex-direction: column; align-items: flex-start; }

  .doc-desc { margin-left: 0; }
  .doc-heading { gap: 14px; }
  .doc-num { width: 34px; height: 34px; font-size: 13px; }

  .form-row { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .footer-left { align-items: center; }
  .footer-info span { display: block; }
  .footer-info span::before { display: none; }
  .footer-right { align-items: center; }

  .cover { padding: calc(var(--nav-h) + 64px) 24px 72px; }
  .page-hero { padding: calc(var(--nav-h) + 40px) 24px 48px; }
}

/* ══════════════════════════════════════════════════════════════
   ABOUT US — history timeline
   (Inspired by reference image layout, vertical stack, descending)
 ══════════════════════════════════════════════════════════════ */
.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 0;
}

.timeline-year-group {
  display: flex;
  gap: 60px;
}

.timeline-year {
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 800;
  color: var(--brand);
  min-width: 110px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  position: relative;
}

/* Accent underline under the big year font */
.timeline-year::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--brand);
}

.timeline-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  padding-left: 32px;
  margin-top: 10px;
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.timeline-dot {
  position: absolute;
  left: calc(-32px - 6px); /* exact align center of border-left line */
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  z-index: 2;
  box-sizing: border-box;
}

/* Hollow dot for the active current year items */
.timeline-dot--hollow {
  background: #ffffff !important;
  border: 2px solid var(--brand);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.timeline-date {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(29, 78, 216, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .timeline-year-group {
    flex-direction: column;
    gap: 20px;
  }
  
  .timeline-year {
    font-size: 32px;
    min-width: auto;
  }
  
  .timeline-items {
    padding-left: 24px;
    margin-top: 0;
  }
  
  .timeline-dot {
    left: calc(-24px - 6px);
  }
}