/* Expo Surfaces — rebuilt on the client's real site system (dark maroon/teal, Lora+Cabin, 8px radius) */

:root{ color-scheme: dark; }
body{ background:#180101; color:#F5F5F5; }

/* Focus ring — bright teal reads clearly against the dark maroon palette everywhere */
.focus-ring:focus-visible{ outline:3px solid #35C9C9; outline-offset:2px; }

/* Shared color-grade for stock photography — subtle desaturation/contrast, no palette-specific tint since photos sit under a scrim or bordered card either way */
.photo-grade{ filter:grayscale(12%) contrast(1.08); display:block; }

/* Full-bleed photo hero scrim — ONE diagonal gradient: dark only on the left where the text sits,
   nearly clear on the right so the trucks and dusk sky actually read. Two stacked overlays
   compounded to ~60-98% black and hid the photo entirely. */
.hero-scrim{
  background: linear-gradient(100deg, rgba(24,1,1,.82) 0%, rgba(24,1,1,.58) 48%, rgba(24,1,1,.05) 100%);
}
/* Local legibility under the glyphs themselves — keeps the scrim light enough for the photo to read */
.hero-text{ text-shadow: 0 1px 4px rgba(24,1,1,.9), 0 0 14px rgba(24,1,1,.6); }

/* Tap-target fixes: grow the hit area to >=44px without shifting visible layout */
.brand-mark{ padding:10px 4px; margin:-10px -4px; }
.tap-pad{ display:inline-block; padding:12px 4px; margin:-12px -4px; }

/* Responsive primary nav: one <ul>, two layouts — dropdown under 640px, in-flow row at 640px+ */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; border:2px solid #F5F5F5; background:transparent; cursor:pointer; padding:0; flex-shrink:0; border-radius:0.375rem; }
.nav-toggle-bar{ display:block; width:18px; height:2px; background:#F5F5F5; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.primary-nav{ display:none; list-style:none; margin:0; padding:0; }
.primary-nav.is-open{
  display:flex; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:#180101; border-top:1px solid #541212;
  padding:.5rem 1.5rem 1rem; z-index:30;
}
.primary-nav.is-open li{ border-bottom:1px solid rgba(245,245,245,.1); }
.primary-nav.is-open li:last-child{ border-bottom:0; }
.primary-nav.is-open .nav-link{ display:block; padding:14px 2px; }
.primary-nav-cta{ margin-top:.75rem; padding-bottom:.25rem; }

@media (max-width:639px){ .nav-toggle{ display:inline-flex; } }
@media (min-width:640px){
  .primary-nav{ display:flex !important; position:static; flex-direction:row; align-items:center; gap:2rem; border-top:0; padding:0; background:none; }
  .primary-nav li{ border-bottom:0; }
  .primary-nav-cta{ margin-top:0; padding-bottom:0; }
}

.site-header{ position:sticky; top:0; z-index:40; background:#180101; border-bottom:1px solid #541212; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  html{ scroll-behavior:auto !important; }
}