@import '../../wholeverb-brand-development-2026-10-03/visual-foundations-2026-10-04/footer-study/footer.css';
.work-page{background:#fcfbf7;color:#102d30;--focus:#007d80}
.work-intro{padding-top:88px}.work-intro h1{font-weight:500;letter-spacing:-.045em;line-height:.98;font-size:clamp(80px,9vw,136px)}.work-premise{letter-spacing:-.02em;line-height:1.25;font-size:clamp(26px,2.4vw,36px);color:#51635f;max-width:1120px}.work-rule{background:#d6e1d9}.work-rule i{background:#9cb7ab}.work-index-meta{color:#516c62;padding-block:52px 40px}
.work-project{border-color:#c7d8ce;transition:color .3s}.work-color{background:radial-gradient(ellipse at 90% 0,#54b8a740,transparent 65%),linear-gradient(115deg,var(--project-color),#0a3439)}.work-project.is-open,.work-project:focus-within{color:#fcfbf7}.work-project-description{color:#51635f}.work-project.is-open .work-project-description,.work-project:focus-within .work-project-description{color:#e4f1e8}.work-project-status{color:#47685e;line-height:1.6}.work-project-status>span:last-child{display:flex;align-items:center;gap:8px;line-height:1.5}.work-project-status>span:last-child:before{content:'';width:5px;height:5px;border-radius:50%;flex:none;background:#ffc45c}.work-project.is-open .work-project-status,.work-project:focus-within .work-project-status{color:#e7f5ec}.work-project-title a:focus-visible,.work-phone-action:focus-visible{outline:3px solid #ffc45c;outline-offset:5px}
.work-panorama figure,.work-phone-image{position:relative;border:1px solid #bfd5c8;box-shadow:0 8px 24px #022e311c}.work-panorama img{object-fit:contain;object-position:center}.work-panorama .work-primary-view{background:#f6faf5}.work-panorama .work-support-view{background:#c7e4d318}.work-panorama .work-detail-view{background:#f4f8f1}.work-support-view.is-phone{display:flex;align-items:center;justify-content:center;padding:6px 0 28px}.work-device{width:126px;flex:none;padding:3px;border:1px solid #d9933e;border-radius:19px;background:linear-gradient(135deg,#ffe4ae,#ffc45c 22%,#ffa126 65%,#e88d19);box-shadow:inset 0 0 0 1px #fff5d4,0 10px 22px #00232b40;overflow:hidden}.work-device .work-device-top{display:flex;align-items:center;justify-content:space-between;padding:3px 6px;height:18px;background:#fcfbf7;color:#071317;font:600 6px/1 'DM Sans',sans-serif;border-radius:14px 14px 0 0}.work-device-top i{width:30px;height:8px;background:#071317;border-radius:6px}.work-panorama .work-device img{display:block;width:100%;height:auto;object-fit:contain}.work-device-bottom{height:10px;background:#fcfbf7;display:grid;place-items:center;border-radius:0 0 14px 14px}.work-device-bottom i{height:2px;width:36px;background:#071317;border-radius:3px}
.work-enlarge{position:absolute;right:8px;bottom:8px;min-height:44px;padding:9px 12px;background:#fcfbf7f5;color:#07565c;border:1px solid #95baac;border-radius:6px;font:500 12px/20px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 2px 5px #082e2c16}.work-enlarge:hover{background:#e1f1e8}.work-enlarge:focus-visible{outline:3px solid #ffc45c;outline-offset:3px}.work-support-view.is-phone .work-enlarge{bottom:3px;right:5px;font-size:10px;min-height:32px;padding:4px 8px}
.work-responsibility{padding-block:100px 110px}.work-responsibility h2{font-weight:500}.work-founder>img{height:auto;filter:none;object-fit:contain;margin-top:5px}.work-founder .work-founder-detail{color:#51635f}.work-founder>div>div{gap:20px;align-items:center}.work-founder .wv-primary{width:286px;max-width:100%;flex:none;text-decoration:none}.work-founder a:not(.wv-primary){color:#08777c}.work-founder p{font-size:23px;line-height:1.5;letter-spacing:-.02em}
.work-preview-dialog{background:#fcfbf7;color:#123b3b;border:1px solid #9dbfae;border-radius:14px;padding:20px;max-width:96vw;width:1120px;max-height:94vh;overflow:auto}.work-preview-dialog::backdrop{background:#00292be8;backdrop-filter:blur(6px)}.work-preview-head{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:-20px;background:#fcfbf7;padding:2px 0 16px;z-index:5}.work-preview-head h2{font-size:19px;line-height:1.4;font-weight:500;margin:0}.work-preview-head button{min-height:44px;border:1px solid #b4cec0;border-radius:6px;background:#e7f2e9;color:#123b3b;padding:8px 12px;white-space:nowrap}.work-preview-canvas{overflow:auto;max-height:75vh;padding:0 0 12px}.work-preview-canvas>img{display:block;width:1100px;max-width:none;height:auto;margin:auto}.work-preview-canvas.is-phone>img{width:390px}.work-preview-hint{color:#516c62;font:14px/22px 'DM Sans',sans-serif;margin:0 0 12px}.work-preview-hint[hidden]{display:none}
@media(max-width:1100px) and (min-width:801px){.work-project-title{grid-column:1/5;max-width:none}.work-project-description{grid-column:5/10}.work-project h2{font-size:24px;line-height:1.4}.work-project-title a{min-width:180px}.work-enlarge{font-size:11px}}
@media(max-width:800px){.work-wrap{width:calc(100% - 44px)}.work-intro{padding-top:44px}.work-intro h1{font-size:clamp(54px,10vw,80px);line-height:1.04;letter-spacing:-.04em}.work-premise{font-size:23px;line-height:1.4}.work-index-meta{font-size:10px;padding-block:32px;gap:16px}.work-projects{padding:0 16px}.work-project{padding:26px 20px 18px;margin-bottom:18px;border-radius:14px;color:#fcfbf7;background:radial-gradient(ellipse at 90% 0,#54b8a740,transparent 65%),linear-gradient(115deg,var(--project-color),#0a3439);border:1px solid #7cafa080}.work-project h2{font-size:26px;line-height:1.3;font-weight:500}.work-project-status{color:#e7f5ec;font-size:11px;margin-top:18px;min-height:0;gap:5px}.work-phone-image{height:auto;aspect-ratio:16/10;margin-top:24px;background:#f5f9f3;padding-bottom:44px}.work-phone-image img{width:100%;height:100%;object-fit:contain}.work-enlarge{right:7px;bottom:4px;border-color:#b9d2c4;background:#fcfbf7;min-height:36px;padding:6px 10px}.work-phone-action{margin-top:15px;font-size:16px}.work-responsibility{padding-block:60px 70px}.work-responsibility h2{font-size:37px;line-height:1.15}.work-founder{grid-template-columns:1fr;gap:18px}.work-founder>img{width:64px;height:auto;margin:0}.work-founder p{font-size:20px;line-height:1.5}.work-founder>div>div{align-items:flex-start;flex-direction:column;gap:18px}.work-preview-dialog{padding:14px}.work-preview-head{top:-14px}.work-preview-head h2{font-size:16px}.work-preview-hint{font-size:13px}.work-preview-canvas{max-height:72vh}}
@media(prefers-reduced-motion:reduce){.work-project{transition:none}}
/* Preview actions sit in their own footer, clear of the captured interface. */
.work-panorama figure{padding-bottom:44px}.work-panorama .work-support-view.is-phone{padding:6px 0 44px;height:290px}
.work-enlarge,.work-support-view.is-phone .work-enlarge{bottom:0;right:0;width:100%;min-height:44px;height:44px;border:0;border-top:1px solid #c4d9cd;border-radius:0;background:#fcfbf7;color:#07565c;padding:10px 12px;font-size:12px;box-shadow:none;z-index:3;text-align:right}
.work-enlarge:hover{background:#e1f1e8}.work-panorama .work-support-view.is-crop{padding-bottom:44px}.work-panorama .work-device img{height:auto}
@media(max-width:800px){.work-phone-image{height:auto;aspect-ratio:auto;padding-bottom:44px}.work-phone-image img{height:auto;aspect-ratio:16/9;object-fit:contain}.work-enlarge{font-size:12px}}
.work-enlarge[hidden]{display:none}.work-enlarge:focus-visible{outline-offset:-4px}
.work-founder>div{min-width:0}.work-founder .wv-primary{max-width:100%}
@media(max-width:800px){.work-founder{grid-template-columns:minmax(0,1fr)}}