/* The interactive layer keeps the original palette and local assets. */
:root {
  --ease-out: cubic-bezier(.2,.75,.2,1);
  --motion-fast: 220ms;
  --motion-enter: 800ms;
}
.site-shell { overflow: clip; }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; z-index: 30; pointer-events: none; }
.header { height: 5rem; }
.nav { font-size: .72rem; }
.header .button { min-height: 2.3rem; }
.button { min-height: 2.8rem; border-radius: .7rem; font-size: .75rem; gap: 1.1rem; transition: transform 300ms var(--ease-out), translate 300ms var(--ease-out), box-shadow 300ms, background 200ms; }
.button > span { font-size: 1.25em; transition: transform 250ms; }
.button:hover > span { transform: translate(2px,-2px); }
.button:active { transform: scale(.96); }
.hero { height: 41rem; padding-top: 2.5rem; }
.hero::before { inset: -5rem 0 auto; height: 39rem; background: linear-gradient(160deg,#edf0f3,#fafaf9 70%); border-radius: 0 0 45% 10% / 0 0 9% 4%; }
.hero-kicker { display: flex; justify-content: center; align-items: center; gap: .6rem; font-size: .6rem; letter-spacing: .14em; font-weight: 700; margin-bottom: 1.3rem; color: #656967; }
.hero-kicker .japan-flag { width: 1.5rem; height: 1.1rem; top: 0; margin: 0; transform: none; border-radius: 3px; }
.hero-kicker .japan-flag::after { width: .6rem; height: .6rem; }
.hero h1 { font-size: clamp(2rem,3.55vw,2.9rem); line-height: 1.16; letter-spacing: -.065em; }
.hero h1 > span { font-size: inherit; letter-spacing: inherit; }
.hero-copy > p { font-size: .8rem; line-height: 1.6; max-width: 29rem; margin: 1rem auto 0; color: #747975; }
.hero-actions { margin-top: 1.3rem; gap: 1.3rem; }
.hero-actions > .button { width: auto; padding-inline: 1.6rem; }
.process-link { font-size: .65rem; color: #656967; }
.play { width: 2.7rem; height: 2.7rem; transition: transform 350ms var(--ease-out), background 350ms; }
.process-link:hover .play { transform: scale(1.1); background: white; }
.hero-cars { bottom: 2.8rem; width: 84%; left: 8%; height: 20rem; transform: translate3d(var(--car-x,0px),var(--car-y,0px),0); transition: transform 700ms var(--ease-out); }
.hero-orbit { position: absolute; width: 28rem; height: 28rem; left: calc(50% - 14rem); top: 12rem; z-index: -1; pointer-events: none; transform: translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0); transition: transform 1000ms var(--ease-out); }
.hero-orbit::before,.hero-orbit::after { content: ''; position: absolute; inset: 0; border: 1px solid #ce8d2330; border-radius: 50%; }
.hero-orbit::after { inset: 2rem; }
.hero-orbit span { position: absolute; inset: 4rem; border-radius: 50%; background: linear-gradient(150deg,#edb34522,#e49a0010); }
.hero-bottom { position: absolute; bottom: .3rem; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; color: #767b78; font-size: .65rem; padding-top: 1rem; border-top: 1px solid #e9ebe8; }
.hero-bottom b { color: var(--orange); margin-inline: .8rem; }
.hero-bottom a span { margin-left: .7rem; }
.consultation { margin-top: 3.3rem; }
.request-card { border: 1px solid #eeefec; background: white; }
.form-note { color: #777; }
.catalog-intro { text-align: center; font-size: .85rem; color: #7c817d; margin-top: .8rem; }
.cars-grid { perspective: 1000px; }
.car-card { padding: .4rem .4rem 1.2rem; border: 1px solid #e7e9e5; border-radius: 1rem; background: #fff; transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform 500ms var(--ease-out), box-shadow 400ms; }
.car-card > img { border-radius: .75rem; }
.car-info { padding: 1.2rem .7rem 0; }
.car-info h3 { white-space: normal; min-height: 2.4em; font-size: .95rem; }
.car-info p { color: #727772; }
.car-info p + p { color: var(--ink); font-size: .9rem; font-weight: 700; }
.car-info .button { width: 100%; background: #f3f4f1; color: var(--ink); border: 1px solid #e6e8e2; margin-top: 1.2rem; }
.car-info .button:hover { background: var(--orange); border-color: var(--orange); color: white; }
.catalog-controls { display: none; }
.about-copy { font-size: .8rem; line-height: 1.75; }
.step { border-radius: 1rem; transition: box-shadow 350ms, border-color 350ms; }
.step h3 { font-size: .8rem; }
.step p { font-size: .73rem; line-height: 1.6; }
.step-number { font-size: 2rem; }
.step-featured { background: #df9009; box-shadow: 0 1rem 2rem #bd770028; }
.footer-bottom { color: #a2a69f; font-size: .55rem; }
.mobile-dock[hidden] { display: none; }
.mobile-dock { display: none; }
.dialog-close { width: 44px; height: 44px; right: .5rem; top: .5rem; }
dialog[open] { animation: dialog-in 320ms var(--ease-out) both; }
body:has(dialog[open]) { overflow: hidden; }
.reveal.is-visible { animation: rise-in var(--motion-enter) var(--ease-out) both; }
.hero-copy { animation: rise-in 900ms var(--ease-out) both; }
@keyframes rise-in { from { opacity: .25; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@media (hover:hover) and (pointer:fine) {
  .car-card:hover { box-shadow: 0 1.5rem 3rem #24301b15; }
  .step:hover { border-color: #dba844; box-shadow: 0 .5rem 1.5rem #24301b0d; }
  .button:not(.button-outline) { translate: var(--magnet-x,0px) var(--magnet-y,0px); }
}
@media (max-width:1100px) {
  .header { gap: 1.4rem; }
  .nav { font-size: .64rem; }
  .request-card h2 { white-space: normal; }
}
@media (max-width:800px) {
  html { scroll-padding-top: 6rem; }
  .header.container { position: fixed; top: 0; left: 0; width: 100%; max-width: none; height: 4.7rem; padding: 0 6%; z-index: 15; background: #f3f5f0e8; backdrop-filter: blur(18px); border-bottom: 1px solid #161c1010; }
  main { padding-top: 4.7rem; }
  .header .logo { width: 5.6rem; }
  .header .logo svg { width: 5.6rem; height: 1.65rem; }
  .header-contact .phone { font-size: .7rem; }
  .menu-toggle { height: 44px; width: 44px; padding: 11px; border: 1px solid #dfe2db; border-radius: 50%; gap: 6px; align-items: center; }
  .menu-toggle span { transition: transform 250ms; width: 20px; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav { position: fixed; top: 4.7rem; z-index: 14; padding: 1.2rem 6% 1.8rem; flex-direction: column; gap: 0; border-radius: 0 0 1.5rem 1.5rem; box-shadow: 0 18px 35px #1112; background: #f7f8f4; animation: dialog-in 250ms var(--ease-out); }
  .mobile-nav a { min-height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e4dd; font-size: 1.1rem; }
  .mobile-nav a::after { content:'↗'; color: #a1a59d; }
  .hero { height: 41rem; padding-top: 2.6rem; }
  .hero h1 { font-size: clamp(1.5rem,4.9vw,2.4rem); }
  .hero-copy > p { max-width: 24rem; width: 86%; font-size: .9rem; }
  .hero-cars { width: 110%; max-width: none; left: -5%; bottom: 4rem; }
  .hero::before { height: 40rem; }
  .hero-bottom { font-size: .65rem; bottom: 1rem; }
  .button { font-size: .85rem; min-height: 3rem; }
  .car-info h3 { font-size: .9rem; }
  .car-info .button { font-size: .8rem; }
  .consultation { grid-template-columns: 1fr; gap: 1rem; }
  .delivery-card { height: 10rem; min-height: 0; text-align: left; padding: 1.4rem 1.5rem; }
  .delivery-card p { font-size: .75rem; }
  .delivery-number { font-size: 3.7rem; margin-top: .4rem; }
  .delivery-days { position: absolute; left: 10rem; top: 5.5rem; font-size: 1.4rem; }
  .delivery-card img { left: auto; right: -1rem; width: 20rem; height: 12rem; bottom: -1.5rem; opacity: .8; }
  .delivery-line { width: 5rem; }
  .request-card { padding: 1.8rem; border-radius: 1.2rem; }
  .request-card h2 { font-size: 1.6rem; letter-spacing: -.05em; line-height: 1.35; }
  .form-row input,.form-bottom select,.callback-form input { min-height: 3.4rem; font-size: 16px; border-radius: .75rem; }
  .form-bottom button { width: 7rem; }
  .form-note { font-size: .65rem; margin-top: 1rem; }
  .footer .phone { font-size: .8rem; }
  .footer .nav { font-size: .8rem; }
  .footer .nav a { padding-block: .5rem; }
  .footer-bottom,.footer-bottom > .text-button { font-size: .65rem; }
  .footer { padding-bottom: 7rem; }
  .mobile-dock { position: fixed; z-index: 12; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 6% calc(.8rem + env(safe-area-inset-bottom)); background: #fffffff2; backdrop-filter: blur(20px); border-top: 1px solid #e7e9e3; box-shadow: 0 -10px 30px #141c0f08; animation: dialog-in 300ms var(--ease-out); }
  .mobile-dock > div { display: grid; gap: .3rem; }
  .mobile-dock span { font-size: .62rem; color: #7b8176; }
  .mobile-dock strong { font-size: .82rem; }
  .mobile-dock .button { min-height: 2.9rem; padding-inline: 1.1rem; }
  .mobile-dock .button span { color: white; font-size: 1.1rem; }
  body:has(dialog[open]) .mobile-dock,body:has(input:focus,select:focus) .mobile-dock { display: none; }
  dialog { font-size: .9rem; }
  .callback-form label { font-size: .85rem; }
  .callback-form .button { font-size: .9rem; }
}
@media (max-width:520px) {
  .container { width: 88%; }
  .header-contact .phone { font-size: .6rem; }
  .header { padding-inline: 6%; gap: .5rem; }
  .hero { height: 37.5rem; padding-top: 2.1rem; text-align: left; }
  .hero-copy { width: 88%; margin-inline: auto; }
  .hero-kicker { justify-content: flex-start; font-size: .56rem; letter-spacing: .12em; margin-bottom: 1.3rem; }
  .hero h1 { font-size: clamp(1.45rem,6.55vw,2.12rem); line-height: 1.27; letter-spacing: -.065em; }
  .hero h1 > span { font-size: inherit; white-space: normal; display: block; max-width: 10em; }
  .hero-copy > p { margin: 1rem 0 0; max-width: 19rem; width: 100%; font-size: .9rem; line-height: 1.65; }
  .hero-actions { justify-content: flex-start; margin-top: 1.4rem; gap: 1.4rem; }
  .hero-actions .button { min-height: 3.2rem; padding-inline: 1.3rem; }
  .process-link { font-size: .68rem; gap: .6rem; }
  .hero-cars { width: 158%; left: -29%; height: 15rem; bottom: 3.7rem; }
  .hero::before { height: 38rem; border-radius: 0 0 35% 0 / 0 0 4% 0; background: linear-gradient(150deg,#eff2ee,#f7f8f4); }
  .hero-orbit { width: 23rem; height: 23rem; left: calc(50% - 11.5rem); top: 14rem; }
  .hero-bottom { bottom: 1.15rem; font-size: .6rem; border-top-color: #dfe3d9; }
  .hero-bottom > a { font-size: 0; }
  .hero-bottom > a span { font-size: 1.1rem; display: grid; place-items: center; border: 1px solid #d9ded3; border-radius: 50%; width: 2rem; height: 2rem; }
  .consultation { margin-top: 2rem; }
  .delivery-card { height: 10.3rem; border-radius: 1.2rem; padding: 1.3rem; background: #f1f3ed; }
  .delivery-card p { max-width: 13rem; font-size: .65rem; }
  .delivery-days { top: 5.8rem; left: 9.7rem; font-size: 1.2rem; }
  .delivery-card img { width: 18rem; right: -7.8rem; opacity: .45; }
  .delivery-number { font-size: 3.8rem; }
  .request-card { padding: 1.5rem 1.2rem; box-shadow: 0 15px 35px #17220b06; }
  .request-card h2 { font-size: 1.55rem; }
  .lead-form { margin-top: 1.5rem; }
  .form-row { display: grid; grid-template-columns: 1fr; gap: .65rem; }
  .form-bottom { margin-top: .65rem; }
  .form-bottom button { width: 100%; min-height: 3.4rem; }
  .form-note { font-size: .64rem; line-height: 1.65; }
  .catalog { margin-top: 4rem; }
  .section-heading { text-align: left; }
  .lined { justify-content: flex-start; }
  .lined::before { display: none; }
  .eyebrow { font-size: .65rem; letter-spacing: .1em; }
  .section-heading h2 { font-size: 1.65rem; letter-spacing: -.065em; max-width: 11em; line-height: 1.2; margin-top: .9rem; }
  .catalog-intro { text-align: left; font-size: .83rem; line-height: 1.5; max-width: 16rem; }
  .cars-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; gap: .8rem; margin-top: 1.5rem; margin-right: -6.82%; padding: 0 6.82% .6rem 0; scrollbar-width: none; perspective: none; }
  .cars-grid::-webkit-scrollbar { display: none; }
  .car-card { flex: 0 0 91%; min-width: 0; scroll-snap-align: start; padding: .4rem .4rem 1.2rem; border-radius: 1.3rem; }
  .car-card > img { aspect-ratio: 1.25; height: auto; border-radius: 1rem; }
  .car-info { padding: 1.2rem .7rem 0; }
  .car-info h3 { font-size: 1.05rem; min-height: 2.5em; letter-spacing: -.02em; }
  .car-info p { font-size: .8rem; }
  .car-info p + p { font-size: 1.05rem; margin-top: .8rem; }
  .car-info .button { min-height: 3.1rem; font-size: .85rem; }
  .catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; font-size: .6rem; color: #858b80; }
  .catalog-count { font-size: .9rem; font-weight: 700; color: var(--ink); }
  .catalog-count span { font-size: .7rem; font-weight: 400; color: #858b80; }
  .catalog-controls > div { display: flex; gap: .4rem; }
  .catalog-arrow { border: 1px solid #e0e4d9; background: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; color: #20251b; }
  .catalog-arrow:disabled { opacity: .3; cursor: default; }
  .about { margin-top: 4.5rem; gap: 1.3rem; }
  .about h2 { font-size: clamp(1.15rem,5.4vw,1.7rem); line-height: 1.3; letter-spacing: -.06em; }
  .about-copy { font-size: .9rem; line-height: 1.8; }
  .steps { grid-template-columns: 1fr; gap: .8rem; margin-block: 2rem 3.5rem; }
  .step { position: relative; padding: 1.5rem 1.3rem 1.5rem 5rem; min-height: 0; border-radius: 1.2rem; }
  .step-number { position: absolute; left: 1.2rem; top: 1.5rem; font-size: 1.6rem; }
  .step h3 { font-size: 1rem; margin-top: 0; line-height: 1.4; }
  .step p { font-size: .85rem; line-height: 1.65; margin-bottom: 0; margin-top: .6rem; }
  .step .short-line { display: none; }
  .footer { padding-top: 2.5rem; }
  .footer-main { flex-direction: column; gap: 2rem; }
  .footer-contact { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; }
  .footer-contact .phone { font-size: .68rem; }
  .footer .button-outline { min-width: 0; padding-inline: .8rem; font-size: .68rem; }
  .footer .nav { width: 100%; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; font-size: .85rem; }
  .footer-bottom { line-height: 1.7; }
  dialog { width: calc(100% - 1.25rem); border-radius: 1.5rem; padding: 2rem 1.4rem; max-height: calc(100dvh - 2rem); }
  dialog h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-cars,.hero-orbit,.car-card { transform: none !important; }
  .button { translate: none !important; }
}
@media (max-width:360px) {
  .hero-actions { gap: .8rem; }
  .hero-actions > .button { flex-shrink: 0; white-space: nowrap; padding-inline: 1rem; font-size: .8rem; gap: .8rem; }
  .process-link { gap: .4rem; font-size: .62rem; }
  .play { width: 2.3rem; height: 2.3rem; flex-shrink: 0; }
}

/* Neutral mobile surfaces; orange remains the accent color. */
@media (max-width:800px) {
  :root { --ink: #121212; }
  .header.container { background: #fafafaf0; border-bottom-color: #0000000d; }
  .hero::before { background: linear-gradient(150deg,#f1f1f1,#fafafa); }
  .hero-orbit::before,.hero-orbit::after { border-color: #0000000c; }
  .hero-orbit span { background: linear-gradient(150deg,#00000006,#00000002); }
  .hero-kicker,.process-link { color: #686868; }
  .hero-copy > p,.hero-bottom,.catalog-intro,.car-info p { color: #757575; }
  .hero-bottom { border-color: #e4e4e4; }
  .hero-bottom > a span { border-color: #dedede; }
  .delivery-card { background: #f4f4f4; }
  .request-card { border-color: #e9e9e9; box-shadow: 0 15px 35px #00000006; }
  .car-card { border-color: #e7e7e7; }
  .car-info .button { background: #f4f4f4; border-color: #e6e6e6; }
  .car-info .button:hover { background: var(--orange); border-color: var(--orange); }
  .car-info p + p { color: var(--ink); }
  .catalog-controls,.catalog-count span { color: #858585; }
  .catalog-arrow { border-color: #e2e2e2; color: #222; }
  .mobile-dock { border-color: #e7e7e7; box-shadow: 0 -10px 30px #00000008; }
  .mobile-dock > div > span { color: #7c7c7c; }
  .footer { background: #202020; }
  .footer-bottom { color: #a4a4a4; }
}