@font-face { font-family: 'SUIT'; src: url('media/SUIT-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* Tesla tokens (getdesign/tesla.DESIGN.md): 0.33s color-only state changes, 4px controls, no shadows.
   One deliberate exception: a light scrim on photos so white titles read (Stitch's dark-on-photo titles did not). */
:root { --t: 0.33s; --ease-link: cubic-bezier(0.5, 0, 0, 0.75); }
@media (prefers-reduced-motion: reduce) { :root { --t: 0s; } }

html { background: #fff; }
body { margin: 0; background: #fff; color: #393c41; font-family: 'SUIT', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; word-break: keep-all; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid #3e6ae1; outline-offset: 2px; }

.scene { height: 100vh; height: 100svh; min-height: 640px; }
.scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(23, 26, 32, 0.5) 0%, rgba(23, 26, 32, 0.12) 34%, rgba(23, 26, 32, 0) 55%, rgba(23, 26, 32, 0.38) 100%); }
#top.video-fallback::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('media/cnc-poster.webp') center / cover; animation: hero-drift 12s ease-in-out infinite alternate; }
#top.video-fallback #hero-video { opacity: 0; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06) translate3d(-1%, -1%, 0); } }

/* nav: white text over film, frosted white with carbon text after it */
.nav { color: #fff; transition: background-color var(--t), color var(--t); }
.nav.is-white { background: rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #171a20; }
.nav-link { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 4px; transition: background-color var(--t), color var(--t); }
.nav-link:hover { background: rgba(255, 255, 255, 0.16); }
.nav.is-white .nav-link:hover { background: rgba(23, 26, 32, 0.06); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 3px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: border-color var(--t), background-color var(--t), color var(--t), box-shadow 0.25s; }
.btn:focus-visible { outline: none; border-color: #3e6ae1; box-shadow: inset 0 0 0 2px #fff; }
.btn-primary { background: #3e6ae1; color: #fff; }
.btn-primary:hover { background: #3457b1; }
.btn-white { background: #fff; color: #171a20; }
.btn-white:hover { background: #eeeeee; }
.btn-card { background: #fff; }
.btn-small { height: 32px; font-size: 13px; padding: 0 14px; border-width: 2px; }
.btn[disabled] { background: #d0d1d2; color: #5c5e62; cursor: default; }
.text-link { color: #5c5e62; box-shadow: inset 0 -1px 0 0 #d0d1d2; transition: box-shadow var(--t) var(--ease-link), color var(--t); }
.text-link:hover { color: #171a20; box-shadow: inset 0 -1px 0 0 #171a20; }

.video-toggle { position: absolute; right: 20px; bottom: 20px; z-index: 10; height: 32px; padding: 0 12px; border: 0; border-radius: 4px; background: rgba(23, 26, 32, 0.4); color: #fff; font-size: 12px; cursor: pointer; transition: background-color var(--t); }
.video-toggle:hover { background: rgba(23, 26, 32, 0.7); }
@media (max-width: 767px) { .video-toggle { top: 76px; bottom: auto; right: 16px; } }

.parallax-img { position: absolute; left: 0; top: -48px; height: calc(100% + 96px); will-change: transform; }

/* quality tabs */
.tab-btn { height: 40px; padding: 0 18px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.7); color: #171a20; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color var(--t); }
.tab-btn:hover { background: rgba(255, 255, 255, 0.88); }
.tab-btn[aria-selected="true"] { background: #fff; }
.q-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s; }
.q-img.on { opacity: 1; }
.q-bar { width: 25%; transition: width var(--t); }

/* cards: Tesla cards have no hover motion; the photo only brightens a touch */
.card-img img, .part > img { transition: opacity var(--t); }
.card:hover .card-img img, .part:hover > img { opacity: 0.94; }

/* form */
.input { width: 100%; height: 40px; padding: 0 12px; background: #f4f4f4; color: #171a20; font-size: 14px; border: 1px solid transparent; border-radius: 4px; outline: none; transition: border-color var(--t), background-color var(--t); }
.input::placeholder { color: #8e8e8e; }
.input:hover { background: #eeeeee; }
.input:focus { border-color: #3e6ae1; background: #fff; }
.field.invalid .input { border-color: #171a20; background: #fff; }
.err { min-height: 1.2em; margin-top: 4px; font-size: 12px; color: #171a20; }
.drop { border: 1px dashed #d0d1d2; transition: border-color var(--t), background-color var(--t); }
.drop:hover { border-color: #5c5e62; }
.drop.over { border: 1px solid #3e6ae1; background: #fff; }
.file { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; color: #171a20; }
.file span:last-child { color: #5c5e62; font-size: 13px; }
.file .bar { grid-column: 1 / -1; height: 2px; background: #eeeeee; }
.file .bar i { display: block; height: 100%; background: #3e6ae1; transform-origin: left; transform: scaleX(0); transition: transform 1s; }
.file.done .bar i { transform: scaleX(1); }
.spinner { width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dock { transition: opacity var(--t), visibility var(--t); }
.dock.hide { opacity: 0; visibility: hidden; }
@media (max-width: 767px) { .dock span { font-size: 13px; } }

/* entrance: hero copy rises once on load (visible if scripts fail) */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js.ready .reveal { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.js.ready .reveal + .reveal { transition-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .q-img { transition: none; }
  .spinner { animation: none; border-right-color: currentColor; }
}

/* part photos: shift the part down and in so the top-left label never sits on it; the card colour matches the photo ground */
.part-img { object-position: 50% 30%; }

@media (max-width: 767px) {
  .scrim { background: linear-gradient(180deg, rgba(23, 26, 32, 0.62) 0%, rgba(23, 26, 32, 0.42) 45%, rgba(23, 26, 32, 0.2) 70%, rgba(23, 26, 32, 0.45) 100%); }
  .tab-btn { height: 36px; padding: 0 10px; font-size: 13px; }
}

/* Keep the long-form sections compact enough to scan on a desktop screen. */
@media (min-width: 768px) {
  #machinery, #parts { padding-top: 64px !important; padding-bottom: 64px !important; }
  #rfq { padding-top: 72px !important; padding-bottom: 72px !important; }
}
@media (max-width: 767px) {
  #machinery, #parts { padding-top: 48px !important; padding-bottom: 48px !important; }
  #rfq { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* Keep the quality sequence pinned even when the optional GSAP CDN is unavailable. */
@media (min-width: 768px) {
  #quality { height: 400vh; }
  #q-stage { position: sticky; top: 0; }
}