:root{
  --ink:#0b0c0a;
  --ink-soft:#151610;
  --paper:#f4f3ee;
  --paper-dim:#e8e6d9;
  --accent:#d7ff3d;
  --accent-deep:#7f9e17;
  --grey:#8c8a7f;
  --grey-on-dark:#94938a;
  --line-dark:rgba(244,243,238,.14);
  --line-light:rgba(11,12,10,.13);
  --max:1320px;
  --sans:'Pretendard Variable', Pretendard, 'Helvetica Neue', Helvetica, Arial, -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 48px;}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);}
.eyebrow.on-dark{color:var(--grey-on-dark);}
.eyebrow .dot{color:var(--accent-deep);}
.on-dark .eyebrow .dot{color:var(--accent);}

/* ============ header ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:28px 0;
  transition:padding .3s ease, background .3s ease, border-color .3s ease;
  color:var(--paper);
  border-bottom:1px solid transparent;
}
header.solid{background:rgba(11,12,10,.86);backdrop-filter:blur(10px);padding:16px 0;border-bottom:1px solid var(--line-dark);}
header.on-light{color:var(--ink);}
header.on-light.solid{background:rgba(244,243,238,.86);border-bottom:1px solid var(--line-light);}
header .wrap{display:flex;align-items:center;justify-content:space-between;}
.logo{font-weight:900;font-size:17px;letter-spacing:.01em;display:flex;align-items:center;}
.logo-img{height:15px;width:auto;display:block;}
@media (max-width:640px){.logo-img{height:12px;}}
nav.primary-nav{display:flex;gap:40px;align-items:center;}
nav.primary-nav a{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;position:relative;padding:4px 0;}
nav.primary-nav a.active{color:var(--accent);}
nav.primary-nav a::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;background:currentColor;transition:width .25s ease;}
nav.primary-nav a:hover::after{width:100%;}

.burger{display:none;background:none;border:0;width:30px;height:18px;position:relative;cursor:pointer;}
.burger span{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:.3s;}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:8px;}
.burger span:nth-child(3){top:16px;}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.mobile-nav{
  position:fixed;inset:0;background:var(--ink);z-index:99;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  padding:0 32px;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{font-size:40px;font-weight:900;color:var(--paper);text-transform:uppercase;letter-spacing:-.01em;padding:8px 0;}
.mobile-nav a.active{color:var(--accent);}

/* ============ chapter index rail ============ */
.rail{
  position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:22px;
  mix-blend-mode:difference;
}
.rail a{
  font-size:11px;font-weight:800;color:#fff;letter-spacing:.03em;
  display:flex;align-items:center;gap:10px;opacity:.55;transition:opacity .25s ease;
}
.rail a .bar{width:14px;height:1px;background:#fff;transition:width .25s ease;}
.rail a.active{opacity:1;}
.rail a.active .bar{width:30px;}
@media (max-width:980px){.rail{display:none;}}

/* ============ grain texture (hero) ============ */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ============ HOME hero ============ */
.home-hero{
  min-height:100svh;background:
    radial-gradient(120% 80% at 82% 0%, #1c1e15 0%, var(--ink) 55%), var(--ink);
  color:var(--paper);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:160px 0 0;
}
.hero-inner{position:relative;z-index:2;padding-bottom:60px;}
.hero-eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:36px;}
.hero-eyebrow-row .rule{width:44px;height:1px;background:var(--accent);}
h1.home-title{
  font-weight:900;font-size:clamp(46px,9.5vw,132px);line-height:1.02;letter-spacing:-.02em;
  max-width:15ch;text-transform:uppercase;
}
h1.home-title .accentword{color:var(--accent);}
.hero-lines span{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.hero-lines span em{
  display:block;font-style:normal;transform:translateY(110%);animation:riseUp .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-lines span:nth-child(1) em{animation-delay:.05s;}
.hero-lines span:nth-child(2) em{animation-delay:.16s;}
@keyframes riseUp{to{transform:translateY(0);}}

.home-sub{margin-top:34px;font-size:clamp(14.5px,1.6vw,17px);font-weight:500;color:#c7c5b7;max-width:480px;line-height:1.8;}

.marquee{
  margin-top:90px;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  overflow:hidden;white-space:nowrap;position:relative;z-index:2;
}
.marquee-track{display:inline-flex;flex-wrap:nowrap;align-items:center;animation:scroll-left 40s linear infinite;padding:20px 0;will-change:transform;}
.marquee-track span{
  font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--grey-on-dark);
  display:inline-block;white-space:nowrap;text-transform:uppercase;
}
.marquee-track span b{color:var(--paper);font-weight:800;}
.marquee-track .sep{display:inline-block;color:var(--accent-deep);margin:0 30px;font-weight:800;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============ home stats band ============ */
.stats-band{background:var(--paper);padding:90px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-light);border-left:1px solid var(--line-light);}
.stats-grid .cell{border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);padding:40px 34px;}
.stats-grid .cell .num{font-weight:900;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;}
.stats-grid .cell .num .u{color:var(--accent-deep);}
.stats-grid .cell .lbl{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--grey);letter-spacing:.03em;}
@media (max-width:1080px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr);}}

/* ============ chapter (generic section template) ============ */
.chapter{padding:150px 0;position:relative;}
.chapter.on-dark{background:var(--ink);color:var(--paper);}
.chapter.on-light{background:var(--paper);}
.chapter.tight{padding:110px 0;}
.chapter-head{max-width:820px;}
.chapter-head .eyebrow{margin-bottom:20px;}
.chapter-head h1, .chapter-head h2{
  font-weight:900;font-size:clamp(34px,5.4vw,68px);line-height:1.04;letter-spacing:-.02em;
}
.chapter-body{margin-top:56px;max-width:640px;}
.chapter-body p{font-size:15.5px;font-weight:500;color:var(--grey);line-height:2;margin-bottom:6px;}
.on-dark .chapter-body p{color:var(--grey-on-dark);}
.chapter-body p.lede{font-size:18px;font-weight:600;color:var(--ink);line-height:1.75;}
.on-dark .chapter-body p.lede{color:var(--paper);}

/* first page section sits below fixed header */
main > .chapter:first-of-type, main > section:first-of-type{padding-top:190px;}

/* reveal-on-scroll: visible by default so content NEVER depends on JS succeeding.
   JS adds .js-hide only once it has successfully set up the observer, then
   .in reveals it. If JS fails for any reason, content just stays visible. */
.reveal{opacity:1;transform:none;}
.reveal.js-hide{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.js-hide.in{opacity:1;transform:translateY(0);}

/* ---- triad feature grid (Principles / What We Do) ---- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);margin-top:70px;}
.on-dark .triad{background:var(--line-dark);border-color:var(--line-dark);}
.triad .card{background:var(--paper);padding:40px 32px;}
.on-dark .triad .card{background:var(--ink);}
.triad .card .idx{font-weight:900;font-size:13px;color:var(--accent-deep);margin-bottom:22px;}
.on-dark .triad .card .idx{color:var(--accent);}
.triad .card h4{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px;}
.triad .card p{font-size:14px;color:var(--grey);font-weight:500;line-height:1.8;}
.on-dark .triad .card p{color:var(--grey-on-dark);}
@media (max-width:820px){.triad{grid-template-columns:1fr;}}

/* ---- track record archive (CI-BI history) ---- */
.trackrecord-note{margin-top:70px;padding-top:44px;border-top:1px solid var(--line-light);}
.tr-category{margin-bottom:56px;}
.tr-category:last-child{margin-bottom:0;}
.tr-category .cat-label{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.tr-category .cat-label .bar{width:20px;height:1px;background:var(--accent-deep);}
.tr-category .cat-label span{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);}
.tr-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.tr-imgs img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#dedbcd;filter:grayscale(15%);transition:filter .3s ease;}
.tr-imgs img:hover{filter:grayscale(0%);}
@media (max-width:640px){.tr-imgs{grid-template-columns:1fr;}}

/* ---- manifesto / pull-quote break ---- */
.manifesto{background:var(--ink);color:var(--paper);padding:170px 0;text-align:center;position:relative;overflow:hidden;}
.manifesto .bignum{
  position:absolute;top:-6%;left:50%;transform:translateX(-50%);
  font-weight:900;font-size:min(46vw,560px);color:rgba(244,243,238,.035);letter-spacing:-.04em;line-height:1;
  pointer-events:none;user-select:none;
}
.manifesto p.tag{position:relative;z-index:2;}
.manifesto h3{
  position:relative;z-index:2;margin-top:26px;
  font-weight:900;font-size:clamp(30px,5.4vw,58px);line-height:1.15;letter-spacing:-.02em;
  max-width:16ch;margin-left:auto;margin-right:auto;
}
.manifesto h3 .accentword{color:var(--accent);}

/* ============ BRANDS page — full-bleed chapters ============ */
.brands-hero{padding:190px 0 120px;background:var(--paper);}
.brands-hero h1{font-weight:900;font-size:clamp(38px,6.6vw,84px);line-height:1;letter-spacing:-.02em;max-width:15ch;}
.brands-hero .chapter-body{margin-top:44px;}

.brand-chapter{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink);color:var(--paper);overflow:hidden;
  border-top:1px solid var(--line-dark);
}
.brand-bg{position:absolute;inset:0;z-index:0;}
.brand-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(85%) contrast(1.12) brightness(.62);}
.brand-bg .tint{position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,12,10,.35) 0%, rgba(11,12,10,.55) 55%, rgba(11,12,10,.94) 100%);}
.brand-bg.noimg{background:linear-gradient(160deg,#171812 0%, var(--ink) 60%);}

.brand-bignum{
  position:absolute;right:4%;top:6%;z-index:1;
  font-weight:900;font-size:min(30vw,340px);color:rgba(244,243,238,.05);letter-spacing:-.03em;line-height:1;
  pointer-events:none;
}
.brand-content{position:relative;z-index:2;padding:80px 0 88px;width:100%;}
.brand-meta{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.brand-meta .n{font-weight:900;font-size:13px;color:var(--accent);}
.brand-meta .cat{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-on-dark);}
.brand-wordmark{font-weight:900;font-size:clamp(38px,6vw,72px);letter-spacing:-.02em;line-height:1;}
.brand-wordmark sup{font-size:14px;}
.brand-wordmark small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--grey-on-dark);margin-top:10px;}
.brand-logo-svg{display:block;height:34px;width:auto;margin:0;}
.brand-logo-svg.zplate{height:26px;}
.brand-logo-svg.zisok{height:46px;}
.brand-logo-caption{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--grey-on-dark);margin-top:14px;}
.brand-tagline{margin-top:16px;font-weight:800;font-size:clamp(17px,2vw,21px);letter-spacing:-.01em;color:var(--accent);}
.brand-desc{margin-top:26px;font-size:14.5px;color:var(--grey-on-dark);font-weight:500;line-height:1.95;max-width:52ch;}
.brand-statement{margin-top:24px;font-weight:800;font-size:15.5px;color:var(--paper);}
.brand-visit{
  display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  border:1px solid var(--accent);color:var(--accent);
  padding:14px 28px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.brand-visit:hover{background:var(--accent);color:var(--ink);}

.brand-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:40px;max-width:640px;}
.brand-stats.five{grid-template-columns:repeat(5,1fr);max-width:760px;}
.brand-stats .stat{background:rgba(11,12,10,.4);padding:22px 16px;}
.brand-stats .stat .n{font-weight:900;font-size:clamp(15px,1.7vw,20px);color:var(--accent);letter-spacing:-.01em;}
.brand-stats .stat .l{margin-top:8px;font-size:10.5px;font-weight:700;color:var(--grey-on-dark);letter-spacing:.03em;line-height:1.5;}
.brand-stats-note{margin-top:14px;font-size:11px;color:var(--grey-on-dark);font-weight:600;}
@media (max-width:760px){.brand-stats{grid-template-columns:repeat(3,1fr);}.brand-stats.five{grid-template-columns:repeat(3,1fr);}}
@media (max-width:480px){.brand-stats{grid-template-columns:repeat(2,1fr);}.brand-stats.five{grid-template-columns:repeat(2,1fr);}}

.common-phil{background:var(--ink);color:var(--paper);padding:170px 0;}
.common-phil .chapter-head, .common-phil .chapter-body{max-width:none;}
.common-phil h2{max-width:18ch;}

/* ============ footer ============ */
footer{background:var(--ink);color:var(--grey-on-dark);padding:64px 0 40px;font-size:12px;border-top:1px solid var(--line-dark);}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start;}
footer .f-logo{display:block;}
.f-logo-img{height:13px;width:auto;display:block;}
footer .biz-info p{margin-bottom:6px;font-weight:500;line-height:1.8;}
footer .biz-info a{color:var(--paper);font-weight:700;}
.copyright{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:11px;color:#55544c;text-align:center;}

@media (max-width:760px){
  .wrap{padding:0 24px;}
  .chapter{padding:110px 0;}
  main > .chapter:first-of-type, main > section:first-of-type{padding-top:150px;}
  .manifesto,.common-phil{padding:120px 0;}
  .brand-content{padding:60px 0;}
}