
:root{--red:#d30104;--ink:#090909;--paper:#f4f3ef;--serif:"Yu Mincho","Hiragino Mincho ProN",serif;--sans:"Helvetica Neue","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}
.lower-hero{height:400px;min-height:400px;max-height:400px;padding-top:92px;background:#101010;color:#fff;position:relative;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.1)}
.lower-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0b 0%,#0b0b0b 36%,rgba(11,11,11,.84) 52%,rgba(11,11,11,.18) 76%,rgba(11,11,11,.02) 100%);z-index:2;pointer-events:none}
.lower-hero::after{content:"";position:absolute;left:4vw;right:4vw;bottom:0;height:1px;background:rgba(255,255,255,.16);z-index:4}
.hero-photo{position:absolute;inset:0 0 0 38%;overflow:hidden;z-index:1}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:grayscale(1) contrast(1.12) brightness(.66);transform:scale(1.035);transition:transform 6s cubic-bezier(.2,.65,.25,1)}.lower-hero:hover .hero-photo img{transform:scale(1.065)}.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.2))}
.lower-copy{height:100%;padding:34px 4vw 30px 8vw;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:5;max-width:760px}.lower-copy .eyebrow{font-size:10px;letter-spacing:.28em;color:#fff;margin:0 0 16px;opacity:.72}.lower-copy h1{font-family:var(--serif);font-size:clamp(52px,5.4vw,82px);font-weight:400;line-height:.92;letter-spacing:.025em;margin:0;color:#fff}.lower-copy .jp{font-family:var(--serif);font-size:clamp(16px,1.4vw,21px);margin:14px 0 0;color:#fff}.lower-copy .line{width:70px;height:2px;background:var(--red);margin-top:18px}.lower-copy .note{margin-top:18px;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.54)}
.hero-red-rule{position:absolute;z-index:5;right:4vw;top:92px;width:1px;height:calc(100% - 92px);background:linear-gradient(to bottom,var(--red) 0 34%,rgba(211,1,4,.16) 34% 100%)}.hero-ghost{position:absolute;z-index:3;right:5.5vw;bottom:-19px;font-family:var(--serif);font-size:clamp(76px,10vw,156px);font-weight:400;line-height:1;letter-spacing:.04em;color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none}
.intro{padding:120px 8vw 110px;display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.small-en{font-size:11px;letter-spacing:.24em;color:var(--red);margin:0 0 20px}.intro h2,.method h2{font-family:var(--serif);font-weight:400}.intro h2{font-size:clamp(34px,4vw,56px);line-height:1.45;margin:0}.intro .lead{font-size:17px;line-height:2.15;max-width:680px;margin-top:44px}.methods{background:#111;color:#fff;padding:120px 8vw}.method{display:grid;grid-template-columns:80px .9fr 1.1fr;gap:4vw;padding:86px 0;border-top:1px solid rgba(255,255,255,.18);align-items:center}.method:first-child{border-top:0;padding-top:0}.method .num{font-size:11px;letter-spacing:.2em;color:var(--red);align-self:start;padding-top:10px}.method h2{font-size:clamp(34px,3.7vw,54px);margin:0 0 22px}.method .en{font-size:10px;letter-spacing:.2em;color:#aaa}.method p{font-size:15px;line-height:2;color:#ddd;margin:28px 0 0}.method figure{margin:0;height:420px;overflow:hidden}.method img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .8s ease}.method:hover img{transform:scale(1.025)}.other{padding:110px 8vw 130px;background:#f4f3ef;display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}.other h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.5vw,50px);margin:0}.other p{line-height:2.1;margin:0;font-size:15px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.on{opacity:1;transform:none}
@media(max-width:768px){.lower-hero{height:330px;min-height:330px;max-height:330px;padding-top:72px}.lower-hero::before{background:linear-gradient(90deg,#0b0b0b 0%,rgba(11,11,11,.88) 48%,rgba(11,11,11,.28) 100%)}.hero-photo{left:24%}.lower-copy{padding:28px 8vw 24px;max-width:88%}.lower-copy h1{font-size:12vw}.lower-copy .note{margin-top:16px}.hero-red-rule{top:72px;height:calc(100% - 72px);right:5vw}.hero-ghost{right:6vw;bottom:-8px;font-size:18vw}.intro,.other{grid-template-columns:1fr;padding:80px 8vw;gap:30px}.intro .lead{margin-top:0}.methods{padding:80px 8vw}.method{grid-template-columns:42px 1fr;gap:20px;padding:65px 0}.method figure{grid-column:1/-1;height:260px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* v3.4 — TOP shared visual treatment + restrained section motion */
.method figure{position:relative;overflow:hidden}
.method figure img{filter:saturate(.68) contrast(1.05) brightness(.78);transform:scale(1.035);transition:transform 1.15s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.method figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,12,.05),rgba(10,12,12,.22)),repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0,rgba(255,255,255,.028) 1px,transparent 1px,transparent 4px)}
.method:hover figure img{transform:scale(1.015);filter:saturate(.78) contrast(1.08) brightness(.84)}

/* Keep the same light upward reveal language used on TOP. */
.intro.reveal,.other.reveal{transform:translateY(32px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.method.reveal{transform:translateY(34px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.method.reveal>div:nth-of-type(2),.method.reveal>figure{opacity:0;transform:translateY(18px);transition:opacity .85s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.method.reveal.on>div:nth-of-type(2){opacity:1;transform:none;transition-delay:.10s}
.method.reveal.on>figure{opacity:1;transform:none;transition-delay:.20s}
.method.reveal.on>figure img{transform:scale(1.035)}
.method.reveal.on:hover>figure img{transform:scale(1.015)}
@media(prefers-reduced-motion:reduce){.method.reveal>div:nth-of-type(2),.method.reveal>figure{opacity:1!important;transform:none!important}}


/* v3.9 — OTHER METHODS desktop alignment */
@media(min-width:769px){
  .other>p{padding-top:51px;max-width:760px;}
}
