:root { --ink:#111111; --deep:#0d0d0d; --paper:#f7f7f5; --warm:#ececea; --coral:#e71919; --line:rgba(17,17,17,.15); --font-korean:"Noto Sans KR",sans-serif; --font-display:"Montserrat",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-korean),sans-serif; word-break:keep-all; }
a { color:inherit; text-decoration:none; }
.eyebrow { margin:0 0 24px; color:#687670; font:600 10px/1 var(--font-display); letter-spacing:.23em; }
.eyebrow.light { color:rgba(255,255,255,.55); }
.button { min-height:54px; display:inline-flex; align-items:center; justify-content:space-between; gap:35px; padding:0 24px; font-size:13px; font-weight:600; transition:transform .2s ease; }
.button:hover { transform:translateY(-2px); }

.site-header { position:relative; z-index:20; width:100%; height:86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 5vw; border-bottom:1px solid var(--line); }
.home-page .site-header, .quality-hero + .site-header { position:absolute; }
.header-dark { position:absolute; color:var(--ink); background:rgba(255,255,255,.96); border-color:var(--line); backdrop-filter:blur(12px); }
.brand { display:inline-flex; align-items:center; width:max-content; }
.brand-logo { display:block; width:clamp(205px,17vw,258px); height:auto; background:#fff; }
.site-header nav { display:flex; gap:42px; font-size:13px; }
.site-header nav a { position:relative; padding:34px 0 31px; }
.site-header nav a::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--coral); transform:scaleX(0); transition:transform .2s; }
.site-header nav a:hover::after, .site-header nav a.active::after { transform:scaleX(1); }
.header-cta { justify-self:end; font-size:13px; border-bottom:1px solid currentColor; padding:7px 0; }

.home-page .site-header { position:absolute; color:var(--ink); background:rgba(255,255,255,.96); border-color:var(--line); backdrop-filter:blur(12px); }
.home-hero { position:relative; height:100vh; min-height:720px; overflow:hidden; color:white; background:var(--deep); }
.home-hero-image { position:absolute; inset:0; background:url('../jsd-hero.png') center/cover no-repeat; }
.home-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,15,14,.95),rgba(8,15,14,.62) 43%,rgba(8,15,14,.08) 75%),linear-gradient(0deg,rgba(8,15,14,.78),transparent 48%); }
.home-copy { position:relative; z-index:2; padding:21vh 5vw 190px; }
.home-copy h1 { margin:0; font-size:clamp(48px,5.1vw,80px); line-height:1.24; letter-spacing:-.05em; font-weight:300; }
.home-copy h1 em { color:#f22b2b; font-style:normal; font-weight:600; }
.home-copy > p:not(.eyebrow) { margin:28px 0 0; color:rgba(255,255,255,.65); font-size:16px; line-height:1.85; }
.home-actions { display:flex; align-items:center; gap:30px; margin-top:36px; }
.light-button { width:190px; background:white; color:var(--ink); }
.text-link { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.5); font-size:13px; }
.service-gateway { position:absolute; z-index:3; left:5vw; right:5vw; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.24); }
.service-gateway > a { min-height:122px; display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:15px; padding:20px 28px 20px 0; border-right:1px solid rgba(255,255,255,.2); transition:background .2s,padding .2s; }
.service-gateway > a + a { padding-left:28px; }
.service-gateway > a:last-child { border-right:0; }
.service-gateway > a:hover { background:rgba(255,255,255,.08); padding-right:20px; }
.service-gateway > a > span { color:var(--coral); font:600 10px/1 var(--font-display); }
.service-gateway div { display:flex; flex-direction:column; gap:8px; }
.service-gateway strong { font-size:17px; font-weight:500; }
.service-gateway small { color:rgba(255,255,255,.45); font-size:11px; }
.service-gateway b { font-weight:400; }

.page-hero { min-height:340px; display:flex; justify-content:space-between; align-items:flex-end; gap:70px; padding:75px 7vw 65px; border-bottom:1px solid var(--line); }
.page-hero h1, .contact-title h1 { margin:0; font-size:clamp(43px,4.7vw,68px); line-height:1.25; letter-spacing:-.05em; font-weight:500; }
.page-hero > p { margin:0 0 8px; color:#68716d; line-height:1.8; }
.compact-hero { min-height:300px; }
.page-section { padding:90px 7vw; }
.company-overview { display:grid; grid-template-columns:80px 1fr .85fr; gap:5vw; align-items:start; }
.section-number { color:var(--coral); font:600 11px/1 var(--font-display); padding-top:8px; }
.company-message h2, .process-heading h2, .quality-checks h2 { margin:0; font-size:clamp(34px,3.5vw,52px); line-height:1.35; letter-spacing:-.04em; font-weight:500; }
.body-copy { padding-top:30px; border-top:1px solid var(--line); }
.body-copy p { margin:0 0 22px; color:#606a65; line-height:1.95; font-size:15px; }
.value-strip { display:grid; grid-template-columns:repeat(3,1fr); background:#e7e1d7; padding:0 7vw; }
.value-strip article { min-height:245px; padding:48px 4vw; border-right:1px solid var(--line); }
.value-strip article:first-child { padding-left:0; }
.value-strip article:last-child { border:0; }
.value-strip span { display:block; color:var(--coral); font:600 10px/1 var(--font-display); }
.value-strip strong { display:block; margin:28px 0 18px; font:700 17px/1 var(--font-display); letter-spacing:.12em; }
.value-strip p { margin:0; color:#68716d; line-height:1.8; font-size:13px; }

.business-grid { display:grid; grid-template-columns:repeat(3,1fr); padding-top:65px; }
.development-strip { display:grid; grid-template-columns:1fr 1fr; padding:0 7vw; background:#171717; color:white; }
.development-strip article { min-height:175px; display:grid; grid-template-columns:50px 1fr; gap:18px; align-items:center; padding:34px 4vw 34px 0; border-right:1px solid rgba(255,255,255,.16); }
.development-strip article + article { padding-left:4vw; border-right:0; }
.development-strip article > span { align-self:start; padding-top:7px; color:var(--coral); font:600 10px/1 var(--font-display); }
.development-strip small { display:block; margin-bottom:12px; color:rgba(255,255,255,.4); font:600 8px/1 var(--font-display); letter-spacing:.15em; }
.development-strip strong { display:block; font-size:21px; }
.development-strip p { margin:10px 0 0; color:rgba(255,255,255,.52); font-size:12px; line-height:1.7; }
.business-grid article { padding:0 30px 20px; border-right:1px solid var(--line); scroll-margin-top:30px; }
.business-grid article:first-child { padding-left:0; }
.business-grid article:last-child { padding-right:0; border:0; }
.business-index { display:flex; justify-content:space-between; align-items:center; }
.business-index span { color:var(--coral); font:600 11px/1 var(--font-display); }
.business-index small { color:#6c7772; font:600 8px/1 var(--font-display); letter-spacing:.13em; }
.service-visual { position:relative; height:215px; margin:24px 0 28px; overflow:hidden; background:#d8d1c5; }
.service-visual img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; }
.business-grid article:hover .service-visual img { transform:scale(1.025); }
.business-grid h2 { margin:0 0 14px; font-size:26px; font-weight:600; }
.business-grid article > p { min-height:78px; margin:0; color:#68716d; line-height:1.8; font-size:13px; }
.business-grid ul { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; padding:0; list-style:none; }
.business-grid li { padding:6px 10px; border:1px solid var(--line); border-radius:99px; color:#626b66; font-size:10px; }

.quality-hero { min-height:440px; padding:160px 7vw 75px; display:grid; grid-template-columns:1fr .6fr; align-items:end; gap:8vw; background:linear-gradient(115deg,#111a18,#263530); color:white; }
.quality-hero h1 { margin:0; font-size:clamp(46px,5vw,72px); line-height:1.2; letter-spacing:-.05em; font-weight:400; }
.quality-intro { padding:28px 0 5px; border-top:1px solid rgba(255,255,255,.25); }
.quality-intro strong { font-size:21px; line-height:1.55; font-weight:500; }
.quality-intro p { margin:18px 0 0; color:rgba(255,255,255,.52); font-size:13px; line-height:1.8; }
.process-board { display:grid; grid-template-columns:.55fr 1fr; gap:8vw; }
.process-steps { display:grid; grid-template-columns:1fr 1fr; }
.process-steps article { min-height:180px; padding:28px 30px; border-top:1px solid var(--line); border-right:1px solid var(--line); }
.process-steps article:nth-child(even) { border-right:0; }
.process-steps span { color:var(--coral); font:600 10px/1 var(--font-display); }
.process-steps h3 { margin:22px 0 10px; font-size:18px; font-weight:600; }
.process-steps p { margin:0; color:#68716d; font-size:12px; line-height:1.75; }
.quality-checks { padding:75px 7vw; display:grid; grid-template-columns:1fr .7fr; gap:10vw; background:#273330; color:white; }
.quality-checks ol { margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.2); }
.quality-checks li { display:flex; gap:25px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:13px; }
.quality-checks li span { color:var(--coral); font:600 10px/1.5 var(--font-display); }

.contact-page { min-height:calc(100vh - 86px - 120px); padding:75px 7vw; display:grid; grid-template-columns:1fr .72fr; gap:9vw; align-items:center; }
.contact-title > p:last-child { max-width:590px; margin:30px 0 0; color:#65706b; line-height:1.9; }
.contact-card { padding:42px; background:#171717; color:white; }
.contact-card dl { margin:0 0 30px; }
.contact-card dl div { display:grid; grid-template-columns:95px 1fr; gap:20px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.contact-card dt { color:rgba(255,255,255,.42); font-size:11px; }.contact-card dd { margin:0; font-size:13px; }
.blog-status { color:rgba(255,255,255,.5); }
.blog-link { display:inline-block; padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,.45); }
.coral-button { width:100%; background:var(--coral); color:white; }
.contact-card small { display:block; margin-top:14px; color:rgba(255,255,255,.35); font-size:9px; }

.site-footer { min-height:120px; padding:28px 5vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#fff; color:#6c716f; border-top:1px solid var(--line); font-size:10px; }
.footer-brand { color:var(--ink); }.site-footer p:last-child { justify-self:end; }

@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto; grid-template-rows:70px 46px; height:116px; }.site-header nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:16px;font-size:12px}.site-header nav a{padding:14px 0 13px}
  .home-copy{padding-top:175px}.service-gateway{left:0;right:0;padding:0 22px}.service-gateway small{display:none;}
  .page-hero{min-height:300px}.company-overview{grid-template-columns:45px 1fr}.company-overview .body-copy{grid-column:2;}
  .business-grid{grid-template-columns:1fr}.business-grid article,.business-grid article:first-child,.business-grid article:last-child{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;padding:30px 0;border-right:0;border-bottom:1px solid var(--line)}.business-grid .business-index,.business-grid .service-visual{grid-column:1}.business-grid h2,.business-grid article>p,.business-grid ul{grid-column:2}.business-grid h2{grid-row:1;align-self:end}.business-grid article>p{grid-row:2}.business-grid ul{grid-row:3}.business-grid .service-visual{grid-row:2/5}.development-strip{padding:0 5vw}
  .quality-hero,.process-board,.quality-checks,.contact-page{grid-template-columns:1fr}.process-board{gap:45px}.contact-page{padding-top:55px;}
}
@media (max-width:620px) {
  .site-header{padding:0 20px}.header-cta{font-size:11px}.brand-logo{width:190px}
  .home-hero{min-height:760px;height:100svh}.home-hero-image{background-position:61% center}.home-hero-shade{background:linear-gradient(90deg,rgba(8,15,14,.93),rgba(8,15,14,.55))}.home-copy{padding:150px 20px 220px}.home-copy h1{font-size:42px}.home-copy>p:not(.eyebrow){font-size:14px}.desktop-only{display:none}.home-actions{align-items:flex-start;flex-direction:column;gap:14px}
  .service-gateway{grid-template-columns:1fr;padding:0 20px}.service-gateway>a{min-height:58px;padding:10px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}.service-gateway>a+a{padding-left:0}.service-gateway div{flex-direction:row;align-items:center;justify-content:space-between}.service-gateway small{display:none}
  .page-hero{min-height:280px;display:block;padding:55px 20px}.page-hero h1,.contact-title h1{font-size:39px}.page-hero>p{margin-top:30px}.page-section{padding:70px 20px}.company-overview{grid-template-columns:1fr;gap:20px}.company-overview .body-copy{grid-column:auto}.section-number{display:none}.value-strip{grid-template-columns:1fr;padding:0 20px}.value-strip article,.value-strip article:first-child{min-height:auto;padding:30px 0;border-right:0;border-bottom:1px solid var(--line)}
  .development-strip{grid-template-columns:1fr;padding:0 20px}.development-strip article,.development-strip article+article{min-height:145px;padding:28px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}.business-grid article,.business-grid article:first-child,.business-grid article:last-child{display:block;padding:32px 0}.business-grid article>p{min-height:0}.service-visual{height:230px}
  .quality-hero{min-height:510px;padding:140px 20px 60px}.quality-hero h1{font-size:43px}.quality-intro{margin-top:25px}.process-steps{grid-template-columns:1fr}.process-steps article{min-height:auto;padding:24px 0;border-right:0}.quality-checks{padding:65px 20px;gap:40px}
  .contact-page{min-height:auto;padding:65px 20px}.contact-card{padding:30px 22px}.contact-card dl div{grid-template-columns:1fr;gap:6px}
  .site-footer{grid-template-columns:1fr;gap:16px;padding:30px 20px}.site-footer p{margin:0}.site-footer p:last-child{justify-self:start}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}