/* "New" look (28 Sep 2026): black sections and a deep blue accent, matching the dumpster
   site mockups. Only applies when look.js sets <html data-look="new">; the classic look
   is untouched. Same markup and scripts for both, so booking still feeds Jack's app. */

html[data-look="new"]{--accent:#1f5f99;--accent-hover:#174a78;--blue-soft:#7fb0de;--night:#10110f;--dark-line:#2e3129}

/* ---------- Header: HARDLINE wordmark, menu, small phone icon ---------- */
html[data-look="new"] .site-header{background:#000}
html[data-look="new"] .brand img{display:none}
html[data-look="new"] .brand{width:auto!important;height:auto!important;display:flex;align-items:center;text-decoration:none}
html[data-look="new"] .brand::before{content:"HARDLINE";font:700 20px/1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.08em;color:#fff;border:2px solid #fff;padding:5px 10px}
html[data-look="new"] .header-cta{display:flex;align-items:center;gap:12px}
html[data-look="new"] .header-phone{display:inline-flex!important;width:44px;height:44px;border:1px solid #36392f;border-radius:10px;font-size:0;color:transparent;align-items:center;justify-content:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/18px no-repeat}
html[data-look="new"] .header-cta .btn-accent{border-radius:10px;color:#fff;background:var(--accent);box-shadow:none}
@media(max-width:760px){
  html[data-look="new"] .header-cta{display:flex;margin-left:auto}
  html[data-look="new"] .header-cta .btn{display:none}
  html[data-look="new"] .brand::before{font-size:16px;padding:4px 8px}
}

/* ---------- Buttons: deep blue, white text, rounded ---------- */
html[data-look="new"] .btn-accent,html[data-look="new"] .btn-white{background:var(--accent)!important;color:#fff!important;border-radius:10px;box-shadow:none}
html[data-look="new"] .btn-accent:hover,html[data-look="new"] .btn-white:hover{background:var(--accent-hover)!important}

/* ---------- Home hero: black, white headline, logo on the right ---------- */
html[data-look="new"] .hero2{background:#000!important;background-image:none!important;color:#fff}
html[data-look="new"] .hero2-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
html[data-look="new"] .hero2-grid::after{content:"";min-height:300px;background:url('assets/hardline-logo.png') center/contain no-repeat;mix-blend-mode:lighten}
html[data-look="new"] .hero2-kicker{color:var(--blue-soft)}
html[data-look="new"] .hero2-kicker::before{background:var(--blue-soft)}
html[data-look="new"] .hero2-title h1,html[data-look="new"] .hero2-title h1 span{color:#fff!important}
html[data-look="new"] .hero2-title h1 span{background:none!important}
html[data-look="new"] .hero2-title::after{display:none}
html[data-look="new"] .hero2-steps li{color:#8c8f86}
html[data-look="new"] .hero2-steps li b{color:#fff}
html[data-look="new"] .hero2-steps li[aria-current]{color:#fff}
html[data-look="new"] .hero2-steps li[aria-current] b{background:var(--accent);color:#fff;padding:0 5px}
html[data-look="new"] .hero2-steps a{color:#fff!important;border-bottom-color:rgba(255,255,255,.4)}
@media(max-width:900px){
  html[data-look="new"] .hero2-grid{grid-template-columns:1fr!important}
  html[data-look="new"] .hero2-grid::after{min-height:170px;order:3}
}

/* ---------- City strip: part of the dark top ---------- */
html[data-look="new"] .area-strip{background:#000;color:#b8bbb1;border-top:1px solid var(--dark-line);border-bottom:0}
html[data-look="new"] .area-strip strong{color:#fff}

/* ---------- Example jobs: black section, cards in a row ---------- */
html[data-look="new"] .services{background:#10110f!important;color:#fff;box-shadow:none;max-width:none;padding-left:max(5%,calc((100% - var(--page))/2 + 5%));padding-right:max(5%,calc((100% - var(--page))/2 + 5%))}
html[data-look="new"] .services .eyebrow{color:var(--blue-soft)}
html[data-look="new"] .services .section-heading{color:#fff}
html[data-look="new"] .job-list{border:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
html[data-look="new"] .job{border:1px solid var(--dark-line)!important;border-radius:16px;background:transparent}
html[data-look="new"] .job-link{display:flex!important;flex-direction:column;gap:10px;padding:18px;height:100%;box-sizing:border-box;color:#fff}
html[data-look="new"] .job-photo{width:100%!important;height:190px!important;aspect-ratio:auto!important;border-radius:12px;background:#1c1f18!important;color:#7d8076}
html[data-look="new"] .job-info h3{color:#fff}
html[data-look="new"] .job-short{color:#b8bbb1!important;flex:1}
html[data-look="new"] .job-short br{display:none}
html[data-look="new"] .job-info{flex:1}
html[data-look="new"] .job-price{color:#fff!important;text-align:left!important;display:flex!important;justify-content:flex-start!important;grid-column:auto!important;width:100%;gap:6px;align-items:baseline}
html[data-look="new"] .job-price small{color:#b8bbb1;display:inline!important;margin:0!important}
html[data-look="new"] .job-schedule{background:var(--accent)!important;color:#fff!important;border:0!important;border-radius:10px!important;box-shadow:none!important;justify-content:center!important;text-align:center;min-height:46px;display:flex!important;align-items:center}
html[data-look="new"] .job-link:hover .job-schedule{background:var(--accent-hover)!important}
html[data-look="new"] .service-bottom p{color:#b8bbb1}
html[data-look="new"] .service-bottom p strong,html[data-look="new"] .service-bottom a{color:#fff}
html[data-look="new"] .service-bottom .pricing-note{color:#8c8f86}
@media(max-width:1100px){html[data-look="new"] .job-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  html[data-look="new"] .job-list{grid-template-columns:1fr;gap:14px}
  html[data-look="new"] .job-photo{height:160px!important}
}

/* ---------- How it works / Good to know: stays light; blue numbers ---------- */
html[data-look="new"] .info-num{color:var(--accent)}

/* ---------- Inner pages (Schedule, Gallery): black intro band ---------- */
html[data-look="new"] .booking-flow-header,html[data-look="new"] .page-intro{background:#10110f!important;background-image:none!important;color:#fff}
html[data-look="new"] .booking-flow-header .booking-steps li[aria-current] b,
html[data-look="new"] .booking-steps li[aria-current] b{background:var(--accent);color:#fff;padding:0 5px}
html[data-look="new"] .page-intro .page-title,html[data-look="new"] .page-intro .page-title span{color:#fff}
html[data-look="new"] .page-intro .intro,html[data-look="new"] .page-intro .section-label{color:#b8bbb1}
html[data-look="new"] .instagram-panel{background:#10110f;border-radius:16px}
html[data-look="new"] .send-photo-hero{background:var(--accent);color:#fff;border-radius:12px}
html[data-look="new"] .calendar-day.is-open::after{background:var(--accent)}
html[data-look="new"] .time-option[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Footer: black, wordmark instead of the light-background logo ---------- */
html[data-look="new"] .site-footer{background:#000!important;color:#b8bbb1}
html[data-look="new"] .footer-main{border-bottom-color:var(--dark-line)}
html[data-look="new"] .footer-main .brand img{display:none}
html[data-look="new"] .footer-main .brand::before{font-size:18px}
html[data-look="new"] .footer-area{color:#b8bbb1}
html[data-look="new"] .footer-contact{color:#fff}
html[data-look="new"] .footer-bottom,html[data-look="new"] .footer-bottom a{color:#8c8f86}
html[data-look="new"] .hero2-steps li:not(:last-child)::after{background:#4a4d44}
html[data-look="new"] .booking-flow-header .booking-steps li,html[data-look="new"] .booking-flow-header .booking-steps li *{color:#8c8f86}
html[data-look="new"] .booking-flow-header .booking-steps li[aria-current],html[data-look="new"] .booking-flow-header .booking-steps li[aria-current] *{color:#fff!important}
html[data-look="new"] .booking-flow-header .booking-steps li b{color:#fff}