/* ============================================================
   EKK Partners — shared styles
   Minimalist / editorial (Hahn & Co inspired), EKK navy palette
   ============================================================ */
:root{
  --navy:#21409A;
  --navy-d:#16296B;
  --navy-x:#0E1C46;
  --gold:#c9a24b;
  --ink:#12131a;
  --muted:#6b7480;
  --line:#e4e7ee;
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter","Noto Sans KR",system-ui,sans-serif;
  color:var(--ink);line-height:1.7;background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
}
html[lang="ko"] body{font-family:"Noto Sans KR","Inter",sans-serif}
h1,h2,h3,h4{font-family:"Fraunces","Noto Serif KR",Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:-0.02em}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] h4{font-family:"Noto Serif KR",serif;letter-spacing:-0.03em;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:26px}
html[lang="ko"] .eyebrow{letter-spacing:.14em}

/* ---------- NAV ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,border-color .35s,box-shadow .35s;border-bottom:1px solid transparent}
nav{display:flex;align-items:center;justify-content:space-between;height:84px;max-width:var(--max);margin:0 auto;padding:0 40px}
.brand img{height:30px;width:auto;transition:filter .35s}
.navmid{display:flex;gap:44px;align-items:center}
.navmid a{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:opacity .2s;position:relative}
html[lang="ko"] .navmid a{letter-spacing:.06em}
.navmid a:hover{opacity:.6}
.navmid a.active:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor}
.navright{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:8px;font-size:.74rem;letter-spacing:.1em}
.lang button{background:none;border:0;cursor:pointer;font-family:inherit;font-weight:600;color:inherit;opacity:.45;transition:opacity .2s;padding:2px}
.lang button.active{opacity:1}
.lang .sep{opacity:.3}
.menu-btn{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:inherit}

/* transparent-over-hero (light text) vs scrolled (solid white, dark text) */
header.over{color:#fff}
header.over .brand img{filter:brightness(0) invert(1)}
header.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-color:var(--line);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.02)}
header.solid .brand img{filter:none}

/* ---------- FULL-BLEED HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero.short{min-height:74vh}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:kb 18s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}

/* crossfading slideshow hero (home) */
.hero-slideshow{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform;animation:heroFade 24s infinite}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:8s}
.hero-slide:nth-child(3){animation-delay:16s}
@keyframes heroFade{
  0%   {opacity:0;transform:scale(1.12)}
  4%   {opacity:1}
  29%  {opacity:1}
  36%  {opacity:0;transform:scale(1.0)}
  100% {opacity:0;transform:scale(1.0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{animation:none;opacity:0}
  .hero-slide:nth-child(1){opacity:1}
}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,28,70,.55) 0%,rgba(14,28,70,.25) 40%,rgba(14,28,70,.75) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:9vh;padding-top:120px;width:100%}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);font-weight:400;max-width:16ch}
.hero .lead{margin-top:30px;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:300;max-width:52ch;color:#e6ebf6;line-height:1.6}
.hero .lead b{font-weight:500;color:#fff}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* page header (interior pages, no full photo) */
.pagehead{padding:190px 0 70px;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(2.4rem,5vw,4.2rem);color:var(--navy-x)}
.pagehead p{margin-top:22px;max-width:60ch;color:var(--muted);font-size:1.08rem}

/* ---------- SECTIONS ---------- */
section{padding:120px 0}
.section-sm{padding:88px 0}
.lede{font-family:"Fraunces","Noto Serif KR",serif;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.32;letter-spacing:-0.02em;color:var(--navy-x);max-width:20ch}
html[lang="ko"] .lede{line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.two.wide-left{grid-template-columns:1.05fr .95fr}
.measure{max-width:44ch;color:var(--muted);font-size:1.05rem}
.measure p{margin-bottom:18px}
.soft{background:var(--bg-soft)}
.dark{background:var(--navy-x);color:#fff}
.dark h2,.dark .lede{color:#fff}
.dark .measure{color:#c2cbe0}

/* big statement block */
.statement{font-family:"Fraunces","Noto Serif KR",serif;font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.28;letter-spacing:-0.02em;max-width:24ch}
html[lang="ko"] .statement{line-height:1.45}

/* section label / numbered rows */
.rows{border-top:1px solid var(--line)}
.rows .r{display:grid;grid-template-columns:80px 1fr 2fr;gap:30px;padding:38px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rows .r .num{font-family:"Fraunces",serif;color:var(--gold);font-size:1.1rem}
.rows .r h3{font-size:1.5rem;color:var(--navy-x)}
.rows .r p{color:var(--muted);font-size:1rem}
.dark .rows{border-color:rgba(255,255,255,.16)}
.dark .rows .r{border-color:rgba(255,255,255,.16)}
.dark .rows .r h3{color:#fff}
.dark .rows .r p{color:#c2cbe0}

/* image band */
.band{height:62vh;min-height:420px;background-size:cover;background-position:center;position:relative}
.band .cap{position:absolute;left:40px;bottom:34px;color:#fff;font-family:"Fraunces","Noto Serif KR",serif;font-size:clamp(1.4rem,3vw,2.4rem);max-width:20ch;text-shadow:0 2px 30px rgba(0,0,0,.4)}

/* ---------- TEAM ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.person .ph{aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft);margin-bottom:22px;filter:grayscale(100%);transition:filter .5s}
.person:hover .ph{filter:grayscale(0%)}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.person h3{font-size:1.35rem;color:var(--navy-x)}
.person .role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:8px 0 14px}
html[lang="ko"] .person .role{letter-spacing:.08em}
.person p{font-size:.92rem;color:var(--muted);line-height:1.75}
.person .meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);line-height:1.9}
.person .meta a{color:var(--navy)}
.person .meta .lbl{display:inline-block;width:16px;color:var(--gold);font-weight:700}

/* ---------- PORTFOLIO ---------- */
.pf{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--line);border-top:2px solid var(--navy)}
.pf .l{display:flex;align-items:center;justify-content:center;padding:64px;background:var(--bg-soft);border-right:1px solid var(--line)}
.pf .l img{max-width:240px;width:100%}
.pf .b{padding:58px 60px}
.pf .b .tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:18px}
html[lang="ko"] .pf .b .tag{letter-spacing:.08em}
.pf .b h2{font-size:2rem;color:var(--navy-x);margin-bottom:16px}
.pf .b p{color:var(--muted);max-width:46ch;margin-bottom:22px}
.pf .b a.more{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-weight:600}

/* ---------- NEWS ---------- */
.news{border-top:1px solid var(--line)}
.news .item{display:grid;grid-template-columns:200px 1fr 40px;gap:40px;padding:44px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .3s}
.news .item:hover{padding-left:10px}
.news .item .date{font-size:.82rem;letter-spacing:.1em;color:var(--muted)}
.news .item h3{font-size:1.5rem;color:var(--navy-x);font-weight:400}
.news .item .src{font-size:.82rem;color:var(--muted);margin-top:8px}
.news .item .arw{font-size:1.3rem;color:var(--gold);justify-self:end}

/* ---------- CTA strip ---------- */
.cta{padding:130px 0;text-align:center}
.cta h2{font-size:clamp(1.9rem,4vw,3.2rem);color:#fff;margin-bottom:30px}
.cta a{display:inline-block;border:1px solid rgba(255,255,255,.5);color:#fff;padding:16px 40px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;transition:.25s}
html[lang="ko"] .cta a{letter-spacing:.08em}
.cta a:hover{background:#fff;color:var(--navy-x)}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-x);color:#9fabc9;padding:80px 0 34px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.14)}
footer .flogo img{height:34px;margin-bottom:20px}
footer address{font-style:normal;font-size:.9rem;line-height:1.9}
footer .fcol h4{font-family:"Inter",sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:16px}
footer .fcol a{display:block;font-size:.9rem;margin-bottom:10px;color:#c2cbe0}
footer .fcol a:hover{color:#fff}
.fbot{padding-top:24px;font-size:.78rem;color:#6f7ea0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;letter-spacing:.04em}

/* ---------- reveal on scroll ---------- */
.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}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .wrap,nav{padding-left:22px;padding-right:22px}
  .navmid{display:none}
  .menu-btn{display:block}
  .navmid.open{display:flex;flex-direction:column;align-items:flex-start;gap:22px;position:fixed;top:84px;left:0;right:0;background:#fff;color:var(--ink);padding:28px 22px;border-bottom:1px solid var(--line)}
  .navmid.open a{color:var(--ink)}
  .two,.pf{grid-template-columns:1fr;gap:40px}
  .pf .l{border-right:0;border-bottom:1px solid var(--line)}
  .team{grid-template-columns:1fr;max-width:380px;margin:0 auto;gap:56px}
  .rows .r{grid-template-columns:40px 1fr;gap:14px}
  .rows .r p{grid-column:1/-1}
  .news .item{grid-template-columns:1fr;gap:6px}
  .news .item .arw{display:none}
  .fgrid{grid-template-columns:1fr;gap:32px}
  section{padding:84px 0}
}