/* MV-to-portfolio design: calm spacing, generous device pairs, soft colors. */
.hero-bottom{justify-content:space-between}
.works{font-family:'Zen Kaku Gothic Antique','Noto Sans JP',sans-serif;padding-top:88px;padding-bottom:100px;max-width:1200px}
.works-heading{align-items:center;margin-bottom:36px;gap:35px}
.works .eyebrow{font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;letter-spacing:.22em;color:#bd8274}
.works h2{font-size:36px;font-weight:500;letter-spacing:.12em;margin:9px 0 0;line-height:1.5}
.works-heading p{font-size:13px;line-height:2.1;margin:0;color:#768078}
.works .filters{padding-bottom:28px;margin-bottom:38px;border-bottom:1px solid #e8e7df;gap:10px}
.works .filters button{font-family:inherit;font-size:12px;border-color:#e2e4db;background:#fffdf9;padding:10px 23px}
.works .filters button.active{background:#779586;border-color:#779586;color:white}
.works .filters button:hover{border-color:#779586}
#works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
.works .work-visual{padding:34px 35px 20px;border-radius:24px;background:#e9eee7}
.works .work:nth-child(4n+2) .work-visual{background:#f3e7df}
.works .work:nth-child(4n+3) .work-visual{background:#eeeade}
.works .work:nth-child(4n+4) .work-visual{background:#e5eded}
.works .device-scene{padding:0;aspect-ratio:1.55}
.works .desktop{border:7px solid #fafbf9;border-radius:10px;box-shadow:0 12px 24px #34493c1a}
.works .real-desktop{position:absolute;left:0;top:5%;width:91%}
.works .real-desktop img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.works .site-head{font-family:inherit;font-size:11px;letter-spacing:.04em;padding:10px 5px}
.works .site-bottom{font-size:9px;padding:14px 5px;line-height:1.8}
.works .phone{width:24%;height:80%;bottom:3px;border-width:5px;border-radius:19px;transform:rotate(6deg);box-shadow:0 12px 22px #34493c26}
.works .phone img{height:73%}
.works .phone small{font-size:8px}
.works .phone.real-phone{width:25%;height:auto;padding:10px 0 0;background:#fff;right:1%;bottom:4%}
.works .phone.real-phone:before{position:absolute;top:3px;left:35%;width:30%;height:3px;margin:0}
.works .phone.real-phone img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.works .desktop-only{padding-right:0}
.works .desktop-only .real-desktop{width:100%;top:7%}
.hero .laptop-display{aspect-ratio:auto}
.hero .featured-screen{height:auto}
.hero .actual-desktop-screen{display:block;width:100%;height:auto;object-fit:contain}
.hero .featured-work{padding-bottom:80px}
.hero .featured-phone.real-featured-phone{width:25%;height:auto;top:15%;padding:7px}
.hero .featured-label{margin-top:44px}
.hero .real-featured-phone .mobile-screen{height:auto;margin-top:10px}
.hero .actual-mobile-screen{display:block;width:100%;height:auto;object-fit:contain}
.hero .track{--wall-gap:12px;gap:var(--wall-gap);animation-name:screenshot-wall;animation-duration:220s}
.hero .track-group{gap:var(--wall-gap);align-items:start}
.hero .real-bg-site img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.hero .real-bg-site .browser-bar{height:14px}
@keyframes screenshot-wall{to{transform:translateY(calc(-50% - var(--wall-gap)/2))}}
@media(max-width:600px){.hero .track{--wall-gap:9px}.hero .real-bg-site .browser-bar{height:10px}.hero .featured-work{padding-bottom:50px}.hero .featured-label{margin-top:32px}.works .desktop{border-width:5px}}
@media(prefers-reduced-motion:reduce){.hero .track{animation:none}}
/* Keep the expanded service description readable alongside the logo and navigation. */
header{gap:18px}
header .brand{min-width:0}
.brand small{max-width:34em;line-height:1.5;letter-spacing:.04em}
.menu{flex-shrink:0}
@media(max-width:900px){.menu{display:block;border:0;background:none;font-size:24px;color:var(--ink)}header nav{display:none;position:absolute;top:100%;left:0;right:0;padding:25px;background:var(--bg);box-shadow:0 10px 20px #0001}header nav.open{display:flex;flex-direction:column;align-items:stretch}header nav a{font-size:13px;padding:8px}}
.works .work h3{font-family:inherit;font-size:18px;margin:17px 2px 2px;font-weight:500;letter-spacing:.035em;align-items:center}
.works .work h3 span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #dce2d9;border-radius:50%;font-size:14px;color:#779586}
.works .category{font-family:Montserrat,'Zen Kaku Gothic Antique',sans-serif;font-size:9px;letter-spacing:.09em;margin-left:2px;color:#818d83}
.works .caption{margin-top:40px;font-size:10px;line-height:1.9;color:#7f887e}
@media(max-width:900px){.works .work-visual{padding:25px 20px 14px}#works-grid{gap:35px 22px}.works .phone small{font-size:6px}.works .work h3{font-size:16px}}
@media(max-width:600px){.works{padding-top:53px;padding-bottom:60px}.works-heading{margin-bottom:25px}.works h2{font-size:29px;margin-bottom:16px}.works-heading p{font-size:11px}.works .filters{gap:7px;padding-bottom:22px;margin-bottom:27px}.works .filters button{font-size:10px;padding:8px 12px}#works-grid{grid-template-columns:1fr;gap:32px}.works .work-visual{padding:28px 24px 18px;border-radius:18px}.works .site-head{font-size:9px;padding:8px}.works .site-bottom{font-size:8px;padding:10px}.works .phone{border-radius:15px}.works .phone small{font-size:6px}.works .work h3{font-size:16px;margin-top:12px}.works .category{font-size:8px}.works .caption{margin-top:28px;font-size:9px}}