/* ==========================================================================
   AirBridge USA / ABUSA Corp - Design System
   Palette: deep navy + warm terracotta accent + cool off-white
   Type: Manrope (single family, weight-driven hierarchy)
   ========================================================================== */

:root {
  --ink: #0e1f33;
  --navy-900: #0c1c30;
  --navy-800: #12335a;
  --navy-700: #1c4670;
  --navy-600: #2a5c8f;
  --navy-50: #eef3f8;
  --accent: #cd6a2e;
  --accent-dark: #a8541f;
  --accent-50: #fbeee2;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --line: #e2e6eb;
  --text: #182635;
  --text-muted: #556072;
  --text-on-navy: #eef2f7;
  --text-on-navy-muted: #a9bbd0;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(14, 31, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 31, 51, 0.10);
  --container: 1200px;
  --nav-height: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Korean pages: break lines at word boundaries, not mid-syllable-block.
   The browser default is happy to wrap Korean text at any character,
   which reads as broken typography (e.g. splitting 화물 across two
   lines). This keeps whole words together and only falls back to a
   hard break if a single word is wider than its container. */
html[lang="ko"] { word-break: keep-all; overflow-wrap: break-word; }

#top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 800;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:active { transform: translateY(1px); }

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

.btn-outline {
  background: transparent;
  border-color: rgba(14, 31, 51, 0.22);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); background: rgba(14,31,51,0.04); }

.btn-outline-light {
  background: transparent;
  border-color: rgba(238, 242, 247, 0.4);
  color: var(--text-on-navy);
}
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-on-navy {
  background: var(--accent);
  color: #fff;
}
.btn-on-navy:hover { background: var(--accent-dark); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 247, 249, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(14, 31, 51, 0.08); }
.nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-mark img { width: 34px; height: 34px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .brand-main { font-size: 1.05rem; font-weight: 800; }
.brand-text .brand-sub { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
.footer-logo { height: 58px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 10px 9px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { background: rgba(14,31,51,0.06); }
.nav-links a[aria-current="page"] { color: var(--navy-800); background: var(--navy-50); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-size: 0.82rem; }
.nav-phone .label { color: var(--text-muted); font-size: 0.7rem; }
.nav-phone .num { font-weight: 700; color: var(--ink); }
.lang-switch {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-switch:hover { background: var(--navy-50); border-color: var(--navy-600); }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

.nav-cta-mobile { display: none; }
.nav-links .mobile-cta-link {
  display: flex;
  justify-content: center;
  width: calc(100% - 16px);
  margin: 6px 8px 2px;
  padding: 14px 26px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
}
.nav-links .mobile-cta-link:hover { background: var(--accent-dark); }

.nav-links .mobile-lang-link {
  display: flex;
  justify-content: center;
  width: calc(100% - 16px);
  margin: 2px 8px 8px;
  padding: 12px 26px;
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
  font-weight: 700;
}
.nav-links .mobile-lang-link:hover { background: var(--navy-50); }

@media (max-width: 1180px) {
  .nav-phone { display: none; }
  .lang-switch { display: none; }
  .nav-links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    display: none;
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; width: 100%; }
  .nav-toggle { display: inline-flex; }
  .nav-cta-mobile { display: block; }
}

/* Below this width the header can't fit logo + hamburger + a full CTA
   button without overflowing, so the persistent button drops and the
   same CTA lives inside the hamburger menu instead (.mobile-cta-link). */
@media (max-width: 560px) {
  .nav-actions .btn-primary { display: none; }
}

/* ---------- Hero ---------- */
/* ---------- Hero: full-bleed, text overlaid on the moving image ---------- */
.hero-full {
  position: relative;
  min-height: 82vh;
  min-height: 82dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero-full-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(0deg, rgba(9, 20, 34, 0.88) 0%, rgba(9, 20, 34, 0.45) 42%, rgba(9, 20, 34, 0.15) 68%, rgba(9, 20, 34, 0.3) 100%),
    linear-gradient(90deg, rgba(9, 20, 34, 0.55) 0%, rgba(9, 20, 34, 0.05) 55%);
}
.hero-full-content {
  position: relative;
  z-index: 3;
  padding-bottom: 72px;
  max-width: 720px;
}
.hero-full-content h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  max-width: 15ch;
}
.hero-full-content .hero-sub {
  margin-top: 20px;
  font-size: 1.12rem;
  color: rgba(238, 242, 247, 0.88);
  max-width: 48ch;
  line-height: 1.55;
}
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* ---------- Hero "video": 3-slide Ken Burns cross-fade loop, pure CSS ----------
   No JavaScript or video file required. Each slide holds for ~5s with a slow
   zoom, then cross-dissolves into the next. Loops forever. Falls back to a
   single static frame under prefers-reduced-motion. ---------- */
.hero-video .kb-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(1);
  animation: kbFade 15s infinite ease-in-out;
}
.hero-video .kb-slide:nth-child(1) { animation-delay: 0s; }
.hero-video .kb-slide:nth-child(2) { animation-delay: 5s; }
.hero-video .kb-slide:nth-child(3) { animation-delay: 10s; }

@keyframes kbFade {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  33%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video .kb-slide { animation: none; opacity: 0; transform: scale(1); }
  .hero-video .kb-slide:first-child { opacity: 1; }
}

@media (max-width: 860px) {
  .hero-full { min-height: 68vh; min-height: 68dvh; align-items: flex-end; }
  .hero-full-content { padding-bottom: 44px; }
}

/* ---------- Stat strip ---------- */
.stat-strip {
  background: var(--navy-900);
  padding: 44px 0;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-item { text-align: left; border-left: 2px solid rgba(238,242,247,0.18); padding-left: 18px; }
.stat-num { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: #fff; }
.stat-label { margin-top: 4px; font-size: 0.88rem; color: var(--text-on-navy-muted); font-weight: 500; }

@media (max-width: 760px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
}

/* ---------- Section basics ---------- */
.section { padding: 88px 0; }
.section-tight { padding: 64px 0; }
.section-head { max-width: 60ch; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-head p { margin-top: 14px; font-size: 1.05rem; color: var(--text-muted); }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Bento services grid ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 16px;
}
.bento-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  isolation: isolate;
}
.bento-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 0.5s ease;
}
.bento-card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,31,51,0.05) 0%, rgba(12,28,48,0.86) 100%);
}
.bento-card:hover img { transform: scale(1.05); }
.bento-card .tag { font-size: 0.75rem; font-weight: 700; color: var(--text-on-navy-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bento-card h3 { color: #fff; font-size: 1.3rem; margin-top: 6px; }
.bento-card p { color: rgba(238,242,247,0.82); font-size: 0.9rem; margin-top: 8px; max-width: 38ch; }
.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-card.bento-large h3 { font-size: 1.7rem; }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento-large { grid-column: span 1; grid-row: span 1; }
  .bento-card { min-height: 260px; }
}

/* Role grid (careers page): four equal-weight photo tiles, 2x2 */
.role-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 240px); }
@media (max-width: 860px) {
  .role-grid { grid-template-columns: 1fr; grid-template-rows: none; }
}

/* ---------- Feature list (no cards) ---------- */
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.feature-item { border-top: 2px solid var(--ink); padding-top: 18px; }
.feature-item .icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 14px; }
.feature-item h3 { font-size: 1.1rem; }
.feature-item p { margin-top: 8px; color: var(--text-muted); font-size: 0.96rem; line-height: 1.55; }
.feature-list.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }

@media (max-width: 760px) {
  .feature-list { grid-template-columns: 1fr; gap: 32px; }
  .feature-list.cols-2 { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Split (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.split-body h2, .split-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.split-body p { margin-top: 16px; color: var(--text-muted); font-size: 1.02rem; line-height: 1.6; }
.split-body ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.split-body ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 0.96rem; }
.split-body ul li svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 860px) {
  .split, .split.reverse { grid-template-columns: 1fr; gap: 28px; }
  .split.reverse .split-media { order: 0; }
}

/* ---------- Banner (full-width image w/ overlay) ---------- */
.banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.banner::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,28,48,0.9) 0%, rgba(12,28,48,0.45) 55%, rgba(12,28,48,0.15) 100%);
}
.banner-body { padding: 44px; max-width: 46ch; }
.banner-body h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.banner-body p { color: rgba(238,242,247,0.86); margin-top: 14px; font-size: 1rem; line-height: 1.6; }
.banner-body ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.banner-body ul li {
  font-size: 0.82rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.14); padding: 8px 14px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.24);
}

@media (max-width: 700px) {
  .banner { min-height: 340px; }
  .banner-body { padding: 28px; }
}

/* ---------- Location rows ---------- */
.location-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.location-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.location-row .loc-name { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; color: var(--ink); }
.location-row .loc-name .hub-code {
  font-size: 0.68rem; font-weight: 700; color: var(--navy-700); background: var(--navy-50);
  padding: 3px 8px; border-radius: 100px; letter-spacing: 0.04em;
}
.location-row dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; margin: 0; }
.location-row dd { margin: 4px 0 0; font-size: 0.95rem; color: var(--text); }

@media (max-width: 860px) {
  .location-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  padding: 56px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); max-width: 26ch; }
.cta-band p { color: var(--text-on-navy-muted); margin-top: 10px; max-width: 42ch; }

@media (max-width: 700px) {
  .cta-band { padding: 36px 24px; text-align: left; }
}

/* ---------- Timeline (about page) ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.timeline-item { border-top: 2px solid var(--accent); padding-top: 16px; }
.timeline-year { font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.timeline-item p { margin-top: 8px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }

@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}

/* ---------- FAQ accordion (native <details>, no JS required) ---------- */
.faq-wrap { max-width: 800px; }
.faq-category { margin-bottom: 8px; }
.faq-category h2 {
  font-size: 1.25rem;
  padding: 40px 0 4px;
  border-top: 1px solid var(--line);
}
.faq-category:first-child h2 { padding-top: 0; border-top: none; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding: 0 0 22px;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 68ch;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.form-field { display: grid; gap: 6px; margin-bottom: 20px; }
.form-field label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.form-field input, .form-field textarea, .form-field select {
  font-family: inherit;
  font-size: 0.98rem;
  padding: 13px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--navy-600);
  outline-offset: 1px;
  border-color: var(--navy-600);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }

.info-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.info-block + .info-block { margin-top: 18px; }
.info-block h3 { font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.info-block .hub-code {
  font-size: 0.65rem; font-weight: 700; color: var(--navy-700); background: var(--navy-50);
  padding: 3px 8px; border-radius: 100px;
}
.info-block dl { margin: 16px 0 0; display: grid; gap: 10px; }
.info-block dt { font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.04em; }
.info-block dd { margin: 2px 0 0; font-size: 0.95rem; }
.info-block a { color: var(--navy-800); font-weight: 600; }
.info-block a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Page sub-hero (interior pages) ---------- */
.page-hero {
  padding: 52px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-hero .kicker { font-size: 0.8rem; font-weight: 700; color: var(--navy-700); }
.page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 10px; max-width: 20ch; }
.page-hero p { margin-top: 16px; color: var(--text-muted); font-size: 1.05rem; max-width: 56ch; line-height: 1.6; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--text-on-navy-muted); padding: 64px 0 28px; margin-top: 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(238,242,247,0.14);
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .brand-main { color: #fff; font-weight: 800; font-size: 1.05rem; }
.footer-col p { line-height: 1.6; font-size: 0.92rem; max-width: 32ch; }
.footer-col h4 { color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col ul a { font-size: 0.92rem; transition: color 0.15s ease; }
.footer-col ul a:hover { color: #fff; }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Reveal-on-scroll (subtle, motion-intensity 3) ----------
   Progressive enhancement: content is fully visible by default.
   JS adds ".pre" (hidden) just before observing, then swaps to ".in"
   when the element scrolls into view. If JS never runs, content
   simply stays visible with no animation. ---------- */
.reveal {
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal.pre { opacity: 0; transform: translateY(14px); }
.reveal.pre.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal.pre { opacity: 1; transform: none; }
}