/* Shared panel design for proposals 3-1 and 3-2. */
:root{--panel:7,17,29;--panel-radius:104px}
.content-section{width:calc(100% - 112px);max-width:1280px;margin:112px auto;padding:80px clamp(32px,5vw,72px);background:transparent;border:0;border-radius:var(--panel-radius);isolation:isolate;overflow:visible}
.content-section::before{content:'';position:absolute;inset:0;z-index:-1;background:rgb(var(--panel));border-radius:var(--panel-radius);filter:blur(17px);pointer-events:none}
.services-section::before{background:rgb(var(--panel))}
.contact-section{background:transparent}
.partner{background:rgba(var(--panel),.55);border-radius:0 40px 40px 0}
footer{background:rgba(var(--panel),.88);padding-top:32px;padding-bottom:32px}
.intro-section,.spirit-section,.profile-section{gap:48px}.services-grid{gap:64px 48px}
@media(max-width:900px){:root{--panel-radius:84px}.content-section{width:calc(100% - 72px);margin:88px auto;padding:64px 32px}.content-section::before{filter:blur(14px)}}
@media(max-width:600px){:root{--panel-radius:64px}.content-section{width:calc(100% - 36px);margin:72px auto;padding:48px 22px}.content-section::before{filter:blur(10px)}.services-grid{gap:52px}.partner{padding:24px 20px}.intro-section,.spirit-section,.profile-section{gap:30px}}

/* Keep animation controls aligned after removing the caption. */
.hero-bottom .flight-controls{margin-left:auto}
.spirit-list li{display:grid;grid-template-columns:1.8rem minmax(0,1fr);column-gap:24px}
.spirit-list li>div{display:contents}
.spirit-list h3{grid-column:2;grid-row:1}
.spirit-list p{grid-column:2;grid-row:2}
.spirit-number{grid-column:1;grid-row:1;align-self:end;font-size:32px;font-weight:500;line-height:1;padding:0 0 5px;margin-bottom:10px}
@media(max-width:600px){.spirit-list li{column-gap:16px}.spirit-number{font-size:28px;padding-bottom:4px}}
/* Persistent navigation and the English font comparison. */
.spirit-list p[lang="en"]{font-family:Verdana,Arial,sans-serif}
html{scroll-padding-top:110px}
body>header{position:fixed;z-index:1000;isolation:isolate;background:#07111d;box-shadow:0 1px 0 rgba(255,255,255,.12);padding-top:18px;padding-bottom:18px}
body>header nav{white-space:nowrap}
body>header nav a:not(.nav-contact):hover,body>header nav a:not(.nav-contact):focus-visible{text-decoration:underline;text-underline-offset:7px}
.mobile-menu{display:none;position:relative;font-size:18px}
.mobile-menu summary{cursor:pointer;padding:12px;list-style:none}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary::after{content:' ☰'}
.mobile-menu[open] summary::after{content:' ×'}
.mobile-menu nav{position:absolute;right:0;top:100%;width:min(310px,calc(100vw - 48px));padding:20px;background:#07111d;border:1px solid #ffffff30;border-radius:16px;display:flex;flex-direction:column;align-items:stretch;gap:8px!important;font-size:18px}
.mobile-menu nav a{padding:12px}
@media(max-width:1050px){body>header>nav{display:none}.mobile-menu{display:block}}
@media(max-width:600px){html{scroll-padding-top:100px}body>header{padding-top:12px;padding-bottom:12px}}
/* Transparent fixed header. */

body>header{background:transparent;box-shadow:none}
/* Shield navigation from scrolling page text. */
body>header{background:rgba(7,17,29,.94)}
body>header::after{content:'';position:absolute;left:0;right:0;top:100%;height:24px;background:linear-gradient(to bottom,rgba(7,17,29,.94),rgba(7,17,29,0));pointer-events:none;z-index:-1}
.brand-mark{color:#5ba1db;border-color:#5ba1db;border-width:2px;padding:1px 4px}
/* Keep text accents pale, with a slightly bluer tint. */
.eyebrow,.number,.spirit-number,.business-profile dt,.service summary{color:#a8ccf4}
/* Pale blue borders for the page action buttons. */
.primary,.nav-contact,.motion-button{border-color:#a8ccf4;border-width:2px}
.primary:hover,.nav-contact:hover,.motion-button:hover{border-color:#a8ccf4}

/* Coordinate section rules with the pale blue text and button borders. */
.partner{border-left-color:#a8ccf4}
.service{border-top-color:rgba(168,204,244,.4)}
.spirit-list li,.business-profile>div{border-top-color:rgba(168,204,244,.13)}

/* Production proposal: quiet animation controls and an external brand asset. */
.motion-button{border-width:1px}
.brand-icon{display:block;width:29px;height:32px;flex:none}

/* Keep both background controls available while scrolling. */
.hero-bottom{position:fixed;left:auto!important;right:max(24px,env(safe-area-inset-right))!important;bottom:max(24px,env(safe-area-inset-bottom))!important;z-index:1100;width:auto;max-width:calc(100vw - 48px)}
.hero-bottom .flight-controls{margin:0}
.hero-bottom .motion-button{background:rgba(7,17,29,.94)}
footer{padding-bottom:100px}
@media(max-width:600px){.hero-bottom{right:max(16px,env(safe-area-inset-right))!important;bottom:max(16px,env(safe-area-inset-bottom))!important;max-width:calc(100vw - 32px)}}

/* Background-only mode hides every content panel, while keeping controls usable. */
.immersive .hero-copy,.immersive header,.immersive .content-section,.immersive footer{visibility:hidden;pointer-events:none}
body.immersive{overflow:hidden}
.brand-logo{display:block;width:125px;height:32px;flex:none}

/* Compact contact button padding. */
body>header .nav-contact{padding:4px 8px}

/* Bring the Japanese principles and English translations closer together. */
.spirit-list li{row-gap:8px}
.spirit-list h3{margin-bottom:0}
.spirit-number{margin-bottom:0}

/* Copyright stays in the page footer, without a background strip. */
footer{background:transparent;padding-bottom:24px}
footer .copyright{position:static;margin:0;line-height:1;white-space:nowrap}
@media(max-width:600px){footer{padding-bottom:16px}}
/* Match the partnership accent line to the content, excluding panel padding. */
.partner{position:relative;border-left-color:transparent}
.partner::before{content:'';position:absolute;left:-2px;top:28px;bottom:28px;width:2px;background:#a8ccf4;pointer-events:none}
@media(max-width:600px){.partner::before{top:24px;bottom:24px}}