:root{
  --iron:#0d0e10; --panel:#16171b; --panel2:#1c1e23; --steel:#32343c;
  --bone:#f1efe9; --dim:#b4b8c0; --flame:#e03a26; --flame-dk:#a92417;
  --chrome-a:#fdfdfd; --chrome-b:#9aa0ab; --chrome-c:#5c6069;
  --maxw:1180px; --radius:10px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--iron); color:var(--bone);
  font-family:'Archivo', 'Segoe UI', Arial, sans-serif;
  font-size:19px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--bone)}
a:focus-visible, button:focus-visible{outline:3px solid var(--flame); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ---------- status bar ---------- */
.statusbar{
  background:linear-gradient(180deg,#23252b,#141519);
  border-bottom:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  font-size:17px; color:var(--dim);
}
.statusbar .wrap{display:flex; align-items:center; gap:12px; min-height:46px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px}
.lamp{width:14px; height:14px; border-radius:50%; background:#555; flex:0 0 auto;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.5)}
.lamp.open{background:#38d160; box-shadow:0 0 10px 2px rgba(56,209,96,.55), inset 0 -2px 3px rgba(0,0,0,.35)}
.lamp.closed{background:#e03a26; box-shadow:0 0 10px 2px rgba(224,58,38,.5), inset 0 -2px 3px rgba(0,0,0,.35)}
#status-text{font-weight:600; color:var(--bone)}
.statusbar .hours-note{margin-left:auto}
.statusbar a{color:var(--dim)}
@media (max-width:640px){ .statusbar .hours-note{display:none} }

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(13,14,16,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--steel)}
.nav .wrap{display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:14px; padding-bottom:6px}
.brand{font-family:'Big Shoulders Display', Impact, sans-serif; font-weight:800; font-size:34px;
  letter-spacing:.04em; text-decoration:none; line-height:1; padding:4px 0; white-space:nowrap; text-align:center}
.brand .aka{color:var(--flame)}
.brand small{display:block; font-family:'Archivo'; font-weight:600; font-size:11.5px; letter-spacing:.24em;
  color:var(--dim); text-transform:uppercase; margin-top:4px; text-align:center}
.navlinks{display:flex; gap:2px; flex-wrap:wrap; justify-content:center}
.navlinks a{text-decoration:none; font-weight:600; font-size:17px; color:var(--dim);
  padding:12px 13px; border-radius:8px; min-height:48px; display:flex; align-items:center}
.navlinks a:hover{color:var(--bone); background:var(--panel2)}
.navlinks a.active{color:var(--bone); box-shadow:inset 0 -3px 0 var(--flame)}
.nav .call-btn{margin-left:8px}
.menu-toggle{display:none; margin:6px auto 0; background:var(--panel2); color:var(--bone);
  border:1px solid var(--steel); border-radius:8px; font-size:17px; font-weight:700; padding:12px 16px; cursor:pointer}
@media (max-width:1100px){
  .menu-toggle{display:block}
  .navlinks{display:none; width:100%; flex-direction:column; padding-bottom:12px}
  .navlinks.show{display:flex}
  .navlinks a{font-size:19px; padding:14px}
  .nav .call-btn{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:19px; text-decoration:none; border-radius:var(--radius);
  padding:16px 28px; min-height:56px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-flame{background:linear-gradient(180deg,#f0503a,var(--flame) 45%,var(--flame-dk));
  color:#fff; box-shadow:0 6px 18px rgba(224,58,38,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-chrome{background:linear-gradient(180deg,#fbfbfb,#c9cdd4 48%,#8f949e 52%,#c3c7cf);
  color:#14161a; box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 #fff}
.btn-ghost{border:1px solid var(--steel); color:var(--bone); background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--dim)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--steel)}
.hero-media{position:absolute; inset:0}
.hero-media img,.hero-media video{width:100%; height:100%; object-fit:cover; object-position:center 60%}
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,14,16,.55) 0%, rgba(13,14,16,.35) 40%, rgba(13,14,16,.92) 100%)}
.hero-inner{position:relative; padding:120px 0 96px; text-align:center}
.hero h1{
  font-family:'Big Shoulders Display', Impact, sans-serif; font-weight:800;
  font-size:clamp(60px, 11vw, 148px); line-height:.95; letter-spacing:.015em; text-transform:uppercase;
  background:linear-gradient(180deg, var(--chrome-a) 0%, #d8dce3 34%, var(--chrome-b) 49%, var(--chrome-c) 52%, #b9bec7 66%, var(--chrome-a) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.85));
  position:relative;
}
.hero .kicker{font-size:19px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--flame); margin-bottom:14px; text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hero .tag{font-size:clamp(21px,2.6vw,28px); color:var(--bone); max-width:760px; margin:22px auto 0; text-shadow:0 2px 10px rgba(0,0,0,.9)}
.hero .cta-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px}
@keyframes sweep{0%{background-position:-200% 0}100%{background-position:300% 0}}
.hero h1 span.shine{position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .hero h1 span.shine{animation:none; display:none} }

/* ---------- pinstripe divider ---------- */
.pinstripe{height:34px; position:relative; margin:0}
.pinstripe::before,.pinstripe::after{content:""; position:absolute; left:0; right:0; height:2px; background:var(--flame)}
.pinstripe::before{top:14px} .pinstripe::after{top:20px; height:1px; opacity:.6}

/* ---------- sections ---------- */
.section{padding:80px 0}
.section.alt{background:var(--panel)}
.eyebrow{color:var(--flame); font-weight:700; letter-spacing:.28em; text-transform:uppercase; font-size:15px; margin-bottom:12px}
h2.title{font-family:'Big Shoulders Display', Impact, sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(38px,5vw,58px); line-height:1.02; letter-spacing:.02em; margin-bottom:18px}
.lead{font-size:21px; color:var(--dim); max-width:820px}
.center{text-align:center}
.center .lead{margin:0 auto}

/* ---------- service strip ---------- */
.services{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--steel);
  border:1px solid var(--steel); border-radius:var(--radius); overflow:hidden; margin-top:44px}
.svc{background:var(--panel); padding:28px 16px; text-align:center}
.svc b{display:block; font-family:'Big Shoulders Display',Impact,sans-serif; font-size:26px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase}
.svc span{color:var(--dim); font-size:16px}
.svc svg{width:38px; height:38px; margin:0 auto 12px; stroke:var(--flame); fill:none; stroke-width:1.6}
@media (max-width:900px){ .services{grid-template-columns:repeat(2,1fr)} }

/* ---------- cards ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:44px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px}
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:44px}
@media (max-width:1100px){ .grid5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .grid5{grid-template-columns:repeat(2,1fr)} }
/* crew names sit on one line so the row stays balanced */
.grid5 .card h3{font-size:24px; margin-bottom:6px}
.grid5 .card > div{padding:18px 20px !important}
@media (max-width:1000px){ .grid4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .grid3,.grid2{grid-template-columns:1fr} }
@media (max-width:560px){ .grid4{grid-template-columns:1fr} }
.card{background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius); padding:34px 30px;
  box-shadow:0 12px 30px rgba(0,0,0,.35)}
.card h3{font-family:'Big Shoulders Display',Impact,sans-serif; font-size:30px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px}
.card p{color:var(--dim)}
.card .step-no{font-family:'Big Shoulders Display',Impact,sans-serif; font-size:56px; font-weight:800; color:var(--flame); line-height:1}

/* ---------- gallery ---------- */
.build{margin-top:56px}
.build-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; border-bottom:2px solid var(--steel); padding-bottom:14px; margin-bottom:22px}
.build-head h3{font-family:'Big Shoulders Display',Impact,sans-serif; font-size:34px; font-weight:800; text-transform:uppercase; letter-spacing:.02em}
.build-head .count{color:var(--dim); font-size:17px}
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.gal button{border:1px solid var(--steel); border-radius:8px; overflow:hidden; padding:0; cursor:pointer; background:#000;
  aspect-ratio:4/3; transition:transform .18s ease, box-shadow .18s ease}
.gal button:hover{transform:scale(1.03); box-shadow:0 10px 26px rgba(0,0,0,.55); border-color:var(--dim)}
.gal img{width:100%; height:100%; object-fit:cover}
.gal .first{grid-column:span 2; grid-row:span 2}
@media (max-width:640px){ .gal{grid-template-columns:repeat(2,1fr)} .gal .first{grid-column:span 2; grid-row:span 1} }
/* Big galleries render a first batch only. Hidden tiles keep loading="lazy",
   and a lazy image inside display:none is never downloaded - which is the
   point: 94 thumbnails at once outruns lazy loading on a phone. */
.gal button.is-hidden{display:none}
.gal-more{display:block; width:100%; margin-top:16px; padding:16px 20px;
  background:var(--panel2); border:1px solid var(--steel); border-radius:10px;
  color:var(--bone); font-family:inherit; font-weight:700; font-size:17px;
  cursor:pointer; transition:border-color .18s ease, color .18s ease}
.gal-more:hover{border-color:var(--flame); color:var(--flame)}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; background:rgba(5,6,8,.96); z-index:100; display:none; flex-direction:column}
.lb.show{display:flex}
.lb-top{display:flex; justify-content:space-between; align-items:center; padding:16px 22px; color:var(--dim); font-size:18px}
.lb-stage{flex:1; display:flex; align-items:center; justify-content:center; padding:0 90px; min-height:0}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.8)}
.lb button{background:var(--panel2); color:var(--bone); border:1px solid var(--steel); border-radius:10px;
  font-size:26px; cursor:pointer; min-width:60px; min-height:60px; display:flex; align-items:center; justify-content:center}
.lb button:hover{background:var(--steel)}
.lb-prev,.lb-next{position:absolute; top:50%; transform:translateY(-50%)}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-close{font-size:22px}
@media (max-width:640px){ .lb-stage{padding:0 8px} .lb-prev,.lb-next{top:auto; bottom:18px; transform:none} .lb-prev{left:18px} .lb-next{right:18px} }

/* ---------- team ---------- */
.member{display:grid; grid-template-columns:280px 1fr; gap:34px; align-items:start;
  background:var(--panel); border:1px solid var(--steel); border-radius:var(--radius); padding:34px; margin-top:30px}
.member img{border-radius:10px; border:1px solid var(--steel); width:100%}
.member h3{font-family:'Big Shoulders Display',Impact,sans-serif; font-size:36px; font-weight:800; text-transform:uppercase}
.member .role{color:var(--flame); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:15px; margin-bottom:14px}
.member p{color:var(--dim)}
@media (max-width:760px){ .member{grid-template-columns:1fr} .member img{max-width:320px} }

/* ---------- quotes ---------- */
.quote{background:var(--panel); border:1px solid var(--steel); border-left:5px solid var(--flame);
  border-radius:var(--radius); padding:32px}
.quote p{font-size:21px; line-height:1.6}
.quote footer{margin-top:18px; color:var(--dim); font-weight:600}
.placeholder-tag{display:inline-block; background:var(--panel2); border:1px dashed var(--dim); color:var(--dim);
  font-size:14px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:6px; margin-bottom:14px}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; margin-top:44px}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.big-call{font-family:'Big Shoulders Display',Impact,sans-serif; font-size:clamp(40px,6vw,64px);
  font-weight:800; text-decoration:none; letter-spacing:.02em; display:inline-block; line-height:1.05;
  background:linear-gradient(180deg,var(--chrome-a),#c8ccd4 45%, var(--chrome-c) 52%, #cfd3da);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hours-table{width:100%; border-collapse:collapse; font-size:19px; margin-top:10px}
.hours-table td{padding:12px 6px; border-bottom:1px solid var(--steel)}
.hours-table td:last-child{text-align:right; color:var(--dim)}
.hours-table tr.today td{color:var(--bone); font-weight:700}
.hours-table tr.today td:last-child{color:var(--flame)}
.logo-plate{background:#fff; border-radius:10px; padding:18px; display:inline-block; margin-top:24px}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; border-top:1px solid var(--steel); border-bottom:1px solid var(--steel)}
.cta-band .bg{position:absolute; inset:0}
.cta-band .bg img{width:100%; height:100%; object-fit:cover}
.cta-band .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,14,16,.95) 20%, rgba(13,14,16,.55))}
.cta-band .wrap{position:relative; padding-top:84px; padding-bottom:84px}

/* ---------- footer ---------- */
footer.site{background:#0a0b0d; border-top:1px solid var(--steel); padding:56px 0 40px; color:var(--dim); font-size:17px}
footer.site .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px}
@media (max-width:800px){ footer.site .cols{grid-template-columns:1fr} }
footer.site a{color:var(--dim)} footer.site a:hover{color:var(--bone)}
footer.site .fb{display:flex; align-items:center; gap:10px; margin-top:12px; font-weight:600}
footer.site .fb svg{flex:none}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .btn:hover{transform:none} }