/* CrewSix home dark redesign — Midnight Spark
   Linked only from index.html. Trade pages keep their own light tokens. */
:root{
  /* Force dark remaps over earlier inline :root blocks */
  --bg:#070b14; --bg-2:#121a2b; --bg-3:#0c1220;
  --ink:#f8fafc; --muted:#94a3b8; --line:rgba(248,250,252,.10);
  --copper:#3b82f6; --copper-2:#60a5fa; --accent-bright:#60a5fa;
  --cream:#f8fafc; --cta:#e11d48; --cta-2:#be123c;
  --on-cta:#ffffff; --on-accent:#070b14; --focus:#60a5fa;
  --cs-blue:#3b82f6; --cs-blue-hover:#60a5fa; --cs-blue-active:#2563eb;
  --cs-blue-tint:rgba(59,130,246,.16); --cs-blue-glow:rgba(59,130,246,.45);
  --cs-red:#e11d48; --cs-red-hover:#be123c; --cs-red-active:#9f1239;
  --cs-ink:#f8fafc; --cs-ink-soft:#e2e8f0; --cs-muted:#94a3b8; --cs-muted-strong:#cbd5e1;
  --cs-border-strong:#64748b; --cs-line:rgba(248,250,252,.10);
  --cs-surface:#121a2b; --cs-surface-2:#182235; --cs-elevated:#1c2740;
  --cs-bg:#070b14; --cs-bg-alt:#0c1220;
  --cs-success:#34d399; --cs-success-bg:rgba(16,185,129,.14);
  --cs-chip-bg:#3b2410; --cs-chip-ink:#fdba74;
  --cs-disabled-bg:#1e293b; --cs-disabled-ink:#94a3b8;
  --focus-ring:0 0 0 2px #070b14, 0 0 0 5px #60a5fa;
  --sh-1:0 1px 2px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.25);
  --sh-2:0 8px 24px rgba(0,0,0,.40), 0 0 40px rgba(59,130,246,.12);
  --sh-sticky:0 -6px 24px rgba(0,0,0,.45);
  --vp-trade-icon-size:64px;
}

html{color-scheme:dark}
body{
  background:var(--cs-bg);color:var(--cs-ink);
  -webkit-font-smoothing:antialiased;
}

/* Header */
header{
  background:rgba(7,11,20,.88)!important;
  border-bottom:1px solid var(--cs-line)!important;
  backdrop-filter:blur(14px);
}
nav a{color:var(--cs-muted-strong)}
nav a:hover{color:var(--cs-ink)}
.brand img{height:28px;width:auto}

/* Glow hero → photo hero */
.glow-hero{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:0 0 28px 28px;
  background:#070b14!important;
  min-height:min(92vh,820px);
}
.glow-hero::after{opacity:.02} /* noise: don't muddy the photo */
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.hero-bg picture,.hero-bg img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:68% center;
  /* Native Designer hero — no brightness/contrast filters */
}
.hero-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Left text column only — light enough that lit van/crew on the right read crisply */
  background:
    linear-gradient(90deg,
      rgba(7,11,20,.82) 0%,
      rgba(7,11,20,.62) 24%,
      rgba(7,11,20,.22) 44%,
      rgba(7,11,20,.0) 62%),
    linear-gradient(180deg,
      rgba(7,11,20,.12) 0%,
      transparent 30%,
      transparent 78%,
      rgba(7,11,20,.35) 100%);
}
.glow-hero > header,
.glow-hero > .wrap.hero{position:relative;z-index:1}
.glow-hero > .wrap.hero{padding-bottom:48px;padding-top:clamp(28px,4vw,56px)}

/* Single-column hero: drop right-side concept shot (bg carries the visual) */
.hero.hero-mobile{
  display:block!important;
  grid-template-columns:1fr!important;
  align-items:end;
  max-width:min(1180px,100%);
}
.hero.hero-mobile > div:first-child{max-width:min(640px,100%)}
.hero .hero-visual{display:none!important}
.hero .eyebrow{color:#60a5fa;text-shadow:0 1px 12px rgba(7,11,20,.65)}
.hero h1{color:#f8fafc;text-shadow:0 2px 18px rgba(7,11,20,.75), 0 0 2px rgba(7,11,20,.9)}
.hero .lede-short,.hero .lede,.hero .lede-long,.hero .audience-line,.hero .trust-line{
  color:#e2e8f0!important;
  text-shadow:0 1px 10px rgba(7,11,20,.7);
}
.hero .trust-line{color:var(--cs-muted-strong)!important}

/* Trade row — larger glass tiles */
.trade-row{
  max-width:760px;
  margin:0 0 24px;
}
.trade-row a{
  color:#f8fafc!important;
  border-radius:16px;
  padding:10px 6px;
  background:transparent;
}
.trade-row a:hover,.trade-row a:focus-visible{
  background:rgba(59,130,246,.12)!important;
  color:#fff!important;
  transform:translateY(-2px);
}
.trade-row img{
  width:64px;height:64px;
  filter:drop-shadow(0 0 12px rgba(59,130,246,.35));
}
@media (min-width:1024px){
  .trade-row{grid-template-columns:repeat(8,1fr)!important;max-width:none}
  .trade-row img{width:72px;height:72px}
}
@media (max-width:389px){
  .trade-row img{width:56px;height:56px}
}
@media (max-width:1023px){
  .trade-row img{width:56px;height:56px}
}

/* Chips on dark */
.svc-chips a,.svc-chips .chip{
  background:rgba(18,26,43,.85)!important;
  border:1px solid var(--cs-border-strong)!important;
  color:var(--cs-ink)!important;
  backdrop-filter:blur(8px);
}
.svc-chips a:hover,.svc-chips a:focus-visible{
  background:var(--cs-blue-tint)!important;
  border-color:var(--cs-blue)!important;
  color:var(--cs-blue-hover)!important;
}

/* Pills */
.pill-secondary{
  background:transparent!important;
  color:#60a5fa!important;
  border-color:#3b82f6!important;
}
.pill-secondary .arrow{background:#3b82f6!important;color:#fff!important}
.pill-secondary:hover{
  background:rgba(59,130,246,.12)!important;
  color:#93c5fd!important;
}
.pill-primary{background:var(--cs-red)!important;color:#fff!important}
.btn.ghost{
  background:transparent!important;
  color:#60a5fa!important;
  border-color:#3b82f6!important;
}
.btn.ghost:hover{background:rgba(59,130,246,.14)!important;color:#93c5fd!important}

/* After hero + sections */
.after-hero{
  background:var(--cs-bg)!important;
  border-radius:28px 28px 0 0;
}
.trust{background:var(--cs-bg-alt)!important;border-color:var(--cs-line)!important}
.trust-list li{color:var(--cs-ink)}
.trust-list svg{color:var(--cs-blue)!important}
.strip.on-dark,.strip.ticker{
  background:#0a101c;border-color:var(--cs-line);color:var(--cs-muted-strong)
}
#trades,#faq,section[aria-labelledby="why-title"]{background:var(--cs-bg-alt)!important}
#services,#examples,#process,#contact,#usability{background:var(--cs-bg)!important}

/* Cards */
.card,.faq details,.scope-list .card,.case.card,.ba-panel{
  background:var(--cs-surface)!important;
  border:1px solid var(--cs-line)!important;
  color:var(--cs-ink);
  box-shadow:var(--sh-1);
}
.card p,.case-dl dd,.faq details p,.scope-list dd,.sec-head p{color:var(--cs-muted)!important}
.card h3,.card h4,.case-body h3,.big-h,.sec-head h2{color:var(--cs-ink)!important}
.num{color:var(--cs-muted-strong)!important}
a.card.trade-card:hover{
  border-color:rgba(96,165,250,.45)!important;
  box-shadow:var(--sh-2);
  transform:translateY(-3px);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

/* Trade cards with media */
.trade-card .trade-media{
  display:block;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  margin:0 0 14px;background:var(--cs-surface-2);
}
.trade-card .trade-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.trade-card-top .trade-icon{
  width:56px;height:56px;
  filter:drop-shadow(0 0 10px rgba(59,130,246,.3));
}
@media (min-width:1024px){
  .trade-card-top .trade-icon{width:64px;height:64px}
}

/* Service cards media */
.card.svc .svc-visual{
  position:relative!important;inset:auto!important;
  width:100%!important;height:auto!important;
  aspect-ratio:4/3;max-height:none!important;
  margin:0 0 14px;opacity:1!important;overflow:hidden;
  border-radius:12px;background:var(--cs-surface-2);
}
.card.svc .svc-visual img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
.card.svc .svc-visual.has-border{
  box-shadow:inset 0 0 0 1px var(--cs-line);
  outline:1px solid var(--cs-line);
  outline-offset:-1px;
}
.card.svc{
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card.svc:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-2);
  border-color:rgba(96,165,250,.35)!important;
}
.icon-tile{
  background:var(--cs-blue-tint)!important;
  color:var(--cs-blue-hover)!important;
  border:1px solid rgba(96,165,250,.35);
}
.inc-label{color:var(--cs-blue-hover)!important}
.inc svg{color:var(--cs-success)!important}
.avail{
  background:var(--cs-success-bg)!important;
  color:var(--cs-success)!important;
  border:1px solid rgba(52,211,153,.35);
}
.text-link{color:#60a5fa!important}
.text-link:hover{color:#93c5fd!important}

/* Tabs */
.svc-tabs button{
  background:var(--cs-surface-2)!important;
  color:var(--cs-muted-strong)!important;
  border:1px solid var(--cs-line)!important;
}
.svc-tabs button[aria-selected="true"]{
  background:var(--cs-blue-tint)!important;
  color:#93c5fd!important;
  border-color:rgba(96,165,250,.5)!important;
}
#svc-filter-status{color:var(--cs-muted)!important}

/* Steps */
.step{
  background:var(--cs-surface)!important;
  border:1px solid var(--cs-line)!important;
  border-top:4px solid var(--cs-blue)!important;
}
.step .tile{
  background:var(--cs-blue-tint)!important;
  color:var(--cs-blue-hover)!important;
  border:1px solid rgba(96,165,250,.35);
}
.step .dots i{background:rgba(59,130,246,.2)!important;border-color:var(--cs-blue)!important}
.step .dots i.on{background:var(--cs-blue)!important}
.step .kicker{color:var(--cs-blue-hover)!important}
.steps-progress button::before{background:var(--cs-elevated)!important;border-color:var(--cs-border-strong)!important}
.steps-progress button[aria-current="true"]::before{background:var(--cs-blue)!important;border-color:var(--cs-blue)!important}

/* Forms */
#contact .card, form#lead, .form-done{
  background:var(--cs-surface)!important;
  border:1px solid var(--cs-line)!important;
}
input,select,textarea{
  background:var(--cs-surface-2)!important;
  color:var(--cs-ink)!important;
  border:1px solid var(--cs-border-strong)!important;
}
input::placeholder,textarea::placeholder{color:var(--cs-muted)}
label.check{color:var(--cs-ink-soft)}
.form-done{background:var(--cs-success-bg)!important;border-color:var(--cs-success)!important}
.form-done h3{color:var(--cs-success)!important}
.next-step,.note{color:var(--cs-muted-strong)!important}

/* FAQ */
.faq details[open]{border-color:rgba(96,165,250,.45)!important}
.faq summary::after{color:var(--cs-blue-hover)!important}

/* Examples / chips */
.concept-chip{
  background:var(--cs-chip-bg)!important;
  color:var(--cs-chip-ink)!important;
}
.case-kicker{color:var(--cs-blue-hover)!important}
.ba-panel figcaption{
  background:var(--cs-bg-alt)!important;
  color:var(--cs-ink)!important;
  border-top:1px solid var(--cs-line)!important;
}
.ba-panel.after figcaption{
  background:var(--cs-blue-tint)!important;
  color:#93c5fd!important;
}

/* Footer + sticky */
footer{color:var(--cs-muted);border-top:1px solid var(--cs-line);padding-top:28px}
footer a{color:var(--cs-muted-strong)}
footer a:hover{color:var(--cs-ink)}
.mobile-bar.sticky-cta{background:#0a101c!important}

/* Sec labels */
.sec-label .num{color:var(--cs-blue-hover)!important}
.sec-label .name{color:var(--cs-muted)!important}
.sec-label .rule{background:var(--cs-line)!important}

/* Subtle entrance motion */
@media (prefers-reduced-motion:no-preference){
  .card.svc,.trade-card,.step{
    transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  }
}
@media (prefers-reduced-motion:reduce){
  .card.svc:hover,.trade-card:hover,.trade-row a:hover{transform:none}
}

/* Focus */
:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)!important}

/* Divider SVGs often light — mute on dark */
.section-break.wave{opacity:.4}

/* About / scope accents */
.about{border-left-color:var(--cs-blue)!important}
.after-steps li::before{background:var(--cs-blue-tint)!important;color:var(--cs-blue-hover)!important}


/* Non-photo service art: keep SVG readable */
.card.svc .svc-visual:not(.svc-visual--photo){
  aspect-ratio:2 / 1;
  background:linear-gradient(135deg, #121a2b, #182235);
}
.card.svc .svc-visual:not(.svc-visual--photo) img{
  object-fit:contain; object-position:right center; padding:8px;
  filter:brightness(1.15) saturate(1.05);
}
.card.svc .svc-visual--photo img{object-fit:cover; object-position:center; padding:0; filter:brightness(1.08) contrast(1.06) saturate(1.05)}
.trade-card .trade-media img{filter:brightness(1.08) contrast(1.06) saturate(1.05)}
/* Cases / examples media: lift a touch */
.cs-media img,.ba-panel img{filter:brightness(1.05) contrast(1.04)}
.section-break{opacity:.7;filter:brightness(.85) saturate(1.15)}

/* Mobile: full hero photo BEHIND all copy (Gary: overlay the text) */
@media (max-width:767px){
  .glow-hero{
    min-height:auto;
    display:block; /* undo any prior flex band layout */
  }
  .hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
    height:auto;
    min-height:0;
    max-height:none;
    order:unset;
  }
  .hero-bg picture, .hero-bg img{
    width:100%; height:100%;
    object-fit:cover;
    /* Van + crew toward top/right; leave left darker for copy */
    object-position:76% 48%;
  }
  .hero-scrim{
    position:absolute;
    inset:0;
    z-index:0;
    height:auto;
    order:unset;
    pointer-events:none;
    /* AA over text: stronger lower/left; lighter upper-right so scene reads */
    background:
      linear-gradient(180deg,
        rgba(7,11,20,.42) 0%,
        rgba(7,11,20,.58) 28%,
        rgba(7,11,20,.78) 58%,
        rgba(7,11,20,.92) 100%),
      linear-gradient(90deg,
        rgba(7,11,20,.72) 0%,
        rgba(7,11,20,.45) 42%,
        rgba(7,11,20,.12) 72%,
        rgba(7,11,20,.0) 100%);
  }
  .hero-scrim::after{display:none; content:none}
  .glow-hero > header,
  .glow-hero > .wrap.hero{
    position:relative;
    z-index:1;
  }
  .glow-hero > .wrap.hero,
  .glow-hero > .wrap.hero.hero-mobile{
    background:transparent;
    /* Restore side gutter: .hero-mobile{padding:12px 0} zeroes left/right */
    padding-top:12px;
    padding-bottom:40px;
    padding-left:max(20px, var(--gutter, 20px));
    padding-right:max(20px, var(--gutter, 20px));
    box-sizing:border-box;
  }
  .hero.hero-mobile > div:first-child{
    padding:0; margin:0; border-radius:0; background:none; box-shadow:none;
    max-width:100%;
  }
  /* Header already uses ~20px sides — keep in sync on small screens */
  .glow-hero > header{
    padding-left:max(20px, var(--gutter, 20px));
    padding-right:max(20px, var(--gutter, 20px));
  }
  /* Chips/icons stay legible over photo */
  .svc-chips a,.svc-chips .chip{
    background:rgba(7,11,20,.78)!important;
    backdrop-filter:blur(10px);
  }
  .trade-row a{
    background:rgba(7,11,20,.35);
  }
}

/* Trade cards without photo: keep compact */
.trade-card:not(:has(.trade-media)) .trade-card-top{margin-top:4px}

/* Header secondary pill on dark */
header .pill-secondary{background:rgba(7,11,20,.35)!important}

/* Mobile menu fix: header was z-index:1, same layer as hero, so later content painted over the open panel */
@media (max-width:860px){
  header,.glow-hero > header{z-index:1000!important}
  .nav-menu .nav-panel{z-index:1001!important;background:#121a2b!important;border:1px solid rgba(148,163,184,.28)!important;box-shadow:0 20px 50px rgba(0,0,0,.6)!important;opacity:1!important;backdrop-filter:none!important;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain}
  .nav-menu .nav-panel a{color:#e2e8f0!important}
  .nav-menu .nav-panel a:hover,.nav-menu .nav-panel a:focus-visible{color:#fff!important;background:#1f2a40!important}
}