/* ============================================================
   HANMAEK GROUP — design system
   Clean · editorial · environmental · warm-paper + orange
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Noto+Serif+KR:wght@400;500;600&display=swap');

:root{
  /* palette */
  --paper:      #f6f4ef;
  --paper-2:    #efece5;
  --paper-3:    #e7e3da;
  --ink:        #1a1916;
  --ink-2:      rgba(26,25,22,.60);
  --ink-3:      rgba(26,25,22,.38);
  --line:       rgba(26,25,22,.13);
  --line-2:     rgba(26,25,22,.07);

  --orange:     #ff7a00;
  --orange-ink: #d95e00;            /* legible-on-paper orange */
  --forest:     #14271d;            /* deep environmental dark */
  --forest-2:   #1c3528;
  --forest-3:   #2b4636;

  /* type */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* display serif — Latin (Newsreader) + Korean (Noto Serif KR) per-glyph fallback */
  --serif: "Newsreader", "Noto Serif KR", Georgia, serif;

  /* rhythm */
  --gut: clamp(20px, 5vw, 96px);     /* page side gutter */
  --maxw: 1380px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  letter-spacing:-0.01em;
  font-feature-settings:"ss01","cv01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }

/* lang visibility — body[data-lang] drives which strings show */
[data-i18n]{ }

/* ---------- shared layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(80px,11vw,180px); }
.eyebrow{
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--orange);
  display:inline-block;
}
.eyebrow .num{ color:var(--orange-ink); }

/* display type — editorial serif (Newsreader + Noto Serif KR) */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.015em;
  font-size:clamp(34px,6.2vw,86px);
  text-wrap:balance;
}
.h2{
  font-family:var(--serif);
  font-weight:500; line-height:1.1; letter-spacing:-0.012em;
  font-size:clamp(28px,4.4vw,58px);
  text-wrap:balance;
}
/* italic accent only renders for English (Korean has no true italic serif) */
em.acc, .ko-em{ font-style:normal; }
body[data-lang="en"] em{ font-style:italic; }
body[data-lang="ko"] em{ font-style:normal; }
/* Korean breaks at any char by default — force word-boundary breaks on headlines */
body[data-lang="ko"] .display,
body[data-lang="ko"] .h2,
body[data-lang="ko"] .big,
body[data-lang="ko"] .hero-poem{ word-break:keep-all; }
body[data-lang="ko"] .hero-poem{ max-width:min(900px, 94vw); font-size:clamp(26px,4vw,50px); text-wrap:normal; line-height:1.32; }
.lead{
  font-size:clamp(18px,1.7vw,23px);
  line-height:1.6; color:var(--ink-2); font-weight:400;
  max-width:62ch; text-wrap:pretty;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  transition:background .4s ease, padding .4s ease, border-color .4s ease, color .4s ease;
  border-bottom:1px solid transparent;
  color:var(--paper);
}
.site-header.solid{
  background:rgba(246,244,239,.86);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line);
  color:var(--ink);
  padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:.5em; font-weight:700; letter-spacing:-0.03em; }
.brand .logo{ height:30px; width:auto; flex:none; }
.brand .mark{ font-size:22px; }
.brand .ko{ font-size:15px; font-weight:500; opacity:.62; letter-spacing:0; white-space:nowrap; }

.nav{ display:contents; }
.nav-links{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:clamp(16px,2vw,38px); list-style:none;
}
.nav-links > li{ display:flex; align-items:center; }
.nav-links a{
  display:inline-flex; align-items:center; line-height:1;
  font-size:15px; font-weight:500; letter-spacing:-0.01em;
  position:relative; padding:6px 0; opacity:.9; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--orange); transition:width .3s ease;
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }

/* dropdown submenus */
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a{ display:inline-flex; align-items:center; gap:.34em; }
.nav-links .has-sub > a::before{
  content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px); opacity:.6; order:2; transition:transform .25s;
}
.nav-links .has-sub:hover > a::before{ transform:rotate(225deg) translateY(2px); }
.nav-links .has-sub::after{ content:""; position:absolute; left:-10px; right:-10px; top:100%; height:16px; }
.submenu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:190px; background:var(--paper); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 26px 54px -26px rgba(26,25,22,.45); padding:9px;
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, transform .22s ease; z-index:130;
}
.nav-links .has-sub:hover .submenu,
.nav-links .has-sub:focus-within .submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.submenu a{
  font-size:14.5px; font-weight:500; color:var(--ink); opacity:1;
  padding:10px 14px; border-radius:6px; white-space:nowrap; transition:background .2s, color .2s;
}
.submenu a::after{ display:none; }
.submenu a:hover{ background:var(--paper-2); color:var(--orange-ink); }

.header-tools{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:12px; font-weight:500;
  border:1px solid currentColor; border-radius:999px; overflow:hidden;
  opacity:.85;
}
.lang-toggle button{
  padding:6px 11px; letter-spacing:.04em; color:inherit;
  transition:background .25s, color .25s;
}
.lang-toggle button[aria-pressed="true"]{ background:var(--orange); color:#fff; }
.site-header.solid .lang-toggle button[aria-pressed="true"]{ background:var(--orange); color:#fff; }

.menu-btn{ display:none; }

/* ============================================================
   HERO — immersive, centered, serif
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  text-align:center;
  color:var(--paper);
  background:var(--forest);
  overflow:hidden;
  padding:clamp(96px,14vh,150px) 0 clamp(76px,10vh,96px);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media .hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.8s ease-in-out;
  transform:scale(1.04); animation:heroDrift 24s ease-in-out infinite alternate;
}
.hero-media .hero-img.active{ opacity:1; }
@keyframes heroDrift{ from{ transform:scale(1.04); } to{ transform:scale(1.12); } }
.hero-media::after{
  /* cinematic vignette wash */
  content:""; position:absolute; inset:0;
  background:radial-gradient(125% 90% at 50% 36%, rgba(10,18,13,.18) 0%, rgba(10,18,13,.5) 58%, rgba(10,18,13,.82) 100%);
}
.hero-inner{
  position:relative; z-index:1; width:100%;
  max-width:1080px; padding-inline:var(--gut);
  display:flex; flex-direction:column; align-items:center;
}
.hero .eyebrow{ color:rgba(246,244,239,.66); }
.hero .eyebrow::before{ display:none; }
.hero-poem{
  font-family:var(--serif);
  font-weight:400; letter-spacing:-0.008em;
  font-size:clamp(30px,4.7vw,62px);
  line-height:1.18; text-wrap:balance; word-break:keep-all;
  margin-top:22px;
  max-width:22ch;
}
.hero-poem em{ color:var(--orange); font-weight:400; }
.hero-sub{
  color:rgba(246,244,239,.74);
  font-size:clamp(15px,1.5vw,18px); line-height:1.6;
  max-width:54ch; margin-top:clamp(22px,3vh,30px);
  text-wrap:pretty;
}
.hero-divider{ width:1px; height:clamp(38px,7vh,62px); background:rgba(246,244,239,.34); margin-top:clamp(30px,5vh,50px); }
.hero-links{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(246,244,239,.18);
}
.hero-links a{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  text-align:center; padding:19px 12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(246,244,239,.8);
  border-left:1px solid rgba(246,244,239,.18);
  transition:background .3s, color .3s;
}
.hero-links a:first-child{ border-left:0; }
.hero-links a:hover{ background:rgba(246,244,239,.07); color:#fff; }
.hero-links a .ko{ font-family:var(--sans); letter-spacing:-0.01em; text-transform:none; font-size:13px; }
.hero-links a .sep{ color:var(--orange); }

/* ============================================================
   MISSION / STATEMENT
   ============================================================ */
.statement{ background:var(--paper); }
.statement .grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,7vw,120px); align-items:start;
}
.statement .big{
  font-family:var(--serif);
  font-weight:500; letter-spacing:-0.012em; line-height:1.14;
  font-size:clamp(30px,4.4vw,58px); text-wrap:balance;
}
.statement .big .accent{ color:var(--orange-ink); }
.statement .body p{ color:var(--ink-2); font-size:clamp(17px,1.5vw,20px); line-height:1.7; text-wrap:pretty; }
.statement .body p + p{ margin-top:1.2em; }

/* ============================================================
   BUSINESS / SUBSIDIARIES
   ============================================================ */
.biz{ background:var(--paper-2); border-block:1px solid var(--line); }
.biz-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(40px,6vw,72px); }
.biz-list{ display:flex; flex-direction:column; }
.biz-row{
  display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) auto;
  gap:clamp(20px,4vw,64px); align-items:center;
  padding-block:clamp(28px,3.4vw,46px);
  border-top:1px solid var(--line);
  position:relative;
  transition:padding-left .4s cubic-bezier(.2,.7,.2,1);
}
.biz-row:last-child{ border-bottom:1px solid var(--line); }
.biz-row .rownum{ font-family:var(--mono); font-size:13px; color:var(--ink-3); }
.biz-row .names .ko{ font-size:clamp(24px,2.8vw,38px); font-weight:600; letter-spacing:-0.02em; }
.biz-row .names .en{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.biz-row .fn{ color:var(--ink-2); font-size:clamp(15px,1.4vw,18px); line-height:1.55; text-wrap:pretty; }
.biz-row .go{
  width:54px; height:54px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; flex:none; justify-self:end;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.biz-row .go svg{ width:20px; height:20px; }
.biz-row:hover{ padding-left:18px; }
.biz-row:hover .go{ background:var(--orange); border-color:var(--orange); color:#fff; transform:rotate(0deg) translateX(2px); }
.biz-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--orange);
  transform:scaleY(0); transform-origin:top; transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.biz-row:hover::before{ transform:scaleY(1); }

/* ============================================================
   VISION (dark)
   ============================================================ */
.vision{ background:var(--forest); color:var(--paper); position:relative; overflow:hidden; }
.vision .eyebrow{ color:rgba(246,244,239,.6); }
.vision .grid{ display:grid; grid-template-columns:1fr; gap:clamp(40px,6vw,72px); }
.vintro{ text-align:center; max-width:800px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.vision .big{ font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; line-height:1.16; font-size:clamp(28px,4vw,56px); max-width:20ch; text-wrap:balance; }
.vision .big em{ color:var(--orange); }
.vpillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(246,244,239,.14); border:1px solid rgba(246,244,239,.14); }
.vpillar{ background:var(--forest); padding:clamp(26px,3vw,40px); }
.vpillar .k{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }
.vpillar .t{ font-size:clamp(18px,1.8vw,23px); font-weight:600; margin-top:14px; letter-spacing:-0.02em; }
.vpillar .d{ color:rgba(246,244,239,.62); font-size:15px; line-height:1.6; margin-top:10px; text-wrap:pretty; }

/* stats band */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(50px,7vw,84px); border-top:1px solid rgba(246,244,239,.16); padding-top:clamp(34px,4vw,52px); }
.stat .n{ font-size:clamp(34px,4.6vw,62px); font-weight:600; letter-spacing:-0.03em; line-height:1; }
.stat .n .u{ font-size:.42em; color:var(--orange); font-weight:500; margin-left:.15em; letter-spacing:0; }
.stat .l{ color:rgba(246,244,239,.6); font-size:14px; margin-top:12px; line-height:1.45; }

/* ============================================================
   MEDIA / NEWS
   ============================================================ */
.media .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,32px); }
.news-card{ background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .35s, box-shadow .35s; }
.news-card:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -28px rgba(26,25,22,.4); }
.news-thumb{ aspect-ratio:16/10; overflow:hidden; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; }
.news-thumb.noimg{
  background:
    repeating-linear-gradient(135deg, rgba(255,122,0,.08) 0 2px, transparent 2px 11px),
    var(--paper-3);
  position:relative;
}
.news-thumb.noimg::after{
  content:"HANMAEK"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:var(--ink-3);
}
.news-empty{ grid-column:1/-1; color:var(--ink-3); font-family:var(--mono); font-size:14px; padding:40px 0; }
.news-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.news-body .meta{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase; }
.news-body .t{ font-size:19px; font-weight:600; letter-spacing:-0.02em; line-height:1.32; text-wrap:pretty; }
.news-body .more{ margin-top:auto; font-size:14px; color:var(--orange-ink); font-weight:500; display:inline-flex; align-items:center; gap:.4em; }

/* ============================================================
   CONTACT CTA + FOOTER
   ============================================================ */
.cta{ background:var(--orange); color:#fff; }
.cta .grid{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px; }
.cta .big{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.6vw,60px); letter-spacing:-0.012em; line-height:1.1; max-width:18ch; text-wrap:balance; }
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--ink); color:var(--paper); padding:16px 26px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-0.01em;
  transition:transform .3s, background .3s;
}
.btn:hover{ transform:translateY(-3px); }
.btn svg{ width:18px; height:18px; }
.btn.ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }
/* <button> reset so .btn works as a real button */
button.btn{ font-family:inherit; cursor:pointer; border:none; }
button.btn.ghost{ border:1.5px solid rgba(255,255,255,.5); }
.btn.ghost.is-open{ background:rgba(255,255,255,.16); }

/* address reveal under the CTA buttons */
.addr-reveal{ margin-top:22px; max-width:46ch; animation:addrIn .3s ease both; }
.addr-reveal[hidden]{ display:none; }
.addr-line{ display:flex; gap:12px; align-items:baseline; color:#fff; font-size:clamp(15px,1.5vw,18px); line-height:1.6; text-wrap:pretty; }
.addr-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); flex:none; padding-top:.2em; }
@keyframes addrIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes cmodalIn{ from{ transform:translateY(12px); } to{ transform:none; } }

/* ============================================================
   CONTACT DIALOG
   ============================================================ */
.cmodal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(20,39,29,.5); backdrop-filter:blur(3px); }
.cmodal[hidden]{ display:none; }
.cmodal-card{ position:relative; width:min(540px,100%); max-height:90vh; overflow:auto;
  background:var(--paper); border-radius:14px; padding:clamp(28px,4vw,40px);
  box-shadow:0 40px 90px -36px rgba(26,25,22,.6); }
.cmodal:not([hidden]) .cmodal-card{ animation:cmodalIn .3s ease; }
.cmodal-card h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,3vw,32px); letter-spacing:-0.015em; color:var(--ink); }
.cmodal-sub{ margin-top:10px; margin-bottom:26px; color:var(--ink-2); font-size:15px; line-height:1.6; text-wrap:pretty; }
.cmodal-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font-size:14px; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--line); transition:background .2s, color .2s; }
.cmodal-close:hover{ background:var(--ink); color:var(--paper); }
.cf{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .cf-row{ grid-template-columns:1fr; } }
.cf input, .cf textarea{
  font-family:var(--sans); font-size:15px; font-weight:400; letter-spacing:normal; text-transform:none;
  color:var(--ink); padding:12px 14px; border:1px solid var(--line); border-radius:9px;
  background:#fff; width:100%; transition:border-color .2s, box-shadow .2s; }
.cf textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.cf input:focus, .cf textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,122,0,.16); }
.cf-actions{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.cf-status{ font-size:13.5px; line-height:1.45; color:var(--ink-2); min-height:1.2em; text-wrap:pretty; }
.cf-status.ok{ color:#1f7a44; font-weight:500; }
.cf-status.err{ color:#c43b2e; font-weight:500; }
.cf-btn{ font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-0.01em; padding:14px 32px;
  border-radius:999px; cursor:pointer; border:none; white-space:nowrap; flex:none;
  background:var(--ink); color:var(--paper); transition:background .25s, transform .2s; }
.cf-btn:hover{ background:var(--orange-ink); transform:translateY(-2px); }
.cf-btn:disabled{ opacity:.55; cursor:default; transform:none; }

.site-footer{ background:var(--forest); color:rgba(246,244,239,.72); padding-block:clamp(56px,7vw,90px) 36px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:48px; border-bottom:1px solid rgba(246,244,239,.14); }
.foot-brand .mark{ font-size:26px; font-weight:700; color:var(--paper); letter-spacing:-0.03em; display:flex; align-items:center; gap:.45em; }
.foot-brand .logo{ height:32px; width:auto; }
.foot-brand p{ margin-top:16px; font-size:14px; line-height:1.6; max-width:32ch; }
.foot-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:18px; font-weight:500; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.foot-col a{ font-size:14.5px; transition:color .25s; }
.foot-col a:hover{ color:var(--paper); }
.foot-bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-top:28px; font-size:13px; color:rgba(246,244,239,.5); }

/* ============================================================
   IMAGE PLACEHOLDER
   ============================================================ */
.ph{
  position:relative; width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,122,0,.07) 0 2px, transparent 2px 11px),
    var(--paper-3);
  display:grid; place-items:center; overflow:hidden;
}
.hero .ph, .vision .ph{
  background:
    repeating-linear-gradient(135deg, rgba(255,122,0,.16) 0 2px, transparent 2px 11px),
    var(--forest-2);
}
.ph .label{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); text-align:center; padding:10px 14px; max-width:80%;
  border:1px dashed var(--line); background:rgba(246,244,239,.5); border-radius:4px;
}
/* hero/vision: pin the placeholder label to a corner so it never collides with copy */
.hero .ph{ place-items:end start; }
.vision .ph{ place-items:end start; }
.hero .ph .label{ margin:0 0 92px 24px; max-width:min(44%, 320px); text-align:left; }
.vision .ph .label{ margin:24px; max-width:min(60%, 360px); text-align:left; }
.hero .ph .label, .vision .ph .label{ color:rgba(246,244,239,.66); border-color:rgba(246,244,239,.22); background:rgba(20,39,29,.4); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; }
  .menu-btn svg{ width:24px; height:24px; }
  .statement .grid{ grid-template-columns:1fr; gap:32px; }
  .biz-row{ grid-template-columns:40px 1fr auto; row-gap:14px; }
  .biz-row .fn{ grid-column:2 / 4; }
  .vpillars{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .media .news-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media (max-width:540px){
  .stats{ grid-template-columns:1fr 1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .brand .ko{ display:none; }
}

/* ---------- mobile drawer ---------- */
.drawer{ position:fixed; inset:0; z-index:200; background:var(--forest); color:var(--paper); transform:translateY(-100%); visibility:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; transition:transform .5s cubic-bezier(.7,0,.2,1), visibility 0s linear .5s; display:flex; flex-direction:column; padding:24px var(--gut); }
.drawer.open{ transform:none; visibility:visible; transition:transform .5s cubic-bezier(.7,0,.2,1); }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; }
.drawer-top .close{ font-size:26px; }
.drawer nav{ margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; gap:18px; }
.drawer nav a{ font-size:32px; font-weight:600; letter-spacing:-0.02em; }
.drawer nav a .en{ font-family:var(--mono); font-size:12px; color:rgba(246,244,239,.5); letter-spacing:.08em; display:block; text-transform:uppercase; margin-top:2px; }