/* WONJIN CERATEC Design System — SUIT (official web font) */
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css');

:root {
  /* Gutter tokens ---------------------------------------------------------
     --wj-edge-gutter : tight — used by HEADER + HERO only (logo hugs edge)
     --wj-body-gutter : comfortable — used by BODY CONTENT on all pages
     --wj-gutter      : legacy alias, kept for compatibility
     --------------------------------------------------------------------- */
  --wj-edge-gutter: clamp(20px, 2.4vw, 40px);
  --wj-body-gutter: clamp(40px, 6vw, 110px);
  --wj-gutter: clamp(24px, 4vw, 60px);
  --wj-content-max: 1600px;

  --wj-blue: #2A4A9E;
  --wj-blue-dark: #1E3A80;
  --wj-navy: #0F1F44;
  --wj-navy-2: #1A2B54;
  --wj-gray-50: #F7F8FA;
  --wj-gray-100: #EEF0F4;
  --wj-gray-150: #E5E9F0;
  --wj-gray-200: #DDE1E8;
  --wj-gray-300: #C4CAD4;
  --wj-gray-400: #8A94A6;
  --wj-gray-500: #5A6478;
  --wj-gray-700: #2F3745;
  --wj-gray-900: #14181F;
  --wj-white: #ffffff;

  /* SUIT covers both KR + EN characters — one family for both */
  --wj-font-kr: 'SUIT', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
  --wj-font-en: 'SUIT', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
}
html, body {
  margin: 0; padding: 0;
  background: #fff;
  font-family: var(--wj-font-kr);
  color: var(--wj-gray-900);
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-size: 15px;
  font-weight: 400;
}
h1, h2, h3, h4, p, span, div, li, td, th { word-break: keep-all; overflow-wrap: break-word; }

/* Never synthesize bold/italic if a weight isn't available */
html, body {
  font-synthesis: none;
  -webkit-font-synthesis: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Explicit heading defaults (browsers pick 700 for h1..h6 by default; declared here so overrides are predictable) */
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
button, input, select, textarea { font-weight: 400; }

/* Global body / description utility bumps */
p { font-size: inherit; }

/* Scroll reveal — respects reduced-motion */
.wj-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.85s cubic-bezier(0.16,0.7,0.35,1), transform 0.85s cubic-bezier(0.16,0.7,0.35,1); }
.wj-reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .wj-reveal, .wj-reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wj-mega { transition: none !important; }
  .wj-image-zoom img { transition: none !important; }
}

/* Image zoom hover */
.wj-image-zoom { overflow: hidden; }
.wj-image-zoom img { transition: transform 0.9s cubic-bezier(0.2,0.8,0.2,1); will-change: transform; }
.wj-image-zoom:hover img { transform: scale(1.04); }

/* Ghost button interaction */
.wj-btn-ghost { position: relative; transition: color 0.2s; }
.wj-btn-ghost svg { transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1); }
.wj-btn-ghost:hover svg { transform: translateX(6px); }

.en { font-family: var(--wj-font-en); letter-spacing: 0.02em; }

img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Body container — full viewport width with COMFORTABLE body gutter.
   Used by ALL content sections across ALL pages (home, about, group, biz…).
   Gives generous breathing room while still starting/ending at consistent x. */
.wj-container {
  max-width: 100%;
  margin: 0;
  padding: 0 var(--wj-body-gutter);
}
.wj-container-narrow {
  max-width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0 var(--wj-body-gutter);
}
/* Hero container — TIGHT edge gutter so hero text hugs the header logo edge.
   Only for hero visuals and header inner. */
.wj-hero-container {
  max-width: 100%;
  margin: 0;
  padding: 0 var(--wj-edge-gutter);
}

/* Section */
.wj-section {
  padding: clamp(48px, 7vw, 100px) 0;
}
.wj-section-sm {
  padding: clamp(40px, 5vw, 72px) 0;
}
.wj-section-gray {
  background: var(--wj-gray-50);
}

/* Type utilities */
.wj-eyebrow {
  font-family: var(--wj-font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wj-blue);
  text-transform: uppercase;
}

/* Unified hero SCROLL cue ============================
   Applies to every hero's scroll indicator (.xx-hero-scroll / .ci-hero-v2-scroll /
   home .wj-scroll-cue). The legacy 1px `.line` is restyled into a slim track with
   a travelling light + a chevron that drops top→bottom on an infinite loop. */
[class*="hero-scroll"], [class*="hero-v2-scroll"], .wj-scroll-cue {
  gap: 12px !important;
}
[class*="hero-scroll"] > .line, [class*="hero-v2-scroll"] > .line, .wj-scroll-cue > .line {
  position: relative !important;
  width: 22px !important; height: 52px !important;
  background: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
}
/* One-piece arrow (shaft + head = a single SVG shape) that glides down and fades. */
[class*="hero-scroll"] > .line::before, [class*="hero-v2-scroll"] > .line::before, .wj-scroll-cue > .line::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 10px; height: 36px;
  transform: translate(-50%, 0);
  opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='36' viewBox='0 0 10 36'%3E%3Cpath d='M5 1 V34 M1.8 30.8 L5 34.1 L8.2 30.8' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 36px no-repeat;
  animation: wj-scroll-arrow 1.8s cubic-bezier(.45,0,.55,1) infinite;
}
[class*="hero-scroll"] > .line::after, [class*="hero-v2-scroll"] > .line::after, .wj-scroll-cue > .line::after {
  content: none !important; display: none !important;
}
/* movement-led: glide down ~12px and return; opacity nearly constant */
@keyframes wj-scroll-arrow {
  0%, 100% { transform: translate(-50%, 0);    opacity: .7; }
  50%      { transform: translate(-50%, 12px); opacity: .55; }
}
.wj-hero-scrollcue {
  position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--wj-font-en); font-size: 10px; font-weight: 600; letter-spacing: .3em;
  color: rgba(255,255,255,.6); pointer-events: none;
}
@media (max-width: 900px) { .wj-hero-scrollcue { display: none; } }
@keyframes wj-scroll-run { 0% { background-position: 0 -42px, 0 0; } 100% { background-position: 0 42px, 0 0; } }
@keyframes wj-scroll-chev {
  0%   { opacity: 0; transform: translate(-50%, -10px) rotate(45deg); }
  45%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 4px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  [class*="hero-scroll"] > .line::before, [class*="hero-scroll"] > .line::after,
  [class*="hero-v2-scroll"] > .line::before, [class*="hero-v2-scroll"] > .line::after,
  .wj-scroll-cue > .line::before, .wj-scroll-cue > .line::after { animation: none !important; opacity: 1; }
}

/* Header ============================================== */
.wj-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid var(--wj-gray-100);
  transition: background 0.3s, border-color 0.3s;
}
.wj-header.expanded {
  background: white;
  border-bottom: 1px solid var(--wj-gray-100);
}
.wj-header.expanded .wj-header-logo-color { opacity: 1; }
.wj-header.expanded .wj-header-logo-white { opacity: 0; }
.wj-header.expanded .wj-header-nav button { color: var(--wj-gray-700); }
.wj-header.expanded .wj-header-right { color: var(--wj-gray-500); }
.wj-header.expanded .wj-header-right .link { color: var(--wj-gray-500); }
.wj-header.expanded .wj-lang-btn { color: var(--wj-gray-700); border-color: var(--wj-gray-200); }
.wj-header.expanded .wj-header-right .divider { background: var(--wj-gray-200); }

/* Nav item wrapper */
.wj-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* button left-aligned so mega column below matches exactly */
  /* min-width applied inline per item to reserve mega-column space */
}
.wj-nav-item > button {
  text-align: left;
}

/* Mega dropdown — sits flush against header, no visual gap */
.wj-mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: white;
  border-bottom: 1px solid var(--wj-gray-100);
  box-shadow: 0 12px 24px rgba(15,31,68,0.06);
  padding: 32px 0 56px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.22s ease;
  z-index: 90;
}
.wj-mega.open {
  max-height: 760px;
  min-height: 360px;         /* white band tall enough for the longest submenu column (회사소개: 6 items) */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Submenu column — CSS-only alignment.
   Absolutely positioned relative to the parent .wj-nav-item so its left edge
   ALWAYS matches the parent nav-item's left edge. No JS measurement needed. */
.wj-nav-submenu {
  position: absolute;
  top: 100%;                 /* directly below the nav-item (= bottom of header) */
  left: 0;                    /* GUARANTEED aligned to nav-item's left edge */
  margin: 0; padding: 32px 0 56px;
  list-style: none;
  min-width: 100%;            /* at least as wide as its nav-item */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 95;
}
.wj-nav-submenu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wj-nav-submenu li { list-style: none; margin: 0; padding: 0; }
.wj-nav-submenu li button {
  display: block;
  padding: 8px 20px 8px 0;
  font-size: 18px;                /* +2px, matches main-nav hierarchy */
  font-weight: 400;               /* SUIT Regular */
  color: var(--wj-gray-500) !important;   /* always readable on white mega band */
  transition: color 0.15s;
  letter-spacing: -0.01em;        /* match main-nav for identical rendering width */
  line-height: 1.55;
  white-space: nowrap;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.wj-nav-submenu li button:hover { color: var(--wj-blue) !important; }
/* EN: English labels are wider than Korean. Column pitch = nav-item min-width
   (120px) + nav gap (clamp 28–52px). Submenu text is sized so the longest label
   "Business Develop." (~130px @15px) always ends ≥ ~20px before the next column. */
.lang-en .wj-nav-submenu li button { font-size: 16px; letter-spacing: -0.015em; padding-right: 0; }
/* Business column (2nd item) gets a wider reserve in EN so the ESG column starts
   clearly after "Business Develop." */
.lang-en .wj-header-nav > .wj-nav-item:nth-child(2) { min-width: 156px !important; }
@media (max-width: 1400px) { .lang-en .wj-nav-submenu li button { font-size: 15px; } }
@media (max-width: 1200px) { .lang-en .wj-nav-submenu li button { font-size: 14px; } .lang-en .wj-header-nav > .wj-nav-item:nth-child(2) { min-width: 140px !important; } }
/* Override transparent-header cascade so submenu text stays dark on white band */
.wj-header.transparent .wj-nav-submenu li button { color: var(--wj-gray-500) !important; }
.wj-header.transparent .wj-nav-submenu li button:hover { color: var(--wj-blue) !important; }
@media (max-width: 900px) { .wj-mega { display: none; } .wj-nav-submenu { display: none; } }
.wj-header-inner {
  /* Full-viewport-width header with tight edge padding — logo hugs the left,
     right-nav hugs the right. Not bound by --wj-content-max. */
  max-width: 100%;
  margin: 0;
  padding: 0 var(--wj-edge-gutter);
  height: 76px;
  display: flex;
  align-items: center;
  gap: 44px;               /* space between logo | nav | right group */
}
.wj-header-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.wj-header-logo-full {
  /* Explicit box (logo PNG is 934×112) so the header layout is final before the
     image loads — otherwise the centred nav jumps left→right on first paint. */
  height: 26px;
  width: 217px;
  aspect-ratio: 934 / 112;
  display: block;
  transition: opacity 0.25s;
}
.wj-header-logo-white {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .wj-header-logo-full { height: 22px; width: 183px; }
}
.wj-header-nav {
  display: flex;
  gap: clamp(28px, 2.4vw, 52px);   /* comfortable spacing between top-menu items */
  flex: 1;                          /* fill middle space */
  justify-content: center;          /* nav centered in the header */
}
.wj-header-nav button {
  padding: 28px 0;
  font-size: 20px;              /* +2px from 18 → tighter hierarchy match with sub */
  font-weight: 500;             /* SUIT Medium — clean, refined */
  color: var(--wj-gray-700);
  position: relative;
  transition: color 0.2s;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wj-header-nav button.active {
  font-weight: 600;         /* SUIT SemiBold — active tab distinct but not heavy */
}
.wj-header-nav button:hover { color: var(--wj-blue); }
.wj-header-nav button.active {
  color: var(--wj-navy);
  font-weight: 700;
}
.wj-header-nav button.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--wj-blue);
}
.wj-header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--wj-gray-500);
  flex-shrink: 0;
  white-space: nowrap;
}
.wj-header-right .link {
  color: var(--wj-gray-500);
  font-weight: 400;
  transition: color 0.2s;
  white-space: nowrap;
}
.wj-header-right .link:hover { color: var(--wj-navy); }
.wj-header-right .divider {
  width: 1px; height: 12px;
  background: var(--wj-gray-200);
  flex-shrink: 0;
}

/* Language dropdown — must sit above mega menu */
.wj-lang {
  position: relative;
  font-family: var(--wj-font-en);
  font-weight: 400;
  z-index: 120;
}
.wj-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wj-gray-700);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border: 1px solid var(--wj-gray-200);
  border-radius: 2px;
  min-width: 62px;
  transition: border-color 0.15s;
}
.wj-lang-btn:hover { border-color: var(--wj-gray-400); }
.wj-lang-btn .caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform 0.2s;
}
.wj-lang.open .wj-lang-btn .caret { transform: rotate(-135deg); margin-top: 2px; }
.wj-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid var(--wj-gray-200);
  min-width: 88px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 31, 68, 0.14);
  z-index: 130;
}
.wj-lang-menu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  color: var(--wj-gray-700);
  font-weight: 400;
}
.wj-lang-menu button:hover { background: var(--wj-gray-50); color: var(--wj-blue); }

.wj-header-search {
  color: var(--wj-gray-500);
  display: flex;
  align-items: center;
}

/* Header transparent variant (over dark hero) */
.wj-header.transparent {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.wj-header.transparent .wj-header-nav button { color: rgba(255,255,255,0.85); }
.wj-header.transparent .wj-header-nav button:hover { color: white; }
.wj-header.transparent .wj-header-nav button.active { color: white; }
.wj-header.transparent .wj-header-nav button.active::after { background: white; }
.wj-header.transparent .wj-header-right { color: rgba(255,255,255,0.85); }
.wj-header.transparent .wj-header-right .link { color: rgba(255,255,255,0.85); }
.wj-header.transparent .wj-header-right .divider { background: rgba(255,255,255,0.2); }
.wj-header.transparent .wj-lang-btn {
  color: white;
  border-color: rgba(255,255,255,0.35);
}
.wj-header.transparent .wj-lang-btn:hover { border-color: rgba(255,255,255,0.7); }
.wj-header.transparent .wj-header-logo-color { opacity: 0; }
.wj-header.transparent .wj-header-logo-white { opacity: 1; }

/* Full-bleed helper — break out of container to 100vw */
.wj-fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.wj-bleed-band {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.wj-bleed-band.wj-bleed-tall { min-height: clamp(420px, 55vw, 720px); }
.wj-bleed-band.wj-bleed-mid  { min-height: clamp(320px, 40vw, 520px); }
.wj-bleed-band.wj-bleed-slim { min-height: clamp(220px, 26vw, 340px); }

/* Placeholder ============================================== */
.wj-ph {
  background: linear-gradient(135deg, var(--wj-gray-100) 0%, var(--wj-gray-150) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wj-gray-400);
  font-family: var(--wj-font-en);
  position: relative;
  overflow: hidden;
}
.wj-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.5) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.5) 25%, transparent 25%);
  background-size: 20px 20px;
  opacity: 0.3;
}
.wj-ph-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
}
.wj-ph-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,0.7);
  color: var(--wj-gray-500);
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 8px;
}
.wj-ph-label {
  font-size: 13px;
  color: var(--wj-gray-500);
  font-weight: 400;
  letter-spacing: 0.03em;
}
.wj-ph-note {
  font-size: 11px;
  color: var(--wj-gray-400);
  margin-top: 6px;
  letter-spacing: 0;
  font-family: var(--wj-font-kr);
}

/* Video placeholder (hero) */
.wj-video-ph {
  position: absolute;
  inset: 0;
  background: #0F1F44;
  overflow: hidden;
}
.wj-video-ph::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(42,74,158,0.5) 0, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(30,58,128,0.5) 0, transparent 45%);
}
.wj-video-ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(0.3) contrast(1.05);
}

/* Buttons */
.wj-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;
  transition: all 0.2s;
  cursor: pointer;
}
.wj-btn-primary {
  background: var(--wj-blue);
  color: white;
}
.wj-btn-primary:hover { background: var(--wj-blue-dark); }
.wj-btn-navy {
  background: var(--wj-navy);
  color: white;
}
.wj-btn-outline {
  border: 1px solid var(--wj-gray-300);
  color: var(--wj-navy);
}
.wj-btn-outline:hover { border-color: var(--wj-navy); }
.wj-btn-ghost {
  padding: 8px 0;
  color: var(--wj-navy);
  border-bottom: 1px solid var(--wj-navy);
  border-radius: 0;
  font-size: 13px;
}
.wj-btn-ghost-white {
  padding: 8px 0;
  color: white;
  border-bottom: 1px solid white;
  border-radius: 0;
  font-size: 13px;
}

/* Page hero ============================================== */
.wj-hero {
  position: relative;
  background: var(--wj-navy);
  color: white;
  padding: 210px 0 100px;
  overflow: hidden;
  min-height: 420px;
}
.wj-hero-bg {
  position: absolute;
  inset: 0;
}
.wj-hero-bg .wj-ph {
  height: 100%;
  background: linear-gradient(135deg, #1A2B54 0%, #0F1F44 100%);
}
.wj-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,31,68,0.55) 0%, rgba(15,31,68,0.35) 55%, rgba(15,31,68,0.75) 100%),
    linear-gradient(90deg, rgba(15,31,68,0.55) 0%, rgba(15,31,68,0.15) 55%, rgba(15,31,68,0) 100%);
}
/* When PageHero has a real image, use a lighter overlay so imagery shows through */
.wj-hero.wj-hero-image .wj-hero-overlay {
  background:
    linear-gradient(180deg, rgba(15,31,68,0.35) 0%, rgba(15,31,68,0.15) 45%, rgba(15,31,68,0.65) 100%),
    linear-gradient(90deg, rgba(15,31,68,0.55) 0%, rgba(15,31,68,0.05) 60%, rgba(15,31,68,0) 100%);
}
.wj-hero-inner {
  position: relative;
  z-index: 1;
}
.wj-hero-crumb {
  font-family: var(--wj-font-en);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}
.wj-hero-crumb .sep { margin: 0 10px; opacity: 0.4; }
.wj-hero-eyebrow {
  font-family: var(--wj-font-en);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 20px;
}
.wj-hero h1 {
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: white;
}
.wj-hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  max-width: 560px;
  font-weight: 400;
}
.wj-hero-side {
  position: absolute;
  right: clamp(24px, 4vw, 60px);
  bottom: 90px;
  font-family: var(--wj-font-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.6);
  line-height: 2;
  text-align: right;
  z-index: 1;
}

/* Sub navigation (division tabs) */
.wj-subnav {
  border-bottom: 1px solid var(--wj-gray-100);
  background: white;
}
.wj-subnav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 60px);
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.wj-subnav button {
  padding: 22px 0;
  margin-right: 40px;
  font-size: 14px;
  font-weight: 400;
  color: var(--wj-gray-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.wj-subnav button:hover { color: var(--wj-navy); }
.wj-subnav button.active {
  color: var(--wj-navy);
  font-weight: 700;
  border-bottom-color: var(--wj-blue);
}

/* Section head */
.wj-shead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 68px;
}
.wj-shead .l h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--wj-navy);
  margin: 14px 0 0;
}
.wj-shead .r {
  color: var(--wj-gray-500);
  font-size: 17px;
  line-height: 1.85;
  max-width: 560px;
}
@media (max-width: 900px) {
  .wj-shead { grid-template-columns: 1fr; gap: 24px; }
}

/* Footer */
.wj-footer {
  background: var(--wj-navy);
  color: rgba(255,255,255,0.6);
  padding: 60px 0 28px;
  font-size: 13px;
}
.wj-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 28px;
}
.wj-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  text-align: right;
  font-weight: 300;
}
.wj-footer-contact .v {
  color: rgba(255,255,255,0.62);
  font-family: var(--wj-font-en);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-left: 4px;
}
@media (max-width: 900px) {
  .wj-footer-right { align-items: flex-start; }
  .wj-footer-contact { text-align: left; }
}
.wj-footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) {
  .wj-footer-top { grid-template-columns: 1fr; gap: 30px; }
}
.wj-footer-brand .txt {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.wj-footer-brand p { margin: 4px 0; }
.wj-footer-brand .name { color: rgba(255,255,255,0.85); font-weight: 400; margin-bottom: 10px; font-size: 14px; }
.wj-footer-brand .note { color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 12px; }
.wj-footer-links {
  display: flex;
  gap: 22px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 20px;
}
/* links (<a>) and buttons share one box model so every item sits on the same line */
.wj-footer-links button, .wj-footer-links a {
  display: inline-flex; align-items: center; height: 20px;
  margin: 0; padding: 0; border: none; background: none;
  font: inherit; font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: 0;
  color: rgba(255,255,255,0.7); text-decoration: none; vertical-align: middle;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.wj-footer-links button:hover, .wj-footer-links a:hover { color: white; }
.wj-footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--wj-font-en);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* Bottom CTA */
.wj-bcta {
  background: var(--wj-navy);
  color: white;
  padding: 60px 0;
}
.wj-bcta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.wj-bcta .eyebrow {
  font-family: var(--wj-font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}
.wj-bcta .msg {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Form fields */
.wj-field {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  border: 1px solid var(--wj-gray-200);
  background: white;
  color: var(--wj-navy);
  outline: none;
  border-radius: 0;
  font-family: inherit;
  transition: border-color 0.15s;
}
.wj-field:focus { border-color: var(--wj-blue); }
.wj-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--wj-navy);
  margin-bottom: 8px;
}
.wj-label .req { color: #C0392B; margin-left: 4px; }

/* Mobile header: burger + drawer (≤900px) */
.wj-burger { display:none; margin-left:auto; width:44px; height:44px; background:none; border:0; cursor:pointer; position:relative; }
.wj-burger span { position:absolute; left:11px; right:11px; height:1.6px; background:var(--wj-navy); transition:background .2s; }
.wj-burger span:nth-child(1) { top:15px; } .wj-burger span:nth-child(2) { top:21px; } .wj-burger span:nth-child(3) { top:27px; }
.wj-header.transparent .wj-burger span { background:white; }
.wj-mdim { position:fixed; inset:0; z-index:300; background:rgba(8,16,36,.5); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.wj-mdim.open { opacity:1; pointer-events:auto; }
.wj-mdrawer { position:fixed; top:0; right:0; bottom:0; z-index:301; width:min(360px, 88vw); background:white; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1); visibility:hidden; }
.wj-mdrawer.open { transform:none; visibility:visible; }
.wj-mdrawer-head { display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 12px 0 20px; border-bottom:1px solid var(--wj-gray-100); }
.wj-mdrawer-head img { height:20px; width:auto; }
.wj-mdrawer-x { width:44px; height:44px; background:none; border:0; color:var(--wj-navy); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wj-mdrawer-x svg { width:22px; height:22px; }
.wj-mdrawer-nav { flex:1; overflow-y:auto; padding:8px 0; }
.wj-mgroup { border-bottom:1px solid #EEF1F4; }
.wj-mgroup-t { width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; min-height:56px; background:none; border:0; cursor:pointer; font-family:inherit; font-size:17px; font-weight:600; color:var(--wj-navy); text-align:left; }
.wj-mgroup-t.active { color:var(--wj-blue); }
.wj-mgroup-t svg { width:18px; height:18px; transition:transform .3s ease; color:var(--wj-gray-500); }
.wj-mgroup.open .wj-mgroup-t svg { transform:rotate(180deg); }
.wj-mgroup-list { list-style:none; margin:0; padding:0; display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.wj-mgroup.open .wj-mgroup-list { grid-template-rows:1fr; }
.wj-mgroup-list > li { overflow:hidden; }
.wj-mgroup-list > li > div { padding:0 20px 14px; display:flex; flex-direction:column; }
.wj-mgroup-list button { text-align:left; padding:11px 0 11px 12px; min-height:44px; background:none; border:0; border-left:1px solid var(--wj-gray-100); cursor:pointer; font-family:inherit; font-size:15px; color:var(--wj-gray-500); }
.wj-mgroup-list button:active { color:var(--wj-blue); }
.wj-mdrawer-foot { display:flex; gap:20px; padding:18px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--wj-gray-100); font-size:13px; }
.wj-mdrawer-foot a { color:var(--wj-gray-500); }
@media (max-width: 900px) {
  .wj-burger { display:block; }
  .wj-header-right { display:none; }
}
@media (min-width: 901px) { .wj-mdim, .wj-mdrawer { display:none; } }

/* Scroll animations */
.wj-fade { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.wj-fade.in { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
  .wj-header-nav { gap: 20px; }
  .wj-header-nav button { padding: 22px 0; font-size: 14px; }
  .wj-header-inner { height: 68px; }
}
@media (max-width: 900px) {
  .wj-header-nav { display: none; }
  .wj-hero-side { display: none; }
}

/* ============================================================
   RESPONSIVE FIXES — cross-monitor / cross-scaling optimization
   ============================================================ */

/* 1. Prevent horizontal scroll globally
   `100vw` includes scrollbar width on Windows/Linux → subtle overflow.
   `overflow-x: clip` (falls back to hidden) contains any layout accident
   while still allowing sticky/position: fixed to work. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* 2. Full-bleed helper — use container-relative technique instead of 100vw
   so scrollbars don't cause horizontal overflow. */
.wj-fullbleed {
  width: 100%;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
}
/* Modern viewport units (dvw) — respects browser UI on mobile */
@supports (width: 100dvw) {
  .wj-fullbleed {
    margin-left: calc(-50dvw + 50%);
    margin-right: calc(-50dvw + 50%);
  }
}

/* 3. Images — global sanity defaults */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* But images explicitly sized via style (position/inset overlays) should NOT
   get height: auto — the inline width:100%; height:100% overrides win via specificity. */

/* 4. Container is defined once above (single source of truth for
   Global Content Grid — Header logo · Hero text · Section title all share
   `padding: 0 clamp(24px, 4vw, 60px)` so their left edges align exactly). */

/* 5. Typography baseline — fixed 16px root at 100% zoom (browser default).
   Pixel-precise inline sizes in JSX are the authoritative type scale. */

/* 6. Laptop viewport hero adjustments — 1366×768 / 1440×900 should not have
   hero eat the entire screen. Unified across ALL page heroes. */
@media (max-height: 800px) {
  .gv-hero, .ab-hero, .hi-hero,
  .rf-hero, .rc-hero, .bm-hero,
  .mt-hero, .lg-hero, .bd-hero,
  .ci-hero-v2 { min-height: 520px !important; }
}
@media (max-height: 700px) {
  .gv-hero, .ab-hero, .hi-hero,
  .rf-hero, .rc-hero, .bm-hero,
  .mt-hero, .lg-hero, .bd-hero,
  .ci-hero-v2 { min-height: 480px !important; }
}

/* 7. Windows display-scaling (125%/150%) — the browser reports these as smaller
   effective viewports; media queries handle this naturally. Extra guard: on
   1200-1440px range (typical scaled 1600-1920 monitor), tighten grid gaps
   used across division panels/product rows. */
/* Adjust global gutter for laptop and ultrawide (all elements track it) */
@media (max-width: 1400px) {
  :root { --wj-gutter: clamp(20px, 3vw, 44px); }
}

/* 8. Ultrawide capture — keep hero content readable on 21:9 / 32:9 monitors. */
@media (min-width: 2400px) {
  :root { --wj-content-max: 1800px; --wj-gutter: 60px; }
  .gv-hero, .ab-hero, .hi-hero,
  .rf-hero, .rc-hero, .bm-hero,
  .mt-hero, .lg-hero, .bd-hero,
  .ci-hero-v2 { min-height: 720px; }
}

/* 9. Mega menu — never overflow on very short viewports */
@media (max-height: 720px) {
  .wj-mega.open { max-height: min(520px, 80vh); overflow-y: auto; }
}

/* 10. Image assets that use `object-fit: cover` inside fixed-aspect boxes:
    prevent Safari from ignoring aspect-ratio on <img> nested in wj-image-zoom */
.wj-image-zoom { position: relative; }
.wj-image-zoom > img { width: 100%; height: 100%; }

/* ============================================================
   11. SITE-WIDE HERO TEXT POSITION — UNIFIED
   ------------------------------------------------------------
   Every page hero has its own class (.ab-hero-inner, .gv-hero-inner,
   .hi-hero-inner, .rf-hero-inner, .rc-hero-inner, .bm-hero-inner,
   .mt-hero-inner, .lg-hero-inner, .bd-hero-inner, .ph-hero-inner,
   .ci-hero-v2-inner, .wj-hero-inner).

   To guarantee identical vertical rhythm across the entire site,
   we override them all here with ONE rule using `!important`.

   Text position spec (from client):
   - horizontal: left-aligned (keep existing per-page behavior)
   - vertical: content block centered around ~57% down the hero
     (visually "slightly below true center")
   - achieved via: justify-content:center + heavier padding-top than
     padding-bottom → optical mid-shift downward
   - font-size and typography scale unchanged per page
============================================================ */
.ab-hero-inner,
.gv-hero-inner,
.hi-hero-inner,
.rf-hero-inner,
.rc-hero-inner,
.bm-hero-inner,
.mt-hero-inner,
.lg-hero-inner,
.bd-hero-inner,
.ph-hero-inner,
.ci-hero-v2-inner,
.wj-hero-inner {
  /* Layout — content block flows vertically, anchored below true center */
  position: relative !important;
  z-index: 3 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* Heavier top padding vs bottom → optical center sits ~57% down.
     Uses vh so it scales with viewport height, keeping ratio stable
     across desktop / laptop / ultrawide. */
  padding-top: clamp(180px, 24vh, 260px) !important;
  padding-bottom: clamp(80px, 14vh, 150px) !important;
  text-align: left !important;
}

/* Mobile — keep same rhythm but reduce fixed offsets */
@media (max-width: 900px) {
  .ab-hero-inner,
  .gv-hero-inner,
  .hi-hero-inner,
  .rf-hero-inner,
  .rc-hero-inner,
  .bm-hero-inner,
  .mt-hero-inner,
  .lg-hero-inner,
  .bd-hero-inner,
  .ph-hero-inner,
  .ci-hero-v2-inner,
  .wj-hero-inner {
    padding-top: clamp(160px, 22vh, 220px) !important;
    padding-bottom: clamp(70px, 12vh, 120px) !important;
  }
}

/* PageHero (.wj-hero) — remove its top/bottom section padding so the
   inner rule above controls vertical rhythm. Uses min-height like others. */
.wj-hero {
  padding: 0 !important;
  min-height: 80vh !important;
  height: 80vh !important;
}
@media (max-height: 800px) {
  .wj-hero { min-height: 520px !important; height: auto !important; }
}
@media (max-height: 700px) {
  .wj-hero { min-height: 480px !important; }
}
@media (min-width: 2400px) {
  .wj-hero { min-height: 720px !important; }
}

/* ============================================================
   DISPLAY-SCALING LAYER (Windows 100% / 125% / 150%, laptops, QHD)
   ------------------------------------------------------------
   OS scaling shrinks the CSS viewport, not the design:
     1920×1080 @100% → 1920 × ~950 CSS px
     1920×1080 @125% → 1536 × ~740
     1920×1080 @150% → 1280 × ~600
     2560×1440 @100% → 2560 × ~1300
     Laptop 1366/1440 → 1366–1440 × ~650–780
   So every rule below keys off viewport WIDTH (fluid sizes) and viewport
   HEIGHT (short screens), never device-pixel-ratio — that is what makes
   the layout look the same at every scaling level.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- media always stays inside its box, keeps its ratio ---- */
img, video, svg, canvas, iframe, picture { max-width: 100%; }
img, video { height: auto; }              /* class rules with explicit height (object-fit heroes) still win */
video { display: block; }

/* ---- long words / URLs / e-mails never push layout sideways ---- */
a, .v, td, th, dd { overflow-wrap: anywhere; }
table { max-width: 100%; }

/* ---- content never becomes ultra-wide on QHD / ultrawide ----
   body gutter grows so the readable column caps at ~1840px, centred. */
.wj-container {
  padding-left: max(var(--wj-body-gutter), calc((100% - 1840px) / 2)) !important;
  padding-right: max(var(--wj-body-gutter), calc((100% - 1840px) / 2)) !important;
}

/* ---- header: fluid so it fits 1280px (1920 @150%) without overlap ---- */
.wj-header-logo-full { height: clamp(21px, 1.4vw, 26px); width: auto; }
.wj-header-inner { gap: clamp(20px, 2.3vw, 44px); }
.wj-header-nav { gap: clamp(18px, 2.2vw, 52px); min-width: 0; }
.wj-header-nav > .wj-nav-item { min-width: clamp(92px, 7.4vw, 120px) !important; }
.wj-header-nav button { font-size: clamp(15px, 1.05vw, 20px); }
.wj-nav-submenu li button { font-size: clamp(14px, 0.95vw, 18px); }
.wj-header-right { flex-shrink: 0; }
.wj-header-right .link { font-size: clamp(11.5px, 0.72vw, 13px); }
@media (max-width: 1440px) {
  .wj-header-right { gap: 12px; }
}
@media (max-width: 1100px) {
  .wj-header-nav > .wj-nav-item { min-width: 0 !important; }
}

/* ============================================================
   HEADER NAVIGATION v2 — content-sized columns (flex, no per-item offsets)
   ------------------------------------------------------------
   Each .wj-nav-item is a flex COLUMN: [main button] + [submenu list].
   The submenu list stays IN FLOW with height:0 / overflow:visible, so the
   column width = max(main label, longest sub label) automatically — in KR
   and EN, and for future long labels ("수출입 통합솔루션", "글로벌 유통·시장진출",
   "Market Entry & Distribution"). Columns can therefore never overlap;
   spacing between them is one fluid gap.
   Priority when space runs out: gap → side padding → utility gap → font (last).
   ============================================================ */
.wj-header { --nav-gap: clamp(40px, 3.6vw, 76px); }
.wj-header-inner {
  padding: 0 clamp(24px, 2.8vw, 56px) !important;
  gap: clamp(28px, 3vw, 64px) !important;
  height: 76px;
}
.wj-header-nav {
  flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: center; align-items: stretch;
  gap: var(--nav-gap) !important;
}
.wj-header-nav > .wj-nav-item {
  min-width: 0 !important;          /* width comes from content, not a reserve */
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  position: relative;
}
.wj-header-nav > .wj-nav-item > button {
  font-size: 18px !important;        /* spec: 17–18px desktop */
  padding: 26px 0 !important;
  line-height: 24px;
  position: relative;
}
/* enlarged hover/click target: extends half the gap each side (never overlaps) */
.wj-header-nav > .wj-nav-item > button::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--nav-gap) / -2 + 2px); right: calc(var(--nav-gap) / -2 + 2px);
}
.wj-nav-submenu {
  position: relative !important; top: auto !important; left: auto !important;
  height: 0; overflow: visible;
  padding: 0 !important; min-width: 0 !important;
  z-index: 95;
}
.wj-nav-submenu > li:first-child { margin-top: 30px; }
.wj-nav-submenu li button {
  font-size: 15px !important;        /* spec: 14–15px */
  padding: 9px 0 !important;
  line-height: 1.5;
  white-space: nowrap;                /* long labels stay on one line */
}
.lang-en .wj-nav-submenu li button { font-size: 15px !important; letter-spacing: -0.005em; }
.lang-en .wj-header-nav > .wj-nav-item:nth-child(2) { min-width: 0 !important; }
/* Equal columns: every top-level item reserves the same width (≥ its longest
   sub label in KR and EN: "고충 · 제보 채널", "Business Develop.", "Market Entry"),
   so the distance from one main label to the next is identical across the bar. */
.wj-header-nav > .wj-nav-item { min-width: 132px !important; }
@media (max-width: 1300px) { .wj-header-nav > .wj-nav-item { min-width: 122px !important; } }
/* continuous hover path: the mega band starts flush under the header */
.wj-mega { top: 100%; }
.wj-mega.open { min-height: 340px; }

/* right utility block never shrinks or wraps */
.wj-header-right { flex: 0 0 auto; gap: clamp(12px, 1.1vw, 18px) !important; }
.wj-header-logo { flex: 0 0 auto; }
.wj-header-logo-full { height: 26px !important; width: auto !important; }

/* staged tightening ------------------------------------------------------- */
@media (max-width: 1600px) {
  .wj-header { --nav-gap: clamp(34px, 3.2vw, 52px); }
}
@media (max-width: 1440px) {
  .wj-header { --nav-gap: clamp(28px, 2.6vw, 40px); }
  .wj-header-inner { padding: 0 28px !important; gap: 28px !important; }
  .wj-header-right { gap: 12px !important; }
  .wj-header-logo-full { height: 23px !important; }
}
@media (max-width: 1300px) {
  .wj-header { --nav-gap: 24px; }
  .wj-header-inner { padding: 0 22px !important; gap: 22px !important; }
  .wj-header-nav > .wj-nav-item > button { font-size: 17px !important; }
  .wj-nav-submenu li button, .lang-en .wj-nav-submenu li button { font-size: 14px !important; }
  .lang-en .wj-header-right .link { display: none; }   /* EN labels are longest — utility links move to drawer/footer */
  .lang-en .wj-header-right .divider { display: none; }
}
/* tablet and below → hamburger + drawer (never squeeze the desktop nav) */
@media (max-width: 1100px) {
  .wj-header-nav, .wj-header-right, .wj-mega { display: none !important; }
  .wj-burger { display: block !important; }
  .wj-header-inner { height: 68px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .wj-mdim { display: block !important; }
  .wj-mdrawer { display: flex !important; }
}

/* ---- sub-page heroes on short viewports (125% / 150% / laptops) ----
   80vh is only ~480–600px there; relax the fixed top offset so the title,
   subtitle and description always fit inside the hero without clipping. */
@media (max-height: 820px) and (min-width: 901px) {
  .ab-hero-inner, .gv-hero-inner, .hi-hero-inner, .rf-hero-inner, .rc-hero-inner,
  .bm-hero-inner, .mt-hero-inner, .lg-hero-inner, .bd-hero-inner, .ph-hero-inner,
  .ci-hero-v2-inner, .wj-hero-inner, .p-hero-inner {
    padding-top: clamp(120px, 20vh, 180px) !important;
    padding-bottom: clamp(56px, 10vh, 100px) !important;
  }
  .ab-hero, .gv-hero, .hi-hero, .rf-hero, .rc-hero, .bm-hero, .mt-hero,
  .lg-hero, .bd-hero, .ph-hero, .p-hero, .ev-hero, .inq-hero {
    height: auto !important;
    min-height: max(520px, 80vh) !important;
  }
  [class*="hero-scroll"], [class*="hero-v2-scroll"], .wj-hero-scrollcue { bottom: 18px !important; }
}
@media (max-height: 640px) and (min-width: 901px) {
  .ab-hero, .gv-hero, .hi-hero, .rf-hero, .rc-hero, .bm-hero, .mt-hero,
  .lg-hero, .bd-hero, .ph-hero, .p-hero, .ev-hero, .inq-hero, .wj-hero {
    min-height: 480px !important;
  }
  /* scroll cue competes with text on very short screens — hide it */
  [class*="hero-scroll"], [class*="hero-v2-scroll"], .wj-hero-scrollcue, .wj-scroll-cue { display: none !important; }
}

/* ---- sticky elements respect short screens ---- */
@media (max-height: 700px) {
  .wj-mega.open { min-height: 300px; }
  .wj-nav-submenu { padding-top: 24px; padding-bottom: 36px; }
}

/* ---- data tables: never overflow the page; scroll inside their wrapper ---- */
.p-spec-scroll { max-width: 100%; }
@media (max-width: 1280px) {
  .p-spec { font-size: 13.5px; }
}