/* An upper-left reading path: statement, meaning, proof, conversation. */
/* Thin luminous films: transparent layers with a readable dark substrate. */
.demo-feature{background:radial-gradient(ellipse at 95% 10%,#29708355,transparent 65%),#071624}
.demo-preview{background:linear-gradient(135deg,#a5e7ed12,#6dc6dc05 55%,#a5e7ed0c);border:1px solid #a9eaf43b;backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #d3faff30,0 20px 70px #0003;position:relative;overflow:hidden}
.demo-preview:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,#c9faff0a 35%,transparent 53%);pointer-events:none}
.preview-top{border-color:#c1edf31f}
.flow-node{background:linear-gradient(125deg,#9adfea12,#72a8bb06);border:1px solid #b3e7ee29;box-shadow:inset 0 1px 0 #d3faff18;color:#edf7fa;backdrop-filter:blur(8px)}
.flow-node.highlighted{background:linear-gradient(125deg,#62e4ed18,#62e4ed06);border-color:#84dfe64a}
.flow-node small,.preview-status{color:#b7cfd9}
.demo-reel{background:radial-gradient(ellipse at 28% 55%,#28667966,transparent 55%),radial-gradient(ellipse at 85% 15%,#2e426f55,transparent 60%),#060d1b}
.demo-reel .reel-card{background:linear-gradient(125deg,#a3eff01a,#78c9dc06 55%,#c1f5ff12);border:1px solid #b8eff04a;box-shadow:inset 0 1px 0 #d7ffff42,0 18px 35px #0002;backdrop-filter:blur(12px);color:#e8f4f7}
.demo-reel .reel-hp{background:linear-gradient(125deg,#deeee925,#9bd1c30a 60%,#c0ded61a)}
.demo-reel .reel-lp{background:linear-gradient(125deg,#8ddbc821,#85d4cd05 65%,#b4eee515)}
.demo-reel .reel-fde{background:linear-gradient(125deg,#9db5e525,#8ea5de07 60%,#c0d4ff14)}
.demo-reel .reel-card .reel-ui{color:#b9d3dd}
.demo-reel .reel-card:after{opacity:.45;border-color:#d5faff44;box-shadow:20px 0 0 #c6f6ff0a,40px 0 0 #c6f6ff05}
.demo-reel .reel-fde:after{box-shadow:0 0 40px #8ccdeb18,inset 0 0 35px #8ccdeb10}
.demo-reel .reel-card:hover{filter:brightness(1.12);border-color:#d0faff80;box-shadow:inset 0 1px 0 #d7ffff70,0 0 40px #79cadd12}
.demo-reel .reel-back{opacity:.48}
.hero{justify-content:flex-start;min-height:760px;padding:0;height:100svh;max-height:1080px}
.hero .hero-inner{padding-top:clamp(185px,24svh,250px)}
.hero .eyebrow{font-size:10px;font-weight:400;letter-spacing:.21em;color:#9db6c8;margin-bottom:28px}
.hero h1{font-size:clamp(64px,7.2vw,104px);font-weight:500;letter-spacing:.075em;line-height:1.5}
.hero .hero-english{position:static;max-width:none;margin-top:20px;font-size:clamp(17px,1.6vw,22px);font-weight:400;line-height:1.45;letter-spacing:.015em;color:#c2d7df}
.hero .hero-bottom{display:block;margin-top:40px}
.hero .hero-bottom p{font-size:15px;font-weight:400;line-height:2.05;letter-spacing:.035em;color:#b9cad5}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:28px}
.hero .hero-bottom .button{margin:0;min-width:200px;min-height:54px;padding:14px 21px;border:1px solid #77dae4;background:#65dfe7;color:#09212b;font-size:13px;font-weight:400;gap:30px}
.hero .hero-bottom .button:hover{background:#b0f4f7;border-color:#b0f4f7}
.hero-consult{font-size:13px;font-weight:400;letter-spacing:.03em;color:#d3e3e8;padding:14px 0;border-bottom:1px solid #a6c9d04d}
.hero-consult span{margin-left:16px}.hero-consult:hover{color:#62e4ed;border-color:#62e4ed}
.hero .hero-foot{font-size:10px;letter-spacing:.12em;color:#8faab9}.hero .hero-foot a{font-size:10px;letter-spacing:.09em}
/* Avoid synthetic bold on the single-weight Japanese body font. */
main section:not(.contact) h2{font-weight:400;font-size:clamp(28px,2.8vw,40px);line-height:1.75;letter-spacing:.025em}
.demo-feature h3,.service-row h3,.pricing-grid h3,.work-card h3,.value-grid h3,.process li h3,.demo-reel .reel-card strong,#reel-stage .mini-site h3{font-weight:400;letter-spacing:.035em}
.demo-reel .reel-card strong{font-size:25px;line-height:1.75}
.button,.text-link,.header nav,.industry-pills button,.tile-path{font-weight:400}
.hero:after{background:linear-gradient(0deg,#040918 0%,transparent 30%),linear-gradient(90deg,#040918bb 0%,#04091888 38%,transparent 75%)}
@media(max-width:1100px){.hero .hero-inner{padding-top:190px}.hero .hero-english{font-size:19px}}
@media(max-width:760px){
 .hero{min-height:720px;height:100svh;max-height:950px;padding:0}
 .hero .hero-inner{padding-top:155px}
 .hero .eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:25px}
 .hero h1{font-size:clamp(31px,10.6vw,64px);letter-spacing:.035em;line-height:1.6}
 .hero .hero-english{font-size:clamp(13px,3.65vw,18px);margin-top:18px;line-height:1.5}
 .hero .hero-bottom{margin-top:32px}.hero .hero-bottom p{font-size:14px;line-height:2;letter-spacing:.025em}
 .hero-actions{gap:20px;margin-top:25px}.hero .hero-bottom .button{min-width:185px;padding:14px 18px;font-size:12px;min-height:52px}.hero-consult{font-size:12px}.hero-consult span{margin-left:8px}
 .hero .hero-foot>span:first-child{font-size:8px;letter-spacing:.045em}.hero .hero-foot a{font-size:9px;letter-spacing:.03em}
 .demo-reel .reel-card strong{font-size:24px}
}
@media(max-width:360px){.hero-actions{gap:10px}.hero .hero-bottom .button{min-width:166px;gap:18px}.hero-consult{font-size:11px}}

/* 2026-09-07: reviewable intake workflow. */
.fde-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.fde-pills button{border:1px solid #91dbe644;background:#95dfe90b;color:#d9eef3;padding:10px 14px;font:13px var(--sans);cursor:pointer;min-height:44px}
.fde-pills button:hover{background:#95dfe924}
.fde-input-label{display:block;font-size:14px;margin-bottom:10px}
.fde-workbench textarea,.fde-workbench select{width:100%;box-sizing:border-box;border:1px solid #92cfd34d;background:#101f30;color:#edf7fa;padding:14px;font:16px/1.8 var(--sans);border-radius:0}
.fde-workbench textarea{resize:vertical;min-height:140px}
.fde-workbench .fde-note{font-size:12px;line-height:1.8;color:#aac3cf;margin:12px 0 20px}
.fde-workbench .result-box{margin-top:25px}
.fde-workbench .result-box label{display:block;font-size:13px;margin:18px 0 7px}
.fde-handoff{padding:10px 0}.fde-handoff p{font-size:14px}
.fde-workbench dd{overflow-wrap:anywhere}
.fde-error{color:#ffbaa9}

/* 2026-09-08: LINE entry retains the selected industry into booking. */
.line-industry-label{display:block;font-size:13px;margin-bottom:8px;color:#d5e8f0}.line-demo #line-industry{width:100%;padding:12px;margin-bottom:20px;background:#142c3c;border:1px solid #93d0dc50;color:#ecf6fa;font:16px var(--sans);min-height:44px}

/* 2026-09-09: HP services lead directly to the selected consultation. */
.hp-services{margin-top:20px}.hp-service{border-top:1px solid #496d6b40;padding:0}
.hp-service:last-of-type{border-bottom:1px solid #496d6b40}
.hp-service summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:18px 0;font-size:17px;min-height:54px}
.hp-service summary::-webkit-details-marker{display:none}.hp-service summary span{font-size:20px;transition:rotate .2s}.hp-service[open] summary span{rotate:45deg}
.hp-service p{margin:0 0 15px;font-size:14px!important;line-height:1.9}
.hp-service button{border:1px solid #345b5b55;background:#294d4d;color:#f0f7f5;padding:13px 16px;margin-bottom:20px;cursor:pointer;font:14px var(--sans);min-height:44px;text-align:left}
.hp-service button:hover{background:#183d3d}.hp-book-note{font-size:12px!important;line-height:1.8;color:#45615d;margin-top:20px}
@media(prefers-reduced-motion:reduce){.hp-service summary span{transition:none}}

.mini-hp .hp-service p{color:#345351}

/* 2026-09-11: LP topic selection carries into booking. */
.lp-topics{border:0;padding:0;margin:24px 0 12px;min-width:0}.lp-topics legend{font-size:14px;margin-bottom:12px}.lp-topics label{display:flex;align-items:center;gap:12px;padding:14px;margin-top:8px;border:1px solid #96dbe04d;background:#b6eff708;cursor:pointer;text-align:left;font-size:15px;line-height:1.7}.lp-topics label:has(input:checked){border-color:#72e2e8;background:#7adee21c}.lp-topics input{accent-color:#69dce3;width:18px;height:18px;flex-shrink:0}.mini-lp .lp-note{font-size:12px;color:#bed6dd;line-height:1.8}.mini-lp [data-book]{white-space:normal;text-align:left}

/* Dede's three hideouts: invisible until discovered. */
.dede-escape{position:fixed;z-index:35;pointer-events:none;contain:layout style;opacity:0}
.dede-escape img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px #64dceb44)}
.dede-escape .dede-flee{opacity:0}

.about-dd.dede-found>span{transform:translate(28px,-.12em) rotate(13deg)}
.dede-wake{position:fixed;width:2px;height:2px;border-radius:50%;background:#80e7f5;z-index:34;pointer-events:none}
.dede-escape .dede-peek{opacity:0}
@media(prefers-reduced-motion:reduce){.about-dd.dede-found>span{transform:none}}

/* Real occlusion: the hiding object stays in front of Dede. */
.dede-hideout{position:relative;z-index:40}
.about-dd.dede-found>span{animation:dede-door .85s cubic-bezier(.2,.8,.2,1) both}
@keyframes dede-door{0%,15%{transform:translate(0,0) rotate(0)}35%{transform:translate(9px,-2px) rotate(3deg)}60%,100%{transform:translate(32px,-.12em) rotate(13deg)}}
@media(prefers-reduced-motion:reduce){.about-dd.dede-found>span{animation:none}}

/* Smaller hiding mark and a quick, light escape. */
.about-dd{font-size:clamp(110px,12vw,175px)!important;line-height:1.25;width:max-content;max-width:100%}
.about-dd.dede-found>span{animation-duration:.42s}
@media(max-width:760px){.about-dd{font-size:110px!important}}

.dede-curtain{position:fixed;inset:0;background:#060e1b;z-index:110;pointer-events:none}
.dede-welcome{position:fixed;z-index:111;pointer-events:none}.dede-welcome img{width:100%;height:100%;object-fit:contain}
.footer .brand{position:relative;margin-right:64px}
.dede-goodbye{position:absolute;left:100%;top:50%;width:62px;height:72px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .7s}
.dede-goodbye.visible{opacity:.85}.dede-goodbye img{width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.dede-goodbye{transition:none}}

/* Opening signature: a compact wordmark with Dede at its right. */
.dede-opening-brand{position:fixed;z-index:111;display:flex;align-items:center;gap:22px;white-space:nowrap;pointer-events:none;color:#edf5f5}
.dede-opening-brand .brand-mark{font-size:66px;line-height:1;flex:none}
.dede-opening-word{font:500 clamp(20px,3vw,42px)/1.1 Arial,sans-serif;letter-spacing:-.045em}
@media(max-width:760px){.dede-opening-brand{gap:10px}.dede-opening-brand .brand-mark{font-size:34px}.dede-opening-word{font-size:clamp(17px,4.8vw,26px)}}

.line-doc-checklist{border:1px solid #5acbd044;border-radius:12px;padding:16px;margin:16px 0;color:inherit}.line-doc-checklist legend{font-size:14px;padding:0 6px}.line-doc-checklist label{display:flex;gap:12px;align-items:center;min-height:48px;cursor:pointer}.line-doc-checklist input{width:20px;height:20px;accent-color:#169c9d;flex:none}.line-doc-status{font-size:13px;line-height:1.7;margin:12px 0 0}

.demo-slot-summary{border-left:2px solid #66e6e8;background:#66e6e80c;padding:14px 16px;margin:18px 0 0;font-size:14px;line-height:1.8;color:#dcebed}

.hero h1.hero-type{display:flex;align-items:center;white-space:nowrap;line-height:1.65;letter-spacing:0;font-size:clamp(38px,6.8vw,98px);padding-block:.15em}
.hero-type i{font-style:normal;display:inline-block;margin:0 .025em;transform:translateY(-.13em) rotate(-8deg)}
.hero-type i:nth-child(even){transform:translateY(.14em) rotate(8deg)}
.hero-type i:nth-child(n+5){color:var(--cyan)}
.hero-type i:nth-child(4),.hero-type i:nth-child(7){font-size:.65em;margin:0 .12em}
.hero-type i:nth-child(5){transform:translateY(-.17em) rotate(-8deg) scale(1.18)}
.hero-type i:nth-child(6){transform:translateY(.14em) rotate(8deg) scale(1.1)}
@media(max-width:760px){.hero h1.hero-type{font-size:10vw}}

/* Uneven rhythm: deliberately different proportions, one readable phrase. */
.hero h1.hero-type{font-size:clamp(38px,6.8vw,98px);gap:.015em}
.hero-type i:nth-child(1){font-size:1.2em;transform:translateY(-.12em) rotate(-11deg)}
.hero-type i:nth-child(2){font-size:.72em;transform:translateY(.2em) rotate(9deg)}
.hero-type i:nth-child(3){font-size:1.05em;transform:translateY(-.025em) rotate(-5deg)}
.hero-type i:nth-child(4){font-size:.48em;transform:translateY(.24em) rotate(12deg);margin:0 .16em}
.hero-type i:nth-child(5){font-size:1.38em;transform:translateY(-.08em) rotate(-9deg);margin-left:.04em}
.hero-type i:nth-child(6){font-size:.88em;transform:translateY(.2em) rotate(11deg)}
.hero-type i:nth-child(7){font-size:.56em;transform:translateY(-.12em) rotate(-14deg)}
@media(max-width:760px){.hero h1.hero-type{font-size:9.6vw}}
/* Selected work gateways sit ahead of the interactive concept demo. */
.portfolio-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:12px}
.portfolio-path{display:flex;flex-direction:column;min-width:0;border:1px solid #1225322e;background:#f8fbfb;color:#122532;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.portfolio-path:hover{transform:translateY(-7px);border-color:#2b6b78;box-shadow:0 22px 44px #11314b18}
.portfolio-path:focus-visible{outline-color:#167e90;outline-offset:4px}
.path-number{padding:17px 20px;font:600 11px/1.2 var(--en);letter-spacing:.18em;color:#336273}
.path-image{height:235px;overflow:hidden;background:#0a1724}
.path-image img{height:100%;width:100%;object-fit:cover;object-position:center 24%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.portfolio-path:hover .path-image img{transform:scale(1.06)}
.path-body{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:start;padding:22px 20px 26px}
.path-body strong{font-family:var(--display);font-size:clamp(23px,2.2vw,31px);line-height:1.5;font-weight:500}
.path-body small{grid-column:1;font-size:12px;line-height:1.7;color:#526a79}
.path-body i{grid-column:2;grid-row:1 / span 2;align-self:center;font:400 26px/1 var(--en);font-style:normal;color:#277b8b;transition:transform .25s}
.portfolio-path:hover .path-body i{transform:translate(3px,-3px)}
.works .portfolio-note{font-size:11px;line-height:1.7;margin:16px 0 0;color:#627580}
.works .interactive-label{margin:105px 0 36px}
@media(max-width:900px){.portfolio-paths{grid-template-columns:1fr 1fr}.path-image{height:210px}}
@media(max-width:600px){.portfolio-paths{display:grid;grid-template-columns:1fr;gap:15px}.portfolio-path{display:grid;grid-template-columns:43% 1fr;grid-template-rows:auto 1fr;min-height:170px}.path-number{grid-column:2;padding:16px 15px 0;font-size:10px}.path-image{grid-column:1;grid-row:1 / span 2;height:100%;min-height:170px}.path-body{grid-column:2;grid-row:2;padding:8px 15px 16px;gap:4px}.path-body strong{font-size:23px}.path-body small{font-size:10px}.path-body i{font-size:20px}.works .interactive-label{margin-top:70px}.works .portfolio-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.portfolio-path,.path-image img,.path-body i{transition:none!important}}

/* Questions form the final decision point before the consultation CTA. */
.faq{background:#e8eef0;color:#112b39;padding-block:120px 130px}
.faq .section-label{color:#496273}.faq .section-label>span:first-child{color:#26798c}
.faq-layout{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.3fr);gap:clamp(55px,8vw,150px);align-items:start}
.faq-intro{position:sticky;top:128px}.faq h2{font-family:var(--display);font-size:clamp(37px,4.3vw,59px);font-weight:400;line-height:1.55;letter-spacing:.025em;margin:0 0 25px}
.faq-intro p{max-width:360px;font-size:15px;line-height:2;color:#46606d;margin:0 0 28px}
.faq .text-link{color:#163849;border-color:#6692a3;font-size:13px}.faq .text-link span{color:#167f94}
.faq-list{border-top:1px solid #66879666}.faq-list details{border-bottom:1px solid #66879666}
.faq-list summary{list-style:none;display:grid;grid-template-columns:30px minmax(0,1fr) 24px;align-items:start;gap:16px;padding:27px 0;cursor:pointer;font-size:17px;font-weight:500;line-height:1.7;transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:hover{color:#147e91}.faq-list summary:focus-visible{outline:2px solid #14889a;outline-offset:4px}
.faq-number{font:500 11px/2.5 var(--en);color:#518293}.faq-symbol{font:300 24px/1.2 var(--en);color:#28859a;text-align:right;transition:transform .25s}.faq-list details[open] .faq-symbol{transform:rotate(45deg)}
.faq-answer{padding:0 40px 27px 46px}.faq-answer p{max-width:600px;font-size:14px;line-height:2;color:#3e5866;margin:0}
@media(max-width:800px){.faq{padding-block:76px 88px}.faq-layout{display:block}.faq-intro{position:static;margin-bottom:42px}.faq h2{font-size:clamp(34px,8.2vw,48px)}.faq-intro p{font-size:14px}.faq-list summary{font-size:15px;gap:10px;grid-template-columns:23px minmax(0,1fr) 23px;padding:23px 0}.faq-answer{padding:0 20px 24px 33px}.faq-answer p{font-size:13px}}