/* V8: clear value proposition, verified related projects, and stronger conversion. */
:root{--easing:cubic-bezier(.22,1,.36,1)}
.site-header{position:sticky;top:0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(247,247,244,.96);z-index:70}
.scroll-progress{position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--mint);transition:width .1s linear;pointer-events:none}
.hero-proof{display:flex;gap:22px 35px;align-items:center;flex-wrap:wrap;padding:7px 0 18px;margin-top:0;border-top:1px solid #d7d9d6;color:#667075;font-size:11px;font-weight:650}
.hero-proof span{display:inline-flex;align-items:center;gap:9px}.hero-proof i{width:6px;height:6px;background:var(--mint);display:inline-block;transform:rotate(45deg);flex:none}
.hero-bottom{padding-top:8px}
.hero-text h1{animation:v8-hero .9s var(--easing) both}
.hero-lower{animation:v8-hero .9s .12s var(--easing) both}
.hero-art-v7{animation:v8-art .92s .07s var(--easing) both}
@keyframes v8-hero{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes v8-art{from{opacity:.4;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.needs-section{background:#edeeea;padding-block:clamp(88px,9vw,140px)}
.needs-intro{display:grid;grid-template-columns:25% 1fr 1fr;align-items:end;gap:4%;margin-bottom:64px}
.needs-intro h2{font-size:clamp(35px,4.3vw,66px);letter-spacing:-.075em;line-height:1.28;margin:0;font-weight:850}
.needs-intro h2 em{color:var(--mint-dark);font-style:normal}
.needs-intro p{font-size:14px;line-height:2.1;color:#586367;margin:0}
.needs-intro .section-tag{align-self:start;margin-top:12px}
.needs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #aeb5b2;border-bottom:1px solid #aeb5b2}
.needs-card{position:relative;display:flex;flex-direction:column;gap:0;min-height:295px;padding:24px 29px 25px;border-right:1px solid #c7ceca;transition:background .35s var(--easing),transform .35s var(--easing)}
.needs-card:first-child{padding-left:0}.needs-card:last-child{border-right:0}
.needs-card:hover{background:#fff;transform:translateY(-3px)}
.needs-number{display:flex;justify-content:space-between;align-items:center;color:#6b7477;font:750 10px/1.4 Arial,sans-serif;letter-spacing:.12em}
.needs-number>span{font-size:19px;color:var(--mint-dark)}
.needs-card h3{font-size:clamp(19px,2vw,27px);line-height:1.55;letter-spacing:-.065em;margin:33px 0 11px;font-weight:790}
.needs-card p{font-size:12px;color:#687276;line-height:1.95;margin-bottom:32px}
.needs-action{margin-top:auto;padding-top:12px;border-top:1px solid #cdd3cf;font-weight:780;font-size:11px;display:flex;justify-content:space-between;gap:12px}
.needs-action>span{font-size:17px;color:var(--mint-dark)}
.work-design-note{border-top:1px solid #415054;margin-top:23px!important;padding-top:17px;color:#c2d4d2!important;line-height:1.8!important}
.work-design-note span{display:block;color:#6bc1bc;font:750 9px/1.5 Arial,sans-serif;letter-spacing:.14em;margin-bottom:7px}
.works-action{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:34px 0;margin-top:42px;border-top:1px solid #506164;border-bottom:1px solid #506164}
.works-action>div>span{color:#7bb8b6;font:800 10px Arial,sans-serif;letter-spacing:.14em}
.works-action p{font-size:clamp(17px,2.1vw,27px);font-weight:740;letter-spacing:-.035em;margin:13px 0 0}
.works-action a{background:var(--mint);color:#09282b;padding:18px 20px;white-space:nowrap;display:inline-flex;align-items:center;gap:50px;font-size:12px;font-weight:850;transition:background .25s,transform .25s}
.works-action a:hover{background:#8ae0d9;transform:translateY(-2px)}.works-action a span{font-size:18px}
.price-page-count{display:block;margin-top:-4px;margin-bottom:10px;color:#627177;font-size:12px;font-weight:700}
.operator-link{display:inline-flex;gap:16px;border-bottom:1px solid var(--mint-dark);padding:10px 0 12px;font-size:12px;font-weight:750;color:var(--mint-dark);margin-top:15px}
.contact-privacy{font-size:11px;color:#bac9c7;line-height:1.8;margin:15px 0 0}
.contact-privacy a{color:#fff;text-underline-offset:3px;text-decoration:underline}
/* Motion is progressively enhanced; content remains visible without JS. */
@media(prefers-reduced-motion:no-preference){.v8-site.js-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s var(--easing),transform .75s var(--easing)}.v8-site.js-ready .reveal.is-visible{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.needs-intro{grid-template-columns:1fr 1fr;gap:15px 30px}.needs-intro .section-tag{grid-column:1 / -1}.needs-card{padding-inline:17px}.needs-card h3{font-size:21px}}
@media(max-width:870px){.site-header{backdrop-filter:none;-webkit-backdrop-filter:none}.needs-intro{grid-template-columns:1fr 1fr}.needs-grid{grid-template-columns:1fr 1fr}.needs-card:nth-child(2){border-right:0}.needs-card:last-child{grid-column:1 / -1;min-height:210px;border-top:1px solid #c7ceca;padding-left:0}.needs-card{min-height:265px}.hero-proof{padding-top:15px}}
@media(max-width:600px){.needs-section{padding-block:72px}.needs-intro{display:block;margin-bottom:29px}.needs-intro h2{font-size:37px;margin-top:27px}.needs-intro p{font-size:13px;margin-top:20px}.needs-grid{display:block}.needs-card{border-right:0;border-bottom:1px solid #c7ceca;min-height:0;padding:20px 1px 23px}.needs-card:first-child{padding-left:1px}.needs-card:last-child{padding-left:1px;border:0}.needs-card h3{margin-top:19px;font-size:22px}.needs-card p{margin-bottom:22px;font-size:12px}.needs-action{padding-top:11px}.hero-proof{font-size:10px;gap:9px 20px}.work-design-note{font-size:11px!important}.works-action{display:block;padding:24px 0;margin-top:35px}.works-action p{font-size:19px;line-height:1.5}.works-action a{margin-top:22px;display:flex;justify-content:space-between;width:100%;white-space:normal;gap:15px}.contact-privacy{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.hero-text h1,.hero-lower,.hero-art-v7{animation:none!important}.needs-card:hover,.works-action a:hover{transform:none}}
/* Japanese title rhythm: avoid orphan syllables in editorial headings. */
@media(min-width:1051px){.needs-intro h2{font-size:clamp(37px,3.8vw,55px)}.needs-card h3{font-size:clamp(19px,1.6vw,23px)}}