
:root{
  --yellow:#F3C400;
  --yellow-soft:#FFD83D;
  --black:#111111;
  --ink:#181818;
  --gray:#666;
  --light:#F7F7F4;
  --line:#E6E6E1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

.topbar{height:88px;background:var(--black);display:flex;align-items:center;padding:0 5vw;position:sticky;top:0;z-index:50;border-bottom:1px solid #262626}
.brand img{width:215px;max-height:67px;object-fit:contain}
nav{margin-left:auto;display:flex;align-items:center;gap:24px}
nav a{color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em}
.nav-cta,.btn-primary{background:var(--yellow);color:#111!important;border-radius:10px;box-shadow:0 9px 22px rgba(243,196,0,.34)}
.nav-cta{padding:14px 18px}
.nav-cta:hover,.btn-primary:hover,.ig-btn:hover,.card:hover{transform:translateY(-3px)}
.menu{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:28px}

.hero{min-height:650px;display:grid;grid-template-columns:46% 54%;background:linear-gradient(90deg,#fff 0%,#fff 48%,#f7f7f2 100%);overflow:hidden}
.hero-copy{padding:78px 3vw 70px 6vw;display:flex;flex-direction:column;justify-content:center}
.kicker{font-size:12px;font-weight:900;letter-spacing:.17em;color:var(--yellow);margin:0 0 18px}
h1,h2,h3{font-family:Arial Black,Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:-.035em}
h1{font-size:clamp(50px,5.1vw,82px);line-height:.98;margin:0 0 25px}
h1 span{color:var(--yellow)}
.lead{font-size:18px;line-height:1.65;color:#555;max-width:630px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 23px;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:.08em;transition:.2s;border:0;cursor:pointer}
.btn-primary{background:var(--yellow)}
.btn-outline{border:2px solid #1b1b1b}
.location-line{font-size:12px;font-weight:900;letter-spacing:.07em;color:#555}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:650px;overflow:hidden}
.hero-art:before{content:"";position:absolute;left:0;top:0;bottom:0;width:22%;z-index:2;background:linear-gradient(90deg,#fff 8%,rgba(255,255,255,0))}.hero-art:after{content:"";position:absolute;right:0;top:0;bottom:0;width:12%;z-index:2;background:linear-gradient(270deg,#f7f7f2 8%,rgba(247,247,242,0))}
.hero-art img{width:88%;height:88%;object-fit:contain;object-position:center;filter:none}

.section{padding:84px 5vw}
.section.light{background:var(--light)}
.section-head{max-width:900px;margin:0 auto 42px;text-align:center}
.section-head.left{text-align:left;margin-left:0}
.section-head h2,.split-copy h2,.about h2,.quote h2,.catalog-hero h1{font-size:clamp(34px,4vw,56px);line-height:1.02;margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.07);transition:.2s}
.card-media{height:300px;background:#f2f2ee;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:contain}
.card-body{padding:25px}
.card h3{font-size:27px;margin:0 0 11px}
.card p{color:var(--gray);line-height:1.58;min-height:72px;margin:0 0 18px}
.card-link{display:inline-block;background:var(--yellow);padding:11px 15px;border-radius:8px;font-size:11px;font-weight:900;letter-spacing:.07em;box-shadow:0 7px 16px rgba(243,196,0,.25)}

.split{display:grid;grid-template-columns:52% 48%;min-height:610px;background:#111;color:#fff}
.split-media{overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:contain;background:#181818}
.split-copy{padding:70px 6vw;display:flex;flex-direction:column;justify-content:center}
.split-copy .kicker{color:var(--yellow)}
.split-copy p{line-height:1.68;color:#d3d3d3}
.goldline{color:var(--yellow)!important;font-weight:900;letter-spacing:.12em}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 28px}
.tags span{border:1px solid #444;border-radius:999px;padding:8px 11px;font-size:11px;color:#ddd}

.vehicle-art{height:300px;background:linear-gradient(145deg,#101010,#242424);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;color:#fff}
.vehicle-art strong{font-size:23px;letter-spacing:.08em}
.vehicle-art span{margin-top:17px;border:2px solid var(--yellow);padding:11px 14px;color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:.07em}

.info-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:28px 5vw;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.info-pill{text-align:center;font-weight:900;font-size:12px;letter-spacing:.06em;padding:15px;background:var(--light);border-radius:12px}

.about{padding:84px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about p{font-size:17px;line-height:1.72;color:#555}

.quote{padding:88px 6vw;background:#111;color:#fff;display:grid;grid-template-columns:42% 58%;gap:58px}
.quote-copy p{line-height:1.65;color:#d1d1d1}
.quote-form{background:#fff;border-radius:18px;padding:28px;box-shadow:0 20px 44px rgba(0,0,0,.28)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid #d7d7d2;border-radius:10px;padding:14px;margin-bottom:14px}
.quote-form button{width:100%}
.form-note{font-size:11px;color:#777!important;margin:10px 0 0}

.contact-strip{padding:35px 5vw;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.contact-btn,.ig-btn{padding:16px 22px;border-radius:12px;font-weight:900;box-shadow:0 9px 22px rgba(0,0,0,.14);transition:.2s}
.contact-btn{background:var(--yellow)}
.ig-btn{background:#111;color:#fff}

footer{background:#0c0c0c;color:#bbb;text-align:center;padding:42px 20px}
footer img{width:185px;margin:0 auto 18px}
footer p{font-size:12px;letter-spacing:.06em}

.catalog-hero{padding:72px 6vw 55px;background:linear-gradient(135deg,#fff,#f6f6f1)}
.catalog-hero p{max-width:760px;color:#555;line-height:1.65}
.catalog-grid{padding:60px 5vw 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.product h3{font-size:22px;margin:0 0 10px}
.product p{color:#666;line-height:1.55}
.product .small{font-size:12px;font-weight:900;color:#8a7000}
.catalog-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.catalog-tabs a{padding:9px 12px;border-radius:999px;background:#111;color:#fff;font-size:11px;font-weight:900}

@media(max-width:900px){
 .topbar{height:78px}.brand img{width:175px}.menu{display:block}
 nav{display:none;position:absolute;top:78px;left:0;right:0;background:#111;padding:24px 5vw;flex-direction:column;align-items:flex-start}
 nav.open{display:flex}
 .hero{grid-template-columns:1fr}.hero-copy{padding:58px 7vw 28px}.hero-art{min-height:430px}.hero-art img{width:100%}
 .cards,.catalog-grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.split-media{height:410px}
 .about,.quote{grid-template-columns:1fr}.info-strip{grid-template-columns:1fr}.row{grid-template-columns:1fr}
}
@media(max-width:560px){h1{font-size:46px}.btn{width:100%}}

/* V5 clean catalog visuals — no invented BNOVA logos */
.promo-art,.sign-art{height:300px;position:relative;overflow:hidden;background:linear-gradient(145deg,#fbfbf8,#ecece6)}
.tumbler{position:absolute;bottom:32px;width:62px;height:168px;border-radius:13px 13px 18px 18px;box-shadow:0 14px 22px rgba(0,0,0,.13)}
.tumbler:before{content:"";position:absolute;left:6px;right:6px;top:-7px;height:14px;border-radius:50%;background:#242424}
.tumbler.one{left:32px;background:#171717}
.tumbler.two{left:108px;height:148px;background:#fff;border:1px solid #ddd}
.tote{position:absolute;right:36px;bottom:36px;width:130px;height:145px;background:#151515;box-shadow:0 14px 22px rgba(0,0,0,.14)}
.tote:before{content:"";position:absolute;left:31px;top:-45px;width:64px;height:62px;border:8px solid #151515;border-bottom:0;border-radius:38px 38px 0 0}
.tote:after{content:"YOUR BRAND";position:absolute;left:0;right:0;top:62px;text-align:center;color:var(--yellow);font-weight:900;font-size:12px}
.pen{position:absolute;left:188px;bottom:43px;width:10px;height:155px;background:#111;transform:rotate(17deg);border-radius:6px}
.keychain{position:absolute;left:220px;bottom:39px;width:42px;height:42px;border-radius:50%;border:5px solid var(--yellow)}
.banner-shape{position:absolute;left:32px;bottom:24px;width:120px;height:228px;background:#151515;color:#fff;padding:38px 16px;font-family:Arial Black,Arial;font-size:24px;line-height:1.05;box-shadow:0 12px 22px rgba(0,0,0,.15)}
.banner-shape:after{content:"";display:block;width:55px;height:7px;background:var(--yellow);margin-top:18px}
.window-sign{position:absolute;right:30px;top:55px;width:165px;height:100px;border:5px solid #222;background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.sticker{position:absolute;border-radius:50%;background:var(--yellow);box-shadow:0 8px 16px rgba(0,0,0,.12)}
.s1{width:56px;height:56px;right:110px;bottom:42px}.s2{width:38px;height:38px;right:50px;bottom:68px;background:#111}
.vehicle-art.clean{position:relative;height:300px;background:linear-gradient(145deg,#f8f8f4,#e9e9e2);color:#111}
.door-magnet{width:185px;height:92px;border-radius:8px;background:#111;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 13px 25px rgba(0,0,0,.16)}
.door-magnet b{color:var(--yellow);font-size:15px}.door-magnet small{margin-top:7px;font-weight:800}
.dot-lettering{margin-top:18px;font-family:Arial Black,Arial;font-size:18px;line-height:1.2}
.vinyl-note{margin-top:15px;font-size:9px;font-weight:900;letter-spacing:.08em}
.sports-teaser{font-weight:800;color:#fff!important}

/* V6 approved visual corrections */
.kicker{color:var(--yellow)!important}
.hero{min-height:610px;background:linear-gradient(90deg,#fff 0%,#fff 43%,#f7f7f3 100%);align-items:stretch}
.hero-copy{padding-top:58px;padding-bottom:58px}
.hero-art{min-height:610px;margin:0;padding:0;background:transparent}
.hero-art:before{width:18%;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.82) 28%,rgba(255,255,255,0) 100%)}
.hero-art:after{width:8%;background:linear-gradient(270deg,#f7f7f3 0%,rgba(247,247,243,0) 100%)}
.hero-art img{width:100%;height:100%;object-fit:contain;object-position:center;background:transparent}
.card-media{height:300px;background:#f7f7f4}
.card-media img{width:100%;height:100%;object-fit:contain;object-position:center;background:#f7f7f4}
.split-media img{object-fit:contain;background:#111}
.lower-title{text-align:center!important;max-width:1100px!important;margin:0 auto 44px!important}
.lower-title h2{font-size:clamp(34px,4.2vw,60px)!important}
.lower-title h2 span{color:var(--yellow)}
@media(max-width:900px){
 .hero-art{min-height:420px}
 .hero-art img{object-fit:contain}
}

.section-intro{max-width:760px;margin:16px auto 20px;color:#666;line-height:1.65}
.sublimation-bridge{display:inline-block;margin-top:5px;padding:13px 18px;border:1px solid #e4c100;border-radius:10px;background:#fff9d8;font-size:12px;font-weight:800;box-shadow:0 6px 15px rgba(0,0,0,.06)}
.sublimation-bridge b{color:#111}
#services .card-media{height:245px;overflow:hidden}
#services .card-media img{height:300px;object-fit:cover;object-position:center top;transform:translateY(0)}

/* V8: focused hero and duplicate-CTA cleanup */
.hero-art{overflow:hidden!important;background:linear-gradient(90deg,#fff,#f7f7f3)!important}
.hero-art img{width:106%!important;height:106%!important;object-fit:cover!important;object-position:center 58%!important;transform:translateY(-3%)!important}
.hero-art:before{content:""!important;position:absolute!important;z-index:3!important;left:0!important;top:0!important;bottom:0!important;width:16%!important;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.72) 35%,rgba(255,255,255,0) 100%)!important}
.hero-art:after{content:""!important;position:absolute!important;z-index:3!important;right:0!important;top:0!important;bottom:0!important;width:7%!important;background:linear-gradient(270deg,#f7f7f3 0%,rgba(247,247,243,0) 100%)!important}
#services .card-media,#business .card-media{height:235px!important;overflow:hidden!important}
#services .card-media img,#business .card-media img{width:100%!important;height:285px!important;object-fit:cover!important;object-position:center top!important}

/* V10 — approved hero image, shown complete */
.hero{
  background:#fff!important;
  align-items:stretch!important;
}
.hero-art.hero-approved{
  min-height:610px!important;
  position:relative!important;
  overflow:hidden!important;
  background:#fff!important;
}
.hero-art.hero-approved:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:15%!important;
  z-index:2!important;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.75) 38%,rgba(255,255,255,0) 100%)!important;
}
.hero-art.hero-approved:after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:5%!important;
  z-index:2!important;
  background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 100%)!important;
}
.hero-art.hero-approved img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  background:#fff!important;
}

@media(max-width:900px){
  .hero-art.hero-approved{
    min-height:420px!important;
  }
  .hero-art.hero-approved img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}

/* V11: correct ONLY the six cropped service images from V10 */
#services .card-media,#business .card-media{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
#services .card-media img,#business .card-media img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
#services .card,#business .card{overflow:hidden!important;}

/* V12 service card layout correction — clean borders and consistent spacing */
#services .cards,#business .cards{align-items:stretch!important;}
#services .card,#business .card{border:1px solid #e6e6e1!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 5px 18px rgba(0,0,0,.07)!important;}
#services .card-media,#business .card-media{background:#fff!important;border-bottom:1px solid #e6e6e1!important;overflow:hidden!important;}
#services .card-media img,#business .card-media img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;object-fit:contain!important;transform:none!important;}
#services .card-body,#business .card-body{padding:20px 22px 24px!important;}
#services .card-body h3,#business .card-body h3{margin:0 0 10px!important;}

/* V13: photo label already appears in image; description only below */
#services .card-body p,#business .card-body p{margin:0!important;}
#business .card[href="vehicle-business-graphics.html"] .card-media{height:240px!important;}
#business .card[href="vehicle-business-graphics.html"] .card-media img{height:100%!important;width:100%!important;object-fit:cover!important;object-position:center!important;}

/* Five-service layout: two centered cards, three business cards */
@media(min-width:760px){#services .cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px;margin-left:auto;margin-right:auto}}
#business a[href="vehicle-business-graphics.html"] .card-media img{aspect-ratio:1.85;object-fit:cover!important;width:100%!important}




/* BNOVA SERVICE CARDS / 2026-10-27 — one authoritative layout for all five cards.
   Scoped to home services, leaving hero, navigation, other pages untouched. */
#services .cards.bnova-service-grid,
#business .cards.bnova-service-grid {
 display:flex!important;flex-flow:row wrap!important;justify-content:center!important;
 align-items:stretch!important;gap:24px!important;max-width:1100px!important;
 margin-inline:auto!important;
}
#services .bnova-service-grid > .service-card,
#business .bnova-service-grid > .service-card {
 flex:0 1 330px!important;width:330px!important;max-width:100%!important;
 display:flex!important;flex-direction:column!important;align-self:stretch!important;
 height:auto!important;min-height:0!important;border:1px solid #e6e6e1!important;
 border-radius:14px!important;background:#fff!important;overflow:hidden!important;
 box-shadow:0 5px 18px rgba(0,0,0,.07)!important;
}
#services .bnova-service-grid .service-photo,
#business .bnova-service-grid .service-photo {
 position:relative!important;flex:0 0 auto!important;display:block!important;
 width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
 aspect-ratio:5/3!important;overflow:hidden!important;background:#f7f7f4!important;
 border:0!important;border-bottom:1px solid #e6e6e1!important;
}
#services .bnova-service-grid .service-photo img,
#business .bnova-service-grid .service-photo img {
 position:absolute!important;inset:0!important;display:block!important;
 width:100%!important;height:100%!important;max-width:none!important;
 aspect-ratio:auto!important;object-fit:cover!important;object-position:center center!important;
 transform:none!important;border:0!important;background:transparent!important;
}
#services .bnova-service-grid .bnova-service-body,
#business .bnova-service-grid .bnova-service-body {
 display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
 padding:20px 20px 22px!important;height:auto!important;min-height:200px!important;
 max-height:none!important;border:0!important;box-sizing:border-box!important;
}
#services .bnova-service-grid .bnova-service-title,
#business .bnova-service-grid .bnova-service-title {
 display:block!important;margin:0 0 12px!important;padding:0!important;
 color:#181818!important;font-family:'Arial Black',Arial,Helvetica,sans-serif!important;
 font-size:19px!important;font-weight:900!important;line-height:1.18!important;
 letter-spacing:-.025em!important;text-transform:uppercase!important;
}
#services .bnova-service-grid .bnova-service-description,
#business .bnova-service-grid .bnova-service-description {
 display:block!important;flex:0 0 auto!important;margin:0 0 18px!important;
 min-height:0!important;font-family:Arial,Helvetica,sans-serif!important;
 font-size:13px!important;line-height:1.55!important;color:#666!important;
}
#services .bnova-service-grid .bnova-service-explore,
#business .bnova-service-grid .bnova-service-explore {
 display:inline-flex!important;align-self:flex-start!important;align-items:center!important;
 justify-content:center!important;margin-top:auto!important;padding:11px 15px!important;
 border-radius:8px!important;background:#f3c400!important;color:#111!important;
 font-family:Arial,Helvetica,sans-serif!important;font-size:11px!important;
 font-weight:900!important;letter-spacing:.06em!important;line-height:1.1!important;
}
@media(max-width:700px) {
 #services .cards.bnova-service-grid,#business .cards.bnova-service-grid {
  gap:20px!important;
 }
 #services .bnova-service-grid > .service-card,#business .bnova-service-grid > .service-card {
  flex:1 1 100%!important;width:100%!important;max-width:440px!important;
 }
 #services .bnova-service-grid .bnova-service-body,#business .bnova-service-grid .bnova-service-body {
  min-height:0!important;padding:18px 19px 19px!important;
 }
}
