/* High-end concept, Round 1 (11 Nov 2026, "JDI website updates round 1" PDF). Loaded on every page with the site header.
   Promo bar removed, gold in the logo, dark header + hero on the Services page, Projects page opens on the photos,
   Reviews page is one combined feed. Written by migration/scripts/apply_highend_site.py. */

/* ---------- shared tokens (same values as body.hx-home in jdi-highend.css) ---------- */
:root{--hxl-gold:#c5a35a}
body.hx-page,body.hx-dark-head{
  --hx-ink:#0f0e0c;--hx-ink-2:#191714;--hx-stone:#f5f2ec;--hx-gold:#c5a35a;--hx-gold-ink:#7d6128;--hx-gold-lt:#dcc07f;
  --hx-gold-line:rgba(197,163,90,.38);--hx-line-d:rgba(255,255,255,.18);
  --hx-serif:'Instrument Serif','Times New Roman',serif;--hx-ink-rgb:15,14,12;--hx-shade-rgb:15,14,12;
}
html:not([data-hx-font="serif"]) body.hx-page,html:not([data-hx-font="serif"]) body:not(.hx-home){
  --hx-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Inter,Arial,sans-serif;
  --hx-display-w:600;--hx-form-h:30px;--hx-form-ls:-.035em;
}
body.hx-home,body.hx-page,body.hx-dark-head{--hxl-gold:var(--hx-gold)}

/* ---------- change 3: promo bar removed. Pages were laid out for bar + header (124px); the header alone is 80px ---------- */
body.hx-nobar:not(.hx-home) .layout-container{margin-top:-44px}
html{scroll-padding-top:100px}

/* ---------- change 2: gold in the logo. Art picked option A, the gold roof (11 Nov) ---------- */
.hxl-roof{fill:var(--hxl-gold)}
/* dark headers: the mark was turned white with a filter, which would also turn the gold white */
body.hx-home .fixed.top-0>header>div>a:first-child svg,
body.hx-dark-head .fixed.top-0>header>div>a:first-child svg{filter:none!important;color:#fff!important}

/* ---------- dark header (home look) on every inside page (Round 2, 11 Nov); apply_highend_round2.py adds body.hx-dark-head ---------- */
body.hx-dark-head .fixed.top-0>header{background:var(--hx-ink)!important;box-shadow:none!important;border-bottom:1px solid var(--hx-gold-line)}
body.hx-dark-head .fixed.top-0>header nav a[style*="color:#333"]{color:#fff!important;background:transparent!important;font-weight:500!important}
body.hx-dark-head .fixed.top-0>header nav a[style*="color:#333"] span{font-weight:500!important}
body.hx-dark-head .fixed.top-0>header nav a[style*="color:#333"]:hover{color:var(--hx-gold)!important}
body.hx-dark-head .fixed.top-0>header nav a[data-jdi-mega],body.hx-dark-head .fixed.top-0>header nav a[data-jdi-mega]>span,body.hx-dark-head .fixed.top-0>header nav a[data-jdi-mega]>svg{color:#fff!important}
body.hx-dark-head .fixed.top-0>header nav a[data-jdi-mega]:hover,body.hx-dark-head .fixed.top-0>header nav a[data-jdi-mega]:hover>span,body.hx-dark-head .fixed.top-0>header nav a[data-jdi-mega]:hover>svg{color:var(--hx-gold)!important}
body.hx-dark-head .fixed.top-0>header a[href^="tel:"]{color:#fff!important}
body.hx-dark-head .fixed.top-0>header a[href^="tel:"][style*="background-color"]{background-color:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1px var(--hx-gold-line)}
body.hx-dark-head .fixed.top-0>header button svg{color:#fff}
body.hx-dark-head .fixed.top-0>header a[href*="estimate"],body.hx-dark-head .fixed.top-0>header button.bg-jdi-accent,
body.hx-dark-head .fixed.top-0>header a.bg-jdi-accent,body.hx-dark-head .fixed.top-0>header .nav-cta-btn,
body.hx-dark-head .fixed.top-0>header .nav-cta-btn span{background-color:var(--hx-gold)!important;color:var(--hx-ink)!important}
body.hx-dark-head .fixed.top-0>header .nav-cta-btn:hover,body.hx-dark-head .fixed.top-0>header .nav-cta-btn:hover span{background-color:#fff!important}
@media(min-width:1360px){
  body.hx-dark-head .fixed.top-0>header>div{padding-left:32px!important;padding-right:32px!important}
  body.hx-dark-head .fixed.top-0>header nav{padding-left:0!important;padding-right:0!important}
  body.hx-dark-head .fixed.top-0>header nav a{padding-left:10px!important;padding-right:10px!important}
  body.hx-dark-head .fixed.top-0>header a[href^="tel:"]{font-size:17px!important}
}

/* ---------- shared: one trust line (home hero style) and the dark estimate form ---------- */
.hx-proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:26px;color:#fff;font-size:14px;line-height:1.5;text-decoration:none}
.hx-proof-stars{color:var(--hx-gold);letter-spacing:.12em}
.hx-proof-sep{width:1px;height:14px;background:var(--hx-gold-line)}
body.hx-page .jdi-mirylo-form,body:not(.hx-home) .jdi-mirylo-form{background:var(--hx-ink,#0f0e0c)!important;border:1px solid var(--hx-line-d,rgba(255,255,255,.18));border-top:2px solid var(--hx-gold)!important;border-radius:2px 10px 10px 2px!important;box-shadow:0 30px 80px rgba(0,0,0,.42)!important}

/* ---------- change 7: Services hero. Text straight on the darkened photo, centred against the form ---------- */
body.hx-svc .v3sv-shade{display:block!important;background:linear-gradient(90deg,rgba(var(--hx-shade-rgb),.88) 0%,rgba(var(--hx-shade-rgb),.74) 44%,rgba(var(--hx-shade-rgb),.22) 72%,rgba(var(--hx-shade-rgb),.32) 100%),linear-gradient(0deg,rgba(var(--hx-shade-rgb),.6) 0%,rgba(var(--hx-shade-rgb),0) 42%)!important}
body.hx-svc .v3t-hero.v3sv-hero{background:var(--hx-ink)!important}
body.hx-svc .v3sv-hero .v3t-hero-in>div:first-child{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.hx-svc .v3sv-hero h1{font-family:var(--hx-display,var(--hx-serif))!important;font-weight:var(--hx-display-w,400)!important;letter-spacing:-.012em!important;font-size:clamp(38px,3.9vw,58px)!important;line-height:1.04!important;color:#fff!important;max-width:none}
body.hx-svc .v3sv-hero h1 em{display:block;font-style:italic;color:var(--hx-gold-lt)!important}
html:not([data-hx-font="serif"]) body.hx-svc .v3sv-hero h1{letter-spacing:-.04em!important;font-size:clamp(32px,3.3vw,50px)!important;line-height:1.06!important}
html:not([data-hx-font="serif"]) body.hx-svc .v3sv-hero h1 em{font-style:normal}
body.hx-svc .v3sv-hero .v3-eyebrow{color:rgba(255,255,255,.86)!important;font-size:11.5px!important;letter-spacing:.22em!important;font-weight:600!important}
body.hx-svc .v3sv-hero .v3-lead{color:rgba(255,255,255,.84)!important;font-size:17px!important;line-height:1.65!important;max-width:540px!important}
body.hx-svc .v3sv-hero .v3t-btns .v3-btn{background-color:var(--hx-gold)!important;border-color:var(--hx-gold)!important;color:var(--hx-ink)!important;min-height:48px}
body.hx-svc .v3sv-hero .v3t-btns .v3-btn *{color:var(--hx-ink)!important}
body.hx-svc .v3sv-hero .v3t-btns .v3-btn:hover{background-color:var(--hx-gold-lt)!important;border-color:var(--hx-gold-lt)!important}
body.hx-svc .v3sv-hero .v3t-btns .v3-ghost{border-color:var(--hx-gold-line)!important;color:#fff!important;background:transparent!important;min-height:48px}
body.hx-svc .v3sv-hero .v3t-btns .v3-ghost:hover{background:var(--hx-gold)!important;border-color:var(--hx-gold)!important;color:var(--hx-ink)!important}
/* the rotating "now showing" chip sat on top of the form; clutter, so it goes (the photos still rotate) */
body.hx-svc .v3sv-now{display:none!important}
@media(min-width:1024px){
  body.hx-svc .v3t-hero.v3sv-hero{min-height:min(100vh,860px)!important;padding-top:112px!important;padding-bottom:64px!important}
  body.hx-svc .v3sv-hero .v3t-hero-in{max-width:1280px!important;padding:0 32px!important;grid-template-columns:minmax(0,1fr) 400px!important;gap:56px!important;align-items:center!important}
  /* two lines: "Remodeling Services in" / gold place names */
  body.hx-svc .v3sv-hero h1 em{white-space:nowrap}
}
@media(max-width:1023px){
  body.hx-svc .v3sv-hero h1 em{text-wrap:balance}
  body.hx-svc .v3sv-shade{background:linear-gradient(180deg,rgba(var(--hx-shade-rgb),.8),rgba(var(--hx-shade-rgb),.88))!important}
}

/* ---------- change 6: Projects page opens on the photos ---------- */
body.hx-proj .v3p-grid{padding-top:56px!important}
body.hx-proj .v3t-grid-head h1{margin:8px 0 0}
.hx-proj-lead{margin:12px 0 0;max-width:620px;font-size:16.5px;line-height:1.6;color:#555}
@media(max-width:767px){body.hx-proj .v3p-grid{padding-top:36px!important}}

/* the skip link waits above the page; its shadow used to hide under the promo bar */
.jdi-skip:not(:focus){box-shadow:none!important}

/* Services: the phone sticky bar's estimate button is gold, as on the home page */
body.hx-svc .v3-bar .v3-btn{background-color:var(--hx-gold)!important;border-color:var(--hx-gold)!important;color:var(--hx-ink)!important}
body.hx-svc .v3-bar .v3-btn *{color:var(--hx-ink)!important}
@media(max-width:639px){.hx-proof-sep{display:none}}

/* About-style dark heroes: the rating stars were #111 on the dark photo (black/white pass); gold, as on the home hero */
p.text-white\/85+div svg[fill="#111111"][stroke="#111111"]{fill:var(--hx-gold,#c5a35a);stroke:var(--hx-gold,#c5a35a)}

/* Real JDI photos, 11 Nov 2026 delivery (apply_highend_photos.py) */
.hx-office-fig{margin:28px 0 8px}
.hx-office-fig img{display:block;width:100%;height:auto;border-radius:4px}
.hx-office-fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:#6b6b6b}
.hx-life{padding-bottom:24px}
.hx-life-head{margin-bottom:28px}
.hx-life-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hx-life-grid li{margin:0}
.hx-life-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.hx-life-grid span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:#4a4a4a}
.hx-life-grid li.hx-life-wide{grid-column:1/-1}
.hx-life-grid li.hx-life-wide img{aspect-ratio:21/9}
@media (max-width:767px){.hx-life-grid{grid-template-columns:1fr;gap:24px}.hx-life-grid li.hx-life-wide img{aspect-ratio:3/2}}
/* 12 Nov: estimate form on every page = the home form (dark card, gold button). The Mirylo widget is skinned from
   /jdi-highend.js (shadow DOM); the frame and the pop-up card are dark here so its white text reads. */
body:not(.hx-home){--hx-ink:#0f0e0c;--hx-gold:#c5a35a}
body:not(.hx-home) .jdi-est-card{background:var(--hx-ink,#0f0e0c)!important}
body:not(.hx-home) .jdi-est .jdi-mirylo-form{box-shadow:none!important;border:0!important;border-top:2px solid var(--hx-gold,#c5a35a)!important}
/* 12 Nov page audit: guide pages (kitchen, bathroom, whole-house). On phones/tablets the breadcrumb sat half under the 81px header; the hub filter bar stuck 31px below the header so cards scrolled through the gap */
@media(max-width:1023px){main.kg{padding-top:144px}}
main.kg .kg-filter{top:80px}
/* 12 Nov page audit: blog index heading lost its side padding (.v3b-index-head padding shorthand beat .v3b-wrap): flush to the screen edge on phones, 32px left of the cards on desktop */
.v3b-wrap.v3b-index-head{padding-left:16px;padding-right:16px}
@media(min-width:1024px){.v3b-wrap.v3b-index-head{padding-left:32px;padding-right:32px}}
.v3b-index .max-w-7xl:has(>.v3b-pills){max-width:1216px;padding-left:16px;padding-right:16px}
@media(min-width:1024px){.v3b-index .max-w-7xl:has(>.v3b-pills){padding-left:32px;padding-right:32px}}
/* 12 Nov page audit: hero fact boxes (careers, service area, offers, projects/blog categories) wrapped 2 + 1 on phones; keep the three in one even row */
@media(max-width:599px){.v3t-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.v3t-facts li{padding:10px 12px;font-size:12.5px;line-height:1.35}.v3t-facts b{font-size:20px}}
/* 12 Nov page audit: blog posts on phones. A 504px comparison table (/blog/best-flooring-bathroom/) stretched the one-column grid, so the post and sidebar cards ran off the right edge; tables now scroll sideways in place */
.v3b-grid>*{min-width:0}
@media(max-width:1023px){.v3b-grid{grid-template-columns:minmax(0,1fr)}}
.blog-prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 12 Nov page audit: team bio pages had the same phone/tablet breadcrumb-under-header problem */
@media(max-width:1023px){main.v3-biopage{padding-top:144px}}
/* 12 Nov page audit: project pages put the estimate form in a white sidebar card; with the dark form skin (751529c4) its fields were white on white. Card goes dark like every other form frame */
body:not(.hx-home) [class*="ContactCard"]{background:var(--hx-ink,#0f0e0c)!important;border-color:var(--hx-ink,#0f0e0c)!important;color:#fff}
/* 12 Nov page audit: /projects/greige-kitchen-...-98661/ "before" photo 16a was never carried over in the October move (missing from every copy). Hide the broken half until JDI sends the photo; the "after" photo fills the slot */
.ba-slide:has(source[srcset*="16a-kitchen-wide-before-640"]){grid-template-columns:minmax(0,1fr)!important}
.ba-slide>.ba-image-wrap:has(source[srcset*="16a-kitchen-wide-before-640"]){display:none!important}
/* same problem in white .bg-white form cards: /contact/ and the offer pages */
body:not(.hx-home) .bg-white:has(> [data-ghl-attr-form]),body:not(.hx-home) .bg-white:has(> * > [data-ghl-attr-form]){background:var(--hx-ink,#0f0e0c)!important;color:#fff;border-color:var(--hx-ink,#0f0e0c)!important}
body:not(.hx-home) .bg-white:has(> * > [data-ghl-attr-form]) :is(h2,h3,h4,p):not([data-ghl-attr-form] *),body:not(.hx-home) [class*="ContactCard"] :is(h2,h3,h4,p){color:#fff!important}