/* MasuLab v3 — hand-written CSS. Fonts self-hosted (OFL). */
@font-face{font-family:"Inter Tight";src:url(../fonts/InterTight-Var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";font-style:italic;src:url(../fonts/InterTight-Italic-Var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IT Outline";src:url(../fonts/InterTight-Bold-Outline-latin.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrainsMono-Var-latin.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"ML Sans KR";src:url(../fonts/MLSansKR-Regular.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7A3,U+FF00-FFEF,U+203B}
@font-face{font-family:"ML Sans KR";src:url(../fonts/MLSansKR-Medium.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7A3,U+FF00-FFEF,U+203B}
@font-face{font-family:"ML Sans KR";src:url(../fonts/MLSansKR-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7A3,U+FF00-FFEF,U+203B}
@font-face{font-family:"ML Sans KR";src:url(../fonts/MLSansKR-Bold.woff2) format("woff2");font-weight:700 900;font-display:swap;unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7A3,U+FF00-FFEF,U+203B}

:root{
  --k:#0b0b0b; --k2:#131313; --w:#f0ece2; --w2:#e6e0d3; --b:#0736a0; --b2:#2b5be0;
  --mute-d:rgba(240,236,226,.58); --mute-l:rgba(11,11,11,.58); --rule-d:rgba(240,236,226,.16); --rule-l:rgba(11,11,11,.16);
  --sans:"Inter Tight","ML Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(20px,4vw,64px); --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--k);color:var(--w);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--b);color:var(--w)}
:focus-visible{outline:2px solid var(--b2);outline-offset:3px}

/* language */
html[data-lang="en"] [lang="ko"]:not(html){display:none!important}
html[data-lang="ko"] [lang="en"]:not(html){display:none!important}
html[data-lang="ko"] body{word-break:keep-all}

.wrap{width:100%;max-width:1680px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.eyebrow{color:var(--mute-d);margin-bottom:clamp(28px,4vw,56px)}
[data-theme="light"] .eyebrow{color:var(--mute-l)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--w);color:var(--k);padding:10px 14px;border-radius:6px}
.skip:focus{top:12px}

/* grain overlay */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite;mix-blend-mode:overlay}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-.005em;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn b{font-weight:400;transition:transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .6s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover b{transform:translateX(4px)}
.btn-light{background:var(--w);color:var(--k)} .btn-light::before{background:var(--b2)} .btn-light:hover{color:var(--w)}
.btn-dark{background:var(--k);color:var(--w)} .btn-dark::before{background:var(--b)}
.btn-line{border:1px solid rgba(240,236,226,.4);color:var(--w)} .btn-line::before{background:var(--w)} .btn-line:hover{color:var(--k)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;padding:0 var(--pad);transition:height .5s var(--ease),background-color .5s,color .4s,border-color .5s;border-bottom:1px solid transparent;color:var(--w)}
.hdr.is-scrolled{height:68px;background:rgba(11,11,11,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-color:var(--rule-d)}
.hdr.on-light{color:var(--k)}
.hdr.on-light.is-scrolled{background:rgba(240,236,226,.78);border-color:var(--rule-l)}
.hdr-logo{position:relative;display:block;width:132px;height:42px;flex:none}
.hdr-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .4s}
.hdr-logo .logo-dark{opacity:0}
.hdr.on-light .logo-dark{opacity:1}.hdr.on-light .logo-light{opacity:0}
.hdr-nav{display:flex;gap:clamp(18px,2.4vw,40px);font-size:14px;font-weight:500}
.hdr-nav a{position:relative;padding:6px 0;opacity:.82;transition:opacity .3s}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hdr-nav a:hover{opacity:1}.hdr-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid currentColor;border-radius:999px;padding:3px;opacity:.9}
.lang button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:6px 10px;border-radius:999px;transition:background .3s,color .3s}
.lang button[aria-pressed="true"]{background:var(--w);color:var(--k)}
.hdr.on-light .lang button[aria-pressed="true"]{background:var(--k);color:var(--w)}
.hdr-cta{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border-radius:999px;background:var(--w);color:var(--k);font-size:14px;font-weight:600;transition:background .4s,color .4s}
.hdr-cta:hover{background:var(--b2);color:var(--w)}
.hdr.on-light .hdr-cta{background:var(--k);color:var(--w)}
.hdr.on-light .hdr-cta:hover{background:var(--b)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:120px var(--pad) 40px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% center;transform:scale(1.08);transition:transform 2.4s var(--ease)}
.is-loaded .hero-bg img{transform:scale(1)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.35) 0,transparent 30%,transparent 60%,rgba(11,11,11,.85) 100%)}
.hero-top{display:flex;justify-content:space-between;color:var(--mute-d)}
.hero-title{align-self:center;display:flex;flex-direction:column;font-weight:700;letter-spacing:-.065em;line-height:.8;font-size:clamp(68px,15.2vw,262px);text-transform:uppercase;margin:4vh 0 0 -.04em}
html[data-lang="ko"] .hero-title{font-size:clamp(52px,11.4vw,200px);letter-spacing:-.06em;line-height:.92}
.ht-line{display:block;overflow:hidden;padding-bottom:.04em}
.cycle{display:grid}
.cycle>span{grid-area:1/1;transform:translateY(105%);transition:transform 1s var(--ease)}
.cycle>span.is-on{transform:translateY(0)}
.cycle>span.is-out{transform:translateY(-105%)}
.ht-outline{font-family:"IT Outline","Inter Tight","ML Sans KR",sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(240,236,226,.85);padding-left:12vw}
.ht-inner{display:inline-block}
.ht-dot{font-style:normal;color:var(--b2);-webkit-text-stroke:0}
.hero-foot{display:grid;grid-template-columns:1fr minmax(0,520px) auto;align-items:end;gap:40px;padding-top:40px;border-top:1px solid var(--rule-d)}
.hero-index{display:flex;gap:28px;color:var(--mute-d)} .hero-index span{color:var(--w);margin-right:6px}
.hero-lead p{font-size:clamp(17px,1.35vw,21px);line-height:1.45;letter-spacing:-.01em;color:rgba(240,236,226,.86);margin-bottom:26px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-scroll{display:flex;align-items:center;gap:12px;color:var(--mute-d)}
.hero-scroll i{position:relative;width:1px;height:44px;background:var(--rule-d);overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--w);transform:translateY(-100%);animation:drip 2.2s var(--ease2) infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- statement ---------- */
[data-theme="light"]{background:var(--w);color:var(--k)}
.statement{padding:clamp(110px,16vw,240px) 0 clamp(80px,10vw,140px)}
.statement-text{font-size:clamp(32px,4.6vw,78px);line-height:1.04;letter-spacing:-.045em;font-weight:500;max-width:22ch}
html[data-lang="ko"] .statement-text{letter-spacing:-.05em;line-height:1.18;max-width:24ch}
.statement-text em{font-style:italic;font-weight:400;color:var(--b)}
html[data-lang="ko"] .statement-text em{font-style:normal}
.statement-meta{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(60px,8vw,120px);padding-top:20px;border-top:1px solid var(--rule-l);color:var(--mute-l)}

/* ---------- section title ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:end;gap:40px;margin-bottom:clamp(48px,6vw,96px)}
.sec-head .eyebrow{margin:0 0 14px}
.sec-title{font-size:clamp(44px,6.4vw,112px);line-height:.92;letter-spacing:-.055em;font-weight:700}
html[data-lang="ko"] .sec-title{letter-spacing:-.05em;line-height:1.05}

/* ---------- services ---------- */
.services{padding:clamp(100px,12vw,180px) 0 clamp(80px,10vw,140px);background:var(--k)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,28px)}
.svc{position:relative;display:flex;flex-direction:column;border-top:1px solid var(--rule-d);padding-top:18px}
.svc:nth-child(2){margin-top:clamp(0px,6vw,110px)}
.svc:nth-child(3){margin-top:clamp(0px,12vw,220px)}
.svc-media{aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--k2)}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .8s}
.svc:hover .svc-media img{transform:scale(1.05)}
.svc-body{padding:26px 4px 0}
.svc-num{color:var(--mute-d);margin-bottom:14px}
.svc h3{font-size:clamp(24px,2.1vw,34px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin-bottom:14px}
.svc h3 span{background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.svc:hover h3 span{background-size:100% 1px}
.svc-body>p{color:rgba(240,236,226,.7);max-width:40ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags li{padding:6px 10px;border:1px solid var(--rule-d);border-radius:999px;font-size:10.5px;color:var(--mute-d);transition:border-color .4s,color .4s}
.svc:hover .tags li{border-color:rgba(240,236,226,.4);color:var(--w)}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;padding:clamp(28px,4vw,56px) 0;border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);background:var(--k)}
.ticker-track{display:flex;align-items:center;gap:clamp(24px,3vw,56px);width:max-content;will-change:transform}
.ticker span{font-family:"IT Outline","Inter Tight",sans-serif;font-size:clamp(56px,9vw,160px);font-weight:700;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(240,236,226,.55);transition:color .5s,-webkit-text-stroke-color .5s}
.ticker span:hover{color:var(--w)}
.ticker i{flex:none;width:.42em;height:.62em;font-size:clamp(56px,9vw,160px);background:var(--b2);clip-path:polygon(0 100%,100% 0,100% 100%)}

/* ---------- work ---------- */
.work{padding:clamp(100px,12vw,180px) 0 clamp(80px,10vw,140px)}
.work-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-bottom:clamp(40px,5vw,80px)}
.work-head .eyebrow{grid-column:1/-1;margin-bottom:8px}
.work-title{font-size:clamp(64px,11vw,200px);line-height:.84;letter-spacing:-.065em;font-weight:700}
.work-meta{display:grid;gap:0;min-width:300px;border-top:1px solid var(--rule-l)}
.work-meta div{display:flex;justify-content:space-between;gap:30px;padding:12px 0;border-bottom:1px solid var(--rule-l)}
.work-meta dt{color:var(--mute-l)} .work-meta a{border-bottom:1px solid currentColor}
.work-hero{position:relative;overflow:hidden;height:clamp(360px,62vw,1000px);margin:0 var(--pad);border-radius:8px;background:var(--w2)}
.work-hero img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.work-body{display:grid;grid-template-columns:minmax(0,1.4fr) auto;align-items:end;gap:40px;margin-top:clamp(40px,5vw,72px)}
.work-desc{font-size:clamp(22px,2.3vw,38px);line-height:1.18;letter-spacing:-.03em;font-weight:500;max-width:30ch}
.work-details{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,1.6vw,28px);margin-top:clamp(60px,7vw,110px)}
.work-details figure{overflow:hidden;border-radius:6px}
.work-details figure:nth-child(2){margin-top:clamp(0px,8vw,140px)}
.work-details img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work-details figcaption{padding:14px 2px 0;color:var(--mute-l)}

/* ---------- offer ---------- */
.offer{position:relative;background:var(--b);color:var(--w);padding:clamp(100px,12vw,180px) 0;overflow:hidden;isolation:isolate}
.offer::before{content:"";position:absolute;right:-10vw;top:-20vw;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(closest-side,rgba(91,130,255,.55),transparent);z-index:-1}
.offer::after{content:"";position:absolute;right:var(--pad);bottom:0;width:clamp(90px,12vw,220px);height:clamp(130px,17vw,320px);background:var(--w);clip-path:polygon(0 100%,100% 0,100% 100%);opacity:.95;z-index:-1}
.offer .eyebrow{color:rgba(240,236,226,.75)}
.offer-title{font-size:clamp(56px,10.4vw,196px);line-height:.86;letter-spacing:-.065em;font-weight:700}
html[data-lang="ko"] .offer-title{line-height:1.02;letter-spacing:-.055em;font-size:clamp(48px,8.6vw,164px)}
.offer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,120px);margin-top:clamp(50px,6vw,100px);padding-top:30px;border-top:1px solid rgba(240,236,226,.35)}
.offer-lead{font-size:clamp(19px,1.6vw,26px);line-height:1.38;letter-spacing:-.015em;max-width:34ch}
.offer-steps li{display:flex;gap:28px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(240,236,226,.25);font-size:clamp(19px,1.7vw,28px);letter-spacing:-.025em;font-weight:500}
.offer-steps li:first-child{padding-top:0}
.offer-steps .mono{opacity:.7}
.offer-foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:clamp(40px,5vw,72px)}
.offer-note{color:rgba(240,236,226,.7);max-width:46ch;text-transform:none;letter-spacing:.02em}

/* ---------- about ---------- */
.about{padding:clamp(100px,12vw,180px) 0 clamp(60px,8vw,120px)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:40px}
.about-text{font-size:clamp(30px,3.9vw,66px);line-height:1.04;letter-spacing:-.045em;font-weight:500}
html[data-lang="ko"] .about-text{line-height:1.2}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px);margin-top:clamp(60px,7vw,110px)}
.principles li{border-top:1px solid var(--k);padding-top:18px}
.principles .mono{color:var(--mute-l)}
.principles h3{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.03em;font-weight:600;margin:28px 0 10px}
.principles p{color:var(--mute-l);font-size:16px}

/* ---------- faq ---------- */
.faq{padding:clamp(60px,8vw,120px) 0 clamp(100px,12vw,180px);border-top:1px solid var(--rule-l)}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px}
.acc details{border-bottom:1px solid var(--rule-l)}
.acc details:first-child{border-top:1px solid var(--rule-l)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;cursor:pointer;font-size:clamp(19px,1.6vw,26px);font-weight:500;letter-spacing:-.025em;transition:padding .5s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{padding-left:12px}
.acc summary i{position:relative;flex:none;width:34px;height:34px;border:1px solid var(--rule-l);border-radius:50%;transition:background .4s,border-color .4s,transform .6s var(--ease)}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.acc summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.acc details[open] summary i{background:var(--k);color:var(--w);border-color:var(--k);transform:rotate(180deg)}
.acc details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.acc-body{overflow:hidden}
.acc-body p{padding:0 60px 28px 0;color:var(--mute-l);max-width:60ch}
.ko-flag{margin-top:48px;color:var(--mute-l);text-transform:none;letter-spacing:0}

/* ---------- contact ---------- */
.contact{position:relative;padding:clamp(110px,13vw,200px) 0 clamp(70px,8vw,110px);overflow:hidden;isolation:isolate;background:var(--k)}
.contact-glow{position:absolute;left:50%;top:30%;width:80vw;height:80vw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(7,54,160,.45),transparent 70%);z-index:-1;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-46%,-52%) scale(1.08);opacity:.8}}
.contact-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.contact-title{font-size:clamp(56px,9.6vw,184px);line-height:.86;letter-spacing:-.065em;font-weight:700}
html[data-lang="ko"] .contact-title{line-height:1.04;letter-spacing:-.055em;font-size:clamp(48px,8.4vw,160px)}
.contact-title em{font-style:italic;font-weight:300;color:rgba(240,236,226,.5)}
html[data-lang="ko"] .contact-title em{font-style:normal;font-weight:700}
.orb{position:relative;flex:none;display:grid;place-items:center;width:clamp(140px,14vw,230px);aspect-ratio:1;border-radius:50%;background:var(--w);color:var(--k);overflow:hidden;isolation:isolate;transition:color .5s}
.orb-fill{position:absolute;inset:0;border-radius:50%;background:var(--b2);transform:scale(0);transition:transform .7s var(--ease);z-index:-1}
.orb:hover .orb-fill{transform:scale(1)} .orb:hover{color:var(--w)}
.orb-label{font-size:clamp(16px,1.4vw,22px);font-weight:600;letter-spacing:-.02em;text-align:center;line-height:1.05}
.contact-rows{margin-top:clamp(60px,7vw,110px);border-top:1px solid var(--rule-d)}
.contact-rows li{position:relative;display:grid;grid-template-columns:minmax(120px,1fr) 3fr auto;align-items:center;gap:20px;padding:clamp(18px,2vw,30px) 0;border-bottom:1px solid var(--rule-d);overflow:hidden}
.contact-rows li::before{content:"";position:absolute;inset:0;background:var(--w);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.contact-rows li:hover::before{transform:scaleY(1)}
.contact-rows li{isolation:isolate;transition:color .5s,padding .6s var(--ease)}
.contact-rows li:hover{color:var(--k);padding-left:18px;padding-right:18px}
.contact-rows .mono{color:var(--mute-d);transition:color .5s}
.contact-rows li:hover .mono{color:var(--mute-l)}
.contact-rows a,.contact-rows .cr-val{font-size:clamp(24px,3.6vw,60px);font-weight:500;letter-spacing:-.045em;line-height:1.05;word-break:break-all}
.contact-rows b{font-weight:300;font-size:clamp(22px,2.4vw,40px);transition:transform .6s var(--ease)}
.contact-rows li:hover b{transform:rotate(45deg)}

/* ---------- footer ---------- */
.ftr{background:var(--k);border-top:1px solid var(--rule-d);padding:clamp(50px,6vw,90px) 0 28px;color:rgba(240,236,226,.75);font-size:15px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr-brand img{width:170px}
.ftr-k{color:var(--mute-d);margin-bottom:12px}
.ftr a:hover{color:var(--w)}
.ftr-giant{margin-top:clamp(60px,8vw,120px);font-weight:700;letter-spacing:-.07em;line-height:.8;font-size:clamp(64px,15.5vw,280px);color:rgba(240,236,226,.92);white-space:nowrap;overflow:hidden}
.ftr-giant .dot{color:var(--b2)}
.ftr-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(28px,3vw,48px);padding-top:20px;border-top:1px solid var(--rule-d);color:var(--mute-d)}

/* ---------- intro ---------- */
.intro{display:none}
.js .intro{display:flex;position:fixed;inset:0;z-index:120;background:var(--k);align-items:center;justify-content:center;clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease2)}
.js .is-loaded .intro, .js.is-loaded .intro{clip-path:inset(0 0 100% 0)}
.intro-inner{display:flex;align-items:center;gap:22px;color:var(--mute-d)}
.intro-bar{position:relative;width:min(240px,30vw);height:1px;background:var(--rule-d);overflow:hidden}
.intro-bar i{position:absolute;inset:0;background:var(--w);transform:scaleX(0);transform-origin:left;animation:load .9s var(--ease) .1s forwards}
@keyframes load{to{transform:scaleX(1)}}

/* ---------- reveal system (JS adds .js) ---------- */
.mask-in{display:block}
.js [data-mask] .mask-in{clip-path:inset(0 0 100% 0);transform:translateY(.3em);transition:clip-path 1.3s var(--ease),transform 1.3s var(--ease)}
.js [data-mask].in .mask-in{clip-path:inset(-20% -5% -20% -5%);transform:none}
.js .split-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .split-line>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*90ms)}
.js [data-split].in .split-line>span{transform:none}
.js [data-reveal]{opacity:0;transform:translateY(60px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js .media img{transform:scale(1.16);transition:transform 1.8s var(--ease)}
.js .media{clip-path:inset(8% 6% 8% 6% round 8px);transition:clip-path 1.5s var(--ease)}
.js .media.in{clip-path:inset(0 0 0 0 round 8px)}
.js .media.in img{transform:scale(1)}
.js .svc:hover .media.in img{transform:scale(1.05)}
.js .reveal-fade{opacity:0;transition:opacity 1s}.js .reveal-fade.in{opacity:1}
.js .hero-title .ht-line>*{transform:translateY(105%);transition:transform 1.3s var(--ease)}
.js .hero-title .ht-line:nth-child(2)>*{transition-delay:.12s}
.js.is-loaded .hero-title .ht-line>*{transform:none}
.js .hero-top,.js .hero-foot{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .5s,transform 1s var(--ease) .5s}
.js.is-loaded .hero-top,.js.is-loaded .hero-foot{opacity:1;transform:none}

/* ---------- cursor ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .js .cursor{display:block;position:fixed;left:0;top:0;z-index:150;pointer-events:none;mix-blend-mode:difference}
  .cursor i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .45s var(--ease),opacity .3s}
  .cursor.is-hover i{transform:scale(4.4)}
  .cursor.is-hidden i{opacity:0}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hdr-nav{display:none}
  .hero-foot{grid-template-columns:1fr;gap:28px}
  .hero-index,.hero-scroll{display:none}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc:nth-child(3){margin-top:0}
  .work-head,.work-body,.faq-grid,.about-grid,.sec-head{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  .hdr{height:68px}.hdr-logo{width:108px;height:36px}
  .hdr-cta{display:none}
  .hero{padding-top:96px;padding-bottom:28px}
  .hero-top{flex-direction:column;gap:6px}
  .hero-title{font-size:clamp(58px,21.5vw,140px);margin-top:4vh}
  html[data-lang="ko"] .hero-title{font-size:clamp(40px,13.4vw,90px)}
  .ht-outline{padding-left:0;-webkit-text-stroke-width:1.2px}
  .hero-bg img{object-position:78% center}
  .svc-grid{grid-template-columns:1fr;gap:56px}
  .svc:nth-child(n){margin-top:0}
  .work-hero{height:auto;aspect-ratio:16/10;margin:0 12px}
  .work-hero img{top:-6%;height:112%}
  .work-details{grid-template-columns:1fr}
  .work-details figure:nth-child(2){margin-top:0}
  .work-meta{min-width:0}
  .offer-grid{grid-template-columns:1fr}
  .offer::after{opacity:.35}
  .contact-top{flex-direction:column;align-items:flex-start}
  .contact-rows li{grid-template-columns:1fr auto;gap:6px 14px}
  .contact-rows li>.mono{grid-column:1/-1}
  .contact-rows a,.contact-rows .cr-val{font-size:clamp(20px,6.2vw,30px)}
  .ftr-grid{grid-template-columns:1fr}
  .statement-meta{flex-direction:column}
  .ftr-giant{white-space:normal;font-size:clamp(56px,19vw,120px);line-height:.86}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-mask] .mask-in,.js [data-reveal],.js .media,.js .media img,.js .split-line>span,.js .reveal-fade,
  .js .hero-title .ht-line>*,.js .hero-top,.js .hero-foot,.hero-bg img{clip-path:none!important;transform:none!important;opacity:1!important}
  .js .intro{display:none}
  .cycle>span{transform:none!important;opacity:0}.cycle>span.is-on{opacity:1}
  .grain{animation:none}
  .ticker-track{transform:none!important}
}