:root{--paper:#f8f9f8;--ink:#263e50;--muted:#566a78;--blue:#36617e;--pale:#e9f0f4;--line:#ccd7df;--serif:"Noto Serif JP",serif;--sans:"DM Sans","Noto Sans JP",sans-serif}*{box-sizing:border-box}html{scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:2;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}img{max-width:100%;height:auto;display:block}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500}h2{font-family:var(--serif);font-size:clamp(26px,3vw,36px);line-height:1.7;letter-spacing:.045em;margin-bottom:30px}h3{line-height:1.8}p{margin-bottom:20px}a:focus-visible{outline:3px solid #3c729c;outline-offset:6px}::selection{background:#c7dce9}.skip{position:absolute;left:20px;top:-80px;background:#fff;z-index:20;padding:12px}.skip:focus{top:10px}.site-header{max-width:1440px;margin:auto;min-height:108px;padding:24px 6%;display:flex;justify-content:space-between;align-items:center;gap:25px}.brand{font-family:"DM Sans",sans-serif;font-size:28px;font-weight:500;letter-spacing:-1px;white-space:nowrap}.brand-dot{color:#739db9}.site-header nav{display:flex;gap:29px;align-items:center;font-size:12px;letter-spacing:.05em}.nav-contact{border:1px solid var(--line);padding:9px 20px;border-radius:30px}.nav-contact span{margin-left:12px}.hero{position:relative;max-width:1440px;margin:auto;min-height:680px;display:grid;grid-template-columns:1.12fr 1fr;align-items:center;padding:60px 6% 108px;isolation:isolate;overflow:hidden}.hero:before{content:"";position:absolute;inset:0 0 0 38%;background:radial-gradient(ellipse at 55% 50%,#dce8f0 0,transparent 70%);z-index:-2}.hero-orbit{position:absolute;width:830px;height:620px;border:1px solid #b8cbd9;border-radius:50%;right:-200px;top:75px;transform:rotate(-33deg);z-index:-1}.hero-copy{z-index:2}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:500;color:var(--blue);margin-bottom:24px}.hero h1{font-family:var(--serif);font-size:clamp(29px,3.45vw,50px);line-height:1.9;letter-spacing:.015em;white-space:nowrap;margin:0 0 27px}.quote{letter-spacing:-.09em}.underlined{position:relative}.underlined:after{content:"";position:absolute;bottom:-8px;left:0;width:100%;height:9px;border-top:2px solid #a6c1d3;border-radius:50%}.hero-lead{font-size:13px;line-height:2.35;color:var(--muted);margin-bottom:29px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;border-radius:50px;padding:15px 28px;min-height:54px;font-size:12px;font-weight:500}.primary{color:#fff;background:var(--blue);box-shadow:0 8px 20px #345c7612}.primary:hover{background:#294d67;text-decoration:none}.hero-contact{display:block;font-size:11px;margin:16px 0 0 17px;color:var(--muted)}.hero-art{position:relative;margin-left:32px;align-self:center}.art-frame{border-radius:47% 47% 42% 42%;overflow:hidden;transform:rotate(5deg);box-shadow:0 24px 55px #4a667514;border:10px solid #ffffff70}.art-frame img{transform:rotate(-5deg) scale(1.12)}.art-caption{font-family:var(--serif);font-size:12px;text-align:right;font-style:italic;letter-spacing:.04em;margin:20px 10px 0;color:var(--muted)}.art-star{position:absolute;left:-27px;bottom:39px;font-size:56px;color:#86a6bb}.hero-bottom{position:absolute;bottom:32px;left:6%;right:6%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;font-size:9px;letter-spacing:.18em;color:var(--muted)}.hero-bottom a span{margin-left:20px}.section{max-width:1160px;margin:auto;padding:95px 40px}.section-label{display:flex;gap:22px;align-items:center;margin-bottom:35px;font-size:11px;letter-spacing:.15em;color:var(--blue)}.small-line{width:55px;height:1px;background:#9eb8ca}.about-grid{display:grid;grid-template-columns:240px 1fr;gap:70px;max-width:940px;margin:0 auto}.about-grid p{color:var(--muted);font-size:14px;line-height:2.2}.about-identity{display:flex;flex-direction:column;align-items:center;padding-top:8px}.avatar{width:180px;height:180px;border-radius:50%;overflow:hidden;border:7px solid #e6edf0}.signature{font-family:var(--serif);font-size:32px;letter-spacing:.12em;margin-top:8px}.identity-caption{font-size:10px;letter-spacing:.2em;color:var(--muted)}.latin{font-family:"DM Sans",sans-serif}.philosophy{margin-top:60px;padding:40px 65px;display:grid;grid-template-columns:50px 1fr;gap:30px;background:#edf2f4;border-radius:4px 60px 4px 4px}.philosophy-mark{font-family:var(--serif);font-size:95px;line-height:1.2;color:#91afc3}.philosophy .eyebrow{margin-bottom:12px}.philosophy h3{font-family:var(--serif);font-size:25px;margin-bottom:22px}.philosophy p:not(.eyebrow){font-size:13px;color:var(--muted);max-width:740px}.philosophy p:last-child{margin-bottom:0}.mobile-br{display:none}.services-wrap{background:#edf1f3}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}.service{background:#fdfdfc;border:1px solid #dce4e9;border-radius:3px;padding:28px 23px;position:relative}.service-number{position:absolute;right:20px;top:20px;font-size:11px;color:#698398}.service-symbol{display:block;font-family:serif;font-size:40px;line-height:1.5;color:#698da7;margin-bottom:22px}.service .eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:12px}.service h3{font-size:16px;font-weight:500;min-height:58px}.service p:last-child{font-size:12px;line-height:2;color:var(--muted);margin-bottom:0}.note{font-size:12px;line-height:2.1;color:var(--muted);max-width:820px;margin:28px auto 0}.works-intro{font-size:13px;color:var(--muted);margin-bottom:40px}.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 32px}.work-web{grid-column:1/-1}.work-preview{display:block;height:300px;position:relative;overflow:hidden;border-radius:3px;background:#e2e9ed;padding:30px}.web-preview{height:450px;padding:40px 70px;background:linear-gradient(125deg,#dee7ec,#ecedeb)}.mini-browser{height:100%;background:#f6f4ee;box-shadow:0 15px 35px #2b3c4b1f;border:1px solid #d9dce0;border-radius:5px;overflow:hidden}.browser-dots{height:24px;padding-left:13px;font-size:7px;letter-spacing:3px;background:#fcfcfa;color:#bdc7ce;line-height:24px}.mini-web{position:relative;padding:18px 35px;height:calc(100% - 24px);overflow:hidden}.cafe-logo{font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:#59594e}.mini-web>p{position:absolute;top:90px;left:45px;z-index:2;font-family:var(--serif);font-size:clamp(20px,3vw,34px);line-height:2;color:#55564b}.mini-web .cup-scene{position:absolute;right:0;top:0;width:48%;height:100%;border-radius:50% 0 0 0}.preview-arrow{position:absolute;bottom:18px;right:18px;border-radius:50%;background:#fff;width:38px;height:38px;text-align:center;line-height:38px;font-size:20px;color:var(--blue)}.work-meta{display:flex;justify-content:space-between;margin-top:20px;font-size:9px;letter-spacing:.12em;color:var(--muted)}.work-meta span:last-child{letter-spacing:0}.work-card h3{font-size:18px;margin:10px 0}.work-card>p{font-size:12px;color:var(--muted);margin-bottom:15px}.text-link{font-size:12px;border-bottom:1px solid #9bb2c2;padding-bottom:5px}.text-link span{margin-left:14px}.design-preview{background:#d7dce1}.mini-poster{width:205px;height:250px;margin:0 auto;background:#e8e5db;padding:20px 23px;transform:rotate(-7deg);box-shadow:0 15px 20px #273e5020;position:relative;overflow:hidden;color:#565c50;font-family:var(--serif)}.mini-poster>span{font-size:10px;letter-spacing:.3em}.mini-poster>p{font-size:20px;line-height:1.9;position:relative;z-index:1;margin-top:17px}.poster-circle{width:125px;height:125px;background:#788675;border-radius:50%;position:absolute;right:-8px;bottom:-21px;box-shadow:0 0 0 20px #c0c6b5}.writing-preview{background:#e3e9eb}.mini-article{width:235px;height:285px;background:#fffdfa;padding:25px 25px;transform:rotate(6deg);margin:0 auto;box-shadow:0 15px 25px #273e5017;color:#5b5e53;font-family:var(--serif)}.mini-article>span{font-size:10px;letter-spacing:.2em}.mini-article>p{font-size:19px;margin-top:19px}.article-lines{height:67px;background:repeating-linear-gradient(transparent 0,transparent 12px,#d5d9d5 12px,#d5d9d5 13px)}.mini-page-number{display:block;text-align:center;margin-top:18px}.contact-wrap{background:#e4edf3;position:relative}.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px}.contact-lead{font-family:var(--serif);font-size:20px;line-height:1.9}.contact-grid p:not(.contact-lead){font-size:12px}.contact-grid .button{margin-top:15px}.account{color:var(--muted);margin:14px 0 0 20px}.contact-details{margin:0}.contact-details>div{padding:26px 0;border-bottom:1px solid #bccdd9;display:grid;grid-template-columns:80px 1fr;gap:20px}.contact-details>div:first-child{border-top:1px solid #bccdd9}.contact-details dt{font-size:12px;font-weight:500}.contact-details dd{margin:0;font-size:13px;color:var(--muted)}.footer{padding:35px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:auto}.footer>a:not(.brand),.footer small{font-size:10px;color:var(--muted)}
/* Standalone portfolio samples */
.sample-topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 5%;border-bottom:1px solid #d8dedb;background:#f8f9f8}.sample-topbar .sample-notice{margin:0;font-size:10px;max-width:560px}.back{font-size:12px;white-space:nowrap}.sample-page{background:#f5f3ed;color:#4a5148}.sample-page h1,.sample-page h2,.sample-page h3{font-family:var(--serif)}.cafe-header{display:flex;justify-content:space-between;align-items:center;padding:30px 7%;gap:20px}.cafe-brand{font-family:var(--serif);letter-spacing:.3em;font-size:25px}.cafe-header nav{display:flex;gap:28px;font-size:12px}.cafe-hero{display:grid;grid-template-columns:1fr 1fr;min-height:620px;max-width:1400px;margin:auto;align-items:center;padding-left:7%;gap:40px}.cafe-hero h1{font-size:clamp(28px,3.4vw,48px);line-height:2;letter-spacing:.1em;margin-bottom:30px}.cafe-hero p{font-size:13px;line-height:2.4}.cafe-hero .text-link{display:inline-block;margin-top:20px;border-color:#949d8c}.cup-scene{background:linear-gradient(135deg,#d5d4c6,#a8b4a0);position:relative;overflow:hidden;min-height:200px}.cafe-hero>.cup-scene{height:600px;border-radius:50% 0 0 0}.light-band{position:absolute;width:150%;height:33%;left:-20%;top:14%;background:#faf7df60;transform:rotate(-36deg);box-shadow:0 95px 0 #f7f4e036}.saucer{position:absolute;width:58%;aspect-ratio:1;left:20%;top:28%;background:radial-gradient(circle,#e8e5dc 0 53%,#faf8f1 54% 64%,#d8d6c8 67%,#eeebe1 70%);border-radius:50%;box-shadow:12px 22px 25px #333e3330;transform:rotate(-25deg)}.cup{position:absolute;inset:15%;border-radius:50%;background:#f5f3e9;box-shadow:5px 8px 15px #39433738}.cup:after{content:"";position:absolute;right:-22%;top:35%;width:33%;height:25%;border-radius:6px 20px 20px 6px;background:#f4f1e7;box-shadow:5px 3px 5px #58634b30}.coffee{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(ellipse at 60% 25%,#98745b,#5e4030 53%,#3d2c23 72%,#aa8c6f 75%,#cec0a5 79%);border:3px solid #e4dfd2;z-index:1}.paper-slip{position:absolute;bottom:10%;left:7%;width:24%;height:13%;background:#eeecddbb;transform:rotate(-18deg);box-shadow:3px 4px 8px #34433410}.cafe-about{max-width:850px;text-align:center;margin:auto;padding:115px 30px}.cafe-about p{font-size:14px;line-height:2.6}.cafe-about .eyebrow{color:#707c66}.cafe-ways{background:#e8e9df;padding:75px 7%}.cafe-ways h2{text-align:center}.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;max-width:1100px;margin:45px auto 0}.ways-grid article{padding:35px 20px;border-top:1px solid #9ba58f;text-align:center}.ways-grid span{font-size:11px;letter-spacing:.2em}.ways-grid h3{font-size:22px;margin-top:20px}.ways-grid p{font-size:13px}.sample-footer{text-align:center;padding:40px 20px;font-size:12px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.sample-heading{max-width:1050px;margin:70px auto 40px;padding:0 30px}.sample-heading h1{font-size:32px;line-height:1.8}.sample-heading p{font-size:13px}.design-gallery{max-width:1050px;margin:0 auto;padding:0 30px 80px}.design-gallery h2{font-size:16px;font-family:var(--sans);letter-spacing:.12em;margin:40px 0 18px}.social-art{aspect-ratio:1;max-width:650px;background:#e5e5d9;position:relative;overflow:hidden;padding:8%;margin:auto;color:#414d41;border:1px solid #b4bcaa}.social-art:before{content:"";position:absolute;inset:4%;border:1px solid #9da991;z-index:2;pointer-events:none}.social-art .cafe-brand{font-size:18px}.social-art h3{position:relative;z-index:2;font-size:clamp(24px,4.5vw,43px);line-height:1.9;margin:35px 0 15px}.social-art>p{position:relative;z-index:2;font-size:12px}.social-art .cup-scene{position:absolute;inset:43% 0 0 39%;border-radius:55% 0 0 0;min-height:0}.banner-art{aspect-ratio:2.8;background:#d8dfd1;position:relative;padding:6%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;color:#414d41}.banner-art h3{font-size:clamp(17px,2.8vw,30px);line-height:1.9;position:relative;z-index:2;margin:10px 0}.banner-art>.cafe-brand{font-size:13px;z-index:2}.banner-art .cup-scene{position:absolute;right:0;top:0;width:35%;height:100%;min-height:0;border-radius:50% 0 0 0}.article-wrap{max-width:790px;margin:70px auto;padding:0 35px 60px}.article-wrap h1{font-size:clamp(27px,4vw,39px);line-height:1.85;letter-spacing:.03em}.article-wrap .eyebrow{color:#5f7056}.article-wrap .sample-notice{font-size:11px;padding:18px;border:1px solid #c6ccbf;margin:30px 0}.article-wrap>p:not(.eyebrow):not(.sample-notice){font-size:15px;line-height:2.5}.article-wrap h2{font-size:25px;margin:45px 0 20px}.article-cover{height:280px;margin:35px 0;border-radius:2px}.article-cover .saucer{width:180px;left:57%;top:10%}
@media(min-width:1440px){.hero h1{font-size:50px}}
@media(max-width:1000px){.site-header{padding:22px 5%}.site-header nav{gap:18px;font-size:11px}.hero{padding-left:5%;padding-right:5%;min-height:610px}.hero h1{font-size:3.6vw}.hero-art{margin-left:20px}.section{padding:75px 30px}.services-grid{grid-template-columns:repeat(2,1fr)}.service{padding:28px}.service h3{min-height:0}.about-grid{grid-template-columns:190px 1fr;gap:40px}.contact-grid{gap:40px}.button{padding:14px 23px;gap:18px}.cafe-hero{min-height:530px}.cafe-hero>.cup-scene{height:490px}.web-preview{padding:35px}.philosophy{padding:35px}.hero-lead{font-size:12px}}
@media(max-width:680px){body{font-size:14px}.site-header{padding:22px 22px 15px;display:block;min-height:0}.brand{font-size:25px}.site-header nav{margin-top:15px;justify-content:space-between;gap:10px;font-size:10px}.nav-contact{padding:5px 10px}.nav-contact span{display:none}.hero{display:flex;flex-direction:column;padding:38px 24px 85px;align-items:stretch;min-height:0}.hero h1{font-size:clamp(25px,6.6vw,43px);line-height:1.95;margin-bottom:23px}.hero .eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:17px}.hero-lead{font-size:12px;line-height:2.1}.hero-contact{font-size:10px}.hero-art{width:77%;max-width:345px;align-self:flex-end;margin:30px 0 20px}.art-frame{border-width:6px}.art-caption{font-size:9px}.art-star{font-size:40px;left:-28px;bottom:35px}.hero-orbit{width:590px;height:420px;right:-280px;top:320px}.hero:before{inset:32% -50% 0 0}.hero-bottom{left:24px;right:24px;bottom:22px;font-size:8px;padding-top:13px}.section{padding:60px 24px}.section-label{font-size:9px;margin-bottom:28px}.about-grid{display:block}.about-identity{margin:0 auto 28px}.avatar{width:135px;height:135px}.signature{font-size:27px}.about h2{font-size:25px}.about-grid p{font-size:13px}.philosophy{margin-top:35px;padding:28px 24px;display:block;border-radius:3px 40px 3px 3px}.philosophy-mark{display:none}.philosophy h3{font-size:21px}.mobile-br{display:block}.philosophy p:not(.eyebrow){font-size:12px}.services-grid{gap:12px}.service{padding:22px 16px}.service-symbol{font-size:32px;margin-bottom:13px}.service .eyebrow{font-size:8px;letter-spacing:.04em}.service h3{font-size:13px;min-height:47px;overflow-wrap:anywhere}.service p:last-child{font-size:11px}.service-number{right:13px;top:16px;font-size:9px}.note{font-size:11px}.works-grid{display:block}.work-card{margin-bottom:40px}.work-card:last-child{margin-bottom:0}.work-preview{height:260px}.web-preview{height:240px;padding:25px 16px}.mini-web{padding:12px 16px}.mini-web>p{top:63px;left:16px;font-size:18px}.cafe-logo{font-size:10px}.mini-web .cup-scene{width:44%;min-height:0}.work-card h3{font-size:16px}.mini-poster{height:225px}.mini-article{height:250px}.works-intro{font-size:12px}.contact-grid{display:block}.contact-lead{font-size:18px}.contact-details{margin-top:35px}.contact-details>div{grid-template-columns:60px 1fr;gap:15px;padding:20px 0}.contact-details dd{font-size:12px}.contact-grid .button{font-size:11px}.footer{padding:27px 24px;flex-wrap:wrap}.footer .brand{font-size:23px}.footer small{width:100%}.sample-topbar{display:block;padding:14px 20px}.sample-topbar .sample-notice{font-size:9px;margin-top:7px;line-height:1.8}.cafe-header{padding:24px;align-items:center}.cafe-brand{font-size:20px}.cafe-header nav{font-size:10px;gap:16px}.cafe-hero{display:flex;flex-direction:column;padding:20px 24px 0;gap:30px;align-items:stretch}.cafe-hero h1{font-size:30px}.cafe-hero>.cup-scene{height:380px;margin-right:-24px;margin-left:25px}.cafe-about{padding:70px 24px}.cafe-about h2{font-size:24px}.cafe-about p{font-size:13px}.cafe-ways{padding:55px 24px}.ways-grid{display:block;margin-top:25px}.ways-grid article{padding:25px 10px}.sample-heading{margin-top:45px;padding:0 24px}.sample-heading h1{font-size:25px}.design-gallery{padding:0 20px 45px}.social-art{padding:11%}.social-art .cafe-brand{font-size:13px}.social-art h3{margin-top:23px;font-size:26px}.social-art>p{font-size:9px;max-width:170px}.banner-art{aspect-ratio:2.2;padding:6%}.banner-art h3{font-size:17px}.banner-art>.cafe-brand{font-size:10px}.article-wrap{margin:40px auto;padding:0 24px 40px}.article-wrap h1{font-size:27px}.article-wrap>p:not(.eyebrow):not(.sample-notice){font-size:14px}.article-wrap h2{font-size:23px}.article-cover{height:210px}.article-cover .saucer{width:145px;left:45%;top:14%}}
@media(max-width:680px){.services-grid{grid-template-columns:1fr}.service{padding:25px}.service h3{font-size:17px;min-height:0}.service h3 br{display:none}.service p:last-child{font-size:13px}.service-symbol{float:left;margin-right:22px;margin-bottom:15px}.service .eyebrow{padding-top:4px}.service p:last-child{clear:both}.hero-lead{font-size:13px}.work-card>p{font-size:13px}}
@media(max-width:360px){.site-header nav{font-size:9px;gap:6px}.nav-contact{padding:4px 7px}.hero h1{font-size:24px}.hero{padding-left:20px;padding-right:20px}.section{padding-left:20px;padding-right:20px}.cafe-hero h1{font-size:27px}}