/* Neo Japan: ukiyo-e as the identity, the work as the evidence. */
:root { --latin: 'Barlow', 'Noto Sans JP', sans-serif; --ui: 'Barlow', 'Noto Sans JP', sans-serif; --gutter: clamp(24px,5.5vw,110px); }
body { font-family: var(--ui); background: #090d10; }
body:before { opacity: .013; }
.logo { font-family: var(--latin); font-weight: 600; letter-spacing: -.065em; }
.logo span { font-weight: 400; font-size: 20px; letter-spacing: -.035em; }
.desktop-nav a { font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.hero { min-height: 860px; height: min(960px,100svh); }
.hero-content { padding-top: clamp(165px,19vh,205px); }
.hero-location { font: 500 12px/1.6 var(--ui); letter-spacing: .15em; margin-bottom: 30px; color: #c1d1d5; }
.hero h1 { font-size: clamp(48px,4.6vw,70px); line-height: 1.55; letter-spacing: .06em; }
.hero-english { font: 600 clamp(24px,2.35vw,37px)/1.3 var(--latin); letter-spacing: -.015em; margin-top: 28px; color: #f0f7f8; }
.hero-description { font: 400 15px/2.1 var(--ui); letter-spacing: .025em; margin-top: 19px; }
.hero-link { font-size: 14px; letter-spacing: .1em; font-weight: 500; margin-top: 27px; }
.hero-side-label { position: absolute; right: 38px; top: 215px; writing-mode: vertical-rl; font: 500 11px/1.5 var(--ui); letter-spacing: .16em; }
.hero-shade { background: linear-gradient(90deg,#050b10ba,#050b1066 35%,transparent 69%); }
.eyebrow { font: 500 12px/1.5 var(--ui); letter-spacing: .12em; }
.section-copy { font-family: var(--ui); font-size: 16px; letter-spacing: .015em; }
.section-intro:before { display: none; }
.latin-title,.section-intro h2.latin-title { font: 500 clamp(66px,7.5vw,108px)/.9 var(--latin); letter-spacing: -.055em; }
.service { padding-top: 65px; padding-bottom: 100px; }
.service-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 42px; margin-bottom: 50px; }
.service-intro .eyebrow { margin-bottom: 22px; color: var(--cyan); }
.service-intro h3 { font-size: 29px; margin-top: 0; }
.service-intro .section-copy { font-size: 15px; margin-top: 18px; line-height: 1.9; }
.service-grid { gap: 18px; }
.service-card { aspect-ratio: 1.9; border-color: #27353d; }
.service-card>img { opacity: .76; object-position: center 38%; }
.service-card:before { background: linear-gradient(0deg,#060c10f5,#060c1060 42%,transparent 80%); }
.service-text { left: 25px; bottom: 20px; }
.service-text strong { font: 500 clamp(23px,2.3vw,33px)/1.1 var(--latin); letter-spacing: -.015em; }
.service-jp { font: 400 14px/1.5 var(--ui); }
.service-text small { font-family: var(--ui); line-height: 1.6; font-size: 12px; margin-top: 6px; color: #b7c8cc; }
.circle-arrow { width: 42px; height: 42px; right: 23px; bottom: 23px; }
.center-action { margin-top: 35px; }
.outline-button,.solid-button { font-family: var(--ui); font-size: 14px; letter-spacing: .025em; min-height: 54px; }
.proof { padding-block: 64px 110px; border-top: 1px solid #283038; }
.proof-heading { display: flex; justify-content: space-between; align-items: start; gap: 40px; margin-bottom: 30px; }
.proof-heading .eyebrow { color: var(--cyan); }
.proof h2 { font: 400 25px/1.7 var(--serif); }
.proof-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 7%; align-items: center; }
.proof-number>p:first-child { line-height: 1; display: flex; align-items: baseline; gap: 17px; }
.proof-number strong { font: 500 clamp(95px,13vw,192px)/1 var(--latin); letter-spacing: -.065em; }
.proof-number>p>span { font: 400 14px/1.2 var(--latin); color: #a5b4bb; white-space: nowrap; }
.proof-number h3 { font: 500 22px/1.6 var(--latin); letter-spacing: .015em; margin-top: 12px; }
.proof-caption { font-size: 14px; color: #bac7cb; }
.source-note { display: inline-block; font-size: 12px; color: #8fa3ad; text-decoration: underline; text-underline-offset: 4px; margin-top: 16px; }
.proof-capabilities { border-left: 1px solid #34414a; padding-left: 12%; }
.proof-capabilities>p { font: 500 clamp(29px,3.7vw,53px)/1.12 var(--latin); letter-spacing: -.025em; }
.proof-capabilities>span { display: block; color: #c4cfd2; font-size: 15px; line-height: 1.9; margin-top: 25px; }
.proof-tags { display: flex; flex-wrap: wrap; gap: 14px; font: 500 11px/1.5 var(--ui); letter-spacing: .06em; margin-top: 28px; color: #7796a2; }
.works { padding-block: 94px 110px; background: #030608; overflow: visible; }
.works-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.works-heading .eyebrow { margin-bottom: 22px; color: #9cadb5; }
.works-heading h2 { font-size: clamp(100px,14vw,195px); line-height: .78; }
.works-heading h2>span { color: var(--cyan); }
.works-heading>p { font: 400 21px/1.8 var(--serif); margin-bottom: 0; }
.works-heading>p>span { font: 400 14px/1.7 var(--ui); color: #aabcc3; }
.work-filters { padding-top: 5px; gap: 30px; margin-bottom: 34px; border-color: #29353c; }
.work-filters button { font: 500 13px/1.8 var(--ui); min-height: 45px; }
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 70px 28px; }
.project-lead { grid-column: 1/-1; }
.project-image,.reel-poster { position: relative; width: 100%; padding: 0; display: block; background: #071019; overflow: hidden; text-align: left; }
.project-image { aspect-ratio: 1.6; }
.project-image>img,.reel-poster>img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s,filter .7s; }
.project-image:hover>img { transform: scale(1.025); filter: brightness(1.1); }
.project-type { position: absolute; top: 18px; left: 18px; padding: 6px 10px; font: 500 11px/1.5 var(--ui); letter-spacing: .08em; background: #081118ce; }
.project-open { position: absolute; right: 18px; bottom: 18px; font: 500 11px/1.5 var(--ui); padding: 8px 11px; color: #fff; background: #071017ce; transition: background .2s; }
.project-image:hover .project-open { background: var(--cyan); color: #061013; }
.project-meta { padding-top: 22px; border-top: 1px solid #29353b; margin-top: 18px; }
.project-meta>div>span,.project-meta dt { color: #8ca3ae; font: 400 11px/1.5 var(--ui); letter-spacing: .09em; }
.project-meta h3 { font: 500 clamp(23px,2.5vw,35px)/1.15 var(--latin); letter-spacing: -.025em; margin-top: 8px; }
.project-meta dl { display: flex; flex-wrap: wrap; gap: 15px 24px; margin: 21px 0 0; }
.project-meta dd { font: 400 12px/1.6 var(--ui); margin: 5px 0 0; }
.project-meta>p { font-size: 12px; color: #a3b7c0; margin-top: 12px; }
.project-lead .project-meta { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.project-lead .project-meta dl { margin-top: 0; gap: 50px; }
.project-context { font-size: 12px; color: #93a7b1; margin-top: 15px; }
.project-context a { text-decoration: underline; text-underline-offset: 4px; margin-left: 15px; color: #d5e1e5; }
.work-transition { --stage-height: min(56.25vw,675px); height: var(--stage-height); position: relative; }
.work-stage { position: relative; height: var(--stage-height); overflow: hidden; background: #030608; }
.transition-enabled .work-transition { height: calc(var(--stage-height) + 430px); }
.transition-enabled .work-stage { position: sticky; top: 34px; }
.reel-poster { height: 100%; }
.reel-poster>img { object-fit: cover; filter: brightness(.88); }
.reel-poster:hover>img { filter: brightness(1.06); }
.reel-play { position: absolute; inset: 0; z-index: 2; display: flex; gap: 18px; align-items: center; justify-content: center; font: 500 18px/1.4 var(--ui); letter-spacing: .08em; text-shadow: 0 2px 15px #000; }
.reel-play>span:last-child { display: flex; flex-direction: column; gap: 6px; }
.reel-play small { font: 400 10px/1.5 var(--ui); letter-spacing: .12em; color: #c3d5dc; }
.play-symbol { display: grid; place-items: center; padding-left: 4px; width: 77px; height: 77px; border: 1px solid #a9e9f1; border-radius: 50%; background: #06243090; color: #e6fdff; font-size: 22px; transition: background .3s,color .3s; }
.reel-poster:hover .play-symbol { background: var(--cyan); color: #060d10; }
.frame-label { position: absolute; bottom: 23px; left: 25px; z-index: 3; font: 400 11px/1.5 var(--ui); letter-spacing: .12em; pointer-events: none; }
.wave-to-points { display: none; position: absolute; inset: 0; pointer-events: none; background: #03080c; }
.transition-enabled .wave-to-points { display: block; }
.wave-particles { position: absolute; width: 100%; height: 100%; inset: 0; }
.transition-note { position: absolute; bottom: 23px; right: 25px; font: 500 11px/1.5 var(--ui); letter-spacing: .1em; color: #acd6e1; }
.reel-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #03070a; }
.reel-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; opacity: 0; pointer-events: none; }
.reel-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.reel-loading { position: absolute; padding: 12px 18px; background: #07151ee6; font: 500 14px/1.6 var(--ui); border: 1px solid #6eabbc; }
.reel-player.is-ready iframe { opacity: 1; pointer-events: auto; }
.reel-player.is-ready .reel-fallback { visibility: hidden; }
.kusabi-feature { padding-top: 115px; background: #090e10; }
.kusabi-copy .latin-title { font-size: 86px; }
.kusabi-copy h3 { margin-top: 25px; font-size: 32px; }
.kusabi-copy .section-copy { font-size: 15px; }
.kusabi-feature .cloud-kusabi { opacity: .26; }
.kusabi-vertical { display: none; }
.kusabi-logo>span { font-family: var(--serif); }
.procession { margin-top: 48px; max-width: 1320px; }
.procession img { max-height: 375px; object-fit: cover; object-position: center 70%; }
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9%; padding-block: 100px 110px; }
.about-location { display: block; margin-top: 32px; font: 400 12px/1.8 var(--ui); letter-spacing: .08em; color: #8eabb6; }
.about .eyebrow { margin-bottom: 24px; color: #a9bcc4; }
.about-copy h3 { font: 400 37px/1.6 var(--serif); margin: 0 0 32px; }
.about-copy>p { font: 400 16px/2.15 var(--ui); color: #c4d0d6; margin-bottom: 24px; }
.about-disciplines { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid #29353d; padding-top: 24px; margin-top: 35px; font: 500 12px/1.6 var(--ui); color: #87a5b2; }
.about-copy .outline-button { margin-top: 28px; }
.news { border-top: 1px solid #29353d; padding-block: 65px 90px; }
.news .section-intro { display: flex; align-items: baseline; gap: 30px; }
.news .latin-title { font-size: 67px; }
.news-row { grid-template-columns: 110px 100px 1fr 26px; font-family: var(--ui); }
.news-headline { font-family: var(--ui); }
.contact { margin-top: 0; min-height: auto; background: #10191e; padding-block: 62px 85px; border-top: 1px solid #314149; }
.contact-top { display: flex; justify-content: space-between; gap: 20px; color: #92abb5; }
.contact-top>span { font: 400 12px/1.5 var(--ui); letter-spacing: .08em; }
.contact h2 { font: 500 clamp(100px,13.8vw,198px)/.83 var(--latin); letter-spacing: -.06em; margin-top: 35px; }
.contact h2>span { color: var(--cyan); }
.contact h2 br { display: none; }
.contact-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 45px; }
.contact-bottom h3 { font: 400 27px/1.8 var(--serif); }
.contact-bottom p { font: 400 15px/1.95 var(--ui); color: #acbfc9; margin-top: 15px; }
.contact .solid-button { margin-top: 0; min-width: 320px; }
.footer { padding-block: 40px 24px; }
.footer nav a { font-size: 12px; }
.footer-bottom { margin-top: 32px; font-family: var(--ui); }
.dialog-content p,.dialog-content ul { font-family: var(--ui); }
@media(min-width:1800px) { .hero { height: 980px; } }
@media(max-width:1100px) {
  .hero { min-height: 840px; height: 900px; }
  .hero-location { font-size: 11px; }
  .hero h1 { font-size: 55px; }
  .hero-english { font-size: 29px; max-width: 550px; }
  .service-intro { gap: 26px; }
  .service-intro h3 { font-size: 24px; }
  .service-card { aspect-ratio: 1.65; }
  .service-text strong { font-size: 27px; }
  .proof-grid { gap: 4%; }
  .proof-number>p:first-child { gap: 10px; }
  .proof-number>p>span { font-size: 11px; }
  .proof-capabilities { padding-left: 9%; }
  .project-lead .project-meta dl { gap: 25px; }
  .kusabi-copy .latin-title { font-size: 76px; }
  .about { gap: 6%; }
  .contact .solid-button { min-width: 275px; }
}
@media(max-width:800px) {
  .hero { min-height: 820px; height: 880px; max-height: none; }
  .hero-content { padding-top: 156px; }
  .hero-location { max-width: 300px; line-height: 1.8; font-size: 10px; }
  .hero h1 { font-size: 47px; }
  .hero-english { font-size: 26px; max-width: 410px; line-height: 1.4; }
  .hero-description { font-size: 14px; max-width: 420px; }
  .hero-side-label { display: none; }
  .service { padding-block: 45px 70px; }
  .service-intro { align-items: start; gap: 22px; }
  .service-intro h3 { font-size: 21px; }
  .service-intro .section-copy { font-size: 14px; }
  .service-card { aspect-ratio: 1.2; }
  .service-text { left: 18px; bottom: 17px; padding-right: 42px; }
  .service-text strong { font-size: 25px; }
  .service-jp { font-size: 13px; }
  .service-text small { font-size: 11px; }
  .circle-arrow { right: 16px; bottom: 19px; width: 36px; height: 36px; }
  .proof { padding-block: 45px 75px; }
  .proof-heading { display: block; }
  .proof h2 { font-size: 25px; margin-top: 20px; }
  .proof-grid { gap: 30px; }
  .proof-number strong { font-size: 100px; }
  .proof-number>p:first-child { display: block; }
  .proof-number>p>span { display: block; margin-top: 10px; }
  .proof-number h3 { font-size: 17px; }
  .proof-capabilities>p { font-size: 32px; }
  .proof-capabilities>span { font-size: 13px; }
  .works { padding-block: 65px 75px; }
  .works-heading { align-items: start; gap: 30px; }
  .works-heading h2 { font-size: 99px; }
  .works-heading>p { font-size: 17px; }
  .project-grid { gap: 48px 20px; }
  .project-image { aspect-ratio: 1.25; }
  .project-type { top: 12px; left: 12px; font-size: 9px; }
  .project-open { right: 12px; bottom: 12px; font-size: 10px; }
  .project-meta h3 { font-size: 26px; }
  .project-lead .project-meta { display: block; }
  .project-lead .project-meta dl { margin-top: 23px; gap: 30px; }
  .project-meta dl { gap: 15px; }
  .project-meta dd { font-size: 11px; }
  .transition-enabled .work-transition { height: calc(var(--stage-height) + 320px); }
  .transition-enabled .work-stage { top: 20px; }
  .kusabi-copy .latin-title { font-size: 65px; }
  .kusabi-copy h3 { font-size: 26px; }
  .about { grid-template-columns: .7fr 1.3fr; padding-block: 70px; }
  .about .latin-title { font-size: 60px; }
  .about-copy h3 { font-size: 30px; }
  .about-copy>p { font-size: 14px; }
  .about-copy>p br { display: none; }
  .news { padding-block: 50px 65px; }
  .contact { padding-block: 45px 60px; }
  .contact h2 { font-size: 112px; }
  .contact h2 br { display: block; }
  .contact-bottom { align-items: start; }
  .contact-bottom h3 { font-size: 24px; }
  .contact-bottom p { font-size: 13px; }
  .contact .solid-button { min-width: 240px; gap: 18px; font-size: 13px; }
}
@media(max-width:520px) {
  :root { --gutter: 24px; }
  .hero { min-height: 780px; height: 830px; }
  .hero-content { padding-top: 141px; }
  .hero-location { font-size: 9px; max-width: 240px; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(31px,8.4vw,41px); line-height: 1.65; }
  .hero-english { font-size: 24px; max-width: 310px; margin-top: 23px; }
  .hero-description { font-size: 13px; max-width: 300px; line-height: 1.9; }
  .hero-description br { display: none; }
  .hero-link { font-size: 12px; }
  .hero-shade { background: linear-gradient(90deg,#040a10cf,#040a1040); }
  .service-intro { grid-template-columns: 1fr; gap: 27px; margin-bottom: 30px; }
  .latin-title,.section-intro h2.latin-title { font-size: 69px; }
  .service-intro h3 { font-size: 25px; }
  .service-intro .eyebrow { margin-bottom: 15px; }
  .service-card { aspect-ratio: 1.55; }
  .service-text strong { font-size: 28px; }
  .service-text small { font-size: 12px; }
  .service-jp { font-size: 14px; }
  .service-text { padding-right: 50px; }
  .circle-arrow { width: 40px; height: 40px; }
  .proof-grid { grid-template-columns: 1fr; gap: 33px; }
  .proof-number strong { font-size: clamp(98px,31vw,151px); }
  .proof-number>p:first-child { display: flex; align-items: baseline; }
  .proof-number>p>span { font-size: 12px; }
  .proof-number h3 { font-size: 22px; }
  .proof-capabilities { border-left: 0; border-top: 1px solid #293840; padding: 30px 0 0; }
  .proof-capabilities>p { font-size: 37px; }
  .proof-capabilities>span { font-size: 15px; }
  .works-heading { flex-direction: column; gap: 25px; margin-bottom: 28px; }
  .works-heading .eyebrow { font-size: 10px; }
  .works-heading h2 { font-size: 91px; }
  .works-heading>p { font-size: 22px; }
  .works-heading>p>span { font-size: 14px; }
  .work-filters { gap: 21px; }
  .work-filters button { font-size: 11px; }
  .project-grid { grid-template-columns: 1fr; gap: 44px; }
  .project-lead { grid-column: auto; }
  .work-transition { --stage-height: 61vw; }
  .transition-enabled .work-transition { height: var(--stage-height); }
  .transition-enabled .work-stage { position: relative; top: auto; }
  .transition-enabled .wave-to-points { display: none; }
  .frame-label { bottom: 14px; left: 15px; font-size: 9px; }
  .reel-play { gap: 13px; font-size: 15px; }
  .play-symbol { width: 57px; height: 57px; font-size: 17px; }
  .reel-play small { font-size: 8px; }
  .project-lead .project-meta dl { gap: 17px 24px; }
  .project-meta h3 { font-size: 27px; }
  .project-image { aspect-ratio: 1.45; }
  .project-type { font-size: 10px; }
  .project-context { font-size: 11px; line-height: 1.8; }
  .project-context a { display: block; margin-left: 0; margin-top: 7px; }
  .kusabi-feature { padding-top: 70px; }
  .kusabi-top { gap: 35px; }
  .kusabi-copy .section-copy { font-size: 14px; }
  .procession { margin-top: 25px; }
  .procession img { max-height: none; }
  .about { grid-template-columns: 1fr; gap: 35px; padding-block: 65px; }
  .about .latin-title { font-size: 69px; }
  .about-location { margin-top: 20px; font-size: 11px; }
  .about-copy h3 { font-size: 30px; margin-bottom: 22px; }
  .about-copy>p { font-size: 15px; line-height: 2; }
  .news .latin-title { font-size: 59px; }
  .news .section-intro { gap: 20px; }
  .news-row { grid-template-columns: 90px 1fr 24px; }
  .news-headline { font-size: 13px; }
  .contact-top { display: block; }
  .contact-top .eyebrow { font-size: 10px; }
  .contact-top>span { display: none; }
  .contact h2 { font-size: clamp(83px,25vw,127px); margin-top: 22px; }
  .contact-bottom { flex-direction: column; gap: 28px; margin-top: 30px; }
  .contact-bottom h3 { font-size: 23px; }
  .contact-bottom p { font-size: 14px; }
  .contact .solid-button { width: 100%; min-width: 0; }
  .footer { padding-block: 28px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .transition-enabled .work-transition { height: var(--stage-height); }
  .transition-enabled .work-stage { position: relative; top: auto; }
  .transition-enabled .wave-to-points { display: none; }
  .project-image:hover>img { transform: none; }
}