/* ═══ KIAGU STUDIOS · CORPORATE ═══ */
:root{
  --bg:#f4f3f0; --bg2:#eceae5; --card:#fff;
  --ink:#16161a; --ink2:rgba(22,22,26,.62); --ink3:rgba(22,22,26,.4);
  --line:rgba(22,22,26,.13);
  --acc:#a8862a; --acc2:#c9a54a; --acc-soft:rgba(168,134,42,.1);
  --fd:'Pretendard Variable',Pretendard,'DM Mono',system-ui,-apple-system,sans-serif;
  --fm:'DM Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg); color:var(--ink); font-family:var(--fd);
  font-size:16px; line-height:1.6; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--acc); color:#fff}
html[lang="ko"] body{word-break:keep-all; overflow-wrap:break-word}
a{color:inherit; text-decoration:none}
i{font-style:normal}
img{display:block; max-width:100%}
.mono{font-family:var(--fm); letter-spacing:.14em; text-transform:uppercase}
.sec{padding:clamp(90px,11vw,160px) clamp(22px,6vw,96px); position:relative}
.sec-alt{background-color:var(--bg2);
  background-image:radial-gradient(rgba(22,22,26,.05) 1px, transparent 1.5px); background-size:12px 12px}
.sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(40px,5vw,72px)}
.sec-no,.sec-idx{font-family:var(--fm); font-size:12px; color:var(--acc); letter-spacing:.2em}
.sec-tag{font-family:var(--fm); font-size:11px; color:var(--ink3); letter-spacing:.22em; text-transform:uppercase}
h2{font-size:clamp(30px,4.4vw,58px); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin-bottom:clamp(34px,4vw,56px); max-width:18ch}

/* reveal primitives */
.rev{display:block; overflow:hidden}
.rev>span{display:block; transform:translateY(115%); will-change:transform}
.rv{opacity:0; transform:translateY(34px); will-change:transform,opacity}

/* ─── header ─── */
.hd{position:fixed; inset:0 0 auto 0; z-index:90; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(22px,4vw,56px); height:74px; transition:background .4s, box-shadow .4s, height .4s;}
.hd.is-scrolled{background:rgba(244,243,240,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line); height:62px}
.brand{font-weight:900; font-size:21px; letter-spacing:.06em; display:flex; align-items:baseline; gap:2px}
.brand span{font-size:10px; color:var(--acc); font-weight:700}
.hd nav{display:flex; gap:clamp(16px,2.6vw,38px)}
.hd nav a{font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2);
  position:relative; padding:4px 0; transition:color .3s}
.hd nav a::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--acc);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease)}
.hd nav a:hover{color:var(--ink)}
.hd nav a:hover::after{transform:scaleX(1); transform-origin:left}
.hd-right{display:flex; align-items:center; gap:18px}
.lg{display:flex; border:1px solid var(--line); border-radius:99px; overflow:hidden}
.lg button{font-family:var(--fm); font-size:10px; letter-spacing:.12em; padding:6px 12px; background:none; border:0;
  color:var(--ink3); cursor:pointer; transition:.3s}
.lg button.on{background:var(--ink); color:#fff}
.hd-cta{font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--ink); border-radius:99px; padding:9px 18px; transition:.35s}
.hd-cta:hover{background:var(--ink); color:#fff}

/* ─── hero ─── */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative;
  padding:120px clamp(22px,6vw,96px) 60px; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 82% 18%, rgba(201,165,74,.14), transparent 62%),
    radial-gradient(900px 700px at 8% 92%, rgba(22,22,26,.05), transparent 60%),
    var(--bg);}
#orbit{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(36px,5vw,90px); align-items:center; flex:1; width:100%}
.hero-copy{min-width:0}
.kicker{display:inline-flex; align-items:center; gap:12px; font-family:var(--fm); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--acc); margin-bottom:clamp(22px,3vw,40px)}
.kicker::before{content:""; width:34px; height:1px; background:var(--acc)}
.h-display{font-size:clamp(38px,5.6vw,86px); font-weight:800; line-height:1.02; letter-spacing:-.04em; margin-bottom:clamp(26px,3.4vw,48px)}
.h-display .acc{color:transparent; -webkit-text-stroke:1.5px var(--ink); position:relative; transition:color .6s .1s}
.h-display .acc:hover{color:var(--acc); -webkit-text-stroke:1.5px var(--acc)}
.hero-sub{max-width:560px; font-size:clamp(15px,1.35vw,18px); color:var(--ink2); line-height:1.75; margin-bottom:clamp(34px,4vw,54px)}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap}
.btn-fill,.btn-line{font-family:var(--fm); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border-radius:99px; transition:.4s var(--ease); display:inline-flex; align-items:center; gap:10px}
.btn-fill{background:var(--ink); color:#fff; border:1px solid var(--ink)}
.btn-fill:hover{background:var(--acc); border-color:var(--acc); transform:translateY(-2px)}
.btn-line{border:1px solid var(--line); color:var(--ink)}
.btn-line:hover{border-color:var(--ink); transform:translateY(-2px)}
.hero-foot{position:relative; z-index:2; display:flex; gap:clamp(18px,2.6vw,44px); flex-wrap:wrap;
  margin-top:clamp(40px,4.6vw,72px)}
.hero-foot span{font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink3);
  display:flex; align-items:center; gap:9px}
.hero-foot span::before{content:""; width:5px; height:5px; background:var(--acc); border-radius:50%}

/* ─── marquee ─── */
.mq{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden;
  background-color:var(--card);
  background-image:radial-gradient(rgba(22,22,26,.07) 1px, transparent 1.5px); background-size:10px 10px}
.mq-in{display:flex; gap:0; white-space:nowrap; will-change:transform; animation:mq 30s linear infinite; width:max-content}
.mq-in span{font-size:clamp(15px,1.7vw,22px); font-weight:700; letter-spacing:.02em; color:var(--ink2); padding:0 26px;
  display:flex; align-items:center; gap:52px}
.mq-in span::after{content:"·"; color:var(--acc); font-weight:900}
@keyframes mq{to{transform:translateX(-50%)}}

/* ─── what we do ─── */
.seg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.seg{background:var(--bg); padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,36px); min-height:300px;
  display:flex; flex-direction:column; position:relative; transition:background .45s}
.seg:hover{background:var(--card)}
.seg-no{font-family:var(--fm); font-size:11px; color:var(--acc); letter-spacing:.18em; margin-bottom:auto}
.seg h3{font-size:clamp(19px,1.7vw,24px); font-weight:800; letter-spacing:-.02em; margin:26px 0 12px}
.seg p{font-size:14px; color:var(--ink2); line-height:1.7}
.seg::after{content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--acc);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.seg:hover::after{transform:scaleX(1)}

/* ─── IPs ─── */
.ip-card{display:grid; grid-template-columns:1.05fr 1fr; border:1px solid var(--line); background:var(--card);
  overflow:hidden; position:relative; transition:box-shadow .5s, transform .5s var(--ease)}
a.ip-card:hover{box-shadow:0 34px 80px -30px rgba(22,22,26,.28); transform:translateY(-5px)}
.ip-info{padding:clamp(30px,3.6vw,58px); display:flex; flex-direction:column; gap:18px}
.ip-no{font-family:var(--fm); font-size:11px; letter-spacing:.2em; color:var(--acc); text-transform:uppercase}
.ip-info h3{font-size:clamp(30px,3.4vw,48px); font-weight:800; letter-spacing:-.03em; line-height:1.05}
.ip-info>p{font-size:15px; color:var(--ink2); line-height:1.75; max-width:46ch}
.ip-badges{display:flex; flex-wrap:wrap; gap:9px; margin-top:6px}
.ip-badges .bd{font-style:normal; font-family:var(--fm); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:7px 13px; color:var(--ink2); white-space:nowrap}
.ip-badges .bd.bd-live{border-color:rgba(168,134,42,.5); color:var(--acc); background:var(--acc-soft)}
.ip-badges .bd.bd-dim{color:var(--ink3)}
.ip-go{margin-top:auto; padding-top:22px; font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); display:inline-flex; align-items:center; gap:12px}
.ip-go b{font-weight:400; transition:transform .4s var(--ease)}
a.ip-card:hover .ip-go b{transform:translateX(8px)}
.ip-go::before{content:""; width:30px; height:1px; background:var(--acc)}
.ip-art{position:relative; min-height:420px; overflow:hidden}
.ip-art img{position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; will-change:transform}
.ip-art::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(22,22,26,.14), transparent 34%)}
.ip-next{margin-top:26px; display:flex; align-items:center; gap:26px; border:1px dashed rgba(22,22,26,.28);
  padding:clamp(24px,2.6vw,38px) clamp(26px,3vw,44px); background:transparent}
.ip-next .ip-info{padding:0; flex:1}
.ip-next h3{font-size:clamp(20px,2vw,28px)}
.ip-next-mark{font-size:clamp(60px,7vw,110px); font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(22,22,26,.22); line-height:1}

/* ─── studio facts ─── */
.facts{border-top:1px solid var(--line)}
.fact{display:grid; grid-template-columns:220px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline}
.fact .f-k{font-family:var(--fm); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3)}
.fact .f-v{font-size:clamp(16px,1.6vw,21px); font-weight:600; letter-spacing:-.01em}
.sec-sub{max-width:620px; color:var(--ink2); font-size:clamp(15px,1.3vw,17px); line-height:1.75; margin:-14px 0 46px}

/* ─── latest ─── */
.nw-list{border-top:1px solid var(--line)}
.nw{display:grid; grid-template-columns:130px 1fr auto; gap:22px; align-items:center;
  padding:24px 6px; border-bottom:1px solid var(--line); transition:background .3s, padding .3s}
.nw:hover{background:rgba(255,255,255,.7); padding-left:18px}
.nw-date{font-family:var(--fm); font-size:11px; letter-spacing:.14em; color:var(--ink3); text-transform:uppercase}
.nw-date.nw-live{color:var(--acc); display:flex; align-items:center; gap:8px}
.nw-date.nw-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--acc); animation:pl 1.8s infinite}
@keyframes pl{50%{opacity:.25}}
.nw p{font-size:clamp(15px,1.5vw,19px); font-weight:600; letter-spacing:-.01em}
.nw i{font-style:normal; font-family:var(--fm); color:var(--ink3); transition:transform .35s var(--ease), color .3s}
.nw:hover i{transform:translate(4px,-4px); color:var(--acc)}

/* ─── contact ─── */
.sec-cta{background-color:var(--ink); color:#f4f3f0; overflow:hidden; position:relative;
  background-image:radial-gradient(rgba(244,243,240,.055) 1px, transparent 1.5px); background-size:13px 13px}
.sec-cta::before{content:""; position:absolute; width:900px; height:900px; border-radius:50%;
  border:1px solid rgba(244,243,240,.09); right:-280px; top:-320px}
.sec-cta::after{content:""; position:absolute; width:560px; height:560px; border-radius:50%;
  border:1px solid rgba(201,165,74,.22); right:-120px; top:-160px}
.sec-cta .sec-tag{color:rgba(244,243,240,.4)}
.sec-cta .sec-idx{color:var(--acc2)}
.sec-cta h2{color:#f4f3f0; max-width:16ch}
.sec-cta p{color:rgba(244,243,240,.62); max-width:520px; margin:-10px 0 44px; font-size:clamp(15px,1.3vw,17px)}
.cta-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center; position:relative; z-index:2}
.sec-cta .btn-fill{background:var(--acc); border-color:var(--acc)}
.sec-cta .btn-fill:hover{background:var(--acc2); border-color:var(--acc2)}
.sec-cta .btn-line{border-color:rgba(244,243,240,.3); color:#f4f3f0}
.sec-cta .btn-line:hover{border-color:#f4f3f0}
.mail-big{font-size:clamp(22px,3.4vw,44px); font-weight:800; letter-spacing:-.02em; display:inline-block;
  border-bottom:2px solid rgba(201,165,74,.55); padding-bottom:6px; transition:.35s; position:relative; z-index:2}
.mail-big:hover{color:var(--acc2); border-color:var(--acc2)}

/* korean: tighter letter-spacing on meta labels */
html[lang="ko"] .hd nav a,
html[lang="ko"] .mono,
html[lang="ko"] .kicker,
html[lang="ko"] .sec-tag,
html[lang="ko"] .hd-cta,
html[lang="ko"] .btn-fill,
html[lang="ko"] .btn-line,
html[lang="ko"] .ip-badges .bd,
html[lang="ko"] .ip-no,
html[lang="ko"] .ip-go,
html[lang="ko"] .nw-date,
html[lang="ko"] .hero-foot span,
html[lang="ko"] .pl-k,
html[lang="ko"] .pl-bd,
html[lang="ko"] .pl-no,
html[lang="ko"] .ha-live,
html[lang="ko"] .ha-read,
html[lang="ko"] .ha-tag,
html[lang="ko"] .fact dt{letter-spacing:.05em}

/* ─── footer ─── */
.ft{background:var(--ink); color:rgba(244,243,240,.55); padding:0 clamp(22px,6vw,96px) 46px; position:relative; overflow:hidden}
.ft-mark{font-size:clamp(90px,17vw,270px); font-weight:900; letter-spacing:-.02em; line-height:.9;
  color:transparent; -webkit-text-stroke:1px rgba(244,243,240,.13); text-align:center; user-select:none;
  padding:30px 0 10px; white-space:nowrap}
.ft-grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap;
  border-top:1px solid rgba(244,243,240,.12); padding-top:34px; font-size:12.5px; line-height:1.9}
.ft-grid b{color:#f4f3f0; font-weight:700}
.ft-links{display:flex; gap:24px; flex-wrap:wrap}
.ft-links a{font-family:var(--fm); font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:color .3s}
.ft-links a:hover{color:var(--acc2)}
.ft-col button{display:block; background:none; border:0; padding:0; margin:0; color:inherit; font:inherit;
  font-size:12.5px; line-height:1.9; cursor:pointer; text-align:left; transition:color .3s}
.ft-col button:hover{color:var(--acc2)}
.ft-col button[data-legal]::before{content:"· "; color:var(--acc)}
.ft-bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:34px;
  font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,243,240,.32)}

/* ─── responsive ─── */
@media(max-width:1080px){
  .seg-grid{grid-template-columns:1fr 1fr}
  .ip-card{grid-template-columns:1fr}
  .ip-art{min-height:340px; order:-1}
}
@media(max-width:760px){
  .hd nav{display:none}
  .hd-cta{display:none}
  .seg-grid{grid-template-columns:1fr}
  .seg{min-height:0}
  .fact{grid-template-columns:1fr; gap:6px; padding:20px 0}
  .nw{grid-template-columns:1fr auto; gap:8px}
  .nw-date{grid-column:1/-1}
  .h-display .acc{-webkit-text-stroke-width:1px}
}

/* ═══ CAREERS PAGE ═══ */
.cr-hero{padding-top:170px; overflow:hidden;
  background-image:radial-gradient(rgba(22,22,26,.05) 1px, transparent 1.5px); background-size:12px 12px}
.cr-hero .cr-const{left:auto; right:4%; top:150px; width:min(280px,26vw); opacity:.45}
.cr-hero h2{margin-bottom:20px}
.cr-note{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:44px;
  font-size:15px; color:var(--ink2)}
.cr-note a{color:var(--ink); font-weight:700; border-bottom:2px solid rgba(168,134,42,.55); transition:.3s}
.cr-note a:hover{color:var(--acc); border-color:var(--acc)}
#jobs{border-top:1px solid var(--line)}
.cr-loading,.cr-empty{padding:44px 0; color:var(--ink3); font-family:var(--fm); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.job{border-bottom:1px solid var(--line)}
.job-head{width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px;
  background:none; border:0; padding:30px 4px; cursor:pointer; text-align:left; font-family:inherit; color:inherit; transition:padding .3s}
.job-head:hover{padding-left:16px}
.job-head h3{font-size:clamp(19px,2vw,26px); font-weight:800; letter-spacing:-.02em; margin-bottom:6px}
.job-meta{font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3)}
.job-x{position:relative; flex:0 0 40px; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; transition:.4s var(--ease)}
.job-x::before,.job-x::after{content:""; position:absolute; top:50%; left:50%; width:14px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); transition:.4s var(--ease)}
.job-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.job.is-open .job-x{background:var(--ink); border-color:var(--ink)}
.job.is-open .job-x::before,.job.is-open .job-x::after{background:#fff}
.job.is-open .job-x::after{transform:translate(-50%,-50%) rotate(0deg)}
.job-body{max-height:0; overflow:hidden; transition:max-height .6s var(--ease)}
.job-inner{padding:6px 4px 40px; max-width:760px}
.job-desc{font-size:15px; color:var(--ink2); line-height:1.75; margin-bottom:26px}
.job-sec{margin-bottom:22px}
.job-sec b{display:block; font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:10px}
.job-sec ul{list-style:none}
.job-sec li{position:relative; padding-left:20px; font-size:14.5px; color:var(--ink2); line-height:1.7; margin-bottom:7px}
.job-sec li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border:1px solid var(--acc); border-radius:50%}
.job-apply{margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.job-apply p{font-size:13px; color:var(--ink3)}

/* ═══ MODALS (light) ═══ */
.modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; visibility:hidden; opacity:0; transition:opacity .35s, visibility .35s}
.modal.is-open{visibility:visible; opacity:1}
.mo-back{position:absolute; inset:0; background:rgba(22,22,26,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.mo-panel{position:relative; background:#fff; border-radius:14px; width:min(560px,100%); max-height:88vh;
  overflow-y:auto; box-shadow:0 40px 100px -20px rgba(22,22,26,.4); transform:translateY(24px); transition:transform .45s var(--ease)}
.modal.is-open .mo-panel{transform:translateY(0)}
.mo-wide{width:min(680px,100%)}
.mo-doc{width:min(760px,100%)}
.mo-x{position:sticky; top:16px; margin:16px 16px -46px auto; display:flex; width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer; z-index:5; align-items:center; justify-content:center; transition:.3s}
.mo-x::before,.mo-x::after{content:""; position:absolute; width:14px; height:1.5px; background:var(--ink); transform:rotate(45deg)}
.mo-x::after{transform:rotate(-45deg)}
.mo-x:hover{background:var(--ink)}
.mo-x:hover::before,.mo-x:hover::after{background:#fff}
.mo-body{padding:clamp(30px,4vw,50px)}
.mo-badge{font-family:var(--fm); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:14px}
.mo-body h2{font-size:clamp(24px,2.6vw,34px); margin-bottom:26px; max-width:none}
.mo-sub{color:var(--ink2); line-height:1.75; margin-bottom:14px}
.f-note{font-size:13px; color:var(--ink3); margin-bottom:26px}
.mo-success{text-align:left}
/* forms */
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.f-label{display:block; font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); margin:18px 0 8px}
.f-input{width:100%; border:1px solid var(--line); border-radius:8px; background:var(--bg);
  padding:13px 15px; font:inherit; font-size:14.5px; color:var(--ink); transition:border-color .3s}
.f-input:focus{outline:none; border-color:var(--acc)}
.f-area{resize:vertical; min-height:84px}
.f-file{display:flex; align-items:center; gap:10px; border:1px dashed rgba(22,22,26,.3); border-radius:8px;
  padding:13px 15px; cursor:pointer; font-size:13.5px; color:var(--ink2); transition:.3s}
.f-file:hover{border-color:var(--acc); color:var(--ink)}
.f-file input{display:none}
.f-file svg{flex:0 0 auto}
.f-file span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.f-hint{font-size:11.5px; color:var(--ink3); margin-top:6px}
.f-check{display:flex; align-items:flex-start; gap:12px; margin-top:24px; cursor:pointer; font-size:13.5px; color:var(--ink2); line-height:1.6}
.f-check input{display:none}
.f-check i{flex:0 0 20px; width:20px; height:20px; border:1px solid var(--line); border-radius:5px; margin-top:1px; position:relative; transition:.25s}
.f-check input:checked+i{background:var(--acc); border-color:var(--acc)}
.f-check input:checked+i::after{content:""; position:absolute; left:6px; top:2.5px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.f-check button{border:0; background:none; padding:0; font:inherit; color:var(--acc); text-decoration:underline; cursor:pointer}
.f-err{color:#b03a2e; font-size:13px; min-height:20px; margin-top:14px}
.f-submit{width:100%; justify-content:center; margin-top:10px}
.f-submit:disabled{opacity:.55; cursor:wait}
/* legal doc typography */
.mo-doc-head{padding:clamp(30px,4vw,50px) clamp(30px,4vw,50px) 0}
.mo-doc-head h2{margin-bottom:10px}
.mo-date{font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3)}
.mo-enonly{font-family:var(--fm); font-size:11px; letter-spacing:.08em; color:var(--acc); margin-top:8px}
.mo-enonly:empty{display:none}
.mo-doc-body{padding:clamp(24px,3vw,40px) clamp(30px,4vw,50px) clamp(34px,4vw,54px); color:var(--ink2); font-size:14px; line-height:1.8}
.mo-doc-body h3{color:var(--ink); font-size:17px; margin:30px 0 10px}
.mo-doc-body h4{color:var(--ink); font-size:14.5px; margin:22px 0 8px}
.mo-doc-body p{margin-bottom:12px}
.mo-doc-body ul,.mo-doc-body ol{margin:0 0 12px 20px}
.mo-doc-body li{margin-bottom:6px}
.mo-doc-body b,.mo-doc-body strong{color:var(--ink)}

/* ═══ COOKIE (light) ═══ */
.cookie{position:fixed; left:20px; bottom:20px; z-index:180; width:min(430px,calc(100vw - 40px));
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 30px 80px -20px rgba(22,22,26,.35);
  padding:26px 26px 22px}
.ck-badge{font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:12px}
.cookie p{font-size:13px; color:var(--ink2); line-height:1.7; margin-bottom:18px}
.ck-btns{display:flex; gap:10px; flex-wrap:wrap}
.ck-btns button{font-family:var(--fm); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border-radius:99px; padding:11px 18px; cursor:pointer; transition:.3s; border:1px solid var(--line); background:none; color:var(--ink)}
.ck-accept{background:var(--ink)!important; color:#fff!important; border-color:var(--ink)!important}
.ck-accept:hover{background:var(--acc)!important; border-color:var(--acc)!important}
.ck-btns button:hover{border-color:var(--ink)}
.ck-detail{margin-top:18px; border-top:1px solid var(--line); padding-top:8px}
.ck-row{display:flex; justify-content:space-between; align-items:center; gap:18px; padding:12px 0}
.ck-row b{font-size:13px; display:block; margin-bottom:4px}
.ck-row p{font-size:12px; margin:0}
.ck-fixed{font-family:var(--fm); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); white-space:nowrap}
.ck-toggle input{display:none}
.ck-toggle i{display:block; width:40px; height:22px; border-radius:99px; background:rgba(22,22,26,.15); position:relative; cursor:pointer; transition:.3s}
.ck-toggle i::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.3s var(--ease); box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ck-toggle input:checked+i{background:var(--acc)}
.ck-toggle input:checked+i::after{left:21px}

/* ═══ TOAST ═══ */
.toast{position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px); z-index:300;
  background:var(--ink); color:#fff; font-family:var(--fm); font-size:11px; letter-spacing:.1em;
  padding:13px 24px; border-radius:99px; opacity:0; pointer-events:none; transition:.4s var(--ease)}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

/* ═══ HERO ART (IP composition) ═══ */
.hero-vert{position:absolute; right:clamp(4px,1.2vw,22px); top:50%; transform:translateY(-50%); z-index:1;
  writing-mode:vertical-rl; font-weight:800; font-size:clamp(60px,7vw,122px); letter-spacing:.06em;
  color:transparent; -webkit-text-stroke:1px rgba(22,22,26,.1); user-select:none; pointer-events:none; white-space:nowrap}
.hero-art{position:relative; z-index:2; perspective:1300px}
.ha-inner{position:relative; aspect-ratio:.94; transform-style:preserve-3d; will-change:transform}
.ha-frame{position:absolute; overflow:hidden; background:var(--card); border-radius:14px;
  box-shadow:0 44px 90px -32px rgba(22,22,26,.5); will-change:transform}
.ha-frame img{width:100%; height:100%; object-fit:cover; display:block}
.ha-cover{right:0; top:0; width:71%; aspect-ratio:.658; border:6px solid #fff; transform:rotate(3.5deg); z-index:2}
.ha-game{left:-2%; bottom:0; width:60%; aspect-ratio:1.6; border:5px solid #fff; transform:rotate(-4deg); z-index:1}
.ha-live{position:absolute; top:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(22,22,26,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:99px; padding:7px 12px}
.ha-dot{width:6px; height:6px; border-radius:50%; background:var(--acc2); animation:pl 1.8s infinite; flex:0 0 auto}
.ha-read{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:26px 14px 12px;
  font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:linear-gradient(transparent, rgba(10,10,20,.85)); transition:color .3s}
.ha-cover:hover .ha-read{color:var(--acc2)}
.ha-tag{position:absolute; left:10px; bottom:10px; z-index:3; font-family:var(--fm); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(244,243,240,.94);
  background:rgba(22,22,26,.72); border-radius:99px; padding:5px 10px}
/* constellation ornament */
.ha-const{position:absolute; left:-9%; top:-12%; width:58%; z-index:0}
.cn-l{fill:none; stroke:rgba(168,134,42,.45); stroke-width:1}
.cn-n circle{fill:var(--acc); animation:cn 3.4s ease-in-out infinite}
.cn-n circle:nth-child(2n){animation-delay:1.1s}
.cn-n circle:nth-child(3n){animation-delay:2.2s}
.cn-s{fill:rgba(168,134,42,.65); animation:cn 2.8s ease-in-out infinite}
.cn-s.s2{animation-delay:1.4s}
@keyframes cn{50%{opacity:.25}}

/* ═══ TRANSMEDIA PIPELINE ═══ */
.pl{margin-top:clamp(64px,7.5vw,120px)}
.pl-head{display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:22px; margin-bottom:clamp(24px,2.6vw,38px)}
.pl-k{font-family:var(--fm); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--acc)}
.pl-name{font-weight:800; font-size:clamp(18px,1.8vw,24px); letter-spacing:-.02em; color:var(--ink3)}
.pl-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,24px)}
.pl-card{display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s}
.pl-card:hover{transform:translateY(-5px); box-shadow:0 30px 60px -28px rgba(22,22,26,.3)}
.pl-img{position:relative; aspect-ratio:.86; overflow:hidden; background:var(--bg2)}
.pl-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease)}
.pl-img img.pos-t{object-position:50% 16%}
.pl-card:hover .pl-img img{transform:scale(1.05)}
.pl-bd{position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(244,243,240,.94); border-radius:99px; padding:6px 11px; color:var(--ink)}
.pl-bd.live{background:var(--acc); color:#fff}
.pl-bd.live .ha-dot{background:#fff}
.pl-bd.dim{background:rgba(22,22,26,.07); color:var(--ink3)}
.pl-sealed{display:flex; align-items:center; justify-content:center; color:var(--ink3);
  background-image:radial-gradient(rgba(22,22,26,.07) 1px, transparent 1.5px); background-size:11px 11px}
.pl-sealed svg{width:34px; height:34px; opacity:.7}
.pl-soon{background:transparent; border:1.5px dashed rgba(22,22,26,.3)}
.pl-soon:hover{box-shadow:none; border-color:rgba(168,134,42,.55)}
.pl-info{padding:16px 18px 20px; position:relative}
.pl-no{font-family:var(--fm); font-size:10px; color:var(--acc); letter-spacing:.18em}
.pl-info h3{font-size:clamp(17px,1.5vw,21px); font-weight:800; letter-spacing:-.02em; margin:8px 0 5px}
.pl-info p{font-size:13px; color:var(--ink2); line-height:1.55}
.pl-arrow{position:absolute; top:15px; right:15px; font-family:var(--fm); font-size:13px; color:var(--ink3); transition:.3s}
a.pl-card:hover .pl-arrow{color:var(--acc); transform:translate(2px,-2px)}

/* ═══ STUDIO ↔ IP LINK ═══ */
.st-behind{display:flex; align-items:center; gap:18px; border:1px solid var(--line); background:var(--card);
  border-radius:12px; padding:13px 22px 13px 13px; margin:-12px 0 46px; max-width:560px;
  transition:.4s var(--ease)}
.st-behind:hover{border-color:rgba(168,134,42,.6); transform:translateY(-2px);
  box-shadow:0 20px 44px -24px rgba(22,22,26,.3)}
.st-behind img{width:44px; height:60px; object-fit:cover; object-position:50% 18%; border-radius:6px; flex:0 0 auto}
.stb-t{font-size:15px; color:var(--ink2)}
.stb-t b{color:var(--ink); font-weight:800}
.stb-arrow{margin-left:auto; font-family:var(--fm); color:var(--ink3); transition:.3s}
.st-behind:hover .stb-arrow{color:var(--acc); transform:translateX(5px)}

/* ═══ responsive careers/modals ═══ */
@media(max-width:760px){
  .f-row{grid-template-columns:1fr}
  .cr-hero{padding-top:130px}
  .cookie{left:12px; bottom:12px; width:calc(100vw - 24px); padding:20px}
  .mo-panel{max-height:92vh}
}

/* ═══ responsive hero-art / pipeline (must come after component blocks) ═══ */
@media(max-width:1080px){
  .hero-in{grid-template-columns:1fr; gap:44px}
  .hero-art{max-width:520px; width:100%}
  .hero-vert{display:none}
  .pl-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .hero-art{max-width:400px}
  .pl-grid{gap:12px}
  .pl-info{padding:12px 13px 16px}
  .pl-info p{font-size:12px}
  .st-behind{margin:-4px 0 34px}
}