*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:140px}body{margin:0;font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#313a41;word-break:keep-all}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}a:focus-visible,button:focus-visible{outline:3px solid #ffcf70;outline-offset:4px}[hidden]{display:none!important}.skip{position:fixed;top:-100px;background:white;padding:12px;z-index:100}.skip:focus{top:0}header{position:sticky;top:0;background:#fff;z-index:20;border-bottom:2px solid #9ddcf5;padding:14px 20px 0;min-height:140px}.logo{display:block;width:195px;margin:0 auto 14px}nav{width:min(980px,100%);margin:auto;display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch;gap:6px;padding-bottom:8px}nav>a,nav .dropdown>button{display:flex;justify-content:center;align-items:center;text-align:center;color:#2896c2;font-size:14px;font-weight:700;padding:9px 5px;min-height:36px}nav>a.active,nav>a:hover,nav .dropdown>button:hover{background:#2db2e7;color:#fff}.dropdown{position:relative}.dropdown>button{width:100%;background:none;border:0;gap:8px}.dropdown>div{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 5px 12px #1238;padding:12px;z-index:30;text-align:center;font-size:13px;color:#6da6bb}.blue-section{background:radial-gradient(ellipse at 55% 35%,#258fbb 0%,#176b91 45%,#103c55 100%);color:#fff;position:relative;overflow:hidden}.banner-inner{position:relative;width:min(981px,90%);margin:auto;z-index:1}.banner{min-height:660px;display:flex;align-items:center;justify-content:center;padding:10px 0 14px}.banner-inner>img{width:100%;height:min(620px,60vw);object-fit:contain}.banner-controls{display:flex;gap:15px;align-items:center;justify-content:center;height:30px;opacity:.75}.banner-controls>button{border:0;background:transparent;color:#fff;font-size:24px;line-height:1;width:26px;height:26px}.banner-controls .pause{font-size:13px}.dots{display:flex;gap:9px}.dots button{width:7px;height:7px;padding:0;border:1px solid white;border-radius:50%;background:transparent}.dots .selected{background:white}.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;width:5px;height:5px;background:#9addf8;border-radius:50%;opacity:.45;box-shadow:0 0 7px #a3e0fa;animation:float 10s ease-in-out infinite alternate}.particle.large{width:23px;height:23px;filter:blur(3px);opacity:.26}.particle.medium{width:11px;height:11px;filter:blur(1px)}@keyframes float{to{transform:translate(28px,-70px);opacity:.1}}.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.features{position:relative;color:#fff;overflow:hidden}.features>.backdrop{object-position:50% 35%}.feature-shade{position:absolute;inset:0;background:#172a1926}.feature-inner{position:relative;width:min(981px,92%);margin:auto;padding:46px 0 65px}.feature-title{text-align:center;text-shadow:0 1px 4px #182f26b0}.feature-title h1,.feature-title h2{margin:0;font-weight:400}.hangul{display:block;font-size:20px;letter-spacing:.75em;padding-left:.75em;margin-bottom:8px}.hanja{font-family:serif;font-size:100px;letter-spacing:.04em;line-height:1.4}.feature-title p{font-size:24px;letter-spacing:.1em;margin:12px 0 38px}.feature-cards{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:22px;width:min(960px,100%);margin:auto}.feature-cards img{width:100%;filter:drop-shadow(0 3px 8px #0002)}.principle-inner{position:relative;z-index:1;width:min(981px,90%);margin:auto;padding:55px 0 52px;text-align:center}.video-row{width:min(560px,100%);margin:auto}#video-play{position:relative;display:block;background:none;border:0;width:100%;padding:0}#video-play>img{width:min(460px,100%);margin:auto;max-height:270px;object-fit:contain}.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;background:#0e2d4ab8;color:white;display:grid;place-items:center;width:54px;height:54px;font-size:20px}#video-frame{aspect-ratio:16/9}#video-frame iframe{width:100%;height:100%;border:0}.article-link{font-size:12px;display:inline-block;margin:20px 0 18px;border-bottom:1px solid #b3e6ff;padding-bottom:4px}.principle-text{font-size:15px;line-height:1.85}.principle-text p{margin:15px 0 28px}.principle-text strong{font-weight:700}.service{position:relative;overflow:hidden;height:530px}.service>.backdrop{object-position:center 65%}.service-shade{position:absolute;inset:0;background:linear-gradient(#0c244521,#0c24454a)}.service-inner{position:relative;width:min(981px,94%);height:100%;margin:auto}.service-person{position:absolute;left:3%;bottom:35px;height:465px;width:auto;z-index:2}.service-map{position:absolute;left:39%;bottom:42px;height:455px;width:330px}.service-map>img{height:100%;width:100%;object-fit:contain}.service-map .map-pins{position:absolute;inset:0}.service-message{position:absolute;z-index:3;bottom:0;left:10%;right:10%;text-align:center;color:#fff;background:#2aa5d5;font-size:14px;padding:10px 8px;margin:0}.models{background:white}.model-inner{width:min(981px,92%);margin:auto;padding:36px 0 48px}.model-picture{width:min(800px,100%);margin:auto}.model-picture>img{height:500px;width:100%;object-fit:contain}.model-controls{display:flex;justify-content:center;align-items:center;gap:28px;color:#6495a4;font-size:14px;letter-spacing:.12em}.model-controls button{font-size:29px;color:#73b9d5;border:0;background:none}.model-tabs{display:flex;justify-content:center;gap:14px;margin-top:10px}.model-tabs button{border:0;border-bottom:2px solid transparent;color:#999;background:none;font-size:11px;padding:8px 12px}.model-tabs [aria-pressed=true]{border-color:#72b7d2;color:#478ead}.spec{display:flex;gap:22px;align-items:center;margin-top:28px}.spec h2{font-size:18px;font-weight:400;color:#bd7e8e;white-space:nowrap;margin:0}.spec>img{width:calc(100% - 110px)}footer{padding:22px 20px 14px}.footer-inner{display:flex;align-items:start;gap:20px;width:min(981px,100%);margin:auto}.footer-inner>img{width:150px;height:auto;background:#fff;padding:5px}.footer-inner p{font-size:10px;line-height:1.7;margin:0 0 4px;color:#c9e2ec}.footer-inner .branches{margin-top:12px}footer>small{display:block;text-align:center;font-size:9px;color:#8fb6c8;margin-top:16px}.back-top{position:fixed;right:max(25px,calc((100% - 1100px)/2));bottom:35px;background:#2db2e7;color:#fff;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;z-index:15;font-size:38px;box-shadow:0 2px 4px #1232}.reveal{opacity:1}.js .reveal{opacity:0;transform:translate3d(0,42px,0);transition:opacity 1.1s ease var(--delay,0ms),transform 1.1s cubic-bezier(.16,.65,.25,1) var(--delay,0ms)}.js .reveal:not(.visible){transition:none}.js .reveal.visible{opacity:1;transform:translate3d(0,0,0)}@media(max-width:760px){html{scroll-padding-top:137px}header{min-height:137px;padding:12px 12px 0}.logo{width:160px;margin-bottom:10px}nav{grid-template-columns:repeat(3,1fr);gap:2px}nav>a,nav .dropdown>button{font-size:11px;min-height:27px;padding:5px 2px}nav{padding-bottom:5px}.banner{min-height:0;padding:20px 0 14px}.banner-inner{width:96%}.banner-inner>img{height:auto;aspect-ratio:981/698;object-fit:contain}.banner-controls{height:25px}.feature-inner{padding:30px 0 35px;width:92%}.hangul{font-size:12px}.hanja{font-size:57px}.feature-title p{font-size:14px;letter-spacing:.02em;margin:6px 0 25px}.feature-cards{grid-template-columns:1fr;gap:25px;width:min(400px,100%)}.feature-cards img{width:100%}.principle-inner{padding:38px 0 30px;width:90%}.principle-text{font-size:12px;line-height:1.9}.principle-text br{display:none}.principle-text p{margin:15px 0 24px}.service{height:390px}.service-person{height:310px;left:-9%;bottom:45px}.service-map{left:42%;height:310px;width:55%;bottom:48px}.service-message{left:0;right:0;font-size:11px;padding:12px 6px}.service>.backdrop{object-position:65% center}.model-inner{padding:22px 0 30px}.model-picture>img{height:auto;min-height:210px;object-fit:contain}.model-controls{font-size:12px}.model-tabs{gap:5px}.model-tabs button{font-size:10px}.spec{display:block;margin-top:24px}.spec h2{font-size:15px;margin-bottom:14px}.spec>img{width:100%}.footer-inner{display:block}.footer-inner>img{width:125px;margin:0 auto 15px}.footer-inner p{text-align:center;font-size:9px}.back-top{width:42px;height:42px;right:15px;bottom:20px;font-size:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.particle{animation:none}}
/* Crossfade the three preloaded banners, keeping the backdrop independent. */
.banner-slides{position:relative;width:100%;height:min(620px,60vw)}
.banner-slides>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .8s ease;pointer-events:none}
.banner-slides>img.is-current{opacity:1}
@keyframes float{0%{transform:translate3d(0,0,0) scale(1);opacity:.4}50%{opacity:.65}100%{transform:translate3d(var(--travel-x,60px),var(--travel-y,-150px),0) scale(var(--particle-scale,1.2));opacity:.14}}
@media(max-width:760px){.banner-slides{height:auto;aspect-ratio:981/698}}
@media(prefers-reduced-motion:reduce){.banner-slides>img{transition:none}}
/* Four-times-size, translucent bokeh layer behind the page content. */
.particles-near{opacity:.38;z-index:0}
.particles-near .particle{width:20px;height:20px;filter:blur(5px);box-shadow:0 0 18px #a3e0fa}
.particles-near .particle.medium{width:44px;height:44px;filter:blur(9px)}
.particles-near .particle.large{width:92px;height:92px;filter:blur(16px)}

/* Match the supplied logo's primary sky-blue (#2db2e7). */
nav>a.active,nav>a:hover,nav .dropdown>button:hover{color:#103c55}
/* A viewport-fixed photograph, clipped to the features section only. */
.features{clip-path:inset(0);isolation:isolate}
.features>.backdrop{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;object-fit:cover;object-position:center 35%;z-index:-2;pointer-events:none}
.features>.feature-shade{z-index:-1}
.feature-inner{z-index:1}
/* Keep animated bokeh anchored to the viewport while content scrolls over it. */
.banner,.principle{clip-path:inset(0);isolation:isolate}
.banner>.particles,.principle>.particles{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:0}
/* Reference layout: person at left, tall service map at right. */
.service{height:auto;clip-path:inset(0);isolation:isolate}
.service>.backdrop{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;object-fit:cover;object-position:center 65%;z-index:-2}
.service>.service-shade{z-index:-1}
.service-inner{height:1100px;z-index:1}
.service-person{left:10.5%;top:30px;bottom:auto;height:629px;width:auto}
.service-map{left:34%;top:48px;bottom:auto;width:66%;height:auto;aspect-ratio:741/1040}
.service-map>img{width:100%;height:100%;object-fit:contain}
.service-message{left:8%;right:8%;bottom:10px}
@media(max-width:760px){
  .service-inner{height:calc(118.7vw + 565px)}
  .service-map{left:5%;top:30px;width:90%;height:auto;bottom:auto}
  .service-person{left:3%;top:auto;bottom:75px;height:440px;max-width:90%;object-fit:contain}
  .service-message{left:0;right:0;bottom:10px;font-size:11px}
}

/* City and map share one stationary composite plane. */
.service-background{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:-2;pointer-events:none}
.service-background>.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 65%}
.service-background>.service-map{position:absolute;left:calc(50% - 157px);top:50%;bottom:auto;width:647px;max-width:none;height:auto;aspect-ratio:741/1040;transform:translateY(-50%)}
.service-inner{height:660px}
.service-person{top:20px;bottom:auto}
/* Original-product imagery on staggered quarter-turn cubes. */
.model-picture{position:relative;aspect-ratio:938/605;overflow:hidden}
.model-picture>#model-image{width:100%;height:100%;object-fit:fill}
.cube-layer{position:absolute;inset:0;perspective:1400px;pointer-events:none;z-index:2}
.cube-piece{position:absolute;perspective:inherit;transform-style:preserve-3d}
.cube-rotor{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform:translateZ(calc(-1 * var(--half)));transition:transform 1s cubic-bezier(.45,.05,.25,1) var(--cube-delay)}
.cube-face{position:absolute;inset:0;backface-visibility:hidden;background-repeat:no-repeat;background-color:#fff}
.cube-face.front{transform:translateZ(var(--half))}
.cube-piece.vertical .cube-face.next{transform:rotateY(90deg) translateZ(var(--half))}
.cube-piece.horizontal .cube-face.next{transform:rotateX(-90deg) translateZ(var(--half))}
.cube-layer.turning .vertical .cube-rotor{transform:translateZ(calc(-1 * var(--half))) rotateY(-90deg)}
.cube-layer.turning .horizontal .cube-rotor{transform:translateZ(calc(-1 * var(--half))) rotateX(90deg)}
.model-controls .model-pause{font-size:14px;letter-spacing:0}
@media(max-width:760px){
 .service-inner{height:580px}
 .service-background>.service-map{left:20%;top:48%;width:80vw;max-width:500px}
 .service-person{left:1%;top:auto;bottom:65px;height:400px;max-width:80%}
 .model-picture>#model-image{min-height:0}
 .cube-layer{perspective:850px}
}
@media(prefers-reduced-motion:reduce){.cube-rotor{transition:none}}

/* One viewport-anchored bokeh backdrop, with fine diagonal hatching. */
.blue-section{background:transparent;clip-path:inset(0);isolation:isolate}
.blue-section::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(ellipse at 55% 35%,#258fbb 0%,#176b91 45%,#103c55 100%)}
.blue-section>.particles{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:-2}
.blue-section::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(0,0,0,.10) 0 1px,rgba(255,255,255,.025) 1px 3px)}
.spec{display:block}.spec>img{width:100%}
/* The footer darkens the backdrop only; logo and lettering stay opaque. */
footer.blue-section{padding:31px 20px 70px;min-height:220px}
footer.blue-section::after{background:linear-gradient(rgba(0,12,25,.35),rgba(0,12,25,.35)),repeating-linear-gradient(135deg,rgba(0,0,0,.10) 0 1px,rgba(255,255,255,.025) 1px 3px)}
.footer-inner{position:relative;z-index:1;display:grid;grid-template-columns:240px minmax(0,577px);column-gap:20px;row-gap:16px;width:min(837px,100%);align-items:center}
.footer-inner>img{width:240px;height:auto;background:transparent;padding:0}
.footer-inner p{font-size:14px;font-weight:700;line-height:1.65;margin:0;color:#fff}
.footer-inner>div p:nth-child(3){font-size:15px}
.footer-inner .branches{grid-column:1/-1;font-size:12px;line-height:1.7;font-weight:700;color:#31b2e6;letter-spacing:2.5px;text-align:center;margin:0}
@media(max-width:760px){
 footer.blue-section{padding:28px 20px 36px}
 .footer-inner{display:flex;flex-direction:column;gap:18px}
 .footer-inner>img{width:200px;margin:0}
 .footer-inner p{font-size:11px;text-align:center;line-height:1.9}
 .footer-inner>div p:nth-child(3){font-size:12px}
 .footer-inner .branches{font-size:11px;letter-spacing:1.8px;line-height:2.3}
}

/* The original navigation scrolls away; its shadow gives the white panel depth. */
html{scroll-padding-top:0}
header{position:relative;top:auto;box-shadow:0 5px 8px rgba(0,13,28,.28),0 12px 22px rgba(0,13,28,.16)}
/* A centered, tall chevron independent of font metrics. */
.back-top{width:62px;height:62px;font-size:0}
.back-top svg{width:32px;height:32px;display:block;transform:translateY(-1px);overflow:visible}
.back-top path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square;stroke-linejoin:miter}
/* Equal-width, evenly spaced dark diagonal bars across every bokeh section. */
.blue-section::after{background:repeating-linear-gradient(135deg,rgba(0,7,18,.38) 0 2px,transparent 2px 4px)}
footer.blue-section::after{background:linear-gradient(rgba(0,12,25,.35),rgba(0,12,25,.35)),repeating-linear-gradient(135deg,rgba(0,7,18,.38) 0 2px,transparent 2px 4px)}
@media(max-width:760px){html{scroll-padding-top:0}.back-top{width:48px;height:48px}.back-top svg{width:28px;height:28px}}

/* Custom posters stay visible until the visitor chooses inline playback. */
.video-row{width:100%;display:grid;grid-template-columns:551fr 430fr;gap:0;align-items:center}
.video-shell{position:relative;min-width:0}
.video-poster,#video-play.video-poster{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:0;overflow:hidden;border-radius:10px;background:#071e2d;cursor:pointer}
.video-poster>img,#video-play.video-poster>img{width:100%;height:100%;max-height:none;object-fit:cover;margin:0}
.video-play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#06283ed9;box-shadow:0 2px 16px #0005;transition:background .2s,scale .2s}
.video-play-mark svg{width:42px;height:42px;fill:#fff}
.video-poster:hover .video-play-mark,.video-poster:focus-visible .video-play-mark{background:#139edce8;scale:1.08}
.inline-video-frame{width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.inline-video-frame iframe{display:block;width:100%;height:100%;border:0}
.interview-brand{display:block;width:100%}.interview-brand img{width:100%;height:auto}
.video-local-note{background:#fff;color:#14344a;font-size:13px;line-height:1.6;padding:12px;margin:10px 0 0;border-radius:6px}
@media(max-width:760px){.video-row{grid-template-columns:1fr;gap:18px}.interview-brand{width:78%;max-width:360px;margin:auto}.video-play-mark{width:60px;height:60px}}
@media(prefers-reduced-motion:reduce){.video-play-mark{transition:none}}

/* Reference desktop header: 286x70 logo, menu at y=99, 10px beneath it. */
header{padding:11px 20px 0;min-height:142px}
.logo{width:286px;margin:0 auto 18px}
.logo img{width:286px;height:70px;object-fit:contain}
nav{gap:0;padding-bottom:8px}
nav>a{min-height:33px;padding:0 5px;font-size:16px}
nav>a.active{color:#fff}
nav>a:hover,nav>a.active:hover{color:#103c55}
/* Use the original title artwork and its scale-down drop-in effect. */
.feature-inner{padding:30px 0 48px}
.feature-title h1,.feature-title h2{width:min(600px,100%);margin:0 auto}
.feature-title h1 img{width:100%;height:194px;object-fit:fill}
.feature-title>.feature-subtitle{width:min(600px,100%);height:47px;object-fit:fill;margin:18px auto 22px}
.feature-cards{width:min(837px,100%);grid-template-columns:432fr 405fr;gap:0}
.feature-cards img{width:100%;height:480px;object-fit:fill}
.js .reveal.original-drop{opacity:0;transform:scale(2);transition:none}
.js .reveal.original-drop.visible{opacity:1;transform:scale(1);transition:none;animation:title-drop 1.5s cubic-bezier(.175,.885,.32,1.275),title-fade 1.2s cubic-bezier(.25,.46,.45,.94)}
.js .feature-subtitle.reveal{transform:none;transition:opacity 1.2s cubic-bezier(.445,.05,.55,.95)}
@keyframes title-drop{from{transform:scale(2)}to{transform:scale(1)}}
@keyframes title-fade{from{opacity:0}to{opacity:1}}
/* Original body copy is 23px bold, with 30px emphasized phrases. */
.principle-inner{padding:32px 0 41px}
.principle-text{max-width:900px;margin:76px auto 0;font-size:23px;line-height:1.7;font-weight:700}
.principle-text p{margin:0}.principle-text p+p{margin-top:39px}
.principle-text strong{font-size:30px;font-weight:700}
/* Repeat one identical vector tile, avoiding bands from a long gradient raster. */
.blue-section::after{background-color:rgba(0,7,18,.08);background-image:url('assets/bokeh-stripes.svg');background-size:8px 8px;background-repeat:repeat}
footer.blue-section::after{background-color:rgba(0,7,18,.08);background-image:linear-gradient(rgba(0,12,25,.35),rgba(0,12,25,.35)),url('assets/bokeh-stripes.svg');background-size:100% 100%,8px 8px;background-repeat:no-repeat,repeat}
.native-video{display:block;width:100%;height:100%;background:#000;object-fit:contain}
@media(max-width:760px){
 header{padding:10px 12px 0;min-height:0}
 .logo{width:220px;margin-bottom:12px}.logo img{width:220px;height:54px}
 nav{gap:2px;padding-bottom:8px}nav>a{font-size:11px;min-height:29px;padding:5px 2px}
 .feature-inner{padding:30px 0 35px}
 .feature-title h1 img,.feature-title>.feature-subtitle{height:auto}
 .feature-title>.feature-subtitle{margin:12px auto 22px}
 .feature-cards{width:min(400px,100%);grid-template-columns:1fr;gap:25px}
 .feature-cards img{height:auto;object-fit:contain}
 .principle-text{font-size:16px;line-height:1.85;margin-top:32px}
 .principle-text strong{font-size:19px}.principle-text p+p{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){.js .reveal.original-drop,.js .reveal.original-drop.visible{opacity:1;transform:none;animation:none;transition:none}}

.principle-text p:first-child strong:first-of-type{font-size:inherit}

@media(min-width:761px){.principle-text,.principle-text strong{line-height:39.1px}}

/* Feature tables enter from opposite sides when scrolled into view. */
.features{overflow:hidden}
.js .feature-cards>.feature-slide-left{transform:translate3d(-180px,0,0)}
.js .feature-cards>.feature-slide-right{transform:translate3d(180px,0,0)}
.js .feature-cards>.reveal{transition:opacity 1.2s ease var(--delay,0ms),transform 1.2s cubic-bezier(.22,.61,.36,1) var(--delay,0ms)}
.js .feature-cards>.reveal:not(.visible){transition:none}
.js .feature-cards>.reveal.visible{opacity:1;transform:translate3d(0,0,0)}
@media(max-width:600px){.js .feature-cards>.feature-slide-left{transform:translate3d(-70px,0,0)}.js .feature-cards>.feature-slide-right{transform:translate3d(70px,0,0)}.js .feature-cards>.reveal.visible{transform:none}}
@media(prefers-reduced-motion:reduce){.js .feature-cards>.reveal,.js .feature-cards>.reveal.visible{opacity:1;transform:none;transition:none}}

/* Both feature tables share one scroll trigger and start without a delay. */
.js .feature-cards>.reveal{transition-delay:0s}
/* Original desktop: the 513px brand overlaps the 551px player by 80px. */
@media(min-width:761px){.interview-brand{position:relative;z-index:2;width:calc(100% + 80px);margin-left:-80px}}
/* Body copy fades in at its final position. */
.js .principle-text>.reveal{transform:none;transition:opacity 1.4s cubic-bezier(.25,.46,.45,.94) var(--delay,0ms)}
.js .principle-text>.reveal:not(.visible){opacity:0;transition:none}
.js .principle-text>.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .principle-text>.reveal,.js .principle-text>.reveal:not(.visible){opacity:1;transition:none}}

/* Original copy uses 6px blur-in over 2s alongside a 1.4s fade. */
.js .principle-text.reveal{opacity:0;filter:blur(6px);transform:none;transition:opacity 1.4s cubic-bezier(.47,0,.745,.715),filter 2s linear}
.js .principle-text.reveal:not(.visible){transition:none}
.js .principle-text.reveal.visible{opacity:1;filter:blur(0);transform:none}
/* Elliptical underside creates a bowed, floating-screen shadow. */
.video-shell{isolation:isolate}
.video-shell::after{content:"";position:absolute;z-index:-1;pointer-events:none;left:4%;right:4%;bottom:-22px;height:40px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,8,19,.72) 0%,rgba(0,8,19,.38) 44%,transparent 73%);filter:blur(7px)}
.video-poster,#video-play.video-poster,.video-shell>.inline-video-frame{box-shadow:0 3px 5px #000c1a33}
@media(max-width:760px){.video-shell::after{bottom:-17px;height:30px;filter:blur(6px)}}
@media(prefers-reduced-motion:reduce){.js .principle-text.reveal,.js .principle-text.reveal:not(.visible),.js .principle-text.reveal.visible{opacity:1;filter:none;transform:none;transition:none}}

@font-face{font-family:ServiceNanum;src:url('assets/fonts/NanumGothic-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* Keep the player present; reveal only its adjacent brand from left to right. */
.js .interview-brand.reveal{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 2s cubic-bezier(.645,.045,.355,1)}
.js .interview-brand.reveal:not(.visible){transition:none}
.js .interview-brand.reveal.visible{opacity:1;transform:none;clip-path:inset(0)}
@media(min-width:761px){
 .service-inner{width:980px;max-width:94%;height:652.333px}
 .service-person{left:103px;top:27px;bottom:auto;width:390px;height:629px;max-width:none;object-fit:fill}
 .service-message{top:559px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:657px;max-width:100%;height:69.333px}
}
.service-message{padding:0;margin:0;background:#31b2e6;color:#fff;font-family:ServiceNanum,'Malgun Gothic',sans-serif;font-size:23px;font-weight:700;line-height:1.5;cursor:default;outline-offset:4px}
.service-message>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 12px 14px}
.service-message-hover{visibility:hidden}
.service-message:is(:hover,:focus-visible,.is-active){background:#c71212;box-shadow:0 0 0 3px #fff}
.service-message:is(:hover,:focus-visible,.is-active)>.service-message-default{visibility:hidden}
.service-message:is(:hover,:focus-visible,.is-active)>.service-message-hover{visibility:visible}
.service-message-hover::after{content:"";position:absolute;left:calc(50% - min(277.5px,42%));right:calc(50% - min(277.5px,42%));bottom:13px;border-bottom:1px solid white}
@media(max-width:760px){.service-message{height:64px;font-size:clamp(13px,3.25vw,20px);left:0;right:0;bottom:10px}.service-message>span{padding:8px 8px 12px}.service-message-hover::after{bottom:10px}}
@media(prefers-reduced-motion:reduce){.js .interview-brand.reveal,.js .interview-brand.reveal:not(.visible){opacity:1;clip-path:none;transform:none;transition:none}}
/* Observe the unclipped slot so the clipped artwork can enter reliably. */
.interview-brand-slot{min-width:0;width:100%}
.js .interview-brand-slot.reveal,.js .interview-brand-slot.reveal.visible{opacity:1;transform:none;transition:none}
.js .interview-brand-slot>.interview-brand{clip-path:inset(0 100% 0 0);transition:clip-path 2s cubic-bezier(.645,.045,.355,1)}
.js .interview-brand-slot:not(.visible)>.interview-brand{transition:none}
.js .interview-brand-slot.visible>.interview-brand{clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){.js .interview-brand-slot>.interview-brand{clip-path:none;transition:none}}
/* Blue upper strip, taller clipped city/map, and a white lower label strip. */
.service{background:#fff}
.service-top-band{position:absolute;inset:0 0 auto;height:79px;pointer-events:none}
.service-city-window{position:absolute;inset:79px 0 auto;height:600px;clip-path:inset(0);isolation:isolate;pointer-events:none}
.service-city-window>.service-shade{position:absolute;inset:0;z-index:-1}
.service-message,.service-message:is(:hover,:focus-visible,.is-active){border:0;box-shadow:none}
.service-message>span{padding:0;align-items:center;justify-content:center}
.service-message-hover::after{display:none}
@media(min-width:761px){
 .service-inner{height:797.333px}
 .service-person{top:27px;bottom:auto;width:390px;height:629px}
 .service-message{top:704px;bottom:auto;height:69.333px}
}
@media(max-width:760px){
 .service-top-band{height:54px}
 .service-city-window{top:54px;height:480px}
 .service-inner{height:650px}
 .service-person{top:16px;bottom:auto;height:440px;width:auto;max-width:80%;left:1%;object-fit:contain}
 .service-message{top:565px;bottom:auto;height:64px}
}

/* Original gallery is 980 x 693; align the artwork to its lower boundary. */
.banner{min-height:0;padding:0;align-items:flex-end}
.banner-inner{width:min(980px,100%);margin:0 auto}
.banner-slides{height:auto;aspect-ratio:980/693}
.banner-slides>img{object-fit:contain;object-position:center bottom}
/* Reduce cyan and bring the water backdrop closer to the original blue. */
.blue-section::before{background:radial-gradient(ellipse at 55% 35%,#357fb7 0%,#235f98 45%,#173d68 100%)}
/* Keep the head at its current height; the larger figure overlaps the label slightly. */
@media(min-width:761px){.service-person{top:27px;left:90px;width:430px;height:693px}}
@media(max-width:760px){.banner-inner{width:100%}.banner-slides{height:auto;aspect-ratio:980/693}}

/* Account for the source PNG's transparent foot margin. */
@media(min-width:761px){.service-person{top:25px;left:86px;width:441px;height:711px;z-index:4}}

/* Bright map and a vivid skyline, with a dark halo around the land silhouette. */
.service-city-window>.service-shade{background:none}
.service-background>.backdrop{filter:saturate(1.32) contrast(1.12) brightness(1.06)}
.service-map>img:first-child{filter:drop-shadow(0 0 6px rgba(0,10,30,.78)) drop-shadow(0 5px 9px rgba(0,10,30,.50))}
/* The visible shoes extend below the label, accounting for transparent margins. */
@media(min-width:761px){.service-person{top:23px;left:72px;width:484px;height:781px;z-index:4}}

/* Each incoming hero image rises from below; the outgoing one leaves upward. */
.banner-slides{overflow:hidden}
.banner-slides>img{opacity:0;transform:translate3d(0,100%,0);transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .15s ease;z-index:0}
.banner-slides>img.is-current{opacity:1;transform:translate3d(0,0,0);z-index:2}
.banner-slides>img.is-leaving{opacity:1;transform:translate3d(0,-100%,0);z-index:1}
/* Soft background-color change and cross-fade for mouse, keyboard and touch. */
.service-message{transition:background-color .45s ease}
.service-message>span{transition:opacity .4s ease,visibility 0s linear .4s}
.service-message>.service-message-default{opacity:1;visibility:visible;transition-delay:0s,0s}
.service-message>.service-message-hover{opacity:0;visibility:hidden}
.service-message:is(:hover,:focus-visible,.is-active)>.service-message-default{opacity:0;visibility:hidden;transition-delay:0s,.4s}
.service-message:is(:hover,:focus-visible,.is-active)>.service-message-hover{opacity:1;visibility:visible;transition-delay:0s,0s}
@media(prefers-reduced-motion:reduce){.banner-slides>img{transform:none;transition:none}.banner-slides>img.is-leaving{opacity:0;transform:none}.service-message,.service-message>span{transition:none;transition-delay:0s}}

.banner-slides>img:not(.is-current):not(.is-leaving){transition:none}

/* Invert the back-to-top colors on hover and keyboard focus. */
.back-top{transition:background-color .25s ease,color .25s ease}
.back-top:is(:hover,:focus-visible){background:#fff;color:#62b4e4}
.site-header-slot{position:relative;width:100%}
header.is-hover-floating{position:fixed;inset:0 0 auto;top:0;width:100%;z-index:45;transform:translateY(calc(-100% - 28px));pointer-events:none;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
header.is-hover-floating.is-peeking{transform:translateY(0);pointer-events:auto}
.header-hover-trigger{position:fixed;top:0;left:0;width:100%;height:12px;z-index:44;padding:0;border:0;background:transparent;cursor:pointer}
.header-hover-trigger::after{content:"";position:absolute;top:0;left:calc(50% - 40px);width:80px;height:3px;border-radius:0 0 3px 3px;background:#62b4e48c}
.header-hover-trigger>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.header-hover-trigger:focus-visible{height:30px;background:#fff;color:#24658d;outline:2px solid #62b4e4;outline-offset:-2px}
.header-hover-trigger:focus-visible>span{position:static;width:auto;height:auto;clip-path:none;font-size:12px}
@media(prefers-reduced-motion:reduce){header.is-hover-floating,.back-top{transition:none}}

/* Lower the shoes clear of the first word while keeping the whole figure visible. */
@media(min-width:761px){.service-person{top:45px}.service-inner{height:819.333px}}

/* Never animate the switch from the original header to its hidden hover state. */
header.is-hover-floating:not(.is-hover-ready){transition:none}

/* Accessible previous/next controls stay above every cube slice. */
.model-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;display:grid;place-items:center;padding:8px;border:1px solid #9bd5ef;border-radius:50%;background:#fffffff0;color:#459fcb;box-shadow:0 2px 9px #173d6826;cursor:pointer;transition:background-color .2s,color .2s}
.model-arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.model-previous.model-arrow{left:10px}.model-next.model-arrow{right:10px}
.model-arrow:hover{background:#62b4e4;color:#fff}
.model-arrow:focus-visible{outline:3px solid #216392;outline-offset:3px}
@media(max-width:600px){.model-arrow{width:40px;height:40px;padding:6px}.model-arrow svg{width:24px;height:24px}.model-previous.model-arrow{left:5px}.model-next.model-arrow{right:5px}}
@media(prefers-reduced-motion:reduce){.model-arrow{transition:none}}

/* Reserve side rails outside the image so navigation never covers the product. */
.model-carousel{position:relative;width:min(912px,100%);margin-inline:auto}
.model-carousel>.model-picture{width:calc(100% - 112px);margin-inline:auto}
.model-carousel>.model-previous.model-arrow{left:0}
.model-carousel>.model-next.model-arrow{right:0}
@media(max-width:600px){.model-carousel>.model-picture{width:calc(100% - 88px)}}

/* Rotation axis is independent of whether the image is cut into rows or columns. */
.cube-piece.rotate-x .cube-face.next{transform:rotateX(-90deg) translateZ(var(--half))}
.cube-piece.rotate-y .cube-face.next{transform:rotateY(90deg) translateZ(var(--half))}
.cube-layer.turning .rotate-x .cube-rotor{transform:translateZ(calc(-1 * var(--half))) rotateX(90deg)}
.cube-layer.turning .rotate-y .cube-rotor{transform:translateZ(calc(-1 * var(--half))) rotateY(-90deg)}

/* Vertical columns turn downward; horizontal rows turn left/right. */
.cube-piece.rotate-x-down .cube-face.next{transform:rotateX(90deg) translateZ(var(--half))}
.cube-layer.turning .rotate-x-down .cube-rotor{transform:translateZ(calc(-1 * var(--half))) rotateX(-90deg)}

/* Only the selected page gets a rectangular menu background. Hover changes text. */
header nav>a:not(.active):not([aria-current="page"]):hover,header nav .dropdown>button:hover{background:transparent;color:#f28c28}
header nav>a.active,header nav>a[aria-current="page"]{background:#62b4e4;color:#fff}
header nav>a.active:hover,header nav>a[aria-current="page"]:hover{background:#62b4e4;color:#f28c28}

/* Mobile: put the interview brand first and let the shoes overlap the white strip. */
@media(max-width:760px){
 .video-row>.interview-brand-slot{order:-1}
 .service-city-window{height:376px}
 .service-inner{height:546px}
 .service-person{top:16px;left:1%;width:270px;height:440px;max-width:none;object-fit:contain}
 .service-message{top:461px}
}

/* Compact header shared by all six pages. The logo sits beside the right menu button. */
.header-menu-toggle{display:none}
@media(max-width:960px){
 html.header-menu-js header{min-height:82px;padding:14px 16px 12px}
 html.header-menu-js header>.logo{width:200px;max-width:calc(100% - 64px);margin:0 auto 0 0}
 html.header-menu-js header>.logo img{width:100%;height:auto}
 .header-menu-toggle{position:absolute;right:16px;top:19px;width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;border-radius:5px;padding:8px;background:transparent;color:#62b4e4;cursor:pointer}
 .header-menu-toggle>span{display:block;width:26px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
 .header-menu-toggle:hover{color:#103c55}
 .header-menu-toggle:focus-visible{outline:2px solid #62b4e4;outline-offset:2px}
 html.header-menu-js header>nav{display:none;width:100%;padding:14px 0 0;margin:12px 0 0;border-top:1px solid #e1edf3;grid-template-columns:1fr;gap:4px}
 html.header-menu-js header.menu-is-open>nav{display:grid}
 html.header-menu-js header>nav>a{justify-content:flex-end;padding:12px 14px;font-size:15px;min-height:44px}
 .menu-is-open .header-menu-toggle>span:nth-child(1){transform:translateY(8px) rotate(45deg)}
 .menu-is-open .header-menu-toggle>span:nth-child(2){opacity:0}
 .menu-is-open .header-menu-toggle>span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){.header-menu-toggle>span{transition:none}}

/* The compact menu overlays the page without changing header or slot height. */
@media(max-width:960px){
 html.header-menu-js header>nav{position:absolute;top:100%;left:0;right:0;width:100%;margin:0;padding:10px 16px 14px;background:#fff;box-shadow:0 12px 18px rgba(0,13,28,.22);max-height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain}
}
/* Animate the overlaid compact menu in both directions without moving the page. */
@media(max-width:960px){
 html.header-menu-js header>nav{display:grid;visibility:hidden;opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0);transform:translateY(-8px);transition:clip-path .34s cubic-bezier(.22,.61,.36,1),transform .34s cubic-bezier(.22,.61,.36,1),opacity .24s ease,visibility 0s linear .34s}
 html.header-menu-js header.menu-is-open>nav{visibility:visible;opacity:1;pointer-events:auto;clip-path:inset(0);transform:translateY(0);transition-delay:0s}
}
@media(prefers-reduced-motion:reduce){html.header-menu-js header>nav{transition:none;transform:none}}

/* Keep only the footer logo aligned left in the stacked mobile footer. */
@media(max-width:760px){footer .footer-inner>img{align-self:flex-start;margin-left:0;margin-right:auto}}
/* Align footer copy with its left-aligned logo across all pages and widths. */
footer .footer-inner p,footer .footer-inner .branches{text-align:left}
@media(max-width:760px){footer .footer-inner>div{width:100%;align-self:stretch}footer .footer-inner .branches{width:100%;align-self:stretch}}

/* Equal-sized clipped panels move edge-to-edge, so transparent PNGs never overlap. */
.banner-slides{aspect-ratio:1;height:auto}
.banner-slide-panel{position:absolute;inset:0;overflow:hidden;visibility:hidden;transform:translate3d(0,100%,0);transition:none}
.banner-slide-panel.is-current{visibility:visible;transform:translate3d(0,0,0);transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.banner-slide-panel.is-leaving{visibility:visible;transform:translate3d(0,-100%,0);transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.banner-slide-panel>img{position:absolute;height:auto;max-width:none;opacity:1;transform:none;object-fit:fill;pointer-events:none}
.banner-slide-panel>img[src$="banner-m02l2-original.png"]{width:143.560976%;left:-21.707317%;top:1.926829%;}
.banner-slide-panel>img[src$="m01l.png"]{width:126.671449%;left:-13.335725%;top:4.806313%;}
.banner-slide-panel>img[src$="m03l.png"]{width:133.368580%;left:-17.024169%;top:0.105740%;}
@media(prefers-reduced-motion:reduce){.banner-slide-panel,.banner-slide-panel.is-current,.banner-slide-panel.is-leaving{transition:none}.banner-slide-panel.is-leaving{visibility:hidden}}

/* Center the purple title panel (x=11..311 of the 375px artwork), excluding its ribbon. */
.interview-brand img{position:relative;left:7.066667%}

/* A descriptive accessible page heading; the existing visual design stays intact. */
.seo-page-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* A larger synchronized view of each page's background, clipped to its footer. */
footer.footer-lens{position:relative;isolation:isolate;clip-path:inset(0);background:transparent}
footer.footer-lens::before{display:none}
footer.footer-lens::after{position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.62);pointer-events:none}
.footer-background-lens{position:absolute;inset:0;z-index:-2;pointer-events:none}
.footer-background-lens>img,.footer-background-lens>video{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;object-fit:cover;object-position:center;transform:scale(1.15);transform-origin:50% 50%}
.footer-background-lens>video{opacity:0}
.footer-background-lens>video.ready{opacity:1}
@media(prefers-reduced-motion:reduce){.footer-background-lens>video.ready{opacity:0}}

/* The same viewport-anchored hatching over the existing enlarged footer video. */
.company-page footer.footer-lens::after,.inquiry-page footer.footer-lens::after{position:fixed;inset:0;background-image:url('assets/bokeh-stripes.svg');background-size:8px 8px;background-repeat:repeat}

/* Match the dispenser footer's extra darkening while retaining the lens and hatching. */
.company-page footer.footer-lens::after{background-color:rgba(0,0,0,.60)}
.inquiry-page footer.footer-lens::after{background-color:rgba(0,0,0,.58)}