:root{--paper:#F4F8FF;--blue:#4D8BFF;--navy:#132D91;--pink:#FF6FAE;--yellow:#FFD24D;--cyan:#00C8FF;--ink:#0A0A0A;--gutter:clamp(24px,5.6vw,88px);--ease:cubic-bezier(.2,.8,.2,1);--header:92px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--navy);font-family:Lab Sans,'Noto Sans JP',sans-serif;font-weight:500;line-height:1.85;overflow-x:clip}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
button:disabled{cursor:default;opacity:.4}
button{border:0}
img,svg{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-feature-settings:'palt';line-height:1.3;font-weight:900;letter-spacing:-.045em}
em{font-style:normal}
svg{overflow:hidden}
button svg,a svg{width:30px;height:30px}
main{overflow:clip}
.section{position:relative}
.section-inner{width:calc(100% - var(--gutter)*2);max-width:1240px;margin-inline:auto}
.section h2{font-size:clamp(38px,4.55vw,68px);line-height:1.35}
.eyebrow{display:flex;gap:16px;align-items:center;font-size:14px;line-height:1.5;font-weight:800;letter-spacing:.13em;margin-bottom:28px}
.eyebrow>span{display:inline-grid;place-items:center;border:1px solid currentColor;min-width:36px;height:36px;font-size:13px;letter-spacing:0;border-radius:50%}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;font-weight:800;font-size:16px;padding:12px 0;border-bottom:2px solid;min-height:52px}
.text-link span{transition:transform .3s var(--ease)}
.text-link:hover span{transform:translateX(5px)}
.text-link svg{width:26px;height:26px}
.character{width:100%;height:auto;overflow:hidden;pointer-events:none}
.speech{display:block;font-size:clamp(14px,1.5vw,21px);font-weight:900;line-height:1.6;background:white;color:var(--navy);border:2px solid var(--navy);padding:24px 30px;border-radius:50%;transform:rotate(-7deg);text-align:center;position:relative;z-index:2}
.speech:after{content:'';position:absolute;bottom:-17px;left:52%;border-style:solid;border-width:18px 4px 0 20px;border-color:var(--navy) transparent transparent transparent;transform:rotate(-15deg)}
.character-label{font-weight:900;font-size:19px;border-bottom:2px solid;padding-bottom:6px;display:inline-flex;gap:15px;align-items:center}
.character-label small{font-size:11px;letter-spacing:.13em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
.skip-link{position:fixed;z-index:200;top:10px;left:10px;transform:translateY(-150%);padding:12px 22px;background:var(--yellow);color:var(--navy);font-weight:900}
.skip-link:focus{transform:none}
/* A compact permanent navigation, with the supplied wordmark unchanged. */
.site-header{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;padding:20px 28px;gap:28px;transition:background .3s,padding .3s,box-shadow .3s}
.brand{display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;width:238px;min-height:73px;background:white;clip-path:polygon(0 0,100% 0,100% 77%,93% 100%,0 100%);padding:15px 26px 16px;flex-shrink:0}
.brand img{width:186px;height:auto}
.brand span{font-size:9px;letter-spacing:.28em;line-height:1}
.desktop-nav{display:flex;align-items:center;gap:26px;margin-left:auto;color:white;font-size:13px;font-weight:800}
.desktop-nav a{position:relative;padding:10px 0}
.desktop-nav a:after{content:'';position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--yellow);transition:right .25s}
.desktop-nav a:hover:after{right:0}
.header-contact{display:flex;align-items:center;gap:24px;white-space:nowrap;padding:7px 8px 7px 23px;border-radius:40px;background:var(--yellow);font-size:14px;font-weight:900}
.header-contact>span{border-radius:50%;width:44px;height:44px;background:var(--navy);color:var(--yellow);display:grid;place-items:center}
.header-contact svg{width:25px;height:25px}
.menu-toggle{width:56px;height:56px;display:grid;place-content:center;gap:8px;background:var(--navy);color:white;border:1px solid #ffffff55;border-radius:50%;flex-shrink:0}
.menu-toggle span{width:24px;height:2px;background:currentColor;display:block;transition:transform .25s}
.menu-toggle:hover span:first-child{transform:translateX(4px)}
.menu-toggle:hover span:last-child{transform:translateX(-4px)}
.site-header.scrolled{background:#f4f8fff2;box-shadow:0 1px 0 #132d9120;padding-block:10px;backdrop-filter:blur(12px)}
.site-header.scrolled .desktop-nav{color:var(--navy)}
.site-header.scrolled .brand{min-height:58px;padding-block:10px;background:transparent}
/* Opening stage. A uses four independent characters; B uses the approved lab scene. */
.hero{isolation:isolate;position:relative;min-height:860px;height:max(860px,100svh);max-height:1080px;background:var(--navy);color:white;overflow:hidden}
.hero-road{position:absolute;inset:0;background:url('road-2bff02e3.png') center/cover no-repeat;z-index:-3}
.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#132d91d6 0%,#132d91a0 31%,transparent 60%)}
.hero-content{position:relative;z-index:4;padding:clamp(166px,14vw,210px) 0 110px var(--gutter);width:57%;pointer-events:none}
.hero-content a{pointer-events:auto}
.hero-kicker{font-weight:700;font-size:15px;letter-spacing:.08em;display:flex;align-items:center;gap:12px;margin-bottom:30px}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px #ffd24d20}
.hero h1{font-weight:900;line-height:1.12;letter-spacing:-.07em}
.hero-first{display:block;font-size:clamp(27px,2.9vw,45px);line-height:1.5;letter-spacing:-.04em;margin-bottom:16px}
.hero-big{display:block;font-size:clamp(74px,7.3vw,116px)}
.hero-big em{color:var(--yellow)}
.hero-description{font-size:clamp(17px,1.5vw,23px);font-weight:700;line-height:1.95;margin:26px 0 22px;letter-spacing:.06em}
.round-link{display:inline-flex;align-items:center;gap:30px;border-bottom:1px solid #ffffff80;padding-bottom:12px;font-size:14px;font-weight:800}
.round-link i{display:grid;place-items:center;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;transition:background .3s,color .3s,transform .3s}
.round-link svg{width:22px;height:22px;transform:rotate(90deg)}
.round-link:hover i{background:var(--yellow);color:var(--navy);transform:translateY(4px)}
.hero-team{position:absolute;inset:110px -30px 12px 42%;z-index:2;transform:translateY(calc(var(--hero-scroll,0)*45px))}
.hero-person{position:absolute;filter:drop-shadow(0 12px 4px #06196930);transform-origin:50% 80%;will-change:transform}
.hero-person .character{animation:character-float 5s ease-in-out infinite}
.hero-me{width:65%;left:-9%;bottom:13%;z-index:3;transform:rotate(-8deg)}
.hero-you{width:67%;right:-7%;bottom:5%;z-index:2;transform:rotate(8deg)}
.hero-eight{width:36%;right:13%;top:-3%;z-index:1;transform:rotate(12deg)}
.hero-eight .character{animation-duration:4.8s;animation-delay:-2s}
.hero-compass{width:46%;left:14%;bottom:-1%;z-index:4;transform:rotate(-10deg)}
.hero-you .character{animation-delay:-1.1s;animation-duration:5.8s}
.hero-compass .character{animation-delay:-2.7s;animation-duration:4s}
.hero-orbit{position:absolute;border:1px solid #00c8ff65;border-radius:50%;pointer-events:none;z-index:-2}
.orbit-one{width:75vw;height:75vw;right:-10vw;top:-22vw}
.orbit-two{width:55vw;height:55vw;right:0;top:-12vw}
.hero-star{position:absolute;color:var(--yellow);z-index:3;width:74px;animation:star-turn 24s linear infinite}
.star-one{right:5%;top:40%}
.star-two{right:47%;bottom:15%;width:42px;color:var(--cyan);animation-direction:reverse}
.hero-sign{position:absolute;z-index:5;right:27%;top:21%;transform:rotate(-9deg);background:var(--yellow);color:var(--navy);padding:12px 24px;box-shadow:5px 5px 0 #132d9180;border-radius:3px;animation:sign-float 6s ease-in-out infinite}
.hero-sign span{display:block;font-size:11px;font-weight:900;letter-spacing:.09em}
.hero-sign b{font-size:18px}
.scroll-cue{position:absolute;z-index:5;left:var(--gutter);bottom:45px;font-size:10px;font-weight:800;letter-spacing:.2em;display:flex;align-items:center;gap:24px}
.scroll-cue span{font-size:23px;animation:scroll-nudge 2s infinite}
.hero-corner{position:absolute;right:30px;bottom:45px;font-size:9px;letter-spacing:.18em;z-index:5}
.hero-lab{position:absolute;inset:0;z-index:-3}
.hero-lab img{width:100%;height:100%;object-fit:cover;object-position:65% center;animation:lab-breathe 16s ease-in-out infinite alternate}
.lab-light{position:absolute;z-index:0;right:27%;top:28%;width:20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffd24d60,transparent 65%);mix-blend-mode:screen;animation:glow 5s ease-in-out infinite;pointer-events:none}
.lab-ring{position:absolute;z-index:-2;right:5%;top:12%;width:47%;aspect-ratio:1;border:2px dashed #ffffff30;border-radius:50%;animation:star-turn 90s linear infinite}
.cross-ribbon{position:relative;z-index:8;background:var(--yellow);color:var(--navy);padding:13px 0;border-block:2px solid var(--navy);transform:rotate(-2.4deg) scale(1.03);margin-top:-22px;overflow:hidden;box-shadow:0 10px 0 #132d9114}
.marquee{display:flex;align-items:center;width:max-content;gap:40px;font-weight:900;font-size:23px;white-space:nowrap;animation:marquee-run 36s linear infinite}
.marquee b{font-size:30px;font-style:italic;letter-spacing:-.03em}
.marquee i{font-style:normal;font-size:29px}
.cross-ribbon:hover .marquee{animation-play-state:paused}
/* A broad white pause, with one oversized character outside the text column. */
.about{padding:145px 0 95px;background:var(--paper)}
.about-layout{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;position:relative;z-index:2;gap:24px}
.about-copy h2 em{color:var(--navy);background:linear-gradient(transparent 74%,var(--yellow) 74%,var(--yellow) 92%,transparent 92%)}
.about-copy .lead{font-size:27px;font-weight:900;line-height:1.7;margin:40px 0 24px}
.about-copy>p:not(.eyebrow):not(.lead){font-size:16px;line-height:2.2;margin-bottom:24px}
.about-copy .text-link{margin-top:12px}
.about-visual{position:relative;align-self:stretch;min-height:640px}
.about-eight{position:absolute;width:110%;max-width:none;top:25%;left:-3%;transform:rotate(9deg);animation:about-float 7s ease-in-out infinite}
.about-visual .speech{position:absolute;right:9%;top:5%}
.about-orbit{position:absolute;width:105%;aspect-ratio:1;top:22%;left:-2%;background:var(--cyan);border-radius:50%}
.about-orbit:before{content:'';position:absolute;inset:-27px;border:1px solid var(--navy);border-radius:50%}
.about-orbit:after{content:'✳';font-size:120px;position:absolute;right:-17px;top:-34px;color:var(--yellow);line-height:1}
.about-visual .character-label{position:absolute;bottom:0;right:6%}
.visual-note{position:absolute;font-size:12px;line-height:1.8;right:0;top:34%;transform:rotate(90deg) translateX(100%);transform-origin:right top;font-weight:800}
.about-track{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35}
.about-track svg{width:100%;height:100%}
.about-track path{fill:none;stroke:var(--yellow);stroke-width:46}
.about-foot{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3;margin-top:100px;padding-top:30px;border-top:1px solid #132d9140}
.about-foot>span{font-size:clamp(26px,3.9vw,57px);font-weight:900;line-height:1;letter-spacing:-.06em}
.about-foot>span:nth-child(2){color:var(--blue)}
.about-foot>span:nth-child(3){-webkit-text-stroke:1px var(--navy);color:transparent}
.about-foot b{font-size:14px;line-height:1.8}
/* Tool shelf: native scrolling, strong typography and illustrated tools. */
.services{background:var(--yellow);padding:138px 0 85px;isolation:isolate}
.services:before{content:'';position:absolute;z-index:-1;inset:-55px 0 auto;height:100px;background:var(--yellow);clip-path:polygon(0 55%,77% 0,100% 55%,100% 100%,0 100%)}
.service-bg-word{position:absolute;top:13px;left:3%;font-size:clamp(80px,15.3vw,260px);font-weight:900;letter-spacing:-.065em;line-height:1;color:transparent;-webkit-text-stroke:1px #132d9127;white-space:nowrap;z-index:-1}
.services-top{display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.services-top h2{font-size:clamp(40px,4.5vw,66px)}
.services-note{display:flex;align-items:center;gap:32px;padding-bottom:14px;flex-shrink:0}
.services-note p{font-size:15px;font-weight:700;line-height:2}
.small-star{display:block;width:70px;animation:star-turn 30s linear infinite}
.slider-toolbar{display:flex;align-items:center;justify-content:space-between;margin-top:60px;gap:20px}
.slider-toolbar>p{font-size:14px;font-weight:800}
.slider-controls{display:flex;align-items:center;gap:12px}
.slide-count{font-size:13px;margin-right:15px}
.slide-count b{font-size:24px}
.circle-button{background:transparent;border:1.5px solid var(--navy);color:var(--navy);border-radius:50%;width:52px;height:52px;display:grid;place-items:center;transition:background .25s,color .25s,transform .25s}
.circle-button svg{width:25px;height:25px}
.circle-button[data-slide=prev] svg{transform:rotate(180deg)}
.circle-button:hover:not(:disabled){background:var(--navy);color:var(--yellow);transform:scale(1.05)}
.service-track{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:26px;padding:8px max(var(--gutter),calc((100vw - 1240px)/2)) 30px;scroll-padding-inline:var(--gutter)}
.service-track::-webkit-scrollbar{display:none}
.service-card{flex:0 0 340px;scroll-snap-align:start;background:var(--paper);padding:22px 26px 24px;position:relative;box-shadow:6px 7px 0 #132d91;border:2px solid var(--navy);border-radius:2px 30px 2px 2px;transition:transform .35s var(--ease);display:flex;flex-direction:column}
.service-card:hover{transform:translateY(-6px) rotate(-1deg)}
.service-card:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
.service-card-top{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:10px;letter-spacing:.15em}
.service-card-top>span:first-child{font-size:20px;letter-spacing:0}
.service-catch{font-size:12px;font-weight:900;margin:8px 0 8px}
.service-card h3{font-size:27px;letter-spacing:-.04em}
.service-description{font-size:13px;line-height:1.95;margin-top:15px;min-height:77px}
.service-link{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:900;border-top:1px solid #132d9130;margin-top:23px;padding-top:16px;gap:12px}
.service-link span{background:var(--navy);color:white;border-radius:50%;padding:7px;transition:transform .25s}
.service-link svg{width:18px;height:18px}
.service-link:hover span{transform:rotate(-35deg)}
.service-object{height:190px;position:relative;display:grid;place-items:center;margin:15px 0 18px;isolation:isolate}
.service-object:before{content:'';position:absolute;width:164px;height:164px;border-radius:50%;background:var(--yellow);z-index:-1;left:8%;top:10%}
.object-calendar:before{background:var(--pink);left:30%}
.object-sns:before{background:var(--cyan)}
.object-books:before{background:var(--blue);left:30%}
.object-training:before{background:var(--pink)}
.mini-browser{width:226px;height:151px;border:3px solid var(--navy);background:white;border-radius:7px;transform:rotate(-7deg);box-shadow:7px 8px 0 #132d9120}
.window-dots{display:block;border-bottom:2px solid;line-height:20px;padding-left:9px;letter-spacing:3px;font-size:14px}
.mini-web{display:flex;align-items:flex-end;justify-content:center;gap:15px;height:122px;padding:15px;position:relative;overflow:hidden}
.mini-sun{width:32px;height:32px;background:var(--yellow);border-radius:50%;position:absolute;top:10px;right:15px}
.mini-shop{width:95px;height:68px;background:var(--cyan);border:2px solid;display:flex;align-items:flex-end;justify-content:space-around;position:relative}
.mini-shop i{position:absolute;top:-15px;left:-6px;right:-6px;height:24px;background:repeating-linear-gradient(90deg,var(--navy) 0 14px,white 14px 28px);border:2px solid;border-radius:5px 5px 3px 3px;transform:skew(-7deg)}
.mini-shop b{width:26px;height:43px;border:2px solid;background:white}
.mini-copy{align-self:center;display:flex;flex-direction:column;gap:7px}
.mini-copy i{height:6px;width:58px;background:var(--navy)}
.mini-copy i:last-child{width:35px}
.object-badge{position:absolute;z-index:3;bottom:0;right:0;border:2px solid;background:var(--yellow);padding:7px 13px;font-size:12px;font-weight:900;transform:rotate(8deg);border-radius:50%}
.mini-calendar{width:172px;border:3px solid;background:white;transform:rotate(8deg);box-shadow:-8px 8px 0 #132d9120}
.mini-calendar>b{display:block;background:var(--navy);color:white;text-align:center;font-size:12px;line-height:2.5}
.mini-calendar>div{display:grid;grid-template-columns:repeat(3,1fr);padding:12px;gap:5px}
.mini-calendar i{font-style:normal;text-align:center;border:1px solid #132d9130;line-height:28px;font-size:12px}
.mini-calendar i:nth-child(4),.mini-calendar i:nth-child(6){background:var(--cyan);font-size:20px;font-weight:900}
.mini-feed{width:124px;height:154px;background:white;position:absolute;border:2px solid;padding:9px;border-radius:5px;box-shadow:5px 6px 0 #132d9120}
.mini-feed span{font-size:8px;display:block}
.mini-feed>div{display:grid;place-items:center;margin:7px 0;height:89px;background:var(--yellow);font-size:48px;font-weight:900}
.mini-feed b{font-size:12px;line-height:1}
.feed-back{left:14%;top:5%;transform:rotate(-12deg)}
.feed-front{right:6%;top:15%;transform:rotate(10deg)}
.feed-front>div{font-size:22px;background:var(--pink);letter-spacing:-.08em}
.mini-receipt{background:white;border:2px solid;padding:22px 18px 25px;transform:rotate(-9deg);clip-path:polygon(0 0,100% 0,100% 95%,90% 100%,80% 95%,70% 100%,60% 95%,50% 100%,40% 95%,30% 100%,20% 95%,10% 100%,0 95%)}
.mini-receipt>b{font-size:15px}
.mini-receipt p{font-size:11px;border-bottom:1px solid #132d9130;line-height:2.8}
.mini-receipt>div{height:10px;background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 5px);margin-top:12px}
.object-badge.check{font-size:33px;bottom:5%;right:13%;border-radius:50%;width:60px;height:60px;text-align:center;line-height:40px}
.mini-board{background:var(--navy);color:white;width:220px;padding:15px;border:4px solid var(--blue);transform:rotate(-4deg);box-shadow:6px 6px 0 #132d9120}
.mini-board>span{font-size:12px}
.mini-board>div{font-size:58px;line-height:1.3;font-weight:900;color:var(--yellow)}
.mini-board i{font-style:normal;font-size:30px;margin:0 8px;color:var(--cyan)}
.mini-board b{font-size:10px}
.service-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:15px}
.service-bottom p{font-size:22px;font-weight:800}
.service-bottom strong{background:var(--navy);color:var(--yellow);padding:0 5px}
.service-mascot{position:absolute;top:-144px;right:5%;width:180px;transform:rotate(8deg);z-index:2;pointer-events:none}
/* Cases are original HTML illustrations; no client results are invented. */
.examples{padding:150px 0 130px;background:var(--paper)}
.examples:before{content:'';position:absolute;inset:0 0 auto;height:70px;background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 20%,60% 80%,0 20%)}
.example-bridge{position:absolute;top:1px;right:7%;width:270px;height:64px;border-radius:50%;background:var(--cyan);transform:rotate(-11deg);display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;font-weight:900;letter-spacing:.05em}
.example-bridge svg{width:40px}
.examples-heading{display:grid;grid-template-columns:1fr auto;position:relative}
.examples-heading .eyebrow{grid-column:1/-1}
.examples-heading h2{font-size:clamp(35px,4.4vw,65px)}
.example-disclaimer{align-self:end;font-size:12px;line-height:1.85;margin-bottom:7px;max-width:270px}
.example-tabs{display:flex;justify-content:flex-end;gap:10px;margin:46px 0 36px}
.example-tabs button{display:flex;gap:30px;align-items:center;justify-content:space-between;background:transparent;border:1px solid var(--navy);border-radius:40px;padding:13px 22px;font-size:13px;font-weight:800;transition:background .25s,color .25s}
.example-tabs button[aria-selected=true]{background:var(--navy);color:white}
.example-tabs button span{font-size:19px}
.example-panel{display:grid;grid-template-columns:1.1fr .8fr;gap:8%;align-items:center;animation:panel-in .45s var(--ease)}
.example-art{position:relative;padding:25px 0 40px;isolation:isolate}
.example-art:before{content:'';position:absolute;inset:0 -5% 5% 5%;background:var(--cyan);transform:rotate(5deg);border-radius:36px 8px 36px 8px;z-index:-1}
.example-screen{background:white;border:2px solid var(--navy);border-radius:9px;box-shadow:13px 13px 0 var(--navy);transform:rotate(-3deg);overflow:hidden}
.screen-bar{display:flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-bottom:1px solid;font-size:9px;background:var(--paper)}
.screen-bar i{width:6px;height:6px;border:1px solid;border-radius:50%}
.screen-bar span{margin-left:auto}
.cafe-site{background:#fcf4df;color:#463927}
.cafe-nav{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;gap:15px}
.cafe-nav>b{font-size:13px}
.cafe-nav>span{font-size:8px}
.cafe-art{height:246px;position:relative;background:#aac6ad;overflow:hidden}
.cafe-art:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:45px;background:#68492d;transform:skewY(-5deg);transform-origin:bottom right}
.cafe-window{position:absolute;right:32px;top:20px;background:#fff6d8;width:190px;height:235px;border:9px solid #f0dfaf;border-radius:120px 120px 0 0;display:flex;align-items:center;box-shadow:0 0 0 1px #46392730}
.cafe-window:after{content:'';height:100%;width:5px;background:#f0dfaf;left:50%;position:absolute}
.cafe-window i{height:5px;width:100%;background:#f0dfaf}
.cafe-art>span{position:absolute;z-index:2;left:32px;top:42px;font-size:23px;font-weight:900;line-height:1.8;letter-spacing:.05em}
.cafe-plant{color:#526c42;font-size:160px;line-height:1;position:absolute;left:55%;bottom:-5px;transform:rotate(-15deg);z-index:1}
.cafe-cup{position:absolute;right:66px;bottom:25px;width:72px;height:55px;background:#f6edda;z-index:2;border-radius:3px 3px 30px 30px;transform:rotate(8deg);border-top:7px solid #6a4832}
.cafe-cup:after{content:'';position:absolute;right:-19px;top:4px;width:21px;height:27px;border:7px solid #f6edda;border-radius:50%;z-index:-1}
.cafe-orbit{position:absolute;width:120px;height:120px;border:1px solid #46392744;left:-50px;bottom:-25px;border-radius:50%}
.cafe-bottom{display:flex;align-items:center;padding:25px;gap:20px}
.cafe-bottom>b{font-size:21px}
.cafe-bottom>span{font-size:9px;margin-left:auto}
.cafe-bottom>i{font-size:24px;font-style:normal}
.mock-sticker{position:absolute;bottom:10px;right:-6%;font-size:17px;line-height:1.5;font-weight:900;background:var(--yellow);color:var(--navy);padding:14px 25px;transform:rotate(6deg);border:2px solid;box-shadow:4px 4px 0 var(--navy)}
.example-number{font-size:12px;font-weight:900;letter-spacing:.13em}
.example-copy h3{font-size:clamp(30px,3vw,44px);line-height:1.45;margin:14px 0 20px}
.customer-quote{font-weight:800;font-size:15px;margin-bottom:14px}
.example-copy>p:not(.customer-quote){font-size:14px;line-height:2.1}
.example-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.example-tags span{font-size:10px;border:1px solid #132d9150;border-radius:2px;padding:4px 10px}
.example-copy .text-link{font-size:13px;gap:25px;margin-top:10px}
.example-caption{margin-top:95px;font-weight:900;font-size:clamp(37px,7.2vw,110px);line-height:1;white-space:nowrap;text-align:center;letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1px #132d9140}
.schedule{padding:28px 24px;background:var(--paper)}
.schedule-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.schedule-top b{font-size:20px}
.schedule-top span{font-size:8px;background:var(--navy);padding:4px 8px;color:white}
.schedule-days{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;font-size:11px;border-bottom:1px solid var(--navy);padding-bottom:10px}
.schedule-grid{height:228px;background:repeating-linear-gradient(to right,transparent 0 calc(20% - 1px),#132d911f calc(20% - 1px) 20%),repeating-linear-gradient(to bottom,transparent 0 55px,#132d911f 55px 56px);position:relative}
.event{position:absolute;border:1px solid var(--navy);border-radius:4px;font-size:11px;padding:9px 11px}
.ev-one{top:13px;left:1%;width:37%;background:var(--cyan)}
.ev-two{top:69px;left:21%;width:37%;background:var(--yellow)}
.ev-three{top:13px;left:61%;width:37%;background:var(--pink)}
.ev-four{top:125px;left:41%;width:57%;background:white}
.ev-five{top:181px;left:1%;width:37%;background:var(--yellow)}
.schedule-bottom{font-size:12px;font-weight:800;padding:12px 0 0}
.sns-desk{padding:28px;background:#fcecf5}
.sns-desk h3{font-size:20px}
.sns-posts{display:flex;gap:22px;margin-top:24px}
.sns-posts article{flex:1;background:white;padding:13px;border:1px solid var(--navy);transform:rotate(-4deg)}
.sns-posts article+article{transform:rotate(6deg)}
.sns-posts article>div{height:152px;display:grid;place-items:center;line-height:1}
.post-flower{font-size:128px;background:var(--yellow);color:var(--navy)}
.post-hand{font-size:35px;font-style:italic;font-weight:900;background:var(--cyan)}
.sns-posts b{font-size:12px;display:block;margin-top:12px}
.sns-posts span{font-size:9px}
.sns-desk>p{font-size:11px;font-weight:800;margin-top:25px;text-align:center}
/* A dramatic second stage, connecting philosophy to process. */
.belief{background:var(--navy);color:white;padding:125px 0 120px;isolation:isolate}
.belief:before{content:'';position:absolute;top:-39px;left:-5%;width:110%;height:80px;background:var(--navy);border-radius:50% 50% 0 0}
.belief-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:72px 72px;z-index:-1;mask-image:linear-gradient(90deg,transparent,black)}
.belief-topline{position:absolute;left:-2%;right:-2%;top:-30px;overflow:hidden;background:var(--cyan);color:var(--navy);transform:rotate(2deg);padding:10px 0;border-block:2px solid var(--navy)}
.belief-topline .marquee{font-size:20px;animation-direction:reverse;animation-duration:42s}
.belief-main{display:grid;grid-template-columns:1.15fr .85fr;position:relative}
.belief-tag{font-size:16px;letter-spacing:.1em;font-weight:800;display:inline-block;border-bottom:1px solid #ffffff60;margin-bottom:20px}
.belief h2{font-size:clamp(49px,6vw,91px);line-height:1.45;letter-spacing:-.05em;white-space:nowrap}
.belief h2 em{color:var(--yellow)}
.belief-description{font-size:20px;line-height:1.9;font-weight:700;margin-top:32px}
.belief-visual{position:relative;min-height:530px}
.belief-person{position:absolute;width:136%;max-width:none;top:4%;left:-25%;transform:rotate(11deg);animation:about-float 8s ease-in-out infinite}
.belief-orbit{position:absolute;width:120%;aspect-ratio:1;top:4%;left:-10%;border-radius:50%;border:1px solid #ffffff50}
.belief-orbit:before{content:'';position:absolute;inset:20px;background:var(--blue);border-radius:50%}
.belief-orbit>svg{position:absolute;width:100px;right:0;top:-5%;color:var(--yellow);animation:star-turn 26s linear infinite}
.belief-visual .speech{position:absolute;bottom:0;right:-10%;font-size:17px;transform:rotate(7deg);padding:22px 35px}
.belief-notes{display:flex;align-items:center;gap:26px;margin:65px auto 0;width:88%;position:relative;z-index:3}
.belief-note{background:var(--paper);color:var(--navy);width:50%;padding:31px 38px;transform:rotate(-3deg);box-shadow:6px 6px 0 #00000033}
.belief-note:last-child{background:var(--yellow);transform:rotate(3deg)}
.belief-note>span{font-size:11px;letter-spacing:.2em;font-weight:900}
.belief-note h3{font-size:27px;margin:8px 0 12px}
.belief-note p{font-size:14px;line-height:1.95}
.notes-plus{font-size:44px;font-weight:300;flex-shrink:0}
.belief-exit{position:absolute;bottom:-30px;left:calc(50% - 135px);width:270px;border:1px solid white;border-radius:50%;height:70px;background:var(--navy);display:flex;gap:22px;align-items:center;justify-content:center;font-size:24px;z-index:5}
.belief-exit span{font-size:14px;font-weight:800}
/* A winding, editorial timeline; B makes a spread of four research notes. */
.flow{padding:140px 0 130px;background:var(--paper)}
.flow-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.flow-heading h2 em{color:var(--navy);background:linear-gradient(transparent 77%,var(--yellow) 77% 92%,transparent 92%)}
.flow-heading>p{font-size:15px;line-height:2.1;margin-bottom:14px}
.flow-steps{margin-top:60px;position:relative;isolation:isolate}
.flow-route{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.flow-route path{fill:none;stroke:var(--yellow);stroke-width:16;stroke-linecap:round;stroke-dasharray:18 24}
.flow-step{display:grid;grid-template-columns:190px 1fr 1fr;gap:36px;align-items:center;padding:46px 10px;border-bottom:1px solid #132d9130;min-height:246px}
.flow-step:nth-of-type(even){padding-left:100px;grid-template-columns:160px 1fr 1fr}
.step-number{font-weight:900;font-size:80px;line-height:1;letter-spacing:-.055em;position:relative;white-space:nowrap}
.step-number>span{display:block;font-size:21px;letter-spacing:-.03em;margin-top:16px}
.flow-step h3{font-size:29px;line-height:1.55}
.step-description p{font-size:14px;line-height:2}
.step-description>span{display:inline-block;font-size:10px;line-height:1.5;border:1px solid;padding:6px 10px;margin-top:15px;border-radius:30px;font-weight:800;background:var(--paper)}
.flow-stamp{position:absolute;right:7%;bottom:-65px;width:156px;height:156px;border-radius:50%;background:var(--pink);color:var(--navy);border:2px solid;box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(13deg);z-index:6}
.flow-stamp>span{font-size:9px;font-weight:900;letter-spacing:.07em}
.flow-stamp b{font-size:28px;line-height:1.25;margin-top:7px}
/* Questions stay readable while Compass crosses the edge of the scene. */
.faq{padding:135px 0 135px;background:var(--blue)}
.faq:before{content:'';position:absolute;top:-28px;left:0;right:0;height:30px;background:var(--blue);clip-path:polygon(0 100%,0 50%,20% 50%,22% 0,68% 0,70% 50%,100% 50%,100% 100%)}
.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:start}
.faq-heading h2{font-size:52px}
.faq-visual{position:relative;padding-top:55px;height:340px;margin-top:60px}
.faq-visual .speech{position:absolute;top:-20px;left:20px;font-size:16px;padding:17px 28px}
.faq-compass{width:117%;max-width:none;position:absolute;top:30px;left:-16%;transform:rotate(-13deg);animation:about-float 7s ease-in-out infinite}
.faq-visual .character-label{position:absolute;left:0;bottom:-70px;font-size:17px}
.faq-visual .character-label small{font-size:9px}
.questions{border-top:2px solid var(--navy);background:var(--paper)}
.question{border:2px solid var(--navy);border-top:0;transition:background .2s}
.question summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:38px 1fr 24px;gap:15px;align-items:center;padding:28px 23px;min-height:93px}
.question summary::-webkit-details-marker{display:none}
.question h3{font-size:16px;font-weight:800;letter-spacing:0;line-height:1.65}
.q-number{font-size:11px;font-weight:900;letter-spacing:.08em}
.plus{position:relative;width:22px;height:22px}
.plus:before,.plus:after{content:'';position:absolute;width:16px;height:2px;top:10px;left:3px;background:var(--navy);transition:transform .3s}
.plus:after{transform:rotate(90deg)}
.question[open] .plus:after{transform:rotate(0)}
.question[open]{background:white}
.question summary:hover{background:#ffd24d60}
.answer{display:flex;gap:18px;padding:0 29px 29px 28px;animation:panel-in .25s ease-out}
.answer>span{font-size:18px;font-weight:900}
.answer p{font-size:14px;line-height:2.1;padding-top:2px}
/* A final invitation, followed by an exceptionally large original wordmark. */
.contact{background:var(--yellow);padding:135px 0 0;isolation:isolate}
.contact:before{content:'';position:absolute;left:-5%;top:-45px;width:110%;height:100px;background:var(--yellow);border-radius:50% 50% 0 0}
.contact-orbit{position:absolute;z-index:-1;left:-18%;top:15%;width:82%;aspect-ratio:1;border:1px solid #132d9133;border-radius:50%;pointer-events:none}
.contact-orbit:after{content:'';position:absolute;inset:34px;border:1px solid #132d9133;border-radius:50%}
.contact-inner{position:relative}
.contact-copy h2{font-size:clamp(42px,5.4vw,80px);line-height:1.4}
.contact-copy h2 em{color:var(--navy);background:linear-gradient(transparent 78%,white 78% 94%,transparent 94%)}
.contact-copy>p{font-size:20px;font-weight:800;line-height:1.9;margin-top:30px}
.contact-bottom{display:flex;justify-content:space-between;gap:55px;align-items:center;margin-top:70px;position:relative;z-index:3}
.free-label{font-size:20px;font-weight:900}
.contact-bottom>div>p{font-size:14px;line-height:2;margin-top:10px}
.contact-action{min-width:43%;max-width:560px}
.contact-button{display:flex;align-items:center;justify-content:space-between;gap:42px;width:100%;background:var(--navy);color:white;border:2px solid var(--navy);padding:29px 32px;border-radius:4px 40px 4px 4px;box-shadow:6px 6px 0 var(--paper);transition:transform .3s,box-shadow .3s;text-align:left}
.contact-button>span{font-size:26px;font-weight:900;line-height:1.5}
.contact-button small{display:block;font-size:9px;letter-spacing:.17em;font-weight:700;margin-top:8px}
.contact-button i{display:grid;place-items:center;flex-shrink:0;background:var(--yellow);color:var(--navy);border-radius:50%;width:66px;height:66px;transition:transform .3s}
.contact-button i svg{width:36px;height:36px;transform:rotate(-35deg)}
.contact-button:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--paper)}
.contact-button:hover i{transform:rotate(35deg)}
.contact-bottom .prototype-note{font-size:10px;margin-top:15px;line-height:1.8;font-weight:700}
.contact-team{display:flex;align-items:flex-end;justify-content:center;margin-top:78px;height:270px;position:relative;overflow:hidden;pointer-events:none}
.contact-team .character{position:relative;width:260px;flex-shrink:0;max-width:none;margin-inline:-18px}
.contact-team .me{transform:rotate(-12deg) translateY(40%)}
.contact-team .you{transform:rotate(7deg) translateY(35%);width:285px}
.contact-team .eight{transform:rotate(-8deg) translateY(29%);width:220px}
.contact-team .compass{transform:rotate(8deg) translateY(27%);width:290px}
.site-footer{background:var(--paper);padding:65px 0 95px;position:relative;border-top:2px solid var(--navy)}
.footer-top{display:flex;justify-content:space-between;align-items:center}
.footer-top>p{font-size:19px;font-weight:900;line-height:1.9}
.back-top{display:grid;place-items:center;width:72px;height:72px;border:1px solid;border-radius:50%;transition:background .25s}
.back-top svg{transform:rotate(-90deg);width:33px;height:33px}
.back-top:hover{background:var(--yellow)}
.footer-logo{display:block;width:calc(100% - var(--gutter)*2);margin:65px auto 55px;max-width:1600px}
.footer-logo img{width:100%;height:auto}
.footer-bottom{border-top:1px solid #132d9130;padding-top:25px;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:10px;font-weight:700}
.footer-bottom>span{font-size:12px;letter-spacing:.1em}
.footer-bottom nav{display:flex;gap:24px}
.footer-bottom nav a:hover{text-decoration:underline}
.footer-bottom small{font-size:9px;white-space:nowrap}
.preview-dock{position:fixed;z-index:75;bottom:14px;left:18px;display:flex;align-items:center;gap:3px;background:#f4f8fff2;border:1px solid #132d9130;border-radius:30px;padding:5px 7px;box-shadow:0 3px 20px #132d9110;backdrop-filter:blur(10px);font-size:10px;font-weight:700}
.preview-dock>a{padding:5px 9px;border-radius:20px;min-width:29px;text-align:center}
.preview-dock>span{font-size:9px;padding:0 6px}
.preview-dock a[aria-current=page]{background:var(--navy);color:white}
.preview-dock>a:hover{background:var(--yellow);color:var(--navy)}
.motion-toggle{font-size:10px;line-height:1.5;background:transparent;border-left:1px solid #132d9130;padding:6px 9px;white-space:nowrap;min-height:29px}
.motion-toggle>span{font-weight:900}
.floating-contact{position:fixed;z-index:70;bottom:18px;right:28px;display:flex;align-items:center;gap:27px;font-size:13px;font-weight:900;border:1px solid var(--navy);border-radius:32px;padding:12px 20px;background:var(--yellow);box-shadow:3px 3px 0 var(--navy);transition:transform .35s,opacity .35s}
.floating-contact span{font-size:23px;line-height:1}
.floating-contact.is-hidden{opacity:0;pointer-events:none;transform:translateY(100px)}
/* B is a research notebook: apertures, pages, blue cabinetry, and a yellow discovery. */
[data-theme=B] .hero:after{background:linear-gradient(90deg,#132d91f5 0%,#132d91d9 22%,#132d9160 49%,transparent 68%)}
[data-theme=B] .hero-content{padding-top:185px}
[data-theme=B] .hero-big{font-size:clamp(74px,7.3vw,112px)}
[data-theme=B] .hero-sign{top:auto;bottom:90px;right:12%;transform:rotate(6deg);border-radius:50%;padding:24px 30px;background:var(--cyan)}
[data-theme=B] .cross-ribbon{background:var(--cyan);transform:rotate(1.5deg) scale(1.03);margin-top:-16px}
[data-theme=B] .about{background:white;padding-bottom:135px}
[data-theme=B] .about-track{opacity:.1;background-image:linear-gradient(var(--blue) 1px,transparent 1px),linear-gradient(90deg,var(--blue) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(90deg,transparent 0 35%,black)}
[data-theme=B] .about-track svg{display:none}
[data-theme=B] .about-layout{grid-template-columns:1fr 1fr;gap:60px}
[data-theme=B] .about-visual{border:3px solid var(--navy);background:var(--yellow);border-radius:220px 220px 12px 12px;min-height:590px;margin-top:65px;align-self:center;transform:rotate(3deg);box-shadow:16px 16px 0 var(--paper),17px 17px 0 2px var(--navy)}
[data-theme=B] .about-visual .speech{top:-65px;right:15%}
[data-theme=B] .about-orbit{background:transparent;border:1px solid #132d9140;inset:17px;width:calc(100% - 34px);height:calc(100% - 34px);border-radius:200px 200px 3px 3px;aspect-ratio:auto}
[data-theme=B] .about-orbit:before{display:none}
[data-theme=B] .about-orbit:after{right:-45px;top:30%}
[data-theme=B] .about-eight{top:12%;left:-6%;width:110%}
[data-theme=B] .about-visual .character-label{bottom:22px;right:20px}
[data-theme=B] .visual-note{display:none}
[data-theme=B] .about-foot{margin-top:80px}
[data-theme=B] .services{background:var(--navy);color:white;padding-top:100px;border-radius:75px 75px 0 0}
[data-theme=B] .services:before{background:white;top:-60px;height:60px;clip-path:none;z-index:-2}
[data-theme=B] .service-bg-word{-webkit-text-stroke:1px #ffffff27;top:10px}
[data-theme=B] .services-note .small-star{color:var(--yellow)}
[data-theme=B] .service-card{color:var(--navy);box-shadow:6px 7px 0 var(--blue);border-radius:0 0 34px 0;border-color:var(--blue)}
[data-theme=B] .circle-button{border-color:white;color:white}
[data-theme=B] .circle-button:hover:not(:disabled){background:var(--yellow);color:var(--navy)}
[data-theme=B] .service-bottom strong{background:var(--yellow);color:var(--navy)}
[data-theme=B] .service-mascot{right:4%;top:-167px;width:205px;transform:rotate(-10deg)}
[data-theme=B] .examples{background:var(--paper);padding-top:140px}
[data-theme=B] .examples:before{background:var(--navy);height:64px;clip-path:polygon(0 0,100% 0,100% 100%,52% 100%,50% 0,48% 100%,0 100%)}
[data-theme=B] .example-bridge{top:15px;right:8%;background:var(--pink);z-index:2;transform:rotate(6deg)}
[data-theme=B] .example-art:before{background:var(--yellow);border-radius:0;transform:rotate(-5deg);inset:0 -5% 5% 0}
[data-theme=B] .example-screen{transform:rotate(2deg)}
[data-theme=B] .example-panel{grid-template-columns:.8fr 1.1fr;gap:8%}
[data-theme=B] .example-art{order:2}
[data-theme=B] .mock-sticker{right:2%;background:var(--cyan);transform:rotate(-5deg)}
[data-theme=B] .example-tabs{justify-content:flex-start}
[data-theme=B] .belief{background:var(--yellow);color:var(--navy);padding-top:125px}
[data-theme=B] .belief:before{background:var(--yellow);border-radius:0;top:-50px;height:90px;clip-path:polygon(0 100%,0 50%,35% 50%,39% 0,70% 0,76% 50%,100% 50%,100% 100%)}
[data-theme=B] .belief-topline{background:var(--paper);transform:rotate(-2deg)}
[data-theme=B] .belief-grid{background-image:linear-gradient(#132d9110 1px,transparent 1px),linear-gradient(90deg,#132d9110 1px,transparent 1px)}
[data-theme=B] .belief-tag{border-color:#132d9160}
[data-theme=B] .belief h2 em{color:var(--navy);background:linear-gradient(transparent 80%,white 80% 95%,transparent 95%)}
[data-theme=B] .belief-orbit{border-color:var(--navy);width:120%;top:9%}
[data-theme=B] .belief-orbit:before{background:var(--navy)}
[data-theme=B] .belief-orbit svg{color:var(--pink)}
[data-theme=B] .belief-person{top:14%;left:-15%;width:125%;transform:rotate(-12deg)}
[data-theme=B] .belief-notes{width:100%;gap:20px}
[data-theme=B] .belief-note{transform:rotate(2deg);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy);padding:32px 38px}
[data-theme=B] .belief-note:last-child{background:var(--navy);color:white;transform:rotate(-2deg);box-shadow:6px 6px 0 var(--blue)}
[data-theme=B] .belief-exit{background:var(--yellow);border-color:var(--navy)}
[data-theme=B] .flow{background:white;padding-bottom:150px}
[data-theme=B] .flow-steps{display:grid;grid-template-columns:1fr 1fr;gap:32px 42px;margin-top:80px;counter-reset:step}
[data-theme=B] .flow-route{display:none}
[data-theme=B] .flow-step,[data-theme=B] .flow-step:nth-of-type(even){display:grid;grid-template-columns:100px 1fr;gap:24px;padding:34px;min-height:310px;border:2px solid var(--navy);background:var(--paper);box-shadow:7px 7px 0 var(--navy);transform:rotate(-2deg);position:relative}
[data-theme=B] .flow-step:nth-of-type(even){transform:rotate(2deg);background:#e2f7ff}
[data-theme=B] .flow-step:before{content:'';position:absolute;width:85px;height:26px;background:#ffd24dd9;left:45%;top:-14px;transform:rotate(-7deg);border:1px solid #132d9120}
[data-theme=B] .step-number{font-size:69px}
[data-theme=B] .step-number>span{font-size:21px}
[data-theme=B] .flow-step h3{font-size:28px}
[data-theme=B] .step-description{grid-column:1/-1}
[data-theme=B] .step-description p{font-size:14px}
[data-theme=B] .step-description>span{background:white}
[data-theme=B] .flow-stamp{background:var(--cyan)}
[data-theme=B] .faq{background:var(--paper);border-top:2px solid var(--navy)}
[data-theme=B] .faq:before{background:var(--navy);height:4px;clip-path:none;top:-11px}
[data-theme=B] .questions{border:0;background:transparent}
[data-theme=B] .question{border:0;border-bottom:1px solid var(--navy);background:transparent}
[data-theme=B] .question:first-child{border-top:1px solid var(--navy)}
[data-theme=B] .question summary{padding-inline:8px}
[data-theme=B] .faq-visual{background:var(--yellow);border:2px solid var(--navy);border-radius:50%;height:360px;width:360px;max-width:100%;transform:rotate(6deg)}
[data-theme=B] .faq-compass{top:65px;left:-6%;width:117%}
[data-theme=B] .faq-visual .character-label{bottom:-44px}
[data-theme=B] .contact{background:var(--cyan);border-top:2px solid var(--navy);padding-top:135px}
[data-theme=B] .contact:before{background:var(--cyan);top:-50px;left:8%;width:160px;height:80px;border:2px solid var(--navy);border-bottom:0;border-radius:90px 90px 0 0;z-index:-1}
[data-theme=B] .contact-copy h2 em{background:linear-gradient(transparent 78%,var(--yellow) 78% 94%,transparent 94%)}
[data-theme=B] .contact-orbit{left:auto;right:-10%;top:0;width:65%}
[data-theme=B] .contact-button{border-radius:60px;box-shadow:6px 6px 0 var(--yellow)}
[data-theme=B] .contact-button:hover{box-shadow:9px 9px 0 var(--yellow)}
/* Dialogs are native, keyboard-operable, and entirely local. */
dialog{color:var(--navy);border:0;padding:0}
dialog::backdrop{background:#07154aca;backdrop-filter:blur(6px)}
.menu-dialog{width:100%;height:100%;max-width:none;max-height:none;background:var(--navy);color:white;overflow:auto;padding:32px var(--gutter) 55px}
.menu-dialog[open]{animation:panel-in .35s var(--ease)}
.menu-head{display:flex;align-items:center;justify-content:space-between}
.menu-head img{width:225px;height:auto;background:white;padding:18px;box-sizing:content-box}
.menu-head button{width:54px;height:54px;border:1px solid white;border-radius:50%;font-size:34px;line-height:1;background:transparent;color:white}
.menu-dialog>p{font-size:15px;margin:38px 0 22px;color:var(--yellow);letter-spacing:.13em}
.menu-dialog nav{width:65%;position:relative;z-index:2}
.menu-dialog nav>a{display:flex;align-items:center;gap:24px;font-size:clamp(23px,3.5vw,43px);font-weight:900;padding:12px 0;border-bottom:1px solid #ffffff30;transition:color .25s,transform .25s;line-height:1.5}
.menu-dialog nav>a>span{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--yellow)}
.menu-dialog nav>a>i{margin-left:auto;font-style:normal}
.menu-dialog nav>a:hover{color:var(--yellow);transform:translateX(5px)}
.menu-character{position:absolute;right:-5%;bottom:-8%;width:45%;pointer-events:none;transform:rotate(12deg)}
.contact-dialog{width:min(610px,calc(100% - 32px));max-height:calc(100svh - 40px);border-radius:4px 38px 4px 4px;background:var(--paper);padding:45px 44px;overscroll-behavior:contain;box-shadow:10px 10px 0 var(--yellow)}
.contact-dialog[open]{animation:panel-in .3s var(--ease)}
.dialog-close{position:absolute;right:16px;top:15px;width:42px;height:42px;border-radius:50%;background:var(--navy);color:white;font-size:26px;line-height:1}
.contact-dialog .eyebrow{font-size:11px;margin-bottom:20px}
.contact-dialog h2{font-size:43px;line-height:1.3}
.dialog-intro{font-size:12px;line-height:1.9;margin:18px 0 26px}
.contact-dialog label{display:block;font-size:13px;font-weight:800;margin:20px 0 8px}
.contact-dialog label span{font-size:10px;font-weight:500;margin-left:10px;border:1px solid;padding:1px 6px}
.contact-dialog input,.contact-dialog select,.contact-dialog textarea{width:100%;display:block;border:1px solid #132d9160;border-radius:3px;color:var(--navy);background:white;padding:12px;font-size:15px;line-height:1.8;resize:vertical}
.form-help{font-size:10px;margin-top:8px}
.draft-button{display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:white;padding:15px 20px;width:100%;font-weight:800;font-size:15px;margin-top:25px;border-radius:3px}
.draft-button svg{width:25px;height:25px}
#draft-result h3{font-size:23px;margin-top:28px}
#draft-result>p{font-size:12px;line-height:1.9;margin:13px 0}
#draft-text{font-size:14px}
.draft-actions{display:flex;gap:10px;margin-top:20px}
.draft-actions button{border:1px solid var(--navy);padding:12px 18px;border-radius:3px;background:var(--yellow);font-size:13px;font-weight:800}
.draft-actions button+button{background:transparent}
/* Motion is progressively enhanced, with a persistent stop control. */
.reveal-ready[data-reveal]{opacity:0;translate:0 28px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.reveal-ready[data-reveal].is-visible{opacity:1;translate:0 0}
.hero-content>*{animation:hero-enter 1s var(--ease) backwards}
.hero-content>*:nth-child(2){animation-delay:.12s}
.hero-content>*:nth-child(3){animation-delay:.24s}
.hero-content>*:nth-child(4){animation-delay:.34s}
.hero-team{animation:hero-enter 1.2s .2s var(--ease) backwards}
@keyframes character-float{0%,100%{transform:translateY(0) rotate(-1deg)}
50%{transform:translateY(-17px) rotate(2deg)}}
@keyframes about-float{0%,100%{translate:0 0}
50%{translate:0 -18px}}
@keyframes star-turn{to{rotate:360deg}}
@keyframes sign-float{0%,100%{translate:0 0}
50%{translate:0 -7px}}
@keyframes scroll-nudge{0%,100%{translate:0 -2px}
50%{translate:0 5px}}
@keyframes marquee-run{to{transform:translateX(-50%)}}
@keyframes glow{0%,100%{opacity:.25;scale:.85}
50%{opacity:.85;scale:1.22}}
@keyframes lab-breathe{from{scale:1}
to{scale:1.025}}
@keyframes hero-enter{from{opacity:0;translate:0 28px}
to{opacity:1;translate:0 0}}
@keyframes panel-in{from{opacity:0;translate:0 10px}
to{opacity:1;translate:0 0}}
html[data-motion=paused]{scroll-behavior:auto}
html[data-motion=paused] *,html[data-motion=paused] *:before,html[data-motion=paused] *:after{animation-play-state:paused!important;transition-duration:0s!important}
html[data-motion=paused] [data-reveal]{opacity:1;translate:0 0}
html[data-motion=paused] .hero-team{transform:none}
html[data-motion=paused] .hero-content>*,html[data-motion=paused] .hero-team{animation:none;opacity:1;translate:0}
html[data-motion=paused] dialog[open]{animation:none;opacity:1;translate:0 0}
@media(min-width:1700px){.hero-content{padding-left:max(var(--gutter),calc((100vw - 1470px)/2));width:55%}
.hero-team{right:calc((100vw - 1660px)/2);left:43%;max-width:1000px}
.hero-first{font-size:45px}
.hero-big{font-size:120px}
.hero-sign{right:30%}}
@media(max-width:1190px){:root{--gutter:48px}
.site-header{gap:18px;padding-inline:22px}
.brand{width:220px}
.desktop-nav{gap:18px;font-size:12px}
.header-contact{gap:12px;padding-left:17px;font-size:12px}
.hero{min-height:800px;height:850px}
.hero-content{width:59%;padding-top:190px}
.hero-first{font-size:32px}
.hero-big{font-size:90px}
.hero-team{left:41%;right:-50px;top:140px;bottom:50px}
.hero-me{width:69%;left:-5%;bottom:18%}
.hero-you{width:70%;right:-10%;bottom:8%}
.hero-eight{width:38%;right:10%;top:-3%}
.hero-compass{width:47%;left:15%;bottom:1%}
.hero-sign{right:26%;top:21%;padding:10px 15px}
.hero-sign b{font-size:15px}
.about-visual{min-height:580px}
.about-eight{top:28%}
.about-orbit{top:29%}
.about-visual .speech{right:0;top:10%}
.services-note{gap:17px}
.services-note p{font-size:13px}
.small-star{width:52px}
.services-top{gap:25px}
.service-mascot{width:165px;top:-130px}
.flow-step{grid-template-columns:160px 1fr 1fr;gap:26px}
.flow-step:nth-of-type(even){padding-left:60px;grid-template-columns:150px 1fr 1fr}
.flow-step h3{font-size:24px}
.faq-layout{gap:45px}
.faq-heading h2{font-size:44px}
.faq-visual{height:330px}
.belief h2{font-size:72px}
.belief-visual{min-height:510px}
.belief-person{top:11%;width:151%;left:-26%}
.belief-visual .speech{right:-7%;bottom:5%}
.contact-button{padding:24px;gap:30px}
.contact-button>span{font-size:22px}
.contact-action{min-width:45%}
.footer-bottom nav{gap:14px}
[data-theme=B] .about-layout{gap:40px}
[data-theme=B] .about-visual{min-height:520px}
[data-theme=B] .about-eight{top:19%}
[data-theme=B] .flow-step,[data-theme=B] .flow-step:nth-of-type(even){grid-template-columns:80px 1fr;padding:28px;gap:20px}
[data-theme=B] .flow-step h3{font-size:24px}
[data-theme=B] .step-number{font-size:59px}}
@media(max-width:980px){:root{--gutter:36px}
.desktop-nav{display:none}
.header-contact{margin-left:auto}
.hero{min-height:850px;height:900px}
.hero-content{width:68%;padding-top:170px}
.hero-big{font-size:91px}
.hero-team{left:37%;right:-40px;top:300px;bottom:25px}
.hero-me{width:66%;left:-1%;bottom:16%}
.hero-you{width:67%;right:-3%}
.hero-eight{width:38%;right:11%;top:-23%}
.hero-compass{left:12%;bottom:-1%;width:46%}
.hero-description{font-size:19px}
.hero-sign{right:6%;top:22%;font-size:14px;z-index:6}
.hero:after{background:linear-gradient(90deg,#132d91eb,transparent 85%)}
.hero-content h1{position:relative;z-index:3}
.hero-corner{display:none}
.about{padding-top:110px}
.about-copy h2{font-size:44px}
.about-copy .lead{font-size:23px}
.about-copy>p:not(.eyebrow):not(.lead){font-size:14px}
.about-visual{min-height:600px}
.about-eight{top:29%;width:130%;left:-14%}
.about-visual .speech{top:8%;font-size:16px;padding:22px}
.about-orbit{top:32%;width:110%}
.about-visual .character-label{bottom:45px}
.services-note{max-width:220px}
.services-note .small-star{display:none}
.services-top h2{font-size:41px}
.services-note p{font-size:13px}
.service-bottom p{font-size:19px}
.example-panel{gap:6%;grid-template-columns:1.1fr 1fr}
.example-copy h3{font-size:31px}
.customer-quote{font-size:13px}
.example-copy>p:not(.customer-quote){font-size:13px}
.cafe-nav{padding:15px}
.cafe-art>span{font-size:19px;left:23px}
.cafe-window{right:15px;width:140px}
.cafe-art{height:225px}
.cafe-bottom{padding:20px}
.cafe-bottom>b{font-size:16px}
.mock-sticker{font-size:13px;padding:12px 17px}
.belief h2{font-size:57px}
.belief-description{font-size:19px}
.belief-visual{min-height:500px}
.belief-person{top:18%}
.belief-orbit{top:18%}
.belief-note h3{font-size:22px}
.belief-note{padding:28px}
.belief-notes{width:100%}
.belief-visual .speech{font-size:15px;bottom:7%}
.flow-step{grid-template-columns:130px 1fr 1fr;gap:20px}
.flow-step:nth-of-type(even){padding-left:45px;grid-template-columns:105px 1fr 1fr}
.step-number{font-size:65px}
.step-description p{font-size:13px}
.flow-step h3{font-size:22px}
.faq-layout{grid-template-columns:.7fr 1.3fr;gap:35px}
.question summary{padding:24px 18px;gap:10px;grid-template-columns:31px 1fr 22px}
.question h3{font-size:14px}
.faq-heading h2{font-size:36px}
.faq-visual .speech{font-size:13px;padding:14px 21px;left:0}
.faq-visual .character-label{bottom:0}
.contact-copy h2{font-size:53px}
.contact-bottom{gap:35px}
.free-label{font-size:17px}
.contact-button{gap:15px;padding:20px}
.contact-button>span{font-size:20px}
.contact-button i{width:52px;height:52px}
.contact-team{height:250px}
.contact-team .character{width:210px}
.contact-team .you{width:245px}
.contact-team .eight{width:195px}
.contact-team .compass{width:260px}
.footer-bottom{flex-wrap:wrap}
.footer-bottom>span{width:100%}
[data-theme=B] .hero-content{padding-top:180px}
[data-theme=B] .hero-lab img{object-position:66% center}
[data-theme=B] .hero-big{font-size:88px}
[data-theme=B] .about-layout{gap:25px}
[data-theme=B] .about-visual{min-height:460px}
[data-theme=B] .about-eight{width:120%;left:-10%;top:22%}
[data-theme=B] .about-visual .speech{top:-55px;font-size:15px;right:0}
[data-theme=B] .about-visual .character-label{font-size:16px;right:10px}
[data-theme=B] .belief-person{width:145%;left:-22%;top:21%}
[data-theme=B] .flow-step,[data-theme=B] .flow-step:nth-of-type(even){padding:28px 24px;grid-template-columns:64px 1fr;gap:15px}
[data-theme=B] .flow-step h3{font-size:23px}
[data-theme=B] .step-number{font-size:51px}
[data-theme=B] .faq-visual{height:270px;width:270px}
[data-theme=B] .faq-visual .character-label{bottom:-65px}}
/* Mobile is composed again: title, four faces, then a distinct reading rhythm. */
@media(max-width:700px){:root{--gutter:24px;--header:80px}
html{scroll-padding-top:94px}
.site-header{padding:14px 16px;gap:12px}
.brand{width:190px;min-height:61px;padding:13px 20px;gap:7px}
.brand img{width:150px}
.brand span{font-size:8px}
.header-contact{display:none}
.menu-toggle{margin-left:auto;width:49px;height:49px}
.site-header.scrolled{padding:10px 16px}
.site-header.scrolled .brand{min-height:51px;padding:9px 0;align-items:flex-start}
.section h2{font-size:37px;line-height:1.45}
.eyebrow{font-size:11px;gap:12px;margin-bottom:22px;letter-spacing:.12em}
.eyebrow>span{width:29px;height:29px;min-width:29px;font-size:10px}
.hero{height:990px;min-height:0;max-height:none}
.hero:after{background:linear-gradient(180deg,#132d91cb,transparent 63%)}
.hero-road{background-position:65% center}
.hero-content{padding:134px 24px 0;width:100%}
.hero-kicker{font-size:11px;gap:10px;margin-bottom:20px;letter-spacing:.035em}
.live-dot{width:6px;height:6px}
.hero-first{font-size:27px;letter-spacing:-.06em;margin-bottom:12px}
.hero-big{font-size:clamp(65px,16vw,106px);line-height:1.18;letter-spacing:-.055em}
.hero-big br{display:none}
.hero-big em{display:block}
.hero-description{font-size:15px;margin:18px 0 0;line-height:1.9;letter-spacing:.05em}
.hero-link{font-size:11px;margin-top:20px;gap:24px;padding-bottom:8px}
.hero-link i{width:31px;height:31px}
.hero-link svg{width:18px;height:18px}
.hero-team{top:480px;bottom:75px;left:0;right:-5px;max-width:560px;margin-inline:auto}
.hero-me{width:68%;left:-10%;bottom:10%;transform:rotate(-8deg)}
.hero-you{width:70%;right:-9%;bottom:3%;transform:rotate(9deg)}
.hero-eight{width:41%;right:14%;top:-15%;transform:rotate(5deg)}
.hero-compass{width:47%;left:17%;bottom:-8%;transform:rotate(-12deg)}
.hero-sign{top:565px;right:auto;left:15px;padding:10px 14px;z-index:3;transform:rotate(-8deg)}
.hero-sign span{font-size:8px}
.hero-sign b{font-size:12px}
.star-one{width:40px;right:2%;top:57%}
.star-two{width:25px;right:62%;bottom:13%}
.scroll-cue{left:24px;bottom:38px;font-size:8px;gap:20px}
.scroll-cue span{font-size:19px}
.hero-orbit{width:150vw;height:150vw;right:-55%;top:32%}
.orbit-two{width:115vw;height:115vw;right:-38%;top:37%}
.cross-ribbon{margin-top:-16px;padding:10px 0;transform:rotate(-3deg) scale(1.04)}
.marquee{font-size:16px;gap:25px}
.marquee b{font-size:22px}
.marquee i{font-size:22px}
.about{padding:91px 0 96px}
.about-layout{display:flex;flex-direction:column;gap:28px;align-items:stretch}
.about-copy h2{font-size:clamp(32px,8.7vw,51px)}
.about-copy .lead{font-size:21px;line-height:1.7;margin:28px 0 20px}
.about-copy>p:not(.eyebrow):not(.lead){font-size:14px;line-height:2.15;margin-bottom:23px}
.desktop-break{display:none}
.about-copy .text-link{font-size:14px;gap:35px;margin-top:0}
.about-visual{width:100%;min-height:0;height:450px;align-self:auto;margin-top:0;max-width:420px;margin-inline:auto}
.about-visual .speech{font-size:16px;top:7%;right:3%;padding:17px 26px}
.about-eight{width:98%;left:-7%;top:23%;max-width:420px}
.about-orbit{top:27%;left:3%;width:86%}
.about-orbit:before{inset:-18px}
.about-orbit:after{font-size:80px;right:-15px;top:-20px}
.about-visual .character-label{bottom:-15px;right:0;font-size:15px}
.character-label small{font-size:8px}
.visual-note{font-size:9px;right:0;top:43%}
.about-track{opacity:.33;inset:25% -300px 0 -200px}
.about-foot{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:65px;padding-top:26px}
.about-foot>span{font-size:38px}
.about-foot>b{font-size:11px;line-height:1.7}
.services{padding:87px 0 65px}
.services:before{height:60px;top:-35px;clip-path:polygon(0 55%,58% 0,100% 55%,100% 100%,0 100%)}
.service-bg-word{top:14px;font-size:20vw}
.services-top{display:block}
.services-top h2{font-size:36px}
.services-note{padding:0;margin-top:25px;max-width:none}
.services-note p{font-size:13px;line-height:2}
.services-note p br:nth-child(2){display:none}
.services-note .small-star{display:block;width:46px;order:2;margin-left:auto}
.slider-toolbar{margin-top:35px;align-items:flex-end;gap:12px}
.slider-toolbar>p{font-size:10px;max-width:170px;font-weight:800}
.slider-controls{gap:8px}
.slide-count{font-size:9px;margin-right:4px;white-space:nowrap}
.slide-count b{font-size:17px}
.circle-button{width:37px;height:37px;flex-shrink:0}
.circle-button svg{width:20px;height:20px}
.service-track{gap:18px;margin-top:20px;padding-bottom:22px}
.service-card{flex-basis:calc(100vw - 82px);max-width:345px;padding:20px 24px 22px;box-shadow:5px 5px 0 var(--navy)}
.service-card h3{font-size:25px}
.service-catch{font-size:11px}
.service-description{font-size:12px;min-height:72px}
.service-card-top>span:first-child{font-size:18px}
.service-object{height:180px;margin-block:12px}
.mini-browser{width:218px}
.service-card-top>span+span{font-size:8px}
.service-link{font-size:11px;margin-top:19px}
.service-bottom{display:block;margin-top:22px}
.service-bottom p{font-size:18px;line-height:1.8}
.service-bottom .text-link{font-size:13px;gap:40px;margin-top:12px}
.service-mascot{width:127px;right:-9px;top:-123px;transform:rotate(8deg)}
.examples{padding:113px 0 87px}
.examples:before{height:45px}
.example-bridge{width:201px;height:51px;right:7%;top:1px;font-size:9px;gap:9px}
.example-bridge svg{width:28px}
.examples-heading{display:block}
.examples-heading h2{font-size:34px}
.example-disclaimer{font-size:10px;line-height:1.8;margin:20px 0 0;max-width:none}
.example-disclaimer br{display:none}
.example-tabs{justify-content:stretch;margin:30px 0 23px;gap:7px}
.example-tabs button{flex:1;padding:12px 11px;font-size:11px;gap:6px;line-height:1.4;justify-content:center}
.example-tabs button span{font-size:14px}
.example-panel{display:flex;flex-direction:column;gap:35px;align-items:stretch}
.example-art{padding:18px 3px 24px;width:calc(100% - 12px);margin-left:0}
.example-art:before{border-radius:25px 5px 25px 5px;inset:2px -3% 1% 5%}
.example-screen{box-shadow:7px 7px 0 var(--navy);border-width:1.5px}
.screen-bar{height:26px;font-size:7px;padding-inline:9px;gap:4px}
.screen-bar i{width:4px;height:4px}
.cafe-nav{padding:14px}
.cafe-nav>b{font-size:10px}
.cafe-nav>span{font-size:6px}
.cafe-art{height:205px}
.cafe-art>span{font-size:17px;top:33px;left:18px}
.cafe-window{width:132px;right:17px;top:17px;height:192px;border-width:6px}
.cafe-plant{font-size:120px;left:48%}
.cafe-cup{width:50px;height:39px;right:41px;bottom:24px;border-top-width:5px}
.cafe-cup:after{width:18px;height:23px;border-width:5px;right:-14px;top:2px}
.cafe-bottom{padding:18px 15px;gap:12px}
.cafe-bottom>b{font-size:16px}
.cafe-bottom>span{font-size:7px}
.cafe-bottom>i{font-size:20px}
.mock-sticker{font-size:12px;right:-13px;bottom:-1px;padding:11px 15px;box-shadow:3px 3px 0 var(--navy);border-width:1.5px}
.example-number{font-size:10px}
.example-copy h3{font-size:33px;line-height:1.45;margin-top:12px}
.customer-quote{font-size:13px}
.example-copy>p:not(.customer-quote){font-size:13px;line-height:2.1}
.example-tags{margin:20px 0 10px}
.example-tags span{font-size:10px}
.example-caption{font-size:43px;text-align:left;transform:translateX(-45px);margin-top:75px}
.schedule{padding:22px 17px}
.schedule-top{margin-bottom:18px}
.schedule-top b{font-size:16px}
.schedule-top span{font-size:6px}
.schedule-days{font-size:9px}
.schedule-grid{height:192px;background:repeating-linear-gradient(to right,transparent 0 calc(20% - 1px),#132d911f calc(20% - 1px) 20%),repeating-linear-gradient(to bottom,transparent 0 47px,#132d911f 47px 48px)}
.event{font-size:8px;padding:7px 5px}
.ev-one,.ev-three{top:10px}
.ev-two{top:58px}
.ev-four{top:106px}
.ev-five{top:154px}
.schedule-bottom{font-size:10px}
.sns-desk{padding:20px 17px}
.sns-desk h3{font-size:16px}
.sns-posts{gap:15px;margin-top:20px}
.sns-posts article{padding:9px}
.sns-posts article>div{height:133px}
.post-flower{font-size:108px}
.post-hand{font-size:27px}
.sns-posts b{font-size:9px}
.sns-posts span{font-size:7px}
.sns-desk>p{font-size:8px;margin-top:25px}
.belief{padding:94px 0 91px}
.belief:before{top:-22px;height:40px}
.belief-topline{top:-20px;padding:8px 0}
.belief-topline .marquee{font-size:15px;gap:25px}
.belief-main{display:block}
.belief-tag{font-size:13px;margin-bottom:18px}
.belief h2{font-size:clamp(37px,10.6vw,66px);line-height:1.55;letter-spacing:-.045em}
.belief-description{font-size:16px;line-height:1.95;margin-top:23px}
.belief-visual{min-height:0;height:420px;width:100%;max-width:420px;margin:0 auto}
.belief-person{width:120%;left:-15%;top:-3%}
.belief-orbit{width:88%;left:6%;top:9%}
.belief-orbit>svg{width:75px;right:0;top:-7%}
.belief-visual .speech{font-size:15px;right:-4%;bottom:-3%;padding:16px 26px}
.belief-notes{margin-top:62px;display:block;width:100%;padding-inline:6px}
.belief-note{width:100%;padding:26px;box-shadow:5px 5px 0 #0003}
.belief-note h3{font-size:25px;margin:6px 0 12px}
.belief-note p{font-size:13px}
.belief-note>span{font-size:10px}
.notes-plus{display:block;text-align:center;font-size:40px;line-height:1;margin:18px 0}
.belief-exit{width:228px;left:calc(50% - 114px);height:58px;bottom:-27px;font-size:21px}
.belief-exit span{font-size:12px}
.flow{padding:96px 0 90px}
.flow-heading{display:block}
.flow-heading h2{font-size:42px}
.flow-heading>p{font-size:13px;margin:24px 0 0}
.flow-steps{margin-top:25px}
.flow-step,.flow-step:nth-of-type(even){grid-template-columns:74px 1fr;padding:35px 0;gap:22px 17px;min-height:0}
.step-number{font-size:51px}
.step-number>span{font-size:18px;margin-top:12px}
.flow-step h3{font-size:25px;line-height:1.55}
.step-description{grid-column:2}
.step-description p{font-size:13px;line-height:2}
.step-description>span{font-size:9px;margin-top:12px;padding:5px 9px}
.flow-route{width:42%;left:-30px;opacity:.8}
.flow-route path{stroke-width:85;stroke-dasharray:80 100}
.flow-stamp{width:115px;height:115px;bottom:-50px;right:7%;border-width:1px;box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--navy)}
.flow-stamp>span{font-size:6px}
.flow-stamp b{font-size:23px;margin-top:5px}
.faq{padding:94px 0 90px}
.faq-layout{display:flex;flex-direction:column;gap:0}
.faq-heading{width:100%;position:relative;padding-bottom:35px}
.faq-heading h2{font-size:39px}
.faq-visual{position:absolute;right:-24px;top:50px;width:175px;height:160px;margin:0;padding:0}
.faq-visual .speech{display:none}
.faq-compass{width:112%;left:1%;top:-14px;transform:rotate(10deg);max-width:none}
.faq-visual .character-label{display:none}
.questions{width:100%;margin-top:25px;position:relative;z-index:3}
.question summary{padding:23px 15px;grid-template-columns:29px 1fr 20px;gap:9px;min-height:91px}
.question h3{font-size:14px;line-height:1.8}
.q-number{font-size:9px}
.plus{width:20px}
.answer{padding:0 20px 25px 18px;gap:13px}
.answer>span{font-size:16px}
.answer p{font-size:12px;line-height:2.1}
.contact{padding:84px 0 0}
.contact:before{height:70px;top:-30px}
.contact-copy h2{font-size:clamp(27px,8.1vw,45px);line-height:1.55;letter-spacing:-.06em}
.contact-copy>p{font-size:16px;margin-top:24px;line-height:1.95}
.contact-bottom{display:block;margin-top:33px}
.free-label{font-size:16px}
.contact-bottom>div>p{font-size:12px;line-height:2.1}
.contact-action{margin-top:29px;max-width:none;min-width:0}
.contact-button{padding:24px 21px;gap:18px;border-radius:3px 34px 3px 3px;box-shadow:5px 5px 0 white}
.contact-button>span{font-size:23px}
.contact-button small{font-size:8px;margin-top:7px}
.contact-button i{width:53px;height:53px}
.contact-button i svg{width:30px;height:30px}
.contact-bottom .prototype-note{font-size:9px;margin-top:15px}
.contact-team{height:172px;margin-top:25px;overflow:visible;clip-path:inset(-30px -24px 0)}
.contact-team .character{width:150px;margin-inline:-21px;position:absolute;bottom:0}
.contact-team .me{width:162px;left:-45px;transform:rotate(-10deg) translateY(33%)}
.contact-team .you{width:171px;left:57px;transform:rotate(8deg) translateY(33%)}
.contact-team .eight{width:139px;right:46px;transform:rotate(-10deg) translateY(25%)}
.contact-team .compass{width:165px;right:-42px;transform:rotate(11deg) translateY(16%)}
.site-footer{padding:44px 0 96px}
.footer-top>p{font-size:14px;line-height:1.9}
.back-top{width:51px;height:51px;flex-shrink:0}
.back-top svg{width:25px;height:25px}
.footer-logo{margin:40px auto 30px;width:calc(100% - 40px)}
.footer-bottom{display:block;padding-top:24px;font-size:11px}
.footer-bottom>span{font-size:11px}
.footer-bottom nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 15px;margin:24px 0}
.footer-bottom small{font-size:9px}
.preview-dock{bottom:9px;left:9px;padding:4px;gap:0;font-size:9px;border-radius:25px}
.preview-dock>span{display:none}
.preview-dock>a{padding:5px 8px;min-width:28px}
.motion-toggle{font-size:9px;padding:6px 7px;min-height:28px}
.floating-contact{bottom:10px;right:10px;padding:10px 13px;gap:12px;font-size:11px;box-shadow:2px 2px 0 var(--navy)}
.floating-contact span{font-size:19px}
.menu-dialog{padding:20px 24px 50px}
.menu-head img{width:162px;padding:14px}
.menu-head button{width:44px;height:44px;font-size:28px}
.menu-dialog>p{font-size:12px;margin:29px 0 20px}
.menu-dialog nav{width:100%}
.menu-dialog nav>a{font-size:24px;padding:18px 0;gap:15px}
.menu-dialog nav>a>span{font-size:9px}
.menu-character{display:none}
.contact-dialog{padding:35px 25px;width:calc(100% - 26px);max-height:calc(100svh - 35px);border-radius:3px 25px 3px 3px;box-shadow:5px 5px 0 var(--yellow)}
.dialog-close{width:34px;height:34px;right:12px;top:12px;font-size:23px}
.contact-dialog .eyebrow{font-size:9px}
.contact-dialog h2{font-size:35px}
.dialog-intro{font-size:11px;margin:18px 0}
.contact-dialog label{font-size:12px}
.contact-dialog input,.contact-dialog select,.contact-dialog textarea{font-size:16px;padding:10px}
.draft-button{font-size:14px;padding:14px 16px}
.draft-actions{gap:8px}
.draft-actions button{padding:11px;font-size:12px}
#draft-result h3{font-size:20px}
#draft-text{font-size:13px}
[data-theme=B] .hero{height:1000px}
[data-theme=B] .hero-content{padding-top:133px}
[data-theme=B] .hero:after{background:linear-gradient(180deg,#132d91f0 0%,#132d91f0 24%,#132d9180 49%,transparent 64%)}
[data-theme=B] .hero-lab{inset:0 -80% 0 -82%}
[data-theme=B] .hero-lab img{object-fit:cover;object-position:62% center;min-width:100%}
[data-theme=B] .hero-big{font-size:clamp(65px,16vw,106px)}
[data-theme=B] .hero-sign{top:auto;bottom:100px;left:auto;right:17px;border-radius:50%;padding:15px 19px}
[data-theme=B] .lab-light{top:53%;right:34%;width:40%}
[data-theme=B] .lab-ring{width:104%;right:-30%;top:40%;opacity:.55}
[data-theme=B] .cross-ribbon{transform:rotate(2deg) scale(1.04);margin-top:-17px}
[data-theme=B] .about{padding-bottom:105px}
[data-theme=B] .about-layout{display:flex;gap:25px}
[data-theme=B] .about-visual{min-height:0;height:438px;width:calc(100% - 20px);max-width:360px;margin:60px 7px 0;align-self:center;box-shadow:9px 9px 0 var(--paper),10px 10px 0 1px var(--navy)}
[data-theme=B] .about-eight{top:9%;width:107%;left:-4%}
[data-theme=B] .about-visual .speech{right:4%;top:-55px;font-size:15px}
[data-theme=B] .about-visual .character-label{font-size:15px;bottom:17px;right:17px}
[data-theme=B] .about-orbit:after{font-size:86px;right:-22px;top:25%}
[data-theme=B] .about-foot{margin-top:65px}
[data-theme=B] .services{padding-top:86px;border-radius:35px 35px 0 0}
[data-theme=B] .service-mascot{width:128px;right:-11px;top:-126px}
[data-theme=B] .service-card{box-shadow:5px 5px 0 var(--blue)}
[data-theme=B] .examples{padding-top:120px}
[data-theme=B] .examples:before{height:42px;clip-path:polygon(0 0,100% 0,100% 100%,56% 100%,50% 0,44% 100%,0 100%)}
[data-theme=B] .example-bridge{top:4px;right:5%}
[data-theme=B] .example-panel{display:flex}
[data-theme=B] .example-art{order:0}
[data-theme=B] .example-tabs{justify-content:stretch}
[data-theme=B] .belief{padding-top:95px}
[data-theme=B] .belief:before{top:-33px;height:60px}
[data-theme=B] .belief-person{top:9%;left:-11%;width:115%}
[data-theme=B] .belief-orbit{width:93%;top:12%;left:3%}
[data-theme=B] .belief-visual{height:365px}
[data-theme=B] .belief-visual .speech{bottom:-9%}
[data-theme=B] .belief-notes{margin-top:75px}
[data-theme=B] .belief-note{padding:24px}
[data-theme=B] .flow{padding-bottom:105px}
[data-theme=B] .flow-steps{display:flex;flex-direction:column;gap:35px;margin-top:52px;padding-inline:5px}
[data-theme=B] .flow-step,[data-theme=B] .flow-step:nth-of-type(even){padding:26px 23px;grid-template-columns:68px 1fr;gap:21px 15px;min-height:0;box-shadow:5px 5px 0 var(--navy)}
[data-theme=B] .step-number{font-size:55px}
[data-theme=B] .step-number>span{font-size:18px}
[data-theme=B] .flow-step h3{font-size:24px}
[data-theme=B] .step-description{grid-column:1/-1}
[data-theme=B] .step-description p{font-size:13px}
[data-theme=B] .faq-visual{height:157px;width:157px;right:-17px;top:48px}
[data-theme=B] .faq-compass{top:10px;left:-10%;width:125%}
[data-theme=B] .questions{margin-top:35px}
[data-theme=B] .question summary{padding-inline:8px}
[data-theme=B] .contact{padding-top:84px}
[data-theme=B] .contact:before{top:-27px;left:7%;width:110px;height:54px}
[data-theme=B] .contact-orbit{width:150%;right:-75%;top:10%}
[data-theme=B] .contact-button{padding:24px 21px;border-radius:50px}}
@media(max-width:370px){:root{--gutter:20px}
.brand{width:179px}
.hero-content{padding-inline:20px}
.hero-kicker{font-size:10px}
.hero-first{font-size:24px}
.hero-big,[data-theme=B] .hero-big{font-size:61px}
.hero{height:924px}
.hero-team{top:477px;bottom:58px}
.hero-me{bottom:15%}
.hero-eight{top:-11%;right:14%}
.hero-sign{top:535px;font-size:11px;padding:8px 12px}
.hero-sign b{font-size:11px}
.hero-description{font-size:14px}
.hero-link{margin-top:15px}
.about-copy h2{font-size:30px}
.about-visual{height:386px}
.about-visual .speech{font-size:14px;top:4%}
.about-eight{top:22%}
.about-visual .character-label{bottom:-7px}
.about-foot>span{font-size:32px}
.services-top h2{font-size:31px}
.slider-toolbar>p{font-size:9px;max-width:120px}
.slide-count{display:none}
.service-card{padding:19px;flex-basis:calc(100vw - 64px)}
.service-card h3{font-size:23px}
.service-object{height:175px}
.mini-browser{width:206px}
.service-catch{font-size:10px}
.service-description{font-size:12px}
.examples-heading h2{font-size:29px}
.example-tabs button{font-size:10px;padding:11px 9px}
.example-tabs button span{display:none}
.cafe-art>span{font-size:15px}
.cafe-window{right:11px;width:123px}
.cafe-bottom>b{font-size:14px}
.belief h2{font-size:35px}
.belief-visual{height:357px}
.belief-visual .speech{font-size:13px}
.flow-step,.flow-step:nth-of-type(even){grid-template-columns:65px 1fr;gap:18px 14px}
.flow-step h3{font-size:22px}
.step-number{font-size:47px}
.faq-heading h2{font-size:34px}
.faq-visual{width:149px;height:137px;right:-21px;top:59px}
.question summary{padding-inline:12px;grid-template-columns:25px 1fr 20px;gap:7px}
.question h3{font-size:13px}
.contact-copy h2{font-size:26px}
.contact-button>span{font-size:20px}
.contact-button i{width:46px;height:46px}
.contact-team .you{left:40px}
.contact-team .eight{right:29px}
.footer-top>p{font-size:12px}
.preview-dock>a{padding:5px 7px}
.motion-toggle{font-size:8px;padding-inline:6px}
.floating-contact{font-size:10px;gap:8px;padding:10px 12px}
.menu-dialog nav>a{font-size:22px}
[data-theme=B] .hero{height:932px}
[data-theme=B] .about-visual{height:380px}
[data-theme=B] .about-eight{top:13%}
[data-theme=B] .belief-visual{height:335px}
[data-theme=B] .flow-step,[data-theme=B] .flow-step:nth-of-type(even){padding:25px 20px;grid-template-columns:60px 1fr;gap:17px 10px}
[data-theme=B] .flow-step h3{font-size:21px}
[data-theme=B] .step-number{font-size:49px}
[data-theme=B] .faq-visual{width:139px;height:139px;top:52px;right:-20px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=playing]){scroll-behavior:auto}
html:not([data-motion=playing]) *,html:not([data-motion=playing]) *:before,html:not([data-motion=playing]) *:after{animation:none!important;transition:none!important}
html:not([data-motion=playing]) .reveal-ready[data-reveal]{opacity:1;translate:0 0}
html:not([data-motion=playing]) .hero-team{transform:none!important}}
@media print{.site-header,.preview-dock,.floating-contact,.menu-dialog,.contact-dialog,.service-mascot{display:none!important}
.hero{height:700px;min-height:0}
.service-track{overflow:visible;flex-wrap:wrap;padding:0 30px}
.service-card{flex-basis:30%;box-shadow:none;margin:10px}
.section{break-inside:avoid}
.reveal-ready[data-reveal]{opacity:1;transform:none}
.example-panel[hidden]{display:grid!important}
.hero-content>*{animation:none!important}
.section-inner{width:90%}}
/* Refinements from the first complete desktop and mobile walkthrough. */
.hero-lab picture{display:block;height:100%}
.star-one{right:42%;top:14%;width:45px}
.service-mascot{top:-100px}
.belief{z-index:3}
.flow-route{width:245px;left:0}
.faq-visual .character-label{display:none}
.example-tabs button{white-space:nowrap}
[data-theme=B] .service-mascot{top:-111px;width:178px}
@media(max-width:700px){
 .hero{height:900px}
.hero-link{display:none}
.hero-description{font-size:14px}
.hero-team{top:430px;bottom:75px}
.hero-me{bottom:15%}
.hero-you{bottom:5%}
.hero-eight{top:-3%;right:5%;width:37%}
.hero-compass{bottom:-3%;width:49%}
.hero-sign{display:none}
.star-one{right:4%;top:80%;width:28px}
.star-two{right:auto;left:4%;bottom:16%}
.services-note p br:nth-child(2){display:block}
.services-note p{flex:1}
.service-mascot{width:116px;top:-97px}
.example-tabs button{font-size:10px;padding:13px 10px;gap:4px}
.example-tabs button span{font-size:13px}
.flow-route{left:5px;width:77px}
.flow-route path{stroke-width:13;stroke-dasharray:18 24}
[data-theme=B] .hero{height:900px}
[data-theme=B] .hero-lab{inset:auto -3.5% 0}
[data-theme=B] .hero-lab picture{height:auto}
[data-theme=B] .hero-lab img{width:100%;height:auto;min-width:0;object-fit:contain;object-position:center}
[data-theme=B] .hero:after{background:linear-gradient(180deg,#132d91 0%,#132d91 30%,#132d91a0 40%,transparent 52%)}
[data-theme=B] .lab-light{right:32%;top:73%;width:43%}
[data-theme=B] .lab-ring{display:none}
[data-theme=B] .service-mascot{width:118px;top:-99px}
}
@media(max-width:370px){
 .hero,[data-theme=B] .hero{height:860px}
.hero-team{top:419px;bottom:59px}
.hero-me{bottom:15%}
.hero-eight{top:-3%;right:3%;width:38%}
.hero-compass{bottom:-1%}
.hero-description{font-size:13px}
.example-tabs button{font-size:10px;padding-inline:9px}
}
@media(max-width:700px){[data-theme=A] .hero:after{background:linear-gradient(180deg,#132d91 0%,#132d91eb 40%,#132d91d0 47%,transparent 62%)}}
@media(max-width:700px){[data-theme=B] .flow-step,[data-theme=B] .flow-step:nth-of-type(even){grid-template-columns:54px 1fr;gap:20px 14px}
[data-theme=B] .step-number{font-size:48px}
[data-theme=B] .flow-step h3{font-size:21px;letter-spacing:-.055em}}
@media(max-width:370px){[data-theme=B] .flow-step,[data-theme=B] .flow-step:nth-of-type(even){grid-template-columns:1fr;gap:20px}
[data-theme=B] .step-number{display:flex;align-items:baseline;gap:20px}
[data-theme=B] .step-number>span{margin:0}
[data-theme=B] .flow-step h3{font-size:24px}}
[data-theme=A] .faq .eyebrow{color:var(--ink)}