/* Existing art direction, with upright Mincho and quiet line reveals. */
:root {
  --serif: 'Shippori Mincho', 'Yu Mincho', serif;
  --ui: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --latin: 'Barlow', var(--ui);
  --sp-mono: 'Barlow', var(--ui);
  --ink: #07131b;
  --surface: #0c1d28;
  --white: #f0f4f5;
  --muted: #d6e2e7;
  --cyan: #78e9f5;
  --line: #d6e2e733;
  --chapter-line: #d6e2e733;
  --sp-foreground: #f0f4f5;
  --sp-muted: #d6e2e7;
  --sp-line: #d6e2e733;
  --sp-accent: #78e9f5;
  --sp-section-bg: #07131b;
  --type-heading: clamp(2.625rem, 2.7vw, 3.25rem);
  --type-body: 1.125rem;
}
body { background: var(--ink); font-family: var(--ui); color: var(--white); }
.spatial-matte { background: var(--ink); }
.site-header::before { background: #07131bd9; }
.desktop-nav a { font: 500 .875rem/1.4 var(--latin); letter-spacing: .09em; }
.menu-button .menu-label { font: 500 .875rem/1 var(--latin); letter-spacing: .08em; }
.mobile-nav { background: #07131bf5; padding: 28px 32px; }
.mobile-nav a { font-weight: 400; letter-spacing: .02em; }
.spatial-chapters a { font-size: .75rem; letter-spacing: .09em; }
.spatial-position, .spatial-next, .spatial-contact { font-size: .75rem; letter-spacing: .08em; }
.spatial-position>[data-chapter-count] { opacity: .8; }
.spatial-status { background: #07131bd9; }

/* Mincho belongs to the Japanese statements; utility text stays in Gothic. */
.hero #hero-heading,
.koi-heading #service-title,
.proof-heading #proof-title,
#works .works-heading>p,
#kusabi .kusabi-copy h3,
#about .about-copy h3,
#contact .contact-bottom h3,
.dialog-content h2 {
  font-family: var(--serif); font-style: normal; font-weight: 500; font-size: var(--type-heading);
  line-height: 1.55; letter-spacing: -.04em; white-space: normal;
  text-wrap: balance; line-break: strict; overflow-wrap: break-word;
}
.hero { --hero-heading-size: clamp(4rem, 4.3vw, 5rem); --hero-copy-indent: 0px; }
.hero-content { display: grid; grid-template-columns: fit-content(100%); justify-items: start; }
.hero #hero-heading { font-size: var(--hero-heading-size); line-height: 1.4; letter-spacing: -.04em; }
.hero #hero-heading .hero-heading-continuation,
.hero #hero-heading .mincho-line:nth-child(2) { padding-left: var(--hero-copy-indent); }
.hero :is(.hero-english,.hero-description,.hero-link) { margin-left: var(--hero-copy-indent); }
.hero-english { font: 400 1rem/1.7 var(--latin); letter-spacing: .1em; margin-top: 26px; margin-bottom: 0; color: var(--muted); }
.hero-description { font: 400 var(--type-body)/1.9 var(--ui); letter-spacing: .025em; color: var(--white); margin-top: 20px; max-width: min(36em,calc(100% - var(--hero-copy-indent))); }
.heading-phrase, .copy-phrase { display: inline-block; max-width: 100%; vertical-align: top; }
.copy-line { display: block; }
.hero .hero-description { max-width: min(36em,100%); }
.hero-shade { background: linear-gradient(90deg,#07131b8c 0%,#07131b45 36%,transparent 70%); }
.hero-link.spatial-button { margin-top: 28px; justify-self: start; }
.section .eyebrow, .chapter .eyebrow, .hero-location { font: 500 .8125rem/1.65 var(--latin); letter-spacing: .13em; color: #b5cbd5; }
.koi-heading { margin-top: 54px; text-align: center; }
.koi-heading .eyebrow { margin-bottom: 22px; }
.koi-heading-copy { max-width: 34em; margin-top: 28px; text-align: center; }
.koi-heading-copy p { font: 400 var(--type-body)/1.9 var(--ui); color: var(--muted); letter-spacing: .025em; }
.koi-service-link strong { font: 500 clamp(1rem,1.7vw,1.5rem)/1.3 var(--latin); letter-spacing: .015em; }
.koi-service-link .koi-field-index { font: 400 .75rem/1.5 var(--latin); color: #b5cbd5; margin-bottom: 10px; }
.koi-service-link .koi-field-jp { font: 400 .875rem/1.7 var(--ui); color: var(--muted); margin-top: 12px; white-space: normal; }
.koi-links { gap: clamp(12px,2vw,28px); }
.koi-service-link { padding-block: 18px; border-color: var(--line); }
.koi-touch-note { font-size: .75rem; color: #b5cbd5; }

.proof { padding-block: 88px 112px; border-color: var(--line); }
.proof-heading { margin-bottom: 56px; gap: 24px; }
.proof-heading #proof-title { font-size: clamp(2rem,2.9vw,2.625rem); line-height: 1.6; }
.proof-grid { grid-template-columns: 1.2fr 1fr; gap: 8%; }
.proof-number strong { font: 400 clamp(6rem,12.5vw,11.5rem)/1 var(--latin); letter-spacing: -.055em; font-variant-numeric: lining-nums tabular-nums; }
.proof-number>p:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; }
.proof-number>p>span { font: 400 .875rem/1.5 var(--latin); color: var(--muted); }
.proof-number h3 { font: 500 1rem/1.6 var(--latin); letter-spacing: .09em; margin-top: 24px; }
.proof-caption { font: 400 .875rem/1.8 var(--ui); color: var(--muted); margin-top: 5px; }
.proof-capabilities { border-color: var(--line); }
.proof-capabilities>p { font: 400 clamp(2rem,3.1vw,2.75rem)/1.15 var(--latin); letter-spacing: .01em; }
.proof-capabilities>p em { color: var(--white); font-style: normal; }
.proof-capabilities>span { font: 400 var(--type-body)/1.9 var(--ui); color: var(--muted); letter-spacing: .025em; margin-top: 24px; }

/* Production volume is part of WORKS, between its introduction and films. */
#works .works-proof {
  width: calc(100% - var(--gutter) * 2); max-width: 1200px;
  padding: 0 0 52px; margin: 0 auto 56px;
  border-block: 0; background: transparent;
}
#works .works-proof .proof-heading { margin-bottom: 36px; gap: 18px; }
#works .works-proof #proof-title { width: 100%; font-size: clamp(2rem,2.4vw,2.625rem); }

/* Section introductions share a centered axis. */
#works .works-heading { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; text-align: center; margin-bottom: 28px; }
#service .koi-heading h2.latin-title,
#works .works-heading h2,
#about .about-heading .latin-title,
#news .section-intro h2.latin-title { font: 400 clamp(1.75rem,2.2vw,2.25rem)/1.2 var(--latin); letter-spacing: .04em; color: var(--white); }
#works .works-heading .eyebrow, #about .about-heading .eyebrow, #news .eyebrow { margin-bottom: 18px; }
#service .koi-heading .eyebrow { margin-bottom: 18px; }
#service-section-title { margin-bottom: 28px; }
#works .works-heading>p { margin: 0; }
#works .works-heading>p>[data-reading-text] { font: inherit; color: inherit; }
#works .works-heading>p>.works-caption { display: inline-block; font: 400 1rem/1.95 var(--ui); letter-spacing: .025em; color: var(--muted); margin-top: 16px; }
.work-film-grid { gap: 48px 32px; }
.work-film-grid .project-image { border-color: var(--line); }
.work-film-grid .project-meta { border-top: 0; padding-top: 18px; }
.project-meta>div>span { font: 400 .75rem/1.6 var(--latin); letter-spacing: .08em; color: #b5cbd5; }
.work-film-grid .project-meta h3 { font: 400 clamp(1.375rem,2vw,1.75rem)/1.5 var(--latin); letter-spacing: .015em; }
.work-film-grid .reel-play { font-family: var(--latin); }
.work-film-grid .reel-play small { font: 400 .75rem/1.5 var(--latin); }

#kusabi { background: var(--ink); }
#kusabi .kusabi-background::after { background: linear-gradient(180deg,#07131b66,#07131b99); }
#kusabi .kusabi-copy { max-width: 720px; }
#kusabi .kusabi-copy .eyebrow { font: 500 .8125rem/1.65 var(--latin); letter-spacing: .16em; color: var(--muted); margin-bottom: 32px; }
#kusabi .kusabi-film-logo { width: min(360px,75%); margin-bottom: 40px; }
#kusabi .kusabi-copy .section-copy { font: 400 var(--type-body)/1.9 var(--ui); color: var(--muted); letter-spacing: .025em; max-width: 100%; margin: 30px auto 0; }
#kusabi .kusabi-copy .section-copy br { display: initial; }
#kusabi .kusabi-copy .outline-button { margin-top: 36px; background: #07131b88; }
#about { grid-template-columns: 1fr; gap: 48px; padding-block: 120px; background: var(--ink); }
#about .about-heading { text-align: center; }
#about .about-copy { width: min(100%, 960px); margin-inline: auto; text-align: center; }
#about .about-location { font: 400 .75rem/1.8 var(--latin); letter-spacing: .09em; color: #b5cbd5; margin-top: 26px; }
#about .about-copy h3 { margin-bottom: 32px; text-align: center; }
#about .about-copy>p { font: 400 var(--type-body)/1.9 var(--ui); color: var(--muted); letter-spacing: .025em; max-width: 36em; margin: 0 auto 24px; }
#news { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; background: var(--ink); padding: 88px var(--gutter) 112px; }
#news .section-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 36px; width: 100%; }
#news .news-content { width: min(100%,760px); text-align: left; }
#news .news-list { width: 100%; }
#news .news-more { display: flex; width: max-content; margin-inline: auto; }
.news-row { border-color: var(--line); gap: 24px; }
.news-row time { font: 400 .875rem/1.6 var(--latin); color: #b5cbd5; }
.news-category { font: 500 .75rem/1.5 var(--latin); letter-spacing: .06em; color: var(--muted); border-color: var(--line); border-radius: 0; padding: 5px 8px; }
.news-headline { font: 400 var(--type-body)/1.8 var(--ui); letter-spacing: .025em; text-wrap: pretty; }
.news-label { font: 400 .875rem/1.8 var(--ui); color: var(--muted); }

#contact { background: var(--ink); padding-block: 100px 120px; }
#contact .contact-top { justify-content: center; text-align: center; margin-bottom: 18px; }
#contact .contact-top .eyebrow { margin-bottom: 0; }
#contact #contact-title { font: 400 clamp(1.75rem,2.8vw,2.5rem)/1.2 var(--latin); letter-spacing: .035em; width: 100%; max-width: none; margin: 0 auto; text-align: center; }
#contact-title>.contact-line { display: inline-block; margin-right: .28em; }
#contact .contact-bottom { display: flex; flex-direction: column; margin-top: 48px; align-items: center; text-align: center; gap: 40px; }
#contact .contact-bottom>div { width: 100%; }
#contact .contact-bottom h3 { font-size: var(--type-heading); }
#contact .contact-bottom p { font: 400 var(--type-body)/1.9 var(--ui); color: var(--muted); letter-spacing: .025em; margin: 24px auto 0; max-width: 36em; }
#contact .contact-pond::after { background: linear-gradient(90deg,#07131be6 0%,#07131b99 45%,#07131b15 85%),linear-gradient(0deg,#07131b99,transparent 65%); }

/* A quiet company record closes the site in the same visual language. */
#company { background: var(--ink); padding-block: 100px 152px; }
#company .company-heading { text-align: center; margin-bottom: 40px; }
#company .eyebrow { margin-bottom: 18px; font-family: var(--ui); }
#company .latin-title { font: 400 clamp(1.75rem,2.2vw,2.25rem)/1.2 var(--latin); letter-spacing: .04em; }
.company-profile { width: min(100%,760px); margin: 0 auto; font: 400 1rem/1.9 var(--ui); color: var(--muted); }
.company-row { display: grid; grid-template-columns: 136px minmax(0,1fr); gap: 24px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.company-row:first-child { border-top: 1px solid var(--line); }
.company-row dt { padding-top: 2px; font-size: .875rem; color: #b5cbd5; }
.company-row dd { margin: 0; min-width: 0; }
.company-row address { font-style: normal; }
.company-postcode,.company-building { display: block; }
.company-postcode { margin-bottom: 4px; font-family: var(--latin); }
.company-contact-link { display: inline-block; padding-block: 4px; font: 400 1.125rem/1.5 var(--latin); letter-spacing: .025em; text-underline-offset: 5px; }
.company-map { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; margin-top: 8px; font-size: .8125rem; color: var(--cyan); }
.company-map:hover,.company-contact-link:hover { color: var(--cyan); text-decoration: underline; }
@media (max-width:767px) {
  #company { padding-block: 72px 120px; }
  #company .company-heading { margin-bottom: 32px; }
  .company-row { grid-template-columns: 5em minmax(0,1fr); gap: 16px; padding-block: 20px; }
  .company-profile { font-size: .9375rem; }
  .company-row dt { font-size: .8125rem; }
  .company-contact-link { font-size: 1.0625rem; overflow-wrap: anywhere; }
}

/* Preserve button silhouettes and all existing hover/entrance timing. */
:is(.outline-button,.solid-button,.hero-link).spatial-button { font: 500 .875rem/1.6 var(--ui); letter-spacing: .04em; min-height: 54px; padding: 15px 24px; border-color: #d6e2e780; color: var(--white); background: #07131b70; }
.hero-link.spatial-button { font-family: var(--latin); letter-spacing: .1em; }
:is(.outline-button,.solid-button,.hero-link).spatial-button:is(:hover,:focus-visible) { background: #78e9f518; border-color: var(--cyan); color: var(--white); }
#contact .solid-button.spatial-button, dialog .solid-button.spatial-button { color: var(--ink); background: var(--cyan); border-color: var(--cyan); font-weight: 500; }
#contact .solid-button.spatial-button:is(:hover,:focus-visible), dialog .solid-button.spatial-button:is(:hover,:focus-visible) { background: #b4f4fb; border-color: #b4f4fb; color: var(--ink); }
.spatial-button::before { color: var(--cyan); }
.solid-button.spatial-button::before { color: inherit; }
dialog { background: var(--ink); border-color: #d6e2e74d; }
.dialog-content { padding: 56px; }
.dialog-content h2 { font-size: clamp(1.75rem,3vw,2.625rem); margin-block: 20px 28px; }
.dialog-content h3 { font: 500 1.125rem/1.8 var(--ui); }
.dialog-content p, .dialog-content ul { font: 400 1rem/2 var(--ui); color: var(--muted); }
.dialog-content .eyebrow { font: 500 .8125rem/1.6 var(--latin); letter-spacing: .1em; }
.dialog-content p.form-note { font: 400 .875rem/1.9 var(--ui); background: var(--surface); color: var(--muted); }
.detail-tags span { font: 400 .75rem/1.7 var(--ui); padding: 5px 10px; border-color: var(--line); }
.services-index small { font: 400 .875rem/1.7 var(--ui); }
form label { font-size: .875rem; }
form label>span { font-size: .75rem; }
input,select,textarea { font-family: var(--ui); background: var(--surface); border-color: #d6e2e766; }
input::placeholder,textarea::placeholder { color: #adc3ce; font-size: .875rem; }

/* Laptop: keep the full introduction above the lower frame on short screens. */
@media (min-width:1024px) and (max-width:1439px) {
  :root { --type-heading: clamp(2.25rem,2.8vw,2.625rem); --type-body: 1rem; }
  .hero { --hero-heading-size: clamp(3.5rem,4.3vw,4rem); }
  .hero-content { padding-top: clamp(142px,21svh,190px); }
}
/* Tablet: preserve the centered statements while keeping a readable measure. */
@media (min-width:768px) and (max-width:1023px) {
  :root { --type-heading: clamp(2rem,3.6vw,2.25rem); --type-body: 1rem; }
  .hero { --hero-heading-size: clamp(3rem,5.4vw,3.5rem); }
  .hero-content { padding-top: clamp(156px,20svh,210px); }
  .hero .hero-description { max-width: 32em; }
  #about, #contact { padding-block: 96px 112px; }
  #works .works-proof #proof-title { font-size: 1.875rem; }
}
@media (min-width:768px) and (max-width:1199px) {
  .koi-service-link .koi-field-jp { font-size: .8125rem; }
}
@media (max-width:767px) {
  :root { --gutter: clamp(24px,6.4vw,34px); --type-heading: clamp(1.5rem,6.6vw,2rem); --type-body: 1rem; }
  .hero { --hero-heading-size: clamp(1.5rem,7.65vw,3rem); --hero-copy-indent: 0px; }
  .hero #hero-heading { line-height: 1.5; }
  .hero-content { padding-top: clamp(124px,18svh,154px); }
  .hero .hero-description br { display: initial; }
  .hero-english { font-size: .875rem; letter-spacing: .065em; line-height: 1.8; max-width: 26em; margin-top: 24px; }
  .hero .hero-description { font-size: 1rem; line-height: 1.85; max-width: 32em; margin-top: 18px; }
  .hero-description .copy-line + .copy-line { margin-top: .35em; }
  .copy-line { text-wrap: balance; }
  .section .eyebrow, .chapter .eyebrow { font-size: .75rem; letter-spacing: .1em; }
  .spatial-position,.spatial-next { font-size: .75rem; }
  .spatial-position { padding-inline: 12px; }
  .spatial-next { padding-inline: 8px; gap: 8px; }
  .koi-service-link strong { font-size: .875rem; }
  .koi-service-link .koi-field-index { font-size: .75rem; }
  .koi-service-link { padding-block: 14px; }
  .koi-links { gap: 8px; }
  .koi-heading { margin-top: 40px; }
  .koi-heading #service-title { font-size: var(--type-heading); white-space: normal; letter-spacing: -.04em; }
  .koi-heading-copy { margin-top: 24px; }
  .proof { padding-block: 72px 80px; }
  .proof-heading { margin-bottom: 40px; gap: 20px; }
  .proof-heading #proof-title { font-size: var(--type-heading); white-space: normal; letter-spacing: -.04em; }
  .proof-grid { grid-template-columns: 1fr; gap: 36px; }
  .proof-number strong { font-size: clamp(5rem,24vw,8.5rem); }
  .proof-number h3 { margin-top: 18px; }
  .proof-capabilities { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
  .proof-capabilities>p { font-size: 2rem; }
  .proof-capabilities>span { margin-top: 0; }
  #works .works-proof { padding-block: 0 36px; margin-bottom: 40px; }
  #works .works-proof .proof-heading { align-items: center; text-align: center; gap: 16px; margin-bottom: 30px; }
  #works .works-proof #proof-title { font-size: var(--type-heading); }
  #works .works-heading { grid-template-columns: 1fr; gap: 28px; padding-top: 0; margin-bottom: 28px; }
  #service .koi-heading h2.latin-title,#works .works-heading h2,#about .about-heading .latin-title,#news .section-intro h2.latin-title { font-size: 1.75rem; }
  #works .works-heading>p>.works-caption { font-size: 1rem; margin-top: 14px; }
  .work-film-grid { gap: 36px; }
  #kusabi .kusabi-top { min-height: 680px; padding-block: 80px; }
  #kusabi .kusabi-copy .eyebrow { font-size: .75rem; margin-bottom: 28px; }
  #kusabi .kusabi-film-logo { width: min(280px,85%); margin-bottom: 36px; }
  #kusabi .kusabi-copy h3 { font-size: var(--type-heading); white-space: normal; letter-spacing: -.04em; }
  #kusabi .kusabi-copy .section-copy { line-height: 1.85; margin-top: 26px; }
  #about { grid-template-columns: 1fr; gap: 36px; padding-block: 80px; }
  #about .about-copy h3 { margin-bottom: 26px; }
  #about .about-copy>p { line-height: 1.85; }
  #about .copy-line + .copy-line, #contact .copy-line + .copy-line { margin-top: .45em; }
  #news { padding-block: 72px 80px; }
  .news-row { grid-template-columns: 100px 1fr 24px; gap: 10px 14px; padding-block: 24px; }
  .news-headline { font-size: 1rem; }
  #contact { padding-block: 80px 120px; min-height: 710px; }
  #contact #contact-title { font-size: 1.75rem; }
  #contact .contact-bottom { margin-top: 36px; gap: 30px; }
  #contact .contact-bottom h3 { font-size: var(--type-heading); }
  #contact .contact-bottom p { line-height: 1.85; }
  #contact .solid-button.spatial-button { min-width: 0; width: 100%; margin-top: 0; }
  .dialog-content { padding: 60px 24px 32px; }
  .dialog-content h2 { font-size: var(--type-heading); }
  :is(.outline-button,.solid-button,.hero-link).spatial-button { font-size: .875rem; padding: 14px 20px; }
}
@media (min-width:768px) and (max-height:740px) {
  .hero-content { padding-top: 132px; }
  .hero-english { margin-top: 20px; }
  .hero-description { margin-top: 16px; }
  .hero-link.spatial-button { margin-top: 22px; }
}

/* Same line-by-line wipe as the KUSABI motion study, without moving type. */
.mincho-lines { display: inline-block; vertical-align: top; max-width: 100%; }
.mincho-line { display: block; }
.mincho-wipe-bit { display: inline-block; vertical-align: top; white-space: pre; }
.mincho-reveal[data-reading-text] { display: inline-block; vertical-align: top; max-width: 100%; }
.mincho-reveal .mincho-wipe-bit { opacity: 0; clip-path: inset(0 100% 0 0); }
.mincho-reveal.is-reading .mincho-wipe-bit {
  animation: mincho-line-open 700ms cubic-bezier(.22,1,.36,1) calc(150ms + var(--line-index,0) * 220ms) both;
}
.mincho-reveal.wipe-settled .mincho-wipe-bit { animation: none; opacity: 1; clip-path: none; }
.spatial-motion .spatial-group .spatial-body:has(> [data-reading-text]) {
  opacity: 1; transform: none; transition: none;
}
@keyframes mincho-line-open {
  from { opacity: .15; clip-path: inset(-.12em 100% -.12em -.06em); }
  to { opacity: 1; clip-path: inset(-.12em -.06em -.12em -.06em); }
}
@media (prefers-reduced-motion: reduce), print {
  .mincho-reveal .mincho-wipe-bit,
  .mincho-reveal.is-reading .mincho-wipe-bit { animation: none; opacity: 1; clip-path: none; }
}