/* ============================================================
   BK bio — homepage V3 (Bio-house base, productionized)
   Spectral display (self-hosted, normal + italic) · IBM Plex Sans/Mono
   Noto Serif KR + Pretendard (Korean) · deep<->light band rhythm
   Materiality: radial glow, film grain, gold hairlines, inset highlights
   Orange #CE4A18 fills only · #F07A38 orange text on dark (AA)
   Self-hosted fonts (no CDN) · focus-visible · structural dividers >=.7 gold
   ============================================================ */

/* ---------- SELF-HOSTED FONTS (woff2 in assets/fonts/) ---------- */
/* Spectral DISPLAY — normal + italic (italic added for accent words) */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/Spectral-normal-latin.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/Spectral-italic-latin.woff2') format('woff2');}

/* IBM Plex Sans BODY — 400/500/600 (latin + latin-ext) */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexSans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexSans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/IBMPlexSans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/IBMPlexSans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* IBM Plex Mono MONO/numerals — 400/500 */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Noto Serif KR DISPLAY (Korean) — 400/500/600 */
@font-face{font-family:'Noto Serif KR';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/NotoSerifKR-400-korean.woff2') format('woff2');}
@font-face{font-family:'Noto Serif KR';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/NotoSerifKR-500-korean.woff2') format('woff2');}
@font-face{font-family:'Noto Serif KR';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/NotoSerifKR-600-korean.woff2') format('woff2');}

/* Pretendard BODY (Korean) — variable */
@font-face{font-family:'Pretendard';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/PretendardVariable.woff2') format('woff2-variations');}

:root{
  --bg:#F4EFE4; --bg-2:#EBE3D3; --paper:#FFFFFF;
  --ink:#15140F; --ink-2:#3C382E; --ink-3:#6E6555; --ink-4:#9A917F;
  --pine:#163A2A; --pine-d:#0D261B; --pine-dd:#091A12; --green:#2C6A48; --green-l:#7CC79A;
  --basalt:#42595A;
  --gold:#C8A24E; --gold-d:#9C7E3B;
  --accent:#CE4A18; --accent-l:#F07A38;     /* lighter orange = text on dark */
  --em-orange:#9FD3B0;     /* highlight em on the orange CTA ground: premium light green, readable + on-brand (owner: not black, consistent site-wide) */
  --accent-d:#A8380F;                        /* darker orange = small text on LIGHT (AA >=4.5:1) */
  --rule:#DED4C2; --rule-2:#E5DBC9;
  --basalt-d:#324445; --basalt-dd:#26393A;     /* deeper basalt steps for full-bleed bands */
  --gold-soft:#E9D7A6;                          /* light gold tint = wash / hairline on light */
  --ff-d:'Spectral',Georgia,serif;
  --ff-b:'IBM Plex Sans',-apple-system,sans-serif;
  --ff-m:'IBM Plex Mono',monospace;
  --ff-kr-d:'Noto Serif KR',serif;
  --ff-kr-b:'Pretendard',sans-serif;
  /* type scale: bumped one notch up; ramp ratios kept coherent */
  --fs-base:17px;          /* body (was 16px) */
  --fs-sm:15px;          /* secondary / fine copy (was ~12.5-13.5) */
  --fs-xs:14px;            /* captions, in-card meta (was ~11-12.5) */
  --fs-label:13px;         /* mono micro-labels .ml (was 11) */
  --fs-tag:11.5px;         /* smallest tags / pills (was 9.5) */
  --lh-body:1.62;          /* generous body line-height */
  --lh-tight:1.5;          /* tighter blocks (cards, dense copy) */
}
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-b);font-size:var(--fs-base);line-height:var(--lh-body);overflow-x:hidden;}
a{color:inherit;text-decoration:none;}img{display:block;}
:lang(ko){font-family:var(--ff-kr-b);word-break:keep-all;line-break:strict;overflow-wrap:break-word;}
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{text-wrap:pretty;}
/* Korean display headings use the KR serif (Noto Serif KR). A highlighted word keeps
   the SAME font as its heading (font-family:inherit) and is emphasized with the same
   italic + colour as the EN side — so the slant reads as intentional emphasis, not a
   different typeface (the earlier bug was the highlight switching to the body sans). */
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,:lang(ko) h4{font-family:var(--ff-kr-d)!important;}
:lang(ko) em{font-family:inherit!important;}
.num,.v,.readout .v,.stat,.nn,.mn,.bn,.pg .pc .v{font-variant-numeric:tabular-nums lining-nums;}

/* skip link — keyboard users land on content fast */
.skip{position:absolute;left:12px;top:-48px;z-index:50;background:var(--pine-d);color:#fff;font-family:var(--ff-m);font-size:12px;letter-spacing:.04em;padding:10px 16px;transition:top .15s;}
.skip:focus{top:12px;}

/* keyboard focus — was entirely absent before */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;}
.spine :where(a,button):focus-visible,.proof :where(a,button):focus-visible,
.foot :where(a,button):focus-visible,.cta-final :where(a,button):focus-visible,
.util :where(a,button):focus-visible{outline-color:var(--gold);}

/* ---- shared atoms ---- */
/* brand wordmark in running text: "BK bio" with an italic bio (mirrors the logo) */
.bio{font-style:italic;}
.ml{font-family:var(--ff-m);font-size:var(--fs-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}
.ml .dot{display:inline-block;width:6px;height:6px;background:var(--accent);margin-right:9px;vertical-align:1px;border-radius:50%;}
.ml.on{color:rgba(239,234,222,.72);} .ml.on .dot{background:var(--accent-l);}
/* eyebrow kicker exception: the brand wordmark "bio" must stay lowercase + TRUE serif italic
   (Spectral has a real italic face). The base .ml uppercases to "BIO" and uses mono, which has
   no italic face — so it only faux-slanted. This restores the intended "BK bio" mark. */
.ml .bio{font-family:var(--ff-d);font-style:italic;text-transform:none;letter-spacing:.01em;font-size:1.14em;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .18s,color .18s,box-shadow .18s;}
.btn .arr{font-family:var(--ff-m);}
.btn-solid{background:var(--accent);color:#fff;box-shadow:0 14px 30px -14px rgba(206,74,24,.7);}
.btn-solid:hover{background:#b5430f;}
.btn-ghost{border-color:rgba(255,255,255,.42);color:#fff;}
.btn-ghost:hover{background:#fff;color:var(--pine-d);}
.btn-line{border-color:var(--ink);color:var(--ink);}
.btn-line:hover{background:var(--ink);color:#fff;}
.btn-w{background:#fff;color:var(--accent);}
.btn-w:hover{background:var(--pine-d);color:#fff;}
.btn{transition:background .18s,color .18s,box-shadow .18s,transform .12s cubic-bezier(.16,1,.3,1);}
.btn:active{transform:translateY(1px);}
/* Mobile: CTA pairs always stack full-width in BOTH languages, so button position
   never depends on label length (long EN labels wrapped while short KO ones did not) */
@media(max-width:600px){
  .cta-final .cta,.mast .cta,.pcta .cta,.pmast .cta{width:100%;}
  .cta-final .cta .btn,.mast .cta .btn,.pcta .cta .btn,.pmast .cta .btn{flex:1 1 100%;justify-content:center;}
}

/* film grain — reusable overlay on deep panels (lightened so glow reads through) */
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.34;mix-blend-mode:soft-light;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}

/* ---- utility strip ---- */
.util{display:flex;justify-content:space-between;align-items:center;padding:10px 30px;background:var(--basalt-dd);color:rgba(239,234,222,.84);font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.08em;}
.util b{color:var(--gold);font-weight:500;}
.util .r{display:flex;gap:18px;}
@media(max-width:680px){.util .r span:first-child{display:none;}}

/* ===================== TOP NAV (light) ===================== */
html{scroll-padding-top:84px;}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:26px 56px;border-bottom:1px solid var(--rule);background:var(--bg);position:sticky;top:0;z-index:100;}
@media(max-width:560px){html{scroll-padding-top:64px;}}
.topnav .logo{display:inline-flex;align-items:center;min-height:44px;}   /* AA tap target without growing header height */
.topnav .logo b{font-family:var(--ff-d);font-weight:600;font-size:25px;letter-spacing:-.02em;}
.topnav .logo span{font-family:var(--ff-d);font-size:25px;color:var(--green);}
.topnav .logo img{height:54px;width:auto;display:block;}
@media(max-width:560px){.topnav .logo img{height:42px;}}
.topnav .menu{display:flex;gap:34px;font-size:16.5px;font-weight:500;color:var(--ink-2);}
.topnav .menu a:hover{color:var(--green);}
.topnav .r{display:flex;gap:16px;align-items:center;}
.topnav .lang{font-family:var(--ff-m);font-size:14px;display:inline-flex;align-items:center;gap:7px;min-height:44px;}
.topnav .lang .cur{color:var(--ink);font-weight:600;}        /* current language = highlighted, not a link */
.topnav .lang .sep{color:var(--ink-4);}
.topnav .lang a{color:var(--ink-3);transition:color .15s;display:inline-flex;align-items:center;justify-content:center;align-self:stretch;min-width:44px;padding:0 11px;}   /* only the OTHER language is clickable; stretch to the 44px container + min-width for an AA tap target */
.topnav .lang a:hover{color:var(--accent);}
.topnav .pill{border:1px solid var(--ink);padding:0 17px;font-size:15.5px;font-weight:600;transition:background .18s,color .18s,transform .12s cubic-bezier(.16,1,.3,1);display:inline-flex;align-items:center;min-height:44px;}
.topnav .pill:hover{background:var(--ink);color:#fff;}
.topnav .pill:active{transform:translateY(1px);}
/* hamburger — was missing entirely; menu vanished with no replacement on mobile */
.navtoggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:1px solid var(--rule);cursor:pointer;padding:0;}
.navtoggle span{display:block;width:19px;height:1.5px;background:var(--ink);transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s;}
.topnav.open .navtoggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.topnav.open .navtoggle span:nth-child(2){opacity:0;}
.topnav.open .navtoggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media(max-width:1100px){
  .topnav{flex-wrap:wrap;}
  .navtoggle{display:flex;order:3;}
  .topnav .r{order:2;}
  .topnav .menu{order:4;flex-basis:100%;flex-direction:column;gap:0;max-height:0;overflow:hidden;
    transition:max-height .38s cubic-bezier(.16,1,.3,1);}
  .topnav.open .menu{max-height:360px;margin-top:10px;border-top:1px solid var(--rule);}
  .topnav .menu a{padding:15px 2px;border-bottom:1px solid var(--rule);font-size:16.5px;}
}
@media(max-width:560px){.topnav{padding:16px 22px;}.navtoggle{order:1;margin-left:auto;}.topnav .r{flex-basis:100%;justify-content:flex-end;margin-top:8px;}}

/* ===================== MASTHEAD (light, editorial, +1 depth atom) ===================== */
.mast{padding:clamp(58px,8vh,104px) 56px clamp(40px,5vh,60px);position:relative;overflow:hidden;}
/* mglow: full-bleed layer whose radial fades out well inside the bounds — the glow
   is owner-loved, but the old offset-box version showed hard rectangular edges */
.mast .mglow{position:absolute;inset:0;background:radial-gradient(circle at 10% 8%,rgba(44,106,72,.16),transparent 52%);pointer-events:none;z-index:0;}
.mast .mframe{position:absolute;inset:14px;border:1px solid rgba(200,162,78,.16);pointer-events:none;z-index:0;}
.mast>*{position:relative;z-index:1;}
.mast .eyebrow{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:16px;flex-wrap:wrap;gap:12px;}
.mast .eyebrow .est{font-family:var(--ff-m);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.mast .eyebrow .est b{color:var(--accent-d);font-weight:500;}
/* interior masthead h1: one step below the homepage hero (the only oversized statement).
   24ch box + explicit <br> in markup = editorial control over where lines break. */
.mast h1{font-family:var(--ff-d);font-weight:600;font-size:clamp(36px,3.6vw,52px);line-height:1.08;letter-spacing:-.024em;margin:30px 0 0;max-width:24ch;text-wrap:balance;}
.mast h1 em{font-style:italic;color:var(--green);font-weight:500;}
.mast .deck{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;margin-top:30px;align-items:end;}
.mast .deck p{font-size:clamp(16px,1.3vw,19px);line-height:var(--lh-body);color:var(--ink-2);max-width:52ch;}
.mast .deck p b{color:var(--ink);font-weight:600;}
.mast .deck .cta{display:flex;gap:12px;flex-wrap:wrap;justify-self:end;}
@media(max-width:680px){.mast .deck{grid-template-columns:1fr;gap:24px;}.mast .deck .cta{justify-self:start;}}

/* ===================== VALUE-CHAIN SPINE (deep) ===================== */
/* SPINE now rides on basalt (Jeju volcanic blue-grey) so the page is not all-green */
.spine{background:var(--basalt-d);color:#EFEADE;padding:clamp(54px,7vh,92px) 56px;position:relative;overflow:hidden;}
.spine .glow{position:absolute;left:40%;top:-40%;width:46%;height:120%;background:radial-gradient(circle,rgba(200,162,78,.22),transparent 70%);pointer-events:none;}
.spine>*{position:relative;z-index:2;}
.spine .sh{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:36px;}
.spine .sh h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(26px,3vw,42px);letter-spacing:-.02em;color:#fff;margin:0;}
.spine .sh h2 em{font-style:italic;color:var(--accent-l);font-weight:500;}
.spine .sh .ml{color:rgba(239,234,222,.62);}
.chainrow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.node{padding:0 22px;border-left:1px solid rgba(200,162,78,.7);position:relative;transition:background .2s;}
.node:first-child{border-left:none;padding-left:0;}
.node:hover{background:rgba(255,255,255,.035);}
.node .ar{position:absolute;left:-8px;top:34px;font-family:var(--ff-m);font-size:13px;color:var(--accent-l);background:var(--basalt-d);padding:2px 0;}
.node .nn{font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,234,222,.62);}
.node h3{font-family:var(--ff-d);font-weight:600;font-size:22px;color:#fff;margin:12px 0 4px;letter-spacing:-.01em;}
.node h3 .kr{font-family:var(--ff-kr-d);font-weight:500;font-size:13px;color:rgba(239,234,222,.66);display:block;margin-top:5px;}
.node p{font-size:var(--fs-sm);line-height:var(--lh-tight);color:rgba(239,234,222,.84);margin:10px 0 0;}
.node.edge{background:linear-gradient(180deg,rgba(200,162,78,.14),transparent);padding:14px 22px;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.node.edge .nn{color:var(--accent-l);}
.node.edge .tagline{display:inline-block;margin-top:10px;font-family:var(--ff-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);padding:5px 9px;}
.node .own{display:inline-block;margin-top:10px;font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);border:1px solid rgba(200,162,78,.55);padding:4px 8px;}
@media(max-width:900px){
  .chainrow{grid-template-columns:1fr 1fr;gap:26px 0;}
  .node{padding:0 16px;}
  .node:nth-child(odd){border-left:none;padding-left:0;}
  .node.edge{margin:0;}            /* don't let the edge node jump out of the grid */
  .node:last-child{grid-column:1/-1;}/* node 05 was orphaned alone in a row */
  .node .ar{display:none;}
}
@media(max-width:520px){.chainrow{grid-template-columns:1fr;}.node:nth-child(even){border-left:none;padding-left:0;}}

/* ===================== HOUSE BRANDS (light) ===================== */
.house{padding:clamp(64px,8vh,110px) 56px;}
.house-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:20px;}
.house-h h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(30px,3.4vw,50px);letter-spacing:-.022em;margin:14px 0 0;line-height:1.02;}
.house-h h2 em{font-style:italic;color:var(--green);font-weight:500;}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);margin-top:1px;border:1px solid var(--rule);}
.bcell{background:var(--paper);padding:22px 22px 24px;transition:transform .18s,box-shadow .18s,background .18s;position:relative;}
.bcell:hover{background:var(--paper);transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(22,20,18,.55);z-index:2;}
.bcell .bn{font-family:var(--ff-d);font-weight:600;font-size:23px;letter-spacing:-.012em;transition:color .18s;}
.bcell:hover .bn{color:var(--accent);}
.bcell .bn sup{font-size:.4em;vertical-align:super;color:var(--ink-3);}
.bcell .kr{font-family:var(--ff-kr-d);font-weight:500;font-size:13px;color:var(--ink-3);margin-top:4px;display:block;}
.bcell .eff{font-size:var(--fs-sm);color:var(--ink-2);margin-top:12px;border-top:1px solid var(--rule);padding-top:10px;}
.bcell .src{font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;}/* was ink-4 (failed AA) */
@media(max-width:900px){.bgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.bgrid{grid-template-columns:1fr;}}

/* Honestin — own consumer brand, set apart from the 8 B2B house brands */
.honestin{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--pine);color:#EFEADE;padding:20px 26px;position:relative;overflow:hidden;}
.honestin::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--gold),var(--gold-d));}
.honestin .hl{font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-l);}
.honestin h3{font-family:var(--ff-d);font-weight:600;font-size:23px;color:#fff;margin:6px 0 0;}
.honestin p{font-size:var(--fs-sm);color:rgba(239,234,222,.84);margin:4px 0 0;max-width:54ch;}
.honestin>div{flex:1 1 auto;min-width:220px;}
.honestin .hphotos{flex:none;display:flex;gap:10px;}
.honestin .hphoto{flex:none;line-height:0;}
.honestin .hphoto img{width:104px;height:104px;border-radius:14px;object-fit:cover;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);}
@media(max-width:560px){.honestin .hphoto img{width:84px;height:84px;}}

/* ===================== IMAGE BAND (deep) ===================== */
.band{position:relative;height:62vh;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;}
.band picture,.band img{position:absolute;inset:0;width:100%;height:100%;}
.band img{object-fit:cover;filter:saturate(1.04) contrast(1.04);}
/* scrim on ::before so it is NOT gutted by .grain::after's opacity:.34 + soft-light (same element uses .band.grain) */
.band::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(9,26,18,.92) 0%,rgba(9,26,18,.6) 44%,rgba(9,26,18,.24) 68%,transparent 90%),linear-gradient(110deg,rgba(13,38,27,.5),transparent 56%);}
.band .bc{position:relative;z-index:2;padding:0 56px 54px;color:#fff;max-width:1100px;text-shadow:0 1px 16px rgba(9,26,18,.6),0 1px 3px rgba(9,26,18,.55);}
.band .bc .ml{color:rgba(255,255,255,.8);} .band .bc .ml .dot{background:var(--accent-l);}
.band .bc h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(30px,3.8vw,58px);line-height:1.04;letter-spacing:-.022em;margin:14px 0 0;max-width:20ch;}
.band .bc h2 em{font-style:italic;color:var(--accent-l);font-weight:500;}
.band .bc p{font-size:16.5px;color:rgba(239,234,222,.88);max-width:52ch;margin:16px 0 0;}

/* ===================== CREDENTIALS — certs + 2025 approvals (tinted light) ===================== */
.creds{background:var(--bg-2);padding:clamp(60px,8vh,100px) 56px;}
.creds-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:18px;}
.creds-h h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(28px,3.2vw,46px);letter-spacing:-.022em;margin:12px 0 0;line-height:1.04;}
.creds-h h2 em{font-style:italic;color:var(--green);font-weight:500;}
.certrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px;}
.certcell{background:var(--paper);padding:22px 22px 24px;}
.certcell .ci{font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.certcell h3{font-family:var(--ff-d);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:10px 0 0;}
.certcell p{font-size:var(--fs-sm);line-height:var(--lh-tight);color:var(--ink-2);margin:8px 0 0;}
.miles-label{margin-top:36px;}
.miles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;}
.mile{position:relative;background:var(--paper);border:1px solid var(--rule-2);padding:22px 24px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 40px -32px rgba(22,20,18,.5);}
.mile .yr{display:inline-block;font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--accent);padding:5px 9px;}
.mile h3{font-family:var(--ff-d);font-weight:600;font-size:21px;letter-spacing:-.012em;margin:14px 0 0;}
.mile h3 .kr{font-family:var(--ff-kr-d);font-weight:500;font-size:13px;color:var(--ink-3);display:block;margin-top:5px;}
.mile p{font-size:var(--fs-sm);line-height:var(--lh-tight);color:var(--ink-2);margin:10px 0 0;max-width:48ch;}
@media(max-width:900px){.certrow{grid-template-columns:1fr 1fr;}.miles{grid-template-columns:1fr;}}
@media(max-width:520px){.certrow{grid-template-columns:1fr;}}

/* ===================== PROOF (deepest) ===================== */
.proof{position:relative;background:var(--pine-dd);color:#EFEADE;padding:clamp(60px,8vh,100px) 56px;overflow:hidden;}
/* full-bleed: the radial must die out before the layer's bounds or its box edge
   draws a visible horizontal line across the flat slab */
.proof .glow{position:absolute;inset:0;background:radial-gradient(circle at 48% -20%,rgba(66,89,90,.55),transparent 58%);pointer-events:none;}
.proof>*{position:relative;z-index:2;}
.proof .ml{color:rgba(239,234,222,.66);}
.pg{display:grid;grid-template-columns:repeat(6,1fr);margin-top:30px;}
.pg .pc{padding:4px 20px;border-left:1px solid rgba(200,162,78,.7);}
.pg .pc:first-child{border-left:none;padding-left:0;}
.pg .pc .v{font-family:var(--ff-d);font-weight:600;font-size:clamp(30px,3vw,48px);letter-spacing:-.022em;color:#fff;line-height:1;}
.pg .pc .v small{font-size:.4em;color:var(--accent-l);}
.pg .pc .k{font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.1em;text-transform:uppercase;color:rgba(239,234,222,.7);margin-top:12px;}
@media(max-width:900px){.pg{grid-template-columns:1fr 1fr 1fr;gap:26px;}.pg .pc{border-left:none;padding-left:0;}}
@media(max-width:520px){.pg{grid-template-columns:1fr 1fr;}}

/* ===================== CTA (orange fill) ===================== */
.cta-final{position:relative;background:var(--accent);color:#fff;padding:clamp(44px,6vh,72px) 56px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;overflow:hidden;}
.cta-final::before{content:'';position:absolute;left:-8%;top:-40%;width:40%;height:140%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);pointer-events:none;}
.cta-final>*{position:relative;z-index:2;}
.cta-final h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.022em;margin:0;max-width:30ch;line-height:1.12;}
.cta-final h2 em{font-style:italic;font-weight:600;color:var(--em-orange);}  /* light-green emphasis on the orange ground: premium, readable, distinct from white body (owner: not black) */
.cta-final .cta{display:flex;gap:12px;flex-wrap:wrap;}
.cta-final .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.62);}
.cta-final .btn-o:hover{background:#fff;color:var(--accent);}

/* ===================== FOOTER (deep) ===================== */
.foot{background:var(--pine-d);color:rgba(239,234,222,.8);padding:54px 56px 34px;}
.foot .ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(200,162,78,.7);}
.foot .fb b{font-family:var(--ff-d);font-weight:600;font-size:24px;color:#fff;}
.foot .fb b span{color:var(--gold);}
.foot .fb p{font-size:var(--fs-sm);color:rgba(239,234,222,.68);max-width:34ch;margin:12px 0 0;}
.foot .fb img{height:40px;width:auto;display:block;margin-bottom:4px;}
.foot h4{font-family:var(--ff-m);font-size:var(--fs-tag);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;}
.foot a{display:block;font-size:var(--fs-sm);color:rgba(239,234,222,.82);padding:5px 0;}
.foot a:hover{color:#fff;}
.foot .fbot{display:flex;justify-content:space-between;padding-top:22px;font-family:var(--ff-m);font-size:var(--fs-tag);letter-spacing:.06em;color:rgba(239,234,222,.6);flex-wrap:wrap;gap:10px;}
@media(max-width:900px){.foot .ft{grid-template-columns:1fr 1fr;}}

/* ===================== PULSE SEAM — signature device (now actually rendered) =====================
   "electricity, not heat" as a square-wave pulse train drawing itself across a dark/light seam. */
.seam{position:relative;height:34px;z-index:5;background:var(--pine-d);overflow:hidden;}
.seam svg{position:absolute;left:0;right:0;top:0;width:100%;height:34px;display:block;}
.seam .base{fill:none;stroke:var(--gold);stroke-width:1;opacity:.3;}
/* living signal: a glowing pulse blip runs along the square-wave wire, forever */
.seam .wave{fill:none;stroke:var(--accent-l);stroke-width:2.5;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(240,122,56,.75));
  stroke-dasharray:70 930;stroke-dashoffset:1000;
  animation:pulserun 2.6s linear infinite;}
@keyframes pulserun{from{stroke-dashoffset:1000;}to{stroke-dashoffset:0;}}
@media(prefers-reduced-motion:reduce){.seam .wave{animation:none;stroke-dasharray:none;stroke-dashoffset:0;}}

/* ===================== scroll reveal ===================== */
/* Reveal is progressive-enhancement: hidden state applies ONLY after reveal.js
   adds .js-reveal to <html>. No JS (or slow JS) => content is visible, never stuck. */
@media(prefers-reduced-motion:no-preference){
  .js-reveal .rv{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
  .js-reveal .rv.in{opacity:1;transform:none;}
  .rv-1{transition-delay:.04s;}.rv-2{transition-delay:.10s;}.rv-3{transition-delay:.16s;}
  .rv-4{transition-delay:.22s;}.rv-5{transition-delay:.28s;}.rv-6{transition-delay:.34s;}
  .rv-7{transition-delay:.40s;}.rv-8{transition-delay:.46s;}
  /* masthead content animates on load (never stuck hidden) */
  .js-reveal .mast .rv{animation:heroin .85s cubic-bezier(.16,1,.3,1) forwards;opacity:1;transform:none;}
  .mast .rv-1{animation-delay:.05s;}.mast .rv-2{animation-delay:.16s;}.mast .rv-3{animation-delay:.27s;}
  @keyframes heroin{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
}

/* ===================== PALETTE ALTERNATES (opt-in band tones) =====================
   Page agents add ONE of these classes to any existing dark/light section to break the
   all-green / all-beige monotony without changing component markup. Text stays AA.
   --tone-* lets nested accents (em, hairlines, .ml dots) pick up the band's accent. */
.tone-basalt{background:var(--basalt-d);color:#EFEADE;}      /* Jeju volcanic blue-grey: alt dark band */
.tone-basalt-d{background:var(--basalt-dd);color:#EFEADE;}   /* deeper basalt */
.tone-pine{background:var(--pine-d);color:#EFEADE;}          /* canonical deep pine */
.tone-pine-dd{background:var(--pine-dd);color:#EFEADE;}      /* deepest pine */
/* light alternates so consecutive light sections are not all the same beige */
.tone-paper{background:var(--paper);color:var(--ink);}
.tone-sand{background:var(--bg-2);color:var(--ink);}        /* warmer sand step */
.tone-gold-wash{background:linear-gradient(180deg,var(--gold-soft),var(--bg));color:var(--ink);} /* subtle gold-tinted light band */
/* gold-accented top hairline: a non-green way to mark a section start (no side-stripe) */
.rule-gold{border-top:1px solid rgba(200,162,78,.55);}
/* editorial line-control utilities: pair with an explicit <br> in the heading so the
   break lands on punctuation instead of wherever the ch-box runs out */
.h-wide{max-width:34ch!important;}
.h-free{max-width:none!important;}
/* keep a compound word (e.g. "bio-ingredient") from breaking at its hyphen */
.nw{white-space:nowrap;}
/* swap an em/accent inside a basalt band to gold instead of green */
.tone-basalt :where(h1,h2,h3) em,.tone-basalt-d :where(h1,h2,h3) em{color:var(--gold-soft);font-style:italic;font-weight:500;}

/* ===== WIDE SCREENS (>=1600px): modest scale-up. Headings stay at their default caps
   (large headings on a multi-line Korean headline looked oversized); we only nudge body
   readability + widen the content column. <=1440 unchanged. ===== */
@media(min-width:1600px){
  body{font-size:18px;}
  .band .bc{max-width:1320px;}
}
@media(min-width:2100px){ body{font-size:18.5px;} }

/* ============================================================
   KO DISPLAY CALIBRATION — Hangul (Noto Serif KR) sets wider and
   taller than the Latin Spectral, so the EN heading metrics read
   oversized and cramped in Korean. KO headings run one step smaller,
   with looser leading and gentler tracking; KO paragraphs get a touch
   more line-height. Latin pages are untouched.
   (!important mirrors the :lang(ko) font-family overrides above —
   page-scoped heading rules otherwise outrank this calibration.)
   ============================================================ */
:lang(ko) h1{line-height:1.18!important;letter-spacing:-.022em!important;}
:lang(ko) h2{line-height:1.26!important;letter-spacing:-.014em!important;}
:lang(ko) h3{letter-spacing:-.008em!important;}
:lang(ko) p{line-height:1.7!important;}
/* shared modules */
/* one interior-title size across ALL pages (EN 52px / KO 46px caps) so Company,
   Products, Research etc. read as the same family at the same volume */
:lang(ko) .mast h1{font-size:clamp(28px,3.2vw,46px)!important;}
:lang(ko) .mast .lede-l h1{font-size:clamp(28px,3.2vw,46px)!important;}
:lang(ko) .pmast h1{font-size:clamp(28px,3.2vw,46px)!important;}
:lang(ko) .spine .sh h2{font-size:clamp(22px,2.4vw,34px)!important;}
:lang(ko) .band .bc h2{font-size:clamp(25px,3vw,44px)!important;}
:lang(ko) .cta-final h2,:lang(ko) .pcta h2{font-size:clamp(21px,2vw,30px)!important;}
/* company dossier */
:lang(ko) .greeting h2{font-size:clamp(26px,3.2vw,46px)!important;}
:lang(ko) .record-h h2,:lang(ko) .philosophy-h h2,:lang(ko) .creds-h h2,:lang(ko) .house-h h2{font-size:clamp(25px,2.8vw,40px)!important;}
:lang(ko) .clients-h h2{font-size:clamp(21px,2.2vw,30px)!important;}
/* home brochure */
:lang(ko) .phero h1{font-size:clamp(30px,3.3vw,48px)!important;}
:lang(ko) .flow .fh h2{font-size:clamp(25px,2.8vw,38px)!important;}
:lang(ko) .mlist h2{font-size:clamp(24px,2.6vw,34px)!important;}
:lang(ko) .ledger-d .lh h2{font-size:clamp(25px,2.8vw,38px)!important;}
:lang(ko) .clients-d .chead h2{font-size:clamp(21px,2.2vw,30px)!important;}
:lang(ko) .close-in h2{font-size:clamp(25px,2.8vw,38px)!important;}

/* ============================================================
   SITE SEARCH — nav trigger + overlay (search.js / search-index.js)
   ============================================================ */
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;color:var(--ink-3);background:none;border:0;cursor:pointer;transition:color .15s;-webkit-tap-highlight-color:transparent;}
.nav-search:hover{color:var(--green);}
.nav-search svg{width:20px;height:20px;}
.topnav .r{gap:14px;}

.bks{position:fixed;inset:0;z-index:300;display:block;}
.bks[hidden]{display:none;}
.bks-backdrop{position:absolute;inset:0;background:rgba(28,26,20,.42);opacity:0;transition:opacity .28s cubic-bezier(.16,1,.3,1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.bks-panel{position:absolute;left:50%;top:0;transform:translate(-50%,-14px);width:min(760px,calc(100vw - 36px));max-height:min(82vh,720px);margin-top:clamp(14px,7vh,86px);display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--ink);border-radius:6px;box-shadow:0 30px 70px -28px rgba(28,26,20,.5),0 2px 0 rgba(28,26,20,.04);
  opacity:0;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);overflow:hidden;}
.bks.on .bks-backdrop{opacity:1;}
.bks.on .bks-panel{opacity:1;transform:translate(-50%,0);}
html.bks-open{overflow:hidden;}

.bks-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--rule);}
.bks-ic{width:22px;height:22px;color:var(--green);flex:none;}
.bks-input{flex:1;min-width:0;border:0;background:none;font-family:var(--ff-b);font-size:20px;color:var(--ink);padding:6px 0;}
.bks-input::placeholder{color:var(--ink-4);}
.bks-input:focus{outline:none;}
.bks-close{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.bks-close:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.bks-close svg{width:16px;height:16px;}

.bks-meta{padding:11px 20px 0;font-family:var(--ff-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);min-height:0;}
.bks-meta:empty{display:none;}
.bks-results{overflow-y:auto;padding:8px 12px 16px;overscroll-behavior:contain;}
.bks-hint,.bks-empty{padding:26px 8px 30px;font-family:var(--ff-b);font-size:15px;line-height:1.6;color:var(--ink-3);text-align:center;}
.bks-empty{color:var(--ink-2);}

.bks-group{padding:8px 0;}
.bks-glabel{display:flex;align-items:baseline;gap:8px;padding:10px 8px 6px;font-family:var(--ff-m);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);}
.bks-glabel span{color:var(--ink-4);font-weight:500;letter-spacing:.08em;}
.bks-item{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t c" "d c";gap:1px 14px;align-items:center;
  padding:11px 10px;border-radius:4px;text-decoration:none;transition:background .14s cubic-bezier(.16,1,.3,1);min-height:44px;}
.bks-item:hover,.bks-item:focus-visible{background:var(--bg-2);outline:none;}
.bks-it-t{grid-area:t;font-family:var(--ff-b);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;transition:color .14s;}
.bks-item:hover .bks-it-t,.bks-item:focus-visible .bks-it-t{color:var(--green);}
.bks-it-d{grid-area:d;font-family:var(--ff-m);font-size:12px;color:var(--ink-4);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch;}
.bks-it-c{grid-area:c;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);border-radius:999px;padding:3px 9px;white-space:nowrap;}
.bks-item:hover .bks-it-c,.bks-item:focus-visible .bks-it-c{border-color:var(--accent);color:var(--accent-d);}
.bks-more{padding:7px 10px 4px;font-family:var(--ff-m);font-size:11.5px;letter-spacing:.06em;color:var(--ink-4);}

@media(max-width:560px){
  .bks-panel{width:calc(100vw - 20px);margin-top:10px;max-height:88vh;}
  .bks-input{font-size:17px;}
  .bks-it-d{max-width:none;}
}
@media(prefers-reduced-motion:reduce){
  .bks-backdrop,.bks-panel,.bks-item,.bks-it-t{transition:none;}
  .bks .bks-panel{transform:translate(-50%,0);}
}