@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-style:normal;font-display:swap;src:url("/site-assets/kb-r16/9599f12fd42fc0bc.woff2") format('woff2')} :root{--ink:#141414;--muted:#656565;--line:#dedede;--accent:#d92b16;--sans:'Neue Haas Grotesk','Helvetica Neue',Helvetica,Arial,'Pretendard Variable',sans-serif;--pad:60px;--nav-height:66px;font-size:clamp(12px,.9vw,24px);color-scheme:light} *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 32px);background:#fff}body{font-family:var(--sans);font-size:18px;line-height:1.6;background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}img{display:block;max-width:100%}p,h2,h3{word-break:keep-all}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:6px}[hidden]{display:none!important}::selection{color:#fff;background:var(--accent)}.content{padding-inline:var(--pad)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}h2{font-size:clamp(38px,4vw,60px);font-weight:550;line-height:1.2;letter-spacing:-.045em}.text-link{display:inline-flex;align-items:center;gap:40px;font-size:17px;line-height:1.5;padding-block:12px;border-bottom:1px solid #999}.text-link:hover{color:var(--accent);border-color:var(--accent)} /* One chronological project collection. All 35 remain on this page. */ .projects{padding-top:76px;padding-bottom:110px;border-top:1px solid var(--line)}.projects-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:38px}.projects-heading h2{font-size:clamp(42px,4.4vw,66px)}.projects-heading>span{font-size:16px;color:var(--muted)}.project-tools{margin-bottom:42px}.filters{display:flex;gap:30px;flex-wrap:wrap}.filters button{font-size:17px;line-height:1.5;color:var(--muted);padding:8px 0;border-bottom:1px solid transparent}.filters button[aria-pressed=true]{color:var(--ink);border-color:var(--accent)}.filters button:hover{color:var(--ink)}.search-row{display:flex;gap:28px;align-items:center;margin-top:24px}.project-search{display:flex;align-items:center;gap:12px;width:300px;padding:10px 0;border-bottom:1px solid var(--line)}.project-search input{width:100%;min-width:0;border:0;border-radius:0;background:none;font-size:16px}.year-filter select{font-size:16px;border:0;border-radius:0;border-bottom:1px solid var(--line);background:#fff;padding:10px 24px 10px 0;min-width:125px}.result-count{font-size:15px;color:var(--muted);margin-left:auto}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 28px}.project{min-width:0}.project>a{display:block;width:100%;text-align:left;scroll-margin-top:calc(var(--nav-height) + 32px)}.project-photo{aspect-ratio:3/2;overflow:hidden;background:#101010}.project-photo img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.65,.3,1)}.project>a:hover img{transform:scale(1.025)}.project-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:21px}.project-title h3{font-size:24px;line-height:1.4;font-weight:550;letter-spacing:-.025em}.project-title>span{font-size:15px;white-space:nowrap;color:var(--muted)}.role{font-size:16px;color:var(--muted);line-height:1.6;margin-top:6px}.project>a:hover h3{color:var(--accent)}.project-end{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:64px}.project-end p{font-size:14px;letter-spacing:.04em;color:var(--muted)}#load-more{min-width:240px;justify-content:space-between}.empty-state{padding-block:60px;text-align:center}.empty-state p{font-size:20px}.empty-state button{font-size:17px;padding:10px 0;margin-top:20px;border-bottom:1px solid} @media(min-width:1800px){:root{--pad:max(60px,calc((100vw - 1680px)/2))}} @media(max-width:1100px){:root{--pad:40px}.services,.artist-note,.contact-main{gap:55px;grid-template-columns:.85fr 1.35fr}.service-row{gap:15px;grid-template-columns:25px minmax(0,1fr) 32px}.service-row h3{font-size:25px}.service-row p{font-size:17px}.services-heading p{font-size:18px}.project-title h3{font-size:22px}.project-grid{gap:45px 24px}.artist-note h2{font-size:30px}.artist-note p{font-size:18px}.contact-copy>p{font-size:18px}} @media(max-width:860px){:root{--pad:28px}.services{grid-template-columns:1fr;gap:55px;padding-block:95px}.services-heading{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:end}.services-heading p{margin-top:0}.service-row{grid-template-columns:32px minmax(0,1fr) 36px;gap:22px}.service-row p{max-width:650px;font-size:18px}.artist-note,.contact-main{grid-template-columns:1fr;gap:35px}.artist-note h2{font-size:34px}.artist-note p{max-width:none}.contact-copy{max-width:650px}} @media(max-width:600px){:root{--pad:24px}.hero{height:calc(90svh - var(--nav-height));min-height:520px;max-height:800px}.hero-content{bottom:62px}.hero h1{font-size:14px;margin-bottom:22px;letter-spacing:.1em}.hero-content p{font-size:clamp(25px,6.6vw,38px);line-height:1.5;letter-spacing:-.04em}.hero-content p br{display:none}.hero-shade{background:linear-gradient(0deg,#000a,transparent 80%)}h2{font-size:36px;line-height:1.3}.services{padding-block:82px;gap:42px}.services-heading{display:block}.services-heading p{font-size:18px;line-height:1.75;margin-top:22px}.service-row{grid-template-columns:22px minmax(0,1fr) 28px;gap:12px;padding-block:28px}.service-row h3{font-size:22px;line-height:1.4}.service-number{font-size:13px;padding-top:6px}.service-row p{font-size:17px;line-height:1.8;margin-top:12px}.service-row>a{width:28px;height:36px;font-size:23px}.projects{padding-top:48px;padding-bottom:70px}.projects-heading{margin-bottom:25px}.projects-heading h2{font-size:40px}.projects-heading>span{font-size:14px}.filters{gap:6px 22px}.filters button{font-size:16px;min-height:42px}.search-row{gap:16px;flex-wrap:wrap;margin-top:16px}.project-search{width:100%}.result-count{font-size:14px}.project-tools{margin-bottom:30px}.project-grid{grid-template-columns:1fr;gap:38px}.project-title{gap:16px;margin-top:16px}.project-title h3{font-size:22px;line-height:1.4}.project-title>span{font-size:14px}.role{font-size:16px;line-height:1.6;margin-top:7px}.project-end{margin-top:42px;gap:10px}.artist-note{padding-block:48px 54px;gap:24px}.artist-note h2{font-size:29px;line-height:1.4}.artist-note p{font-size:18px;line-height:1.8}.artist-note .text-link{margin-top:16px}.text-link{font-size:16px}.contact{padding-top:54px;padding-bottom:25px}.contact h2{font-size:34px;line-height:1.4}.contact-main{gap:25px}.contact-copy>p{font-size:18px;line-height:1.8}.contact-link{font-size:19px;width:100%;margin-top:20px}.email{font-size:15px;overflow-wrap:anywhere}.footer-bottom{margin-top:65px;align-items:start;flex-direction:column;gap:19px;font-size:13px}.socials{font-size:14px;gap:24px}} @media(max-width:360px){:root{--pad:20px}.service-row{grid-template-columns:20px minmax(0,1fr) 24px;gap:9px}.service-row h3{font-size:21px}.hero-content p{font-size:25px}.contact h2{font-size:31px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} /* V12 brings back the selected v8 compositions while keeping one project archive. */ :root{--pad:60px} main>.content,.contact.content{width:100%;max-width:1800px;margin-inline:auto} .outline-button{display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:46px;padding:8px 22px;border:1px solid currentColor;font-size:16px;line-height:1.4;font-weight:500;text-align:center;transition:background .2s,color .2s}.outline-button:hover{background:#111;color:#fff;border-color:#111}.outline-light{color:#fff}.outline-light:hover{color:#111;background:#fff;border-color:#fff} .hero{height:calc(100svh - var(--nav-height));min-height:540px;max-height:1080px;position:relative;background:#101010;color:white;overflow:hidden}.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:#0004;pointer-events:none}.hero-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(80%,700px);text-align:center}.hero-brand>img{width:min(100%,610px);height:auto;margin:auto}.hero h1{font-size:28px;line-height:1.3;letter-spacing:.14em;font-weight:500;margin-top:27px}.hero p{font-size:23px;line-height:1.7;font-weight:450;letter-spacing:-.02em;margin-top:33px} .introduction{display:grid;grid-template-columns:2.433fr 1fr;gap:64px;padding-left:var(--pad);border-bottom:1px solid var(--line);max-width:1800px;margin-inline:auto;min-height:320px}.introduction-copy{display:flex;align-items:center;padding-block:60px}.introduction-copy p{font-size:clamp(25px,3.2vw,48px);line-height:1.2;font-weight:450;letter-spacing:-.03em}.introduction-copy p a{font-weight:650}.introduction-copy p a:hover{color:var(--accent)}.intro-directions{display:grid;grid-template-rows:1fr 1fr;border-left:1px solid #aaa}.intro-directions>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:26px 20px}.intro-directions>a+a{border-top:1px solid #aaa}.intro-directions strong{font-size:24px;font-weight:600;line-height:1.3}.intro-directions span{font-size:17px;line-height:1.5}.intro-directions>a:hover{background:#111;color:#fff} .capabilities{padding-block:88px 96px}.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:78px}.section-intro h2{font-size:clamp(42px,5.3vw,80px);line-height:1.02;font-weight:650;letter-spacing:-.05em}.section-intro p{font-size:32px;line-height:1.35;letter-spacing:-.025em}.service-caption{display:block;margin-top:28px;font-size:17px;color:var(--muted)}.capability-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.capability-card{min-width:0;border:1px solid #aaa}.capability-image{aspect-ratio:4/5;overflow:hidden;background:#111}.capability-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.capability-card h3{font-size:22px;line-height:1.3;font-weight:550;letter-spacing:-.025em;min-height:100px;padding:24px 13px;display:flex;align-items:center;justify-content:center;text-align:center}.capability-card:hover img{transform:scale(1.025)}.capability-card:hover h3{color:var(--accent)} .statement{height:70svh;min-height:460px;max-height:800px;position:relative;background:#111;overflow:hidden;color:#fff}.statement>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.statement::after{content:'';position:absolute;inset:0;background:#0005}.statement-copy{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 24px}.statement-copy h2{font-size:clamp(38px,4.4vw,68px);font-weight:600;line-height:1.2;letter-spacing:-.04em}.statement-copy p{font-size:21px;line-height:1.7;margin-top:24px}.statement-copy .outline-button{margin-top:32px} .contact{padding-top:68px;padding-bottom:32px}.contact-heading{display:flex;justify-content:space-between;align-items:center;gap:40px}.contact-heading h2{font-size:clamp(45px,5.8vw,86px);line-height:1.1;font-weight:650;letter-spacing:-.05em}.contact-heading .outline-button{min-width:225px;min-height:70px;font-size:18px}.footer-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:65px}.footer-columns>div{display:flex;flex-direction:column;gap:12px;padding:0 32px;border-left:1px solid #aaa;min-width:0}.footer-columns>div:first-child{padding-left:0;border:0}.footer-columns h3{font-size:26px;line-height:1.3;font-weight:600;margin-bottom:13px}.footer-columns a{font-size:16px;line-height:1.6;overflow-wrap:anywhere}.footer-columns a:hover{color:var(--accent)}.contact .footer-bottom{display:flex;flex-direction:row;align-items:end;justify-content:space-between;gap:35px;margin-top:65px;padding:0;border:0}.footer-bottom p{font-size:19px;line-height:1.8;color:var(--ink)}.contact .socials{font-size:15px;display:flex;gap:23px}.legal{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:14px;color:var(--muted);margin-top:48px}.legal>a{white-space:nowrap} @media(min-width:1800px){:root{--pad:60px}} @media(max-width:1100px){:root{--pad:40px}.introduction{gap:35px}.introduction-copy p{font-size:34px}.intro-directions strong{font-size:22px}.intro-directions span{font-size:16px}.capability-card h3{font-size:19px;padding-inline:9px}.contact .footer-bottom{align-items:start;flex-direction:column}} @media(max-width:900px){:root{--pad:28px}.section-intro p{font-size:27px}.capability-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.introduction{grid-template-columns:2fr 1fr;min-height:290px}.introduction-copy{padding-block:45px}.introduction-copy p{font-size:30px}.intro-directions strong{font-size:20px}.intro-directions span{font-size:15px}.intro-directions>a{padding-inline:14px}.contact-heading h2{font-size:48px}.contact-heading .outline-button{min-width:180px;min-height:56px;font-size:16px}.footer-columns>div{padding-inline:20px}.footer-columns h3{font-size:23px}.footer-columns a{font-size:15px}} @media(max-width:600px){:root{--pad:20px}.hero{height:calc(90svh - var(--nav-height));min-height:520px;max-height:800px}.hero-brand{width:86%;top:48%}.hero h1{font-size:21px;letter-spacing:.12em;margin-top:22px}.hero p{font-size:20px;line-height:1.7;margin-top:28px}.introduction{display:block;padding:0;min-height:0;padding-bottom:32px}.introduction-copy{padding:35px 20px 28px}.introduction-copy p{font-size:25px;line-height:1.35}.intro-directions{grid-template-columns:1fr 1fr;grid-template-rows:auto;border:0;margin:0 20px;gap:10px}.intro-directions>a,.intro-directions>a+a{border:1px solid #999;min-height:88px;padding:12px 7px;gap:7px}.intro-directions strong{font-size:18px}.intro-directions span{font-size:14px;word-break:keep-all}.capabilities{padding-block:54px 60px}.section-intro{display:block;margin-bottom:42px}.section-intro h2{font-size:42px;line-height:1.08}.section-intro>div{margin-top:25px}.section-intro p{font-size:25px;line-height:1.4}.service-caption{font-size:16px;margin-top:20px}.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.capability-card h3{font-size:18px;padding:18px 9px;min-height:84px}.statement{height:70svh;min-height:430px}.statement-copy h2{font-size:35px;line-height:1.3}.statement-copy p{font-size:18px}.statement-copy .outline-button{font-size:15px;min-height:46px;min-width:190px}.contact{padding-top:46px;padding-bottom:26px}.contact-heading{display:block}.contact-heading h2{font-size:41px}.contact-heading .outline-button{margin-top:25px;min-height:50px;min-width:180px}.footer-columns{grid-template-columns:1fr 1fr;gap:30px 18px;margin-top:43px}.footer-columns>div{padding:0;border:0}.footer-columns>div:last-child{grid-column:1/-1;border-top:1px solid var(--line);padding-top:25px}.footer-columns h3{font-size:22px;margin-bottom:6px}.footer-columns a{font-size:16px}.contact .footer-bottom{margin-top:38px;gap:25px}.footer-bottom p{font-size:17px;line-height:1.8}.footer-bottom p br{display:none}.contact .socials{font-size:14px;gap:22px}.legal{margin-top:33px;align-items:start;font-size:12px;gap:16px}} @media(max-width:379px){.footer-columns{grid-template-columns:1fr}.footer-columns>div+div{border-top:1px solid var(--line);padding-top:24px}.hero p{font-size:19px}.section-intro h2{font-size:38px}.capability-card h3{font-size:17px}.statement-copy h2{font-size:31px}} .case-heading{padding-top:44px;padding-bottom:52px}.back-link{font-size:16px;color:var(--muted);display:inline-block;padding-block:8px}.back-link:hover{color:var(--accent)}.case-heading-row{display:grid;grid-template-columns:1.5fr .65fr;gap:70px;align-items:end;margin-top:64px}.case-kicker{font-size:15px;margin-bottom:24px;letter-spacing:.02em;color:var(--muted)}.case-heading h1{font-size:clamp(44px,5.3vw,84px);font-weight:550;line-height:1.13;letter-spacing:-.05em;word-break:keep-all;max-width:1100px}.case-subtitle{font-size:25px;line-height:1.65;letter-spacing:-.025em;max-width:360px;padding-bottom:4px}.case-cover button{display:block;width:100%;position:relative;text-align:left;overflow:hidden;background:#111}.case-cover img{width:100%;height:min(76svh,880px);min-height:400px;object-fit:cover}.case-cover button>span{position:absolute;right:24px;bottom:22px;padding:7px 13px;background:#111b;color:#fff;font-size:14px}.case-index{display:flex;gap:35px;align-items:center;border-bottom:1px solid var(--line);padding-block:23px}.case-index a{font-size:16px;padding:6px 0}.case-index a:hover{color:var(--accent)}.case-overview{padding-block:105px;display:grid;grid-template-columns:.4fr 1fr;gap:70px}.section-label{font-size:16px;font-weight:500;line-height:1.5;color:var(--muted)}.case-lead{font-size:clamp(25px,2.5vw,38px);font-weight:450;line-height:1.65;letter-spacing:-.03em;max-width:1030px}.case-facts{display:grid;grid-template-columns:.8fr .4fr 1.3fr;gap:32px;margin-top:62px;padding-top:25px;border-top:1px solid var(--line)}.case-facts dt{font-size:14px;color:var(--muted);margin-bottom:12px}.case-facts dd{font-size:18px;line-height:1.65;word-break:keep-all}.case-experience,.case-process,.case-documentation{padding-block:100px;border-top:1px solid var(--line)}.case-section-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;margin-bottom:54px}.case-section-heading h2{font-size:clamp(34px,3.5vw,54px);margin-top:22px;line-height:1.3;font-weight:500}.case-section-heading>p{font-size:20px;line-height:1.8;max-width:610px;color:var(--muted)}.experience-flow{display:grid;grid-template-columns:repeat(var(--flow-count,3),minmax(0,1fr));gap:32px;margin-bottom:62px}.flow-step{border-top:1px solid #bbb;padding-top:22px}.flow-step>span{font-size:14px;color:var(--accent)}.flow-step h3{font-size:25px;font-weight:550;line-height:1.4;margin-top:24px}.flow-step p{font-size:18px;line-height:1.8;color:var(--muted);margin-top:15px}.source-map{margin-bottom:70px}.source-map button{display:block;width:100%;border:1px solid var(--line)}.source-map img{width:100%;height:auto}.source-map figcaption{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:14px;gap:20px}.implementation-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 65px}.implementation-note{padding-top:24px;border-top:1px solid var(--line)}.implementation-note h3{font-size:24px;line-height:1.4;font-weight:550}.implementation-note p{font-size:18px;line-height:1.85;color:var(--muted);margin-top:17px;max-width:650px}.editorial-note{display:grid;grid-template-columns:230px 1fr;gap:32px;border-left:2px solid var(--accent);padding:8px 0 8px 24px;margin-bottom:44px}.editorial-note strong{font-size:15px;line-height:1.8;font-weight:550;color:var(--accent)}.editorial-note p{font-size:16px;line-height:1.8;color:var(--muted);max-width:850px}.process-steps{list-style:none}.process-steps li{display:grid;grid-template-columns:64px .75fr 1.5fr;gap:32px;border-top:1px solid var(--line);padding-block:32px}.process-steps .step-number{font-size:14px;color:var(--accent);padding-top:7px}.process-steps h3{font-size:27px;line-height:1.5;font-weight:500}.process-steps p{font-size:18px;line-height:1.85;color:var(--muted);max-width:800px}.documentation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;align-items:start}.documentation-grid figure.is-wide{grid-column:1/-1}.documentation-grid button{display:block;width:100%;background:#111}.documentation-grid img{width:100%;height:auto}.documentation-grid figcaption{font-size:14px;color:var(--muted);display:flex;gap:25px;justify-content:space-between;padding-top:13px}.case-inquiry{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:70px;border-block:1px solid var(--line)}.case-inquiry p{font-size:22px;line-height:1.5}.case-inquiry>a{font-size:clamp(28px,3.3vw,50px);line-height:1.4;letter-spacing:-.04em}.case-inquiry>a>span{color:var(--accent);margin-left:35px}.case-inquiry>a:hover{color:var(--accent)}.project-neighbors{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-block:70px 90px}.project-neighbors>a{min-width:0}.project-neighbors span{display:block;font-size:14px;color:var(--muted);margin-bottom:18px}.project-neighbors strong{display:block;font-size:27px;line-height:1.5;word-break:keep-all;font-weight:500}.project-neighbors>a:hover strong{color:var(--accent)}#next-case{text-align:right}.detail-footer{display:flex;align-items:center;gap:35px;border-top:1px solid var(--line);padding-block:27px;font-size:14px;color:var(--muted)}.detail-footer>span{margin-right:auto}.case-not-found{min-height:60svh;padding-block:100px}.case-not-found h1{font-size:38px;line-height:1.5;margin-bottom:25px}body.dialog-open{overflow:hidden}#image-viewer{width:calc(100% - 48px);max-width:1600px;max-height:94svh;margin:auto;border:0;background:#101010;color:#fff;padding:0}#image-viewer::backdrop{background:#000d}.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;font-size:15px}.viewer-toolbar button{color:#fff;min-height:40px}.viewer-stage{position:relative}.viewer-stage img{width:100%;height:calc(94svh - 125px);object-fit:contain}.viewer-stage>button{position:absolute;top:50%;transform:translateY(-50%);background:#fff;color:#111;width:44px;height:44px;font-size:24px}#viewer-prev{left:15px}#viewer-next{right:15px}#viewer-caption{font-size:14px;color:#ccc;padding:12px 20px} @media(max-width:1000px){.case-heading-row{gap:40px;grid-template-columns:1.4fr .7fr}.case-subtitle{font-size:21px}.case-overview{gap:40px;grid-template-columns:.3fr 1fr}.case-section-heading{gap:40px}.experience-flow{gap:25px}.flow-step h3{font-size:23px}.process-steps li{grid-template-columns:38px .8fr 1.4fr;gap:24px}.process-steps h3{font-size:24px}.case-inquiry{align-items:start;flex-direction:column;gap:25px}} @media(max-width:700px){.case-heading{padding-block:25px 32px}.case-heading-row{display:block;margin-top:35px}.case-kicker{font-size:14px;margin-bottom:18px}.case-heading h1{font-size:clamp(32px,7.8vw,50px);line-height:1.2}.case-subtitle{font-size:21px;line-height:1.6;margin-top:26px;max-width:480px}.case-cover img{min-height:0;height:auto;aspect-ratio:4/3}.case-cover button>span{font-size:12px;right:12px;bottom:12px}.case-index{gap:22px;overflow-x:auto;white-space:nowrap;padding-block:17px}.case-index a{font-size:14px;flex-shrink:0}.case-overview{display:block;padding-block:58px}.case-overview>.section-label{margin-bottom:24px}.case-lead{font-size:24px;line-height:1.7}.case-facts{margin-top:36px;grid-template-columns:1fr 1fr;gap:26px}.case-facts>div:last-child{grid-column:1/-1}.case-facts dd{font-size:17px}.case-experience,.case-process,.case-documentation{padding-block:58px}.case-section-heading{display:block;margin-bottom:34px}.case-section-heading h2{font-size:33px;margin-top:18px}.case-section-heading>p{font-size:18px;margin-top:23px}.experience-flow{grid-template-columns:1fr;gap:28px;margin-bottom:40px}.flow-step{padding-top:16px}.flow-step h3{font-size:24px;margin-top:13px}.flow-step p{font-size:17px;margin-top:10px}.source-map{margin-bottom:40px}.source-map figcaption{font-size:12px;flex-direction:column;gap:5px}.implementation-notes{grid-template-columns:1fr;gap:28px}.implementation-note h3{font-size:23px}.implementation-note p{font-size:17px;margin-top:12px}.editorial-note{display:block;padding-left:17px;margin-bottom:28px}.editorial-note p{font-size:15px;margin-top:8px}.process-steps li{grid-template-columns:25px minmax(0,1fr);gap:10px 16px;padding-block:25px}.process-steps h3{font-size:23px}.process-steps p{grid-column:2;font-size:17px}.documentation-grid{grid-template-columns:1fr;gap:30px}.documentation-grid figcaption{font-size:13px}.case-inquiry{padding-block:42px}.case-inquiry p{font-size:18px}.case-inquiry>a{font-size:29px}.case-inquiry>a>span{margin-left:20px}.project-neighbors{gap:28px;padding-block:42px 55px}.project-neighbors strong{font-size:20px}.project-neighbors span{font-size:13px;margin-bottom:12px}.detail-footer{font-size:12px;gap:18px;flex-wrap:wrap}.detail-footer>span{width:100%}#image-viewer{width:calc(100% - 16px)}.viewer-toolbar{padding:8px 12px}.viewer-stage>button{width:36px;height:40px;font-size:20px}#viewer-prev{left:8px}#viewer-next{right:8px}} .case-subtitle,#experience-title{white-space:pre-line} /* v12: an editorial column, independent from the landing page's full-width imagery. */ #case-page{max-width:1240px;margin-inline:auto} #case-page .content,.detail-footer,.case-not-found{width:100%;max-width:1180px;margin-inline:auto;padding-left:40px;padding-right:40px} .case-heading{padding-top:38px;padding-bottom:42px}.case-heading-row{grid-template-columns:1.5fr .8fr;gap:46px;margin-top:48px} .case-heading h1{font-size:clamp(42px,4.2vw,66px);line-height:1.18}.case-subtitle{font-size:22px} .case-cover img{height:auto;min-height:0;max-height:none;aspect-ratio:16/9;object-fit:cover} .case-index{padding-block:20px}.case-overview{grid-template-columns:220px minmax(0,1fr);gap:42px;padding-block:78px} .case-lead{font-size:28px;line-height:1.7;max-width:740px}.case-facts{gap:22px;margin-top:42px} .case-experience,.case-process,.case-documentation{padding-block:76px}.case-section-heading{gap:44px;margin-bottom:42px} .case-section-heading h2{font-size:38px}.case-section-heading>p{font-size:18px}.experience-flow{gap:24px}.flow-step h3{font-size:23px}.flow-step p{font-size:17px} .implementation-notes{gap:35px 48px}.implementation-note p{font-size:17px}.process-steps li{grid-template-columns:38px .75fr 1.5fr;gap:25px}.process-steps h3{font-size:24px}.process-steps p{font-size:17px} .case-inquiry{padding-block:50px}.case-inquiry>a{font-size:36px}.project-neighbors{padding-block:50px 64px}.project-neighbors strong{font-size:24px} @media(max-width:900px){#case-page .content,.detail-footer,.case-not-found{padding-inline:28px}.case-overview{grid-template-columns:160px minmax(0,1fr);gap:30px}.case-heading-row{gap:30px}.case-subtitle{font-size:20px}.case-lead{font-size:25px}} @media(max-width:700px){#case-page .content,.detail-footer,.case-not-found{padding-inline:20px}.case-heading{padding-block:25px 32px}.case-heading-row{display:block;margin-top:34px}.case-heading h1{font-size:clamp(32px,7.8vw,46px)}.case-subtitle{font-size:21px}.case-cover img{aspect-ratio:4/3}.case-overview{display:block;padding-block:52px}.case-lead{font-size:23px}.case-facts{margin-top:32px;gap:22px}.case-experience,.case-process,.case-documentation{padding-block:52px}.case-section-heading h2{font-size:31px}.case-section-heading{margin-bottom:32px}.experience-flow{gap:26px}.process-steps li{grid-template-columns:25px minmax(0,1fr);gap:10px 16px}.process-steps h3{font-size:22px}.case-inquiry>a{font-size:28px}.project-neighbors{padding-block:40px 50px}.project-neighbors strong{font-size:20px}} /* V16: a deliberate reading order within the existing 1180px content boundary. */ .case-heading{padding-top:32px;padding-bottom:30px} .case-heading-row{display:block;margin-top:34px}.case-heading h1{font-size:clamp(36px,4.5vw,60px);font-weight:680;max-width:950px;line-height:1.2} .case-kicker{font-size:16px;margin-bottom:18px}.case-subtitle{max-width:850px;font-size:24px;font-weight:500;line-height:1.5;white-space:normal;margin-top:22px;padding:0} .case-overview{display:block;padding-top:0;padding-bottom:48px} .case-overview>.section-label{font-size:16px;font-weight:500;line-height:1.5;margin:0 0 14px;color:#656565;letter-spacing:0} .case-lead{font-size:22px;font-weight:400;line-height:1.8;max-width:900px;letter-spacing:-.02em;color:#4b4b4b} .case-lead strong,.implementation-table strong{font-weight:700;color:#141414} .case-facts{grid-template-columns:1fr .45fr 1.6fr;gap:32px;margin-top:30px;padding-top:23px}.case-facts dt{font-size:15px;margin-bottom:7px}.case-facts dd{font-size:18px;line-height:1.6;font-weight:550} .case-scope{margin-top:24px;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px} .case-scope h3{font-size:17px;font-weight:650;line-height:1.65}.case-scope p{font-size:18px;line-height:1.7;color:#444;max-width:800px} .case-index{gap:32px;padding-block:20px}.case-index a{font-size:17px;font-weight:500} .case-experience,.case-documentation{padding-block:65px}.case-section-heading{display:block;margin-bottom:32px}.case-section-heading h2{font-size:38px;font-weight:650;margin-top:12px;line-height:1.25;max-width:820px}.case-section-heading>p{margin-top:18px;font-size:19px;line-height:1.75;max-width:810px;color:#555} .flow-diagram{margin:34px 0 44px}.flow-diagram>figcaption{font-size:19px;line-height:1.5;font-weight:650;margin-bottom:19px} .experience-flow{gap:28px;margin-bottom:0} .flow-step{position:relative;border:1px solid #bfbfbf;border-top:2px solid #141414;padding:20px 18px 22px;min-width:0;background:white} .flow-step>span{font-size:15px}.flow-step h3{font-weight:650;font-size:22px;line-height:1.4;margin-top:13px}.flow-step p{font-size:17px;line-height:1.7;margin-top:12px;color:#555} .flow-step:not(:last-child)::after{content:'→';position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);width:22px;text-align:center;font-size:21px;font-weight:400;color:#777} .concept-flow .flow-step:not(:last-child)::after{content:'＋';font-size:18px} .implementation-notes{display:block}.implementation-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:18px;line-height:1.8} .implementation-table caption{text-align:left;font-size:22px;line-height:1.5;font-weight:650;padding-bottom:20px} .implementation-table th,.implementation-table td{padding:22px 24px;vertical-align:top;border-bottom:1px solid #ddd;word-break:keep-all;overflow-wrap:anywhere} .implementation-table thead th{font-size:16px;font-weight:550;border-top:2px solid #222;background:#f7f7f7;padding-block:13px;color:#555} .implementation-table th:first-child{width:29%}.implementation-table tbody th{font-size:19px;font-weight:650;padding-left:0}.implementation-table thead th:first-child{padding-left:18px}.implementation-table td{color:#4c4c4c;padding-right:0} .source-evidence{margin-top:34px;border-block:1px solid #ccc}.source-evidence summary{padding:20px 0;cursor:pointer;font-size:18px;font-weight:550;line-height:1.5}.source-evidence summary>span{font-size:15px;color:#777;margin-left:24px;font-weight:400} .source-map{margin:10px 0 26px}.source-map figcaption{font-size:15px} .case-process{padding-block:30px;border-top:1px solid #ddd}.process-disclosure>summary{display:flex;align-items:center;gap:24px;cursor:pointer;list-style:none;padding:10px 0}.process-disclosure>summary::-webkit-details-marker{display:none}.process-disclosure>summary::after{content:'＋';font-size:28px;line-height:1;margin-left:auto}.process-disclosure[open]>summary::after{content:'−'} .process-disclosure>summary .section-label{display:block;font-size:16px}.process-disclosure>summary strong{display:block;font-size:30px;font-weight:600;line-height:1.35;margin-top:7px}.draft-badge{font-size:15px;color:#a13b29;padding:3px 10px;border:1px solid #d9b8b0;white-space:nowrap} .editorial-note{display:block;margin:30px 0 28px;padding:3px 0 3px 18px}.editorial-note strong{font-size:16px;font-weight:600}.editorial-note p{font-size:16px;line-height:1.75;margin-top:6px;max-width:870px} .process-steps li{grid-template-columns:32px minmax(0,1fr);gap:8px 24px;padding-block:25px}.process-steps .step-number{grid-row:1/3;font-size:16px;padding-top:3px}.process-steps h3{font-size:24px;font-weight:650;line-height:1.5}.process-steps p{grid-column:2;font-size:18px;line-height:1.8;max-width:850px} .documentation-grid figcaption{font-size:15px}.documentation-grid{gap:32px 24px} @media(max-width:1000px){.experience-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.flow-step:not(:last-child)::after{display:none}.case-facts{gap:24px}.implementation-table th,.implementation-table td{padding-inline:18px}.implementation-table tbody th{padding-left:0}.implementation-table td{padding-right:0}} @media(max-width:700px){.case-heading{padding-block:24px}.case-heading-row{margin-top:27px}.case-heading h1{font-size:clamp(31px,8vw,44px)}.case-kicker{font-size:15px;margin-bottom:16px}.case-subtitle{font-size:21px;margin-top:18px}.case-overview{padding-top:0;padding-bottom:32px}.case-lead{font-size:20px;line-height:1.75}.case-facts{grid-template-columns:1fr 80px;margin-top:25px;gap:22px}.case-facts dd{font-size:17px}.case-scope{display:block;margin-top:22px;padding-top:18px}.case-scope p{font-size:17px;margin-top:9px;line-height:1.75}.case-index{gap:23px;padding-block:15px}.case-index a{font-size:16px}.case-experience,.case-documentation{padding-block:44px}.case-section-heading h2{font-size:30px;line-height:1.35}.case-section-heading>p{font-size:18px;margin-top:16px}.flow-diagram{margin:26px 0 36px}.experience-flow{grid-template-columns:1fr;gap:26px}.flow-step{padding:17px 18px}.flow-step h3{font-size:22px;margin-top:9px}.flow-step p{font-size:17px;margin-top:9px}.flow-step:not(:last-child)::after{display:block;content:'↓';left:50%;top:calc(100% + 1px);transform:translateX(-50%);height:24px;font-size:19px;line-height:24px}.concept-flow .flow-step:not(:last-child)::after{content:'＋';font-size:17px}.implementation-table{font-size:17px;line-height:1.8}.implementation-table caption{font-size:22px;padding-bottom:18px}.implementation-table thead{display:none}.implementation-table tbody,.implementation-table tr,.implementation-table th,.implementation-table td{display:block;width:100%}.implementation-table tr{padding:20px 0;border-top:1px solid #ddd}.implementation-table th:first-child{width:100%}.implementation-table tbody th{border:0;padding:0;font-size:20px}.implementation-table td{border:0;padding:10px 0 0;font-size:17px}.source-evidence summary{font-size:17px}.source-evidence summary>span{display:block;margin:5px 0 0 18px;font-size:15px}.source-map figcaption{font-size:14px}.process-disclosure>summary{gap:12px;flex-wrap:wrap}.process-disclosure>summary strong{font-size:25px}.draft-badge{font-size:14px}.process-disclosure>summary::after{font-size:24px}.process-steps li{gap:7px 14px;grid-template-columns:24px minmax(0,1fr)}.process-steps h3{font-size:22px}.process-steps p{font-size:17px}.documentation-grid figcaption{font-size:14px;gap:14px}} /* Client-first case studies: actions, visible experience, and our contribution. */ .case-facts dd{font-weight:450}.case-facts>div:last-child dd{font-weight:550} .case-scope{grid-template-columns:180px minmax(0,1fr)}.case-scope p{color:#414141} .case-subtitle{font-weight:550}.case-lead{max-width:940px}.case-lead strong{font-weight:680} .case-source,.case-contribution{padding-block:56px;border-top:1px solid var(--line)} .case-source .case-section-heading>h2{font-size:36px;line-height:1.3;font-weight:650;margin-top:10px;letter-spacing:-.035em} .case-source .case-section-heading>p:first-child{font-size:16px;margin:0;color:var(--muted)} .case-source .source-map{margin:0}.case-source .source-map img{width:100%;height:auto}.case-source .source-map button{cursor:zoom-in;background:#fff} .case-index{gap:26px;flex-wrap:wrap}.case-index a{font-size:16px} .flow-step{padding:18px 22px 24px;border:1px solid #ddd;border-top:1px solid #ddd} .journey-illustration{width:100%;height:150px;object-fit:contain;margin-bottom:22px} .flow-step h3{font-size:23px;line-height:1.4;font-weight:650}.flow-step p{font-size:18px;color:#555} .flow-diagram{margin-bottom:0}.flow-step:not(:last-child)::after{color:#d92b16} .implementation-table{font-size:18px;line-height:1.75} .implementation-table th:first-child{width:28%}.implementation-table th:nth-child(2){width:32%}.implementation-table th:nth-child(3){width:40%} .implementation-table tbody th{font-weight:450;font-size:18px} .implementation-table td{padding:22px}.implementation-table td:last-child{padding-right:0}.implementation-table th,.implementation-table td{overflow-wrap:break-word} .implementation-table caption{font-size:30px;line-height:1.4;letter-spacing:-.03em;padding-bottom:26px}.implementation-table strong{font-weight:650} @media(max-width:900px){.case-index{gap:16px 24px}.case-source .case-section-heading>h2{font-size:31px}.journey-illustration{height:130px}.implementation-table{font-size:17px}.implementation-table td{padding:20px 16px}} @media(max-width:700px){.case-scope{display:block}.case-source,.case-contribution{padding-block:40px}.case-source .case-section-heading>h2{font-size:28px}.case-source .case-section-heading>p{font-size:17px}.case-index{flex-wrap:nowrap;gap:24px}.flow-step{padding:18px 20px 23px}.journey-illustration{height:140px;margin-bottom:18px}.flow-step h3{font-size:23px}.flow-step p{font-size:18px}.implementation-table caption{font-size:25px;padding-bottom:18px}.implementation-table th:first-child,.implementation-table th:nth-child(2),.implementation-table th:nth-child(3){width:100%}.implementation-table tbody th{font-size:19px;font-weight:500}.implementation-table tbody th::before{content:'관객이 하는 일';display:block;font-size:15px;line-height:1.5;color:#666;margin-bottom:7px;font-weight:400}.implementation-table td{padding:16px 0 0;font-size:18px}.implementation-table td:nth-child(2)::before{content:'눈앞에서 일어나는 변화';display:block;font-size:15px;line-height:1.5;color:#666;margin-bottom:7px}.implementation-table td:nth-child(3)::before{content:'노브컴파일이 만든 부분';display:block;font-size:15px;line-height:1.5;color:#666;margin-bottom:7px}.source-map figcaption{font-size:14px}} .implementation-table caption{word-break:keep-all} /* v19: monochrome label + consistent illustrated visitor journeys. Header geometry unchanged. */ .hero h1{display:table;width:auto;margin-inline:auto;background:#fff;color:#111;padding:7px 12px 7px 16px;line-height:1.15;font-weight:550} .flow-step{padding:0 22px 25px;border:0;border-bottom:1px solid #c9c9c9;background:#fff} .journey-art{width:calc(100% + 44px);margin-left:-22px;height:250px;background-size:calc(var(--panels) * 100%) auto;background-repeat:no-repeat;margin-bottom:24px} .journey-art--p34{height:340px;background-size:200% auto} .flow-step>span{font-size:15px;color:#555;font-weight:500;letter-spacing:.03em} .flow-step h3{margin-top:12px;margin-bottom:12px;font-size:24px;line-height:1.4;color:#111} .flow-step p{font-size:18px;line-height:1.75;color:#333} .flow-step:not(:last-child)::after{color:#111;top:125px;right:-25px;background:#fff} @media(max-width:900px) and (min-width:701px){.journey-art{height:190px}.journey-art--p34{height:290px}} @media(max-width:700px){.hero h1{padding:6px 10px 6px 12px}.flow-step{padding:0 0 28px}.journey-art{width:100%;max-width:360px;height:290px;margin:0 auto 16px}.journey-art--p34{height:340px}.flow-step:not(:last-child)::after{top:auto;bottom:-27px;right:50%;background:#fff}.flow-step h3{font-size:24px}} .journey-art{width:calc(100% + 44px);height:auto;aspect-ratio:0.9;max-width:400px;clip-path:inset(0 1.5%)} .journey-art--p34{width:100%;max-width:360px;margin-inline:auto} .flow-step:not(:last-child)::after{top:170px} @media(max-width:700px){.journey-art{width:100%;max-width:360px;margin-inline:auto}.flow-step:not(:last-child)::after{top:auto}} .illustration-note{font-size:14px;line-height:1.7;color:#666;margin-top:26px}.flow-step h3{word-break:keep-all}.journey-art{max-width:none}.journey-art--p34{max-width:360px}.flow-step p{word-break:keep-all}.journey-art--p29,.journey-art--p28,.journey-art--p35{aspect-ratio:.84}@media(max-width:700px){.journey-art{max-width:360px}.illustration-note{font-size:14px}} .kb-story{padding-block:64px 50px}.kb-story-heading{max-width:900px;margin-bottom:54px}.kb-story-heading h2{font-size:40px;font-weight:600;line-height:1.3;letter-spacing:-.04em;margin:16px 0 22px}.kb-story-heading>p:last-child{font-size:20px;line-height:1.8;color:#555;max-width:810px}.kb-story-stages{list-style:none;margin:0;padding:0}.kb-story-stage{list-style:none;border-top:1px solid #111;padding-top:24px;margin-top:48px}.kb-stage-heading{display:flex;gap:20px;align-items:baseline}.kb-stage-heading>span{font-size:17px;font-weight:500;color:#666}.kb-stage-heading h3{font-size:28px;font-weight:600;line-height:1.4;letter-spacing:-.025em}.kb-story-row{display:grid;grid-template-columns:1fr 1.12fr;gap:64px;align-items:center;padding:28px 0 40px}.kb-story-art{width:100%;aspect-ratio:1.06;background-size:300% auto;background-repeat:no-repeat;clip-path:inset(0 1%)}.kb-story-copy h4{font-size:30px;line-height:1.4;font-weight:600;letter-spacing:-.035em;margin:14px 0 22px}.kb-story-action{font-size:18px;color:#555;line-height:1.85}.kb-story-result{font-size:20px;line-height:1.75;margin-top:12px}.kb-story-result strong{font-weight:600}.kb-story-role{border-top:1px solid #ddd;padding-top:17px;margin-top:25px}.kb-story-role>span{font-size:14px;color:#777}.kb-story-role>p{font-size:17px;line-height:1.85;color:#555;margin-top:8px}.kb-space-content{border-left:1px solid #bbb;padding-left:30px;margin:8px 0 40px}.kb-space-intro{padding-top:20px;padding-bottom:8px}.kb-space-intro h4{font-size:23px;font-weight:600;line-height:1.4}.kb-space-intro>p{font-size:18px;line-height:1.85;color:#555;max-width:770px;margin-top:14px}.kb-space-content .kb-story-row+.kb-story-row{border-top:1px solid #ddd}.kb-story p{word-break:keep-all}.kb-story>.illustration-note{border-top:1px solid #ddd;padding-top:22px;font-size:14px;line-height:1.8;color:#777;margin-top:20px}.kb-story-stage:last-child{margin-bottom:0}@media(max-width:900px){.kb-story-row{gap:30px}.kb-story-copy h4{font-size:27px}.kb-story-heading h2{font-size:35px}}@media(max-width:700px){.kb-story{padding-top:45px}.kb-story-heading{margin-bottom:36px}.kb-story-heading h2{font-size:31px}.kb-story-heading>p:last-child{font-size:18px}.kb-stage-heading h3{font-size:25px}.kb-story-stage{margin-top:32px;padding-top:19px}.kb-story-row{display:block;padding:15px 0 32px}.kb-story-art{max-width:370px;margin:auto;aspect-ratio:.96}.kb-story-copy{padding-top:10px}.kb-story-copy h4{font-size:27px}.kb-story-result{font-size:20px}.kb-space-content{padding-left:16px;margin-bottom:30px}.kb-space-intro h4{font-size:22px}.kb-space-intro>p{font-size:17px}.kb-story-morph .kb-story-art{aspect-ratio:1.7}} .kb-context-photo{margin:24px 0 0;max-width:360px}.kb-context-photo button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;text-align:left}.kb-context-photo img{display:block;width:auto;max-width:100%;height:220px;object-fit:contain}.kb-context-photo figcaption{font-size:13px;line-height:1.7;color:#666;margin-top:8px}.kb-context-photo button:focus-visible{outline:2px solid #111;outline-offset:4px}@media(max-width:700px){.kb-context-photo{max-width:100%}.kb-context-photo img{height:auto;max-height:290px;width:auto}} /* KB v23 — clear hierarchy, independent photography, readable implementation diagram. */ .kb-detail-v23 .case-heading{padding-bottom:38px}.kb-detail-v23 .case-heading-row{display:block;margin-top:38px}.kb-detail-v23 .case-heading h1{max-width:920px;font-size:clamp(38px,4.1vw,60px)}.kb-detail-v23 .case-kicker{margin-bottom:20px}.kb-detail-v23 .case-subtitle{max-width:850px;font-size:21px;font-weight:400;line-height:1.7;margin-top:24px;padding:0}.kb-detail-v23 .case-heading .case-facts{margin-top:34px;grid-template-columns:.65fr .35fr 1.6fr;gap:28px;padding-top:22px;padding-bottom:0;border-bottom:0}.kb-detail-v23 .case-facts dt{font-size:14px;margin-bottom:7px}.kb-detail-v23 .case-facts dd{font-size:17px;line-height:1.7;font-weight:400}.kb-detail-v23 .case-facts>div:last-child dd{font-weight:500}.kb-detail-v23 .case-cover{margin-bottom:0}.kb-detail-v23 .case-cover img{aspect-ratio:16/9}.kb-detail-v23 .case-overview{display:block;padding-top:64px;padding-bottom:52px;border-top:0}.kb-detail-v23 .kb-section-title{font-size:34px;line-height:1.35;font-weight:600;letter-spacing:-.035em;color:#111;margin:0 0 24px}.kb-detail-v23 .case-lead{max-width:980px;font-size:25px;line-height:1.85;letter-spacing:-.02em}.kb-detail-v23 .case-lead strong{font-weight:600}.kb-detail-v23 .kb-system{padding-block:52px 64px;border-top:1px solid #ccc}.kb-system-heading>p{font-size:20px;line-height:1.8;color:#555;max-width:890px}.kb-connection-map{margin-top:34px;border:1px solid #bdbdbd;padding:27px 26px}.kb-map-label{font-size:15px;line-height:1.5;color:#555;font-weight:500}.kb-system-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;margin:25px 0 0;padding:0}.kb-system-path li{position:relative;min-width:0;padding:20px 12px;border-top:2px solid #111}.kb-system-path li:not(:last-child)::after{content:'→';position:absolute;right:-25px;top:53px;font-size:22px;color:#666}.kb-node-type{font-size:13px;color:#666;line-height:1.6}.kb-system-path h3{font-size:21px;line-height:1.5;letter-spacing:-.025em;font-weight:600;margin-top:10px}.kb-system-path p,.kb-system-features p{font-size:16px;line-height:1.8;color:#555;margin-top:10px}.kb-system-content{border-top:1px solid #ccc;margin-top:15px;padding-top:24px}.kb-system-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:20px}.kb-system-features>div{padding:0 18px;border-left:1px solid #ccc}.kb-system-features>div:first-child{padding-left:0;border-left:0}.kb-system-features h3{font-size:20px;font-weight:550;line-height:1.5}.kb-detail-v23 .kb-story{padding-top:58px}.kb-detail-v23 .kb-story-heading{margin-bottom:38px}.kb-detail-v23 .kb-story-heading h2{font-size:34px}.kb-detail-v23 .kb-story-row{gap:56px;padding-top:15px;padding-bottom:28px}.kb-detail-v23 .kb-story-art{aspect-ratio:1.08}.kb-detail-v23 .kb-story-heading>p:last-child{font-size:19px}.kb-detail-v23 .kb-story-stage{margin-top:35px}.kb-detail-v23 .kb-photo-essay{padding-block:60px}.kb-photo-heading>p{font-size:19px;line-height:1.8;color:#555;max-width:860px}.kb-photo-group{margin-top:42px}.kb-photo-group-heading{margin-bottom:18px;display:flex;gap:30px;align-items:baseline;justify-content:space-between}.kb-photo-group-heading h3{font-size:22px;font-weight:600;line-height:1.5;flex-shrink:0}.kb-photo-group-heading p{font-size:16px;color:#666;line-height:1.8;max-width:660px;text-align:right}.kb-photo-groups{display:block}.kb-photo-row{display:flex;gap:14px;align-items:flex-start;margin-top:14px}.kb-photo-row figure{flex:var(--photo-ratio) 1 0;min-width:0;margin:0}.kb-photo-row button{display:block;aspect-ratio:var(--photo-ratio);width:100%;border:0;padding:0;background:#fff;cursor:zoom-in;overflow:hidden}.kb-photo-row img{display:block;width:100%;height:100%;object-fit:contain}.kb-photo-row button:focus-visible{outline:2px solid #111;outline-offset:4px}.kb-detail-v23 #viewer-count[hidden]{display:none}.kb-detail-v23 .viewer-toolbar{justify-content:flex-end}.kb-detail-v23 #process-map{scroll-margin-top:90px} @media(max-width:900px){.kb-system-path{gap:20px}.kb-connection-map{padding:22px 18px}.kb-system-path li{padding-inline:2px}.kb-system-path li:not(:last-child)::after{right:-19px}.kb-system-path h3{font-size:19px}.kb-system-path p{font-size:15px}.kb-photo-group-heading{display:block}.kb-photo-group-heading p{text-align:left;margin-top:8px}.kb-detail-v23 .kb-story-row{gap:32px}} @media(max-width:700px){.kb-detail-v23 .case-heading{padding-bottom:30px}.kb-detail-v23 .case-heading h1{font-size:36px}.kb-detail-v23 .case-subtitle{font-size:19px;margin-top:20px}.kb-detail-v23 .case-heading .case-facts{grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.kb-detail-v23 .case-facts>div:last-child{grid-column:1/-1}.kb-detail-v23 .case-facts dd{font-size:16px}.kb-detail-v23 .case-cover img{aspect-ratio:4/3}.kb-detail-v23 .case-overview{padding-block:42px}.kb-detail-v23 .kb-section-title,.kb-detail-v23 .kb-story-heading h2{font-size:29px;margin-bottom:20px}.kb-detail-v23 .case-lead{font-size:21px;line-height:1.85}.kb-detail-v23 .kb-system{padding-block:40px}.kb-system-heading>p{font-size:18px}.kb-connection-map{padding:22px 20px;margin-top:26px}.kb-system-path{display:block;margin-top:22px}.kb-system-path li{padding:18px 0 24px}.kb-system-path li:not(:last-child){margin-bottom:22px}.kb-system-path li:not(:last-child)::after{content:'↓';right:auto;left:0;top:auto;bottom:-16px;font-size:20px;background:white}.kb-system-path h3{font-size:21px;margin-top:6px}.kb-system-path p{font-size:17px;margin-top:6px}.kb-system-path p br{display:none}.kb-system-features{display:block;margin-top:16px}.kb-system-features>div,.kb-system-features>div:first-child{border:0;border-top:1px solid #ddd;padding:18px 0}.kb-system-features>div:first-child{border-top:0;padding-top:0}.kb-system-features p br{display:none}.kb-system-features p{font-size:17px;margin-top:5px}.kb-detail-v23 .kb-story{padding-top:42px}.kb-detail-v23 .kb-story-art{aspect-ratio:.96}.kb-detail-v23 .kb-story-morph .kb-story-art{aspect-ratio:1.7}.kb-detail-v23 .kb-photo-essay{padding-block:42px}.kb-photo-group{margin-top:32px}.kb-photo-group-heading h3{font-size:22px}.kb-photo-group-heading p{font-size:16px}.kb-photo-row{display:block;margin-top:12px}.kb-photo-row figure+figure{margin-top:12px}.kb-photo-row button{max-height:none}.kb-photo-row img{height:auto}.kb-photo-heading>p{font-size:18px}} /* Elements cropped from the original KB process map, not newly generated icons. */ .kb-detail-v24 .kb-connection-map{padding:28px 26px 30px}.kb-detail-v24 .kb-system-path{gap:32px;margin-top:20px}.kb-detail-v24 .kb-system-path li{padding:0 4px 20px;border-top:0;text-align:center}.kb-map-art{display:flex;align-items:center;justify-content:center;height:154px;margin-bottom:23px}.kb-map-art img{display:block;max-width:100%;width:auto;height:138px;object-fit:contain}.kb-map-art--server img,.kb-map-art--camera img{height:98px}.kb-detail-v24 .kb-system-path li:not(:last-child)::after{top:66px;right:-29px;font-size:27px;line-height:1}.kb-detail-v24 .kb-node-type{font-size:14px}.kb-detail-v24 .kb-system-path h3{margin-top:8px;font-size:21px}.kb-detail-v24 .kb-system-path p{font-size:16px;line-height:1.8;margin-top:10px}.kb-detail-v24 .kb-system-content{margin-top:6px;padding-top:25px}.kb-detail-v24 .kb-system-features{gap:24px;margin-top:20px}.kb-detail-v24 .kb-system-features>div{padding:0 18px;text-align:center}.kb-detail-v24 .kb-system-features>div:first-child{padding-left:0}.kb-system-features .kb-map-art{height:150px;margin-bottom:17px}.kb-system-features .kb-map-art img{width:100%;height:140px;max-width:280px;object-fit:contain}.kb-system-features .kb-map-art--curved-projection img{max-width:230px;height:132px}.kb-detail-v24 .kb-system-features h3{font-size:21px}.kb-detail-v24 .kb-system-features p{font-size:17px} @media(max-width:900px) and (min-width:701px){.kb-detail-v24 .kb-connection-map{padding:24px 18px}.kb-detail-v24 .kb-system-path{gap:21px}.kb-map-art{height:133px;margin-bottom:18px}.kb-map-art img{height:115px}.kb-map-art--server img,.kb-map-art--camera img{height:80px}.kb-detail-v24 .kb-system-path li:not(:last-child)::after{right:-22px;top:57px;font-size:22px}.kb-detail-v24 .kb-system-path h3{font-size:19px}.kb-detail-v24 .kb-system-path p{font-size:15px}.kb-system-features .kb-map-art{height:120px}.kb-system-features .kb-map-art img{height:112px}.kb-system-features .kb-map-art--curved-projection img{height:100px}.kb-detail-v24 .kb-system-features>div{padding-inline:10px}} @media(max-width:700px){.kb-detail-v24 .kb-connection-map{padding:24px 20px}.kb-detail-v24 .kb-system-path{display:block;margin-top:24px}.kb-detail-v24 .kb-system-path li{padding:12px 0 32px}.kb-detail-v24 .kb-system-path li:not(:last-child){margin-bottom:24px;border-bottom:1px solid #ddd}.kb-detail-v24 .kb-system-path li:not(:last-child)::after{top:auto;left:50%;right:auto;bottom:-15px;transform:translateX(-50%);font-size:24px;background:#fff;padding:0 10px}.kb-map-art{height:145px;margin-bottom:19px}.kb-map-art img{height:130px}.kb-map-art--server img,.kb-map-art--camera img{height:94px}.kb-detail-v24 .kb-system-path p{font-size:17px;line-height:1.8;max-width:240px;margin-inline:auto}.kb-detail-v24 .kb-system-path p br{display:none}.kb-detail-v24 .kb-system-features>div,.kb-detail-v24 .kb-system-features>div:first-child{padding:24px 0}.kb-system-features .kb-map-art{height:160px;margin-bottom:15px}.kb-system-features .kb-map-art img{height:150px;max-width:285px}.kb-system-features .kb-map-art--curved-projection img{max-width:225px;height:136px}.kb-detail-v24 .kb-system-features p{max-width:245px;margin-inline:auto}.kb-detail-v24 .kb-system-features p br{display:none}} /* Emphasis follows the visitor's experience; all six approved explanations remain. */ .kb-detail-v25 .case-cover img{object-position:50% 46%} .kb-detail-v25 .kb-section-title{max-width:1000px} .kb-detail-v25 .kb-system-heading>p{font-size:19px} .kb-detail-v25 .kb-map-art{margin-bottom:14px} .kb-detail-v25 .kb-system-path h3{margin-top:0} .kb-detail-v25 .kb-system-path p{max-width:200px;margin-inline:auto;word-break:keep-all;line-height:1.65} .kb-detail-v25 .kb-system-features p{font-size:16px;word-break:keep-all} .kb-detail-v25 .kb-story-compact{grid-template-columns:.65fr 1.35fr;gap:70px;padding-block:10px 22px} .kb-detail-v25 .kb-story-compact .kb-story-art{max-width:290px;margin-inline:auto} .kb-detail-v25 .kb-story-compact h4{font-size:27px;margin-bottom:16px} .kb-detail-v25 .kb-story-feature{grid-template-columns:1fr 1.05fr;gap:56px;padding-block:32px 46px} .kb-detail-v25 .kb-story-feature h4{font-size:clamp(29px,3vw,38px);line-height:1.32;letter-spacing:-.04em} .kb-detail-v25 .kb-story-feature .kb-story-result{font-size:23px;line-height:1.65} .kb-detail-v25 .kb-story-feature .section-label{color:#222} .kb-detail-v25 .kb-space-content{border-left:0;padding-left:0;margin-top:0} .kb-detail-v25 .kb-space-intro{border-top:1px solid #ccc;padding-block:24px 8px} .kb-detail-v25 .kb-space-intro>p{max-width:850px;font-size:17px} .kb-detail-v25 .kb-story-secondary{grid-template-columns:.7fr 1.3fr;gap:65px;padding-block:20px 30px} .kb-detail-v25 .kb-story-secondary .kb-story-art{max-width:330px;margin:auto} .kb-detail-v25 .kb-story-secondary h4{font-size:28px} .kb-detail-v25 .kb-story-role{margin-top:22px;padding-top:15px} .kb-detail-v25 .kb-story-role>span{font-size:13px;color:#555} .kb-detail-v25 .kb-story-role>p{font-size:16px;line-height:1.8} .kb-detail-v25 .kb-photo-group{margin-top:36px} .kb-detail-v25 .kb-photo-group:first-child .kb-photo-row{max-width:780px} .kb-detail-v25 .kb-gallery-footer{display:flex;justify-content:center;border-top:1px solid #ccc;margin-top:36px;padding-top:30px} .kb-gallery-all{font:inherit;font-size:16px;background:#fff;border:1px solid #111;color:#111;padding:17px 30px;cursor:pointer} .kb-gallery-all:hover{background:#111;color:#fff} .kb-gallery-all:focus-visible{outline:2px solid #111;outline-offset:4px} @media(max-width:900px){.kb-detail-v25 .kb-story-compact,.kb-detail-v25 .kb-story-feature,.kb-detail-v25 .kb-story-secondary{gap:30px}} @media(max-width:700px){ .kb-detail-v25 .kb-story-compact,.kb-detail-v25 .kb-story-feature,.kb-detail-v25 .kb-story-secondary{display:block;padding-block:16px 26px} .kb-detail-v25 .kb-story-compact .kb-story-art{max-width:240px;aspect-ratio:1.08} .kb-detail-v25 .kb-story-secondary .kb-story-art{max-width:280px;aspect-ratio:1.08} .kb-detail-v25 .kb-story-morph .kb-story-art{aspect-ratio:1.7} .kb-detail-v25 .kb-story-feature .kb-story-art{max-width:360px;aspect-ratio:1.08} .kb-detail-v25 .kb-story-feature h4{font-size:30px} .kb-detail-v25 .kb-story-feature .kb-story-result{font-size:21px} .kb-detail-v25 .kb-story-compact h4,.kb-detail-v25 .kb-story-secondary h4{font-size:25px} .kb-detail-v25 .kb-system-path p{max-width:240px} .kb-detail-v25 .kb-story-role>span{font-size:13px;line-height:1.6} .kb-detail-v25 .kb-space-content{padding-left:0} .kb-detail-v25 .kb-system-heading>p{font-size:18px} .kb-detail-v25 .kb-gallery-all{width:100%} } /* One shared illustration/copy grid; emphasis changes type, never column geometry. */ .kb-detail-v25 .case-cover img{object-position:50% 48%} .kb-detail-v25 .kb-story-row{ display:grid;grid-template-columns:1fr 1.12fr;gap:56px; align-items:center;padding:32px 0;margin:0; } .kb-detail-v25 .kb-story-row .kb-story-art{ width:100%;max-width:none;aspect-ratio:.9;margin:0; } .kb-detail-v25 .kb-story-row .kb-story-copy{padding:0;min-width:0} .kb-detail-v25 .kb-story-row h4{ font-size:30px;line-height:1.4;letter-spacing:-.035em; margin:14px 0 22px;font-weight:600; } .kb-detail-v25 .kb-story-feature h4{font-size:36px;line-height:1.35} .kb-detail-v25 .kb-story-feature .kb-story-result{font-size:22px;line-height:1.75} .kb-detail-v25 .kb-story-row .kb-story-role{margin-top:24px;padding-top:18px} .kb-detail-v25 .kb-space-content{padding:0;margin:0 0 32px} .kb-detail-v25 .kb-space-intro{padding:26px 0 16px} .kb-detail-v25 .kb-photo-group:first-child .kb-photo-row{max-width:none} @media(max-width:900px){ .kb-detail-v25 .kb-story-row{gap:32px} .kb-detail-v25 .kb-story-row h4{font-size:27px} .kb-detail-v25 .kb-story-feature h4{font-size:32px} } @media(max-width:700px){ .kb-detail-v25 .kb-story-row{display:block;padding:26px 0 32px} .kb-detail-v25 .kb-story-row .kb-story-art{width:100%;max-width:370px;aspect-ratio:.9;margin:0 auto 18px} .kb-detail-v25 .kb-story-row h4{font-size:26px;margin:14px 0 20px} .kb-detail-v25 .kb-story-feature h4{font-size:30px} .kb-detail-v25 .kb-story-feature .kb-story-result{font-size:21px} .kb-detail-v25 .kb-story-row .kb-story-role{margin-top:24px;padding-top:18px} } /* Locked to the original KNOVCOMPILE navigation dimensions. Keep independent of body redesigns. */ .site-nav{--nav-unit:clamp(12px,.9vw,24px)} .site-nav{position:sticky;top:0;z-index:30;padding:clamp(19.2px,1.44vw,38.4px) clamp(38.4px,2.88vw,76.8px) clamp(15.6px,1.17vw,31.2px);display:flex;align-items:center;font-size:calc(var(--nav-unit)*1.05);line-height:2;color:#111;background:#fff;border-bottom:1px solid rgba(17,17,17,.22)} .site-nav .logo{width:25%;display:inline-flex;align-items:center}.site-nav .navlock{height:26px;width:auto;display:block}.site-nav .navsym{display:none}.site-nav .sp{width:12.5%}.site-nav a:not(.logo){width:12.5%;color:rgba(17,17,17,.7)}.site-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;color:#111}.site-nav .on{color:#111;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.site-nav .navdrop{position:relative;width:12.5%}.site-nav .navdrop a{width:auto}.site-nav .dmenu{position:absolute;left:calc(var(--nav-unit)*-1);top:100%;min-width:10.5em;display:none;flex-direction:column;background:#fff;border:1px solid rgba(17,17,17,.18);padding:calc(var(--nav-unit)*.45) 0;z-index:50}.site-nav .navdrop:hover .dmenu,.site-nav .navdrop:focus-within .dmenu,.site-nav .navdrop.open .dmenu{display:flex}.site-nav .dmenu a{padding:calc(var(--nav-unit)*.3) var(--nav-unit);font-size:.92em;line-height:1.7}.site-nav .dmenu a:hover{background:#f3f3f3;text-decoration:none}.site-nav .langsw{position:absolute;right:calc(var(--nav-unit)*1.2);top:50%;transform:translateY(-50%);width:auto}.site-nav .language{font-size:clamp(11.4px,.855vw,22.8px);letter-spacing:.04em;line-height:2;color:rgba(17,17,17,.7)}.language svg{vertical-align:-3.5px;margin-right:.35em}.language .chevron{font-size:.7em;opacity:.6}.site-nav .langsw .dmenu{left:auto;right:calc(var(--nav-unit)*-.2);min-width:7.2em}.site-nav .langsw .dmenu a{font-size:.84em;padding:calc(var(--nav-unit)*.28) var(--nav-unit)} .site-nav .language svg{width:16px;height:16px;vertical-align:-3.5px;margin-right:.35em} @media(max-width:860px){ .site-nav{--nav-unit:clamp(14px,3.6vw,18px);padding:14px 18px;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:clamp(4px,1.6vw,10px);font-size:12.5px} .site-nav .logo{width:auto}.site-nav .sp{display:none} .site-nav a:not(.logo){width:auto;margin:0;white-space:nowrap} .site-nav .navdrop{width:auto;display:inline-flex} .site-nav .langsw{position:relative;right:auto;top:auto;transform:none;margin:0} .site-nav .navlock{display:none}.site-nav .navsym{display:block;height:22px;width:auto} .site-nav .language{font-size:clamp(11.4px,.855vw,22.8px)} } /* User-directed division grouping. Original logo, type scale, padding and hero remain. */ .site-nav .sp{width:auto;flex:1;min-width:24px} .site-nav .nav-studio{display:flex;align-items:center;gap:clamp(24px,3.5vw,72px);flex:none} .site-nav .nav-studio>a,.site-nav .nav-studio>.navdrop{width:auto;white-space:nowrap} .site-nav a.nav-commercial{width:auto;flex:none;white-space:nowrap;margin-left:clamp(36px,5.5vw,112px);padding-left:clamp(24px,3vw,64px);border-left:1px solid #c9c9c9;color:#111} .site-nav .langsw{position:relative;right:auto;top:auto;transform:none;margin-left:clamp(20px,2.5vw,48px);flex:none} @media(max-width:860px){ .site-nav .logo{flex:none} .site-nav .nav-studio{gap:clamp(6px,2vw,16px)} .site-nav a.nav-commercial{margin-left:8px;padding-left:12px} .site-nav .langsw{margin-left:0} } @media(max-width:380px){ .site-nav{padding-left:12px;padding-right:12px;gap:4px;font-size:11.5px} .site-nav .nav-studio{gap:6px} .site-nav a.nav-commercial{margin-left:2px;padding-left:8px} .site-nav .language{font-size:10px} .site-nav .language svg{width:13px;height:13px;margin-right:2px;vertical-align:-2px} } /* Two separate content sets, consistent illustration rows and native media. */ .kb-detail-v28 .kb28-map{border:1px solid #ccc;padding:30px 36px;margin-top:30px} .kb28-map>section+section{border-top:1px solid #ddd;margin-top:34px;padding-top:30px} .kb28-map-heading,.kb28-group-heading{display:flex;align-items:baseline;gap:20px} .kb28-map-heading>span,.kb28-group-heading>span{font-size:19px;font-weight:600;flex-shrink:0} .kb28-map-heading h3{font-size:21px;font-weight:600;margin:0;line-height:1.5} .kb28-map-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;list-style:none;padding:0;margin:10px 0 0} .kb28-map-flow--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin:20px auto 0;gap:70px} .kb28-map-flow li{position:relative;text-align:center;min-width:0} .kb28-map-flow li+li:before{content:'→';position:absolute;left:-28px;top:43%;font-size:27px;color:#888} .kb28-map-scene{aspect-ratio:.9;background-size:300% auto;background-repeat:no-repeat;clip-path:inset(0 1%)} .kb28-map-icon{height:185px;display:flex;align-items:center;justify-content:center;padding:15px 10px} .kb28-map-icon img{width:100%;height:100%;object-fit:contain} .kb28-map-flow h4{font-size:21px;font-weight:600;margin:4px 0 10px;line-height:1.45} .kb28-map-flow p{font-size:16px;line-height:1.8;color:#666;margin:0;word-break:keep-all} .kb28-content-group{border-top:1px solid #111;padding-top:28px;margin-top:50px} .kb28-group-heading h3{font-size:28px;font-weight:600;letter-spacing:-.035em;line-height:1.4;margin:0} .kb28-group-heading p{font-size:16px;color:#777;line-height:1.8;margin:10px 0 0} .kb28-content-group .kb-story-row+.kb-story-row{border-top:1px solid #ddd} .kb-detail-v28 .kb28-content-group .kb-story-row{padding:36px 0} .kb28-section{padding-top:64px;padding-bottom:60px;border-top:1px solid #ddd} .kb28-section-heading{max-width:900px;margin-bottom:38px} .kb28-section-heading h2{font-size:36px;font-weight:600;line-height:1.35;letter-spacing:-.04em;margin:14px 0 20px} .kb28-section-heading>p:last-child{font-size:19px;line-height:1.8;color:#666;word-break:keep-all} .kb28-video{margin:0 0 40px} .kb28-video video{display:block;width:100%;height:auto;background:#111} .kb28-video--wide video{aspect-ratio:16/5} .kb28-video--aurora{max-width:880px;margin-top:40px} .kb28-video--aurora video{aspect-ratio:16/9} .kb28-video figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:15px;line-height:1.7} .kb28-video figcaption strong{font-weight:500}.kb28-video figcaption span{color:#777} .kb28-sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px} .kb28-sound-grid article{border-top:1px solid #111;padding-top:28px;min-width:0} .kb28-sound-grid h3{font-size:25px;font-weight:600;letter-spacing:-.025em;margin:14px 0 12px} .kb28-sound-grid article>p:not(.section-label){font-size:17px;color:#666;line-height:1.7} .kb28-sound-grid audio{width:100%;margin:24px 0 14px} .kb28-track-credit{font-size:14px;color:#777} .kb28-space-overview,.kb28-space-grid figure{margin:0} .kb28-space-overview img{display:block;width:100%;height:auto} .kb28-space-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;margin-top:36px;align-items:start} .kb28-space-grid img{display:block;width:100%;aspect-ratio:1.9;object-fit:contain} .kb28-space-grid figcaption,.kb28-space-overview figcaption{font-size:14px;line-height:1.7;color:#777;margin-top:16px} .kb-detail-v28 .kb-photo-row:has(>figure:only-child){max-width:880px} @media(max-width:700px){ .kb-detail-v28 .kb28-map{padding:24px 20px} .kb28-map-heading h3{font-size:19px} .kb28-map-flow,.kb28-map-flow--two{grid-template-columns:1fr;gap:35px;margin-top:16px} .kb28-map-flow li{max-width:310px;width:100%;margin:auto} .kb28-map-flow li+li:before{content:'↓';left:calc(50% - 9px);top:-32px;font-size:24px} .kb28-map-scene{aspect-ratio:.9} .kb28-map-icon{height:180px} .kb28-map-flow h4{font-size:20px} .kb28-group-heading{gap:15px} .kb28-group-heading h3{font-size:25px} .kb28-group-heading p{font-size:15px} .kb28-section{padding-block:40px} .kb28-section-heading h2{font-size:29px} .kb28-section-heading>p:last-child{font-size:18px} .kb28-video figcaption{display:block} .kb28-video figcaption span{display:block;margin-top:4px} .kb28-sound-grid,.kb28-space-grid{grid-template-columns:1fr;gap:32px} .kb28-space-grid img{aspect-ratio:auto} } /* B uses the same approved color panels as its detailed explanations. */ .kb28-map-flow--two .kb28-map-scene{max-width:330px;margin-inline:auto} /* Summary pictograms are deliberately smaller than the narrative illustrations. */ .kb-detail-v28 .kb28-map{padding:24px 32px} .kb28-map-flow--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:12px} .kb28-ux-icon{width:144px;height:144px;margin:0 auto;background-size:300% 200%;background-repeat:no-repeat} .kb28-map-flow--two{max-width:560px;gap:60px;margin-top:10px} .kb28-map-flow h4{font-size:19px;margin:0 0 7px} .kb28-map-flow p{font-size:14px} .kb28-map-flow li+li:before{top:62px;left:-24px;font-size:23px} .kb28-map>section+section{margin-top:26px;padding-top:24px} .kb28-video--aurora{max-width:none;width:100%} .kb28-space-grid{grid-template-columns:1fr 1fr;align-items:start} .kb28-space-grid img{height:300px;width:100%;aspect-ratio:auto;object-fit:contain} .kb-detail-v28 .kb-photo-row:has(>figure:only-child){max-width:none} @media(max-width:700px){ .kb-detail-v28 .kb28-map{padding:24px 18px} .kb28-map-flow--four,.kb28-map-flow--two{grid-template-columns:1fr;gap:28px} .kb28-map-flow li{display:grid;grid-template-columns:100px 1fr;text-align:left;max-width:none;align-items:center;column-gap:12px} .kb28-ux-icon{width:100px;height:100px;grid-row:1/3} .kb28-map-flow h4{align-self:end;margin-bottom:5px;font-size:18px} .kb28-map-flow p{align-self:start;line-height:1.7} .kb28-map-flow li+li:before{content:'↓';top:-28px;left:43px;font-size:21px} .kb28-space-grid{grid-template-columns:1fr} .kb28-space-grid img{height:auto;aspect-ratio:auto} } /* Summary-only axonometric models; dashed connectors remain crisp HTML/CSS. */ .kb28-ux-icon{width:168px;height:168px} .kb28-map-flow li+li:before{content:'';border-top:1.5px dashed #a5a5a5;width:32px;left:-31px;top:84px} .kb28-map-flow li+li:after{content:'›';position:absolute;left:-8px;top:69px;color:#888;font-size:24px} .kb28-map-flow--two li+li:before{left:-45px;width:50px} @media(max-width:700px){ .kb28-ux-icon{width:100px;height:100px} .kb28-map-flow li+li:before,.kb28-map-flow--two li+li:before{border-top:0;border-left:1.5px dashed #aaa;width:0;height:20px;left:49px;top:-25px} .kb28-map-flow li+li:after{content:'⌄';left:43px;top:-22px;font-size:19px} } /* Music and projection form one compact viewing section. */ .kb28-audiovisual{padding-top:42px} .kb28-audiovisual .kb28-section-heading{max-width:none;margin-bottom:22px} .kb28-audiovisual .kb28-section-heading h2{margin:0 0 10px} .kb28-audiovisual .kb28-section-heading>p:last-child{font-size:17px;line-height:1.7;margin:0} .kb28-audiovisual .kb28-sound-grid{gap:28px;margin-bottom:24px} .kb28-audiovisual .kb28-sound-grid article{padding-top:12px;border-color:#ddd} .kb28-audiovisual .kb28-sound-grid h3{font-size:18px;margin:0 0 10px;line-height:1.5} .kb28-audiovisual .kb28-sound-grid audio{display:block;width:100%;height:42px;margin:0} .kb28-audiovisual .kb28-video{margin:0 0 28px} .kb28-audiovisual .kb28-video figcaption{margin-top:8px;color:#666;font-size:14px} .kb28-audiovisual .kb28-video:last-child{margin-bottom:0} @media(max-width:700px){ .kb28-audiovisual .kb28-sound-grid{gap:18px;margin-bottom:22px} .kb28-audiovisual .kb28-section-heading>p:last-child{font-size:16px} } /* r4 — editorial hierarchy, spatial key and a concise experience diagram. */ .kb-detail-v28 #case-kicker{display:inline-block;background:#111;color:#fff;padding:9px 15px;font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.02em} .kb29-overview{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;margin-top:34px} .kb29-path{min-width:0} .kb29-path header{display:flex;align-items:center;gap:14px;margin-bottom:26px} .kb29-letter{display:grid;place-items:center;width:44px;height:44px;background:var(--kb-ci-yellow);color:#111;font-size:27px;font-weight:750;flex-shrink:0} .kb29-path--b .kb29-letter{background:var(--kb-ci-brown)} .kb29-path h3{font-size:24px;font-weight:650;letter-spacing:-.04em;margin:0} .kb29-path ol{display:flex;gap:22px;list-style:none;margin:0;padding:0} .kb29-path li{flex:1;min-width:0;aspect-ratio:1;border:1px solid #c9c3af;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;background:#fffdf6;max-width:180px} .kb29-path--b li{background:#f5fbfb;border-color:#b9d3d6} .kb29-path li+li:before{content:'→';position:absolute;left:-21px;top:calc(50% - 13px);font-size:18px;color:#aaa} .kb29-path li strong{font-size:20px;font-weight:650;line-height:1.6;letter-spacing:-.035em} .kb29-path li span{font-size:14px;color:#777;line-height:1.6;margin-top:3px} .kb29-scope{grid-column:1/-1;display:flex;align-items:baseline;gap:30px;border-top:1px solid #ddd;padding-top:22px;margin-top:6px} .kb29-scope>span{font-size:13px;letter-spacing:.06em;font-weight:650} .kb29-scope p{font-size:16px;color:#666;line-height:1.8;margin:0} .kb29-plan{margin:34px 0 46px} .kb29-plan-stage{position:relative} .kb29-plan-stage>img{display:block;width:100%;height:auto} .kb29-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;background:var(--kb-ci-yellow);color:#111;border:3px solid white;border-radius:50%;font-size:18px;font-weight:750;text-decoration:none;box-shadow:0 2px 12px #0002} .kb29-pin--b{background:var(--kb-ci-brown)} .kb29-pin:after{content:'';position:absolute;width:1px;height:25px;background:#333;top:100%;left:50%} .kb29-pin:hover,.kb29-pin:focus-visible{outline:2px solid #111;outline-offset:3px} .kb29-plan-key{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid #ddd;padding-top:22px;margin-top:20px} .kb29-plan-key a{display:flex;gap:10px;align-items:center;color:#111;text-decoration:none;font-size:15px;line-height:1.6} .kb29-plan-key b{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;background:var(--kb-ci-yellow);border-radius:50%;font-size:13px} .kb29-plan-key .kb29-key-b{background:var(--kb-ci-brown)} .kb29-plan figcaption>p{font-size:13px;color:#888;margin:18px 0 0} .kb-detail-v28 .kb28-map{border:0;padding:0} .kb28-map-heading,.kb28-group-heading{align-items:center;gap:22px} .kb28-map-heading>span,.kb28-group-heading>span{display:grid;place-items:center;min-width:64px;height:64px;padding-inline:12px;background:var(--kb-ci-yellow);color:#111;font-size:42px;line-height:1;font-weight:800} .kb28-map>section:nth-child(2) .kb28-map-heading>span,#kb-content-b .kb28-group-heading>span{background:var(--kb-ci-brown)} .kb28-map-heading h3{font-size:30px;font-weight:750;letter-spacing:-.035em} .kb28-group-heading h3{font-size:36px;font-weight:750} .kb28-map>section+section{margin-top:38px;padding-top:38px} .kb28-map-flow--four,.kb28-map-flow--two{margin-top:24px} .kb28-content-group{border-top:2px solid #111;padding-top:30px;margin-top:62px;scroll-margin-top:100px} #kb-artist-content .kb28-group-heading>span{background:#eee;font-size:22px} .kb29-track-heading{display:flex;align-items:center;gap:20px;margin-bottom:18px} .kb29-track-number{font-size:38px;font-weight:400;line-height:1;letter-spacing:-.06em;color:#777} .kb28-audiovisual .kb28-sound-grid{gap:22px;margin-bottom:24px} .kb28-audiovisual .kb28-sound-grid article{background:#f5f5f3;border:1px solid #dededb;padding:22px 24px} .kb28-audiovisual .kb28-sound-grid h3{font-size:23px;font-weight:700;margin:0 0 5px} .kb29-track-heading p{font-size:14px;color:#777;margin:0;line-height:1.5} .kb28-audiovisual .kb28-sound-grid audio{height:48px} .kb29-credits{display:grid;grid-template-columns:.65fr 1.6fr;gap:50px;border-top:1px solid #111;padding-block:56px 66px} .kb29-credits h2{font-size:34px;letter-spacing:-.04em;font-weight:650;margin:12px 0 0} .kb29-credits dl{margin:0} .kb29-credits dl>div{display:grid;grid-template-columns:1.2fr 1fr;gap:25px;padding:18px 0;border-bottom:1px solid #ddd;font-size:16px;line-height:1.6} .kb29-credits dl>div:first-child{padding-top:0} .kb29-credits dt{color:#777}.kb29-credits dd{margin:0;font-weight:550} @media(max-width:900px){ .kb29-overview{grid-template-columns:1fr;gap:32px}.kb29-path ol{max-width:620px}.kb29-scope{display:block}.kb29-scope p{margin-top:10px} .kb29-plan-key{grid-template-columns:1fr 1fr}.kb28-map-heading h3{font-size:26px}.kb28-group-heading h3{font-size:30px} } @media(max-width:700px){ .kb-detail-v28 #case-kicker{font-size:19px;padding:8px 12px} .kb29-path header{margin-bottom:20px}.kb29-path h3{font-size:22px}.kb29-path ol{gap:15px}.kb29-path li{max-width:140px}.kb29-path li strong{font-size:15px}.kb29-path li span{font-size:11px}.kb29-path li+li:before{font-size:14px;left:-15px} .kb29-plan{margin-bottom:32px}.kb29-pin{width:31px;height:31px;font-size:12px;border-width:2px}.kb29-pin:after{height:13px}.kb29-plan-key{gap:12px}.kb29-plan-key a{font-size:13px;gap:7px}.kb29-plan-key b{width:28px;height:28px;font-size:11px} .kb28-map-heading,.kb28-group-heading{gap:14px;align-items:flex-start}.kb28-map-heading>span,.kb28-group-heading>span{min-width:47px;height:47px;font-size:32px;padding-inline:9px}.kb28-map-heading h3{font-size:24px;line-height:1.4}.kb28-group-heading h3{font-size:26px;line-height:1.4}.kb28-group-heading p{font-size:14px} .kb28-audiovisual .kb28-sound-grid article{padding:20px}.kb28-audiovisual .kb28-sound-grid h3{font-size:21px}.kb29-track-heading{gap:16px} .kb29-credits{grid-template-columns:1fr;gap:28px;padding-block:40px}.kb29-credits dl>div{font-size:14px;gap:16px;grid-template-columns:1.25fr 1fr} } /* r5: screen RGB sampled from the supplied KIAF 2025 palette swatches. */ .kb-detail-v28{--kb-ci-yellow:#facf08;--kb-ci-brown:#482d25;--kb-ci-beige:#ece4d6} .kb29-path--b .kb29-letter,.kb29-pin--b,.kb29-plan-key .kb29-key-b,.kb28-map>section:nth-child(2) .kb28-map-heading>span,#kb-content-b .kb28-group-heading>span{color:#fff} .kb29-path li{background:var(--kb-ci-yellow);border-color:var(--kb-ci-yellow);color:var(--kb-ci-brown)} .kb29-path li span{color:var(--kb-ci-brown)} .kb29-path--b li{background:var(--kb-ci-brown);border-color:var(--kb-ci-brown);color:#fff} .kb29-path--b li span{color:var(--kb-ci-beige)} .kb30-plan-board{position:relative;padding:90px 0 100px} .kb30-plan-image{position:relative} .kb30-plan-image>img{display:block;width:100%;height:auto} .kb30-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .kb30-plan .kb29-pin{width:42px;height:42px;font-size:16px;box-shadow:0 1px 8px #0003;z-index:2} .kb30-plan .kb29-pin:after{display:none} .kb30-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .kb30-leaders path{stroke:var(--kb-ci-brown);stroke-width:1.25;fill:none} .kb30-callout{position:absolute;display:flex;align-items:center;gap:13px;text-decoration:none;background:var(--kb-ci-yellow);color:var(--kb-ci-brown);padding:14px 16px;min-height:74px;box-sizing:border-box;z-index:3} .kb30-callout>b{font-size:26px;font-weight:800;line-height:1} .kb30-callout strong{display:block;font-size:18px;line-height:1.4;font-weight:750;letter-spacing:-.035em} .kb30-callout small{display:block;font-size:12px;line-height:1.5;margin-top:4px} .kb30-callout--b{left:0;top:0;width:38%;background:var(--kb-ci-brown);color:#fff} .kb30-callout--b small{color:var(--kb-ci-beige)} .kb30-callout--a1{left:49%;top:0;width:25%} .kb30-callout--a2{left:76%;top:0;width:24%} .kb30-callout--a3{left:76%;bottom:0;width:24%} .kb30-callout:hover,.kb30-callout:focus-visible{outline:2px solid var(--kb-ci-brown);outline-offset:4px} .kb30-plan figcaption>p{margin-top:22px;font-size:13px;line-height:1.7;color:#777} @media(max-width:1000px){ .kb30-callout{padding:12px;gap:10px}.kb30-callout strong{font-size:15px}.kb30-callout small{font-size:11px}.kb30-callout>b{font-size:23px} } @media(max-width:700px){ .kb30-plan-board{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0} .kb30-plan-image{grid-column:1/-1;margin-bottom:8px} .kb30-leaders{display:none} .kb30-callout{position:static;width:auto;min-height:100px;padding:13px 11px;gap:8px;align-items:flex-start} .kb30-callout--b{grid-column:1/-1;min-height:72px;align-items:center} .kb30-callout--a3{grid-column:1/-1;min-height:72px;align-items:center} .kb30-callout strong{font-size:15px}.kb30-callout small{font-size:12px}.kb30-callout>b{font-size:22px} .kb30-plan .kb29-pin{width:29px;height:29px;font-size:11px;border-width:2px} } @media(max-width:700px){.kb30-plan-image{order:0}.kb30-callout--a1{order:1}.kb30-callout--a2{order:2}.kb30-callout--a3{order:3}.kb30-callout--b{order:4}} /* r6 — dedicated soundtrack cards, compact enough to sit with the film. */ .kb28-audiovisual .kb28-sound-grid .kb31-audio-card{border:1px solid #111111;background:#111111;color:white;border-radius:22px;padding:23px 26px 20px;box-shadow:0 8px 24px #00000010;transition:box-shadow .2s,border-color .2s} .kb28-audiovisual .kb28-sound-grid .kb31-audio-card.is-playing{border-color:#facf08;box-shadow:0 0 0 2px #facf08,0 10px 24px #00000018} .kb31-track-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:550;letter-spacing:.1em;color:#bdbdbd;margin-bottom:18px} .kb31-track-meta>span:last-child{font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums} .kb31-player-main{display:flex;align-items:center;gap:18px} .kb31-play{display:grid;place-items:center;width:64px;height:64px;border:0;border-radius:50%;flex-shrink:0;background:#facf08;color:#111111;cursor:pointer;transition:transform .2s,background .2s} .kb31-play:hover{transform:scale(1.06);background:#ffe04a} .kb31-play svg{width:27px;height:27px;fill:currentColor} .kb31-pause-shape{display:none}.is-playing .kb31-play-shape{display:none}.is-playing .kb31-pause-shape{display:block} .kb28-audiovisual .kb31-player-main h3{font-size:23px;font-weight:650;line-height:1.4;margin:0 0 5px;color:#fff} .kb31-player-main p{font-size:13px;line-height:1.5;color:#bdbdbd;margin:0} .kb31-timeline{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:12px;font-variant-numeric:tabular-nums;color:#dedede} .kb31-timeline>span{min-width:30px}.kb31-timeline>span:last-child{text-align:right} .kb31-timeline input{flex:1;min-width:0;width:100%;height:22px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;margin:0;padding:0} .kb31-timeline input::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(to right,#facf08 var(--played,0%),#ffffff38 var(--played,0%))} .kb31-timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#facf08;margin-top:-4px;border:0} .kb31-timeline input::-moz-range-track{height:3px;border-radius:4px;background:#ffffff38} .kb31-timeline input::-moz-range-progress{background:#facf08;height:3px} .kb31-timeline input::-moz-range-thumb{width:11px;height:11px;border:0;background:#facf08;border-radius:50%} .kb31-player-footer{display:flex;align-items:center;gap:16px;font-size:11px;line-height:1.6;color:#bdbdbd;margin-top:8px} .kb31-state{margin-right:auto;display:flex;align-items:center;gap:7px} .kb31-state:before{content:'';width:5px;height:5px;border-radius:50%;background:#888888;flex-shrink:0} .is-playing .kb31-state{color:#facf08}.is-playing .kb31-state:before{background:#facf08} .kb31-loop{white-space:nowrap}.kb31-loop>span{font-size:15px;vertical-align:-1px;margin-right:3px} .kb31-mute{font:inherit;color:inherit;background:transparent;border:0;padding:5px 0;cursor:pointer;white-space:nowrap;text-decoration:underline;text-underline-offset:3px} .kb31-player button:focus-visible,.kb31-player input:focus-visible{outline:2px solid #facf08;outline-offset:5px} .kb31-audio-card audio[hidden]{display:none!important} @media(max-width:700px){ .kb28-audiovisual .kb28-sound-grid .kb31-audio-card{padding:21px 20px 18px;border-radius:20px} .kb31-player-main{gap:14px}.kb31-play{width:57px;height:57px} .kb28-audiovisual .kb31-player-main h3{font-size:20px}.kb31-player-main p{font-size:12px} .kb31-player-footer{gap:12px}.kb31-timeline{gap:9px;margin-top:19px} } @media(prefers-reduced-motion:reduce){.kb31-play,.kb31-audio-card{transition:none!important}} /* r10 — cover gallery, no enlargement action. */ .kb-detail-v28 .kb-cover-stage{position:relative;overflow:hidden;touch-action:pan-y;background:#111} .kb-detail-v28 .kb-cover-stage>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;user-select:none} .kb-detail-v28 .case-cover .kb-cover-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid #ffffff65;border-radius:50%;background:#111b;color:white;cursor:pointer;backdrop-filter:blur(8px)} .kb-detail-v28 .kb-cover-prev{left:22px}.kb-detail-v28 .kb-cover-next{right:22px} .kb-detail-v28 .case-cover .kb-cover-arrow:hover{background:#111} .kb-detail-v28 .kb-cover-arrow svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .kb-detail-v28 .kb-cover-arrow:focus-visible,.kb-detail-v28 .kb-cover-stage:focus-visible{outline:3px solid #facf08;outline-offset:-5px} .kb-cover-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} @media(max-width:700px){.kb-detail-v28 .case-cover .kb-cover-arrow{width:44px;height:44px}.kb-detail-v28 .kb-cover-prev{left:12px}.kb-detail-v28 .kb-cover-next{right:12px}} /* r13: original entrance photo, conservative display-only crop and leveling. */ .kb-detail-v28 .kb-cover-stage>img.kb-cover-entrance{object-position:50% 47%;transform:scale(1.045) rotate(-.25deg);transform-origin:50% 50%} /* Final detail header: no review/version label. */ .kb-detail-v23 .case-heading-row{margin-top:0} /* V36 footer only: header and detail geometry remain independent. */ #commercial-footer-v36{--footer-gutter:clamp(20px,2.5vw,64px);width:100%;color:#171717} #commercial-footer-v36 .v30-artwork{margin:0;padding:0;width:100%;max-width:none} #commercial-footer-v36 .v30-artwork::before{content:"";display:block;height:1px;background:#ccc;margin:0 var(--footer-gutter) clamp(40px,3.5vw,100px)} #commercial-footer-v36 .v30-artwork-image{position:relative;height:clamp(360px,30vw,600px);overflow:hidden;background:#050808} #commercial-footer-v36 .v31-artwork-collage{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr .9fr 1.2fr;gap:4px} #commercial-footer-v36 .v31-artwork-collage figure{margin:0;min-width:0;height:100%;overflow:hidden;background:#060909} #commercial-footer-v36 .v31-artwork-collage img{width:100%;height:100%;object-fit:cover;opacity:.86;display:block} #commercial-footer-v36 .v31-artwork-collage figure:nth-child(2) img{object-position:50% 65%} #commercial-footer-v36 .v31-artwork-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:linear-gradient(180deg,transparent 15%,#0003 45%,#0003 70%,transparent);padding:30px;text-align:center} #commercial-footer-v36 .v31-artwork-logo{display:block;width:min(62%,560px);height:auto;filter:drop-shadow(0 2px 14px #0005)} #commercial-footer-v36 .v30-artwork-link{display:flex;align-items:center;gap:32px;background:#070a0dbb;border:1px solid #ffffffb3;min-height:52px;padding:12px 22px;font-size:18px;line-height:1.5;color:#fff;text-decoration:none} #commercial-footer-v36 .v30-artwork-link:hover{background:#fff;color:#111} #commercial-footer-v36 .v33-footer{background:#f5f5f5;border-top:1px solid #151515} #commercial-footer-v36 .v30-colophon{padding:64px var(--footer-gutter) 110px;font-size:16px;line-height:1.6} #commercial-footer-v36 .v30-colophon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px} #commercial-footer-v36 .v30-colophon-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0} #commercial-footer-v36 .v36-contact-heading{grid-column:1/span 2;padding-top:35px} #commercial-footer-v36 .v36-contact-heading h2{margin:0;font-size:clamp(36px,2.4vw,60px);font-weight:400;line-height:1.08;letter-spacing:-.055em} #commercial-footer-v36 .v30-colophon-grid>.v36-contact-links{grid-column:3;gap:14px} #commercial-footer-v36 .v36-contact-links>a{font-size:clamp(18px,1.15vw,30px);line-height:1.5;letter-spacing:-.025em;overflow-wrap:anywhere} #commercial-footer-v36 .v36-contact-links .v36-contact-inquiry{font-size:clamp(18px,1vw,26px);text-decoration:underline;text-underline-offset:6px} #commercial-footer-v36 .v36-social{grid-column:4;padding-left:15%} #commercial-footer-v36 .v30-colophon-grid>div>span{font:12px/1.5 monospace;margin-bottom:12px} #commercial-footer-v36 .v30-colophon-grid>.v36-contact-links>span{margin-bottom:0} #commercial-footer-v36 .v30-colophon-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;margin-top:60px;padding-top:28px;border-top:1px solid #c4c4c4;font:12px/1.5 monospace} #commercial-footer-v36 .v30-colophon-bottom>a{text-align:right} #commercial-footer-v36 a:hover{text-decoration:underline;text-underline-offset:5px} body>.v33-floating-contact{position:fixed;z-index:100;right:24px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:38px;min-height:54px;padding:14px 22px;border:1px solid #fff8;border-radius:999px;background:#171717;color:#fff;font-size:16px;font-weight:500;line-height:1.4;box-shadow:0 4px 24px #0003;text-decoration:none} body>.v33-floating-contact:hover{background:#343434} body>.v33-floating-contact:focus-visible,#commercial-footer-v36 a:focus-visible{outline:3px solid #facf08;outline-offset:4px} @media(max-width:1000px){#commercial-footer-v36 .v30-colophon-grid{grid-template-columns:1fr 1fr;gap:36px 24px}#commercial-footer-v36 .v36-contact-heading{grid-column:1/-1;padding-top:0}#commercial-footer-v36 .v30-colophon-grid>.v36-contact-links{grid-column:1}#commercial-footer-v36 .v36-social{grid-column:2}} @media(max-width:600px){#commercial-footer-v36 .v30-artwork-image{height:360px}#commercial-footer-v36 .v31-artwork-collage{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}#commercial-footer-v36 .v31-artwork-collage figure:first-child{grid-row:1/-1}#commercial-footer-v36 .v31-artwork-collage figure:nth-child(2) img{object-position:50% 82%}#commercial-footer-v36 .v31-artwork-logo{width:100%;max-width:330px}#commercial-footer-v36 .v31-artwork-content{padding:20px;gap:24px}#commercial-footer-v36 .v30-artwork-link{font-size:15px;gap:18px;padding:10px 16px;min-height:48px}#commercial-footer-v36 .v30-colophon{padding-top:38px;padding-bottom:110px}#commercial-footer-v36 .v30-colophon-grid{grid-template-columns:1fr;gap:32px}#commercial-footer-v36 .v30-colophon-grid>.v36-contact-links,#commercial-footer-v36 .v36-social{grid-column:1;padding-left:0}#commercial-footer-v36 .v36-contact-links>a{font-size:20px}#commercial-footer-v36 .v30-colophon-bottom{grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;font-size:10px}#commercial-footer-v36 .v30-colophon-bottom>a{grid-column:1/-1;text-align:left}body>.v33-floating-contact{right:16px;bottom:max(16px,env(safe-area-inset-bottom));min-height:48px;padding:12px 18px;font-size:14px;gap:26px}} /* V37 text-only footer controls; legacy selector retained for compatibility. */ #commercial-footer-v36 .v30-artwork-link{justify-content:center;gap:0} body>.v33-floating-contact{justify-content:center;gap:0;padding:0 24px;min-height:54px;line-height:1;box-shadow:0 3px 16px #0002} @media(max-width:600px){body>.v33-floating-contact{min-height:50px}} /* User update: white floating inquiry, black border and text. */ body>.v33-floating-contact{background:#fff;color:#111;border:1px solid #111;box-shadow:none} body>.v33-floating-contact:hover{background:#f5f5f5;color:#111;border-color:#111} /* r14: explicit, symmetric capsule dimensions and centered Korean label. */ body>.v33-floating-contact{box-sizing:border-box;width:160px;height:52px;min-height:52px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:26px;white-space:nowrap;font-family:"Pretendard Variable",sans-serif;font-size:16px;font-weight:500;line-height:1.25;letter-spacing:0;transform:none} @media(max-width:600px){body>.v33-floating-contact{width:144px;height:48px;min-height:48px;border-radius:24px;font-size:14px}} :root{--detail-background:#fff}html,body,main#case-page{background:var(--detail-background)}main#case-page figcaption{text-align:center} .kb28-space-grid img,.kb30-plan-board,.kb-story-art,.kb28-ux-icon{mix-blend-mode:normal} /* Shared header + inquiry button extracted from user-approved Commercial v38. */ .site-nav a.nav-commercial{background:#111;color:#fff;border-left:0;border-radius:3px;padding:4px 14px;line-height:1.5;text-decoration:none} .site-nav a.nav-commercial:hover{background:#303030;color:#fff;text-decoration:none} .site-nav a.nav-commercial:focus-visible{outline:2px solid #111;outline-offset:4px} @media(max-width:860px){.site-nav a.nav-commercial{padding:3px 7px;margin-left:8px}} @media(max-width:380px){.site-nav a.nav-commercial{padding-inline:5px;margin-left:2px}} /* Keep the division separator independent of the Commercial tab surface. */ .site-nav a.nav-commercial{position:relative} .site-nav a.nav-commercial::before{content:"";position:absolute;left:calc(clamp(36px,5.5vw,112px)/-2);top:50%;transform:translateY(-50%);height:1.7em;width:1px;background:#c9c9c9;pointer-events:none} @media(max-width:860px){.site-nav a.nav-commercial::before{left:-8px;height:1.5em}} @media(max-width:380px){.site-nav a.nav-commercial::before{left:-6px}} body>.v33-floating-contact{width:auto;height:56px;min-width:160px;border-radius:999px;right:24px;bottom:max(24px,env(safe-area-inset-bottom));font-size:16px;line-height:1} /* A quiet raised surface for the persistent inquiry action. */ body>.v33-floating-contact{ min-height:56px;padding-inline:27px;border:1px solid #171717; background:linear-gradient(180deg,#fff 0%,#fff 58%,#f2f2f0 100%);color:#111; font-weight:550;letter-spacing:-.02em; box-shadow:0 2px 3px #0000000d,0 8px 22px #0000001a,0 20px 44px #0000000f,inset 0 1px 0 #fff; transition:transform .22s ease,box-shadow .22s ease,background .22s ease; } body>.v33-floating-contact:hover{ background:linear-gradient(180deg,#fff,#f6f6f4);color:#111;transform:translateY(-3px); box-shadow:0 3px 5px #0000000d,0 12px 28px #00000024,0 24px 48px #00000012,inset 0 1px 0 #fff; } body>.v33-floating-contact:active{transform:translateY(0) scale(.98);box-shadow:0 2px 7px #0000001a,inset 0 1px 3px #0000000d} body>.v33-floating-contact:focus-visible{outline:2px solid #111;outline-offset:5px} @media(max-width:600px){body>.v33-floating-contact{min-height:52px;padding-inline:23px}} @media(prefers-reduced-motion:reduce){body>.v33-floating-contact{transition:none}body>.v33-floating-contact:hover,body>.v33-floating-contact:active{transform:none}} @media(max-width:600px){body>.v33-floating-contact{height:52px;min-width:144px;font-size:15px;right:14px;bottom:max(16px,env(safe-area-inset-bottom))}} :root{--kb-journey:url("/site-assets/kb-r16/573740177c8a2565.webp")} :root{--kb-responses:url("/site-assets/kb-r16/14d5f5f7fa7265b6.webp")} .project-neighbors a[aria-disabled="true"]{cursor:default}.project-neighbors a[aria-disabled="true"]:hover{color:inherit} @media(max-width:767px){body>.v33-floating-contact{bottom:max(80px,calc(env(safe-area-inset-bottom) + 64px))}}