/* =====================================================================
   "From Rock to Road": immersive 3D hero (home page only)
   ===================================================================== */
.m3d { position: relative; background: #07080a; }
.m3d__track { display: none; }
.m3d--on .m3d__track { display: block; height: 760vh; }
.m3d--on .m3d__fallback { display: none; }
.m3d--on + .features { margin-top: 0; padding-top: 56px; background: #fff; }

.m3d__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); min-height: 560px; overflow: hidden; background: #07080a; color: #fff; isolation: isolate; }
.m3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.8s cubic-bezier(.2, .7, .2, 1); cursor: grab; touch-action: pan-y; }
.m3d--lit .m3d__canvas { opacity: 1; }
.m3d.is-dragging .m3d__canvas { cursor: grabbing; }
.m3d__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
    linear-gradient(90deg, rgba(5, 6, 8, .78) 0%, rgba(5, 6, 8, .38) 34%, rgba(5, 6, 8, 0) 58%),
    linear-gradient(0deg, rgba(5, 6, 8, .65) 0%, rgba(5, 6, 8, 0) 26%),
    radial-gradient(120% 90% at 60% 45%, transparent 55%, rgba(0, 0, 0, .45) 100%); }

/* intro line drawing */
.m3d__sketch { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(1100px, 82vw); transform: translate(-42%, -50%); pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.m3d__sketch path { fill: none; stroke: #f7c02d; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.m3d__sketch .m3d__sketch-dim { stroke: rgba(247, 192, 45, .45); stroke-width: 1; }
.m3d--sketch .m3d__sketch { opacity: 1; }
.m3d--sketch .m3d__sketch-path { animation: m3d-draw 2.2s cubic-bezier(.45, .05, .25, 1) forwards; filter: drop-shadow(0 0 6px rgba(247, 192, 45, .55)); }
.m3d--sketch .m3d__sketch-dim { animation: m3d-draw 1.6s .9s ease forwards; }
.m3d--sketch-out .m3d__sketch { opacity: 0; transition-duration: 1.4s; }
@keyframes m3d-draw { to { stroke-dashoffset: 0; } }

/* loader */
.m3d__loader { position: absolute; z-index: 6; left: 50%; bottom: 14%; transform: translateX(-50%); display: grid; gap: 14px; justify-items: center; transition: opacity .6s ease; }
.m3d__loader-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #c9ced6; }
.m3d__loader-bar { position: relative; width: 220px; height: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; border-radius: 2px; }
.m3d__loader-bar span { position: absolute; inset: 0 auto 0 0; width: 8%; background: #f7c02d; transition: width .5s ease; box-shadow: 0 0 10px rgba(247, 192, 45, .8); }
.m3d--loaded .m3d__loader { opacity: 0; pointer-events: none; }

/* story panels */
.m3d__panel { position: absolute; z-index: 4; left: max(var(--gut), calc((100vw - 1240px) / 2 + var(--gut))); bottom: 16%; width: min(540px, 44vw); opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform; }
.m3d__panel a, .m3d__panel button, .m3d__panel [data-ed] { pointer-events: auto; }
.m3d__panel--intro { bottom: auto; top: 50%; width: min(700px, 52vw); transform: translateY(-50%); }
.m3d__panel--intro > * { opacity: 0; transform: translateY(22px); transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.m3d--ready .m3d__panel--intro > * { opacity: 1; transform: none; }
.m3d--ready .m3d__panel--intro > :nth-child(2) { transition-delay: .15s; }
.m3d--ready .m3d__panel--intro > :nth-child(3) { transition-delay: .4s; }
.m3d--ready .m3d__panel--intro > :nth-child(4) { transition-delay: .6s; }
.m3d__panel--final { bottom: auto; top: 50%; width: min(720px, 56vw); transform: translateY(-50%); }
.m3d__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: #f7c02d; }
.m3d__eyebrow:before { content: ""; width: 34px; height: 1px; background: #f7c02d; }
.m3d__title { margin: 0 0 16px; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.m3d__title--xl { font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: .98; letter-spacing: -.035em; }
.m3d__text { max-width: 470px; margin: 0 0 30px; font-size: 1.08rem; line-height: 1.65; color: #c3c9d2; }
.m3d__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.m3d__step { margin: 0 0 12px; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #f7c02d; }
.m3d__badge { display: inline-block; margin: 0 0 22px; padding: 7px 14px; border: 1px solid rgba(247, 192, 45, .55); border-radius: 999px; background: rgba(247, 192, 45, .08); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f7c02d; }
.m3d__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 18px; }
.m3d__specs > div { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .12); border-left: 2px solid #f7c02d; border-radius: 10px; background: rgba(10, 12, 16, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.m3d__specs dt { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8f98a6; }
.m3d__specs dd { margin: 0; font-size: 13px; font-weight: 700; color: #fff; }
.m3d__xray { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgba(247, 192, 45, .12); color: #f7c02d; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .5s; }
.m3d--xray .m3d__xray { opacity: 1; }
.m3d__flow { position: relative; display: flex; justify-content: space-between; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: f; }
.m3d__flow:before { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 1px; background: linear-gradient(90deg, #f7c02d, rgba(247, 192, 45, .25)); }
.m3d__flow:after { content: ""; position: absolute; top: 5px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: #f7c02d; box-shadow: 0 0 14px #f7c02d; animation: m3d-flow 3.2s linear infinite; }
@keyframes m3d-flow { from { left: 6px; } to { left: calc(100% - 15px); } }
.m3d__flow li { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #dfe3e9; }
.m3d__flow li:last-child { justify-items: end; text-align: right; }
.m3d__flow li:nth-child(2) { justify-items: center; text-align: center; }
.m3d__flow li:before { counter-increment: f; content: ""; width: 19px; height: 19px; border: 2px solid #f7c02d; border-radius: 50%; background: #07080a; }

/* hud */
.m3d__hud { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px max(var(--gut), calc((100vw - 1240px) / 2 + var(--gut))); border-top: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(0deg, rgba(5, 6, 8, .7), rgba(5, 6, 8, 0)); }
.m3d__steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.m3d__steps button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; font-size: 12.5px; font-weight: 600; color: #7d8592; cursor: pointer; transition: color .3s, background-color .3s; }
.m3d__steps button span { font-family: var(--font-display); font-weight: 800; color: #4e5562; transition: color .3s; }
.m3d__steps button:hover { color: #fff; }
.m3d__steps .is-active button { color: #fff; background: rgba(255, 255, 255, .06); }
.m3d__steps .is-active button span { color: #f7c02d; }
.m3d__tools { display: flex; align-items: center; gap: 10px; }
.m3d__hint { margin-right: 6px; font-size: 12.5px; color: #7d8592; }
.m3d__tool { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(10, 12, 16, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13.5px; font-weight: 700; color: #e6e9ee; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.m3d__tool:hover { border-color: #f7c02d; color: #fff; }
.m3d__tool--main { background: #f7c02d; border-color: #f7c02d; color: #0b1324; }
.m3d__tool--main:hover { background: #ffd45c; color: #0b1324; }
.m3d__dn-night { display: none; }
.m3d--night .m3d__dn-night { display: inline; }
.m3d--night .m3d__dn-day { display: none; }
@media (max-width: 1180px) { .m3d__steps button { font-size: 0; gap: 0; } .m3d__steps button span { font-size: 12.5px; } .m3d__hint { display: none; } }

/* hotspots + callout */
.m3d__hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.m3d__hs { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 2px solid #f7c02d; border-radius: 50%; background: rgba(7, 8, 10, .82); color: #f7c02d; font-family: var(--font-display); font-size: 13px; font-weight: 800; cursor: pointer; pointer-events: auto; transition: background-color .2s, color .2s, box-shadow .2s; }
.m3d__hs:before { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(247, 192, 45, .5); border-radius: 50%; animation: m3d-pulse 2.4s ease-out infinite; }
.m3d__hs:hover, .m3d__hs:focus-visible, .m3d__hs.is-active { background: #f7c02d; color: #0b1324; box-shadow: 0 0 24px rgba(247, 192, 45, .6); outline: none; }
@keyframes m3d-pulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.m3d__lines { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.m3d__lines polyline { fill: none; stroke: #f7c02d; stroke-width: 1.2; opacity: 0; transition: opacity .25s; }
.m3d__lines circle { fill: #f7c02d; opacity: 0; transition: opacity .25s; }
.m3d--callout .m3d__lines polyline, .m3d--callout .m3d__lines circle { opacity: 1; }
.m3d__callout { position: absolute; z-index: 5; left: 0; top: 0; width: 300px; padding: 18px 20px 20px; border: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid #f7c02d; border-radius: 12px; background: rgba(9, 11, 15, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); pointer-events: none; }
.m3d__callout-num { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .2em; color: #f7c02d; }
.m3d__callout h3 { margin: 0 0 8px; font-size: 1.12rem; color: #fff; }
.m3d__callout p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #c3c9d2; }

/* engineering scan tooltip */
.m3d__tip { position: absolute; z-index: 5; left: 0; top: 0; padding: 6px 10px; border-left: 2px solid #f7c02d; background: rgba(9, 11, 15, .82); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f7c02d; pointer-events: none; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.m3d__tip.is-on { opacity: 1; }

/* dimensions (inspect only) */
.m3d__dims span { position: absolute; z-index: 4; left: 0; top: 0; display: none; padding: 4px 9px; border: 1px solid rgba(247, 192, 45, .5); border-radius: 6px; background: rgba(9, 11, 15, .8); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #f7c02d; white-space: nowrap; transform: translate(-50%, -50%); }
.m3d--inspect .m3d__dims span { display: block; }

/* inspection mode */
.m3d__inspect { display: none; }
.m3d--inspect .m3d__stage { position: fixed; inset: 0; z-index: 3000; height: 100vh; }
.m3d--inspect .m3d__panel, .m3d--inspect .m3d__hud, .m3d--inspect .m3d__shade { display: none; }
.m3d--inspect .m3d__inspect { display: block; }
.m3d__inspect-top { position: absolute; z-index: 6; left: 28px; right: 28px; top: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.m3d__inspect-hint { margin: 0; font-size: 13.5px; color: #9aa3b0; }
.m3d__inspect-actions { display: flex; gap: 10px; }
.m3d__isolate { position: absolute; z-index: 6; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(9, 11, 15, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.m3d__isolate button { padding: 10px 16px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 700; color: #aab2be; cursor: pointer; }
.m3d__isolate button:hover { color: #fff; }
.m3d__isolate button[aria-pressed="true"] { background: #f7c02d; color: #0b1324; }

/* admin edit mode: texts stay clickable */
body.ed-on .m3d__panel { pointer-events: auto; }

/* fallback (phones, tablets, low-end devices, reduced motion, no WebGL) */
.m3d__mlist-wrap { padding-top: 48px; padding-bottom: 8px; background: #fff; }
.m3d__mlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.m3d__mlist details { height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 12px; background: #fff; }
.m3d__mlist summary { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.m3d__mlist summary::-webkit-details-marker { display: none; }
.m3d__mlist summary span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--brand); font-size: 12.5px; font-weight: 800; }
.m3d__mlist p { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.m3d--fallback + .features { margin-top: 0; padding-top: 28px; }
@media (max-width: 991px) { .m3d__mlist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .m3d__mlist { grid-template-columns: 1fr; } .m3d__mlist-wrap { padding-top: 36px; } }
@media (prefers-reduced-motion: reduce) { .m3d__flow:after, .m3d__hs:before { animation: none; } }
.m3d__hs[hidden], .m3d__callout[hidden] { display: none; }
.m3d__steps button { white-space: nowrap; }
/* the slim top bar scrolls away; size the stage so the chapter bar is visible from the first screen */
@media (min-width: 768px) { .m3d__stage { height: calc(100vh - var(--header-h) - 40px); } }
.m3d__tool, .m3d__hint { white-space: nowrap; }