@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500&display=swap');

:root {
  --navy:#0b1423; --navy-deep:#070e19; --paper:#f2f0e9; --white:#fff;
  --gold:#c9af7d; --ink:#142035; --muted:#b9c4d3; --line:#344153;
  --serif:'Noto Serif JP','Yu Mincho',serif;
  --sans:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --display:Arial,Helvetica,sans-serif;
  font-family:var(--sans); font-weight:400; font-size:16px; color:var(--ink);
  background:var(--paper); color-scheme:light; scroll-padding-top:104px;
}
* { box-sizing:border-box }
.motion-enabled { scroll-behavior:smooth }
body { margin:0 }
img,video { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer }
button,a { -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #83a7e0; outline-offset:6px }
[hidden] { display:none!important }
p,h1,h2,h3,figure { margin:0 }
p { line-height:1.95 }
h1,h2,h3 { font-weight:400 }
em { font-style:normal; color:var(--gold) }
ul { padding:0; list-style:none }
dl,dd { margin:0 }
::selection { background:var(--gold); color:var(--navy) }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px 20px; background:#fff; color:var(--ink); z-index:100 }
.skip-link:focus { top:10px }
.site-header { height:82px; background:var(--white); padding:0 4.5%; display:flex; align-items:center; justify-content:space-between; gap:28px; position:fixed; top:0; left:0; right:0; z-index:30; border-bottom:1px solid #d8dce2 }
.brand { width:213px; flex-shrink:0 }
.brand img { width:100%; height:auto }
nav { display:flex; gap:27px; align-items:center; font-size:.8125rem }
nav a { padding:12px 0; position:relative; white-space:nowrap }
nav a::after { content:''; height:1px; width:100%; background:var(--ink); position:absolute; bottom:5px; left:0; transform:scaleX(0); transform-origin:left; transition:transform .25s }
nav a:hover::after,nav a[aria-current="location"]::after { transform:scaleX(1) }
.nav-contact { border:1px solid #ccd0d7; padding:11px 15px; display:flex; align-items:center; gap:22px }
.nav-contact::after { display:none }
.menu-toggle { display:none }
.scroll-progress { position:absolute; height:2px; bottom:-1px; left:0; width:100%; background:#ad8437; transform:scaleX(var(--page-progress,0)); transform-origin:left }
.hero { height:100svh; min-height:740px; background:var(--navy); color:var(--paper) }
.scroll-experience .hero { height:max(180svh,1332px) }
.hero-stage { position:sticky; top:0; height:100svh; min-height:740px; overflow:hidden; isolation:isolate; background:var(--navy) }
.hero-chart { position:absolute; inset:0; opacity:.4; background-image:linear-gradient(#8391a916 1px,transparent 1px),linear-gradient(90deg,#8391a916 1px,transparent 1px); background-size:100px 100px; pointer-events:none }
.hero-chart span { position:absolute; top:50%; left:70%; width:68vw; height:68vw; border:1px solid #b9c4d331; border-radius:50%; transform:translate(-50%,-50%) }
.hero-chart span:nth-child(2) { width:45vw; height:45vw }
.hero-chart span:nth-child(3) { width:22vw; height:22vw }
.hero-topline { position:absolute; left:5%; right:5%; top:121px; z-index:4; display:flex; justify-content:space-between; font-family:var(--display); font-size:.6875rem; letter-spacing:.13em; color:#bac5d4 }
.hero-topline p { line-height:1.5 }
.hero-topline>span { display:flex; align-items:center; gap:13px }
.signal-dot { display:inline-block; width:6px; height:6px; background:var(--gold); border-radius:50%; flex-shrink:0 }
.hero-type { position:absolute; top:clamp(158px,20svh,235px); left:4.3%; right:4%; z-index:3; font-family:var(--display); font-weight:800; letter-spacing:-.073em; font-size:min(15.6vw,25svh); line-height:.82; pointer-events:none; transform:translate3d(var(--type-shift,0px),0,0); opacity:var(--type-opacity,1) }
.type-line { display:flex; align-items:center; gap:35px; white-space:nowrap }
.type-line+.type-line { margin-top:10px }
.type-outline { color:transparent; -webkit-text-stroke:1.5px var(--paper); letter-spacing:-.067em }
.north-star { width:.42em; height:.42em; margin-left:15px; fill:var(--gold); animation:compass-turn 28s linear infinite; animation-play-state:paused }
.hero-media { position:absolute; top:var(--frame-top,24%); right:var(--frame-right,5%); bottom:var(--frame-bottom,18%); left:var(--frame-left,49%); z-index:2; overflow:hidden; border-radius:2px; contain:layout paint; background:#1b2331; pointer-events:none }
.hero-poster,.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(var(--film-scale,1.04)) }
.hero-video { opacity:0; transition:opacity .4s }
.hero-video.is-ready { opacity:1 }
.hero-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#070e1922 0%,#070e1900 38%,#070e1966 59%,#070e19d9 100%) }
.hero-film-note { position:absolute; right:6.5%; top:26%; z-index:4; display:flex; align-items:center; gap:10px; font:10px var(--display); letter-spacing:.1em; opacity:var(--type-opacity,1); text-shadow:0 1px 8px #000 }
.hero-bottom { position:absolute; bottom:108px; left:5%; right:5%; z-index:5; display:grid; grid-template-columns:1fr .84fr; gap:12%; align-items:end }
h1 { font-family:var(--serif); font-size:clamp(2rem,3.05vw,3.65rem); letter-spacing:.02em; line-height:1.55 }
.hero-link { display:inline-flex; align-items:center; justify-content:space-between; gap:60px; min-height:44px; margin-top:12px; padding:8px 0; border-bottom:1px solid #8c97a9; font-size:.8125rem }
.hero-link span { font-size:1.2rem; transition:transform .25s }
.hero-link:hover span { transform:translate(3px,-3px) }
.hero-description { font-size:.875rem; line-height:2; color:#e1e5ed; padding-bottom:6px; max-width:390px }
.hero-baseline { position:absolute; z-index:5; left:5%; right:5%; bottom:0; height:76px; border-top:1px solid #a3aec63d; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--display); font-size:.625rem; letter-spacing:.13em; color:#b9c4d3; padding-right:150px }
.hero-baseline a { display:flex; align-items:center; gap:25px; min-height:44px }
.scroll-arrow { font-size:1.1rem; animation:scroll-cue 2.4s ease-in-out infinite; animation-play-state:paused }
.motion-toggle { position:fixed; z-index:40; bottom:18px; right:20px; display:flex; align-items:center; justify-content:center; gap:9px; min-width:127px; min-height:43px; padding:10px 15px; border:1px solid #7f8c9e; border-radius:40px; background:#0b1423eb; color:#f2f0e9; font-size:.6875rem; box-shadow:0 4px 20px #00000018 }
.motion-symbol { width:12px; font-size:.85rem; text-align:center }
.moving-band { overflow:hidden; background:var(--gold); color:var(--navy); padding:22px 0; border-top:1px solid #d8c39d; border-bottom:1px solid #b79b6a }
.band-track { display:flex; width:max-content; font-family:var(--display); font-size:clamp(1.7rem,3.2vw,3.6rem); font-weight:700; line-height:1; letter-spacing:-.045em; animation:marquee 30s linear infinite; animation-play-state:paused }
.band-track>span { display:flex; gap:.65em; align-items:center; padding-right:.65em; white-space:nowrap }
.band-track b { font-weight:400; font-size:.85em }
.section-pad { padding:105px 7% }
.section-label { display:flex; gap:18px; align-items:center; font-size:.6875rem; letter-spacing:.11em; line-height:1.6; margin-bottom:67px }
.section-index { color:#95733d; letter-spacing:0 }
.label-ja { font-size:.8125rem; letter-spacing:.06em; margin-left:auto }
.display-heading { font-family:var(--display); font-size:clamp(3.5rem,8.2vw,9rem); font-weight:800; letter-spacing:-.065em; line-height:.88 }
.display-heading>span { color:#94733e }
.about { position:relative; overflow:hidden }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center }
.about-visual { position:relative; isolation:isolate }
.about-visual .display-heading { position:relative; z-index:2; font-size:clamp(4rem,8.5vw,9rem) }
.route-drawing { position:absolute; z-index:1; width:120%; height:120%; top:-10%; left:-15%; pointer-events:none; overflow:visible }
.route-drawing path { fill:none; stroke:#b1925b; stroke-width:1.3 }
.route-drawing .route-ghost { stroke:#b1925b; opacity:.15; stroke-dasharray:3 7 }
.route-path { stroke-dasharray:1; stroke-dashoffset:var(--route-offset,0) }
.route-start { fill:var(--gold) }
.about h2 { font-family:var(--serif); font-size:clamp(1.7rem,2.45vw,2.8rem); line-height:1.85; letter-spacing:.02em; margin-bottom:30px }
.about em { color:#94733e }
.body-copy { font-size:.9375rem; color:#515c6c }
.body-copy p+p { margin-top:24px }
.about .text-link { margin-top:25px }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; padding:10px 0; font-size:.8125rem; border-bottom:1px solid currentColor; min-height:44px }
.text-link span { transition:transform .25s }
.text-link:hover span { transform:translate(3px,-3px) }
.services { background:#fff; border-top:1px solid #d4d7dc }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:60px }
.section-heading h2 { font-family:var(--serif); font-size:clamp(1.5rem,2.2vw,2.25rem); margin-top:32px; line-height:1.6 }
.section-heading>p { color:#637083; font-size:.875rem; padding-bottom:6px }
.service-list { border-top:1px solid #bfc6d0 }
.service-row { position:relative; display:grid; grid-template-columns:45px 1fr 1.2fr 24px; gap:30px; padding:40px 0; border-bottom:1px solid #c6ccd4; isolation:isolate }
.service-row::before { content:''; position:absolute; z-index:-1; inset:0 -20px; background:var(--paper); transform:scaleY(0); transform-origin:bottom; transition:transform .35s }
.service-number { color:#94733e; font-family:var(--display); font-size:1rem; padding-top:4px }
.service-english { font-family:var(--display); font-size:.6875rem; color:#617087; letter-spacing:.13em; margin-bottom:12px }
.service-row h3 { font-size:clamp(1.15rem,1.6vw,1.5rem); font-family:var(--serif); line-height:1.75 }
.service-detail>p { color:#536075; font-size:.9375rem }
.scope-list { display:flex; gap:9px 16px; flex-wrap:wrap; margin:20px 0 0; color:#637189; font-size:.75rem }
.scope-list li { border:1px solid #d7dce3; padding:5px 9px }
.service-mark { font-size:1.5rem; color:#94733e; transition:transform .3s }
.works { background:var(--navy); color:var(--paper); padding-bottom:72px; overflow:hidden }
.works .section-label { color:#d7dfeb }
.works .section-index,.contact .section-index { color:var(--gold) }
.work-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:55px }
.work-heading .display-heading { font-size:clamp(3.1rem,7.4vw,8.4rem) }
.work-heading .display-heading>span { color:var(--gold) }
.work-heading>p:last-child { font-size:.875rem; line-height:2; color:#bdc8d8; padding-bottom:4px; flex-shrink:0 }
.work-main { position:relative }
.work-image-frame { position:relative; aspect-ratio:1.88; overflow:hidden; background:#1b2431 }
.work-image-frame img { width:100%; height:100%; object-fit:cover; object-position:center; transform:translate3d(0,var(--drift,0px),0) scale(1.12) }
.work-main figcaption { display:flex; justify-content:space-between; gap:15px; margin-top:16px; font-family:var(--display); font-size:.625rem; letter-spacing:.11em; color:#aebdce }
.film-play { position:absolute; right:4.5%; bottom:10%; width:164px; height:164px; border:1px solid #e0d1b5; border-radius:50%; background:#0b1423ce; color:var(--paper); display:grid; place-items:center; transition:background .3s }
.magnetic-inner { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; transform:translate(var(--magnet-x,0px),var(--magnet-y,0px)); transition:transform .18s ease-out; pointer-events:none }
.film-play .magnetic-inner { font-size:.8125rem }
.play-glyph { font-family:var(--display); font-size:2.25rem; line-height:1 }
.film-duration { font-family:var(--display); font-size:.5625rem; letter-spacing:.15em; color:#c4ae89 }
.film-play:hover { background:#0b1423f0 }
.work-story { display:grid; grid-template-columns:1fr 1fr; gap:10%; margin-top:52px }
.eyebrow { font-family:var(--display); font-size:.6875rem; letter-spacing:.11em; line-height:1.8; color:var(--gold) }
.work-story h2 { font-family:var(--display); font-weight:500; font-size:clamp(2rem,3.85vw,4.2rem); letter-spacing:-.035em; margin:22px 0 12px }
.work-client { font-family:var(--display); font-size:.6875rem; letter-spacing:.15em; color:var(--gold) }
.work-story>div>p:not(.eyebrow):not(.work-client) { color:#c4cfdd; font-size:.9375rem }
.work-role { padding:24px 0; border-top:1px solid #354255; border-bottom:1px solid #354255; margin-top:26px; display:grid; grid-template-columns:1fr 1.5fr; gap:6px 15px; font-size:.8125rem }
.work-role dt { color:var(--gold); grid-row:1/4; line-height:2 }
.work-role dd { line-height:2 }
.work-gallery { display:grid; grid-template-columns:1.1fr 1fr; gap:9%; align-items:start; margin-top:72px }
.work-gallery figure:last-child { margin-top:90px }
.gallery-frame { aspect-ratio:1.5; overflow:hidden; background:#1b2431 }
.gallery-frame img { width:100%; height:100%; object-fit:cover; transform:translate3d(0,var(--drift,0px),0) scale(1.12) }
.work-gallery figcaption { font-size:.6875rem; color:#aebdce; margin-top:13px; letter-spacing:.03em }
.credit { color:#aebdce; font-size:.6875rem; text-align:right; margin-top:36px }
.people { background:var(--paper); overflow:hidden }
.people-display { font-size:clamp(3rem,9.6vw,10rem); margin-bottom:55px }
.people-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:10%; align-items:center }
.portrait-frame { aspect-ratio:1.2; overflow:hidden }
.portrait img { width:100%; height:100%; object-fit:cover; object-position:53% center; transform:scale(1.16); transform-origin:53% 58% }
.portrait figcaption { font-size:.6875rem; color:#677286; margin-top:13px; line-height:1.8 }
.people-copy .eyebrow { color:#927144 }
.people-copy h2 { font-family:var(--serif); font-size:2.4rem; line-height:1.6; margin:24px 0 32px }
.people-copy h2 span { display:block; font-family:var(--sans); font-size:.8125rem; letter-spacing:.05em; color:#667184; margin-top:15px }
.people-copy>p:not(.eyebrow) { color:#536075; font-size:.9375rem; margin-bottom:18px }
.people-copy .text-link { margin-top:13px }
.company { background:#fff; border-top:1px solid #d5d9df }
.company-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:10% }
.company-grid h2 { font-family:var(--display); font-size:clamp(2rem,3.2vw,3.5rem); line-height:1.4; letter-spacing:-.04em }
.company-tagline { font-size:.8125rem; color:#637083; margin-top:15px }
.company-info { border-top:1px solid #bdc6d3 }
.company-info>div { display:grid; grid-template-columns:86px 1fr; gap:25px; padding:21px 0; border-bottom:1px solid #d1d7e0; font-size:.875rem; line-height:2 }
.company-info dt { color:#677488 }
.contact { background:var(--navy); color:var(--paper); overflow:hidden }
.contact .section-label { color:var(--gold) }
.contact-visual { display:flex; justify-content:space-between; align-items:center; gap:40px; padding-bottom:62px; margin-bottom:60px; border-bottom:1px solid var(--line) }
.contact-visual .display-heading { font-size:clamp(4rem,11.6vw,13rem) }
.contact-visual .display-heading>span { color:var(--gold) }
.contact-orbit { position:relative; width:190px; height:190px; display:grid; place-items:center; flex-shrink:0; border:1px solid #a78e68; border-radius:50%; color:var(--gold); transition:background .3s,color .3s }
.contact-orbit::after { content:''; position:absolute; inset:-14px; border:1px dashed #a78e6855; border-radius:50%; animation:compass-turn 35s linear infinite; animation-play-state:paused; pointer-events:none }
.contact-orbit .magnetic-inner { font-family:var(--display); font-size:6rem; font-weight:400 }
.contact-orbit:hover { background:var(--gold); color:var(--navy) }
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:10%; align-items:center }
.contact h2 { font-family:var(--serif); font-size:clamp(1.8rem,2.6vw,3rem); line-height:1.75 }
.contact-grid p { color:#c0cbdb; font-size:.875rem }
.contact-email { display:flex; gap:20px; align-items:center; justify-content:space-between; font-family:var(--display); font-size:clamp(1.2rem,2.3vw,2.25rem); border-bottom:1px solid #67758b; padding:25px 0 20px; letter-spacing:-.015em; overflow-wrap:anywhere }
.contact-email span { flex-shrink:0 }
.contact-form-link { margin-top:21px; color:#c0cbdb }
.site-footer { background:var(--navy-deep); color:#acbbce; padding:31px 7% 83px; display:flex; gap:25px; align-items:center; justify-content:space-between; font-size:.6875rem; line-height:1.7 }
.footer-brand { font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:.09em; color:var(--paper) }
.site-footer a:last-child { padding:10px 0 }
dialog { background:var(--navy-deep); color:var(--paper); border:1px solid #55667d; padding:0; width:min(1100px,92vw); max-height:90svh; overflow:auto }
dialog::backdrop { background:#00050edb }
.dialog-header { display:flex; gap:20px; justify-content:space-between; align-items:center; padding:18px 22px }
.dialog-header h2 { font-size:.875rem; line-height:1.6; letter-spacing:.05em }
.dialog-header button { background:transparent; color:var(--paper); border:1px solid #67758b; padding:10px 15px; font-size:.875rem; white-space:nowrap; min-height:44px }
.film-container { background:#000; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px }
.film-status { padding:0 20px; text-align:center; font-size:1rem }
.film-container video { border:0; width:100%; height:100%; display:block }
.film-footer { display:flex; justify-content:space-between; gap:20px; padding:18px 22px; font-size:.75rem; line-height:1.8 }
.film-footer a { text-decoration:underline; text-underline-offset:4px }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-height:48px; padding:12px 23px; font-size:.875rem; border-radius:0 }
.button-outline { background:transparent; border:1px solid #6f7d91; color:var(--paper) }
[data-reveal] { transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.2,1) }
.motion-enabled .will-reveal { opacity:0; transform:translate3d(0,34px,0) }
.motion-enabled .north-star,.motion-enabled .scroll-arrow,.motion-enabled .band-track,.motion-enabled .contact-orbit::after { animation-play-state:running }
.motion-suspended .north-star,.motion-suspended .scroll-arrow,.motion-suspended .band-track,.motion-suspended .contact-orbit::after { animation-play-state:paused }
html:not(.motion-enabled) [data-reveal] { opacity:1; transform:none; transition:none }
html:not(.motion-enabled) .magnetic-inner { transition:none }
@keyframes marquee { to { transform:translateX(-50%) } }
@keyframes compass-turn { to { transform:rotate(360deg) } }
@keyframes scroll-cue { 0%,100% { transform:translateY(-3px) } 50% { transform:translateY(3px) } }
@media (hover:hover) and (pointer:fine) {
  .service-row:hover::before { transform:scaleY(1) }
  .motion-enabled .service-row:hover .service-mark { transform:translate(3px,-3px) rotate(45deg) }
}
@media (min-width:1650px) {
  .section-pad { padding-left:max(7%,calc((100% - 1460px)/2)); padding-right:max(7%,calc((100% - 1460px)/2)) }
  .hero-bottom { bottom:130px }
}
@media (max-width:1150px) {
  .site-header { padding:0 4%; height:76px }
  .brand { width:184px }
  nav { gap:18px; font-size:.75rem }
  .nav-contact { padding:10px 12px; gap:12px }
  .hero-topline { top:111px }
  .hero-film-note { font-size:9px }
  .hero-bottom { gap:6%; grid-template-columns:1.05fr 1fr }
  h1 { font-size:2.25rem }
  .hero-description { font-size:.8125rem }
  .section-pad { padding:84px 6% }
  .section-label { margin-bottom:52px }
  .about-grid { gap:8% }
  .about h2 { font-size:1.75rem }
  .body-copy { font-size:.875rem }
  .service-row { grid-template-columns:30px 1fr 1.1fr 20px; gap:23px }
  .work-heading { display:block }
  .work-heading>p:last-child { margin-top:28px }
  .work-heading>p:last-child br { display:none }
  .work-role { display:block }
  .work-role dt { margin-bottom:9px }
  .people-copy h2 { font-size:2rem }
  .contact-orbit { width:148px; height:148px }
}
@media (max-width:850px) {
  :root { scroll-padding-top:90px }
  .site-header { height:72px; padding:0 6% }
  .brand { width:176px }
  .menu-toggle { display:flex; align-items:center; gap:18px; background:transparent; border:0; min-height:44px; color:var(--ink); font-size:.8125rem; padding:10px 0 }
  .menu-toggle span { font-size:1.35rem }
  nav { display:none; position:absolute; left:0; right:0; top:72px; background:white; padding:22px 6% 30px; box-shadow:0 12px 18px #0b142315; gap:8px; font-size:.9375rem }
  nav.is-open { display:flex; flex-direction:column; align-items:stretch }
  nav a { padding:12px 0 }
  .nav-contact { margin-top:10px; padding:14px 18px }
  nav a::after { display:none }
  .hero-type { font-size:min(16.5vw,24svh); top:180px }
  .hero-topline { top:112px; font-size:.625rem }
  .hero-topline>span { font-size:.5625rem }
  .hero-bottom { bottom:105px; grid-template-columns:1fr; gap:20px }
  .hero-description { max-width:none; font-size:.8125rem }
  .hero-description br { display:none }
  .hero-description .desktop-break { display:none }
  h1 { font-size:2.5rem }
  .hero-baseline { padding-right:130px; font-size:.5625rem }
  .hero-chapter { display:none }
  .hero-film-note { top:33%; max-width:39%; line-height:1.6 }
  .hero-media { top:var(--frame-top,30%); right:var(--frame-right,5%); bottom:var(--frame-bottom,25%); left:var(--frame-left,35%) }
  .section-pad { padding:72px 6% }
  .about-grid { grid-template-columns:1fr 1.1fr; gap:7% }
  .about-visual .display-heading { font-size:clamp(3.3rem,8.5vw,5rem) }
  .about h2 { font-size:1.5rem }
  .body-copy { font-size:.875rem }
  .body-copy br { display:none }
  .display-heading { font-size:clamp(3.5rem,9.5vw,5.5rem) }
  .section-heading>p { font-size:.8125rem }
  .service-row { grid-template-columns:28px 1fr 28px; gap:20px; padding:30px 0 }
  .service-detail { grid-column:2; grid-row:2 }
  .service-mark { grid-column:3; grid-row:1 }
  .service-row h3 { font-size:1.25rem }
  .service-row h3 br { display:none }
  .work-heading .display-heading { font-size:clamp(3.1rem,9.5vw,5.5rem) }
  .work-image-frame { aspect-ratio:1.5 }
  .film-play { width:135px; height:135px; right:4%; bottom:12% }
  .film-play .magnetic-inner { font-size:.75rem }
  .work-story { gap:7%; grid-template-columns:1fr 1.1fr; margin-top:38px }
  .work-story h2 { font-size:2.1rem }
  .work-gallery { margin-top:50px; gap:5% }
  .work-gallery figure:last-child { margin-top:50px }
  .people-display { font-size:9.6vw; margin-bottom:40px }
  .people-grid { gap:7%; grid-template-columns:1fr 1fr }
  .portrait-frame { aspect-ratio:.85 }
  .people-copy h2 { font-size:1.75rem; margin:18px 0 23px }
  .people-copy>p:not(.eyebrow) { font-size:.875rem }
  .company-grid { grid-template-columns:1fr; gap:35px }
  .contact-orbit { width:120px; height:120px }
  .contact-orbit .magnetic-inner { font-size:4rem }
  .contact-grid { gap:7% }
  .contact h2 { font-size:1.7rem }
  .contact-email { font-size:1.4rem }
}
@media (max-width:560px) {
  .site-header { height:68px }
  .brand { width:164px }
  nav { top:68px }
  .hero,.hero-stage { min-height:720px }
  .scroll-experience .hero { height:max(150svh,1080px) }
  .hero-topline { top:102px; left:6%; right:6%; font-size:.5rem; letter-spacing:.075em }
  .hero-topline>span { font-size:.5rem; gap:6px }
  .hero-topline>span .signal-dot { width:4px; height:4px }
  .hero-type { top:144px; left:5%; right:4%; font-size:22.5vw; line-height:.85; letter-spacing:-.065em }
  .type-line { gap:22px }
  .type-line+.type-line { margin-top:6px }
  .north-star { width:.48em; height:.48em; margin-left:0 }
  .type-outline { -webkit-text-stroke:1px var(--paper) }
  .hero-media { top:var(--frame-top,30%); right:var(--frame-right,6%); bottom:var(--frame-bottom,25%); left:var(--frame-left,6%) }
  .hero-poster,.hero-video { object-position:center }
  .hero-film-note { right:8%; top:32%; font-size:.4375rem; max-width:none; gap:5px; letter-spacing:.08em }
  .hero-film-note .signal-dot { width:4px; height:4px }
  .hero-bottom { left:6%; right:6%; bottom:88px; gap:15px }
  h1 { font-size:clamp(1.55rem,6.6vw,2.1rem); line-height:1.65; letter-spacing:.01em }
  .hero-link { font-size:.75rem; gap:50px; margin-top:7px; min-height:40px; padding:6px 0 }
  .hero-description { font-size:.75rem; line-height:1.95; max-width:345px; padding-bottom:0 }
  .hero-baseline { left:6%; right:6%; height:68px; padding-right:135px; font-size:.5rem; letter-spacing:.06em }
  .hero-baseline a { gap:14px }
  .hero-coordinate { display:none }
  .motion-toggle { bottom:13px; right:13px; min-width:118px; min-height:42px; padding:9px 12px; font-size:.625rem }
  .hero-chart { background-size:65px 65px }
  .hero-chart span { width:130vw; height:130vw }
  .hero-chart span:nth-child(2) { width:95vw; height:95vw }
  .hero-chart span:nth-child(3) { width:60vw; height:60vw }
  .moving-band { padding:18px 0 }
  .band-track { font-size:1.65rem }
  .section-pad { padding:57px 7% }
  .section-label { gap:10px; font-size:.5625rem; letter-spacing:.06em; margin-bottom:38px; flex-wrap:wrap }
  .label-ja { font-size:.6875rem; letter-spacing:.03em }
  .display-heading { font-size:clamp(3.2rem,14vw,5rem) }
  .about-grid { grid-template-columns:1fr; gap:43px }
  .about-visual .display-heading { font-size:19vw; line-height:.89 }
  .route-drawing { width:100%; height:110%; top:-5%; left:8% }
  .about h2 { font-size:1.65rem; line-height:1.8; margin-bottom:24px }
  .body-copy { font-size:.9375rem; line-height:1.95 }
  .body-copy p+p { margin-top:18px }
  .section-heading { display:block; margin-bottom:32px }
  .section-heading h2 { font-size:1.6rem; margin-top:25px }
  .section-heading>p { margin-top:15px; font-size:.875rem }
  .section-heading>p br { display:none }
  .service-row { grid-template-columns:20px 1fr 17px; gap:15px 15px; padding:27px 0 }
  .service-row h3 { font-size:1.15rem; line-height:1.7 }
  .service-number { font-size:.8125rem }
  .service-english { font-size:.625rem; margin-bottom:8px }
  .service-detail { grid-column:2/4 }
  .service-detail>p { font-size:.9375rem }
  .service-mark { font-size:1.2rem }
  .scope-list { font-size:.6875rem; gap:7px; margin-top:16px }
  .scope-list li { padding:4px 7px }
  .service-row::before { inset:0 -10px }
  .work-heading { margin-bottom:32px }
  .work-heading .display-heading { font-size:12.2vw }
  .work-heading>p:last-child { font-size:.8125rem; margin-top:24px }
  .work-image-frame { aspect-ratio:.95; margin:0 -8.15% }
  .work-image-frame img { object-position:50% center; transform:translate3d(0,var(--drift,0px),0) scale(1.12) }
  .work-main figcaption { font-size:.5rem; letter-spacing:.04em; line-height:1.7; gap:12px }
  .work-main figcaption>span:last-child { max-width:56%; text-align:right }
  .film-play { width:125px; height:125px; right:0; bottom:67px }
  .film-play .magnetic-inner { font-size:.6875rem; gap:8px }
  .film-duration { font-size:.5rem }
  .work-story { grid-template-columns:1fr; gap:28px; margin-top:33px }
  .work-story h2 { font-size:2.35rem; margin-top:16px }
  .work-story>div>p:not(.eyebrow):not(.work-client) { font-size:.9375rem }
  .work-role { margin-top:23px; padding:22px 0 }
  .work-gallery { grid-template-columns:1fr; gap:30px; margin-top:35px }
  .work-gallery figure:last-child { margin-top:0; margin-left:12% }
  .gallery-frame { aspect-ratio:1.35 }
  .work-gallery figure:last-child .gallery-frame { aspect-ratio:1.15 }
  .work-gallery figcaption,.credit { font-size:.625rem }
  .credit { text-align:left; margin-top:28px }
  .people-display { font-size:11.4vw; margin-bottom:32px }
  .people-grid { grid-template-columns:1fr; gap:32px }
  .portrait-frame { aspect-ratio:1.3 }
  .people-copy h2 { font-size:2rem }
  .people-copy>p:not(.eyebrow) { font-size:.9375rem }
  .company-grid { gap:28px }
  .company-grid h2 { font-size:2rem }
  .company-info>div { grid-template-columns:64px 1fr; gap:18px; padding:17px 0; font-size:.8125rem }
  .company-tagline { font-size:.75rem }
  .contact-visual { align-items:end; gap:15px; padding-bottom:36px; margin-bottom:35px }
  .contact-visual .display-heading { font-size:13vw }
  .contact-orbit { width:62px; height:62px; margin-bottom:4px }
  .contact-orbit::after { inset:-6px }
  .contact-orbit .magnetic-inner { font-size:2.7rem }
  .contact-grid { grid-template-columns:1fr; gap:24px }
  .contact h2 { font-size:1.8rem }
  .contact-email { font-size:clamp(1.15rem,5.4vw,1.65rem); gap:15px; padding-top:20px }
  .contact-grid p { font-size:.875rem }
  .contact-grid p br { display:none }
  .site-footer { padding:28px 7% 82px; gap:14px 20px; flex-wrap:wrap; justify-content:flex-start; font-size:.625rem }
  .footer-brand { width:100%; font-size:1.2rem }
  .site-footer a:last-child { margin-left:auto }
  .dialog-header { padding:14px; gap:12px }
  .dialog-header h2 { font-size:.75rem }
  .dialog-header button { font-size:.75rem; padding:9px 12px }
  .film-footer { padding:14px; flex-wrap:wrap; gap:10px }
}
@media (max-height:550px) and (min-width:561px) {
  .hero,.hero-stage { min-height:690px }
  .scroll-experience .hero { height:1242px }
  .hero-type { font-size:clamp(110px,14vw,160px); top:155px }
  .hero-topline { top:108px }
  .hero-bottom { bottom:100px; grid-template-columns:1.1fr 1fr; gap:5% }
  h1 { font-size:2rem }
}
@media (prefers-reduced-motion:reduce) {
  :root { scroll-behavior:auto }
  html:not(.motion-enabled) *,html:not(.motion-enabled) *::before,html:not(.motion-enabled) *::after { transition:none!important; animation:none!important }
}

.contact-form-panel{margin-top:20px}.contact-form-panel summary{cursor:pointer;list-style:none;margin-top:0}.contact-form-panel summary::-webkit-details-marker{display:none}.contact-form-panel summary span{transition:transform .2s}.contact-form-panel[open] summary{margin-bottom:26px}.contact-form-panel[open] summary span{transform:rotate(45deg)}.contact-form{max-width:560px}.contact-form label{display:block;font-size:.875rem;color:#d9e1ec;margin-bottom:24px;line-height:1.8}.contact-form input[type="text"]:not([name="_honey"]),.contact-form input[type="email"],.contact-form textarea{display:block;width:100%;margin-top:9px;padding:13px 15px;border:1px solid #6f7d91;border-radius:0;background:#132039;color:#fff;font:inherit;font-size:1rem;line-height:1.8}.contact-form textarea{resize:vertical;min-height:160px}.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.contact-form button{padding:14px 28px;min-height:52px;background:var(--paper);color:var(--ink);border:1px solid var(--paper);font:inherit;font-size:1rem}.contact-form button:hover{background:var(--gold);border-color:var(--gold)}