@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root { --ink:#172318; --paper:#f6f2e9; --lime:#ddff54; --coral:#ff6f61; --blue:#bde1f2; --line:rgba(23,35,24,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; border-bottom:1px solid var(--line); display:flex; height:76px; justify-content:space-between; padding:0 5vw; position:relative; z-index:3; }
.brand { font-family:"DM Mono",monospace; font-size:1.4rem; font-weight:500; letter-spacing:-.08em; }
.brand span { color:var(--coral); font-size:1.55em; line-height:0; vertical-align:middle; }
.nav { align-items:center; display:flex; gap:2rem; font-size:.9rem; }
.nav > a:not(.button) { opacity:.75; }.nav > a:not(.button):hover { opacity:1; }
.button { background:var(--ink); color:white; display:inline-flex; gap:1.1rem; padding:1rem 1.35rem; transition:transform .2s,background .2s; }
.button:hover { background:var(--coral); transform:translateY(-3px); }.button--small { padding:.7rem 1rem; }
.menu-toggle { background:none; border:0; color:var(--ink); display:none; font:inherit; }
.hero { min-height:calc(100vh - 76px); overflow:hidden; padding:12vh 8vw 3rem; position:relative; }
.eyebrow { font:500 .72rem/1.4 "DM Mono",monospace; letter-spacing:.07em; margin:0 0 2rem; text-transform:uppercase; }
.hero h1,.contact h2 { font-size:clamp(3.7rem,9vw,9rem); letter-spacing:-.09em; line-height:.93; margin:0; max-width:950px; position:relative; z-index:1; }
em { color:var(--coral); font-style:normal; }.hero-copy { font-size:1rem; line-height:1.9; margin:3rem 0 2.1rem; max-width:390px; position:relative; z-index:1; }
.hero-orb { background:var(--lime); border-radius:50%; height:min(49vw,620px); position:absolute; right:-8vw; top:9vh; width:min(49vw,620px); }
.hero-orb::after { border:1px solid var(--ink); border-radius:50%; content:""; height:60%; left:20%; position:absolute; top:20%; width:60%; }
.scroll-note { bottom:2rem; font:.7rem "DM Mono",monospace; left:8vw; margin:0; position:absolute; }.scroll-note span { display:block; font-size:1.4rem; margin-top:.4rem; }
.section { padding:10rem 8vw; }.intro { background:var(--ink); color:var(--paper); }.split { align-items:end; display:grid; gap:3rem; grid-template-columns:1.3fr .7fr; }.split h2 { font-size:clamp(2.5rem,5vw,5.7rem); letter-spacing:-.08em; line-height:1; margin:0; }.split strong { color:var(--lime); font-weight:inherit; }.split p { line-height:2; margin:0; max-width:380px; }
.services { border-bottom:1px solid var(--line); }.service-grid { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }.service-grid article { border-right:1px solid var(--line); min-height:280px; padding:1.7rem 2rem 1.7rem 0; }.service-grid article+article { padding-left:2rem; }.service-grid article:last-child { border-right:0; }.service-grid span { font:.72rem "DM Mono",monospace; opacity:.6; }.service-grid h3 { font-size:1.65rem; letter-spacing:-.05em; margin:5rem 0 .5rem; }.service-grid p { font-size:.9rem; line-height:1.8; margin:0; opacity:.72; }
.work-heading { align-items:baseline; display:flex; justify-content:space-between; }.work-heading a { border-bottom:1px solid; font-size:.85rem; padding-bottom:.25rem; }.project-grid { display:grid; gap:1rem; grid-template-columns:1.1fr .9fr .9fr; }.project { min-height:365px; overflow:hidden; padding:1.7rem; position:relative; }.project p { bottom:3.8rem; font:.7rem "DM Mono",monospace; margin:0; position:absolute; }.project h3 { bottom:1.3rem; font-size:1.3rem; letter-spacing:-.04em; margin:0; position:absolute; }.project--coral { background:var(--coral); }.project--blue { background:var(--blue); }.project--yellow { background:var(--lime); }.project-shape { position:absolute; }.shape--circle { background:var(--paper); border-radius:50%; height:15rem; right:-2rem; top:3rem; width:15rem; }.shape--steps { border:28px solid var(--ink); border-bottom:0; height:11rem; right:1.5rem; top:5rem; transform:rotate(35deg); width:11rem; }.shape--flower { background:var(--coral); border-radius:50% 50% 4% 50%; height:10rem; right:2rem; top:4rem; transform:rotate(22deg); width:10rem; }
.contact { background:var(--blue); }.contact h2 { margin-bottom:3.5rem; }.contact-link { border-bottom:2px solid; display:inline-block; font:clamp(1.1rem,2vw,2rem) "DM Mono",monospace; padding-bottom:.25rem; }.contact-link span { color:var(--coral); } footer { align-items:center; display:flex; justify-content:space-between; padding:2rem 5vw; } footer p,footer a:last-child { font-size:.72rem; margin:0; opacity:.7; }
@media (max-width:700px) { .site-header{height:64px;padding:0 6vw}.menu-toggle{display:block}.nav{background:var(--paper); border-bottom:1px solid var(--line); display:none; flex-direction:column; left:0; padding:1.5rem 6vw 2rem; position:absolute; top:64px; width:100%; align-items:flex-start; gap:1rem}.nav.is-open{display:flex}.hero{min-height:690px;padding:10vh 6vw 2rem}.hero-orb{height:68vw;right:-14vw;top:44vh;width:68vw}.section{padding:5.5rem 6vw}.split,.service-grid,.project-grid{grid-template-columns:1fr}.split{gap:2rem}.service-grid article,.service-grid article+article{border-bottom:1px solid var(--line);border-right:0;min-height:auto;padding:1.5rem 0}.service-grid h3{margin:2rem 0 .4rem}.project{min-height:290px}.work-heading{align-items:flex-start;gap:1rem;flex-direction:column}.contact h2{font-size:clamp(3rem,13vw,5rem)}footer{align-items:flex-start;flex-direction:column;gap:1rem;padding:1.5rem 6vw} }