
*{box-sizing:border-box}body{margin:0;background:#fff;color:#062c4a;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{cursor:default}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-feature-settings:"palt";font-weight:800}p{font-size:17px;line-height:2}.wrap{width:calc(100% - 240px);max-width:1120px;margin:auto}.section{padding:112px 0}.eyebrow{font-family:Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;line-height:1.4;margin-bottom:32px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;border:0;color:white;background:#d60026;font-size:16px;font-weight:700;padding:18px 26px;min-height:56px;text-decoration:none}.arrow{font-size:22px;line-height:1}.link{display:inline-flex;gap:28px;align-items:center;padding-bottom:8px;border-bottom:1px solid currentColor;font-size:16px;font-weight:700;line-height:1.4}.topbar{height:104px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Arial,sans-serif;letter-spacing:-.7px;font-size:27px;font-weight:800}.navigation{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:700}.navigation .button{font-size:14px;min-height:48px;padding:14px 20px;gap:18px}.hero{padding:62px 0 112px;overflow:hidden}.hero h1{font-size:100px;line-height:1.4;letter-spacing:-.065em;font-weight:900}.hero-line{display:block;width:fit-content;position:relative;isolation:isolate}.hero-line::before{content:"";position:absolute;z-index:-1;left:-120px;right:-40px;top:9px;bottom:2px;background-color:#00d2e9;background-image:radial-gradient(circle,rgba(0,74,109,.22) 1.1px,transparent 1.2px);background-size:5px 5px}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:58px}.hero-bottom .intro{grid-column:2}.intro p{font-size:18px;line-height:1.85;font-weight:600}.intro .button{margin-top:28px}.vision{border-top:1px solid #e2e8ec}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.vision h2{font-size:43px;line-height:1.6;letter-spacing:-.05em}.vision p+p{margin-top:24px;font-weight:700}.services{background:#eafbfe}.services .eyebrow{margin-bottom:24px}.service-name{font-size:18px;font-weight:700;margin-bottom:12px}.services h2{font-size:43px;line-height:1.55;letter-spacing:-.04em}.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:54px}.flow article{min-width:0}.flow h3{display:flex;align-items:baseline;gap:12px;font-size:20px;line-height:1.55;white-space:nowrap}.step{color:#247083;font-size:15px;font-family:Arial,sans-serif;font-weight:600}.flow p{margin:16px 0 0;padding-left:29px;font-size:16px;line-height:1.9}.services .button{margin-top:48px}.voices h2,.journal h2{font-size:36px;letter-spacing:-.025em;line-height:1.5}.voices .eyebrow{margin-bottom:16px}.voice-list{margin-top:48px}.voice{display:grid;grid-template-columns:320px minmax(0,1fr);gap:80px;padding:42px 0}.voice:first-child{padding-top:0}.voice:last-child{padding-bottom:0;border-top:1px solid #d4dfe7}.person strong{display:block;font-size:18px;line-height:1.6}.person p{font-size:15px;margin-top:8px}.quote blockquote{font-size:25px;font-weight:700;line-height:1.8;margin:0;font-feature-settings:"palt"}.quote .link{margin-top:24px;font-size:14px}.greeting{border-top:1px solid #e2e8ec}.greeting .eyebrow{margin-bottom:40px}.greeting-grid{display:grid;grid-template-columns:390px minmax(0,1fr);gap:104px;align-items:center}.portrait{position:relative;margin:0}.portrait img{display:block;width:100%;height:446px;object-fit:cover;object-position:53% center}.greeting h2{font-size:44px;line-height:1.6;letter-spacing:-.04em}.name{font-size:22px;font-weight:700;margin-top:34px;line-height:1.6}.greeting-copy p{margin-top:18px}.greeting .link{margin-top:28px}.values{background:#062c4a;color:#fff;position:relative;overflow:hidden}.values::after{content:"";position:absolute;right:-40px;bottom:0;width:230px;height:100%;background-image:radial-gradient(circle,#1c5268 1px,transparent 1.2px);background-size:6px 6px;pointer-events:none}.values .wrap{position:relative;z-index:1}.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}.values .eyebrow{color:#a7e2eb;margin-bottom:40px}.values h3{font-size:23px;line-height:1.5;white-space:nowrap}.values p{font-size:16px;line-height:1.95;margin-top:18px}.journal-heading{display:flex;align-items:end;justify-content:space-between;gap:48px}.journal .eyebrow{margin-bottom:16px}.journal-heading p{font-size:16px;margin-top:18px}.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:46px}.tone-thumb{height:154px;position:relative;overflow:hidden;background:#c8f4fa}.tone-thumb::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#00bed8 1.3px,transparent 1.5px);background-size:6px 6px}.tone-thumb.one::after{content:"";position:absolute;left:0;bottom:0;width:70%;height:54%;background:#00d2e9;clip-path:polygon(0 50%,100% 0,100% 100%,0 100%)}.tone-thumb.two{background:#effcfd}.tone-thumb.two::before{inset:-50%;transform:rotate(-20deg);background:repeating-linear-gradient(90deg,transparent 0 5px,#77dfe9 5px 6px)}.tone-thumb.three::after{content:"";position:absolute;inset:28px -20px;background:#00d2e9;transform:rotate(-14deg)}.journal-grid h3{font-size:20px;line-height:1.6;margin-top:20px;max-width:300px}.journal-grid time{display:block;font-size:13px;letter-spacing:.035em;margin-top:12px;color:#4c687b}.contact{background:#eafbfe}.contact-grid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:96px}.contact .eyebrow{margin-bottom:28px}.contact h2{font-size:52px;line-height:1.5;letter-spacing:-.035em}.contact-copy p{font-size:17px;margin-top:30px;line-height:2}.form{display:flex;flex-direction:column;gap:20px;padding-top:4px}.field{display:grid;grid-template-columns:106px minmax(0,1fr);gap:18px;align-items:center}.field label{font-size:14px;font-weight:700}.field input,.field textarea{width:100%;border:1px solid #c5d5de;border-radius:0;background:white;color:#657986;padding:14px 16px;font-size:14px;line-height:1.5}.field textarea{height:136px;resize:none}.field.message{align-items:start}.field.message label{padding-top:14px}.form .button{margin-left:124px;justify-content:center;gap:26px}.footer{padding:46px 0}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:36px}.footer .brand{font-size:22px}.footer nav{display:flex;gap:26px;font-size:13px}.copyright{margin-top:28px;color:#4c687b;font-size:12px;text-align:right}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}


/* v2: aligned hero, explicit CTA hierarchy, grouped service process. */
.hero{padding-top:48px;padding-bottom:104px}
.hero-tagline{display:flex;align-items:center;gap:12px;font-family:Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.15em;line-height:1.4;margin-bottom:28px}
.hero-tagline::before{content:"";width:7px;height:7px;background:#00bdd7}
.hero-bottom{display:block;margin-top:38px}
.hero-bottom .intro{max-width:660px}
.hero-bottom .button{font-size:18px;padding:20px 28px;gap:48px;margin-top:28px}
.hero-bottom .cta-caption{font-size:13px;font-weight:400;line-height:1.7;margin-top:14px;letter-spacing:.02em;color:#416277}
.vision-tone{display:inline-block;position:relative;isolation:isolate;white-space:nowrap}
.vision-tone::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:.18em;bottom:.12em;background-color:#95ecf4;background-image:radial-gradient(circle,rgba(0,74,109,.26) .9px,transparent 1px);background-size:4px 4px}
.services{position:relative;isolation:isolate;overflow:hidden;background:#effafd}
.services::before{content:"";position:absolute;z-index:-1;right:0;top:0;width:29%;height:164px;background-color:#d0f7fb;background-image:radial-gradient(circle,#43c8dc 1.05px,transparent 1.2px);background-size:6px 6px;clip-path:polygon(40% 0,100% 0,100% 100%,0 100%)}
.services .eyebrow{margin-bottom:24px}
.flow{gap:24px;margin-top:48px}
.flow article{position:relative;background:#fff;padding:28px 24px 30px;border-top:4px solid #00c6df;box-shadow:0 10px 24px rgba(6,44,74,.035)}
.flow h3{display:block;white-space:normal;font-size:21px;line-height:1.6}
.flow .step{display:block;font-family:Arial,sans-serif;font-size:48px;color:#0b7990;font-weight:500;line-height:1;margin-bottom:24px;letter-spacing:-.035em}
.flow article:not(:last-child)::after{content:"→";position:absolute;right:-20px;top:40px;font-size:22px;color:#0b7990;z-index:2}
.flow p{margin-top:14px;padding-left:0;font-size:15px;line-height:1.95}
.services .button{margin-top:40px}
.voice{grid-template-columns:380px minmax(0,1fr);gap:64px}
.person{display:grid;grid-template-columns:88px minmax(0,1fr);gap:22px;align-items:center}
.person img{display:block;width:88px;height:88px;object-fit:cover}
.person strong{font-size:17px}.person p{font-size:14px;line-height:1.8;margin-top:7px}


/* v3: requested Value reference, without the square / circle / star ornaments. */
.values{background:#0c2641;padding-block:96px 112px}
.values::after{display:none}
.values .eyebrow{padding-top:26px;border-top:1px solid #8ab9c7;margin-bottom:52px;color:#fff}
.values-intro{display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:80px;margin-bottom:56px}
.values-intro h2{font-size:52px;line-height:1.65;letter-spacing:-.035em}
.values-intro>p{justify-self:end;font-size:17px;line-height:2;margin:0 0 6px}
.value-grid{gap:32px}
.value-grid article{border-top:1px solid #8ab9c7;padding-top:32px}
.value-number{font-family:Arial,sans-serif;font-size:76px;line-height:1;letter-spacing:-.055em;color:#00c6df;font-weight:600;margin-bottom:30px}
.value-english{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.075em;line-height:1.5;color:#b0d2dc;margin-bottom:16px}
.values h3{font-size:22px;line-height:1.6}
.values p{font-size:16px;line-height:1.95;margin-top:24px}
.values-intro>p{margin-top:0}


/* Approved v4 composition. */
.hero{position:relative;isolation:isolate}
.hero>.wrap{position:relative;z-index:2}
.hero h1{position:relative;width:fit-content}
.hero-art{position:absolute;z-index:1;width:620px;height:660px;right:-40px;top:70px;pointer-events:none}
.drawing-hand{position:absolute;z-index:3;width:620px;top:0;left:0;mix-blend-mode:multiply;transform-origin:80% 20%;animation:hand-arrives 1.1s .2s both cubic-bezier(.2,.65,.2,1)}
.tone-sheet{position:absolute;mix-blend-mode:multiply;background-size:6px 6px;animation:paper-settle .85s both cubic-bezier(.2,.65,.2,1)}
.sheet-a{width:430px;height:210px;left:28px;top:400px;background-color:#00c6df;background-image:radial-gradient(circle,#0691b0 1px,transparent 1.1px);--turn:-12deg;animation-delay:.15s}
.sheet-b{width:310px;height:320px;right:-26px;top:136px;background-color:#dcf8fb;background-image:radial-gradient(circle,#00bed6 1px,transparent 1.1px);--turn:10deg;animation-delay:.35s}
.hero-line::before{transform-origin:left;animation:draw-tone .85s .48s both cubic-bezier(.18,.65,.2,1)}
@keyframes hand-arrives{from{transform:translate(25px,-20px) rotate(4deg);opacity:0}35%{opacity:1}to{transform:translate(0,0) rotate(0);opacity:1}}
@keyframes paper-settle{from{transform:translate(38px,20px) rotate(0);opacity:0}to{transform:translate(0,0) rotate(var(--turn));opacity:1}}
@keyframes draw-tone{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.section-statement{display:flex;align-items:end;justify-content:space-between;gap:72px}
.section-statement h2{font-size:48px;line-height:1.6;letter-spacing:-.04em}
.section-statement>p{font-size:16px;line-height:1.9;max-width:450px}
.section-statement small{font-size:12px;color:#4c687b}
.voices{background:#eafbfe}
.voices .eyebrow{margin-bottom:40px}
.voice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:54px}
.voice,.voice:first-child,.voice:last-child{display:flex;flex-direction:column;justify-content:space-between;gap:40px;background:#fff;padding:38px;border:0}
.quote{order:0}.person{order:1;grid-template-columns:96px minmax(0,1fr);border-top:1px solid #8faab7;padding-top:26px;gap:24px}
.person img{width:96px;height:112px;border-radius:52px 52px 0 0}
.quote blockquote{font-size:25px;line-height:1.85}
.quote .link{margin-top:28px}
.person strong{font-size:17px}.person p{font-size:14px}
.greeting-grid{grid-template-columns:430px minmax(0,1fr);gap:92px}
.portrait{isolation:isolate}
.portrait::before{content:"";position:absolute;z-index:-1;inset:40px -22px -24px 32px;background-color:#00c6df;background-image:radial-gradient(circle,#0083a0 .8px,transparent 1px);background-size:5px 5px;border-radius:220px 220px 0 0}
.portrait img{height:570px;border-radius:230px 230px 0 0;object-position:52% center}
.greeting h2{font-size:45px}
.greeting-copy p{margin-top:24px;font-size:16px;line-height:2}
.greeting-copy .greeting-term-note{margin-top:6px;font-size:13px;line-height:1.7;color:#49677b}
.founder-sign{display:flex;align-items:baseline;gap:20px;margin-top:32px}
.founder-sign span{font-size:14px}.founder-sign strong{font-size:25px}
.greeting .link{font-size:14px}
.journal .eyebrow{padding-top:24px;border-top:1px solid #8faab7;margin-bottom:40px}
.journal-grid{gap:32px;margin-top:48px}
.editorial-cover{position:relative;height:230px;overflow:hidden;padding:28px;isolation:isolate}
.editorial-cover strong{font-family:Arial,sans-serif;font-size:40px;line-height:.96;letter-spacing:-.055em;font-weight:900;position:relative;z-index:3}
.editorial-cover::before,.editorial-cover::after{content:"";position:absolute;z-index:1;bottom:-30px;right:-35px;width:68%;height:72%;background-image:radial-gradient(circle,#00a2c0 1.2px,transparent 1.35px);background-size:6px 6px;transform:rotate(-12deg)}
.cover-first{background:#eafbfe}.cover-first::after{background:#00c6df;right:-75px;bottom:-90px;transform:rotate(12deg)}
.cover-next{background:#0c2641;color:white}.cover-next::before{background-color:#00c6df}.cover-next::after{right:60px;background-image:radial-gradient(circle,#54d6e7 1px,transparent 1.2px);transform:rotate(10deg)}
.cover-love{background:#00c6df}.cover-love::before{background-color:#0c2641;right:-95px;transform:rotate(-25deg)}.cover-love::after{bottom:-110px;right:50px;background-color:#d5f7fb}
.cover-focus{background:#aadceb}.cover-focus::before{right:38%;bottom:-55%;width:80%;height:95%;background-color:#67c5d9;transform:rotate(16deg)}.cover-focus::after{right:-24%;bottom:48%;width:72%;height:24%;background:#315f70;transform:rotate(-14deg)}
.article-topic{font-size:13px;font-weight:600;margin-top:24px}
.journal-grid h3{font-size:21px;line-height:1.65;margin-top:24px;max-width:none}
.journal-grid .link{margin-top:16px;display:inline-flex;border-bottom:1px solid currentColor;padding:0 0 8px;font-size:14px}
.journal-more{display:flex;justify-content:flex-end;margin-top:64px}
.journal-more .button{min-width:220px}
.contact{background:#00c2d9}
.contact .eyebrow{padding-top:26px;border-top:1px solid #18677e;margin-bottom:64px}
.contact-grid{grid-template-columns:440px minmax(0,1fr);gap:72px}
.contact h2{font-size:65px;line-height:1.65}
.contact-copy p{font-size:17px;line-height:2.2;margin-top:36px}
.form-note{font-size:12px;line-height:1.7}
.form{gap:28px;padding-top:0}
.field{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.field label{font-size:15px;font-weight:500}
.field input,.field textarea,.tone-contact-form input,.tone-contact-form textarea{font-weight:400}
.field label small{font-size:12px;margin-left:8px}
.field input,.field textarea{background:#fff;border:1px solid #14536b;padding:14px 16px;color:#062c4a;font-size:15px}
.field input::placeholder,.field textarea::placeholder{color:#174e68;opacity:1}
.field input::placeholder,.field textarea::placeholder,.tone-contact-form input::placeholder,.tone-contact-form textarea::placeholder{font-weight:400}
.field textarea{height:150px}
.field.message{align-items:stretch}.field.message label{padding-top:0}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form .kw-consent,.tone-contact-form .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:12px;font-weight:400;line-height:1.8}
.form .kw-consent input,.tone-contact-form .wpcf7-acceptance input{width:20px;height:20px;min-width:20px;margin:.35em 0 0;flex:0 0 20px}
.form .kw-consent span,.tone-contact-form .wpcf7-acceptance .wpcf7-list-item-label{display:block;min-width:0;flex:1}
.form .button{margin-left:0;justify-content:space-between;background:#0c2641;padding:22px 26px}
.contact-tone{width:190px;height:90px;margin-top:44px;background-image:radial-gradient(circle,#0c2641 1.25px,transparent 1.4px);background-size:6px 6px;clip-path:polygon(0 25%,100% 0,100% 75%,0 100%)}
@media(prefers-reduced-motion:reduce){.drawing-hand,.tone-sheet,.hero-line::before{animation:none}.tone-sheet{transform:rotate(var(--turn))}}


.comp-motion .portrait::before,.comp-motion .editorial-cover::before{clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.2,.65,.2,1)}
.comp-motion .portrait.is-revealed::before,.comp-motion .editorial-cover.is-revealed::before{clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){.comp-motion .portrait::before,.comp-motion .editorial-cover::before{clip-path:none;transition:none}}

/* Production refinements: approved 2026-09-12. Shared token + responsive layer. */
:root{--tone-navy:#062c4a;--tone-red:#c60028;--tone-red-hover:#e01038;--tone-blue:#00c6df;--tone-pale:#effafd;--tone-space:112px}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{overflow-wrap:break-word}
.wrap{width:min(1120px,calc(100% - 96px))}
.section{padding-block:var(--tone-space)}
a{color:var(--tone-red);text-underline-offset:.25em}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid currentColor;outline-offset:5px}
button,summary{cursor:pointer}img{max-width:100%;height:auto}
.brand{color:var(--tone-navy);text-decoration:none;white-space:nowrap}
.navigation>a:not(.button){text-decoration:none;padding-block:12px}
.navigation>a:not(.button):hover{text-decoration:none}
.button{position:relative;isolation:isolate;overflow:hidden;background:var(--tone-red);cursor:pointer;transition:color .3s;gap:32px;max-width:100%;text-align:left}
.button::before{content:"";position:absolute;inset:0;background:var(--tone-red-hover);transform:scaleX(0);transform-origin:right;transition:transform .35s;z-index:-1}
.button:hover::before,.button:focus-visible::before{transform:scaleX(1);transform-origin:left}
.button>span{transition:transform .3s;flex-shrink:0}.button:hover>span{transform:translateX(5px)}
.link{text-decoration:none;width:fit-content;max-width:100%;min-height:44px;cursor:pointer;color:var(--tone-red)}
.menu-toggle{display:none}
/* A small ink-like underline sweep; keep the resting underline continuous. */
:is(.link,.kw-text-link,.voice-details summary,.navigation>a:not(.button),.footer nav a){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:left bottom;background-size:0 2px;transition:background-size .3s cubic-bezier(.2,.7,.2,1)}
:is(.link,.kw-text-link,.voice-details summary,.navigation>a:not(.button),.footer nav a):is(:hover,:focus-visible){background-size:100% 2px}
:is(.link,.kw-text-link)>span[aria-hidden="true"]{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
:is(.link,.kw-text-link):is(:hover,:focus-visible)>span[aria-hidden="true"]{transform:translateX(4px)}
.tone-contact-form input[type=submit]:is(:hover,:focus-visible){background:var(--tone-red-hover)}
.skip-link{position:absolute;top:12px;left:12px;z-index:100;background:white;padding:14px;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.hero .wrap{z-index:2}.hero h1{font-size:clamp(64px,7.35vw,100px)}
.hero-line::before{left:calc((min(1120px,100vw - 96px) - 100vw)/2);background-color:#00d2e9;background-image:radial-gradient(circle,rgba(0,74,109,.12) 1px,transparent 1.1px)}
.hero-bottom .intro{max-width:610px}
.hero-bottom .cta-caption{font-size:14px}
.hero-art{right:max(-40px,calc((100vw - 1360px)/2 - 40px))}
.vision-tone::before{background-image:radial-gradient(circle,rgba(0,74,109,.14) .8px,transparent 1px)}
.services{background:#0c2641;color:white}
.services .eyebrow{color:#a7e2eb}
.services::before{background-color:transparent;background-image:radial-gradient(circle,#3599ad 1.2px,transparent 1.4px)}
.services .wrap{position:relative;z-index:1}
.flow{gap:24px}
.flow article{padding:0;background:transparent;box-shadow:none;border:0}
.flow article:not(:last-child)::after{display:none}
.service-cover{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1;background:#e9fbfd;color:var(--tone-navy);margin-bottom:24px;padding:24px}
.service-cover>span{position:relative;z-index:2;display:block;font-family:Arial,sans-serif;font-size:15px;line-height:1;font-weight:700;letter-spacing:.08em;margin-bottom:18px}
.flow .service-cover h3{position:relative;z-index:2;display:block;font-size:28px;line-height:1.35;letter-spacing:-.04em;white-space:normal}
/* Two printed planes share one dot pitch. Keep all texture below the cover copy. */
.service-print{position:absolute;z-index:0;inset:59% -10% -36% 42%;background-image:radial-gradient(circle,#009cb8 1.25px,transparent 1.5px);background-size:6px 6px;transform:rotate(-14deg)}
.service-cover::after{content:"";position:absolute;z-index:1;inset:77% -15% -40% 60%;background:#00c6df;transform:rotate(13deg);pointer-events:none}
.service-cover-02{background:#16445e;color:white}
.service-cover-02 .service-print{inset:62% -10% -35% 26%;background-image:radial-gradient(circle,#53d7e8 1.2px,transparent 1.5px);transform:rotate(10deg)}
.service-cover-02::after{inset:76% -15% -40% 53%;background-color:#00c6df;background-image:radial-gradient(circle,#008da7 1.2px,transparent 1.5px);background-size:6px 6px;transform:rotate(-16deg)}
.service-cover-03{background:#00c6df}
.service-cover-03 .service-print{background-color:#0c2641;background-image:radial-gradient(circle,#21c9df 1.2px,transparent 1.5px);inset:67% -20% -35% 42%;transform:rotate(-28deg)}
.service-cover-03::after{background-color:#e9fbfd;background-image:radial-gradient(circle,#009cb8 1.2px,transparent 1.5px);background-size:6px 6px;inset:83% -8% -30% 14%;transform:rotate(-14deg)}
.service-cover-04{background:#c4edf3}
.service-cover-04 .service-print{inset:61% -20% -35% 48%;transform:rotate(15deg)}
.service-cover-04::after{background:#0c2641;inset:80% -20% -35% 42%;transform:rotate(-16deg)}
.flow p{font-size:16px;color:#e1edf3}
.voices{background:white;position:relative;isolation:isolate}
.voices::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;width:300px;height:140px;background-image:radial-gradient(circle,#00abc5 1.4px,transparent 1.6px);background-size:6px 6px;clip-path:polygon(35% 0,100% 0,100% 100%,0 100%);pointer-events:none}
.voice-list{align-items:start}
.voice,.voice:first-child,.voice:last-child{background:#f5fbfd;padding:36px;gap:0;display:block}
.person{margin:0 0 42px;padding:0;border:0;align-items:center;grid-template-columns:120px minmax(0,1fr);gap:40px}
.person-photo{position:relative;isolation:isolate;margin:0}
.person-photo::before{content:"";position:absolute;z-index:-1;inset:20px -22px -20px 16px;background-color:#b8f0f7;background-image:radial-gradient(circle,#00a3c0 1.3px,transparent 1.5px);background-size:6px 6px;border-radius:72px 72px 0 0;transform:rotate(-9deg)}
.person img{display:block;width:120px;height:144px;border-radius:64px 64px 0 0}
.quote blockquote{font-size:25px;line-height:1.85}
.voice-details{margin-top:26px}
.voice-details summary{display:flex;align-items:center;gap:28px;width:fit-content;min-height:44px;border-bottom:1px solid currentColor;color:var(--tone-red);font-size:14px;font-weight:700;list-style:none;padding-bottom:6px}
.voice-details summary::-webkit-details-marker{display:none}
.kw-voice__toggle-label--close{display:none}
.voice-details[open] .kw-voice__toggle-label--open{display:none}
.voice-details[open] .kw-voice__toggle-label--close{display:inline}
.kw-voice__toggle-icon{display:inline-block;transition:transform .3s}
.voice-details[open] .kw-voice__toggle-icon{transform:rotate(180deg)}
.kw-voice__full{padding-top:24px}
.kw-voice__full p{font-size:16px;line-height:2;margin-bottom:18px}
.greeting{border:0}.greeting-grid{align-items:start;grid-template-columns:300px minmax(0,1fr);gap:96px}
.greeting-copy{padding-top:16px}.portrait img{width:100%;height:auto;aspect-ratio:43/57}
.portrait::before{inset:28px -20px -20px 24px}
.journal{position:relative;isolation:isolate}
.journal::after{content:"";position:absolute;z-index:-1;left:0;bottom:0;width:120px;height:80px;background-image:radial-gradient(circle,#70c9d8 1px,transparent 1.1px);background-size:6px 6px;clip-path:polygon(0 0,100% 25%,70% 100%,0 100%)}
.journal-grid article{min-width:0}
.journal-grid a.editorial-cover{display:block;color:var(--tone-navy);text-decoration:none}
.journal-grid a.cover-next{color:white}
.journal-grid .link{display:inline-flex;border:0;border-bottom:1px solid currentColor;padding-top:0;justify-content:initial}
.editorial-cover{height:auto;aspect-ratio:1.55}
.editorial-cover strong{font-size:clamp(28px,3vw,40px)}
.article-topic,.value-english{font-size:13px}
.article-pending{font-size:14px;line-height:1.8;margin-top:24px;color:#416277}
.contact .form-note{font-size:14px}
.contact .form{display:grid;gap:28px}
.contact-grid{display:grid;grid-template-columns:440px minmax(0,1fr);gap:72px}
.contact a:not(.button){color:#690921}
.contact input,.contact textarea{width:100%;border-radius:0;min-width:0;font:inherit}
.contact .field textarea{resize:vertical}
.contact .field input,.contact .field textarea{border-bottom-color:#14536b}
.contact .form .button,.tone-contact-form .button,.tone-contact-form .kw-button{background:var(--tone-red);color:white}
.contact .form .button::before{background:var(--tone-red-hover)}
.field label{font-size:16px}
.form-note{margin-bottom:0}
#tone-form-status:empty{display:none}
#tone-form-status{font-size:16px;line-height:1.8}
.tone-contact-form p{font-size:16px;line-height:1.8;margin-bottom:24px}
.tone-contact-form input:not([type=submit]):not([type=checkbox]),.tone-contact-form textarea{background:#fff;border:1px solid #14536b;padding:14px 16px;color:var(--tone-navy)}
.tone-contact-form input::placeholder,.tone-contact-form textarea::placeholder{color:#174e68}
.tone-contact-form input[type=checkbox]{width:auto}
.tone-contact-form [class*="turnstile"],.tone-contact-form iframe[src*="challenges.cloudflare.com"]{display:block;margin:28px 0 32px}
.tone-contact-form .kw-button{display:flex;justify-content:space-between;align-items:center;gap:32px;border:0;padding:22px 26px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.contact .wpcf7-not-valid-tip{color:#690921}
.contact .wpcf7-response-output{color:var(--tone-navy)}
.footer nav{flex-wrap:wrap;font-size:14px}
.copyright{font-size:13px}
/* One restrained corner of the same screen tone per quiet section. */
.vision,.greeting,.footer{position:relative;isolation:isolate}
.vision::after,.greeting::after,.footer::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:120px;height:72px;background:radial-gradient(circle,#50c7da 1.15px,transparent 1.4px) 0 0/6px 6px;clip-path:polygon(0 0,100% 24%,72% 100%,0 100%)}
.vision::after{right:0;bottom:0;transform:scaleX(-1)}
.greeting::after{left:0;bottom:0}
.footer{padding-top:64px;padding-bottom:104px}
.footer::before{left:0;bottom:0;width:200px;height:64px}
.footer .wrap{position:relative;z-index:1}
.tone-enter{clip-path:inset(0 100% 0 0)}
.tone-enter.is-revealed{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.2,.65,.2,1)}
@media(min-width:1101px){.navigation{display:flex!important}}
@media(max-width:1100px){
 .wrap{width:calc(100% - 64px)}.section{--tone-space:88px}
 .topbar{height:auto;min-height:88px;flex-wrap:wrap;gap:20px;padding-block:20px}
 .brand{font-size:25px}
 .js .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:48px;height:48px;background:transparent;border:1px solid #8faab7;color:var(--tone-navy);padding:10px}
 .menu-toggle span{display:block;width:26px;height:2px;background:currentColor}
 .navigation{flex-basis:100%;flex-wrap:wrap;gap:20px;padding-block:12px}
 .js .navigation[hidden]{display:none}
 .hero{padding:36px 0 80px}.hero h1{font-size:clamp(48px,7.7vw,84px)}
 .hero-line::before{left:-32px}
 .hero-art{width:470px;height:530px;right:-100px;top:160px;opacity:.65}
 .drawing-hand{width:470px}.sheet-a{width:300px;top:300px}.sheet-b{width:240px;height:220px;top:100px}
 .hero-bottom .intro{max-width:580px}
 .split{gap:40px}.vision h2{font-size:36px}
 .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
 .service-cover{aspect-ratio:1.4}.flow .service-cover h3{font-size:30px}
 .greeting-grid{grid-template-columns:30% minmax(0,1fr);gap:64px}.portrait img{height:auto}
 .section-statement h2,.greeting h2{font-size:40px}
 .voice,.voice:first-child,.voice:last-child{padding:26px}
 .person{gap:32px;grid-template-columns:96px minmax(0,1fr)}
 .person img{width:96px;height:116px}.person strong{font-size:16px}
 .quote blockquote{font-size:22px}
 .values-intro{gap:40px}.values-intro h2{font-size:44px}
 .value-grid{gap:24px}.values h3{white-space:normal;font-size:21px}
 .contact-grid{grid-template-columns:38% minmax(0,1fr);gap:48px}.contact h2{font-size:50px}
}
@media(max-width:700px){
 .wrap{width:calc(100% - 40px)}.section{--tone-space:64px}
 .topbar{gap:12px;min-height:80px;padding-block:16px}.brand{font-size:23px;letter-spacing:-.6px}
 .navigation{flex-direction:column;align-items:stretch;gap:8px}
 .navigation>a{padding:12px}.navigation .button{justify-content:space-between}
 .hero{padding:24px 0 40px}.hero h1{font-size:clamp(36px,9.6vw,66px);line-height:1.5;letter-spacing:-.055em}
 .hero-tagline{font-size:12px;letter-spacing:.09em;gap:8px;margin-bottom:24px}
 .hero-line::before{left:-20px;right:-12px;top:6px}
 /* Mobile: the hand is a quiet background, never a separate content row.
    Fade the entire art layer so its arrival animation cannot restore full contrast. */
 .hero-art{position:absolute;width:360px;height:360px;top:64px;right:-96px;opacity:.18;margin:0}
 .drawing-hand{width:360px;max-width:none;left:0;right:auto;top:0}
 .sheet-a{width:230px;height:110px;top:160px;left:auto;right:40px}
 .sheet-b{width:150px;height:180px;right:-12px;top:30px}
 .hero-bottom{margin-top:28px}.intro p{font-size:16px;line-height:1.9}
 .hero-bottom .button{font-size:16px;gap:18px;padding:18px 20px;white-space:normal}
 .hero-bottom .cta-caption{font-size:13px;color:#36556b}
 .eyebrow{font-size:12px;margin-bottom:24px}
 .split,.greeting-grid,.values-intro,.contact-grid{grid-template-columns:1fr;gap:32px}
 .vision h2,.services h2,.section-statement h2,.greeting h2,.values-intro h2{font-size:32px;line-height:1.65}
 .vision p,.section-statement>p{font-size:16px}
 .vision h2 br{display:none}.vision-tone{white-space:nowrap}
 .services::before{height:100px;width:35%;opacity:.65}
 .service-name{font-size:16px}.flow{gap:32px 16px;margin-top:32px}
 .flow h3{font-size:18px}.flow p{font-size:15px;line-height:1.8}.flow p br{display:none}
 .flow{grid-template-columns:1fr}
 .service-cover{width:100%;aspect-ratio:1.4;min-height:240px;padding:24px;margin-bottom:20px}.flow .service-cover h3{font-size:30px}
 .section-statement{display:block}.section-statement>p{margin-top:20px}
 .voice-list{grid-template-columns:1fr;gap:24px;margin-top:32px}
 .voices .eyebrow{margin-bottom:24px}.quote blockquote{font-size:22px}
 .person{grid-template-columns:88px minmax(0,1fr);gap:28px}.person strong{font-size:16px}
 .person img{width:88px;height:108px}.person-photo::before{inset:16px -16px -16px 12px}
 .voices::after{width:180px;height:100px}
 .greeting-grid{gap:50px}.portrait{width:calc(100% - 22px);max-width:240px}
 .portrait img{aspect-ratio:43/50}.portrait::before{inset:24px -20px -18px 24px}
 .greeting-copy{padding:0}.greeting-copy p{font-size:16px}
 .founder-sign{flex-wrap:wrap;gap:8px 16px}.founder-sign strong{font-size:23px}
 .values .eyebrow{margin-bottom:32px}.values-intro{margin-bottom:40px}
 .values-intro>p{justify-self:start;font-size:16px}
 .value-grid{grid-template-columns:1fr;gap:36px}
 .value-number{font-size:60px;margin-bottom:20px}.value-english{margin-bottom:12px}
 .values h3{font-size:23px}.values p{margin-top:16px}
 .journal .eyebrow{margin-bottom:28px}.journal-grid{grid-template-columns:1fr;gap:44px;margin-top:32px}
 .editorial-cover{aspect-ratio:1.55;padding:28px}.editorial-cover strong{font-size:42px}
 .journal-grid h3{font-size:20px;margin-top:20px}
 .journal-more{justify-content:flex-start;margin-top:44px}.journal-more .button{width:100%}
 .contact .eyebrow{margin-bottom:36px;font-size:12px}
 .contact h2{font-size:45px;line-height:1.5}
 .contact-copy p{font-size:16px;line-height:2;margin-top:24px}
 .contact-tone{height:50px;width:120px;margin-top:24px}
 .form-pair{grid-template-columns:1fr;gap:28px}
 .footer{padding:36px 0 96px}.footer-grid{align-items:start;flex-direction:column;gap:24px}
 .footer nav{gap:16px 24px}.copyright{text-align:left;line-height:1.8}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
 .tone-enter{clip-path:none}.tone-sheet{transform:rotate(var(--turn))}
}

.editorial-cover .journal-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4}

/* Calm palette trial: muted cyan, dignified red, and a lighter Gothic voice. */
:root{--tone-red:#9b1d1d;--tone-red-hover:#a52a2a;--tone-blue:#8ad6e7;--tone-pale:#aadceb}
body,button,input,textarea{font-family:"TB Gothic Pro","TBゴシック Pro","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
h1,h2,h3{font-weight:700;letter-spacing:-.025em}
.hero h1{font-weight:700;letter-spacing:-.04em}
.button{background:#9b1d1d}
.hero-tagline::before,.hero-line::before,.sheet-a,.service-cover::after,.service-cover-02::after,.service-cover-03,.portrait::before{background-color:#8ad6e7}
.sheet-b,.vision-tone::before{background-color:#aadceb}
.voices{background:#d9eef3}
.voice,.voice:first-child,.voice:last-child{background:#f7fbfc}
.service-cover,.cover-first{background:#d9eef3}
.service-cover-01{background:#d9eef3;color:var(--tone-navy)}
.service-cover-02{background:#274e63;color:#fff}
.service-cover-03{background:#67c5d9;color:var(--tone-navy)}
.service-cover-04{background:#c7e8ef;color:var(--tone-navy)}
.cover-love{background:#8ad6e7;color:var(--tone-navy)}
.cover-focus{background:#aadceb;color:var(--tone-navy)}
.value-number{color:#8ad6e7}
.contact{background:#8ad6e7}
.contact a:not(.button){color:#721919}
.form .button{background:#9b1d1d}

/* Large dark surfaces use a blue-gray drawn from the softened cyan palette. */
.services,.values{background:#315f70}
.service-cover-02{background:#0c2641;color:#fff}
.cover-next{background:#315f70;color:#fff}

/* Keep structural rules visible across the softened light and dark surfaces. */
.vision,.greeting{border-top-color:#8faab7}
.voice:last-child{border-top-color:#8faab7}
.values .eyebrow,.value-grid article{border-top-color:#8ab9c7}
