/* 10-4 Send It game page, v2 look ("dusk highway").
   Loaded only by 10-4-send-it/index.html after site.css. Every rule is scoped
   to body.tf so the studio home page is untouched. Hand-written, no build step. */
body.tf{
  --tf-asphalt:#1D2228;   /* deep asphalt, page base */
  --tf-amber:#F2A541;     /* sunset amber, accents and eyebrows */
  --tf-sunset:#D9643A;    /* low-sun coral, glows */
  --tf-brown:#2E2522;     /* warm dusk brown, section bg */
  --tf-rust:#3A2A21;      /* deeper warm bg */
  --tf-sky:#8FB0C6;       /* dusty sky blue, accents */
  --tf-skybg:#26323F;     /* dusk blue section bg */
  --tf-sage:#6FA39A;      /* muted teal/sage, accents */
  --tf-teal:#1E3436;      /* deep teal section bg */
  --tf-night:#1B2126;     /* night bg */
  --tf-mm:#2F6B4F;        /* mile-marker green */
  --tf-text2:#DDD3C3;     /* secondary cream text */
  background:var(--tf-asphalt);
}
body.tf .site-header{background:rgba(29,34,40,.9);border-bottom:1px solid rgba(242,165,65,.18)}
body.tf .eyebrow{color:var(--tf-amber);display:flex;align-items:center;gap:10px}
body.tf .section-head p:not(.eyebrow){color:var(--tf-text2)}
body.tf .section-head{margin-bottom:36px}
body.tf h2{text-wrap:balance}

/* mile-marker badge */
body.tf .mm{display:inline-block;font:700 .78rem/1 var(--cond);letter-spacing:.08em;color:#F3E9D8;background:var(--tf-mm);border:2px solid #F3E9D8;border-radius:4px;padding:4px 6px 3px}

/* HERO: warmer sunset grade */
body.tf .game-hero::after{background:
  radial-gradient(60% 90% at 85% 10%,rgba(242,165,65,.22),rgba(242,165,65,0) 60%),
  linear-gradient(90deg,rgba(29,34,40,.88) 0%,rgba(46,37,34,.45) 42%,rgba(29,34,40,0) 70%),
  linear-gradient(180deg,rgba(29,34,40,0) 58%,var(--tf-ink-end,#222427) 100%)}
body.tf .tf-kicker{font:700 1.05rem/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--tf-amber);margin:0 0 .5em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
body.tf .btn.ghost:hover{border-color:var(--tf-amber);color:var(--tf-amber)}

/* SECTIONS: each gradient ends where the next one starts, so the page reads as one drive into dusk */
body.tf .tf-sec{position:relative;padding:84px 0;overflow:hidden}
body.tf .tf-sec .wrap{position:relative}
body.tf .tf-dusk{background:radial-gradient(38% 45% at 82% 45%,rgba(217,100,58,.14),transparent 100%),linear-gradient(180deg,#222427,var(--tf-brown))}
body.tf .tf-amber{background:radial-gradient(35% 40% at 20% 50%,rgba(242,165,65,.11),transparent 100%),linear-gradient(180deg,var(--tf-brown),var(--tf-rust))}
body.tf .tf-sky{background:radial-gradient(38% 42% at 80% 45%,rgba(143,176,198,.11),transparent 100%),linear-gradient(180deg,var(--tf-rust) 0%,#30303A 30%,var(--tf-skybg) 100%)}
body.tf .tf-teal{background:radial-gradient(38% 42% at 25% 55%,rgba(111,163,154,.13),transparent 100%),linear-gradient(180deg,var(--tf-skybg),var(--tf-teal))}
body.tf .tf-night{background:radial-gradient(36% 40% at 78% 50%,rgba(232,116,42,.10),transparent 100%),linear-gradient(180deg,var(--tf-teal),var(--tf-night))}
body.tf .tf-ink{background:linear-gradient(180deg,var(--tf-night),var(--tf-asphalt))}
body.tf .tf-end{background:radial-gradient(50% 40% at 50% 70%,rgba(184,90,30,.18),transparent 100%),linear-gradient(180deg,var(--tf-asphalt),#222427)}

/* lane-dash divider between sections */
body.tf .tf-sec+.tf-sec::before{content:"";position:absolute;left:50%;top:0;width:min(1100px,92%);height:3px;transform:translateX(-50%);
  background:repeating-linear-gradient(90deg,rgba(242,165,65,.42) 0 36px,transparent 36px 72px);border-radius:2px}

/* the road: a dashed center line in the left gutter that runs through every section (wide screens) */
@media (min-width:1320px){
  body.tf .tf-sec .wrap::before{content:"";position:absolute;left:-62px;top:-84px;bottom:-84px;width:30px;
    background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.22) 3px,rgba(0,0,0,.22) 27px,transparent 30px)}
  body.tf .tf-sec .wrap::after{content:"";position:absolute;left:-49px;top:-84px;bottom:-84px;width:4px;
    background:repeating-linear-gradient(180deg,rgba(242,165,65,.6) 0 26px,transparent 26px 54px)}
  body.tf .tf-sec .section-head{position:relative}
  body.tf .tf-sec .section-head::before{content:"";position:absolute;left:-58px;top:-2px;width:22px;height:22px;border-radius:50%;
    background:var(--tf-amber);box-shadow:0 0 0 5px rgba(242,165,65,.18),0 0 22px rgba(242,165,65,.55);z-index:1}
  body.tf .tf-end .wrap::before,body.tf .tf-end .wrap::after{bottom:30%;-webkit-mask:linear-gradient(180deg,#000 75%,transparent);mask:linear-gradient(180deg,#000 75%,transparent)}
}

/* cards */
body.tf .tf-card{position:relative;border-radius:var(--r);padding:24px 24px 22px;
  background:linear-gradient(160deg,rgba(243,233,216,.075),rgba(243,233,216,.025));
  border:1px solid rgba(243,233,216,.13);box-shadow:0 10px 30px rgba(0,0,0,.22)}
body.tf .tf-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--orange),var(--tf-amber))}
body.tf .tf-card h3{font-size:1.6rem;margin:0 0 .35em}
body.tf .tf-card p{margin:0;color:var(--tf-text2)}
body.tf .tf-card .tf-tag{font:700 .9rem/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--tf-amber);margin:0 0 .7em}

/* two roads in: a fork */
body.tf .tf-fork{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center}
body.tf .tf-or{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--tf-amber);box-shadow:0 0 24px rgba(242,165,65,.45)}
@media (max-width:760px){body.tf .tf-fork{grid-template-columns:1fr;gap:14px}body.tf .tf-or{margin:0 auto;width:46px;height:46px}}

/* career climb: four stops on one road */
body.tf .tf-climb{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
body.tf .tf-climb::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:4px;background:repeating-linear-gradient(90deg,var(--tf-sky) 0 22px,transparent 22px 44px);opacity:.6}
body.tf .tf-climb li{position:relative;padding-top:66px}
body.tf .tf-step{position:absolute;left:0;top:0;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font:400 1.5rem/1 var(--display);color:var(--ink);background:var(--tf-sky);box-shadow:0 0 0 6px var(--tf-skybg)}
body.tf .tf-climb li:last-child .tf-step{background:var(--tf-amber);box-shadow:0 0 0 6px var(--tf-skybg),0 0 26px rgba(242,165,65,.6)}
body.tf .tf-climb strong{display:block;font:700 1.3rem/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
body.tf .tf-climb span:not(.tf-step){color:var(--tf-text2)}
@media (max-width:860px){
  body.tf .tf-climb{grid-template-columns:1fr;gap:26px}
  body.tf .tf-climb::before{left:23px;right:auto;top:24px;bottom:24px;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--tf-sky) 0 18px,transparent 18px 36px)}
  body.tf .tf-climb li{padding:4px 0 0 72px;min-height:50px}
}

/* haul it all: trailer chips */
body.tf .tf-loads{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
body.tf .tf-loads li{border-radius:var(--r);padding:18px 16px 16px;background:rgba(15,25,27,.45);border:1px solid rgba(111,163,154,.28);border-top:5px solid var(--c,var(--orange))}
body.tf .tf-loads li:nth-child(1){--c:var(--orange)}
body.tf .tf-loads li:nth-child(2){--c:var(--tf-sky)}
body.tf .tf-loads li:nth-child(3){--c:var(--tf-amber)}
body.tf .tf-loads li:nth-child(4){--c:var(--tf-sunset)}
body.tf .tf-loads li:nth-child(5){--c:var(--tf-sage)}
body.tf .tf-loads strong{display:block;font:700 1.2rem/1.15 var(--cond);letter-spacing:.04em;text-transform:uppercase}
body.tf .tf-loads span{display:block;margin-top:4px;font-size:.95rem;color:var(--tf-text2)}
@media (max-width:900px){body.tf .tf-loads{grid-template-columns:repeat(2,minmax(0,1fr))}body.tf .tf-loads li:last-child{grid-column:1/-1}}

/* automation + skills */
body.tf .tf-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:760px){body.tf .tf-duo{grid-template-columns:1fr}}

/* screens */
body.tf .gallery{gap:20px}
body.tf .gallery figure{border:1px solid rgba(243,233,216,.12);box-shadow:0 12px 34px rgba(0,0,0,.35);transition:transform .25s ease,box-shadow .25s ease}
body.tf .gallery figure:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(242,165,65,.35)}
body.tf .gallery figcaption{background:linear-gradient(90deg,#262B31,#2B2622);color:var(--tf-text2);border-top:2px solid rgba(232,116,42,.55)}

/* trailer slot + sign-off */
body.tf .trailer-slot{max-width:720px;border:2px dashed rgba(242,165,65,.55);color:var(--tf-text2);
  background:radial-gradient(60% 60% at 50% 50%,rgba(242,165,65,.08),transparent 70%),rgba(0,0,0,.18)}
body.tf .trailer-slot strong{font:700 1.4rem/1.3 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#F3E9D8}
body.tf .tf-signoff{margin-top:46px}
body.tf .tf-signoff-line{font:400 clamp(1.6rem,3vw,2.2rem)/1.15 var(--display);margin:0 0 16px;color:#F3E9D8}
body.tf .tf-signoff .status{align-self:auto}
body.tf .site-footer{border-top:1px solid rgba(242,165,65,.2);background:#222427}

/* gentle scroll reveal (only when tenfour.js adds .tf-anim, and never with reduced motion) */
.tf-anim body.tf .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.tf-anim body.tf .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tf-anim body.tf .reveal{opacity:1;transform:none}}

@media (max-width:560px){body.tf .tf-sec{padding:60px 0}body.tf .tf-card{padding:20px 18px 18px}}
@media (max-width:700px){
  body.tf .game-hero::after{background:radial-gradient(70% 90% at 85% 0%,rgba(242,165,65,.2),rgba(242,165,65,0) 60%),linear-gradient(180deg,rgba(29,34,40,0) 55%,#222427 100%)}
  body.tf .game-hero .over{background:#222427}
}

/* hero drive layer added by tenfour.js (truck cutout + lane dashes; never with reduced motion) */
body.tf .game-hero canvas.tf-drive{position:absolute;z-index:0;pointer-events:none;max-width:none}