:root{--blue:#002b7d;--sky:#5bc2e7;--yellow:#fff26e;--orange:#ffa500;color:var(--blue);font-family:Paperozi,Paperlogy,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:16px;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding:0}body{margin:0;background:var(--sky)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{cursor:wait;opacity:.65}a{color:inherit}img{max-width:100%;object-fit:contain;vertical-align:middle}h1,h2,h3,p{margin:0}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #f77d00;outline-offset:5px}[hidden]{display:none!important}.sr-only,caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link{position:fixed;top:-100px;left:20px;background:white;padding:15px;z-index:99}.skip-link:focus{top:15px}.page{min-height:100svh;scroll-snap-align:start}.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:max(640px,100svh)}.hero-background{position:absolute;inset:0;z-index:-3;background:url('assets/0908/4040-2586-imgImage47.webp') center top/cover no-repeat;transform:translateY(var(--hero-offset,0px)) scale(1.04)}.hero:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,var(--sky));z-index:-2}.hero-clouds{position:absolute;inset:0;background:url('assets/0908/4040-2586-imgImage54.webp') center/100% 100% no-repeat;z-index:-1;pointer-events:none}.hero-content{text-align:center;width:min(70%,1100px);padding:20px 0 70px}.hero h1{width:min(100%,800px);margin:0 auto -2%}.hero h1 img{width:100%;height:auto}.hero-copy{position:relative;background:#ffffffed;border:2px solid #59c7ff;border-radius:100px;padding:18px 28px;box-shadow:0 0 18px #61d5ff;font-size:clamp(16px,1.6vw,30px);line-height:1.55}.hero-copy p{font-size:.82em}.hero-copy strong{font-weight:700}.scroll-cue{display:flex;align-items:center;flex-direction:column;gap:10px;width:48px;margin:40px auto 0;text-decoration:none}.scroll-cue span{display:block;border:2px solid #3079a2;border-radius:20px;width:20px;height:34px;position:relative}.scroll-cue span:after{content:'';position:absolute;width:3px;height:8px;background:#3079a2;left:7px;top:6px;animation:scroll 1.8s infinite}.scroll-cue img{width:16px;height:8px}.mobile-break{display:none}.questions{position:relative;isolation:isolate}.fixed-scenery{position:sticky;top:0;height:100svh;margin-bottom:-100svh;background:var(--sky);z-index:-1;overflow:hidden;pointer-events:none}.fixed-scenery img{position:absolute;width:37%;top:-10%;opacity:.95}.cloud-left{left:-3%}.cloud-right{right:-3%}.question{display:flex;align-items:center;padding:5vh 0;position:relative}.question-inner{width:min(83.3333%,1600px);margin:auto}.question-bar{position:relative;background:linear-gradient(100deg,#002b7d,#0c62e4);border-radius:20px;min-height:clamp(68px,5.8vw,111px);display:flex;align-items:center;padding:16px 17% 16px 23%;box-shadow:0 14px 22px #00395b25;margin:0 0 clamp(70px,7vw,135px)}.question-bar h2{font-size:clamp(18px,2.08vw,40px);line-height:1.45;letter-spacing:.01em;color:white;font-weight:600;word-break:keep-all}.question-number{position:absolute;left:2%;top:-24%;width:12.5%;height:150%;background:linear-gradient(135deg,#fff,#e6fff9);border-radius:22px 22px 0 22px;display:grid;place-items:center;box-shadow:-7px 4px 10px #1534481a}.question-number img{width:90%;height:80%;object-fit:contain}.question-number:before{content:'';position:absolute;left:-9px;top:0;background:#ffa500;width:15px;height:20px;border-radius:15px 15px 0 0;z-index:-1}.character{position:absolute;right:1%;bottom:-50%;height:220%;width:18%;object-fit:contain;pointer-events:none}.answer-card{position:relative;min-height:clamp(350px,35.4vw,681px);border:clamp(6px,.78vw,15px) solid white;border-radius:clamp(28px,3.12vw,60px);background:#e7f4f7;isolation:isolate;text-align:center;padding:clamp(30px,4.5vw,86px) clamp(22px,3.5vw,68px) 30px;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,2.2vw,42px)}.answer-card:before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(#b9edf46b,#e9f3f4ed),url('assets/backgrounds/green-energy-city.jpg') center 35%/cover;filter:blur(3px);opacity:.65}.answer-label{position:absolute;left:50%;top:0;transform:translate(-50%,-100%);height:clamp(37px,3.4vw,65px);display:flex;align-items:center;gap:12px;background:white;padding:0 25px;border-radius:24px 24px 0 0;white-space:nowrap;font-size:clamp(20px,2.25vw,43px);font-weight:700;color:var(--blue)}.answer-label img{width:clamp(55px,6.7vw,130px);height:150%;align-self:flex-end}.lead{font-size:clamp(21px,2.08vw,40px);line-height:1.65;word-break:keep-all}.lead mark{background:var(--yellow);color:var(--blue);border-radius:24px;padding:2px 10px;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:700}.description{font-size:clamp(16px,1.3vw,25px);line-height:1.7;word-break:keep-all}.footnote{font-size:clamp(12px,.95vw,18px);line-height:1.6;word-break:keep-all}.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,76px);margin-top:10px}.impact-grid article{display:flex;flex-direction:column;align-items:center;gap:18px}.impact-grid h3{font-size:clamp(14px,1.2vw,23px);background:var(--blue);border-radius:30px;color:var(--yellow);padding:7px 22px}.impact-grid img{width:100%;max-width:235px;aspect-ratio:235/150;height:auto;object-fit:cover;border-radius:16px}.impact-grid p{font-size:clamp(14px,1.15vw,22px);line-height:1.4;word-break:keep-all}.table-scroll{overflow:auto;max-width:100%;border-radius:12px;border:1px solid #cfbd71;background:#fff9df}.table-scroll table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:clamp(14px,1.25vw,24px);text-align:center;min-width:580px}th,td{border:1px solid #dbca9b;padding:10px 6px;font-weight:400}thead th{background:#fff8d9;font-weight:600}thead th:first-child,tbody th{background:var(--blue);color:white}th:nth-child(2),td:nth-child(2){background:#ffe2a3;font-weight:700}td small{display:block;font-size:.7em;padding-top:4px}th small{font-size:.7em}.answer-card--night{color:white;background:#063569}.answer-card--night:before{background:linear-gradient(#00254b70,#003c8ce8),url('assets/0908/2252-2707-imgImage38.webp') center/cover;opacity:1;filter:none}.detail-button{align-self:center;background:var(--blue);color:var(--orange);text-decoration:underline;text-underline-offset:4px;padding:12px 20px;font-size:clamp(14px,1.3vw,24px);border-radius:3px}.detail-button:hover{background:#0755c9;color:white}.closing{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding-top:8vh;overflow:hidden}.closing-copy{position:relative;z-index:1;background:white;border-radius:20px;width:83.333%;margin:0 auto -3%;text-align:center;padding:clamp(24px,3vw,58px) 10%;box-shadow:0 12px 20px #14506f28;font-size:clamp(18px,1.9vw,36px);line-height:1.5}.closing-copy img{position:absolute;right:1%;bottom:-35%;width:15%;max-height:250%;object-fit:contain}.closing-city{display:block;width:100%;height:auto;max-height:85svh;object-fit:cover;object-position:center 60%;mask-image:linear-gradient(transparent,#000 18%)}.entry{position:relative;z-index:2;background:#ffff51;border-radius:50px 50px 0 0;padding:36px 4%;display:grid;grid-template-columns:37% 63%;align-items:center;min-height:350px;scroll-snap-align:start}.entry h2{width:90%;margin:auto}.entry h2 img{width:100%;height:auto}.entry-card{position:relative;background:#fff8a4;border-radius:28px;padding:28px 24px;box-shadow:0 7px 12px #6d680333}.entry-q{position:absolute;left:5%;top:-10px;background:#fffef1;border-radius:16px 16px 0 16px;padding:12px}.entry-q img{width:50px;height:45px}.entry-tagline{text-align:center;font-size:14px;font-weight:700;margin:0 0 24px;padding-left:50px}.quiz-question{background:#fff26e;border-radius:8px;min-height:100px;display:grid;place-items:center;text-align:center;font-size:clamp(19px,2vw,32px);padding:15px;margin-bottom:14px}.primary,.secondary{min-height:48px;border-radius:6px;padding:12px 20px;font-size:clamp(17px,1.5vw,28px);font-weight:700}.primary{background:#ffa500;color:var(--blue);width:100%}.primary:hover{background:#ffb829}.secondary{background:var(--blue);color:var(--yellow)}.answer-field{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;padding:15px 0}.answer-field input{flex:1;min-width:0;border:0;border-bottom:1px solid #567398;background:transparent;padding:10px;color:var(--blue)}.entry-details{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:15px 0}.consent{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.consent input{width:20px;height:20px;accent-color:var(--blue)}.phone{display:flex;flex:1;gap:8px;align-items:center;background:#fffeed;border:1px solid #e5cb8a;border-radius:6px;padding:8px 12px;min-width:210px}.phone span{white-space:nowrap}.phone input{min-width:0;width:100%;border:0;background:none;padding:4px;color:var(--blue)}.form-actions{display:grid;grid-template-columns:1fr 2fr;gap:12px}.page-nav{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:9px}.page-nav a{display:grid;place-items:center;width:28px;height:28px;text-decoration:none;background:#ffffffbc;border-radius:50%;font-size:12px;font-weight:700}.page-nav a[aria-current]{background:var(--blue);color:white}.detail-dialog{border:0;background:transparent;padding:12px;width:min(960px,94vw);max-height:92svh;overflow:auto;color:var(--blue)}dialog::backdrop{background:rgb(0 0 0/.7)}body:has(dialog[open]){overflow:hidden}.modal-card{background:white;border:5px solid #ffa500;border-radius:28px;padding:30px;box-shadow:0 8px 15px #0003}.modal-card h2{text-align:center;font-size:24px;margin-bottom:24px}.modal-card .footnote{margin-top:16px;text-align:center;font-size:13px}.modal-close{display:block;margin:20px auto 0;background:white;border-radius:30px;color:var(--blue);padding:12px 48px;min-height:48px}.price-table th,.price-table td{font-size:18px}.price-table td:nth-child(2){background:inherit;font-weight:400}.price-table tbody th{background:#ffc25b;color:var(--blue)}.price-table tbody tr:last-child{background:#ffdf9c;font-weight:700}.technology-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-radius:12px 12px 0 0;overflow:hidden}.technology-tabs button{background:#fff26e;padding:14px;font-weight:700;color:var(--blue);font-size:20px}.technology-tabs button:nth-child(2){background:#ffae00}.technology-tabs button[aria-selected=true]{background:var(--blue);color:white}.technology-content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:25px;padding:35px 15px;min-height:320px;text-align:center;box-shadow:0 3px 5px #0002;border-radius:0 0 15px 15px}.technology-content img{width:100%;height:260px;object-fit:contain}.technology-content h3{font-size:40px;margin-bottom:15px}.technology-content strong{font-size:18px}.technology-content p{font-size:17px;line-height:1.7;margin-top:20px}.text-panel{grid-template-columns:1fr;padding:50px}.message-dialog{border:0;border-radius:24px;padding:30px;width:min(440px,90vw);text-align:center;color:var(--blue)}.message-dialog h2{font-size:22px}.message-dialog p{padding:24px 0;line-height:1.6}.message-dialog button{font-size:18px}@keyframes scroll{50%{transform:translateY(8px);opacity:.4}}@media(min-width:901px){.question-inner{opacity:.4;transform:translateY(25px);transition:opacity .55s ease,transform .55s ease}.question.is-active .question-inner{opacity:1;transform:none}}@media(min-width:901px) and (max-height:650px){.question{min-height:750px}.hero{min-height:650px}}@media(max-width:900px){html{scroll-snap-type:y proximity}.hero{min-height:100svh}.hero-content{width:87%;padding-bottom:50px}.hero-background{background-size:auto 100%;background-position:center}.hero h1{width:95%;margin:0 auto 5%}.hero-copy{padding:18px 15px;font-size:18px}.hero-copy p{font-size:14px}.question{padding:75px 0 45px;min-height:100svh}.question-inner{width:88%}.question-bar{padding:15px 15% 15px 20%;border-radius:14px;margin-bottom:72px;min-height:82px}.question-bar h2{font-size:19px}.question-number{width:17%;height:100%;top:-12%;border-radius:14px 14px 0 14px}.character{width:21%;height:150%;right:-3%;bottom:-35%}.answer-card{padding:35px 24px;gap:24px;border-width:7px;min-height:400px}.lead{font-size:22px;line-height:1.7}.description{font-size:16px}.impact-grid{gap:20px;grid-template-columns:repeat(2,1fr)}.impact-grid article{gap:12px}.impact-grid img{max-width:220px}.impact-grid p{font-size:14px}.answer-label{font-size:22px;height:38px}.answer-label img{width:65px}.fixed-scenery img{width:60%;top:-3%}.closing{min-height:80svh}.closing-copy{width:88%;padding:24px 14% 24px 20px;font-size:19px;margin-bottom:20px}.closing-copy img{right:-3%;width:23%;bottom:-15%}.closing-copy br{display:none}.closing-city{min-height:55svh;object-fit:cover;object-position:center;mask-image:linear-gradient(transparent,#000 10%)}.entry{grid-template-columns:1fr;border-radius:28px 28px 0 0;padding:10px 6% 35px;gap:10px}.entry h2{width:230px}.entry-card{padding:28px 18px 18px}.page-nav{right:3px;gap:7px}.page-nav a{width:20px;height:20px;font-size:10px}.table-scroll table{min-width:650px;font-size:16px}.table-scroll{background:linear-gradient(to right,#fff9df,#fff9df)}.modal-card{padding:20px;border-width:4px}.technology-content{gap:10px;padding:25px 5px}.technology-content h3{font-size:30px}.technology-content p{font-size:16px}.technology-content img{height:200px}}@media(max-width:480px){.mobile-break{display:block}.hero h1{width:110%;max-width:none;margin-left:-5%;margin-bottom:15px}.hero-copy{font-size:16px}.hero-copy p{font-size:12px;margin-bottom:5px}.question-inner{width:90%}.question-bar{min-height:92px;padding:13px 13% 13px 23%;margin-bottom:65px}.question-bar h2{font-size:16px}.question-number{width:21%;height:77%;top:3%}.character{height:115%;width:21%;bottom:-35%;right:-3%}.answer-card{padding:25px 14px;gap:22px;border-radius:24px}.lead{font-size:19px}.lead br,.description br{display:none}.description{font-size:15px;line-height:1.75}.impact-grid{gap:20px 14px}.impact-grid h3{font-size:13px;padding:6px 15px}.impact-grid p{font-size:13px}.impact-grid p br{display:none}.footnote{font-size:12px}.detail-button{font-size:14px;padding:14px 10px}.page-nav{display:none}.closing-copy{font-size:16px;border-radius:14px}.entry-tagline{font-size:12px;padding-left:48px}.entry-q{padding:10px}.entry-q img{width:35px;height:30px}.quiz-question{font-size:20px}.entry-details{display:grid;gap:12px}.form-actions{gap:8px}.form-actions button{font-size:17px;padding:12px 8px}.answer-field{font-size:16px}.answer-field input{font-size:15px}.technology-content{grid-template-columns:1fr;min-height:350px;padding:20px 10px}.technology-content img{height:160px}.technology-content h3{font-size:28px;margin-bottom:8px}.technology-content p{margin-top:12px;font-size:15px}.technology-tabs button{font-size:16px}.modal-card{padding:14px}.modal-card h2{font-size:20px}.text-panel{padding:40px 12px}.price-table th,.price-table td{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}*,*:before,*:after{animation:none!important;transition:none!important}.hero-background{transform:none}.question-inner{opacity:1;transform:none}}

/* 0908 hero: keep the complete composition inside the first viewport. */
.hero{height:100svh;min-height:0;display:block}
.hero-background{background-size:cover;background-position:center;transform:none}
.hero-content{position:absolute;inset:0;width:100%;padding:0}
.hero h1{position:absolute;left:50%;top:14.45%;width:min(52.82vw,93.89svh);height:54.17%;margin:0;transform:translateX(-50%)}
.hero h1 img{width:100%;height:100%;object-fit:contain}
.hero-copy{position:absolute;left:50%;top:59.8%;width:56.2%;height:11.3%;padding:0 1.5%;transform:translateX(-50%);display:flex;flex-direction:column;justify-content:center;font-size:clamp(14px,min(1.95vw,3.46svh),37px);line-height:1.4;border-radius:100px}
.hero-copy p{font-size:.83em}
.hero-copy strong{font-size:1em;white-space:nowrap}
.hero .scroll-cue{position:absolute;left:50%;top:81.3%;transform:translateX(-50%);margin:0;gap:8px}
.hero-clouds{background-size:100% 100%}
.hero .mobile-break{display:none}
@media(max-aspect-ratio:4/3){
 .hero-background{background-size:auto 100%;background-position:center}
 .hero h1{top:16%;width:82%;height:37%;margin:0}
 .hero-copy{top:57%;width:82%;height:auto;min-height:12%;padding:14px 16px;font-size:clamp(14px,2.6vw,25px)}
 .hero-copy strong{white-space:normal}
 .hero .scroll-cue{top:83%}
}
@media(max-width:480px){
 .hero h1{top:20%;width:96%;height:32%;margin:0}
 .hero-copy{top:57%;width:89%;font-size:16px;line-height:1.55}
 .hero-copy p{font-size:12px;margin-bottom:5px}
 .hero .mobile-break{display:block}
 .hero .scroll-cue{top:82%}
}
@media(max-height:480px) and (min-aspect-ratio:4/3){
 .hero-copy{font-size:clamp(10px,3.46svh,16px);border-width:1px}
 .hero .scroll-cue{top:82%;gap:4px}
 .hero .scroll-cue span{width:16px;height:25px}
 .hero .scroll-cue span:after{left:5px;height:6px}
}
/* KEPCO video stories and location navigation. */
.video-section{background:linear-gradient(180deg,#73ddeb 0%,#bce3c9 53%,#fff09b 100%);padding:50px 5%;display:grid;grid-template-columns:36% 60%;gap:4%;align-items:center;scroll-snap-align:start;min-height:650px}
.video-section h2{position:relative;display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(24px,2.5vw,48px);line-height:1.4;letter-spacing:-.045em;max-width:100%;padding:20px 0 40px}
.video-section h2 span{background:var(--blue);color:#ffed36;border-radius:80px;padding:15px 28px;white-space:nowrap}
.video-section h2 strong{background:#ffed36;color:var(--blue);padding:15px 28px;border-radius:65px;transform:rotate(-8deg);align-self:center;margin-top:5px;box-shadow:0 12px 8px #1b4e3625;white-space:nowrap}
.video-section h2 i{font-style:normal;position:absolute;right:0;bottom:32px;font-size:clamp(45px,5vw,95px);transform:rotate(15deg)}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.video-card{position:relative;display:block;aspect-ratio:16/9;border:8px solid white;border-radius:12px;overflow:hidden;background:#062351;box-shadow:0 3px 6px #28575215}
.video-card>img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.video-card:hover>img{transform:scale(1.04)}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:19%;aspect-ratio:1.45;background:#ff0033;border-radius:22%;color:white;font-size:clamp(20px,2vw,38px);padding-left:3px;box-shadow:0 4px 8px #0003}
.video-caption{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;background:linear-gradient(transparent,#000b);color:white;font-size:14px;text-align:left;font-weight:600}
.site-footer{background:#fff;color:#777;text-align:center;padding:28px 20px;font-size:14px;line-height:1.5}
.video-dialog{border:0;background:transparent;padding:16px;width:min(1120px,96vw);max-height:95svh;color:white;overflow:auto}
.video-dialog h2{font-size:clamp(18px,2vw,26px);margin-bottom:16px;text-align:center}
.video-player{aspect-ratio:16/9;width:100%;background:#000;border-radius:12px;overflow:hidden}
.video-player iframe{display:block;width:100%;height:100%;border:0}
.video-actions{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:20px}
.video-actions .modal-close{margin:0}.video-actions>a{font-size:14px;color:white;text-underline-offset:4px}
.page-nav{right:12px;width:132px;gap:7px}
.page-nav a{width:100%;height:35px;background:transparent;border-radius:0;display:flex;gap:10px;justify-content:flex-start;text-decoration:none}
.page-nav .nav-dot{width:15px;height:15px;border-radius:50%;background:#777;flex:none;margin:0 7px;transition:background .2s,box-shadow .2s}
.page-nav .nav-label{font-size:13px;color:white;background:#0349cb;border-radius:40px;padding:8px 12px;white-space:nowrap;opacity:0;transition:opacity .2s}
.page-nav a[aria-current]{background:transparent}
.page-nav a[aria-current] .nav-dot{background:#0349cb;box-shadow:0 0 0 6px #0349cb30}
.page-nav a[aria-current] .nav-label,.page-nav a:hover .nav-label,.page-nav a:focus-visible .nav-label{opacity:1}
@media(min-width:901px){.page-nav{width:108px;right:3px}.page-nav .nav-label{font-size:11px;padding:7px 9px}.page-nav a{gap:3px}.page-nav .nav-dot{width:12px;height:12px;margin:0 6px}}
@media(min-width:1600px){.page-nav{width:155px;right:10px;gap:12px}.page-nav a{height:42px;gap:8px}.page-nav .nav-dot{width:20px;height:20px}.page-nav .nav-label{font-size:16px;padding:9px 16px}}
@media(max-width:900px){.video-section{grid-template-columns:1fr;padding:35px 6%;gap:25px;min-height:0}.video-section h2{align-items:center;justify-self:center;padding:0 45px 25px;font-size:30px}.video-section h2 i{right:0;bottom:16px;font-size:58px}.video-section h2 strong{margin-left:65px}.video-grid{gap:16px}.video-card{border-width:6px}.video-play{font-size:22px}.page-nav{width:25px;right:2px}.page-nav .nav-label{position:absolute;right:32px;pointer-events:none}.page-nav .nav-dot{width:10px;height:10px}.page-nav a{height:28px}}
@media(max-width:480px){.video-section{padding:32px 6%}.video-section h2{font-size:24px;padding-left:0;padding-right:30px}.video-section h2 span{padding:12px 22px}.video-section h2 strong{padding:12px 22px;margin-left:40px}.video-section h2 i{font-size:48px;right:-8px}.video-grid{grid-template-columns:1fr;gap:18px}.video-play{width:18%;font-size:28px}.video-caption{font-size:14px}.site-footer{font-size:12px;padding:24px 15px}.video-dialog{padding:8px}.video-actions{gap:16px}.video-actions .modal-close{padding:10px 30px}.page-nav{display:flex;width:19px}.page-nav .nav-dot{width:7px;height:7px;margin:0 6px}.page-nav a{height:22px}.page-nav a[aria-current] .nav-dot{box-shadow:0 0 0 4px #0349cb30}.page-nav .nav-label{display:none}}
@media(max-height:500px){.page-nav{gap:0}.page-nav a{height:25px}.video-dialog{width:min(720px,80vw)}}
/* Exact geometry from local Figma component 2247:1301 (1920 × 1802). */
.closing{display:block;height:73.28125vw;min-height:0;padding:0;background:#5bc2e7;overflow:hidden;isolation:isolate}
.closing-city{position:absolute;left:0;top:0;width:100%;height:93.854167vw;max-height:none;min-height:0;object-fit:fill;object-position:initial;mask-image:none;z-index:-2}
.closing:before{content:'';position:absolute;inset:0 0 auto;height:16.875vw;background:linear-gradient(#5bc2e7,transparent);z-index:-1;pointer-events:none}
.closing-copy{position:absolute;left:8.333333%;top:8.28125vw;width:83.333333%;height:10.416667vw;margin:0;padding:0 11.3%;display:flex;align-items:center;justify-content:center;border-radius:1.5625vw;font-size:1.822917vw;line-height:1.285714;box-shadow:0 .6vw .8vw #14506f28;z-index:1}
.closing-copy p{width:100%;white-space:nowrap}
.closing-copy br{display:block}
.closing-guide{position:absolute;left:78.802083%;top:.052083vw;width:17.34375%;height:26.041667vw;max-height:none;object-fit:fill;z-index:2;pointer-events:none}
@media(max-width:600px){
 .closing{height:105vw;min-height:0}
 .closing-city{width:125%;max-width:none;height:117.317708vw;left:-12.5%;top:0}
 .closing-copy{left:5%;top:9vw;width:90%;height:auto;min-height:20vw;padding:3vw 17% 3vw 4%;font-size:clamp(13px,3.1vw,19px);border-radius:3vw;line-height:1.5}
 .closing-copy p{white-space:normal;word-break:keep-all}
 .closing-copy br{display:none}
 .closing-guide{left:78%;top:1vw;width:21%;height:31.53vw}
}
/* Navigation: label on the left, dot on the right. */
.page-nav a{flex-direction:row-reverse}
@media(max-width:900px){.page-nav .nav-label{right:32px}}

/* Keep each next-section cue at its own section's bottom edge. */
section:has(>.section-scroll-cue){position:relative}
.section-scroll-cue,.hero .section-scroll-cue{position:absolute;left:50%;top:auto;bottom:24px;transform:translateX(-50%);margin:0;z-index:3;gap:8px;width:44px;min-height:52px;align-items:center;justify-content:center}
.question{padding-bottom:max(100px,8vh)}
.closing .section-scroll-cue{background:#ffffffcc;border-radius:28px;padding:8px 0;bottom:18px}
.entry{padding-bottom:100px}
@media(max-width:900px){.question{padding-bottom:100px}.entry{padding-bottom:100px}.section-scroll-cue,.hero .section-scroll-cue{bottom:20px}}
@media(max-height:480px){.hero .section-scroll-cue{bottom:12px;min-height:40px;gap:4px}}

/* White scroll cue: disappear while moving and return on section arrival. */
.section-scroll-cue,.hero .section-scroll-cue{opacity:0;pointer-events:none;transition:opacity .3s ease,translate .3s ease;translate:0 7px}
.cue-ready .section-scroll-cue{opacity:1;pointer-events:auto;translate:0 0}
.is-scrolling .section-scroll-cue{opacity:0;pointer-events:none;translate:0 7px;transition-duration:.1s}
.section-scroll-cue span{border-color:#fff}
.section-scroll-cue span:after{background:#fff}
.section-scroll-cue img{filter:brightness(0) invert(1)}
.closing .section-scroll-cue{background:transparent;padding:0}
.entry{padding-bottom:36px}
@media(max-width:900px){.entry{padding-bottom:35px}}
/* Shared Figma grid, stable quiz shell, and original story/number artwork. */
.closing{height:93.854167vw}
.entry{margin-top:-20.572917vw;min-height:0;height:30.833333vw;padding:0;border-radius:5.208333vw 5.208333vw 0 0;background:linear-gradient(115deg,#ffff51 0%,#fff447 55%,#ffda19 100%);display:block;isolation:isolate;overflow:visible}
.entry h2{position:absolute;left:2.6%;top:9%;width:32.3%;height:72%;margin:0}
.entry h2 img{width:100%;height:100%;object-fit:contain}
.entry-card{position:absolute;left:38.958333%;top:10.304054%;width:57.760417%;height:77.871622%;padding:0;border-radius:2.5vw;background:#fff9b4e8;border:2px solid white;box-shadow:0 .6vw .7vw #72640040}
.entry-q{left:4%;top:-1.40625vw;width:19.1%;height:35.6%;padding:0;background:none;border-radius:0;display:grid;place-items:center;isolation:isolate;z-index:2}
.entry-q img{width:60%;height:75%;object-fit:contain;margin-left:10%}
.entry-tagline{position:absolute;left:18%;top:7%;width:77%;height:10%;margin:0;padding:0;font-size:1.5625vw;line-height:1.5;white-space:nowrap}
#question-view{position:absolute;inset:0}
.quiz-question{position:absolute;left:4%;top:24%;width:91.43%;height:36.2256%;min-height:0;margin:0;padding:1vw;border-radius:1.04vw;font-size:2.083333vw}
#enter-button{position:absolute;left:4%;bottom:8.7%;width:91.43%;height:21.258%;min-height:0;padding:0;border-radius:1.04vw;font-size:2.916667vw}
#entry-form{position:absolute;left:4%;right:4%;top:25%;bottom:8%;display:flex;flex-direction:column;justify-content:space-between}
.entry .answer-field{padding:0;font-size:1.5vw}.entry .answer-field input{font-size:1.4vw;padding:.6vw}
.entry .entry-details{margin:.8vw 0;gap:.6vw;flex-wrap:nowrap}.entry .consent{font-size:.85vw;white-space:nowrap}.entry .phone{min-width:0;padding:.3vw .6vw;font-size:1vw}.entry .phone input{font-size:1vw}.entry .consent input{width:1vw;height:1vw}
.entry .form-actions{gap:1vw}.entry .form-actions button{font-size:1.7vw;min-height:0;height:4.5vw;padding:.5vw}
.question-number,.entry-q{background:transparent;box-shadow:none;border-radius:0}
.question-number{isolation:isolate;padding-left:8%}
.question-number::after,.entry-q::after{content:'';position:absolute;inset:-5% -2% -7% -8%;background:url('assets/0908/2247-652-imgGroup49.svg') center/100% 100% no-repeat;z-index:-1}
.question-number::before,.entry-q::before{content:'';position:absolute;left:0;top:0;width:14%;height:16.5%;border-radius:100% 100% 0 0;background:#ffa500;z-index:-2}
.question-number{padding-left:1.5%}.question-number img{width:90%;height:80%;margin-left:5%}
.video-section{grid-template-columns:35.6% 57.76%;gap:3.36%;padding:2.604167vw 0 2.604167vw 3.36%;min-height:0}
.video-grid{gap:1.56vw}.video-card{border-width:.52vw;border-radius:.6vw}
.video-section h2{width:100%;height:19vw;padding:0;display:block;font-size:2.5vw;line-height:1.4;align-self:center}
.video-section h2 span{position:absolute;left:0;top:22%;padding:1vw 2.15vw;border-radius:5vw;font-weight:400;letter-spacing:-.04em}
.video-section h2 strong{position:absolute;left:29%;top:55%;padding:.7vw 1.8vw;margin:0;transform:rotate(-8deg);border-radius:4vw;box-shadow:0 .65vw .5vw #294e3030;font-size:2.6vw;letter-spacing:-.035em}
.video-section .story-bulb{position:absolute;left:80%;top:45%;width:14%;height:42%;object-fit:contain;max-width:none;transform:rotate(8deg)}
@media(max-width:700px){
 .closing{height:125.572917vw}.entry{margin-top:-20.572917vw;height:auto;min-height:360px;padding:24px 5% 28px;border-radius:32px 32px 0 0;display:grid;grid-template-columns:28% 69%;gap:3%}
 .entry h2{position:static;width:100%;height:auto}.entry-card{position:relative;left:auto;top:auto;width:100%;height:300px;border-radius:20px}
 .entry-q{top:-15px;height:72px;width:88px;left:0}.entry-tagline{font-size:11px;left:23%;width:74%;top:8%;white-space:normal}
 .quiz-question{font-size:20px;border-radius:10px}.entry #enter-button{font-size:24px;border-radius:10px}
 .entry .answer-field{font-size:14px}.entry .answer-field input{font-size:14px;padding:5px}
 .entry .entry-details{flex-wrap:wrap;gap:8px;margin:8px 0}.entry .consent{font-size:11px}.entry .consent input{width:16px;height:16px}.entry .phone{font-size:13px;padding:4px 6px;width:100%}.entry .phone input{font-size:12px}
 .entry .form-actions button{font-size:14px;height:40px;padding:4px}.entry .form-actions{gap:6px}
 .video-section{grid-template-columns:1fr;padding:25px 5% 35px;gap:15px}.video-section h2{width:340px;max-width:100%;height:190px;font-size:24px}.video-section h2 span{padding:12px 22px;border-radius:50px}.video-section h2 strong{font-size:26px;padding:10px 20px;border-radius:40px;left:27%;top:54%}.video-section .story-bulb{left:82%;top:45%;height:43%;width:15%}.video-grid{gap:16px}.video-card{border-width:6px;border-radius:10px}
}
@media(max-width:440px){.entry{grid-template-columns:1fr;padding-top:10px;gap:0}.entry h2{width:180px;height:110px;margin:auto}.entry-card{height:290px}.entry-tagline{font-size:12px}.entry .consent{font-size:12px}}
@media(min-width:701px){
 .video-section{position:relative;display:block;padding:2.604167vw 3.28125% 2.604167vw 38.958333%}
 .video-section h2{position:absolute;left:3.36%;top:50%;width:32.24%;transform:translateY(-50%);margin:0}
}
.closing .section-scroll-cue{bottom:calc(20.572917vw + 18px)}
@media(max-width:700px){.video-section h2{position:relative;left:auto;top:auto;transform:none}}
/* User-supplied original plate; retain Q1–Q5 number artwork above it. */
.question-number,.entry-q{background:url('assets/0908/question-plate-original.png') center/100% 100% no-repeat;box-shadow:none;border-radius:0}
.question-number::before,.question-number::after,.entry-q::before,.entry-q::after{content:none;display:none}
/* Original video component 4048:4490: 1921 × 730. */
.video-card>img:not(.video-play){aspect-ratio:16/9;object-fit:cover}
.video-card>.video-play{position:absolute;left:50%;top:50%;width:19.517%;height:23.929%;max-width:none;transform:translate(-50%,-50%);object-fit:contain;background:none;border-radius:0;padding:0;box-shadow:none;aspect-ratio:auto}
.video-card:hover>.video-play{transform:translate(-50%,-50%)}
.video-caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
@media(min-width:701px){
 .video-section{height:38.001041vw;padding:0;display:block;position:relative}
 .video-section h2{position:absolute;left:4.372722%;top:34.91345%;width:31.507917%;height:29.384989%;transform:none;margin:0;padding:0;font-size:2.602811vw;line-height:1.4}
 .video-section h2 span{left:0;top:0;width:72.130456%;height:47.103157%;padding:0;display:flex;align-items:center;justify-content:center;border-radius:100px;font-size:2.602811vw;letter-spacing:-.05em;font-weight:400}
 .video-section h2 strong{left:32.51%;top:47%;width:49.636421%;height:47.103157%;padding:0;margin:0;display:flex;align-items:center;justify-content:center;transform:rotate(-7.464deg);border-radius:100px;font-size:2.602811vw;letter-spacing:-.03em;font-weight:600;box-shadow:0 .5vw .45vw #294e3030}
 .video-section .story-bulb{left:73.069759%;top:4.723323%;width:26.929266%;height:88.107608%;object-fit:contain;transform:none}
 .video-grid{position:absolute;left:39.3%;top:8.219178%;width:55.8%;height:83.561644%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2.05vw 1.65vw}
 .video-card{aspect-ratio:auto;border:.52vw solid white;border-radius:.58vw;box-shadow:none}
}
@media(max-width:700px){
 .video-section .story-bulb{left:73%;top:36%;width:27%;height:59%;transform:none}
 .video-section h2 strong{left:32%;top:54%;font-size:25px}
}

/* Cloud crops and placements from the original Figma frames. */
.cloud-piece{position:absolute;display:block;background-image:url('assets/0908/4040-2586-imgImage54.webp');background-repeat:no-repeat;pointer-events:none}
.cloud-top-left,.cloud-bottom-left,.fixed-scenery .cloud-left{background-size:261.580381% 108.373501%;background-position:0 0}
.cloud-top-right,.cloud-bottom-right,.fixed-scenery .cloud-right{background-size:232.44552% 101.069841%;background-position:100% 0}
.hero-clouds{background:none}
.hero-clouds .cloud-top-left{left:.052083%;top:-59.814815%;width:39.947917%;height:87.12963%;transform:scaleY(-1)}
.hero-clouds .cloud-top-right{left:57.03125%;top:-64.259259%;width:43.020833%;height:93.425926%;transform:scaleY(-1)}
.hero-clouds .cloud-bottom-left{left:.052083%;top:63.888889%;width:34.53125%;height:69.166667%}
.hero-clouds .cloud-bottom-right{left:62.8125%;top:67.592593%;width:37.1875%;height:70.462963%}
.fixed-scenery .cloud-left{left:0;top:-20.3125vw;width:34.53125%;height:38.90625vw;opacity:1}
.fixed-scenery .cloud-right{right:0;top:-18.229167vw;width:37.1875%;height:39.635417vw;opacity:1}

/* Release the shared clouds at Q5 so they leave with that section. */
.questions{background:var(--sky)}
.fixed-scenery{position:absolute;inset:0 0 auto;height:100svh;margin:0;will-change:transform}
/* Original entry form: answer line sits to the right of the Q plate. */
@media(min-width:701px){
 #entry-form{inset:0;display:block}
 .entry .answer-field{position:absolute;left:31.7%;top:25%;width:40.5%;height:15%;gap:1.2vw;border-bottom:1px solid #567398;font-size:2vw;white-space:nowrap}
 .entry .answer-field input{width:0;border:0;font-size:2.15vw;font-weight:400;padding:.3vw 0}
 .entry .answer-field input::placeholder{font-size:1.3vw}
 .entry .entry-details{position:absolute;left:4%;right:4%;top:50%;height:12%;margin:0;display:grid;grid-template-columns:36.3% 60.4%;gap:3.3%}
 .entry .consent{font-size:1.35vw;gap:1vw}
 .entry .consent input{appearance:none;flex:none;width:1.55vw;height:1.55vw;margin:0;border:2px solid white;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #ffa500;cursor:pointer}
 .entry .consent input:checked{background:#ffa500;box-shadow:0 0 0 1px #ffa500,inset 0 0 0 3px white}
 .entry .consent input:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
 .entry .phone{height:100%;padding:.3vw 1vw;border-color:#ffa500;border-radius:.8vw;font-size:1.55vw;gap:1.5vw}
 .entry .phone span{font-weight:700}
 .entry .phone input{font-size:1.1vw}
 .entry .form-actions{position:absolute;left:4%;right:4%;bottom:8.7%;height:21.258%;grid-template-columns:36.3% 60.4%;gap:3.3%}
 .entry .form-actions button{height:100%;font-size:2.7vw;border-radius:1.04vw}
 .entry #back-button{color:#ffa500}
}
@media(max-width:700px){
 .entry .answer-field{margin-left:28%;width:72%;gap:6px;white-space:nowrap}
 .entry .answer-field input{width:0}
}
/* Clouds: 80% of the source size, with width-based proportional heights. */
.hero-clouds .cloud-top-left{left:0;top:-26.916667vw;width:31.958333%;height:39.208333vw}
.hero-clouds .cloud-top-right{left:auto;right:0;top:-28.916667vw;width:34.416667%;height:42.041667vw}
.hero-clouds .cloud-bottom-left{left:0;top:auto;bottom:-14.875vw;width:27.625%;height:31.125vw}
.hero-clouds .cloud-bottom-right{left:auto;right:0;top:auto;bottom:-17.125vw;width:29.75%;height:31.708333vw}
.fixed-scenery .cloud-left{top:-16.25vw;width:27.625%;height:31.125vw}
.fixed-scenery .cloud-right{top:-14.583333vw;width:29.75%;height:31.708333vw}
html{scroll-snap-type:y mandatory}
section[id]{scroll-snap-align:start;scroll-snap-stop:always}
.privacy-dialog{width:min(680px,92vw);max-height:85svh;border:0;border-radius:20px;padding:28px;color:var(--blue);background:#fff}
.privacy-dialog h2{font-size:22px;margin-bottom:20px}
.privacy-dialog p,.privacy-dialog li{font-size:15px;line-height:1.8;text-align:left}
.privacy-dialog ul{padding-left:22px;margin:18px 0}
.privacy-actions{display:flex;gap:12px;margin-top:24px}
.privacy-actions button{flex:1;padding:14px 8px;border-radius:10px;font-size:16px}
.privacy-dialog::backdrop{background:#001a46aa}
/* Let the quiz rise continuously over the vision background. */
html.vision-scroll{scroll-snap-type:none;scroll-behavior:auto}
.closing-city{transform:translateY(var(--vision-drift,0px)) scale(1.025);transform-origin:center bottom;will-change:transform}
.entry{z-index:2;box-shadow:0 -12px 30px #123c5818}
.question-inner{transition:opacity .65s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.closing-copy,.closing-guide,.video-section h2,.video-card{transition:opacity .7s ease,translate .85s cubic-bezier(.22,1,.36,1)}
.closing:not(.is-active) .closing-copy,.closing:not(.is-active) .closing-guide,.video-section:not(.is-active) h2,.video-section:not(.is-active) .video-card{opacity:0;translate:0 22px}
.closing.is-active .closing-guide{transition-delay:.12s}
.video-section.is-active .video-card:nth-child(2){transition-delay:.08s}
.video-section.is-active .video-card:nth-child(3){transition-delay:.16s}
.video-section.is-active .video-card:nth-child(4){transition-delay:.24s}
.entry button,.privacy-actions button{transition:filter .2s ease,box-shadow .2s ease}
.entry button:hover,.privacy-actions button:hover{filter:brightness(1.045);box-shadow:0 4px 12px #002b7d1a}
.page-nav .nav-dot,.page-nav .nav-label{transition:background-color .25s ease,opacity .25s ease,box-shadow .25s ease}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .closing-city{transform:none;will-change:auto}
 .question-inner,.closing-copy,.closing-guide,.video-section h2,.video-card{transition:none!important;translate:none!important;opacity:1!important}
}
/* Figma Q glyph: preserve its cropped source region (105 × 107 on 212 × 164). */
.entry-q{overflow:hidden}
.entry-q img{position:absolute;left:31.132075%;top:18.2855%;width:89.575%;height:65.218%;max-width:none;margin:0;object-fit:fill;clip-path:inset(0 44.707453% 0 0)}
/* Gentle entrance rhythm and ambient movement, only in visible sections. */
@keyframes soft-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes title-enter{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes object-float{0%,100%{transform:translateY(0) rotate(-.45deg)}50%{transform:translateY(-5px) rotate(.45deg)}}
@keyframes bulb-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes cloud-drift{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes cue-breathe{0%,100%{scale:1}50%{scale:1.045}}
@media(prefers-reduced-motion:no-preference){
 .hero.is-active h1 img{animation:title-enter 1.05s cubic-bezier(.22,1,.36,1) both}
 .hero.is-active .hero-copy p{animation:soft-enter .85s .18s both}
 .hero.is-active .hero-copy strong{animation:soft-enter .85s .28s both}
 .question.is-active .question-bar h2{animation:soft-enter .7s .08s both}
 .question.is-active .answer-label{animation:soft-enter .7s .16s both}
 .question.is-active .lead{animation:soft-enter .75s .22s both}
 .question.is-active .description,.question.is-active .table-scroll{animation:soft-enter .8s .3s both}
 .question.is-active .impact-grid>*{animation:soft-enter .8s .24s both}
 .question.is-active .impact-grid>:nth-child(2){animation-delay:.32s}
 .question.is-active .impact-grid>:nth-child(3){animation-delay:.4s}
 .question.is-active .impact-grid>:nth-child(4){animation-delay:.48s}
 .entry.is-active h2 img{animation:title-enter .9s .08s both}
 .entry.is-active .entry-tagline{animation:soft-enter .75s .18s both}
 .character,.closing-guide{animation:object-float 5.8s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 85%}
 .question:nth-of-type(even) .character{animation-delay:-2.9s;animation-duration:6.6s}
 .question.is-active .character,.closing.is-active .closing-guide{animation-play-state:running}
 .story-bulb{animation:bulb-sway 5s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 85%}
 .video-section.is-active .story-bulb{animation-play-state:running}
 .cloud-piece{animation:cloud-drift 9s ease-in-out infinite;animation-play-state:paused}
 .cloud-top-right,.cloud-right,.cloud-bottom-left{animation-delay:-4.5s;animation-duration:11s}
 .hero.is-active .cloud-piece,.questions:has(.question.is-active) .cloud-piece{animation-play-state:running}
 .cue-ready .section-scroll-cue span{animation:cue-breathe 2.8s ease-in-out infinite}
 .is-scrolling .character,.is-scrolling .closing-guide,.is-scrolling .story-bulb{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){
 .hero h1 img,.hero-copy p,.hero-copy strong,.question-bar h2,.answer-label,.lead,.description,.table-scroll,.impact-grid>*,.entry h2 img,.entry-tagline,.character,.closing-guide,.story-bulb,.cloud-piece,.section-scroll-cue span{animation:none!important}
}

/* Keep the Figma A. answer tab centered across the answer-card border. */
@keyframes answer-tab-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.answer-label{left:50%;top:-10px;width:19.625%;height:auto;aspect-ratio:314/86.639038;box-sizing:border-box;justify-content:center;padding:0;transform:translate(-50%,calc(-100% + .1vw))}
.answer-label img{flex:none;width:41.388%;height:100%;object-fit:contain;align-self:auto}
@media(prefers-reduced-motion:no-preference){.question.is-active .answer-label{animation:answer-tab-enter .7s .16s both}}
@media(max-width:700px){.answer-label{width:34%;min-width:160px;transform:translate(-50%,calc(-100% + 1px))}}

/* Three-step entry quiz */
html.vision-scroll{scroll-behavior:smooth}
#quiz{height:auto;min-height:0;display:grid;grid-template-columns:35% 58%;gap:4%;padding:48px 3%}
#quiz h2{position:static;width:100%;height:auto}
#quiz .entry-card{position:relative;inset:auto;width:100%;height:auto;padding:28px 24px}
#quiz .entry-q{width:110px;height:90px;top:-18px;left:34px}
#quiz .entry-tagline{position:static;width:auto;height:auto;margin:0 0 24px 120px;font-size:clamp(14px,1.3vw,24px);white-space:normal}
#quiz #question-view,#quiz #entry-form{position:static;inset:auto}
#quiz #entry-form{display:flex;gap:20px}
#quiz #entry-form .entry-details,#quiz #entry-form .form-actions{position:static;width:100%;height:auto;margin:0}
#quiz #enter-button{position:static;width:100%;height:auto;padding:12px;font-size:clamp(16px,1.6vw,28px)}
#quiz .form-actions button{height:auto;min-height:48px;font-size:clamp(16px,1.6vw,28px)}
#quiz .entry-details{flex-wrap:wrap;gap:12px}
#quiz .form-actions{position:static;width:100%;height:auto}
#quiz .entry-details{display:flex}
#quiz .consent,#quiz .phone,#quiz .phone input{font-size:16px}
#quiz .consent input{width:20px;height:20px}
@media(max-width:900px){#quiz{grid-template-columns:1fr;padding:36px 5%;gap:20px}#quiz h2{width:220px;margin:auto}#quiz .entry-card{padding:24px 18px}#quiz .entry-tagline{margin-left:110px}#quiz .entry-q{width:100px;height:78px}}
#quiz .quiz-progress{margin:0 0 16px 25%;font-size:18px;font-weight:700}
#quiz .choice-question{border:0;padding:0;margin:0;min-width:0}
#quiz .choice-question legend{width:75%;margin-left:25%;padding:0 0 20px;font-size:clamp(18px,1.5vw,28px);font-weight:700;line-height:1.5;word-break:keep-all}
#quiz-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#quiz .quiz-option{cursor:pointer;display:flex;align-items:center;gap:8px;background:#fffef0;border:2px solid transparent;border-radius:14px;padding:18px 12px;min-height:64px;font-size:clamp(16px,1.2vw,23px);line-height:1.4}
#quiz .quiz-option:has(input:checked){background:#fff26e;border-color:var(--blue);font-weight:700}
#quiz .quiz-option input{accent-color:var(--blue);width:18px;height:18px;flex-shrink:0}
#quiz-feedback{min-height:1.5em;margin:12px 0;font-size:16px;font-weight:600}
#quiz .quiz-complete{margin:12px 0 28px;width:100%;text-align:center;font-size:clamp(20px,1.8vw,30px);font-weight:700}
@media(max-width:700px){#quiz-options{grid-template-columns:1fr}#quiz .quiz-option{padding:12px 16px;min-height:52px}#quiz .choice-question legend{font-size:18px}#quiz .quiz-progress{font-size:16px}}

/* Layered scroll choreography inspired by the reference site's crossing cards. */
@media(prefers-reduced-motion:no-preference){
 .question-number{translate:calc(var(--motion-side,1) * var(--motion-cross,0) * 20px) calc(var(--motion-cross,0) * -18px);scale:calc(1 + var(--scroll-tension,0));will-change:translate,scale}
 .question-bar h2{translate:calc(var(--motion-side,1) * var(--motion-cross,0) * -14px) 0;will-change:translate}
 .question .character{translate:calc(var(--motion-side,1) * var(--motion-cross,0) * -24px) calc(var(--motion-cross,0) * 14px);scale:calc(1 + var(--scroll-tension,0) * .65);will-change:translate,scale}
 .answer-card{translate:calc(var(--motion-side,1) * var(--motion-cross,0) * 9px) calc(var(--motion-cross,0) * 12px);scale:calc(1 + var(--scroll-tension,0) * .32);will-change:translate,scale}
 .answer-card>.lead,.answer-card>.description,.answer-card>.table-scroll,.answer-card>.impact-grid{translate:calc(var(--motion-side,1) * var(--motion-cross,0) * -8px) 0;will-change:translate}
 #closing .closing-copy{translate:calc(var(--motion-cross,0) * -18px) calc(var(--motion-cross,0) * 12px);scale:calc(1 + var(--scroll-tension,0) * .4)}
 #closing .closing-guide{translate:calc(var(--motion-cross,0) * 24px) calc(var(--motion-cross,0) * -18px);scale:calc(1 + var(--scroll-tension,0))}
 #quiz>h2,#quiz>.entry-subcopy{translate:calc(var(--motion-cross,0) * -22px) 0;will-change:translate}
 #quiz .entry-card{translate:calc(var(--motion-cross,0) * 18px) calc(var(--motion-cross,0) * 10px);scale:calc(1 + var(--scroll-tension,0) * .55);will-change:translate,scale}
 #quiz .entry-worker{translate:calc(var(--motion-cross,0) * -28px) calc(var(--motion-cross,0) * 18px);scale:calc(1 + var(--scroll-tension,0));will-change:translate,scale}
 #videos>h2{translate:calc(var(--motion-cross,0) * -30px) calc(var(--motion-cross,0) * 10px);will-change:translate}
 #videos .video-grid{translate:calc(var(--motion-cross,0) * 22px) calc(var(--motion-cross,0) * -12px);scale:calc(1 + var(--scroll-tension,0) * .45);will-change:translate,scale}
 #videos .video-card:nth-child(odd){translate:0 calc(var(--motion-cross,0) * -10px)}
 #videos .video-card:nth-child(even){translate:0 calc(var(--motion-cross,0) * 10px)}
}
@media(prefers-reduced-motion:reduce){
 .question-number,.question-bar h2,.question .character,.answer-card,.answer-card>*,
 #closing .closing-copy,#closing .closing-guide,#quiz>h2,#quiz>.entry-subcopy,#quiz .entry-card,#quiz .entry-worker,#videos>h2,#videos .video-grid,#videos .video-card{translate:none!important;scale:none!important}
}

/* Full-height scenes rise over the previous background. */
.scene-stack{position:relative;isolation:isolate}
.scene-anchor{height:0;scroll-snap-align:start;scroll-snap-stop:always}
.scene-stack #closing{position:sticky;top:var(--scene-top,0px);height:100svh;min-height:100svh;z-index:0;scroll-snap-align:none;translate:0 var(--scene-drift,0px)}
#closing .section-scroll-cue{bottom:max(24px,env(safe-area-inset-bottom));z-index:4}
.scene-stack #quiz{position:sticky;top:var(--scene-top,0px);margin-top:0;min-height:100svh;align-content:center;align-items:center;z-index:2;scroll-snap-align:none;border-radius:5.208333vw 5.208333vw 0 0;padding-bottom:100px}
#quiz .section-scroll-cue{bottom:24px}
#quiz .section-scroll-cue span{border-color:var(--blue)}
#quiz .section-scroll-cue span:after{background:var(--blue)}
#quiz .section-scroll-cue img{filter:none}
.scene-stack #videos{position:relative;z-index:3;min-height:100svh;height:auto;display:grid;grid-template-columns:35% 58%;gap:4%;align-content:center;align-items:center;padding:64px 3% 120px;scroll-snap-align:none;box-shadow:0 -12px 30px #123c5818}
#videos h2{position:relative;inset:auto;transform:none;width:100%;height:19vw;margin:0}
#videos .video-grid{position:relative;inset:auto;width:100%;height:auto;grid-template-rows:auto;gap:24px}
#videos .video-card{aspect-ratio:16/9}
#videos .site-footer{position:absolute;left:0;right:0;bottom:0;width:100%;margin:0}
@media(max-width:900px){
 .scene-stack #quiz{gap:24px;padding:48px 5% 100px;border-radius:32px 32px 0 0}
 .scene-stack #videos{grid-template-columns:1fr;gap:28px;padding:48px 5% 110px}
 #videos h2{width:340px;max-width:100%;height:190px;justify-self:center}
}
@media(prefers-reduced-motion:reduce){html.vision-scroll{scroll-behavior:auto}}

/* Center the entry logo above the quiz on the shared question grid. */
#quiz .entry-subcopy{margin:calc(-1 * clamp(55px,6.5vw,110px)) 0 16px;padding:0 20px;text-align:center;color:var(--blue);font-size:37px;font-weight:700;line-height:1.35;word-break:keep-all;position:relative}
.scene-stack #quiz{grid-template-columns:minmax(0,1fr);justify-items:center;gap:24px;padding:48px 0 100px}
#quiz h2{width:clamp(330px,39vw,660px);max-width:90%;height:auto;margin:0 auto}
#quiz .entry-worker{position:absolute;right:-8%;bottom:-48px;width:clamp(240px,30vw,540px);height:auto;z-index:3;pointer-events:none}
#quiz .entry-card{padding-bottom:56px}
@media(min-width:901px){#quiz .entry-q{width:132px;height:108px}#quiz .entry-card{padding-right:clamp(150px,16vw,280px)}}
@media(max-width:900px){#quiz .entry-worker{right:-24px;bottom:-36px;width:180px}#quiz .entry-card{padding-bottom:130px}}
#quiz .entry-card{width:min(83.3333%,1200px);max-width:1200px;margin:0 auto}
.section-scroll-cue::before{content:'화면이동';display:block;white-space:nowrap;color:#fff;font-size:12px;font-weight:400;line-height:1.4}
#quiz .section-scroll-cue::before{color:var(--blue)}
#quiz .entry-tagline{margin:0 0 24px;padding:0 110px;text-align:center}
#quiz .quiz-progress{margin:0 0 16px;text-align:center;font-size:34px}
#quiz .choice-question legend{width:100%;margin-left:0;text-align:center;padding-left:100px;padding-right:100px}
@media(max-width:900px){
 #quiz .entry-card{width:88%}
 #quiz .entry-tagline{padding:0 80px;font-size:14px}
 #quiz .choice-question legend{padding-left:0;padding-right:0}
}

/* Energy-technology carousel: arrows on desktop, horizontal swipe on touch screens. */
.technology-viewport{position:relative;min-height:390px;overflow:hidden;touch-action:pan-y;overscroll-behavior-x:contain}
.technology-viewport .technology-content{position:absolute;inset:0;width:100%;min-height:100%}
.technology-content.is-sliding{display:grid!important;will-change:transform,opacity}
.technology-arrow{position:absolute;z-index:4;top:50%;translate:0 -50%;display:grid;place-items:center;width:50px;height:50px;border:2px solid var(--blue);border-radius:50%;background:#fffffff0;color:var(--blue);box-shadow:0 4px 12px #002b7d30;font-size:42px;line-height:1;transition:background .2s ease,color .2s ease,transform .2s ease}
.technology-arrow:hover{background:var(--blue);color:white;transform:scale(1.08)}
.technology-arrow--prev{left:12px}.technology-arrow--next{right:12px}
@media(max-width:900px){.technology-viewport{min-height:350px}.technology-arrow{width:44px;height:44px;font-size:36px}.technology-arrow--prev{left:4px}.technology-arrow--next{right:4px}}
@media(max-width:480px){.technology-viewport{min-height:390px}.technology-arrow{width:38px;height:38px;font-size:32px;background:#ffffffd9}.technology-content{padding-left:42px;padding-right:42px}}
@media(max-width:480px){
 #quiz .entry-card{width:90%;padding-top:70px}
 #quiz .entry-tagline{padding:0}
}

/* 0909: entry campaign and portrait mobile artwork. */

.scene-stack #quiz{isolation:isolate;overflow:clip;min-height:100svh;padding:50px 0 90px;gap:20px;background:linear-gradient(110deg,#ffff65 0%,#fff94a 45%,#ffda18 100%);border-radius:clamp(32px,4.2vw,80px) clamp(32px,4.2vw,80px) 0 0}
#quiz::before{content:'';position:absolute;inset:0 0 auto;height:48%;z-index:-1;background:url('assets/0909/confetti.webp') center 35%/100% auto no-repeat;filter:blur(4px);opacity:.48;pointer-events:none}
#quiz h2{width:clamp(300px,34vw,530px);max-width:86%;margin:-30px auto -32px;translate:none}
#quiz .entry-subcopy{margin:0 0 38px;padding:0;font-size:clamp(23px,2.5vw,37px);line-height:1.3;translate:none}
#quiz .entry-subcopy span{white-space:nowrap}#quiz .entry-subcopy em{font-style:normal;border:1px solid #ffa500;border-radius:50%;padding:0 4px}
#quiz .entry-card{width:min(83.3333%,1200px);height:auto;min-height:300px;padding:34px 5% 28px;border:1px solid white;border-radius:32px;background:linear-gradient(110deg,#ffffb0dc,#fff6c8e8);box-shadow:0 8px 10px #817a2433;translate:none;scale:none}
#quiz .entry-q{width:150px;height:auto;aspect-ratio:212/165;top:-24px;left:16%;padding:12px 6px 12px 20px;display:grid;place-items:center}
#quiz .entry-q img{width:100%;height:100%;object-fit:contain}
#quiz .quiz-progress{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
#quiz .choice-question legend{padding:0 20% 30px;margin:0;width:100%;font-size:clamp(22px,2vw,32px);line-height:1.5;text-align:center;min-height:105px}
#quiz-options{gap:24px}
#quiz .quiz-option{justify-content:center;min-height:56px;padding:10px 8px;border-radius:14px;background:#fffde0;border:2px solid transparent;font-size:clamp(17px,1.8vw,27px)}
#quiz .quiz-option:has(input:checked){border-color:#ffa500;background:#ffde91;font-weight:400}
#quiz .quiz-option.is-wrong{border-color:#ff2828;background:#ffc3b4}
#quiz .quiz-option input{width:18px;height:18px;accent-color:#002b7d}
#quiz .form-actions{grid-template-columns:1fr 2fr;gap:24px}
#quiz .form-actions .primary,#quiz #enter-button{background:#002b7d;color:#ffa500;border-radius:12px;font-size:clamp(21px,2vw,30px);min-height:54px;padding:8px 16px}
#quiz .form-actions .secondary{background:transparent;color:#ff9e00;font-size:clamp(21px,2vw,30px)}
#quiz .form-actions button:disabled{opacity:.4;cursor:default}
#quiz-feedback{margin:4px 0;min-height:16px;font-size:14px}
#quiz .entry-worker{width:19%;max-width:210px;height:auto;right:-9%;bottom:-8px;translate:none;scale:none}
#quiz .entry-girl{position:absolute;width:18%;max-width:205px;height:auto;left:-9%;bottom:-6px;pointer-events:none}
#quiz #entry-form{padding-top:70px}
#quiz .quiz-complete{margin:0 0 14px}
@media(max-width:700px){
 .hero{height:max(158.5vw,100svh);min-height:0}
 .hero-background{background-image:url('assets/0909/hero-mobile-0910j.jpg');background-size:cover;background-position:center;transform:none}
 
 
 
 
 
 .hero h1{top:29%;width:105%;max-width:none;height:35%;left:50%;margin:0}
 .hero-copy{top:64.5%;width:94%;height:12%;min-height:64px;padding:9px 8px;font-size:clamp(12px,3.35vw,23px);box-shadow:0 0 18px #61d5ff;line-height:1.55}
 .hero-copy strong{white-space:normal;font-size:1em}.hero-copy p{font-size:.9em}
 .hero .section-scroll-cue{top:auto;bottom:10%;color:var(--blue)}
 .hero .section-scroll-cue::before{color:var(--blue)}
 .hero .section-scroll-cue span{border-color:var(--blue)}.hero .section-scroll-cue span:after{background:var(--blue)}.hero .section-scroll-cue img{filter:none}
 .hero-clouds .cloud-top-left{left:-8%;top:-31%;width:64%;height:45%}
 .hero-clouds .cloud-top-right{left:57%;top:-30%;width:64%;height:46%}
 .hero-clouds .cloud-bottom-left{left:-12%;top:83%;width:64%;height:44%}
 .hero-clouds .cloud-bottom-right{left:53%;top:81%;width:64%;height:48%}
 .scene-stack #closing{height:257vw;min-height:100svh}
 .closing-city{content:url('assets/0909/vision-mobile-0910.jpg');left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;max-width:100%;mask-image:none}
 .closing-copy{left:3%;top:15vw;width:94%;height:28.5vw;min-height:0;padding:3vw 24% 3vw 7%;font-size:clamp(13px,3.9vw,24px);border-radius:6vw;line-height:1.45}
 .closing-copy p{white-space:normal;word-break:keep-all}.closing-copy br{display:none}
 .closing-guide{left:auto;right:2%;top:5vw;width:28%;height:50vw;object-fit:contain}
 .scene-stack #quiz{padding:26px 0 58px;gap:0;border-radius:40px 40px 0 0;min-height:100svh}
 #quiz::before{height:36%;background-size:auto 100%;background-position:center;filter:blur(3px)}
 #quiz h2{width:96%;max-width:96%;margin:-30px auto -35px}
 #quiz .entry-subcopy{font-size:clamp(25px,6.8vw,38px);margin:0 0 62px;padding:0 12%;line-height:1.2}
 #quiz .entry-subcopy span{display:block}
 #quiz .entry-card{width:94%;padding:82px 3% 14px;min-height:450px;border-radius:26px}
 #quiz .entry-q{width:102px;height:auto;top:-12px;left:50%;transform:translateX(-50%);padding:10px 5px 10px 17px}
 #quiz .choice-question legend{font-size:clamp(21px,5.7vw,29px);padding:0 7% 30px;min-height:90px;line-height:1.5}
 #quiz-options{grid-template-columns:1fr;gap:20px}
 #quiz .quiz-option{font-size:clamp(19px,5vw,25px);min-height:44px;padding:7px 8px;border-radius:11px}
 #quiz .form-actions{grid-template-columns:1fr 2.7fr;gap:10px;margin-top:38px}
 #quiz .form-actions .primary,#quiz #enter-button{min-height:44px;font-size:23px;padding:7px 8px}
 #quiz .form-actions .secondary{font-size:22px;padding:7px}
 #quiz .entry-worker,#quiz .entry-girl{display:none}
 #quiz #entry-form{padding-top:0;gap:20px}
 #quiz .entry-details{flex-direction:column;align-items:stretch}
 #quiz .consent{white-space:normal;font-size:15px}#quiz .phone{width:100%;min-height:48px}
 #quiz .section-scroll-cue{bottom:8px;gap:4px}#quiz .section-scroll-cue span{height:23px}
}
#quiz .entry-q img{position:static;inset:auto;clip-path:none;margin:0;max-width:100%;object-fit:contain}
#quiz .choice-question legend{width:66%;margin-left:28%;padding:0 0 24px;white-space:normal}
#quiz::before{background-size:55% auto;background-repeat:repeat-x;opacity:.3}
@media(max-width:700px){
 html,body{overflow-x:clip}
 #quiz .choice-question legend{width:100%;margin-left:0;padding:0 5% 30px}
 #quiz .entry-card{min-height:0}
 #quiz #entry-form .form-actions{grid-template-columns:1fr 2fr}
 #quiz #entry-form .secondary{font-size:17px;white-space:nowrap}
 #quiz::before{background-size:auto 100%;background-repeat:no-repeat}
 .closing-city{object-fit:fill}
 .closing-copy strong{display:block}
 .hero-copy{background:#fff;font-size:3.2vw}
 .hero-copy strong{white-space:nowrap;font-size:.96em;letter-spacing:-.045em}
 .hero-copy strong br{display:none}
 .hero-clouds{z-index:1}.hero-content{z-index:2}
 
}
#quiz .choice-question legend{float:left;width:65%;margin-left:25%;text-wrap:balance}
#quiz-options{clear:both}
@media(max-width:700px){
 #quiz .choice-question legend{float:none;width:100%;margin:0}
 .hero .hero-copy .mobile-break{display:none}
 .hero .hero-copy strong{font-size:2.95vw}
}

/* Mobile question headers follow the original Q1–Q5 composition. */
@media(max-width:700px){
 .question .question-bar{height:auto;min-height:24vw;padding:5vw 18% 5vw 23%;border-radius:3vw;margin-bottom:65px}
 .question .question-bar h2{font-size:3.9vw;line-height:1.3;letter-spacing:-.035em;word-break:keep-all}
 .question .question-number{left:2%;top:-2vw;width:18%;height:auto;aspect-ratio:212 / 165;padding-left:1.5%}
 .question .question-number img{width:90%;height:80%;margin-left:5%}
 .question .question-bar .character{right:-3%;bottom:-15%;width:24%;height:145%;object-fit:contain}
}
.question-mobile-break{display:none}
@media(max-width:700px){.question-mobile-break{display:block}.question .question-bar{padding-right:15%}.question .question-bar h2{font-size:3.7vw}}

/* Preserve the supplied portrait background proportions on mobile. */
@media(max-width:700px){
 .scene-stack #closing{height:166.571429vw;min-height:0}
 .closing-city{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:700 / 1166;object-fit:contain;object-position:top center;transform:none}
}

/* Continue the portrait artwork behind the quiz's rounded top corners. */
@media(max-width:700px){
 .scene-stack #closing{height:calc(166.571429vw - 40px);overflow:visible}
}

/* Align visible character bounds, including each asset's transparent margins. */
@media(max-width:700px){
 .question .question-bar{height:21.6vw;min-height:0;padding:0 15% 0 23%;display:flex;align-items:center}
 .question .question-bar h2{font-size:3.65vw;font-weight:600;line-height:1.3;letter-spacing:-.045em}
 .question .question-number{width:18%;top:-2vw;left:2%}
 .question .question-bar .character{height:148%;width:27%;right:-4%;bottom:-18%}
 #q1 .question-bar .character{height:171%;width:41%;right:-12%;bottom:-34%}
 #q3 .question-bar .character,#q5 .question-bar .character{height:144%;width:29%;right:-4%;bottom:-17%}
}

/* Join the mobile answer tab to the card's 7px white border. */
@media(max-width:700px){.question .answer-label{top:-6px}}

/* Compact the mobile quiz card's vertical rhythm. */
@media(max-width:700px){
 #quiz .entry-card{padding-top:70px;padding-bottom:12px}
 #quiz .choice-question legend{min-height:0;padding-bottom:18px;line-height:1.4}
 #quiz-options{gap:12px}
 #quiz #question-view .form-actions{margin-top:20px}
 #quiz #quiz-feedback:empty{display:none}
}

/* Enlarge the mobile hero copy while retaining the pill's inner clearance. */
@media(max-width:700px){
 .hero .hero-copy p{font-size:3.35vw;letter-spacing:-.04em;white-space:nowrap}
 .hero .hero-copy strong{font-size:3.4vw;letter-spacing:-.055em;white-space:nowrap}
}

/* Keep the quiz scroll mouse at the same proportions as other sections. */
#quiz .section-scroll-cue span{width:20px;height:34px;min-height:34px;flex-shrink:0}
#quiz .section-scroll-cue img{flex-shrink:0}

/* Continue the same cloud artwork across the mobile intro/Q1 boundary. */
@media(max-width:700px){
 .hero-clouds .cloud-bottom-left,.fixed-scenery .cloud-left{left:-12%;right:auto;width:64%;height:72vw;animation:none}
 .hero-clouds .cloud-bottom-right,.fixed-scenery .cloud-right{left:53%;right:auto;width:64%;height:72vw;animation:none}
 .hero-clouds .cloud-bottom-left{top:auto;bottom:-46vw}
 .hero-clouds .cloud-bottom-right{top:auto;bottom:-42vw}
 .fixed-scenery .cloud-left{top:-26vw}
 .fixed-scenery .cloud-right{top:-30vw}
}

/* Extend desktop vision artwork behind the quiz's rounded corners. */
@media(min-width:701px){
 .scene-stack #closing{overflow:visible;clip-path:inset(0 0 calc(-1 * clamp(32px,4.2vw,80px)) 0)}
}

/* Campaign logo at 120% of its previous size. */
#quiz h2{width:clamp(360px,40.8vw,636px);max-width:100%}
@media(max-width:700px){#quiz h2{width:115.2%;max-width:none}}

/* Quiz entrance and gentle idle motion, limited to decorative objects. */
@keyframes quiz-logo-idle{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-7px) rotate(.3deg)}}
@keyframes quiz-character-idle{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-6px) rotate(.6deg)}}
@keyframes quiz-confetti-idle{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(9px);opacity:.48}}
@keyframes quiz-card-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 #quiz h2 img{animation:quiz-logo-idle 5s ease-in-out infinite!important;animation-play-state:paused!important}
 #quiz .entry-worker,#quiz .entry-girl{animation:quiz-character-idle 5.8s ease-in-out infinite;animation-play-state:paused;transform-origin:center bottom}
 #quiz .entry-girl{animation-delay:-2.9s}
 #quiz::before{animation:quiz-confetti-idle 8s ease-in-out infinite;animation-play-state:paused}
 #quiz.is-active h2 img{animation-play-state:running!important}
 #quiz.is-active .entry-worker,#quiz.is-active .entry-girl,#quiz.is-active::before{animation-play-state:running}
 #quiz.is-active .entry-card{animation:quiz-card-enter .7s cubic-bezier(.22,1,.36,1) both}
 #quiz.is-active .entry-subcopy{animation:quiz-card-enter .65s .1s both}
}

/* Tensioned zoom-out entrance, followed by the existing gentle float. */
@keyframes quiz-logo-zoom-out{
 0%{opacity:0;transform:scale(1.32) translateY(-12px)}
 55%{opacity:1;transform:scale(.94) translateY(2px)}
 78%{opacity:1;transform:scale(1.035) translateY(-2px)}
 100%{opacity:1;transform:scale(1) translateY(0)}
}
@media(prefers-reduced-motion:no-preference){
 #quiz.is-active h2 img{transform-origin:center;animation:quiz-logo-zoom-out 1.15s cubic-bezier(.22,1,.36,1) both,quiz-logo-idle 5s 1.15s ease-in-out infinite!important;animation-play-state:running!important}
}

/* Fill tall desktop/tablet viewports through the rounded quiz overlap. */
@media(min-width:701px){
 .scene-stack #closing .closing-city{left:0;top:0;bottom:auto;width:100%;height:calc(100% + clamp(32px,4.2vw,80px));max-width:none;max-height:none;min-height:0;object-fit:cover;object-position:center bottom;transform:none;aspect-ratio:auto}
}

@media(max-width:700px){
 #intro .section-scroll-cue::before{color:#fff}
 #intro .section-scroll-cue span{border-color:#fff}
 #intro .section-scroll-cue span::after{background:#fff}
 #intro .section-scroll-cue img{filter:brightness(0) invert(1)}
}

/* Keep the mobile campaign logo centered, including its entrance overshoot. */
@keyframes quiz-logo-zoom-out-mobile{
 0%{opacity:0;transform:scale(1.08) translateY(-8px)}
 55%{opacity:1;transform:scale(.94) translateY(2px)}
 78%{opacity:1;transform:scale(1.025) translateY(-2px)}
 100%{opacity:1;transform:scale(1) translateY(0)}
}
@media(max-width:700px){
 #quiz h2{width:94%;max-width:94%;min-width:0;justify-self:center;margin-left:auto;margin-right:auto}
 #quiz h2 img{display:block;width:100%;max-width:100%;height:auto}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 #quiz.is-active h2 img{animation:quiz-logo-zoom-out-mobile 1.15s cubic-bezier(.22,1,.36,1) both,quiz-logo-idle 5s 1.15s ease-in-out infinite!important}
}

/* Wrap responsive copy at word boundaries rather than inside Korean words. */
:where(h1,h2,h3,h4,p,legend,label,button,a,li,th,td,strong,span){word-break:keep-all;overflow-wrap:break-word}
input{word-break:normal}

.table-scroll-frame{position:relative;min-width:0;max-width:100%}
.table-more-cue{display:none;pointer-events:none}
@keyframes table-more-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(max-width:700px){
 .has-more-columns>.table-more-cue{position:absolute;display:grid;place-items:center;right:5px;top:50%;margin-top:-16px;width:26px;height:32px;border-radius:16px;background:#002b7de8;color:#fff;box-shadow:0 2px 8px #002b7d30}
 .table-more-cue::after{content:'';width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:-3px}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){.has-more-columns>.table-more-cue{animation:table-more-nudge 1.4s ease-in-out infinite}}

/* Touch scrolling must expose every tall section before the next one arrives. */
@media(max-width:700px){
 html{scroll-snap-type:none}
 .page,.scene-anchor{scroll-snap-align:none;scroll-snap-stop:normal}
 .scene-stack #closing,.scene-stack #quiz{position:relative;top:auto;translate:none}
 .scene-stack #quiz{height:auto;min-height:100svh}
}

/* Reserve a dedicated header column for the quiz badge on desktop/tablet. */
@media(min-width:701px){
 #quiz .entry-q{left:5%;width:clamp(100px,12vw,150px)}
 #quiz .choice-question legend{float:none;width:100%;margin:0;padding:0 3% 24px calc(clamp(100px,12vw,150px) + 24px);min-height:110px;box-sizing:border-box;text-align:center;word-break:keep-all}
}

/* Reserve independent lanes for artwork, badge, and question text. */
@media(min-width:701px){
 #quiz .entry-card{padding-left:9%;padding-right:9%}
 #quiz .entry-q{left:14%;width:clamp(100px,10vw,140px)}
 #quiz .choice-question legend{padding-left:calc(clamp(100px,10vw,140px) + 9% + 24px);padding-right:0;min-height:120px}
 #quiz .entry-girl{width:16%;max-width:180px;left:-8%}
 #quiz .entry-worker{width:17%;max-width:190px;right:-8%}
}
@media(min-width:701px) and (max-width:1000px){
 #quiz .entry-q{left:50%;transform:translateX(-50%);top:-22px}
 #quiz .entry-card{padding-top:86px}
 #quiz .choice-question legend{padding-left:0;min-height:0;padding-bottom:24px}
}

/* One card-relative badge anchor at every breakpoint. */
#quiz .entry-card{--badge-width:clamp(102px,10vw,140px);--badge-lift:14px;position:relative;padding-top:calc(var(--badge-width) * 165 / 212 - var(--badge-lift) + 20px)}
#quiz .entry-card .entry-q{position:absolute;left:50%;right:auto;top:calc(-1 * var(--badge-lift));bottom:auto;width:var(--badge-width);height:auto;aspect-ratio:212 / 165;transform:translateX(-50%);translate:none!important;scale:none!important;animation:none!important;margin:0;padding:10px 5px 10px 17px}
#quiz .choice-question legend{float:none;width:100%;margin:0;padding:0 0 24px;min-height:0;text-align:center}
#quiz .entry-q img{animation:none!important;transform:none;translate:none;scale:none}
@media(max-width:700px){#quiz .choice-question legend{padding-bottom:18px}}

/* Keep Q1–Q5 plates proportional and anchored to the question bar. */
.question .question-bar .question-number{height:auto;aspect-ratio:212 / 165;top:0;bottom:auto;transform:translateY(-16%);translate:none!important;scale:none!important;animation:none!important}
@media(min-width:701px){
 .question .question-bar .question-number{left:2%;width:clamp(72px,12.5%,200px)}
 .question .question-bar{padding-left:23%}
}

/* Desktop campaign composition: title above, quiz centered below, cue at foot. */
@media(min-width:1001px){
 .scene-stack #quiz{min-height:100svh;padding-top:clamp(32px,4svh,64px);padding-bottom:clamp(110px,14svh,220px);align-content:start;row-gap:0}
 #quiz h2{margin:0 auto -36px;width:clamp(360px,40.8vw,636px)}
 #quiz .entry-subcopy{margin:0 0 clamp(72px,11svh,160px);padding:0}
 #quiz .entry-card{width:min(80%,1200px)}
 #quiz .section-scroll-cue{bottom:28px}
}
@media(min-width:1001px){
 .scene-stack #quiz{padding-top:clamp(16px,1.8svh,32px)}
 #quiz h2{margin-bottom:-70px}
}

/* Lock glyph placement and the orange fold to the original plate coordinates. */
#quiz .entry-card{--badge-lift:calc(var(--badge-width) * 28 / 212)}
#quiz .entry-card .entry-q{padding:0;display:block;height:calc(var(--badge-width) * 165 / 212);background-size:100% 100%}
#quiz .entry-card .entry-q img{position:absolute;left:21%;top:27%;right:auto;bottom:auto;width:70%;height:50%;max-width:none;margin:0;padding:0;object-fit:contain;clip-path:none}

/* Tab bottom meets the card's inner border edge at every breakpoint. */
.question .answer-card>.answer-label{top:0;bottom:auto;transform:translate(-50%,-100%);translate:none!important;animation:none!important}

/* Fine adjustment while retaining overlap with the card border. */
.question .answer-card>.answer-label{top:-3px}

/* Compact mobile quiz content while keeping comfortable touch targets. */
@media(max-width:700px){
 .scene-stack #quiz{padding-top:20px;padding-bottom:84px;align-content:center}
 #quiz h2{width:75.2%;max-width:75.2%;margin-top:-24px;margin-bottom:-28px}
 #quiz .entry-subcopy{font-size:clamp(20px,5.44vw,30px);margin-bottom:44px}
 #quiz .entry-card{--badge-width:82px;width:90%;padding-bottom:12px}
 #quiz .choice-question legend{font-size:clamp(17px,4.56vw,23px);line-height:1.4;padding-bottom:14px}
 #quiz-options{gap:9px}
 #quiz .quiz-option{font-size:clamp(16px,4vw,20px);padding:5px 6px;min-height:44px}
 #quiz #question-view .form-actions{margin-top:16px}
 #quiz .form-actions .primary,#quiz #enter-button{font-size:19px;min-height:44px}
 #quiz .form-actions .secondary{font-size:18px;min-height:44px}
 #quiz .section-scroll-cue{bottom:12px}
}

/* One proportional story logo composition on desktop and mobile. */
#videos #videos-title{position:relative;inset:auto;display:block;container-type:inline-size;width:100%;max-width:520px;height:auto;aspect-ratio:1.66;margin:0 auto;padding:0;transform:none}
#videos #videos-title>span{position:absolute;left:0;top:0;width:77.6%;height:49%;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border-radius:999px;font-size:7.4cqw;font-weight:400;letter-spacing:-.05em;white-space:nowrap}
#videos #videos-title>strong{position:absolute;left:36%;top:50%;width:53%;height:49%;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border-radius:999px;transform:rotate(-8deg);font-size:8.3cqw;font-weight:600;letter-spacing:-.03em;white-space:nowrap;box-shadow:0 8px 8px #294e3030}
#videos #videos-title>.story-bulb{position:absolute;left:85%;top:36%;width:15%;height:39%;object-fit:contain;transform:none}
@media(max-width:700px){
 #videos #videos-title{width:90%;max-width:360px}
 #videos .video-grid,#videos .video-card,#videos .video-card>img{animation:none!important;transition:none!important;translate:none!important;scale:none!important;opacity:1!important}
 #videos .video-card,#videos .video-card>img:not(.video-play){transform:none!important}
 #videos .video-card>.video-play{transform:translate(-50%,-50%)!important}
}

/* Match the reference lettering and compensate for the bulb asset's clear margins. */
#videos #videos-title>span{font-size:8.4cqw}
#videos #videos-title>strong{font-size:8.7cqw}
#videos #videos-title>.story-bulb{left:78%;top:20%;width:29%;height:60%;max-width:none;object-fit:contain}

#quiz #quiz-feedback{width:100%;text-align:center;margin-left:auto;margin-right:auto}

/* Balance completion copy between the badge and the entry controls. */
#quiz #entry-form{padding-top:0;gap:20px}
#quiz #entry-form .quiz-complete{display:flex;align-items:center;justify-content:center;min-height:100px;margin:0;text-align:center;padding:20px 0}
@media(max-width:700px){#quiz #entry-form .quiz-complete{min-height:72px;padding:12px 0}}

/* Fill the current viewport even when mobile browser bars expand/collapse. */
.scene-stack #quiz{min-height:100vh;min-height:100dvh}

/* Share the corner depth and cover it even while the vision scene drifts. */
.scene-stack{--quiz-corner:clamp(32px,4.2vw,80px)}
.scene-stack #quiz{border-top-left-radius:var(--quiz-corner);border-top-right-radius:var(--quiz-corner)}
@media(min-width:701px){
 .scene-stack #closing{clip-path:inset(0 0 calc(-1 * var(--quiz-corner) + var(--scene-drift,0px) - 2px) 0)}
 .scene-stack #closing .closing-city{height:calc(100% + var(--quiz-corner) - var(--scene-drift,0px) + 2px)}
}
@media(max-width:700px){
 .scene-stack{--quiz-corner:40px}
 .scene-stack #closing{height:calc(166.571429vw - var(--quiz-corner));overflow:visible}
 .scene-stack #closing .closing-city{height:calc(100% + var(--quiz-corner) + 2px);width:100%;object-fit:cover;object-position:center top;aspect-ratio:auto}
}

/* Mobile story logo at 80% of the previous size. */
@media(max-width:700px){#videos #videos-title{width:72%;max-width:288px}}

/* Native sticky clouds avoid a clipped strip during mobile momentum scrolling. */
.questions .fixed-scenery{position:sticky;inset:auto;top:0;height:100lvh;margin:0 0 -100lvh;overflow:visible;background:transparent;transform:none!important;will-change:auto}

#quiz #question-view{position:relative}
#quiz #quiz-feedback.is-bubble{position:absolute;z-index:6;left:50%;bottom:66px;transform:translateX(-50%);width:max-content;max-width:95%;margin:0;padding:12px 18px;border-radius:18px;background:#002b7d;color:#fff;font-size:clamp(14px,1.2vw,18px);line-height:1.5;box-shadow:0 5px 16px #002b7d30;pointer-events:none;text-align:center}
#quiz #quiz-feedback.is-bubble::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:9px solid #002b7d}