/* Material-led compositions, following DESIGN.md section 10. */
.m-hero {
    position: relative;
    isolation: isolate;
    min-height: min(860px, calc(100svh - 80px));
    min-height: max(720px, min(860px, calc(100svh - 80px)));
    display: flex;
    align-items: center;
    background: var(--warm-white);
    overflow: clip;
    --pointer-x: 0px; --pointer-y: 0px; --hero-shift: 0px; --hero-scale: 1;
}
.home-kokuyo .m-hero{min-height:clamp(680px,calc(100svh - 92px),920px);}
.m-hero-content { position: relative; z-index: 3; padding-block: 72px; pointer-events: none; }
.m-hero-content a, .m-hero-content button { pointer-events: auto; }
.m-hero-content .r-eyebrow { margin-bottom: 28px; color: var(--muted-color); }
.renew .m-hero h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.3; letter-spacing: -.033em; text-wrap: initial; }
.m-title-line { display: block; overflow: hidden; padding-bottom: .04em; }
.m-title-line>span { display: block; }
.m-char { display: inline-block; animation: m-char-in .9s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--l) * .1s + var(--i) * .03s); }
.m-blue { color: var(--primary-color); }
.m-rotator { position: relative; display: inline-block; vertical-align: bottom; height: 1.3em; overflow: hidden; transition: width .7s cubic-bezier(.16,1,.3,1); }
.m-rotator.is-enhanced::after { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: 3px; background: var(--primary-color); transform-origin: left; animation: m-rule-in 1s 1.2s cubic-bezier(.16,1,.3,1) both; }
.m-rotator.is-swapping::after { animation: m-rule-sweep .9s cubic-bezier(.16,1,.3,1); }
@keyframes m-rule-sweep { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.m-rotator-word { display: inline-block; white-space: nowrap; }
.m-rotator.is-enhanced .m-rotator-word { position: absolute; left: 0; top: 0; opacity: 0; }
.m-rotator.is-enhanced .m-rotator-word.is-current { position: relative; opacity: 1; }
.m-rotator-word.is-glitch { animation: m-glitch-core .56s steps(1,end) both; }
.m-rotator-word.is-glitch::before, .m-rotator-word.is-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; mix-blend-mode: multiply; }
.m-rotator-word.is-glitch::before { color: #62aef0; animation: m-glitch-a .56s steps(1,end) both; }
.m-rotator-word.is-glitch::after { color: #ff64c8; animation: m-glitch-b .56s steps(1,end) both; }
@keyframes m-glitch-core { 0% { transform: translate(3px,0) skewX(-10deg); opacity: .5; } 14% { transform: translate(-4px,1px) skewX(4deg); opacity: 1; } 28% { transform: translate(2px,-1px); } 42% { transform: translate(-2px,0) skewX(-3deg); } 60% { transform: translate(1px,0); } 78%, 100% { transform: none; } }
@keyframes m-glitch-a { 0% { clip-path: inset(10% 0 62% 0); transform: translate(-7px,0); } 18% { clip-path: inset(64% 0 6% 0); transform: translate(6px,0); } 36% { clip-path: inset(32% 0 44% 0); transform: translate(-4px,0); } 54% { clip-path: inset(80% 0 2% 0); transform: translate(5px,0); } 72% { clip-path: inset(4% 0 84% 0); transform: translate(-2px,0); } 90%, 100% { clip-path: inset(50% 0 50% 0); opacity: 0; } }
@keyframes m-glitch-b { 0% { clip-path: inset(58% 0 14% 0); transform: translate(6px,0); } 18% { clip-path: inset(6% 0 70% 0); transform: translate(-5px,0); } 36% { clip-path: inset(44% 0 30% 0); transform: translate(4px,0); } 54% { clip-path: inset(18% 0 60% 0); transform: translate(-6px,0); } 72% { clip-path: inset(70% 0 12% 0); transform: translate(3px,0); } 90%, 100% { clip-path: inset(50% 0 50% 0); opacity: 0; } }
.m-hero-description { font-size: 16px; line-height: 1.9; color: var(--muted-color); margin-top: 28px; animation: m-copy-in 1s .35s both; }
.m-hero-content .r-actions { animation: m-copy-in 1s .5s both; }
.m-hero-word { position: absolute; left: 36%; top: 3%; font-size: clamp(88px, 13vw, 200px); font-weight: 700; letter-spacing: -.07em; color: rgba(0,0,0,.035); line-height: 1; white-space: nowrap; user-select: none; }
.m-reel { position: absolute; z-index: 1; inset: 0 0 0 52%; pointer-events: none; }
.m-reel canvas { display: block; width: 100%; height: 100%; animation: m-copy-in 1.2s .6s both; }
.m-hero-foot { position: absolute; inset-inline: 0; bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 4; }
.m-scroll-cue { display: inline-flex; gap: 16px; align-items: center; color: var(--muted-color); font-size: 12px; text-decoration: none; min-height: 44px; }
.m-scroll-line { width: 32px; height: 1px; background: var(--primary-color); transform-origin: left; animation: m-rule-in 1.5s .6s both; }
.m-motion-toggle { background: transparent; border: 1px solid var(--border-color); padding: 10px 12px; min-height: 44px; border-radius: 4px; font: inherit; font-size: 12px; color: var(--muted-color); cursor: pointer; }
.m-motion-toggle[hidden] { display: none; }
.m-motion-toggle:disabled { cursor: default; }
.m-motion-toggle:hover { background: rgba(255,255,255,.7); }

/* Service chapters remain normal readable content without script or motion. */
.m-services-section { padding-bottom: 32px; }
.m-service-story { position: relative; }
.m-story-stage { display: none; }
.m-story-chapter { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding: 56px 0; border-top: 1px solid var(--border-color); }
.m-chapter-copy { position: relative; z-index: 2; }
.m-chapter-copy .r-eyebrow { color: var(--primary-hover); margin-bottom: 24px; font-size: 12px; }
.m-chapter-copy h3 { font-size: clamp(28px,3.5vw,48px); letter-spacing: -.035em; line-height: 1.4; }
.m-chapter-copy h4 { font-size: 18px; font-weight: 600; margin: 28px 0 16px; }
.m-chapter-description { font-size: 16px; color: var(--muted-color); line-height: 1.9; max-width: 440px; }
.m-chapter-link { margin-top: 24px; gap: 48px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.m-chapter-link>span { color: var(--primary-color); transition: transform .3s; }
.m-chapter-link:hover>span { transform: translate(4px,-4px); }
.m-mobile-material { mix-blend-mode: multiply; mask-image: radial-gradient(ellipse 65% 68% at 50% 50%,#000 40%,transparent 77%); }
.m-story-enhanced { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; }
.m-story-enhanced .m-story-stage { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 32px; height: min(700px,calc(100svh - 64px)); align-self: start; overflow: clip; }
.m-story-enhanced .m-story-chapters { grid-column: 1; grid-row: 1; }
.m-story-enhanced .m-story-chapter { display: flex; min-height: max(440px,65svh); padding: 48px 0; border: none; }
.m-story-enhanced .m-mobile-material { display: none; }
.m-stage-axis { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border-color); padding-top: 16px; font-size: 12px; color: var(--muted-color); }
.m-stage-scenes { position: absolute; inset: 48px 0 64px; }
.m-stage-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(60px) rotate(3deg) scale(.92); transition: opacity .65s, transform 1s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.m-stage-scene.is-active { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
.m-stage-number { position: absolute; top: 0; left: 0; font-size: clamp(120px,18vw,260px); line-height: 1; letter-spacing: -.08em; font-weight: 700; color: rgba(0,0,0,.045); }
.m-stage-material { position: absolute; inset: 5% -30% 0; mix-blend-mode: multiply; mask-image: radial-gradient(ellipse 62% 66% at 50% 52%,#000 35%,transparent 75%); }
.m-stage-material img { width: 100%; height: 100%; object-fit: contain; }
.m-stage-name { position: absolute; bottom: 8px; left: 0; color: var(--muted-color); font-size: 12px; }
.m-stage-progress { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 24px; }
.m-stage-progress>span { flex: 1; font-size: 12px; color: var(--muted-color); }
.m-stage-progress i { display: block; height: 1px; background: var(--border-color); margin-top: 12px; position: relative; }
.m-stage-progress i:after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--primary-color); transition: transform .7s; }
.m-stage-progress .is-active { color: var(--primary-color); }
.m-stage-progress .is-active i:after { transform: scaleX(1); }

/* Detail and contact artwork share the same edge-free material treatment. */
.renew .r-detail-art { border-radius: 0; mix-blend-mode: multiply; overflow: visible; mask-image: radial-gradient(ellipse 66% 66% at 50% 50%,#000 40%,transparent 76%); transform: scale(1.14); }
.renew .r-detail-hero-visual { overflow: clip; padding-block: 24px; }
.m-cta { position: relative; isolation: isolate; overflow: clip; background: #213183; color: #fff; padding: 104px 0; }
.m-cta .r-cta-inner { position: relative; z-index: 2; }
.m-cta .r-eyebrow,.m-cta p:not(.r-eyebrow) { color: rgba(255,255,255,.8); }
.m-cta .r-button { background: #fff; color: #213183; }
.m-cta .r-button:hover { background: var(--warm-white); }
.m-cta-material { position: absolute; width: 70%; right: -10%; top: -20%; bottom: -30%; opacity: .42; mix-blend-mode: normal; pointer-events: none; mask-image: radial-gradient(ellipse 66% 66% at 50% 50%,#000 25%,transparent 75%); }
.m-cta-material .r-brand-art,.m-cta-material img { height: 100%; }
.m-cta-material img { object-fit: cover; }
@keyframes m-type-in { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes m-char-in { from { transform: translateY(105%); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes m-copy-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes m-material-in { from { opacity: 0; transform: translate3d(5%,4%,0) scale(1.1); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media(max-width:1080px) {
    .m-hero { min-height: 720px; }
    .m-reel { left: 56%; }
    .m-story-enhanced { gap: 24px; grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px) {
    .m-hero, .home-kokuyo .m-hero { min-height: 0; align-items: flex-start; }
    .m-hero-content { padding-block: 48px 88px; }
    .m-reel { display: none; }
    .renew .m-hero h1 { font-size: clamp(32px,6.8vw,40px); line-height: 1.35; }
    .m-hero-content .r-eyebrow { font-size: 12px; margin-bottom: 20px; }
    .m-hero-description { font-size: 14px; margin-top: 24px; }
    .m-hero-content .r-actions { margin-top: 24px; gap: 16px; }
    .m-hero-word { left: -2%; top: 54%; font-size: 100px; }
    .m-hero-foot { bottom: 16px; }.m-scroll-cue { font-size: 12px; gap: 8px; }.m-scroll-line { width: 16px; }
    .m-motion-toggle { font-size: 12px; padding: 8px; }
    .m-services-section { padding-bottom: 0; }
    .m-story-chapter { grid-template-columns: 1fr; gap: 0; padding: 40px 0 16px; }
    .m-chapter-copy h3 { font-size: 32px; }.m-chapter-copy h4 { margin-top: 24px; }
    .m-mobile-material { width: 120%; margin-left: -10%; max-width: none; }
    .m-service-story { overflow: clip; }
    .m-cta { padding: 64px 0; }.m-cta-material { width: 130%; right: -45%; top: 10%; opacity: .24; }
    .renew .r-detail-art { transform: none; }
}
@media(max-width:380px) {
    .m-hero-foot { gap: 8px; }.m-scroll-cue { letter-spacing: -.02em; }.m-motion-toggle { font-size: 12px; }
}
.renew.motion-paused *, .renew.motion-paused *:before, .renew.motion-paused *:after { animation: none!important; transition: none!important; }
@media(prefers-reduced-motion:reduce) {
    .m-hero *, .m-stage-scene, .m-stage-progress i:after { animation: none!important; transition: none!important; }
}

.m-surface-revealed { animation: m-surface-reveal 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes m-surface-reveal { from { clip-path: inset(10% 0 75% 0); transform: translateY(28px); } to { clip-path: inset(0); transform: translateY(0); } }
@media(prefers-reduced-motion:reduce) { .m-surface-revealed { animation: none; } }

.m-hero.motion-paused * { animation: none!important; transition: none!important; }