/* Direction 05 — signed off as a direction by shinji, 2026-10-24. */
body[data-page="home"]{--split-ink:#101d29;--split-navy:#0b2131;--split-lime:#dcf87a;--split-muted:#56616c;--split-line:#dce1e4}
html{min-width:0}
body[data-page="home"] .site-header{background:#fff;border-color:#e3e8eb;backdrop-filter:none}
body[data-page="home"] .header-inner{max-width:none;width:calc(100% - 96px);min-height:86px;gap:28px}
body[data-page="home"] .header-cta{background:var(--split-navy);border-color:var(--split-navy);border-radius:999px;box-shadow:none}
body[data-page="home"] .site-paper-background{opacity:.2}
body[data-page="home"] #cursorConfetti{display:none}
#hero.split5-shell{background:transparent;isolation:isolate;overflow:clip}
.split5{display:grid;grid-template-columns:55% 45%;max-width:2000px;margin:auto;color:var(--split-ink)}
.split5-creation{padding:45px 48px 28px;min-width:0;position:relative;z-index:1;background:rgb(255 255 255 / 88%)}
.split5-eyebrow{font:500 10px/1.5 Arial,sans-serif;letter-spacing:.2em;margin:0 0 30px;max-width:none}
#hero .brand-tagline{font-family:var(--font-body);font-size:clamp(37px,3.75vw,65px);line-height:1.5;letter-spacing:-.04em;font-weight:650;color:var(--split-ink);margin:0}
#hero .brand-tagline .hero-line{font-size:1em;letter-spacing:inherit;white-space:nowrap;display:block}
#hero .brand-tagline .hero-line+.hero-line{margin-top:0}
#hero .brand-number{color:inherit;font-family:inherit;font-weight:inherit;font-style:normal;letter-spacing:-.05em}
.split5-lead{font-size:15px;line-height:1.9;letter-spacing:.025em;margin:20px 0 0;max-width:39em}
.split5-sp{display:none}
.split5 .arrow-icon{color:inherit}
.split5-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:26px 0 34px}
.split5-button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:54px;padding:12px 25px;border:1px solid transparent;border-radius:999px;font-size:14px;font-weight:500;line-height:1.5;text-decoration:none;box-shadow:none;transition:background .2s,color .2s,transform .2s;max-width:100%}
.split5-button .arrow-icon{width:22px;height:22px;flex-shrink:0;transition:transform .25s}
.split5-button-dark{background:var(--split-navy);color:#fff;min-width:260px}
.split5-button-dark:hover{background:#24455c}
.split5-button-lime{background:var(--split-lime);color:var(--split-navy);min-width:300px}
.split5-button-lime:hover{background:#edffa8}
.split5-button:hover .arrow-icon{transform:translateX(5px)}
.split5-button:active{transform:translateY(1px)}
.split5-link{display:inline-flex;align-items:center;gap:20px;min-height:48px;text-decoration:none;font-size:14px;border-bottom:1px solid #b3bec5}
.split5-link .arrow-icon{width:20px;height:20px}
.split5-work-label{display:flex;justify-content:space-between;align-items:center;border-left:2px solid #c1ccd2;padding-left:17px;margin-bottom:18px;gap:20px}
.split5-work-label h2{font-family:var(--font-body);font-size:18px;font-weight:500;line-height:1.5;letter-spacing:.02em;margin:0}
.split5-work-label p{font-size:12px;color:var(--split-muted);margin:5px 0 0;line-height:1.5}
.split5-work-label>a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:inherit}
.split5-project{display:block;text-decoration:none;color:inherit}
.split5-browser{border:1px solid #cfd7db;border-radius:9px;overflow:hidden;box-shadow:0 15px 30px #1427380b;background:#fff;transition:transform .35s}
.split5-browser-bar{display:flex;align-items:center;gap:4px;height:25px;background:#f3f5f6;border-bottom:1px solid #dce2e5;padding:0 10px;position:relative}
.split5-browser-bar i{display:block;width:4px;height:4px;border-radius:50%;background:#b8c2c8}
.split5-browser-bar span{position:absolute;left:0;right:0;text-align:center;font:8px Arial,sans-serif;letter-spacing:.15em;color:#7b878e;pointer-events:none}
.split5-screen{height:270px;overflow:hidden;position:relative}
.split5-screen img{display:block;width:100%;height:auto;margin:0;transition:transform .5s}
.split5-project:hover .split5-browser{transform:translateY(-4px)}
.split5-project-caption{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:12px;font-size:11px;line-height:1.7}
.split5-project-caption small{display:block;color:#6a747b;font-size:10px}
.split5-project-caption>span:last-child{display:flex;align-items:center;gap:12px;white-space:nowrap}
.split5-project-caption .arrow-icon{width:17px;height:17px}
.split5-business{background:var(--split-navy);color:#f4f6f5;position:relative;overflow:hidden;padding:45px 45px 28px;min-width:0}
.split5-business-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:start;min-height:100%}
.split5-business .split5-eyebrow{color:#b8c8d0}
.split5-title{font-family:var(--font-heading);font-size:clamp(32px,3.5vw,56px);font-weight:500;letter-spacing:.07em;line-height:1.6;margin:0 0 28px;white-space:nowrap}
.split5-services{display:block;width:100%;border-top:1px solid #ffffff30;margin:0 0 20px}
.split5-service{display:grid;grid-template-columns:42px 115px 1fr 18px;gap:16px;align-items:center;min-height:112px;padding:21px 0;text-decoration:none;border-bottom:1px solid #ffffff30;transition:background .2s;color:#f4f6f5}
.split5-service:hover{background:#ffffff08}
.split5-service-icon{display:flex;align-items:center;justify-content:center;border:1px solid #adc1cd66;border-radius:50%;width:42px;height:42px}
.split5-service-icon svg{width:23px;height:23px;display:block}
.split5-service-name{display:block}
.split5-service-name strong{display:block;font-family:var(--font-heading);font-size:23px;font-weight:500;line-height:1.6;letter-spacing:.01em}
.split5-service-name>span{display:block;font-size:12px;line-height:1.7;color:#c2d0d7;margin-top:3px}
.split5-service-description{font-size:13px;line-height:1.9;color:#b4c8d6;border-left:1px solid #ffffff26;padding-left:17px;max-width:16em}
.split5-service-arrow .arrow-icon{width:18px;height:18px;transition:transform .25s}
.split5-service:hover .split5-service-arrow .arrow-icon{transform:translateX(4px)}
#hero .split5-subcatch{font-family:var(--font-body);font-size:14px;line-height:1.85;letter-spacing:.05em;color:#d0dce3;margin:0 0 18px}
.split5-subcatch .hero-line{display:block;white-space:normal}
.split5-bottom{display:flex;justify-content:space-between;gap:18px;width:100%;margin-top:auto;padding-top:30px;font-size:10px;color:#b4c4cc;letter-spacing:.035em;line-height:1.7}
.split5-bottom>a{display:flex;align-items:center;gap:12px;color:inherit;font:8px Arial,sans-serif;letter-spacing:.15em;text-decoration:none}
.split5-bottom .arrow-icon{width:16px;height:16px;transform:rotate(90deg)}
.split5-fold{position:absolute;right:-2%;bottom:0;width:100%;height:90%;max-width:none;color:#6288a5;opacity:.16;pointer-events:none}
.split5-fold-light{stroke-width:1.5;stroke-dasharray:110 1300;animation:split5-travel 16s linear infinite}
@keyframes split5-travel{to{stroke-dashoffset:-1410}}
body[data-page="home"] :where(.split5-button,.split5-link,.split5-service,.split5-project,.split5-work-label>a):focus-visible{outline:3px solid #537ca1;outline-offset:6px}
body[data-page="home"] .split5-business :where(a):focus-visible{outline-color:var(--split-lime)}
body[data-page="home"] .business-intro{padding-top:70px}
@media(min-width:1600px){.split5-creation{padding:55px 65px 35px}.split5-business{padding:55px 65px 35px}.split5-screen{height:350px}.split5-service{min-height:135px;grid-template-columns:46px 140px 1fr 20px}.split5-title{margin-bottom:35px}}
@media(max-width:1199px){body[data-page="home"] .header-inner{width:calc(100% - 64px)}.split5-creation{padding:35px 32px 26px}.split5-business{padding:35px 30px 26px}.split5-service{grid-template-columns:36px 100px 1fr;gap:12px}.split5-service-arrow{display:none}.split5-service-icon{width:36px;height:36px}.split5-service-name strong{font-size:21px}.split5-service-description{padding-left:12px;font-size:12px}.split5-button-dark{min-width:230px}.split5-actions{gap:20px}.split5-title{font-size:36px;letter-spacing:.025em}.split5-screen{height:235px}}
@media(max-width:950px){.split5{grid-template-columns:1fr 1fr}.split5-creation{padding-inline:25px}.split5-business{padding-inline:25px}#hero .brand-tagline{font-size:32px}.split5-lead{font-size:14px}.split5-service{grid-template-columns:38px 1fr;gap:12px;min-height:116px}.split5-service-description{grid-column:2;border:0;padding:0;margin-top:-12px;font-size:12px;max-width:none}.split5-service-icon{grid-row:1/3}.split5-service-name>span{display:inline;font-size:11px;margin-left:10px}.split5-service-name strong{display:inline;font-size:22px}.split5-title{font-size:32px}.split5-actions{margin-top:22px;margin-bottom:26px;gap:12px}.split5-button{font-size:13px;padding-inline:22px;min-width:0}.split5-link{font-size:13px}.split5-screen{height:235px}}
@media(max-width:719px){body[data-page="home"] .header-inner{width:calc(100% - 40px);min-height:76px;gap:12px}body[data-page="home"] .brand{grid-template-columns:30px auto;gap:8px}body[data-page="home"] .brand-mark{width:30px;height:30px}body[data-page="home"] .brand-name{font-size:23px}body[data-page="home"] .header-cta{font-size:11px;padding:10px 13px;min-height:44px;gap:8px}body[data-page="home"] .header-cta .arrow-icon{width:17px;height:17px}body[data-page="home"] .menu-toggle{width:44px;height:44px;flex-shrink:0}.split5{grid-template-columns:1fr}.split5-creation{padding:32px 24px 26px}.split5-eyebrow{font-size:9px;margin-bottom:25px;letter-spacing:.15em}#hero .brand-tagline{font-size:clamp(28px,7.5vw,50px);line-height:1.55;font-weight:600;letter-spacing:-.045em}.split5-lead{font-size:14px;line-height:1.9;margin-top:18px}.split5-sp{display:block}.split5-actions{margin:22px 0 30px;gap:22px;flex-wrap:nowrap}.split5-button{min-height:50px;font-size:13px;padding:13px 20px;gap:20px}.split5-link{font-size:13px;gap:10px;white-space:nowrap}.split5-work-label{padding-left:14px;margin-bottom:16px}.split5-work-label h2{font-size:17px}.split5-work-label p{font-size:11px}.split5-screen{height:auto;aspect-ratio:1.5}.split5-project-caption{font-size:10px;gap:10px}.split5-project-caption small{font-size:9px}.split5-project-caption>span:last-child{gap:6px}.split5-browser-bar{height:20px}.split5-business{padding:35px 24px 28px}.split5-business .split5-eyebrow{margin-bottom:18px}.split5-title{font-size:38px;letter-spacing:.04em;margin-bottom:28px}.split5-service{grid-template-columns:42px 120px 1fr;gap:16px;min-height:110px}.split5-service-description{grid-column:auto;padding:0 0 0 14px;border-left:1px solid #ffffff26;margin:0;font-size:12px}.split5-service-icon{grid-row:auto;width:42px;height:42px}.split5-service-name strong{display:block;font-size:23px}.split5-service-name>span{display:block;font-size:12px;margin:2px 0 0}.split5-services{margin-bottom:24px}#hero .split5-subcatch{font-size:14px;margin-bottom:22px}.split5-button-lime{min-width:275px;min-height:54px}.split5-bottom{font-size:9px;padding-top:30px}.split5-fold{height:100%;width:130%;right:-20%}body[data-page="home"] .business-intro{padding-top:45px}}
@media(max-width:374px){.split5-creation,.split5-business{padding-inline:20px}body[data-page="home"] .header-inner{width:calc(100% - 30px);gap:7px}body[data-page="home"] .brand-name{font-size:21px}body[data-page="home"] .brand-mark{width:26px;height:26px}body[data-page="home"] .brand{grid-template-columns:26px auto;gap:6px}.split5-actions{gap:14px}.split5-button{padding-inline:16px;font-size:12px;gap:13px}.split5-link{font-size:12px;gap:8px}.split5-title{font-size:33px}.split5-service{grid-template-columns:35px 100px 1fr;gap:12px}.split5-service-icon{width:35px;height:35px}.split5-service-name strong{font-size:21px}.split5-service-name>span{font-size:11px}.split5-service-description{font-size:11px;padding-left:12px}.split5-button-lime{min-width:255px}.split5-bottom{font-size:8px;letter-spacing:0}}
@media(max-width:374px){.split5-actions{flex-wrap:wrap;gap:10px 20px}.split5-button{white-space:nowrap;flex-shrink:0}.split5-actions>.split5-link{min-height:44px}}
/* Keep the selected split composition while giving service copy room to read. */
.split5-service-description{font-size:14px;color:#d0dce4;line-height:1.85}
.split5-work-label p{font-size:13px}
.split5-project-caption{font-size:12px}
.split5-project-caption small{font-size:11px}
@media(min-width:720px) and (max-width:1199px){
 .split5-service{grid-template-columns:38px 1fr 18px;column-gap:14px;row-gap:5px;padding-block:21px}
 .split5-service-icon{grid-column:1;grid-row:1/3}
 .split5-service-name{grid-column:2;grid-row:1}
 .split5-service-name strong{display:block}
 .split5-service-name>span{display:block;margin:2px 0 0;font-size:12px}
 .split5-service-description{grid-column:2;grid-row:2;border:0;padding:0;margin:0;font-size:14px;max-width:none}
 .split5-service-arrow{display:block;grid-column:3;grid-row:1/3}
}
@media(max-width:719px){
 .split5-service{grid-template-columns:42px 1fr 18px;column-gap:16px;row-gap:7px;padding-block:22px}
 .split5-service-icon{grid-column:1;grid-row:1/3;align-self:start;margin-top:4px;width:42px;height:42px}
 .split5-service-name{grid-column:2;grid-row:1}
 .split5-service-name strong{font-size:24px;line-height:1.5}
 .split5-service-name>span{font-size:13px;margin-top:3px}
 .split5-service-description{grid-column:2;grid-row:2;border:0;padding:0;margin:0;font-size:15px;line-height:1.85;max-width:none}
 .split5-service-arrow{display:block;grid-column:3;grid-row:1/3}
 .split5-work-label p{font-size:12px}
 .split5-project-caption{font-size:11px}
 .split5-project-caption small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.split5 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.split5{display:block}.split5-business{background:#fff;color:#000}.split5-fold{display:none}}
