/* Trader Mike's — one stylesheet. Charcoal, off-white, one accent. */
:root{
  --ink:#1B1B1A; --paper:#F4F3EF; --white:#fff; --line:#DDDBD4; --line2:#E6E4DD;
  --mute:#5A5A55; --mute2:#6A6A64; --soft:#C9C8C2;
  --accent:#F2C400; --accent-ink:#B89000;
  --cond:'Barlow Condensed',system-ui,sans-serif; --body:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.4}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--cond);text-transform:uppercase;line-height:1;margin:0}
h2{font-weight:700;font-size:clamp(32px,4vw,44px)}
h3{font-weight:700;font-size:26px;line-height:1.05}
p{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:2px solid transparent;cursor:pointer;font-family:var(--body)}
.btn-accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn-accent:hover{background:#FFD400}
.btn-ghost{color:var(--paper);border-color:var(--paper)}
.btn-outline{color:var(--ink);border-color:var(--ink)}
.btn-lg{padding:16px 26px;font-size:16px}

.ph{background:repeating-linear-gradient(135deg,#2A2A28 0 18px,#232321 18px 36px);color:#9A9A94;display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;min-height:220px;width:100%}
.ph.big{min-height:420px}

/* header / footer */
.top{background:var(--ink);color:var(--paper);padding:0 clamp(16px,3vw,32px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;min-height:72px}
.brand{font-family:var(--cond);font-weight:800;font-size:28px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.mark{display:inline-block;width:14px;height:28px;background:var(--accent)}
.top nav{display:flex;flex-wrap:wrap;gap:16px 28px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.top nav a:hover{color:var(--accent)}
.foot{background:var(--ink);color:var(--soft);padding:48px clamp(16px,3vw,32px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px;font-size:14px}
.foot>div{display:flex;flex-direction:column;gap:8px}
.brand-sm,.foot-h{color:var(--paper);font-weight:600}
.brand-sm{font-family:var(--cond);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.foot-links a:hover,.foot a:hover{color:var(--accent)}

/* home */
.hero{background:var(--ink);color:var(--paper);padding:clamp(40px,6vw,72px) clamp(16px,3vw,32px) 64px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end}
.hero-text{flex:1 1 420px;display:flex;flex-direction:column;gap:20px}
.hero-photo{flex:1 1 340px;max-width:520px;min-height:240px;display:flex;align-self:center}
.hero-photo img{object-fit:cover;width:100%;height:auto;max-height:380px}
.hero h1{font-weight:800;font-size:clamp(44px,7vw,72px);line-height:.95}
.kicker{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.kicker-dark{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute2);margin-bottom:6px}
.lead{font-size:18px;line-height:1.5;color:var(--soft);max-width:560px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.strip{border-bottom:1px solid var(--line);padding:0 clamp(16px,3vw,32px);display:flex;flex-wrap:wrap}
.strip div{flex:1 1 220px;padding:22px 0;display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600}
.dot{width:10px;height:10px;background:var(--accent);flex:none}

.section{padding:64px clamp(16px,3vw,32px);display:flex;flex-direction:column;gap:28px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:8px}
.grid2 div{border-top:2px solid var(--accent);padding-top:12px}
.grid2 b{display:block;font-size:16px}.grid2 span{font-size:14px;color:var(--soft)}

.card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .15s}
.card:hover{border-color:var(--ink)}
.card-photo{height:220px;overflow:hidden;display:flex}
.card-photo img{object-fit:cover;width:100%;height:100%}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.card-meta{display:flex;justify-content:space-between;align-items:center}
.badge{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--accent);padding:4px 8px}
.stock{font-size:12px;color:var(--mute2);font-weight:600;letter-spacing:.08em}
.spec3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.spec3 div{padding:10px 0;font-size:13px;color:var(--mute)}
.spec3 b{display:block;color:var(--ink);font-size:15px;font-weight:600}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.price{font-family:var(--cond);font-weight:800;font-size:26px}
.more{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}

.why{background:var(--ink);color:var(--paper);padding:72px clamp(16px,3vw,32px);display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.why-photo{flex:1 1 400px;display:flex}.why-photo img{object-fit:cover;width:100%;height:420px}
.why-text{flex:1 1 420px;display:flex;flex-direction:column;gap:20px}
.why h2{font-size:clamp(34px,4.5vw,48px)}
.why p:not(.kicker){font-size:17px;line-height:1.55;color:var(--soft)}

.sell{padding:64px clamp(16px,3vw,32px);display:flex;flex-wrap:wrap;gap:40px;align-items:center;border-bottom:1px solid var(--line)}
.sell>div{flex:1 1 420px;display:flex;flex-direction:column;gap:14px}
.sell h2{font-size:clamp(30px,4vw,40px)}
.sell p:not(.kicker-dark){font-size:16px;line-height:1.5;color:var(--mute);max-width:560px}

/* inventory */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--ink);background:transparent;padding:9px 16px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:var(--body);min-height:40px}
.chip.on{background:var(--ink);color:var(--paper)}

/* listing */
.crumbs{padding:20px clamp(16px,3vw,32px) 0;font-size:13px;color:var(--mute2)}
.listing{padding:24px clamp(16px,3vw,32px) 64px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.gallery{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px}
#main{width:100%;height:clamp(260px,45vw,520px);object-fit:cover;background:#232321}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
.thumbs img{height:72px;width:100%;object-fit:cover;cursor:pointer;opacity:.7;border:2px solid transparent}
.thumbs img.on,.thumbs img:hover{opacity:1;border-color:var(--accent)}
.block{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.block h2{font-size:30px}.block p{font-size:16px;line-height:1.6;max-width:680px}
.panel{flex:1 1 360px;display:flex;flex-direction:column;gap:20px}
.panel h1{font-weight:800;font-size:clamp(32px,4vw,44px);line-height:.98}
.sold{background:var(--ink);color:var(--accent);padding:8px 12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;align-self:flex-start}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-lg{font-family:var(--cond);font-weight:800;font-size:44px}
.sub{font-size:13px;color:var(--mute2);font-weight:600}
.stack{display:flex;flex-direction:column;gap:10px}
.specs{background:var(--white);border:1px solid var(--line);padding:8px 20px 4px}
.row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line2);font-size:15px}
.row:last-child{border-bottom:0}
.row span{color:var(--mute2)}.row b{font-weight:600;text-align:right}
.fine{font-size:13px;color:var(--mute2);line-height:1.5}
.inquire{display:flex;flex-direction:column;gap:8px;background:var(--ink);color:var(--paper);padding:20px}
.form-h{font-family:var(--cond);font-weight:700;font-size:22px;text-transform:uppercase;margin-bottom:6px}
.inquire label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:4px}
.inquire input,.inquire textarea{padding:12px;border:1px solid #3A3A38;background:#242422;color:var(--paper);font-size:15px;font-family:var(--body);width:100%}
.inquire .btn{margin-top:8px}

/* ---- signature details ---- */
/* yard board */
.board{background:var(--ink);color:var(--paper);padding:0 clamp(16px,3vw,32px) 40px;border-top:1px solid #2E2E2C}
.board-h{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding:18px 0 14px;display:flex;align-items:center;gap:10px}
.live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(242,196,0,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,196,0,.6)}70%{box-shadow:0 0 0 10px rgba(242,196,0,0)}100%{box-shadow:0 0 0 0 rgba(242,196,0,0)}}
.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:#2E2E2C;border:1px solid #2E2E2C}
.board-grid div{background:var(--ink);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.board-grid b{font-family:var(--cond);font-weight:800;font-size:40px;line-height:1}
.board-grid span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

/* data plate */
.plate{background:linear-gradient(180deg,#F7F6F2,#ECEAE3);border:1px solid #B9B6AC;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.12);position:relative;padding:14px 16px 4px}
.plate::before,.plate::after{content:"";position:absolute;top:8px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#8E8B82 60%,#5A5852);box-shadow:0 1px 1px rgba(0,0,0,.3)}
.plate::before{left:8px}.plate::after{right:8px}
.plate-head{display:flex;justify-content:space-between;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:0 4px 10px;border-bottom:2px solid var(--ink)}
.plate .specs{background:transparent;border:0;padding:4px 4px 0}
.plate .row{border-bottom:1px solid #CFCCC3;font-family:var(--body)}
.plate .row b{font-variant-numeric:tabular-nums}

/* gallery + lightbox */
.mainwrap{position:relative;display:block;width:100%;padding:0;border:0;background:#232321;cursor:zoom-in}
.expand{position:absolute;right:12px;bottom:12px;background:rgba(27,27,26,.85);color:var(--paper);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px}
video{width:100%;background:#000;max-height:520px}
.lightbox{position:fixed;inset:0;background:rgba(10,10,10,.96);z-index:50;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}
.lb-x,.lb-nav{position:absolute;background:transparent;border:0;color:var(--paper);font-size:48px;line-height:1;cursor:pointer;padding:12px;min-width:44px;min-height:44px}
.lb-x{top:12px;right:16px}.lb-nav{top:50%;transform:translateY(-50%)}
#lbp{left:8px}#lbn{right:8px}
.lb-nav:hover,.lb-x:hover{color:var(--accent)}
.lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:var(--soft);font-size:13px;letter-spacing:.14em}

/* sticky call bar (phones) */
.sticky-call{display:none}
@media (max-width:720px){
  .sticky-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:var(--paper);padding:10px 16px;gap:12px;align-items:center;justify-content:space-between;border-top:2px solid var(--accent)}
  .sticky-call span{font-family:var(--cond);font-weight:700;font-size:16px;text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .sticky-call .btn{flex:none;padding:10px 22px}
  body:has(.sticky-call){padding-bottom:64px}
}
@media (max-width:720px){
  .top{padding:10px 16px;min-height:0;gap:8px 16px}
  .brand{font-size:22px}.mark{height:22px;width:11px}
  .top nav{font-size:12px;gap:8px 16px}
  .top>.btn{display:none}
}

/* ---- MILITANT / PRECISION flare ---- */
:root{--ink:#0E0E0D;--paper:#EDECE7;--white:#F7F6F2;--accent:#D4A017;--accent-ink:#9E7510;--gun:#2A2B2A;--cond:'Saira Extra Condensed',system-ui,sans-serif;--stencil:'Black Ops One',system-ui,sans-serif}
body{background:var(--paper)}
h1,h2,h3{font-family:var(--cond);letter-spacing:.01em}
.hero h1{font-weight:900;font-size:clamp(52px,8vw,96px);line-height:.88;letter-spacing:-.01em}
.hero,.why,.board,.top,.foot,.inquire,.sticky-call{background:
  radial-gradient(1200px 500px at 80% -10%,rgba(212,160,23,.08),transparent 60%),
  linear-gradient(180deg,#141413,#0E0E0D)}
.hero{border-bottom:1px solid #2A2B2A}
.hazard{height:8px;background:repeating-linear-gradient(135deg,var(--accent) 0 14px,#0E0E0D 14px 28px)}
.stamp{display:inline-block;font-family:var(--stencil);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1.5px solid var(--accent);padding:3px 8px 2px;margin-right:10px;vertical-align:middle;transform:rotate(-1.5deg)}
.kicker{color:var(--paper);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.btn{border-radius:0;letter-spacing:.1em}
.btn-accent{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.btn-accent:hover{background:#E6B123}
.btn-ghost{border-color:#5A5A55}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.mark{background:var(--accent);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
.brand{font-family:var(--cond);font-weight:900;font-size:30px;letter-spacing:.06em}
.card{border:1px solid #CBC9C0;background:var(--white);box-shadow:0 1px 0 #fff inset}
.card:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.card-photo{position:relative}
.corner{position:absolute;top:0;left:0;font-family:var(--stencil);font-size:11px;letter-spacing:.14em;color:#0E0E0D;background:var(--accent);padding:6px 10px}
.badge{background:#0E0E0D;color:var(--accent);font-family:var(--stencil);letter-spacing:.16em;border:1px solid var(--accent)}
.price,.price-lg{font-family:var(--cond);font-weight:900;letter-spacing:.01em}
.price-lg{font-size:52px}
.strip{background:#0E0E0D;color:var(--paper);border-bottom:0}
.strip div{font-family:var(--stencil);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.dot{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:11px;height:11px}
.board{border-top:0;padding-top:4px}
.board-grid{background:#3A3B39;border-color:#3A3B39}
.board-grid b{font-weight:900;font-size:48px;color:var(--accent);font-family:var(--cond)}
.board-grid span,.board-h{font-family:var(--stencil);font-weight:400;letter-spacing:.16em}
.board-h{color:var(--paper)}
.section-head h2{font-weight:900;font-size:clamp(36px,5vw,56px)}
.chip{border-radius:0;font-family:var(--stencil);font-size:11px;letter-spacing:.14em;border-color:#0E0E0D}
.chip.on{background:var(--accent);color:#0E0E0D;border-color:var(--accent)}
.why h2{font-weight:900;font-size:clamp(40px,5.5vw,64px)}
.grid2 div{border-top:3px solid var(--accent);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);padding:12px 12px 10px}
.grid2 b{font-family:var(--stencil);font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.plate{background:linear-gradient(180deg,#2E2F2D,#1D1E1C);border:1px solid #4A4B48;color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.4)}
.plate::before,.plate::after{background:radial-gradient(circle at 35% 35%,#DDD,#777 60%,#333)}
.plate-head{color:var(--accent);border-bottom:2px solid var(--accent);font-family:var(--stencil);font-weight:400;font-size:12px}
.plate .row{border-bottom:1px solid #3A3B39;color:var(--paper)}
.plate .row span{color:#9A9A94}.plate .row b{color:var(--paper)}
.sold{background:var(--accent);color:#0E0E0D;font-family:var(--stencil);letter-spacing:.16em}
.sub .stamp{margin-right:8px}
.inquire{border:1px solid #3A3B39}
.form-h{font-family:var(--cond);font-weight:900;font-size:26px;letter-spacing:.02em}
.inquire input,.inquire textarea{background:#0E0E0D;border-color:#3A3B39}
.inquire input:focus,.inquire textarea:focus{outline:2px solid var(--accent);outline-offset:0}
.foot{border-top:8px solid transparent;border-image:repeating-linear-gradient(135deg,var(--accent) 0 14px,#0E0E0D 14px 28px) 8}
.sticky-call{border-top-color:var(--accent)}
.expand{font-family:var(--stencil);font-weight:400}
.block h2{font-weight:900;font-size:34px}
.sell h2{font-weight:900}
/* logo mark */
.mark{width:34px;height:34px;clip-path:none;background:transparent}
@media (max-width:720px){.mark{width:26px;height:26px}}
/* construction clock */
.clock{display:flex;align-items:center;gap:18px;margin-top:28px;padding:16px 18px;border:1px solid #3A3B39;background:rgba(255,255,255,.02);max-width:560px}
.clock-face{flex:none}
.clock-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.clock-time{font-family:var(--cond);font-weight:900;font-size:34px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.clock-kicker{font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:.7;line-height:1.2}
.clock-q{font-family:var(--body);font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);line-height:1.25}
.clock-why{font-size:14px;color:var(--soft);line-height:1.4;transition:opacity .3s}
@media (max-width:720px){.clock{gap:14px;padding:14px}.clock-time{font-size:28px}}
.watch{flex:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.clock{max-width:620px;gap:22px}
@media (max-width:720px){.watch svg{width:120px;height:120px}}
/* lume: brighter after dark */
.watch .lume{transition:filter .6s}
.watch.night .lume{filter:url(#glow) drop-shadow(0 0 3px #C9E29A) drop-shadow(0 0 8px rgba(190,220,140,.55))}
.watch.night svg{filter:brightness(.92)}

/* phone-first tweaks */
@media (max-width:720px){
  .top nav a{display:inline-block;padding:8px 0}
  .inquire input,.inquire textarea{font-size:16px}
  .hero{padding-bottom:40px;gap:32px}
  .hero-photo img{max-height:none}
  .card-photo{height:200px}
  .price-lg{font-size:38px}
  .section{padding:48px 16px}
  .thumbs{grid-template-columns:repeat(4,1fr)}.thumbs img{height:64px}
  .btn-lg{width:100%}
}
@media (hover:none){.card:hover,.btn-accent:hover{filter:none}}

/* watch sits below the hero photo as its own row */
.hero-clockrow{flex:1 1 100%}
.hero-clockrow .clock{max-width:760px}