:root{
  --wall:#14151a; --wall2:#1b1d24; --ink:#f4efe3; --mute:#9a9484;
  --dw:#febd17; --dw-ink:#141414; --mw:#db011c; --gold:#e0aa45; --leather:#3a2413;
  --disp:"Anton","Oswald",Impact,sans-serif; --body:"Oswald","Segoe UI",system-ui,sans-serif; --west:"Rye","Anton",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0b0c0f;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}

/* ---------- the trade-show hall: pegboard wall, spotlights, truss, floor ---------- */
.hall{
  position:relative;min-height:100vh;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,226,150,.16), transparent 70%),
    radial-gradient(ellipse 30% 60% at 8% 30%, rgba(254,189,23,.16), transparent 70%),
    radial-gradient(ellipse 30% 60% at 92% 30%, rgba(219,1,28,.18), transparent 70%),
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.55) 0 2.6px, transparent 3px) 0 0/24px 24px,
    linear-gradient(180deg,#23252d,#181a20 60%,#121318);
}
.truss{position:relative;height:34px;background:
  repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.14) 12px 14px,transparent 14px 26px),
  repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,255,255,.14) 12px 14px,transparent 14px 26px),
  linear-gradient(#3a3d46,#22242b);
  border-bottom:3px solid #0a0a0c;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.truss i{position:absolute;top:24px;width:26px;height:16px;border-radius:3px 3px 12px 12px;background:#0b0b0d;left:calc(var(--n)*20% - 10%)}
.truss i:nth-child(1){--n:1}.truss i:nth-child(2){--n:2}.truss i:nth-child(3){--n:3}.truss i:nth-child(4){--n:4}.truss i:nth-child(5){--n:5}
.truss i::after{content:"";position:absolute;left:50%;top:14px;width:240px;height:260px;transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0,transparent 165deg,rgba(255,236,180,.11) 175deg 185deg,transparent 195deg);pointer-events:none}
.truss i:nth-child(1)::after,.truss i:nth-child(5)::after{width:180px}

/* ---------- logo ---------- */
.top{text-align:center;padding:22px 16px 6px;position:relative;z-index:2}
.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  padding:10px 30px 12px;border:3px solid var(--gold);border-radius:14px;
  background:linear-gradient(#20160d,#120c07);box-shadow:0 0 0 4px #0a0a0c,0 0 34px rgba(224,170,69,.35), inset 0 0 22px rgba(0,0,0,.6)}
.logo__mark{width:92px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.logo__words{display:flex;flex-direction:column;text-align:left;line-height:1}
.logo__words b{font-family:var(--west);font-weight:400;font-size:clamp(40px,7vw,68px);color:var(--gold);letter-spacing:2px;text-shadow:0 3px 0 #5a3a10,0 0 18px rgba(224,170,69,.4)}
.logo__words em{font-family:var(--disp);font-style:normal;font-size:clamp(20px,3.6vw,34px);letter-spacing:5px;text-transform:uppercase;color:var(--ink);margin-top:4px}
.tagline{margin:14px 0 0;font-family:var(--disp);letter-spacing:4px;text-transform:uppercase;color:var(--mute);font-size:15px}

/* ---------- stage: DeWalt | TV | Milwaukee ---------- */
.stage{position:relative;z-index:2;max-width:1500px;margin:18px auto 0;padding:0 16px;
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3.3fr) minmax(150px,1fr);gap:20px;align-items:start}

/* brand booths: pull-up banner + aisle list */
.booth{position:relative;text-align:center;padding-bottom:16px;border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));border:1px solid rgba(255,255,255,.08)}
.booth__banner{margin:-1px -1px 0;padding:34px 10px 30px;border-radius:10px 10px 0 0;
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);font-family:var(--disp);text-transform:uppercase;letter-spacing:2px}
.booth__banner span{display:block;font-size:clamp(28px,3.2vw,46px);line-height:1;transform:rotate(-2deg)}
.booth--dewalt .booth__banner{background:repeating-linear-gradient(-45deg,var(--dw) 0 26px,#e7a90c 26px 52px);color:var(--dw-ink)}
.booth--milwaukee .booth__banner{background:linear-gradient(180deg,#f01430,var(--mw));color:#fff}
.booth--dewalt{border-color:rgba(254,189,23,.45);box-shadow:0 0 30px rgba(254,189,23,.15)}
.booth--milwaukee{border-color:rgba(219,1,28,.55);box-shadow:0 0 30px rgba(219,1,28,.2)}
.booth__aisle{list-style:none;margin:8px 14px 16px;padding:0;text-align:left}
.booth__aisle li{padding:9px 6px 9px 22px;border-bottom:1px dashed rgba(255,255,255,.14);font-size:15px;letter-spacing:.5px;position:relative}
.booth__aisle li::before{content:"";position:absolute;left:4px;top:50%;width:9px;height:9px;transform:translateY(-50%) rotate(45deg)}
.booth--dewalt li::before{background:var(--dw)}.booth--milwaukee li::before{background:var(--mw)}
.booth__watch{border:0;border-radius:8px;padding:12px 16px;font-family:var(--disp);letter-spacing:1.5px;text-transform:uppercase;font-size:15px}
.booth--dewalt .booth__watch{background:var(--dw);color:var(--dw-ink)}
.booth--milwaukee .booth__watch{background:var(--mw);color:#fff}
.booth__watch:hover{filter:brightness(1.12);transform:translateY(-1px)}

/* ---------- the TV set ---------- */
.tvset__frame{position:relative;background:linear-gradient(#2a2c34,#15161b);border:2px solid #050506;border-radius:22px;padding:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.75),0 0 0 6px #0d0e12,0 0 60px rgba(255,214,120,.14), inset 0 2px 0 rgba(255,255,255,.12)}
.tvset__bezel{background:#050506;border-radius:14px;padding:12px;box-shadow:inset 0 0 0 2px #24262d, inset 0 6px 18px #000}
.screen{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;
  box-shadow:0 0 40px rgba(255,220,140,.12)}
.screen iframe,#tvPlayer{position:absolute;inset:0;width:100%;height:100%;border:0}
.screen__tap{position:absolute;inset:0;background:transparent;border:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px}
.screen__hint{background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.3);padding:7px 16px;border-radius:99px;font-size:15px;letter-spacing:1px;text-transform:uppercase;transition:opacity .3s}
.is-loud .screen__hint{opacity:0;pointer-events:none}
.screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px), radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.4));mix-blend-mode:multiply}
.screen__osd{position:absolute;top:12px;right:16px;z-index:5;font-family:var(--disp);letter-spacing:2px;font-size:clamp(16px,2.2vw,26px);color:#6dff8a;text-shadow:0 0 8px #1f9,0 2px 0 #000;
  display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .4s}
.screen__osd i{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #f33}
.is-static .screen__osd,.tvset__frame:hover .screen__osd{opacity:1}
.screen__static{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),#777;background-blend-mode:multiply}
.is-static .screen__static{animation:stat .45s steps(6) 1}
@keyframes stat{0%{opacity:1;background-position:0 0}50%{opacity:.95;background-position:70px 40px}100%{opacity:0;background-position:150px 90px}}
.screen__idle{position:absolute;inset:0;z-index:7;display:none;align-items:center;justify-content:center;background:radial-gradient(circle,#2a2a2a,#000)}
.is-idle .screen__idle{display:flex}
.screen__idle button{border:2px solid var(--gold);background:#120c07;color:var(--gold);border-radius:10px;padding:14px 26px;font-family:var(--disp);letter-spacing:2px;font-size:22px;text-transform:uppercase}

.tvset__panel{display:grid;gap:12px;margin-top:14px}
.tvset__now small{display:block;font-family:var(--disp);letter-spacing:3px;text-transform:uppercase;font-size:13px;color:var(--mute)}
.tvset__now small a{text-decoration:none}
.tvset__now strong{display:block;font-size:clamp(17px,2vw,22px);font-weight:600;line-height:1.25;min-height:2.5em}
.tvset__ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.chpad{display:flex;gap:8px}
.chbtn{min-width:54px;padding:8px 12px;border-radius:10px;border:2px solid #050506;background:linear-gradient(#3b3e48,#23252c);
  box-shadow:0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;line-height:1}
.chbtn b{font-size:20px;display:flex}.chbtn small{font-family:var(--disp);letter-spacing:2px;font-size:11px;margin-top:3px;color:var(--mute)}
.chbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.chbtn:hover{border-color:var(--gold)}
.chbtn--wide{min-width:66px}
.chbtn .ico-on,.chbtn .lbl-on{display:none}.is-loud .chbtn .ico-on{display:flex}.is-loud .chbtn .lbl-on{display:block}.is-loud .chbtn .ico-off,.is-loud .chbtn .lbl-off{display:none}
.vol{-webkit-appearance:none;appearance:none;flex:1;min-width:110px;max-width:260px;height:10px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) var(--fill,70%),#050506 var(--fill,70%));border:1px solid #000;outline:0}
.vol::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(#f4efe3,#b9b0a0);border:2px solid #000}
.vol::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#e8e0cf;border:2px solid #000}
.tvset__tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{border:2px solid #050506;background:#1d1f26;border-radius:99px;padding:6px 16px;font-family:var(--disp);letter-spacing:1.5px;text-transform:uppercase;font-size:14px}
.tab.is-on{background:var(--gold);color:#1a1108}
.tab--dewalt.is-on{background:var(--dw);color:var(--dw-ink)}.tab--milwaukee.is-on{background:var(--mw);color:#fff}

/* channel filmstrip */
.strip{position:relative;margin-top:14px}
.strip__scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--gold) #0b0b0d;padding-bottom:8px;cursor:grab}
.strip__scroll.is-dragging{cursor:grabbing;user-select:none}
.strip__track{display:flex;gap:8px;width:max-content}
.frame{position:relative;flex:0 0 auto;width:150px;padding:0;border:2px solid #050506;border-radius:8px;overflow:hidden;background:#000;opacity:.78}
.frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;pointer-events:none}
.frame span{position:absolute;left:0;bottom:0;padding:2px 8px;background:rgba(0,0,0,.8);font-family:var(--disp);letter-spacing:1.5px;font-size:12px;color:#6dff8a}
.frame:hover{opacity:1}
.frame.is-on{opacity:1;border-color:var(--gold);box-shadow:0 0 14px rgba(224,170,69,.6)}
.frame[data-brand="DeWalt"] span::after{content:" · DEWALT";color:var(--dw)}
.frame[data-brand="Milwaukee"] span::after{content:" · MILWAUKEE";color:#ff5468}
.strip__arrow{position:absolute;top:calc(50% - 14px);z-index:2;width:38px;height:38px;border-radius:50%;border:2px solid #000;background:var(--gold);color:#1a1108;font-size:15px;line-height:1}
.strip__arrow--prev{left:-8px}.strip__arrow--next{right:-8px}

/* ---------- Whatnot / how to buy ---------- */
.live{position:relative;z-index:2;text-align:center;max-width:860px;margin:54px auto 0;padding:0 16px}
.live h2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,5vw,48px);letter-spacing:2px;text-transform:uppercase;margin:0;color:var(--gold)}
.live p{color:#cfc8b8;margin:8px 0 20px}
.btn{display:inline-block;background:var(--gold);color:#1a1108;text-decoration:none;font-family:var(--disp);letter-spacing:2px;text-transform:uppercase;font-size:20px;padding:14px 34px;border-radius:10px;box-shadow:0 4px 0 #6d4a12}
.btn:hover{filter:brightness(1.1)}
.steps{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.steps li{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:16px}
.steps b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#1a1108;font-family:var(--disp);margin-right:8px}

/* ---------- floor + footer ---------- */
.foot{position:relative;z-index:2;margin-top:60px;text-align:center;padding:0 16px 30px}
.floor{height:46px;margin:0 -16px 18px;background:repeating-linear-gradient(45deg,#2c2e35 0 10px,#3a3d46 10px 12px,#2c2e35 12px 22px),#2c2e35;border-top:4px solid var(--gold);box-shadow:inset 0 12px 16px rgba(0,0,0,.5)}
.foot p{margin:4px 0;color:var(--mute);font-size:15px}
.foot .fine{max-width:760px;margin:10px auto 0;font-size:12px;line-height:1.5;color:#6d685c}

/* ---------- full screen / theater ---------- */
.tvset__frame:fullscreen{width:100%;height:100%;border-radius:0;padding:0;background:#000;display:flex;flex-direction:column;justify-content:center;border:0;box-shadow:none}
.tvset__frame:fullscreen .tvset__bezel{padding:0;border-radius:0;flex:1;display:flex;align-items:center;background:#000;box-shadow:none}
.tvset__frame:fullscreen .screen{width:100%;max-height:100%;border-radius:0}
.tvset__frame:fullscreen .tvset__panel{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:20;transition:opacity .4s}
.tvset__frame:fullscreen .strip,.tvset__frame:fullscreen .tvset__tabs{display:none}
.tvset__frame.is-calm .tvset__panel{opacity:0;pointer-events:none}
.tvset__frame.is-theater{position:fixed;inset:0;z-index:1000;border-radius:0;padding:0;background:#000;display:flex;flex-direction:column;justify-content:center}
.tvset__frame.is-theater .tvset__bezel{padding:0;border-radius:0;background:#000;box-shadow:none}
.tvset__frame.is-theater .screen{border-radius:0}
.tvset__frame.is-theater .tvset__panel{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 20px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:20}
.tvset__frame.is-theater .strip,.tvset__frame.is-theater .tvset__tabs{display:none}

/* ---------- phones / small screens ---------- */
@media (max-width:1000px){
  .stage{grid-template-columns:1fr 1fr}
  .tvset{grid-column:1 / -1;order:-1}
  .steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .logo{padding:8px 16px 10px;gap:8px}.logo__mark{width:56px}
  .stage{padding:0 10px;gap:12px}
  .tvset__frame{padding:10px;border-radius:16px}.tvset__bezel{padding:7px}
  .frame{width:118px}
  .booth__banner{padding:24px 6px 24px}
}
@media (prefers-reduced-motion:reduce){.is-static .screen__static{animation:none}html{scroll-behavior:auto}}

/* ---------- the garage scene: backdrop photo with the TV on the roll-up door ---------- */
.hall { background: #050506; }
.scene {
  position: relative; width: 100%; aspect-ratio: 1677 / 938; min-height: 620px; overflow: hidden;
  background: url("../assets/outlawtoolcowboys-main.jpg?v=1") center / cover no-repeat,
    radial-gradient(ellipse 60% 70% at 43% 45%, #26262b, #0a0a0c 70%);
}
/* soft dark wash so the logo and TV read against the busy photo */
.scene::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 62% at 43% 42%, rgba(0,0,0,.35), transparent 75%),
              linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%); }
.scene .top { position: absolute; left: 22%; width: 42%; top: 1.2%; padding: 0; z-index: 3; }
.scene .logo { padding: 6px 22px 8px; gap: 10px; border-width: 2px; box-shadow: 0 0 0 3px #0a0a0c, 0 0 28px rgba(224,170,69,.35), inset 0 0 18px rgba(0,0,0,.6); }
.scene .logo__mark { width: clamp(44px, 5vw, 78px); }
.scene .logo__words b { font-size: clamp(26px, 3.6vw, 56px); }
.scene .logo__words em { font-size: clamp(13px, 1.7vw, 26px); letter-spacing: 4px; }
.scene .tagline { margin-top: 6px; font-size: clamp(9px, .95vw, 14px); letter-spacing: 3px; text-shadow: 0 1px 6px #000; color: #d8d2c2; }
.scene .tvset { position: absolute; left: 23%; width: 40%; top: 17.5%; z-index: 4; }
.scene .tvset__frame { padding: clamp(6px, .9vw, 14px); border-radius: 16px; }
.scene .tvset__bezel { padding: clamp(4px, .6vw, 10px); }
.scene .tvset__panel { gap: clamp(6px, .8vw, 12px); margin-top: clamp(6px, .9vw, 12px); }
.scene .tvset__now strong { font-size: clamp(12px, 1.25vw, 20px); min-height: 0; }
.scene .tvset__now small { font-size: clamp(9px, .8vw, 12px); }
.scene .chbtn { min-width: clamp(38px, 3.6vw, 54px); padding: 6px 8px; }
.scene .chbtn svg { width: clamp(16px, 1.6vw, 24px); height: clamp(16px, 1.6vw, 24px); }
.scene .tab { padding: 4px 12px; font-size: clamp(10px, .9vw, 14px); }
.scene .frame { width: clamp(90px, 9vw, 140px); }
.pick { position: absolute; bottom: 4.5%; z-index: 5; border: 0; border-radius: 10px; padding: 12px 20px; font-family: var(--disp); letter-spacing: 1.5px; text-transform: uppercase;
  font-size: clamp(12px, 1.3vw, 19px); box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.pick--dw { left: 4%; background: var(--dw); color: var(--dw-ink); }
.pick--mw { right: 4%; background: var(--mw); color: #fff; }
.pick:hover { filter: brightness(1.12); transform: translateY(-2px); }
@media (max-width: 1000px) {
  .scene { aspect-ratio: auto; min-height: 0; padding: 16px 12px 84px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    background: url("../assets/outlawtoolcowboys-main.jpg?v=1") 43% center / cover no-repeat, #0a0a0c; }
  .scene .top, .scene .tvset { position: relative; left: auto; top: auto; width: 100%; max-width: 760px; }
  .scene .top { text-align: center; }
  .scene .logo { padding: 8px 16px 10px; }
  .pick { bottom: 18px; } .pick--dw { left: 12px; } .pick--mw { right: 12px; }
}