/* ==========================================================================
   CREZ — Tokens
   ========================================================================== */
:root{
  --ink:#000000;
  --brand-purple:#4D208D;

  --canvas:#FAFAFA;
  --surface:#FFFFFF;
  --surface-2:#F5F2FA;
  --surface-border:#E6E1EE;
  --surface-border-strong:#D5CCE3;
  --text-primary:#15121C;
  --text-secondary:#56505F;
  --text-tertiary:#847D90;
  --accent:#4D208D;
  --accent-soft:#EFE8F7;
  --accent-contrast:#FFFFFF;
  --shadow:0 20px 50px rgba(30,18,48,.10);
  --shadow-sm:0 6px 20px rgba(30,18,48,.08);
  --header-bg:rgba(250,250,250,.78);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
  --header-h:76px;

  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;

  /* dark-theme header chrome defaults; overridden for light theme below */
  --header-ink:#F5F3F8;
  --header-bg-scrolled:rgba(10,9,16,.74);
  --header-border:rgba(255,255,255,.10);
  --header-hover:rgba(255,255,255,.09);
  --header-surface:#17141D;
  --header-surface-border:#2E2838;
  --header-accent:#9B7DD4;
  --header-shadow:0 10px 30px rgba(0,0,0,.35);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --header-h-total:calc(var(--header-h) + var(--safe-t));
  --header-height:var(--header-h-total);
}

[data-theme="dark"]{
  --canvas:#0A0910;
  --surface:#161320;
  --surface-2:#1D1929;
  --surface-border:#2B2538;
  --surface-border-strong:#3B324A;
  --text-primary:#F6F4F9;
  --text-secondary:#B7AFC4;
  --text-tertiary:#847C93;
  --accent:#9B7DD4;
  --accent-soft:rgba(155,125,212,.14);
  --accent-contrast:#FFFFFF;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --shadow-sm:0 10px 26px rgba(0,0,0,.4);
  --header-bg:rgba(10,9,16,.72);
}

/* light theme: header chrome follows the site theme (the hero scrim is
   theme-colored too, so the transparent header reads over it — see Hero) */
[data-theme="light"]{
  --header-ink:var(--text-primary);
  --header-bg-scrolled:rgba(255,255,255,.82);
  --header-border:var(--surface-border);
  --header-hover:rgba(21,18,28,.06);
  --header-surface:var(--surface);
  --header-surface-border:var(--surface-border);
  --header-accent:var(--accent);
  --header-shadow:var(--shadow-sm);
}

/* per-section backgrounds — ABOUT/CONTACT/FOOTER are told apart by a subtle
   shift in bg color instead of a divider line; footer keeps its own
   dedicated "cool graphite" palette, independent of canvas/surface/text */
:root,
[data-theme="light"]{
  --about-section-bg:#FAFAFA;
  --contact-section-bg:#F6F8FB;

  --footer-bg-start:#F0F3F7;
  --footer-bg-end:#E4EAF1;

  --footer-text:#1C2430;
  --footer-muted:#5D6877;
  --footer-divider:rgba(28,36,48,.16);
}

[data-theme="dark"]{
  --about-section-bg:#0A0910;
  --contact-section-bg:#0F131B;

  --footer-bg-start:#171D28;
  --footer-bg-end:#252E3E;

  --footer-text:#F7F9FC;
  --footer-muted:#B8C2D0;
  --footer-divider:rgba(247,249,252,.18);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-height)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sprite-defs{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:fixed;top:-60px;left:12px;z-index:999;
  background:var(--ink);color:#fff;
  padding:.8em 1.2em;border-radius:var(--radius-sm);
  transition:top .25s var(--ease);
}
.skip-link:focus{top:12px}

/* ==========================================================================
   Shared bits
   ========================================================================== */
.kicker{
  display:flex;align-items:center;gap:10px;width:fit-content;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;
  color:var(--accent);margin:0 0 14px;
}
.kicker::before{
  content:"";width:16px;height:9px;background:var(--brand-purple);
  clip-path:polygon(22% 0,100% 0,78% 100%,0 100%);
  flex:none;
}
.section-head{max-width:760px;margin:0 0 44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{
  font-size:clamp(1.75rem,1.35rem + 1.8vw,3rem);
  font-weight:800;letter-spacing:-.01em;line-height:1.25;
}
.section-desc{margin-top:14px;color:var(--text-secondary);font-size:clamp(1rem,0.95rem + 0.22vw,1.125rem);line-height:1.75}
.pre-line{white-space:pre-line}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.btn-primary{
  background:var(--brand-purple);color:#fff;
  box-shadow:0 14px 30px rgba(77,32,141,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(77,32,141,.45)}

.reveal{opacity:1;transform:none}
.js-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft)}
.js-ready .reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .js-ready .reveal{opacity:1;transform:none;transition:none}
}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;
  color:var(--header-ink);
  transition:background-color .25s var(--ease);
}
.icon-btn:hover{background:var(--header-hover)}
.icon-btn svg{width:19px;height:19px}

.brand-mark{height:22px;width:auto}
/* dark/light logo swap, shared by the header brand and the footer brand */
.brand-mark-light{display:none}
[data-theme="light"] .brand-mark-dark{display:none}
[data-theme="light"] .brand-mark-light{display:block}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--header-h-total);
  padding-top:var(--safe-t);
  padding-left:var(--safe-l);padding-right:var(--safe-r);
  background:transparent;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:var(--header-bg-scrolled);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--header-border);
  box-shadow:var(--header-shadow);
}
.header-inner{
  max-width:1180px;margin:0 auto;height:100%;
  padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;flex:none}
.main-nav ul{display:flex;gap:36px}
.main-nav a{
  font-size:.86rem;font-weight:700;letter-spacing:.09em;
  color:var(--header-ink);position:relative;padding:6px 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--brand-purple);transition:right .3s var(--ease);
}
.main-nav a:hover::after,.main-nav a.is-active::after{right:0}

.header-actions{display:flex;align-items:center;gap:6px}

/* language switch */
.lang-switch{position:relative}
.lang-switch-btn{width:auto;padding:0 12px;gap:6px}
.lang-code{font-size:.76rem;font-weight:800;letter-spacing:.04em}
.lang-switch-btn.is-open{background:var(--header-hover)}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:50;
  min-width:168px;padding:8px;border-radius:var(--radius-md);
  background:var(--header-surface);border:1px solid var(--header-surface-border);
  color:var(--header-ink);
  box-shadow:var(--header-shadow);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.lang-menu:not([hidden]){opacity:1;transform:translateY(0);pointer-events:auto}
.lang-menu li{margin:0}
.lang-menu button{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 10px;min-height:44px;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:600;text-align:left;
}
.lang-menu button:hover{background:var(--header-hover)}
.lang-menu button.is-active{color:var(--header-accent)}
.lang-menu .flag{font-size:1.05rem}

.theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}

.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:999px;flex:none;
}
.menu-toggle span{width:19px;height:2px;background:var(--header-ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-toggle:hover{background:var(--header-hover)}

/* ==========================================================================
   Hero — abstract brand composition (no video/footage anywhere on the page)
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;min-height:100dvh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:#0A0910;
}
.hero-stage{position:absolute;inset:0;z-index:0}
.hero-fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 15% 0%,rgba(77,32,141,.55),transparent 55%),
    radial-gradient(100% 80% at 100% 100%,rgba(77,32,141,.35),transparent 60%),
    linear-gradient(160deg,#120E1C 0%,#0A0910 55%,#050408 100%);
}

.hero-static-bg{position:absolute;inset:0;overflow:hidden}
.static-glow{position:absolute;border-radius:50%;filter:blur(70px)}
.static-glow-a{
  width:56vw;height:56vw;max-width:800px;max-height:800px;top:-16%;right:-14%;
  background:radial-gradient(circle,rgba(122,79,192,.5),transparent 70%);
  animation:staticDriftA 28s ease-in-out infinite;
}
.static-glow-b{
  width:42vw;height:42vw;max-width:620px;max-height:620px;bottom:-18%;left:-12%;
  background:radial-gradient(circle,rgba(77,32,141,.46),transparent 70%);
  animation:staticDriftB 34s ease-in-out infinite;
}
@keyframes staticDriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(-3%,4%)}}
@keyframes staticDriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(4%,-3%)}}
.static-lines{position:absolute;inset:0;width:100%;height:100%}
.static-lines line{stroke:rgba(155,125,212,.3);stroke-width:1.5;animation:staticLinePulse 10s ease-in-out infinite}
.static-lines line:nth-child(2){animation-delay:-3.3s}
.static-lines line:nth-child(3){animation-delay:-6.6s}
@keyframes staticLinePulse{0%,100%{opacity:.4}50%{opacity:.85}}
.static-grain{
  position:absolute;inset:-10%;width:120%;height:120%;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  .static-glow,.static-lines line{animation:none}
}

/* hero background video — full-bleed, same footage in both themes. The overlay
   is a theme-colored scrim that fades in from the left (copy) and the top
   (transparent header), so header, copy and video read as one gradient.
   Poster shows until main.js attaches sources. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.hero-video-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,9,16,.7) 0%,rgba(10,9,16,.3) 11%,transparent 24%),
    linear-gradient(90deg,rgba(10,9,16,.9) 0%,rgba(10,9,16,.68) 34%,rgba(10,9,16,.2) 66%,rgba(10,9,16,.3) 100%),
    linear-gradient(0deg,rgba(10,9,16,.6) 0%,transparent 34%);
}
[data-theme="light"] .hero-video-overlay{
  background:
    linear-gradient(180deg,rgba(250,250,250,.88) 0%,rgba(250,250,250,.45) 11%,transparent 24%),
    linear-gradient(90deg,rgba(250,250,250,.95) 0%,rgba(250,250,250,.74) 34%,rgba(250,250,250,.16) 66%,rgba(250,250,250,.08) 100%),
    linear-gradient(0deg,rgba(250,250,250,.65) 0%,transparent 30%);
}

.hero-layout{
  position:relative;z-index:2;width:100%;
  max-width:min(640px,47vw);margin-left:clamp(24px,6vw,96px);
  padding:calc(var(--header-h-total) + 40px) 24px 120px;
}

.hero-content{opacity:1;transform:none}
.js-ready .hero-content{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft)}
.js-ready .hero-content.in{opacity:1;transform:translateY(0)}
.hero-logo{
  display:block;
  width:clamp(220px,18vw,280px);height:auto;
  margin-bottom:26px;
}
.hero-logo-light{display:none}
.hero-eyebrow{
  color:rgba(255,255,255,.72);font-size:.78rem;font-weight:700;
  letter-spacing:.22em;margin-bottom:18px;
}
.hero-display{
  font-weight:800;
  font-size:clamp(26px,2.9vw,44px);line-height:1.2;color:#fff;
  letter-spacing:-.02em;
}
.hero-display .line{display:block}
.hero-kr{
  margin-top:22px;font-size:clamp(1.02rem,1.8vw,1.3rem);
  color:rgba(255,255,255,.92);font-weight:600;
}
.hero-ccc{
  margin-top:16px;color:rgba(255,255,255,.62);
  font-size:.8rem;font-weight:700;letter-spacing:.2em;
}
.hero-ccc .dot{color:var(--brand-purple);padding:0 2px}
.hero-quote{
  margin-top:34px;color:rgba(255,255,255,.85);
  font-weight:600;font-size:1.05rem;
}
.hero-company{margin-top:10px;color:rgba(255,255,255,.5);font-size:.82rem;letter-spacing:.04em}

.scroll-cue{
  position:absolute;left:50%;bottom:calc(28px + var(--safe-b));z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.7);font-size:.72rem;letter-spacing:.14em;
}
.scroll-cue svg{width:16px;height:16px;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}

/* light theme: light canvas/scrim + dark copy; header stays transparent over it */
[data-theme="light"] .hero{background:var(--canvas)}
[data-theme="light"] .hero-fallback{
  background:
    radial-gradient(120% 90% at 15% 0%,rgba(77,32,141,.14),transparent 55%),
    radial-gradient(100% 80% at 100% 100%,rgba(77,32,141,.10),transparent 60%),
    linear-gradient(160deg,#FFFFFF 0%,#FAFAFA 55%,#F5F2FA 100%);
}
[data-theme="light"] .static-glow-a{background:radial-gradient(circle,rgba(122,79,192,.18),transparent 70%)}
[data-theme="light"] .static-glow-b{background:radial-gradient(circle,rgba(77,32,141,.16),transparent 70%)}
[data-theme="light"] .static-lines line{stroke:rgba(77,32,141,.18)}
[data-theme="light"] .static-grain{opacity:.035}
[data-theme="light"] .hero-logo-dark{display:none}
[data-theme="light"] .hero-logo-light{display:block}
[data-theme="light"] .hero-eyebrow{color:rgba(21,18,28,.6)}
[data-theme="light"] .hero-display{color:var(--text-primary)}
[data-theme="light"] .hero-kr{color:var(--text-primary)}
[data-theme="light"] .hero-ccc{color:var(--text-secondary)}
[data-theme="light"] .hero-quote{color:var(--text-primary)}
[data-theme="light"] .hero-company{color:var(--text-tertiary)}
[data-theme="light"] .scroll-cue{color:var(--text-secondary)}

@media (max-width:768px){
  .hero{align-items:flex-start}
  .hero-layout{
    max-width:100%;margin:0;text-align:left;
    padding:calc(var(--header-h-total) + 28px) 20px 0;
  }
  .hero-logo{width:clamp(165px,48vw,210px);margin-bottom:18px}
  /* mobile: copy sits on top, so the scrim runs top-down */
  .hero-video-overlay{background:linear-gradient(180deg,rgba(10,9,16,.9) 0%,rgba(10,9,16,.66) 45%,rgba(10,9,16,.28) 75%,rgba(10,9,16,.55) 100%)}
  [data-theme="light"] .hero-video-overlay{background:linear-gradient(180deg,rgba(250,250,250,.96) 0%,rgba(250,250,250,.88) 48%,rgba(250,250,250,.35) 64%,rgba(10,9,16,.12) 78%,rgba(10,9,16,.3) 100%)}
  .hero-display{font-size:clamp(21px,6vw,28px);line-height:1.24}
  .hero-eyebrow{margin-bottom:14px}
  .hero-kr{margin-top:18px}
  .hero-quote{margin-top:26px}
  .scroll-cue{display:none}
}

/* ==========================================================================
   Sections / About
   ========================================================================== */
/* anchor offset is applied exactly once, via scroll-padding-top on the
   scrolling element (html) — see Reset. #about/#contact carry no
   scroll-margin-top, and no JS re-applies the header height on scroll. */
.section{
  padding-top:12px;
  padding-bottom:100px;
  box-sizing:border-box;
  background:var(--about-section-bg);
  min-height:calc(100vh - var(--header-height));
  min-height:calc(100svh - var(--header-height));
}
.about-block{padding:64px 0;border-top:1px solid var(--surface-border)}
.about-block:first-child{border-top:0;padding-top:0}

.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1000px}
.vision-p{color:var(--text-secondary);font-size:clamp(1rem,0.95rem + 0.22vw,1.125rem);line-height:1.8}

.crew-strip{
  margin-top:48px;padding:36px;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--surface-border);
  display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
}
.crew-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.2em;color:var(--accent)}
.crew-name{font-size:clamp(1.2rem,1.08rem + 0.45vw,1.4rem);font-weight:800;margin-top:6px}
.crew-roles{margin-top:6px;color:var(--text-tertiary);font-size:.86rem}
.crew-quote{
  font-weight:600;font-size:clamp(1.05rem,0.98rem + 0.32vw,1.2rem);
  color:var(--text-primary);line-height:1.6;border-left:2px solid var(--brand-purple);padding-left:22px;
}
.crew-desc{color:var(--text-secondary);font-size:clamp(0.9rem,0.86rem + 0.18vw,1rem);line-height:1.7;max-width:220px}

/* ==========================================================================
   Footer / Contact
   ========================================================================== */
.site-footer{
  position:relative;padding-top:12px;padding-bottom:0;background:var(--contact-section-bg);
  box-sizing:border-box;
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--header-height));
  min-height:calc(100svh - var(--header-height));
}
/* CONTACT's kicker keeps its own section-head, but the title moves into
   .contact-left below so the map (the grid's other column) can stretch to
   match the title-to-map-buttons height exactly; margin-bottom replicates
   the 14px kicker->title gap the shared .section-head used to provide */
#contact .section-head{margin-bottom:14px}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:stretch}
.contact-left h2{
  max-width:760px;
  font-size:clamp(1.75rem,1.35rem + 1.8vw,3rem);
  font-weight:800;letter-spacing:-.01em;line-height:1.25;
  margin:0 0 44px;
}
.info-row{display:flex;gap:16px;margin-bottom:26px}
.info-icon{width:22px;height:22px;color:var(--accent);flex:none;margin-top:2px}
.info-label{font-size:.76rem;font-weight:700;letter-spacing:.1em;color:var(--text-tertiary)}
.info-value{margin-top:6px;font-size:clamp(1.05rem,0.98rem + 0.32vw,1.25rem);line-height:1.5;font-weight:700;display:inline-block;overflow-wrap:anywhere}
/* keeps "South Korea" (EN address) from splitting across lines: the space
   before it is still a normal, breakable wrap point, so the whole word pair
   just moves to the next line together when space is tight. Empty for
   ko/ja/zh, so it has no effect there. */
.contact-country{display:inline-block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
.info-tel{display:inline-flex;align-items:center;min-height:44px;transition:color .25s var(--ease)}
.info-tel:hover{color:var(--accent)}

.map-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.map-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;min-height:44px;border-radius:999px;
  background:var(--surface);border:1px solid var(--surface-border);
  font-size:.86rem;font-weight:700;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.map-btn svg{width:14px;height:14px;color:var(--text-tertiary)}
.map-btn svg.brand-icon{width:16px;height:16px;border-radius:4px;flex:none}
.map-btn:hover{border-color:var(--brand-purple);transform:translateY(-2px)}

.map-embed{
  /* no aspect-ratio here: at the 2-column breakpoint this grid item stretches
     to match .contact-left's height (title top to map-buttons bottom) via
     .contact-grid's align-items:stretch. The 1024px breakpoint below
     re-applies a fixed aspect-ratio once the columns stack. */
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--surface-border);
  background:var(--surface-2);
}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.02)}

/* full-bleed footer band: .footer-layer is a flex child of .site-footer with
   margin-top:auto, so it's always pushed flush to .site-footer's own bottom
   edge — on tall viewports that means it absorbs the leftover space instead
   of leaving canvas-colored empty space below it, with no ::before/negative-
   offset/fixed-height tricks that would misbehave at other viewport heights */
.footer-layer{
  width:100%;
  margin-top:auto;
  padding:28px 0 max(36px,env(safe-area-inset-bottom));
  background:linear-gradient(135deg,var(--footer-bg-start) 0%,var(--footer-bg-end) 100%);
  color:var(--footer-text);
}
.footer-bottom{
  margin-top:0;
  padding-top:28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-brand .brand-mark{height:16px;opacity:1;filter:none;mix-blend-mode:normal}

.footer-contact{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:8px;color:var(--footer-muted);opacity:1;font-size:clamp(0.8rem,0.76rem + 0.16vw,0.9rem);
}
.footer-contact-item{white-space:nowrap;transition:color .25s var(--ease)}
.footer-contact a{color:var(--footer-text);opacity:1}
a.footer-contact-item:hover{color:var(--accent)}
.footer-contact-sep{color:var(--footer-divider)}

.footer-copyright{color:var(--footer-muted);opacity:1;font-size:clamp(0.8rem,0.76rem + 0.16vw,0.9rem)}

/* business registration line, under the contact row (both pages) */
.footer-legal{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;
  margin-top:20px;
  color:var(--footer-muted);font-size:clamp(0.76rem,0.73rem + 0.12vw,0.84rem);
}
/* divider spans the text column only (not the container's side padding) */
.footer-legal::before{
  content:"";flex:none;width:100%;height:1px;margin-bottom:10px;
  background:var(--footer-divider);
}
.footer-legal-item{white-space:nowrap}

.to-top{
  position:absolute;right:24px;top:-26px;z-index:5;
  width:52px;height:52px;border-radius:50%;
  background:var(--brand-purple);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px rgba(77,32,141,.4);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.to-top svg{width:20px;height:20px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr}
  .map-embed{aspect-ratio:16/9}
}

@media (max-width:880px){
  .menu-toggle{display:flex}
  body.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .menu-toggle span:nth-child(2){opacity:0}
  body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Compact dropdown under the hamburger — same pattern as .lang-menu —
     rather than a full-screen scrolling drawer: both links show at once,
     side by side, no scrolling. */
  .main-nav{
    position:absolute;top:calc(100% + 10px);right:calc(16px + var(--safe-r));z-index:150;
    background:var(--header-surface);border:1px solid var(--header-surface-border);
    border-radius:var(--radius-md);
    padding:6px 18px;
    box-shadow:var(--header-shadow);
    opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease);
  }
  body.nav-open .main-nav{opacity:1;transform:translateY(0);pointer-events:auto}
  .main-nav ul{flex-direction:row;gap:22px}
  .main-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem}

  .vision-grid{grid-template-columns:1fr}
  .crew-strip{grid-template-columns:1fr;text-align:left}
  .crew-quote{border-left:none;border-top:2px solid var(--brand-purple);padding-left:0;padding-top:16px}
  .crew-desc{max-width:none}
}

@media (max-width:600px){
  .section{padding-top:10px;padding-bottom:72px}
  .site-footer{padding-top:10px}
  .about-block{padding:48px 0}
  .container{padding:0 20px}
  .header-inner{padding:0 16px}
  .lang-code{display:none}
  .to-top{right:16px;top:-24px;width:44px;height:44px}
  .to-top svg{width:17px;height:17px}

  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-contact{flex-direction:column;align-items:flex-start;gap:8px;width:100%}
  .footer-contact-item{white-space:normal}
  .footer-contact-sep{display:none}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:6px}
  .footer-legal-item{white-space:normal}
}

/* English footer, desktop only: "Business Inquiries" / "Phone" / the EN
   address and copyright line run noticeably longer than ko/ja/zh, which was
   pushing the copyright line onto its own row. html[lang="en"] is the same
   attribute i18n.js already sets on <html>; mobile/tablet (<=1024px) keep
   the stacked layout above untouched. */
@media (min-width:1025px){
  html[lang="en"] .footer-legal{max-width:1280px}
  html[lang="en"] .footer-bottom{
    max-width:1280px;
    flex-wrap:nowrap;
    gap:clamp(8px,calc(-21.64px + 2.892vw),20px);
  }
  html[lang="en"] .footer-brand{flex-shrink:0}
  html[lang="en"] .footer-contact{
    flex-wrap:nowrap;
    gap:clamp(4px,calc(-5.88px + 0.964vw),8px);
  }
  html[lang="en"] .footer-contact,
  html[lang="en"] .footer-copyright{
    font-size:clamp(.67rem,.61rem + 0.2vw,.9rem);
  }
}

/* ==========================================================================
   Large-screen scale-up (QHD / 4K / ultrawide)
   Appended only — nothing above this line is touched, and every rule below
   is scoped to (min-width:1600px) and (min-height:900px), so mobile,
   tablet, laptop and FHD keep exactly the CSS they already had. Sized off
   vmin (the viewport's shorter side) so a wide-but-short ultrawide window
   scales by its height, not its width — width alone can't inflate it. Each
   clamp's floor equals what the base clamp()/max-width already caps out at
   by 1600px width, so entry into this block is seamless; ceilings land at
   4K (3840x2160).
   ========================================================================== */
@media (min-width:1600px) and (min-height:900px){

  /* ---- Hero ---- */
  .hero-layout{max-width:clamp(640px,calc(192px + 41.48vmin),1088px)}
  .hero-logo{
    width:clamp(280px,25vmin,520px);
    margin-bottom:clamp(26px,calc(7.8px + 1.69vmin),44.2px);
  }
  .hero-eyebrow{
    font-size:clamp(.78rem,calc(3.744px + 0.8089vmin),1.326rem);
    margin-bottom:clamp(18px,calc(5.4px + 1.17vmin),30.6px);
  }
  .hero-display{font-size:clamp(44px,4vmin,76px)}
  .hero-kr{
    margin-top:clamp(22px,calc(6.6px + 1.43vmin),37.4px);
    font-size:clamp(1.3rem,calc(6.24px + 1.3481vmin),2.21rem);
  }
  .hero-ccc{
    margin-top:clamp(16px,calc(4.8px + 1.04vmin),27.2px);
    font-size:clamp(.8rem,calc(3.84px + 0.8296vmin),1.36rem);
  }
  .hero-quote{
    margin-top:clamp(34px,calc(10.2px + 2.2vmin),57.8px);
    font-size:clamp(1.05rem,calc(5.04px + 1.0889vmin),1.785rem);
  }
  .hero-company{
    margin-top:clamp(10px,calc(3px + 0.65vmin),17px);
    font-size:clamp(.82rem,calc(3.936px + 0.8504vmin),1.394rem);
  }

  /* ---- About ---- */
  #about > .container{max-width:clamp(1180px,calc(767px + 38.24vmin),1593px)}
  .section-head{
    max-width:clamp(760px,calc(228px + 49.26vmin),1292px);
    margin-bottom:clamp(44px,calc(13.2px + 2.85vmin),74.8px);
  }
  .section-head h2{font-size:clamp(3rem,calc(14.4px + 3.1111vmin),5.1rem)}
  .vision-grid{
    gap:clamp(32px,calc(9.6px + 2.07vmin),54.4px);
    max-width:clamp(1000px,calc(300px + 64.81vmin),1700px);
  }
  .vision-p{font-size:clamp(1.125rem,calc(5.4px + 1.1667vmin),1.9125rem)}
  .crew-strip{
    margin-top:clamp(48px,calc(14.4px + 3.11vmin),81.6px);
    padding:clamp(36px,calc(10.8px + 2.33vmin),61.2px);
    gap:clamp(32px,calc(9.6px + 2.07vmin),54.4px);
  }
  .crew-eyebrow{font-size:clamp(.72rem,calc(3.456px + 0.7467vmin),1.224rem)}
  .crew-name{font-size:clamp(1.4rem,calc(6.72px + 1.4519vmin),2.38rem)}
  .crew-roles{font-size:clamp(.86rem,calc(4.128px + 0.8919vmin),1.462rem)}
  .crew-quote{font-size:clamp(1.2rem,calc(5.76px + 1.2444vmin),2.04rem)}
  .crew-desc{
    font-size:clamp(1rem,calc(4.8px + 1.037vmin),1.7rem);
    max-width:clamp(220px,calc(66px + 14.26vmin),374px);
  }

  /* ---- Contact ---- */
  #contact > .container{max-width:clamp(1180px,calc(767px + 38.24vmin),1593px)}
  #contact .section-head{margin-bottom:clamp(14px,calc(4.2px + 0.91vmin),23.8px)}
  .contact-left h2{
    max-width:clamp(760px,calc(228px + 49.26vmin),1292px);
    font-size:clamp(3rem,calc(14.4px + 3.1111vmin),5.1rem);
    margin-bottom:clamp(44px,calc(13.2px + 2.85vmin),74.8px);
  }
  .contact-grid{gap:clamp(48px,calc(14.4px + 3.11vmin),81.6px)}
  .info-row{
    gap:clamp(16px,calc(4.8px + 1.04vmin),27.2px);
    margin-bottom:clamp(26px,calc(7.8px + 1.69vmin),44.2px);
  }
  .info-icon{
    width:clamp(22px,calc(6.6px + 1.43vmin),37.4px);
    height:clamp(22px,calc(6.6px + 1.43vmin),37.4px);
  }
  .info-label{font-size:clamp(.76rem,calc(3.648px + 0.7881vmin),1.292rem)}
  .info-value{font-size:clamp(1.25rem,calc(6px + 1.2963vmin),2.125rem)}
  .map-buttons{
    gap:clamp(10px,calc(3px + 0.65vmin),17px);
    margin-top:clamp(32px,calc(9.6px + 2.07vmin),54.4px);
  }
  .map-btn{
    padding:clamp(11px,calc(3.3px + 0.71vmin),18.7px) clamp(18px,calc(5.4px + 1.17vmin),30.6px);
    min-height:clamp(44px,calc(13.2px + 2.85vmin),74.8px);
    gap:clamp(8px,calc(2.4px + 0.52vmin),13.6px);
    font-size:clamp(.86rem,calc(4.128px + 0.8919vmin),1.462rem);
  }
  .map-btn svg{
    width:clamp(14px,calc(4.2px + 0.91vmin),23.8px);
    height:clamp(14px,calc(4.2px + 0.91vmin),23.8px);
  }
  .map-btn svg.brand-icon{
    width:clamp(16px,calc(4.8px + 1.04vmin),27.2px);
    height:clamp(16px,calc(4.8px + 1.04vmin),27.2px);
  }
  .kicker{
    font-size:clamp(.78rem,calc(3.744px + 0.8089vmin),1.326rem);
    margin-bottom:clamp(14px,calc(4.2px + 0.91vmin),23.8px);
  }
}