/* Max Layer 3D — graphite / warm ivory / fired orange */
:root {
    --bs-primary: #C45125;
    --bs-primary-rgb: 196, 81, 37;
    --bs-primary-bg-subtle: #FAE9DF;
    --bs-primary-border-subtle: #E9B49B;
    --bs-primary-text-emphasis: #A6411B;
    --bs-link-color: #A6411B;
    --bs-link-hover-color: #813215;
}
.btn-outline-primary {
    --bs-btn-color: #A6411B;
    --bs-btn-border-color: #C45125;
    --bs-btn-hover-bg: #A6411B;
    --bs-btn-hover-border-color: #A6411B;
    --bs-btn-active-bg: #A6411B;
    --bs-btn-active-border-color: #A6411B;
}
.site-nav { background: #202326; backdrop-filter: none; }
.offcanvas.offcanvas-end { z-index: 1060; }
.offcanvas-backdrop { z-index: 1055; }
.site-nav .navbar-brand img { width: 210px; height: auto; max-width: 45vw; filter: none; }
.brand-logo-footer { width: 230px; max-width: 100%; height: auto; }
.site-footer { background: #202326; }
.site-footer .ft-bottom { background: #202326; }
.hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; }
.hero > .container { padding-inline: 24px; }
.hero-art { position: relative; min-height: 360px; display: grid; place-items: center; direction: ltr; }
.spool {
    width: min(320px, 70vw); aspect-ratio: 1; border-radius: 50%;
    background: repeating-radial-gradient(circle, #C45125 0 3px, #F28B54 4px 5px, #A6411B 6px 7px);
    border: 18px solid #343A3F; transform: rotate(-20deg) scaleY(.85);
    box-shadow: 22px 32px 0 #141719, 24px 38px 45px #0006;
    position: relative;
}
.spool::before { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: #202326; border: 20px solid #343A3F; box-shadow: 0 0 0 3px #F28B54; }
.spool::after { content: ''; position: absolute; width: 180px; height: 100px; border: 4px solid #F28B54; border-top: 0; border-left: 0; border-radius: 0 0 100% 0; left: 85%; top: 65%; }
.art-label { position: absolute; bottom: 0; inset-inline-start: 10%; color: #F5F2EB; font-family: 'Space Grotesk', sans-serif; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; border-inline-start: 2px solid #F28B54; padding-inline-start: 1rem; }
.hero .hero-stats { grid-template-columns: repeat(3, 1fr); }
.hero .hero-stat .num { font-size: 1.1rem; color: #F28B54; }
.hero .hero-stat .lbl { color: #D3D2CE; font-size: .68rem; letter-spacing: .06em; }
.future-panel { padding: clamp(1.75rem, 5vw, 3rem); background: #202326; color: #D3D2CE; border-radius: var(--radius); margin-bottom: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.future-panel h2 { color: #F5F2EB; }
.future-panel p { max-width: 650px; margin-bottom: 0; }
.future-badge { color: #F28B54; border: 1px solid #F28B5466; border-radius: 999px; padding: .6rem 1rem; white-space: nowrap; }
.bento-tile .bg { background: repeating-linear-gradient(145deg, #202326 0 12px, #303438 12px 14px); opacity: 1; }
.bento-tile:nth-child(even) .bg { background: repeating-linear-gradient(35deg, #A6411B 0 12px, #C45125 12px 14px); }
.bento-tile:hover .bg { transform: scale(1.04); }
@media (max-width: 767px) {
    .hero-layout { grid-template-columns: 1fr; gap: 1rem; }
    .hero-art { min-height: 300px; }
    .spool { width: 230px; }
    .hero .hero-stats { gap: .65rem; }
    .future-panel { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    .animate-on-scroll { opacity: 1 !important; transform: none !important; }
}