@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');
:root{color-scheme:dark;--bg:#090a0a;--fg:#dededb;--muted:#939693}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}#scene{position:fixed;inset:0;width:100%;height:100%;z-index:-1}.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{position:fixed;z-index:10;top:0;left:0;width:100%;padding:32px 3.2%;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#090a0aeb,transparent)}.brand{font-size:31px;font-weight:600;letter-spacing:-1.5px;display:flex;align-items:center;gap:5px}.symbol{font-size:42px;line-height:1;font-weight:400}.by{font-size:8px;letter-spacing:1px;writing-mode:vertical-rl;margin-left:5px}nav{display:flex;gap:10px;align-items:center}nav a,nav button{border:1px solid #727674;border-radius:30px;padding:9px 21px;font-size:12px;background:transparent;color:var(--fg);cursor:pointer}.talk{background:#e4e4e1;color:#121313;border-color:#e4e4e1}nav button span{margin-left:12px}#navigation{position:fixed;z-index:9;inset:0;background:#0b0d0df5;padding:160px 8%;}#navigation:not([hidden]){display:flex;flex-direction:column;gap:30px}#navigation>a{font-size:clamp(35px,7vw,100px);letter-spacing:-3px}#navigation small{margin-top:50px;color:#999}.hero{min-height:100svh;position:relative;padding:170px 3.2% 40px;display:flex;flex-direction:column;justify-content:space-between}.hero-copy{max-width:82%}.eyebrow{font-size:10px;letter-spacing:2px;color:#9caaa5;margin:0 0 30px}h1{font-size:clamp(45px,5.5vw,92px);line-height:1.33;font-weight:500;letter-spacing:-.065em;margin:0}h1 span{color:#e8e8e2}.hero-links{display:flex;gap:30px;margin-top:38px;align-items:center}.hero-links a{font-size:12px;border-bottom:1px solid #9ca09d;min-width:250px;padding:0 0 12px;display:flex;justify-content:space-between}.service{font-size:11px;color:#959b97;letter-spacing:1px}.hero-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:end;margin-top:80px}.scroll{font-family:monospace;font-size:10px;letter-spacing:.5px;display:flex;align-items:center;gap:15px}.scroll span{border:1px solid #656e67;border-radius:50%;width:25px;height:25px;text-align:center;line-height:23px}.object-note{font:10px/1.6 monospace;text-align:center;color:#7c8982}.intro{justify-self:end;font-size:13px;line-height:1.9;margin:0}.index{position:absolute;right:3.2%;top:50%;font:9px monospace;writing-mode:vertical-rl;color:#67716b}.concept{padding:170px 3.2% 0;position:relative;display:grid;grid-template-columns:9% 1fr;gap:0;min-height:130svh}.section-label{font:11px monospace;margin:20px 0 0;color:#9ba49f}.concept-main{min-width:0}h2{font-size:clamp(32px,5.7vw,95px);font-weight:500;line-height:1.45;letter-spacing:-.06em;margin:0 0 100px}h2 .char{color:#454b47;transition:color .3s}h2 .char.lit{color:#dededb}.concept-details{border-top:1px solid #323a35;padding-top:45px;display:grid;grid-template-columns:1fr 1fr;gap:10%;}.english{font:12px/1.5 monospace;margin:0}.concept-details>div{max-width:460px;justify-self:end}.concept-details>div p{font-size:14px;line-height:2.1;color:#a4ada7;margin:0 0 22px}footer{display:flex;align-items:center;justify-content:space-between;padding:100px 0 30px;font:9px monospace;color:#8b968f}footer .brand{font-size:24px}.mobile{display:none}a:hover{color:#fff}nav a:hover{color:#111;background:#fff}a:focus-visible,button:focus-visible{outline:2px solid #a2c8b5;outline-offset:6px}@media(min-width:1600px){.hero{padding-top:18vh}h1{font-size:6vw}}@media(max-width:700px){header{padding:22px 6%}.brand{font-size:25px}.symbol{font-size:32px}.by{font-size:6px}nav a{display:none}nav button{padding:8px 15px;font-size:10px}.hero{padding:150px 6% 30px;min-height:100svh}.hero-copy{max-width:100%}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:25px}h1{font-size:clamp(36px,9.7vw,64px);line-height:1.5;letter-spacing:-.065em}.mobile{display:block}.hero-links{margin-top:28px;display:block}.hero-links a{max-width:240px;min-width:0;font-size:11px}.service{display:block;margin-top:16px;font-size:10px}.hero-bottom{grid-template-columns:1fr 1fr;gap:20px;margin-top:100px}.object-note{display:none}.intro{font-size:9px;line-height:1.9}.scroll{font-size:7px;gap:8px}.index{right:5%;font-size:8px}.concept{padding:130px 6% 0;display:block;min-height:0}.section-label{margin:0 0 42px;font-size:10px}h2{font-size:7.7vw;line-height:1.75;letter-spacing:-.065em;margin-bottom:60px}.concept-details{grid-template-columns:1fr;gap:35px;padding-top:30px}.english{font-size:10px}.concept-details>div p{font-size:13px;line-height:2.1}footer{padding-top:60px;flex-wrap:wrap;gap:25px}footer .brand{font-size:22px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}h2 .char{transition:none}}

/* Japanese typography: quieter strokes, natural spacing, clear hierarchy. */
body{font-weight:400;font-synthesis:none}
h1,h2{font-weight:400;font-feature-settings:"palt" 1;line-break:strict;word-break:normal;overflow-wrap:normal}
h1{letter-spacing:-.035em;line-height:1.38}
h2{letter-spacing:-.035em;line-height:1.5}
.hero-links a,.service,.intro,.concept-details>div p{font-feature-settings:"palt" 1;letter-spacing:.035em}
.intro{font-size:13px;line-height:2}
.concept-details>div p{font-size:14px;line-height:2.15}
.brand,nav,.eyebrow,.object-note,.scroll,.section-label,.english,.index,footer{font-family:Arial,sans-serif}
@media(max-width:700px){h1{font-size:clamp(35px,9.3vw,62px);letter-spacing:-.04em;line-height:1.55}h2{font-size:7.55vw;letter-spacing:-.035em;line-height:1.8}.intro{font-size:10px;line-height:1.95}.concept-details>div p{font-size:13px;line-height:2.15}}

/* Reference typography: Goodpatch's declared families. Ryo requires a licensed Adobe Fonts project. */
:root{--font-en:'Google Sans Flex',Arial,sans-serif;--font-ja:ryo-gothic-plusn,'Noto Sans JP','Hiragino Sans',sans-serif}
body{font-family:var(--font-ja)}
.brand,nav,.eyebrow,.object-note,.scroll,.section-label,.english,.index,footer{font-family:var(--font-en)}
h1,h2{font-family:var(--font-en);font-weight:500;font-feature-settings:normal;letter-spacing:-.055em}
.hero-copy{max-width:95%}h1{font-size:clamp(56px,7.7vw,140px);line-height:1.07}
.hero-jp{font-family:var(--font-ja);font-size:clamp(16px,1.6vw,26px);font-weight:700;line-height:1.7;letter-spacing:.015em;margin:30px 0 0}
h2{font-size:clamp(48px,6.3vw,110px);line-height:1.13;margin-bottom:35px}
.concept-jp{font-family:var(--font-ja);font-size:clamp(18px,2vw,30px);line-height:1.8;font-weight:700;letter-spacing:.015em;margin:0 0 75px}
@media(max-width:700px){h1{font-size:clamp(40px,10.8vw,72px);line-height:1.12;letter-spacing:-.055em}.hero-jp{font-size:16px;line-height:1.9;max-width:290px;margin-top:25px}h2{font-size:10vw;line-height:1.24;letter-spacing:-.055em;margin-bottom:28px}.concept-jp{font-size:17px;line-height:1.9;margin-bottom:45px}}

/* TRIONN headline family and regular weight. */
:root{--font-en:'Familjen Grotesk',Arial,sans-serif}
h1,h2{font-family:var(--font-en);font-weight:400;letter-spacing:-.05em}
h1{font-size:clamp(62px,6.7vw,130px);line-height:1.02}
@media(max-width:700px){h1{font-size:clamp(43px,11.4vw,78px);line-height:1.06;letter-spacing:-.05em}h2{font-weight:400;letter-spacing:-.05em}}

/* Explicit foreground and glyph fill: readable on the dark WebGL background. */
:root{--fg:#c7c7c7}
body{color:#c7c7c7}
.hero h1,.hero h1 span,.hero-jp,.concept-jp{color:#c7c7c7;-webkit-text-fill-color:#c7c7c7;opacity:1;mix-blend-mode:normal}
#statement{color:#c7c7c7;-webkit-text-fill-color:#c7c7c7;opacity:1;mix-blend-mode:normal}
#statement .char{color:#8b8b8b;-webkit-text-fill-color:#8b8b8b;opacity:1}
#statement .char.lit{color:#c7c7c7;-webkit-text-fill-color:#c7c7c7}
.hero .intro,.hero-links,.hero .service,.section-label,.concept-details,.concept-details>div p{color:#b5b5b5;-webkit-text-fill-color:currentColor}
main{position:relative;z-index:1}

/* Only the final words turn over, with staggered falling letters. */
.headline-line{display:block;white-space:nowrap}
.word-slot{display:inline-grid;vertical-align:bottom;position:relative;isolation:isolate;perspective:700px;white-space:nowrap}
.word-width,.word-layer{grid-area:1/1;white-space:nowrap}
.hero h1 .word-width{visibility:hidden;pointer-events:none}
.word-layer{display:block;justify-self:start}
.word-letter{display:inline-block;will-change:transform,opacity,filter;transform-origin:50% 80%}
.word-out .word-letter{animation:letter-out .58s cubic-bezier(.55,.02,.8,.45) both;animation-delay:var(--delay)}
.word-in .word-letter{animation:letter-in .78s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--delay) + 120ms)}
@keyframes letter-out{0%{transform:translate3d(0,0,0) rotateX(0);opacity:1;filter:blur(0)}100%{transform:translate3d(var(--drift),.42em,0) rotateX(-65deg) rotate(var(--tilt));opacity:0;filter:blur(5px)}}
@keyframes letter-in{0%{transform:translate3d(var(--drift),-.4em,0) rotateX(60deg) rotate(var(--tilt));opacity:0;filter:blur(5px)}100%{transform:translate3d(0,0,0) rotateX(0) rotate(0);opacity:1;filter:blur(0)}}
@media(max-width:700px){.hero h1{font-size:clamp(30px,7.7vw,54px);line-height:1.18;letter-spacing:-.05em}}
@media(prefers-reduced-motion:reduce){.word-letter{animation:none!important;will-change:auto}}

.consultation-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:60px;min-width:250px;padding:18px 24px;border:1px solid #c7c7c7;border-radius:3px;background:#c7c7c7;color:#101111;-webkit-text-fill-color:#101111;font-family:var(--font-ja);font-size:14px;font-weight:500;cursor:pointer;transition:background .25s,color .25s}
.consultation-cta:hover{background:#e4e4e4}
.consultation-cta:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(max-width:700px){.consultation-cta{min-width:220px;padding:16px 21px;font-size:13px}}

/* Reference replacement uses blur only; eliminate the earlier falling-letter motion. */
.word-slot{display:inline-block;perspective:none;min-width:0}
.word-letter{animation:none!important;transform:none;transform-origin:center;will-change:opacity,filter}

/* Match the reference's upper-left headline anchor after removing the eyebrow. */
.hero{padding-top:clamp(130px,16vh,220px);padding-left:2.5%;padding-right:2.5%}
.hero-copy{max-width:95%}
@media(min-width:1600px){.hero{padding-top:16vh}}
@media(max-width:700px){.hero{padding-top:clamp(125px,18svh,180px);padding-left:6%;padding-right:6%}}

/* Explicit canvas/content layers keep physical material behind readable text. */
:root{--bg:#0c0c0c}body{background:#0c0c0c;isolation:isolate}#scene{z-index:0;pointer-events:none}.grain{z-index:2}main{z-index:1}header{z-index:10}#navigation{z-index:9}

#electric-field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}main{z-index:2}.grain{z-index:3}

/* TRIONN-style word-shift CTA: outline-free, two swapping arrows and underlines. */
.hero .consultation-cta{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:0;width:252px;min-width:0;min-height:40px;padding:0;border:0;border-radius:0;background:transparent;color:#c7c7c7;-webkit-text-fill-color:#c7c7c7;overflow:hidden;font-size:14px;font-weight:400;line-height:1.5;text-align:left;transition:opacity .3s}
.hero .consultation-cta:hover{background:transparent;color:#c7c7c7;opacity:.95}
.cta-word{position:relative;display:inline-flex;white-space:nowrap;letter-spacing:0;padding-right:1px}
.cta-char{display:inline-block;will-change:transform;white-space:pre}
.cta-arrow{position:absolute;top:50%;width:40px;height:40px;display:flex;align-items:center;pointer-events:none;margin:0!important;will-change:transform,opacity}
.cta-arrow-right{right:0;justify-content:flex-end;transform:translate(0,-50%);opacity:1}
.cta-arrow-left{left:0;justify-content:flex-start;transform:translate(-28px,-50%);opacity:0}
.cta-arrow svg{display:block;flex:none}
.cta-underline{position:absolute;bottom:0;left:0;right:0;height:1px;background:#c7c7c7;pointer-events:none;will-change:transform}
.cta-underline-right{transform:scaleX(1);transform-origin:right center}
.cta-underline-left{transform:scaleX(0);transform-origin:left center}
.hero .consultation-cta:focus-visible{outline:1px solid #c7c7c7;outline-offset:6px}
@media(max-width:700px){.hero .consultation-cta{width:252px;max-width:100%;min-height:44px;padding:0;font-size:13px}}
@media(prefers-reduced-motion:reduce){.cta-char,.cta-arrow,.cta-underline{will-change:auto}}

/* Reference composition: compact upper-left headline, quieter Japanese copy. */
.hero{padding-top:clamp(120px,12vh,180px)}
.hero h1{font-size:clamp(58px,5.6vw,116px);line-height:1.02;letter-spacing:-.05em}
.hero-jp{font-size:clamp(14px,1.15vw,19px);font-weight:500;margin-top:24px;line-height:1.8;letter-spacing:.015em}
.hero-links{margin-top:28px}
@media(min-width:1600px){.hero{padding-top:12vh}}
@media(max-width:700px){.hero{padding-top:clamp(125px,17svh,160px)}.hero h1{font-size:clamp(30px,7.7vw,54px);line-height:1.18}.hero-jp{font-size:14px;max-width:290px;margin-top:22px}.hero-links{margin-top:24px}.hero-bottom{margin-top:180px}}

/* 02: broad Japanese statement and sequential scroll colour, based on reference composition. */
.concept{grid-template-columns:8.5% minmax(0,1fr);padding:150px 3.2% 0}
.concept .section-label{margin-top:12px;white-space:nowrap;font-family:var(--font-en);font-size:11px}
.concept-statement{max-width:100%;margin:0 0 90px;font-family:var(--font-ja);font-size:clamp(28px,2.8vw,52px);font-weight:400;line-height:1.75;letter-spacing:.025em;line-break:strict;overflow-wrap:anywhere;font-feature-settings:"palt" 1}
.concept-statement p{margin:0 0 .65em}
.concept-statement p:first-child{text-indent:2em}
.concept-statement p:last-child{margin-bottom:0}
.concept-statement .reveal-char{color:#373737;-webkit-text-fill-color:currentColor;transition:none}
.concept-details{grid-template-columns:1fr 1fr;gap:10%;align-items:start}
.concept-summary{justify-self:end;max-width:460px;margin:0;font-family:var(--font-ja);font-size:14px;font-weight:400;line-height:2;letter-spacing:.035em}
@media(max-width:900px) and (min-width:701px){.concept{grid-template-columns:10% minmax(0,1fr)}.concept .section-label{font-size:9px}.concept-statement{font-size:27px}}
@media(max-width:700px){.concept{display:block;padding:110px 6% 0}.concept .section-label{margin:0 0 32px;font-size:10px}.concept-statement{font-size:clamp(22px,5.6vw,32px);line-height:1.85;letter-spacing:.015em;margin-bottom:52px}.concept-statement p{margin-bottom:.9em}.concept-statement p:first-child{text-indent:1em}.concept-details{grid-template-columns:1fr;gap:28px}.concept-summary{justify-self:start;font-size:13px}}
@media(prefers-reduced-motion:reduce){.concept-statement .reveal-char{color:#d8d8d8}}