/* =========================================================
   FIVE NATURES — Portfolio 2026
   Editorial system: warm neutrals, thin rules, one accent.
   Bands alternate beige (light) / plum-black (dark).
   ========================================================= */
:root{
  --bg:#F5F2ED;
  --tint:#ECE7DF;
  --paper:#FBFAF7;
  --ink:#1A1817;
  --ink-2:#3B3733;
  --muted:#7A746C;
  --line:#D8D2C8;
  --accent:#5A3A7A;      /* Five Natures plum — used sparingly */
  --accent-light:#C9B3E3;
  --night:#1E1923;       /* plum-black: dark bands, footer */
  --night-line:rgba(255,255,255,.14);

  /* Band tokens — light by default, swapped by .section--dark */
  --surface:var(--bg);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --fg-3:var(--muted);
  --rule:var(--line);
  --rule-strong:var(--ink);
  --hi:var(--accent);
  --hover-bg:var(--paper);
  --card-hover:var(--night);

  --font-kr:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:'Instrument Serif', Georgia, serif;

  --container:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-kr);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-0.03em; color:var(--fg);}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
em{font-style:normal; color:var(--hi);}
:focus-visible{outline:1.5px solid var(--hi); outline-offset:3px;}

.container{max-width:var(--container); margin:0 auto; padding:0 32px;}
.section{padding:120px 0; background:var(--surface); color:var(--fg);}
.section--dark{
  --surface:var(--night);
  --fg:#fff;
  --fg-2:#CFC8D8;
  --fg-3:#9C93A6;
  --rule:var(--night-line);
  --rule-strong:rgba(255,255,255,.75);
  --hi:var(--accent-light);
  --hover-bg:rgba(255,255,255,.04);
  --card-hover:#2C2533;
}

.label{
  font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--hi); margin-bottom:18px;
  display:flex; align-items:center; gap:12px;
}
.label::before{content:''; width:28px; height:1.5px; background:currentColor;}

.h2{font-size:clamp(32px,4.4vw,58px); line-height:1.18; font-weight:600; letter-spacing:-0.045em;}
.lead{font-size:15.5px; color:var(--fg-2); line-height:1.8;}
.meta{
  font-size:11.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-3);
  display:flex; justify-content:space-between; gap:12px;
}
.num{font-family:var(--font-kr); font-size:20px; font-weight:500; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--fg-3); line-height:1;}

.split{display:grid; grid-template-columns:1.25fr 1fr; gap:48px 80px; align-items:end;}
.split--head{grid-template-columns:1.7fr 1fr; margin-bottom:64px; padding-bottom:36px; border-bottom:1px solid var(--rule-strong);}
.h2--long{font-size:clamp(28px,3.5vw,46px); line-height:1.25;}
.split .lead{max-width:460px;}

/* =========== BUTTONS =========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; font-size:13.5px; font-weight:600; letter-spacing:0.02em;
  border:1px solid transparent; border-radius:0;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-dark{background:var(--night); color:#fff;}
.btn-dark:hover{background:var(--accent);}
.btn-line{border-color:var(--ink); color:var(--ink);}
.btn-line:hover{background:var(--ink); color:#fff;}
.btn-text{padding-left:12px; padding-right:12px; color:var(--ink-2); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--line);}
.btn-text:hover{color:var(--accent); text-decoration-color:currentColor;}

/* =========== HEADER =========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(245,242,237,.0);
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(245,242,237,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo-img{height:24px; width:auto;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-2); transition:color .2s;}
.nav-links a:hover{color:var(--accent);}
.nav-cta{border:1px solid var(--ink); padding:9px 16px; color:var(--ink) !important; letter-spacing:0.04em !important;}
.nav-cta:hover{background:var(--ink); color:#fff !important;}
.nav-toggle{display:none; flex-direction:column; gap:7px; background:none; border:none; padding:8px;}
.nav-toggle span{width:24px; height:1.5px; background:var(--ink); transition:transform .25s var(--ease);}

/* =========== HERO =========== */
.hero{padding:168px 0 0;}
.hero-copy .label{margin-bottom:32px;}
.hero-title{font-size:clamp(40px,7.9vw,112px); line-height:1.08; font-weight:600; letter-spacing:-0.06em; margin-bottom:64px;}
.hero-aside{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 48px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--ink); margin-bottom:96px;}
.hero-aside p{font-size:16px; color:var(--ink-2); line-height:1.8;}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap;}


/* =========== STUDIO + STATS + SERVICES =========== */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:80px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.stat{padding:36px 28px 32px; border-left:1px solid var(--rule);}
.stat:first-child{border-left:none; padding-left:0;}
.stat-num b{font-weight:300; font-size:clamp(44px,5vw,68px); letter-spacing:-0.05em; line-height:1; display:block; color:var(--fg);}
.stat p{margin-top:18px; font-size:13px; font-weight:600; color:var(--fg);}
.stat p span{display:block; font-weight:400; color:var(--fg-3); margin-top:2px;}

.services{margin-top:110px;}
.services-head{display:grid; grid-template-columns:1.25fr 1fr; gap:24px 80px; align-items:end; margin-bottom:40px;}
.services-head .label{grid-column:1 / -1; margin-bottom:0;}
.services-title{font-size:clamp(32px,4.4vw,58px); font-weight:600; line-height:1.18; letter-spacing:-0.045em;}
.services-sub{font-size:15.5px; color:var(--fg-2); letter-spacing:0.01em;}
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule);}
.service-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:28px 26px 30px; border-left:1px solid var(--rule);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.service-card:first-child{border-left:none;}
.service-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px;}
.service-icon{width:40px; height:40px; fill:none; stroke:var(--hi); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}
.service-icon .fill{fill:var(--hi); stroke:none;}
.service-card h3{font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-0.025em;}
.service-card p{font-size:14px; color:var(--fg-2); line-height:1.75;}
.service-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:10px;}
.service-tags li{font-size:11.5px; color:var(--fg-2); border:1px solid var(--rule); padding:4px 9px;}
.service-card:hover{background:var(--card-hover);}
.service-card:hover h3{color:#fff;}
.service-card:hover p, .service-card:hover .num{color:#BDB5C6;}
.service-card:hover .service-icon{stroke:var(--accent-light);}
.service-card:hover .service-icon .fill{fill:var(--accent-light);}
.service-card:hover .service-tags li{color:#EDE8F2; border-color:var(--night-line);}

/* =========== RECENT =========== */
.feature{display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; padding-bottom:88px; margin-bottom:88px; border-bottom:1px solid var(--rule);}
.feature-media{overflow:hidden; aspect-ratio:4/3;}
.feature-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease);}
.feature:hover .feature-media img{transform:scale(1.03);}
.feature .meta{margin-bottom:14px;}
.feature h3{font-size:clamp(24px,2.5vw,32px); font-weight:600; line-height:1.3; letter-spacing:-0.04em; margin-bottom:18px;}
.feature-desc{font-size:15px; color:var(--fg-2); line-height:1.8; margin-bottom:22px;}
.feature-sub{font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--hi); margin:0 0 10px;}
.feature-list{margin-bottom:24px;}
.feature-list li{position:relative; padding:9px 0 9px 18px; border-top:1px solid var(--rule); font-size:14px; color:var(--fg-2); line-height:1.6;}
.feature-list li::before{content:''; position:absolute; left:0; top:18px; width:6px; height:1px; background:var(--hi);}
.feature-list li b{font-weight:600; color:var(--fg);}
.feature-stats{display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 16px; border-top:1px solid var(--rule-strong);}
.feature-stats div{padding:16px 0 0;}
.feature-stats div + div{padding-left:18px; border-left:1px solid var(--rule);}
.feature-stats dt{font-size:11.5px; color:var(--fg-3); margin-bottom:6px;}
.feature-stats dd{margin:0; font-size:clamp(34px,3.4vw,46px); font-weight:300; letter-spacing:-0.05em; line-height:1; color:var(--fg);}
.feature-stats dd small{font-size:14px; font-weight:500; letter-spacing:0; margin-left:2px; color:var(--hi);}
.feature-note{font-size:12.5px; color:var(--fg-3); line-height:1.75;}

.feature--film{display:block; padding-bottom:0; margin-bottom:0; border-bottom:none;}
.film{position:relative; margin-bottom:56px;}
.film video{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000;}
.film-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0 0; font-size:12px; letter-spacing:0.06em; color:var(--fg-3);}
.film-sound{background:none; border:1px solid var(--rule-strong); color:var(--fg); font-size:12px; font-weight:600; letter-spacing:0.06em; padding:8px 14px; transition:background .2s, color .2s;}
.film-sound:hover, .film-sound[aria-pressed="true"]{background:var(--fg); color:var(--surface);}
.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-bottom:56px;}
.feature-quote{font-size:clamp(20px,2vw,24px); font-weight:500; color:var(--fg); line-height:1.45; margin-bottom:16px;}
.feature-quote span{display:block; font-family:var(--font-serif); font-style:italic; font-size:.85em; color:var(--hi); margin-top:2px;}
.scenes{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:48px;}
.scenes li{font-size:13.5px; color:var(--fg-2); line-height:1.5;}
.scenes img{width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:12px;}
.scenes span{display:block; font-size:10.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--hi); margin-bottom:2px;}
.scope{padding-top:24px; border-top:1px solid var(--rule);}
.scope-list{display:flex; flex-wrap:wrap; gap:8px;}
.scope-list li{font-size:13px; color:var(--fg); border:1px solid var(--rule); padding:7px 13px;}

/* =========== BRAND IDENTITY =========== */
.bi-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:56px 32px;}
.bi-card{grid-column:span 2; display:flex; flex-direction:column;}
.bi-card--lg{grid-column:span 3;}
.bi-media{
  position:relative; display:block; width:100%; padding:0; border:none; background:var(--ink);
  aspect-ratio:16/10; overflow:hidden; cursor:zoom-in; margin-bottom:20px;
}
.bi-media img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease);}
.bi-card:hover .bi-media img{transform:scale(1.04);}
.bi-zoom{
  position:absolute; right:14px; bottom:14px; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,.92); padding:7px 12px;
  opacity:0; transform:translateY(6px); transition:all .35s var(--ease);
}
.bi-card:hover .bi-zoom, .bi-media:focus-visible .bi-zoom{opacity:1; transform:none;}
.bi-card .meta{margin-bottom:10px;}
.bi-card h3{font-size:22px; font-weight:600; margin-bottom:10px;}
.bi-card h3 small{font-size:13px; color:var(--fg-3); font-weight:400; margin-left:6px; letter-spacing:0;}
.bi-desc{font-size:14px; color:var(--fg-2); line-height:1.75; margin-bottom:16px;}
.bi-role{margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); font-size:13.5px; font-weight:500; color:var(--fg);}
.bi-role span{display:block; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:2px;}

/* Lightbox */
.lightbox{position:fixed; inset:0; z-index:220; display:none;}
.lightbox.is-open{display:block;}
.lightbox-backdrop{position:absolute; inset:0; background:rgba(20,18,17,.88);}
.lightbox-panel{position:relative; z-index:1; max-width:960px; height:100%; margin:0 auto; display:flex; flex-direction:column; padding:20px 16px; animation:fadeIn .3s var(--ease);}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.lightbox-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 2px 14px; color:#fff;}
.lightbox-bar p{font-size:13px; font-weight:600; letter-spacing:0.08em;}
.lightbox-close{width:38px; height:38px; border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff; font-size:14px;}
.lightbox-close:hover{background:#fff; color:var(--ink);}
.lightbox-scroll{flex:1; overflow-y:auto; background:#fff; overscroll-behavior:contain;}
.lightbox-scroll img{width:100%; height:auto;}

/* =========== CASE STUDIES (compact list) =========== */
.case-compact-head,
.case-compact-row{display:grid; grid-template-columns:72px 1.35fr 1.1fr 1fr; gap:24px; align-items:center;}
.case-compact-head{
  padding-bottom:14px; border-bottom:1px solid var(--rule-strong);
  font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-3);
}
.case-compact-head span:last-child{text-align:right;}
.case-compact-row{padding:30px 0; border-bottom:1px solid var(--rule); transition:background .3s var(--ease);}
.case-compact-row:hover{background:var(--hover-bg);}
.case-compact-row .num{font-size:22px; color:var(--hi);}
.ccr-title h3{font-size:clamp(20px,2.1vw,27px); font-weight:600; line-height:1.25; letter-spacing:-0.035em; margin-bottom:8px;}
.ccr-title h3 small{display:block; font-size:.58em; font-weight:500; color:var(--fg-3); letter-spacing:-0.01em; margin-top:2px;}
.ccr-title .meta{font-size:11px;}
.ccr-role{font-size:14px; color:var(--fg-2); line-height:1.6;}
.ccr-result{display:flex; flex-direction:column; gap:4px; align-items:flex-end; text-align:right;}
.ccr-result strong{font-size:clamp(28px,3vw,38px); font-weight:300; line-height:1; letter-spacing:-0.045em; color:var(--fg);}
.ccr-result strong small{font-size:13px; font-weight:500; letter-spacing:0; margin-left:3px; color:var(--fg-2);}
.ccr-result span{font-size:12.5px; color:var(--fg-3);}
.ccr-bar{
  display:block; width:100%; max-width:180px; height:2px; margin-top:8px;
  background:linear-gradient(90deg, var(--hi) calc(var(--v) * 100%), var(--rule) 0);
}
.case-compact-note{font-size:12px; color:var(--fg-3); margin-top:18px; text-align:right;}

/* =========== SIGNATURE IMC =========== */
.imc-grid{display:grid; grid-template-columns:1fr 1fr;}
.imc-card{display:flex; flex-direction:column; padding:0 48px 8px 0;}
.imc-card + .imc-card{padding:0 0 8px 48px; border-left:1px solid var(--rule);}
.imc-top{display:flex; align-items:center; gap:16px; margin-bottom:28px;}
.imc-top .num{font-size:24px; color:var(--hi);}
.imc-card h3{font-size:clamp(28px,3vw,40px); font-weight:600; line-height:1.15; letter-spacing:-0.045em; margin-bottom:18px;}
.imc-card h3 small{font-size:.45em; font-weight:500; color:var(--fg-3); letter-spacing:-0.01em;}
.imc-kicker{font-size:17px; font-weight:600; color:var(--hi); margin-bottom:10px;}
.imc-desc{font-size:14.5px; color:var(--fg-2); line-height:1.75; margin-bottom:28px;}
.imc-channels{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); margin-bottom:28px;}
.imc-channels li{position:relative; padding:12px 0 12px 18px; border-bottom:1px solid var(--rule); font-size:14px; color:var(--fg);}
.imc-channels li::before{content:''; position:absolute; left:0; top:22px; width:6px; height:1px; background:var(--hi);}
.imc-role{margin-top:auto; font-size:13.5px; font-weight:500; color:var(--fg);}
.imc-role span{display:block; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:2px;}

/* =========== PROJECTS + CLIENTS =========== */
.filter-bar{display:flex; flex-wrap:wrap; gap:6px 24px; margin-bottom:36px;}
.filter-btn{
  background:none; border:none; padding:6px 0; font-size:13px; font-weight:600; letter-spacing:0.04em;
  color:var(--fg-3); border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.filter-btn:hover{color:var(--fg);}
.filter-btn.is-active{color:var(--fg); border-bottom-color:var(--fg);}
.filter-count{font-size:10.5px; vertical-align:super; margin-left:3px; color:var(--fg-3); font-weight:500;}

.project-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule);}
.project-card{
  background:transparent; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:26px 26px 22px; cursor:pointer; display:flex; flex-direction:column; gap:10px;
  transition:background .25s var(--ease);
}
.project-card:hover{background:var(--hover-bg);}
.project-card-cat{font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-3);}
.project-card h4{font-size:17px; font-weight:600; margin-bottom:4px;}
.project-card-role{font-size:13.5px; color:var(--fg-2); line-height:1.6;}
.project-card-more{margin-top:auto; padding-top:8px; font-size:12px; font-weight:600; letter-spacing:0.06em; color:var(--fg-3); transition:color .2s;}
.project-card:hover .project-card-more{color:var(--hi);}

.clients{margin-top:96px;}
.clients-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:20px;}
.clients-head .label{margin-bottom:0;}
.clients-note{font-size:13px; color:var(--fg-3);}
.client-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--rule-strong); border-left:1px solid var(--rule);
}
.client-grid li{
  display:flex; flex-direction:column; justify-content:center;
  padding:22px 20px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-size:14.5px; font-weight:500; letter-spacing:-0.01em; line-height:1.35; color:var(--fg);
  transition:background .25s var(--ease);
}
.client-grid li span{font-size:12px; font-weight:400; color:var(--fg-3);}
.client-grid li:hover{background:var(--hover-bg);}

/* =========== MODAL =========== */
.modal{position:fixed; inset:0; z-index:200; display:none;}
.modal.is-open{display:block;}
.modal-backdrop{position:absolute; inset:0; background:rgba(20,18,17,.55);}
.modal-panel{
  position:relative; max-width:540px; margin:12vh auto 0; background:var(--paper);
  padding:44px 40px; z-index:1; animation:fadeIn .3s var(--ease);
}
.modal-close{position:absolute; top:16px; right:16px; width:34px; height:34px; background:none; border:1px solid var(--line); font-size:13px; color:var(--ink);}
.modal-close:hover{border-color:var(--ink);}
.modal-eyebrow{font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;}
.modal-panel h3{font-size:24px; margin-bottom:16px;}
.modal-desc{font-size:14.5px; color:var(--ink-2); line-height:1.75; margin-bottom:20px;}
.modal-role{border-top:1px solid var(--line); padding-top:16px; font-size:13.5px; color:var(--ink); line-height:1.8;}

/* =========== ABOUT / CEO =========== */
.about-inner{display:grid; grid-template-columns:0.85fr 1.3fr; gap:80px; align-items:start;}
.about-photo{position:sticky; top:100px;}
.about-photo-frame{position:relative; overflow:hidden; aspect-ratio:4/5; background:linear-gradient(180deg,#E4DED4 0%, #D6CEC2 100%);}
.about-photo-frame img{position:absolute; left:50%; bottom:0; width:100%; transform:translateX(-50%);}
.about-photo-name{margin-top:18px; font-size:13px; color:var(--fg-3); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;}
.about-photo-name strong{font-size:18px; font-weight:600; color:var(--fg);}
.about-photo-name span{width:100%; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;}
.about-copy .h2{margin-bottom:32px;}
.ceo-lead{font-size:17px; font-weight:500; line-height:1.6; margin-bottom:18px; color:var(--fg);}
.ceo-tags{display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:44px; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-3);}
.ceo-tags li{padding-left:12px; border-left:1px solid var(--rule);}
.ceo-tags li:first-child{padding-left:0; border-left:none;}
.timeline li{
  display:grid; grid-template-columns:120px 1fr; gap:16px;
  padding:16px 0; border-top:1px solid var(--rule); font-size:14.5px; color:var(--fg-2); line-height:1.7;
}
.timeline li:last-child{border-bottom:1px solid var(--rule);}
.timeline-year{font-size:13.5px; font-weight:600; color:var(--fg); font-variant-numeric:tabular-nums; padding-top:1px;}
.about-side{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px;}
.about-block h4{font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:10px;}
.about-block li{font-size:13.5px; color:var(--fg-2); padding:10px 0; border-top:1px solid var(--rule); line-height:1.6;}

/* =========== CONTACT (light) =========== */
.contact{background:var(--bg); padding:130px 0;}
.contact-inner h2{font-size:clamp(28px,3.8vw,50px); line-height:1.3; font-weight:500; letter-spacing:-0.045em; max-width:880px; margin-bottom:44px;}
.contact-cta{display:flex; gap:10px; flex-wrap:wrap;}

/* =========== FOOTER (dark) =========== */
.site-footer{background:var(--night); color:#A9A1B2; padding:0 0 32px;}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:56px 0 48px; font-size:13px; line-height:1.8;}
.footer-label{font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#6F6A64; margin-bottom:8px;}
.footer-cols a:hover{color:#fff;}
.footer-wordmark{
  font-size:clamp(20px,3.75vw,50px); font-weight:600; letter-spacing:-0.06em; line-height:.85;
  color:#F5F2ED; white-space:nowrap; margin:0 0 28px -0.04em;
}
.footer-copy{font-size:11.5px; color:#6F6A64;}

/* =========== REVEAL =========== */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
[data-reveal].is-visible{opacity:1; transform:none;}

/* =========== RESPONSIVE =========== */
@media (max-width:1100px){
  .nav-links{gap:18px;}
  .nav-links a{font-size:11px; letter-spacing:0.08em;}
}

@media (max-width:980px){
  .section{padding:96px 0;}
  .split{grid-template-columns:1fr; gap:24px;}
  .hero-aside{margin-bottom:72px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(3){border-left:none; padding-left:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .services-head{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:1fr 1fr;}
  .service-card{border-left:none; border-top:1px solid var(--rule);}
  .service-card:nth-child(even){border-left:1px solid var(--rule);}
  .service-card:nth-child(-n+2){border-top:none;}
  .feature{grid-template-columns:1fr; gap:32px;}
  .feature-split{grid-template-columns:1fr; gap:32px;}
  .scenes{grid-template-columns:1fr 1fr; gap:24px 16px;}
  .bi-grid{grid-template-columns:1fr 1fr; gap:48px 24px;}
  .bi-card, .bi-card--lg{grid-column:span 1;}
  .case-compact-head{display:none;}
  .case-compact-row{grid-template-columns:48px 1fr; gap:8px 16px; align-items:start;}
  .ccr-role, .ccr-result{grid-column:2;}
  .ccr-result{align-items:flex-start; text-align:left; margin-top:8px;}
  .imc-grid{grid-template-columns:1fr;}
  .imc-card, .imc-card + .imc-card{padding:0 0 40px; border-left:none;}
  .imc-card + .imc-card{padding-top:40px; border-top:1px solid var(--rule);}
  .project-grid{grid-template-columns:1fr 1fr;}
  .client-grid{grid-template-columns:repeat(3,1fr);}
  .about-inner{grid-template-columns:1fr; gap:56px;}
  .about-photo{position:relative; top:0; max-width:380px;}
}

@media (max-width:860px){
  .nav-links{
    position:fixed; top:61px; left:0; right:0; height:calc(100vh - 61px);
    background:var(--bg); flex-direction:column; align-items:flex-start;
    padding:32px; gap:22px; transform:translateX(100%); transition:transform .3s var(--ease);
  }
  .nav-links a{font-size:15px;}
  .nav-links.is-open{transform:none;}
  .nav-toggle{display:flex;}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(4.25px) rotate(45deg);}
  .nav-toggle.is-open span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg);}
  .nav-cta{margin-top:8px;}
}

@media (max-width:640px){
  .container{padding:0 20px;}
  .nav-inner{padding:16px 20px;}
  .section{padding:80px 0;}
  .hero{padding-top:120px;}
  .hero-copy .label{margin-bottom:24px;}
  .hero-title{margin-bottom:40px;}
  .hero-aside{flex-direction:column; align-items:flex-start; margin-bottom:56px;}
  .hero-aside p br{display:none;}
  .stats{margin-top:56px;}
  .stat{padding:26px 0 24px 18px;}
  .stat:nth-child(odd){padding-left:0; border-left:none;}
  .services{margin-top:72px;}
  .service-grid{grid-template-columns:1fr;}
  .service-card, .service-card:nth-child(even){border-left:none; border-top:1px solid var(--rule); padding:24px 4px 26px;}
  .service-card:first-child{border-top:none;}
  .service-top{margin-bottom:12px;}
  .split--head{margin-bottom:40px; padding-bottom:28px;}
  .feature{padding-bottom:64px; margin-bottom:64px;}
  .feature-stats div + div{padding-left:12px;}
  .feature-stats dd{font-size:30px;}
  .film{margin-bottom:40px;}
  .film-bar{flex-direction:column; align-items:flex-start; gap:10px;}
  .scenes{grid-template-columns:1fr 1fr; gap:20px 12px;}
  .bi-grid{grid-template-columns:1fr; gap:48px;}
  .bi-zoom{opacity:1; transform:none;}
  .case-compact-row{grid-template-columns:36px 1fr; padding:24px 0;}
  .imc-channels{grid-template-columns:1fr;}
  .project-grid{grid-template-columns:1fr;}
  .filter-bar{gap:4px 18px;}
  .clients{margin-top:72px;}
  .clients-head{flex-direction:column; gap:6px;}
  .client-grid{grid-template-columns:1fr 1fr;}
  .client-grid li{padding:16px 14px; font-size:13.5px;}
  .about-photo{max-width:none;}
  .ceo-tags{flex-direction:column; gap:4px;}
  .ceo-tags li{padding-left:0; border-left:none;}
  .timeline li{grid-template-columns:1fr; gap:2px;}
  .about-side{grid-template-columns:1fr; gap:28px;}
  .contact{padding:96px 0;}
  .footer-cols{grid-template-columns:1fr; gap:20px;}
  .modal-panel{margin:14vh 16px 0; padding:32px 24px;}
  .lightbox-panel{padding:12px 10px;}
}