.hero.hero-logistics { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 3%; padding-top: 64px; padding-bottom: 56px; min-height: calc(100svh - 70px); }
.hero-logistics .hero-overlay { background: radial-gradient(ellipse at 78% 30%, #34382f 0, #1c1c1c 65%); }
.hero-logistics .hero-visual-container { position: relative; z-index: 2; min-width: 0; }
.hero-logistics .hero-content { align-self: start; padding-top: 38px; }
.logistics { padding: 0; color: var(--off-white); position: relative; }
.logistics-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--gold-light); padding: 0 12px; }
.logistics-location { color: #bcbcb3; font-size: 10px; }
.logistics-viewport { width: 100%; height: clamp(300px, 32vw, 480px); position: relative; touch-action: pan-y; }
.logistics-viewport canvas, .logistics-fallback { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; }
.logistics-viewport canvas { cursor: grab; }
.logistics-viewport canvas:active { cursor: grabbing; }
.logistics[data-ready="true"] .logistics-fallback { visibility: hidden; }
.logistics-tools { align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.logistics-tools:not([hidden]) { display: flex; }
.logistics-tools span { margin-right: auto; font-size: 10px; color: #cccac1; }
.logistics button { font-family: var(--font-body); cursor: pointer; color: #e3dfd3; border: 1px solid #62604e; background: #282a24; border-radius: 6px; min-height: 44px; padding: 8px 12px; }
.logistics-tools button { font-size: 10px; }
.logistics button:hover { border-color: var(--gold-light); }
.logistics button:focus-visible, .logistics a:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 4px; }
.logistics-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.logistics-stages button { text-align: left; font-size: 10px; display: flex; gap: 10px; align-items: center; }
.logistics-stages button span { font-size: 12px; }
.logistics-stages button[aria-pressed="true"] { background: var(--gold); color: #1c1c1c; border-color: var(--gold); }
.logistics-caption { padding: 20px 0 10px; min-height: 134px; }
.logistics-caption h2 { font-size: 26px; margin-bottom: 8px; }
.hero .logistics-caption p { font-size: 12px; margin: 0 0 10px; max-width: 100%; color: #c5c5bb; }
.logistics-caption a { font-size: 12px; color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px; }
.logistics-note { color: #b7b6ae; font-size: 9px; }
.hero-logistics .live-orders-widget { margin-top: 18px; }
@media (max-width: 900px) { .hero.hero-logistics { grid-template-columns: 1fr; } .hero-logistics .hero-content { padding-top: 0; } .logistics-viewport { height: 420px; } }
@media (max-width: 520px) { .logistics-viewport { height: 300px; } .logistics-location { display: none; } .logistics-stages button { padding: 9px 7px; gap: 5px; } .logistics-stages button span { font-size: 10px; } .logistics-tools { gap: 4px; } .logistics-tools button { padding: 8px; } .logistics-caption h2 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-logistics *, .hero-logistics *::before, .hero-logistics *::after { animation: none !important; transition: none !important; } }