:root{--ink:#071015;--paper:#fffdf8;--gold:#b98a45;--pale:#e6cc95;--mincho:'Noto Serif CJK JP','Yu Mincho','Hiragino Mincho ProN',serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:'Helvetica Neue','Noto Sans CJK JP',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--pale);outline-offset:7px}.skip{position:fixed;top:-100px;left:15px;padding:15px;z-index:30;background:var(--paper);color:var(--ink)}.skip:focus{top:15px}header{height:100px;position:absolute;z-index:10;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 4vw}.brand{width:225px}.brand img{display:block;width:100%}.draft{font-size:8px;letter-spacing:2px;color:#929c91}.header-link{font-size:11px;letter-spacing:.08em}.header-link span{margin-left:30px;color:var(--pale)}.journey{height:360vh}.pin{height:100vh;min-height:700px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#071015}.light{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 53%,#2b4035a0,transparent 58%)}.grain{position:absolute;inset:0;opacity:.035;pointer-events:none;z-index:6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}.vertical-note{position:absolute;right:3vw;top:27%;writing-mode:vertical-rl;font-size:10px;letter-spacing:.25em;color:#839385;z-index:5}.hero-copy{position:absolute;left:6vw;top:24%;width:53%;z-index:4;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--pale);margin:0 0 27px}.headlines{height:clamp(220px,25vw,380px);position:relative}h1,.phase-title{position:absolute;inset:0 auto auto 0;margin:0;font-family:var(--mincho);font-size:clamp(65px,8.7vw,132px);font-weight:400;line-height:1.34;letter-spacing:-.065em;white-space:nowrap}h1>span,.phase-title>span{display:block}em{font-style:normal;color:var(--pale)}h1 em,.phase-title em{display:block;margin-left:.4em}.phase-title{opacity:0}.lead{font-size:12px;line-height:2.2;letter-spacing:.07em;color:#c8cfc3;margin:15px 0 0}.art-stage{position:absolute;inset:4% -8% 0 23%;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.art-scene{width:1000px;height:700px;position:relative;flex-shrink:0;transform-origin:50% 50%;will-change:transform}.ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3}.ribbon-back,.ribbon-main,.ribbon-highlight{fill:none;stroke-linejoin:round;stroke-linecap:round}.ribbon-back{stroke:#553c1f;stroke-width:89;transform:translate(7px,13px);filter:url(#ribbonshadow)}.ribbon-main{stroke:url(#metal);stroke-width:84}.ribbon-highlight{stroke:url(#edge);stroke-width:2;transform:translate(-4px,-7px);opacity:.8}.scene-shadow{position:absolute;left:360px;top:610px;width:550px;height:65px;background:#0009;border-radius:50%;filter:blur(25px)}.giant-index{position:absolute;top:100px;left:350px;font:italic 330px/.8 Georgia,serif;color:#e6cc9508;letter-spacing:-30px}.loose-word{position:absolute;left:420px;top:115px;color:#f2e7c8;font:44px var(--mincho);transform:rotate(-14deg);z-index:4}.loose-word span,.loose-line span{display:block;font:9px sans-serif;letter-spacing:.1em;margin-top:15px;color:#9daa98}.loose-color{position:absolute;left:690px;top:455px;width:155px;transform:rotate(12deg);z-index:4}.loose-color i{display:inline-block;width:45px;height:48px;background:#8d9c79;box-shadow:5px 8px 14px #0005}.loose-color i:nth-child(2){background:#dbc397;transform:translateY(-12px)}.loose-color i:nth-child(3){background:#fff5dd}.loose-color span{display:block;font-size:9px;letter-spacing:.1em;margin-top:10px;color:#b1bba8}.loose-line{position:absolute;left:820px;top:160px;font:italic 55px Georgia,serif;color:#e6cc95;transform:rotate(8deg);z-index:4}.site{position:absolute;left:295px;top:179px;width:584px;height:348px;background:#f6f1e5;color:#20312a;z-index:2;overflow:hidden;opacity:0;box-shadow:0 25px 60px #0006}.site-nav{height:50px;padding:0 25px;display:flex;align-items:center;justify-content:space-between}.site-nav strong{font:12px var(--mincho)}.site-nav>span{font-size:6px;letter-spacing:1px}.site-nav>b{display:none}.site-body{display:flex;height:258px}.site-copy{width:52%;padding:24px 0 12px 27px}.site-copy>span{font-size:6px;letter-spacing:1.5px}.site-copy h3{font:400 31px/1.6 var(--mincho);margin:17px 0 12px}.site-copy p{font-size:7px;line-height:1.9;color:#667367}.site-copy>b{font-size:7px;display:block;margin-top:17px;font-weight:400}.site-art{width:48%;position:relative;overflow:hidden;background:linear-gradient(135deg,#c4baa1,#e8dfc8 60%,#a3977c);isolation:isolate}.fold{position:absolute;left:40px;top:5px;width:135px;height:245px;transform:rotate(-28deg) skewY(18deg);background:linear-gradient(90deg,#6c755b,#b7bca1 44%,#f2efd7 49%,#7b8569 51%,#b4b79b);box-shadow:12px 30px 20px #3a432844}.fold-two{transform:rotate(28deg) skewY(-18deg);left:112px;top:70px;width:110px;height:170px;background:linear-gradient(90deg,#e6dcc2,#fffae7 49%,#b8aa85 51%,#dfd3b5)}.fold-three{left:-15px;top:200px;width:150px;height:90px;transform:rotate(-25deg);background:linear-gradient(110deg,#b79758,#f6de9d 50%,#9b753a)}.site-art>span{position:absolute;bottom:12px;right:12px;font-size:6px;letter-spacing:1px;color:#4c563f}.site-footer{height:40px;background:#23392d;color:#dbe2cf;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:6px;letter-spacing:1px}.phone{position:absolute;left:790px;top:336px;width:136px;height:266px;z-index:5;background:#f5f0e4;border:6px solid #26362e;border-radius:23px;box-shadow:13px 28px 32px #0008;color:#20312a;opacity:0;overflow:hidden}.notch{width:42px;height:10px;background:#26362e;position:absolute;left:41px;border-radius:0 0 8px 8px}.phone-nav{font-size:6px;padding:22px 9px 9px;display:flex;justify-content:space-between}.phone>p{font:17px/1.5 var(--mincho);margin:0 11px 10px}.phone-art{height:94px;position:relative;overflow:hidden;background:#d3c8b0}.phone-art i{position:absolute;top:9px;left:25px;width:52px;height:94px;transform:rotate(-30deg);background:linear-gradient(90deg,#82906a,#e6e5c8 49%,#798563 51%,#b6bea0);box-shadow:8px 10px 12px #28391f33}.phone-art i+i{left:67px;top:40px;transform:rotate(30deg);background:linear-gradient(90deg,#f5eacb,#e1cf9c 49%,#a58e55 51%,#eadab4)}.phone small{display:block;margin:12px 9px 8px;font-size:7px}.phone>b{font-size:6px;margin-left:9px;font-weight:400}.finish-note{position:absolute;left:333px;top:572px;font:20px/1.8 var(--mincho);letter-spacing:.1em;color:#e6cc95;opacity:0}.chapter-caption{position:absolute;bottom:45px;left:6vw;display:flex;gap:20px;align-items:center;z-index:7}.chapter-num{font:italic 38px Georgia,serif;color:var(--pale)}.chapter-desc{font-size:12px;letter-spacing:.12em}.controls{position:absolute;bottom:40px;right:6vw;z-index:7;display:grid;grid-template-columns:1fr 1fr;gap:15px 35px;align-items:center}.steps{display:flex;align-items:center;gap:10px}.steps button{background:none;border:0;color:#809082;font:12px Georgia,serif;padding:9px}.steps button[aria-current]{color:var(--pale)}.steps span{width:15px;height:1px;background:#87917766}#play{font-size:10px;border:0;border-bottom:1px solid #bba46b88;padding:8px 0;background:none}#play span{margin-left:18px;color:var(--pale)}.scroll-label{grid-column:1/-1;text-align:right;font-size:8px;letter-spacing:.1em;color:#8e9a8a;margin:0}.progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#b98a4522}.progress i{display:block;height:100%;width:0;background:var(--pale)}.approach{background:#f3f0e7;color:#13251d;padding:100px 8vw}.approach-top{display:grid;grid-template-columns:1.5fr 1fr;gap:20px 80px}.approach-top>.eyebrow{grid-column:1/-1;color:#8b6e38}.approach-top h2{font:400 60px/1.45 var(--mincho);letter-spacing:-.05em;margin:0}.approach-top h2 span{margin-left:.5em}.approach-lead{font-size:13px;line-height:2.7;margin:15px 0}.approach-rows{margin-top:70px}.approach-rows article{border-top:1px solid #bfc6b7;padding:27px 0;display:grid;grid-template-columns:90px 180px 1fr;align-items:center;gap:20px}.approach-rows article>span{font:italic 27px Georgia,serif;color:#98743c}.approach-rows h3{font:400 34px var(--mincho);margin:0}.approach-rows p{font-size:12px;line-height:1.9;margin:0;color:#5e6b5b}.contact{padding:100px 8vw;background:radial-gradient(ellipse at 80% 90%,#273d2a88,transparent 60%);position:relative}.contact h2{font:400 clamp(65px,8vw,120px)/1.4 var(--mincho);letter-spacing:-.05em;margin:20px 0 35px}.contact h2 em{margin-left:.6em}.contact button{background:none;border:1px solid #a88e5766;border-radius:50%;padding:25px 35px;font-size:12px}.contact button span{margin-left:30px;color:var(--pale)}.contact>p:not(.eyebrow){font-size:10px;color:#8e9c88;margin-top:40px}.contact small{font-size:9px;color:#8e9c88;line-height:2}footer{border-top:1px solid #75846e33;padding:25px 5vw;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#84917e}
@media(max-width:1100px){.art-scene{transform:scale(.85)}.art-stage{left:15%;right:-17%}.hero-copy{top:26%}.headlines{height:240px}h1,.phase-title{font-size:80px}.chapter-caption{bottom:45px}.chapter-desc{font-size:10px}.approach-top h2{font-size:48px}}
@media(max-width:700px){header{height:76px;padding:0 6vw}.brand{width:174px}.draft{display:none}.header-link{font-size:9px}.header-link span{margin-left:10px}.journey{height:330vh}.pin{height:100svh;min-height:720px}.hero-copy{left:7vw;top:113px;width:90%}.eyebrow{font-size:9px;margin-bottom:15px;letter-spacing:.08em}.headlines{height:177px}h1,.phase-title{font-size:clamp(55px,15.5vw,75px);letter-spacing:-.06em;line-height:1.35}h1 em,.phase-title em{margin-left:.47em}.lead{font-size:10px;line-height:2;margin-top:10px;letter-spacing:.04em}.vertical-note{display:none}.art-stage{inset:auto -210px 83px -260px;height:340px;justify-content:center}.art-scene{transform:scale(.52);transform-origin:50% 50%}.chapter-caption{bottom:88px;left:7vw;gap:13px}.chapter-num{font-size:27px}.chapter-desc{font-size:9px}.controls{bottom:22px;left:7vw;right:7vw;display:flex;justify-content:space-between;gap:10px}.steps{gap:4px}.steps button{font-size:10px;padding:8px}.steps span{width:12px}.scroll-label{position:absolute;right:0;bottom:-13px;font-size:6px}#play{font-size:9px}.light{background:radial-gradient(ellipse at 65% 58%,#2b4035a0,transparent 65%)}.approach{padding:65px 7vw}.approach-top{display:block}.approach-top h2{font-size:39px}.approach-lead{font-size:12px;line-height:2.3;margin:30px 0}.approach-rows{margin-top:35px}.approach-rows article{grid-template-columns:35px 1fr;gap:12px;padding:23px 0}.approach-rows h3{font-size:30px}.approach-rows article>span{font-size:23px}.approach-rows p{grid-column:2;font-size:10px}.contact{padding:70px 7vw}.contact h2{font-size:60px}.contact .eyebrow{font-size:10px}.contact button{font-size:10px;padding:20px 27px}footer{gap:15px;flex-direction:column;font-size:7px}}
@media(max-width:370px){.header-link{font-size:8px}.brand{width:155px}.art-scene{transform:scale(.47)}.hero-copy{top:106px}.headlines{height:163px}.lead{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.journey{height:auto}.pin{position:relative}.phase-title{display:none!important}h1{opacity:1!important;transform:none!important}.progress,#play,.scroll-label{display:none}.ribbon-back{filter:none}}
/* Contrast-safe controls remain readable as the gold ribbon moves behind them. */
.controls{background:rgba(7,16,21,.96);padding:12px 16px;border:1px solid rgba(230,204,149,.24);border-radius:3px;box-shadow:0 6px 22px #0003}.steps button{color:#aebcae}.steps button[aria-current]{color:#f0d9a6}.scroll-label{color:#aebcae}#play{color:#fffdf8}
@media(max-width:700px){.controls{padding:8px 10px;bottom:20px}.scroll-label{display:none}}
/* Finished devices: the same fictional real-estate identity on desktop and mobile.
   Photo areas are clipped from the existing public architecture design-sample asset. */
.estate-site{background:#f8f6ef}.estate-site .site-nav{height:43px;padding:0 20px}.estate-site .site-nav strong{font:14px var(--mincho);letter-spacing:2px}.estate-site .site-nav strong span{display:block;font:5px sans-serif;letter-spacing:1.7px;margin-top:3px}.estate-site .site-nav>span{font-size:6px;letter-spacing:.5px}.estate-site .site-nav>b{display:block;font-size:6px;font-weight:400;border:1px solid #b4beae;padding:6px 10px}.estate-hero{height:174px;position:relative;overflow:hidden;background:#1b2b28}.estate-photo{position:relative;overflow:hidden;background:#c0c5b4}.estate-photo img{position:absolute;height:auto;max-width:none;display:block}.estate-hero>.estate-photo{position:absolute;inset:0}.coast img{width:223.46%;left:-123.46%;top:-30%}.estate-shade{position:absolute;inset:0;background:linear-gradient(90deg,#13251de8 0%,#15261d99 34%,transparent 70%)}.estate-hero-copy{position:absolute;left:26px;top:17px;color:#fffaf0}.estate-hero-copy>span{font-size:6px;letter-spacing:1px}.estate-hero-copy h3{font:400 27px/1.5 var(--mincho);letter-spacing:2px;margin:8px 0 5px}.estate-hero-copy p{font-size:6px;line-height:1.7;margin:0 0 9px;color:#e2e5d9}.estate-hero-copy>b{font-size:6px;border-bottom:1px solid #c9cbb688;padding-bottom:5px;font-weight:400}.estate-photo-label{position:absolute;bottom:12px;right:16px;font-size:6px;color:#fff8e5;border-left:1px solid #d8ccad;padding-left:8px;letter-spacing:1px}.estate-collection{height:131px;padding:12px 21px}.collection-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.collection-heading h4{font:400 12px var(--mincho);letter-spacing:1px;margin:0}.collection-heading>span{font-size:5px;color:#687461}.estate-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}.estate-card>.estate-photo{height:57px}.courtyard img{width:226.25%;left:-82.03%;top:-159.18%}.terrace img{width:223.46%;left:-123.46%;top:-30%}.estate-card p{font:8px var(--mincho);margin:5px 0 2px}.estate-card>span{font-size:4px;letter-spacing:1px;color:#6b7565}.estate-phone .phone-nav{height:46px;padding:19px 9px 6px;align-items:center}.estate-phone .phone-nav strong{font:9px var(--mincho);letter-spacing:.4px}.estate-phone .phone-nav small{display:block;font:3px sans-serif;letter-spacing:.6px;margin-top:3px}.phone-estate-hero{height:93px;position:relative;overflow:hidden}.phone-estate-hero>.estate-photo{height:100%}.coast-mobile img{width:362%;left:-237.5%;top:-31.25%}.phone-estate-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#14281dc9,transparent 90%)}.phone-photo-caption{position:absolute;z-index:1;left:10px;bottom:10px;font:14px/1.5 var(--mincho);letter-spacing:1px;color:#fffaf0}.phone-search{background:#233b2d;color:#f3eedb;padding:8px 10px;font-size:5px;letter-spacing:.7px}.estate-phone h4{font:9px var(--mincho);margin:9px 10px 6px}.estate-phone>.estate-photo{margin:0 10px;height:35px}.estate-phone>.estate-photo img{top:-190%}.estate-phone .phone-card-title{font:6px var(--mincho);margin:5px 10px 3px}.estate-phone .phone-demo{font-size:4px;margin:0 10px;color:#67745f}.finish-note small{display:block;font:8px/1.8 sans-serif;letter-spacing:.04em;color:#b9c4b0;margin-top:12px}
/* Source-space vertical crops: percentages are relative to the image itself,
   so the same clean photo region survives different device aspect ratios. */
.coast img,.terrace img{top:0;transform:translateY(-6.45%)}.courtyard img,.estate-phone>.estate-photo img{top:0;transform:translateY(-35.91%)}.coast-mobile img{top:0;transform:translateY(-6.9%)}.phone-estate-hero{height:74px}.estate-phone>.estate-photo{height:48px}

/* Embedded hero: isolated styles, no parent scroll or form handling. */
html,body{overflow:hidden;height:100%;scroll-behavior:auto}.journey{height:100%}.pin{height:100vh;min-height:0;position:relative}.hero-copy{top:12%}.art-stage{inset:0 -8% 0 23%}.chapter-caption{bottom:120px}.controls{bottom:30px;grid-template-columns:auto auto auto;gap:12px 22px;font-size:11px}.controls button,.controls select{min-height:36px}.controls button:disabled,.controls select:disabled{opacity:.55;cursor:default}.controls select{background:#14251e;color:#fff;border:1px solid #a38b59;padding:4px}.controls label{display:flex;align-items:center;gap:5px}.controls input{accent-color:#e6cc95}#restart{background:none;border:1px solid #a38b59;padding:5px 12px}#motion-status{font-size:10px;color:#c5d2be}.controls #play{display:block}.finish-note{top:567px}.lead{min-height:54px}
@media(max-width:700px){.hero-copy{top:35px}.art-stage{inset:auto -210px 175px -260px}.chapter-caption{bottom:145px}.controls{left:5vw;right:5vw;bottom:25px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px 12px}.steps{grid-column:1/3}.controls #play{font-size:12px}.headlines{height:177px}.finish-note small{font-size:10px}.finish-note{font-size:18px}}
@media(prefers-reduced-motion:reduce){.phase-title{display:block!important}h1{opacity:0!important}.phase-title[data-title="2"]{opacity:1!important}.controls #play{display:block}.journey{height:100%}.progress{display:block}}
html[lang="en"] h1,html[lang="en"] .phase-title{font-size:clamp(48px,6.7vw,100px);letter-spacing:-.05em}html[lang="en"] .headlines{height:250px}
@media(max-width:700px){html[lang="en"] h1,html[lang="en"] .phase-title{font-size:clamp(43px,12vw,70px)}html[lang="en"] .headlines{height:175px}}

@media(max-width:700px){.art-stage{transform:translateX(-20px)}}html[lang="en"] .phone-photo-caption{font-size:10px;line-height:1.3}html[lang="en"] .estate-hero-copy h3{font-size:24px;line-height:1.3}

/* v5.2.4: progress comes only from natural parent-page scrolling. */
.scroll-cue{position:absolute;bottom:22px;left:6vw;right:6vw;text-align:right;font-size:12px;letter-spacing:.08em;color:#e6cc95;z-index:7}.chapter-caption{bottom:22px}.hero-copy{top:10%}.art-stage{inset:0 -8% 0 23%}.art-scene{transform:scale(.83)}
@media(max-width:700px){.hero-copy{top:25px}.headlines{height:170px}.lead{font-size:11px}.art-stage{inset:auto -210px 85px -260px}.art-scene{transform:scale(.52)}.chapter-caption{bottom:58px;gap:12px}.chapter-num{font-size:25px}.chapter-desc{font-size:10px}.scroll-cue{bottom:22px;text-align:left;font-size:11px}}
@media(max-height:650px) and (min-width:701px){.hero-copy{top:7%}.headlines{height:190px}h1,.phase-title{font-size:80px}.lead{font-size:11px}.art-scene{transform:scale(.65)}}
@media(prefers-reduced-motion:reduce){.scroll-cue{display:none}}

/* FUSION: original main-visual photo world under the motion hero */
.fusion-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(5,10,10,.88) 0%,rgba(5,10,10,.62) 38%,rgba(5,10,10,.24) 72%,rgba(5,10,10,.45) 100%),linear-gradient(0deg,rgba(5,10,10,.55),transparent 42%,rgba(5,10,10,.22)),url('../images/fusion-hero-bg.webp') center 32%/cover no-repeat}
.light{background:radial-gradient(ellipse at 65% 53%,rgba(214,164,84,.26),transparent 58%)}

/* COPY A: longer chapter-1 headline sizing (demo only) */
h1{font-size:clamp(56px,7.2vw,110px)}
html[lang="en"] h1{font-size:clamp(44px,6vw,92px)}
@media(max-height:650px) and (min-width:701px){h1{font-size:64px}}
@media(max-width:700px){h1{font-size:9.6vw}}

/* COPY B: final chapter-1 headline (regulars) sizing */
h1{font-size:clamp(50px,6.4vw,98px)}
html[lang="en"] h1{font-size:clamp(42px,5.6vw,88px)}
.h1-br{display:none}
@media(max-height:650px) and (min-width:701px){h1{font-size:60px}}
@media(max-width:700px){html:not([lang="en"]) h1{font-size:10vw}html[lang="en"] h1{font-size:8.8vw}.h1-br{display:inline}}

/* COPY C: PC also breaks before まだ知らない (3-line headline) */
.h1-br{display:inline}
h1{font-size:clamp(48px,5.7vw,88px)}
@media(max-height:650px) and (min-width:701px){h1{font-size:48px}}

/* FINAL: darker fusion bg + larger supporting text and site mock */
.fusion-bg img{opacity:.42}
.fusion-bg::before{background:linear-gradient(90deg,rgba(4,9,12,.68),rgba(4,9,12,.5) 46%,rgba(4,9,12,.28) 78%,rgba(4,9,12,.36))}
.fusion-bg::after{background:radial-gradient(120% 90% at 50% 42%,transparent 46%,rgba(2,6,8,.52))}
.lead{font-size:21px}
.chapter-num{font-size:52px}
.chapter-desc{font-size:15px}
.vertical-note{font-size:14px}
.finish-note{font-size:24px}
.finish-note small{font-size:12.5px}
@media(min-width:701px){.site{width:min(830px,62vw)}.phone{width:216px}}
@media(min-width:701px) and (max-width:1100px){.site{width:76vw}}
@media(max-width:700px){.lead{font-size:16.5px}.chapter-num{font-size:40px}.chapter-desc{font-size:14px}.phone{width:150px}}