/* ============================================================
   eContainers · Bootstrap 5.3 brand layer
   Minimal custom CSS — mostly Bootstrap variable overrides.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Re-theme Bootstrap to industrial palette (utilities read the -rgb vars) */
  --bs-primary:  #c15a2c;            --bs-primary-rgb: 193,90,44;
  --bs-dark:     #211e1c;            --bs-dark-rgb: 33,30,28;
  --bs-warning:  #e6c14a;            --bs-warning-rgb: 230,193,74;
  --bs-body-bg:  #f4f2ee;
  --bs-body-color: #211e1c;
  --bs-secondary-color: rgba(33,30,28,.62);
  --bs-body-font-family: "Archivo", system-ui, -apple-system, sans-serif;
  --bs-border-color: #ddd8d0;
  --bs-border-radius: .2rem; --bs-border-radius-sm: .15rem; --bs-border-radius-lg: .3rem;
  --bs-link-color-rgb: 193,90,44; --bs-link-hover-color-rgb: 150,66,30;

  --brand-rust: #c15a2c; --brand-rust-d: #a4481f;
}

body { -webkit-font-smoothing: antialiased; }

/* Recolor solid buttons through Bootstrap's own component variables */
.btn-primary {
  --bs-btn-bg: var(--brand-rust); --bs-btn-border-color: var(--brand-rust);
  --bs-btn-hover-bg: var(--brand-rust-d); --bs-btn-hover-border-color: var(--brand-rust-d);
  --bs-btn-active-bg: var(--brand-rust-d); --bs-btn-active-border-color: var(--brand-rust-d);
  --bs-btn-disabled-bg: var(--brand-rust); --bs-btn-disabled-border-color: var(--brand-rust);
}
.btn { --bs-btn-font-weight: 700; letter-spacing: .03em; }
.btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .85rem; text-transform: uppercase; font-size: .95rem; }

/* Display font + utility helpers (the only typographic custom classes) */
.font-display { font-family: "Archivo Expanded","Archivo",sans-serif; font-weight: 800;
                text-transform: uppercase; letter-spacing: -.015em; line-height: .96; }
.font-mono { font-family: "Space Mono", ui-monospace, monospace; }
.eyebrow { font-family: "Space Mono", monospace; font-weight: 700; font-size: .78rem;
           letter-spacing: .2em; text-transform: uppercase; display: inline-block; }
.tracking-mono { font-family: "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }

/* Section rhythm (Bootstrap maxes out at py-5) */
.section { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
[id] { scroll-margin-top: 84px; }

/* Brand mark in navbar/footer */
.brand-mark { width: 28px; height: 28px; background: var(--brand-rust); border-radius: 3px;
              position: relative; display: inline-block; flex: none; }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; background:#f4f2ee; inset:0; margin:auto; }
.brand-mark::before { width: 13px; height: 2.5px; }
.brand-mark::after  { width: 2.5px; height: 13px; }
.navbar-brand { font-family:"Archivo Expanded","Archivo",sans-serif; font-weight:900; letter-spacing:-.01em; }

/* Navbar: solid charcoal, gains shadow on scroll */
#mainnav { transition: box-shadow .3s, background-color .3s; }
#mainnav.scrolled { box-shadow: 0 8px 30px -18px rgba(0,0,0,.6); }
.nav-link { font-weight: 600; }
.lang-toggle .btn { --bs-btn-padding-y:.25rem; --bs-btn-padding-x:.55rem; font-family:"Space Mono",monospace; font-weight:700; font-size:.72rem; }

/* Hero + parallax */
.hero-pad { padding-top: clamp(7rem, 13vw, 11rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.hero-bg, .px-layer { position: absolute; inset: -14% 0; will-change: transform; }
.hero-bg image-slot, .px-layer image-slot { width: 100%; height: 100%; }
.px-wrap { position: relative; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(33,30,28,.94) 0%, rgba(33,30,28,.78) 44%, rgba(33,30,28,.32) 100%); }

/* Hazard tape divider */
.hazard-tape { height: 13px; background-image: repeating-linear-gradient(-45deg,
   #211e1c 0 18px, #e6c14a 18px 36px); opacity: .92; }

/* Stat strip */
.hero-stat .num { font-family:"Archivo Expanded","Archivo",sans-serif; font-weight:800; line-height:1; }
.hero-stat .num .u { color: var(--brand-rust); }

/* Cards: subtle lift (Bootstrap cards are static) */
.card-lift { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -28px rgba(33,30,28,.55); }
.ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-16x10 { aspect-ratio: 16 / 10; } .ratio-5x4 { aspect-ratio: 5 / 4; }

/* Corner brackets on media */
.bracket { position:absolute; width:44px; height:44px; z-index:3; pointer-events:none; }
.bracket.tl { top:14px; left:14px; border-top:3px solid var(--brand-rust); border-left:3px solid var(--brand-rust); }
.bracket.br { bottom:14px; right:14px; border-bottom:3px solid var(--brand-rust); border-right:3px solid var(--brand-rust); }

/* image-slot empty state */
image-slot { background:#e7e3db; background-image: repeating-linear-gradient(45deg,#e0dcd3 0 12px,#e7e3db 12px 24px); display:block; }

/* Mono section index */
.sec-index { font-family:"Space Mono",monospace; font-weight:700; color: var(--brand-rust); }

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .px-layer { transform: none !important; }
}

/* ---- AOS safety net ----
   AOS's stylesheet hides [data-aos] at opacity:0. If AOS doesn't actually
   run (failed CDN, or reduced-motion → disabled), content would stay hidden.
   So we only allow hiding once site.js confirms AOS is active (html.aos-on);
   otherwise force everything visible. */
html:not(.aos-on) [data-aos] { opacity: 1 !important; transform: none !important; }