@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600&family=Outfit:wght@300;400;500;600&display=swap');
:root{--bg:#080b10;--panel:#10151d;--panel2:#131a22;--ink:#f4f5f4;--muted:#abb4bf;--line:#323b48;--blue:#85bbec;--max:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-weight:300;line-height:1.9}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%}::selection{background:#527caa;color:white}
.site-header{height:84px;padding:0 clamp(22px,4vw,72px);display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:20;top:0;left:0;right:0;border-bottom:1px solid #ffffff24}.site-header.solid{position:relative;background:#090c12}.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}.brand-mark{display:block;width:48px;height:46px;background-image:url('/assets/monkey-space-logo-reference.jpg');background-repeat:no-repeat;background-size:84px 63px;background-position:-20px -2px;filter:contrast(1.08)}.brand-type{font-family:Outfit,sans-serif;font-weight:400;letter-spacing:.22em;font-size:16px;line-height:1.1}.brand-type small{display:block;font-size:8px;letter-spacing:.34em;color:#c5c9ce;margin-top:6px}.desktop-nav{display:flex;align-items:center;gap:clamp(15px,2vw,34px);font-size:12px;letter-spacing:.07em}.desktop-nav a:not(.nav-cta){color:#d6dbe0}.desktop-nav a:hover,.text-link:hover{color:var(--blue)}.nav-cta,.button{border:1px solid #d9e1e9;padding:10px 19px;font-size:12px;letter-spacing:.1em;display:inline-flex;align-items:center;gap:22px;transition:background .2s,color .2s}.nav-cta:hover,.button:hover{background:#f4f5f4;color:#10151d}.menu-toggle{display:none;background:none;color:#fff;border:0;font-size:25px;cursor:pointer}.mobile-nav{display:none}
.hero{min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;background:#03070d}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,5,12,.74) 0%,rgba(1,5,12,.35) 48%,rgba(1,5,12,.02) 100%),linear-gradient(0deg,#080b10 0%,transparent 23%)}.hero-inner{position:relative;z-index:1;width:min(var(--max),100%);margin:auto;padding:150px clamp(25px,7vw,110px) 150px}.eyebrow{font-family:Outfit,sans-serif;font-size:12px;font-weight:400;letter-spacing:.3em;color:#b6cce1;text-transform:uppercase}.hero h1{font-size:clamp(40px,5.4vw,82px);font-weight:400;line-height:1.45;letter-spacing:.07em;margin:36px 0 30px;text-shadow:0 2px 20px #0007}.hero-lead{font-size:clamp(13px,1.2vw,17px);line-height:2.25;color:#e1e8ef;letter-spacing:.04em;max-width:720px}.hero-actions{display:flex;gap:14px;margin-top:47px}.hero-note{font-family:Outfit,sans-serif;position:absolute;right:clamp(25px,6vw,90px);bottom:45px;z-index:2;font-size:11px;letter-spacing:.24em;color:#c5d6e8}.scroll-sign{position:absolute;left:clamp(25px,6vw,90px);bottom:42px;z-index:2;font-family:Outfit,sans-serif;letter-spacing:.23em;font-size:10px;color:#b3c6d9}
.section{padding:clamp(90px,10vw,160px) clamp(24px,6vw,94px)}.section-inner{max-width:var(--max);margin:0 auto}.section-label{font-family:Outfit,sans-serif;font-size:12px;letter-spacing:.28em;color:var(--blue);font-weight:400;text-transform:uppercase;margin-bottom:30px}.section-title{font-size:clamp(30px,3.8vw,54px);font-weight:400;line-height:1.6;letter-spacing:.08em;margin:0 0 34px}.lead-copy{font-size:clamp(15px,1.45vw,19px);line-height:2.15;letter-spacing:.05em;color:#d8dee5}.body-copy{font-size:14px;color:#bbc5ce;line-height:2.2;letter-spacing:.02em}.narrow{max-width:800px}.rule{height:1px;background:var(--line);margin:56px 0}.text-link{font-size:12px;letter-spacing:.12em;border-bottom:1px solid #899baa;padding-bottom:10px;display:inline-flex;gap:34px;margin-top:26px}.intro-grid,.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,130px);align-items:start}.intro-grid .body-copy{margin-top:5px}.quiet{background:#0c1118}.fieldline{border-top:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:25px;padding:30px 0}.fieldline:last-child{border-bottom:1px solid var(--line)}.field-num{font:300 13px Outfit,sans-serif;color:var(--blue)}.fieldline h3{font-size:22px;font-weight:400;margin:0 0 8px;letter-spacing:.07em}.fieldline p{font-size:13px;color:var(--muted);margin:0}.big-quote{font-size:clamp(28px,4vw,58px);font-weight:300;line-height:1.65;letter-spacing:.08em;max-width:940px;margin:0}.name-block{position:relative;overflow:hidden;background:linear-gradient(125deg,#121a25,#080b10 64%)}.name-block:before{content:'SPACE';position:absolute;right:-2vw;bottom:-.27em;font:300 clamp(130px,24vw,390px) Outfit,sans-serif;color:#ffffff09;letter-spacing:-.04em;pointer-events:none}.name-words{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:65px;position:relative}.name-word{border-top:1px solid #6e7884;padding:20px 0 10px}.name-word strong{display:block;font:300 clamp(35px,5vw,72px) Outfit,sans-serif;letter-spacing:.15em}.name-word span{color:var(--muted);font-size:13px}.project{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.project-visual{aspect-ratio:5/4;background:radial-gradient(circle at 50% 40%,#55748a55,transparent 43%),linear-gradient(145deg,#182532,#0d131b);border:1px solid #334151;display:grid;place-items:center;position:relative;overflow:hidden}.project-visual .water-word{font:300 clamp(37px,5vw,80px) Outfit,sans-serif;letter-spacing:.13em;text-align:center;color:#e8f5ff}.project-visual:after{content:'';height:1px;width:75%;background:#c5e6fa90;position:absolute;bottom:20%}.project-visual small{position:absolute;bottom:8%;font-size:10px;letter-spacing:.2em;color:#b4cadb}.contact-band{background:#15202c;padding:75px clamp(24px,6vw,94px)}.contact-band .section-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-band h2{font-size:clamp(26px,3vw,42px);font-weight:400;margin:0}.site-footer{border-top:1px solid var(--line);padding:60px clamp(24px,6vw,94px) 28px;color:#9ba6b1}.footer-inner{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:35px}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:12px}.footer-meta{font-size:12px;line-height:2.2}.copyright{max-width:var(--max);margin:60px auto 0;border-top:1px solid var(--line);padding-top:20px;font:11px Outfit,sans-serif;letter-spacing:.15em;color:#87929d}
.page-hero{padding:155px clamp(24px,6vw,94px) 95px;background:radial-gradient(circle at 72% 10%,#17324b,#0b1018 40%,#080b10 80%);border-bottom:1px solid var(--line)}.page-hero .section-inner{max-width:var(--max)}.page-hero h1{font-weight:400;letter-spacing:.1em;line-height:1.5;font-size:clamp(38px,5vw,72px);margin:20px 0}.page-hero p{color:#bfc9d2;max-width:750px}.prose{max-width:860px}.prose p{font-size:15px;line-height:2.4;color:#c2ccd5;margin:0 0 34px}.prose h2{font-weight:400;font-size:clamp(25px,3vw,40px);line-height:1.7;margin:80px 0 30px}.prose h3{font-weight:400;font-size:22px;margin:55px 0 18px}.prose .emphasis{font-size:clamp(24px,3vw,40px);color:white}.values{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin:70px 0}.value{border-top:1px solid #8299ae;padding-top:22px}.value h3{font-size:18px;font-weight:400}.value p{font-size:13px;color:var(--muted)}.definition{border-top:1px solid var(--line);padding:33px 0;display:grid;grid-template-columns:175px 1fr;gap:30px}.definition:last-child{border-bottom:1px solid var(--line)}.definition dt{color:#8fa2b4;font-size:13px}.definition dd{margin:0;font-size:14px;line-height:2}.business-item{padding:50px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:50px}.business-item:last-child{border-bottom:1px solid var(--line)}.business-item h2{font-weight:400;font-size:26px;margin:0}.business-item p{color:var(--muted);font-size:14px;margin:0}.contact-choice{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:50px 0}.choice{border:1px solid #4e5b69;background:#121b25;padding:28px;font-size:15px}.choice small{display:block;color:var(--muted);margin-top:10px;font-size:12px}.choice:hover{border-color:#9cc9e8}.utility{font-size:12px;color:#9ca7b1}.logo-panel{width:min(500px,100%);aspect-ratio:674/507;overflow:hidden;margin:70px auto 0}.logo-panel img{width:100%;display:block}
@media(max-width:900px){.desktop-nav{display:none}.menu-toggle{display:block}.mobile-nav.open{display:flex;position:absolute;top:84px;left:0;right:0;background:#0a0e15;flex-direction:column;padding:20px 25px 35px;gap:20px;border-bottom:1px solid var(--line);font-size:15px}.intro-grid,.split,.project{grid-template-columns:1fr}.project-visual{max-width:560px}.values{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.site-header{height:70px;padding:0 20px}.brand-mark{width:40px;height:38px;background-size:71px 53px;background-position:-17px -2px}.brand-type{font-size:12px;letter-spacing:.19em}.brand-type small{font-size:6px}.mobile-nav.open{top:70px}.hero{min-height:820px;min-height:100svh}.hero-image{object-position:59% center}.hero::after{background:linear-gradient(90deg,#020811be,#02081155),linear-gradient(0deg,#080b10,transparent 30%)}.hero-inner{padding:135px 25px 135px}.hero h1{font-size:clamp(37px,9vw,54px);line-height:1.55;margin:26px 0}.hero-lead{font-size:13px;max-width:360px;line-height:2.1}.hero-actions{flex-wrap:wrap;margin-top:30px}.hero-note{right:25px;bottom:55px;font-size:9px;max-width:200px;text-align:right}.scroll-sign{left:25px;bottom:55px}.section{padding:80px 24px}.section-title{font-size:31px}.name-words{grid-template-columns:1fr;margin-top:38px}.name-word strong{font-size:39px}.contact-band .section-inner{display:block}.contact-band .button{margin-top:25px}.footer-inner{grid-template-columns:1fr}.footer-links{gap:14px}.page-hero{padding:125px 24px 70px}.page-hero h1{font-size:40px}.values,.contact-choice{grid-template-columns:1fr}.definition{grid-template-columns:1fr;gap:4px}.business-item{grid-template-columns:1fr;gap:12px}.fieldline{grid-template-columns:37px 1fr;gap:12px}.fieldline h3{font-size:19px}}
.hero-image{left:-10%;top:-5%;width:120%;max-width:none;height:110%}
.logo-panel{aspect-ratio:auto;text-align:center;margin-top:75px}.logo-panel .emblem{height:205px;width:245px;margin:0 auto;background:url('/assets/monkey-space-logo-reference.jpg') no-repeat;background-size:406px 306px;background-position:-102px -10px}.logo-panel .logo-title{font:300 clamp(24px,4vw,38px) Outfit,sans-serif;letter-spacing:.26em;margin-top:5px}.logo-panel .logo-sub{font:300 11px Outfit,sans-serif;letter-spacing:.28em;color:#abb4bf}
