.bw-home{
  --bw-red:#FF1616; --bw-red-dark:#CC1212;
  --bw-ink:#0E0E0E; --bw-ink-2:#151515;
  --bw-heading:#1c1c22; --bw-text:#2a2a2a; --bw-muted:#6b6b6b;
  --bw-line:#e4e4e4; --bw-white:#ffffff;
  color:var(--bw-text);
}
.bw-home *{ box-sizing:border-box; }

/* ---- Type ---- */
.bw-home h1,.bw-home h2,.bw-home h3{ color:var(--bw-heading); letter-spacing:-.01em; }
.bw-home h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; line-height:1.05; margin:0 0 .5em; }
.bw-home h3{ font-weight:700; }
.bw-home .lead{ font-size:1.2rem; line-height:1.6; color:#444; }

/* ---- Signature: the score-line label ---- */
.bw-label{ display:inline-flex; align-items:center; gap:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--bw-red); }
.bw-label::before{ content:""; width:34px; height:2px; background:var(--bw-red); }
.bw-label.on-dark{ color:#fff; }
.bw-label.on-dark::before{ background:var(--bw-red); }

/* ---- Score-line divider ---- */
.bw-rule{ position:relative; height:2px; background:var(--bw-line); }
.bw-rule::before{ content:""; position:absolute; left:0; top:0; height:2px; width:90px; background:var(--bw-red); }

/* ---- Section spacing ---- */
.bw-sec{ padding:84px 0; }
.bw-sec-sm{ padding:42px 0; }
@media (max-width:640px){ .bw-sec{ padding:56px 0; } }
.bw-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.bw-narrow{ max-width:760px; }

/* ---- Buttons ---- */
.bw-home .uk-button{ border-radius:12px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:0 28px; transition:transform .15s, background .2s, box-shadow .2s, color .2s; }
.bw-home .uk-button-primary{ background:var(--bw-red); color:#fff; }
.bw-home .uk-button-primary:hover,.bw-home .uk-button-primary:focus{ background:var(--bw-red-dark); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,22,22,.3); }
.bw-home .uk-button-secondary{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.35); }
.bw-home .uk-button-secondary:hover,.bw-home .uk-button-secondary:focus{ background:#fff; color:var(--bw-ink); border-color:#fff; transform:translateY(-2px); }

/* ---- HERO ---- */
.bw-hero{ position:relative; background:var(--bw-ink) center/cover no-repeat;
  
  padding:128px 0 0; overflow:hidden; }
.bw-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.74) 48%, rgba(10,10,10,.4) 100%); }
.bw-hero .bw-wrap{ position:relative; z-index:1; }
.bw-hero h1{ color:#fff; margin:.35em 0 0; line-height:.98; letter-spacing:-.02em; }
.bw-hero h1 .l1{ display:block; font-weight:900; font-size:clamp(2.6rem,7vw,5.2rem); }
.bw-hero h1 .l2{ display:block; font-weight:800; font-size:clamp(1.3rem,3vw,2rem); color:var(--bw-red); margin-top:.15em; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.bw-hero p{ color:#e7e7e7; max-width:600px; margin:1.4em 0 0; font-size:1.18rem; line-height:1.6; }
.bw-hero .bw-actions{ margin-top:2em; display:flex; gap:14px; flex-wrap:wrap; }
/* materials ticker */
.bw-ticker{ position:relative; z-index:1; margin-top:64px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:10px 30px; padding:22px 0 30px; }
.bw-ticker span{ color:#cfcfcf; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; display:inline-flex; align-items:center; gap:10px; }
.bw-ticker span::before{ content:""; width:7px; height:7px; background:var(--bw-red); border-radius:50%; }

/* ---- STATS BAND ---- */
.bw-stats{ background:var(--bw-ink-2); }
.bw-stats .row{ display:grid; grid-template-columns:repeat(4,1fr); }
.bw-stats .cell{ padding:34px 24px; border-left:1px solid rgba(255,255,255,.08); }
.bw-stats .cell:first-child{ border-left:0; }
.bw-stats .n{ color:#fff; font-weight:900; font-size:2rem; line-height:1; }
.bw-stats .n em{ color:var(--bw-red); font-style:normal; }
.bw-stats .k{ color:#9a9a9a; margin-top:.5em; font-size:.92rem; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:760px){ .bw-stats .row{ grid-template-columns:repeat(2,1fr); } .bw-stats .cell:nth-child(3){ border-left:0; } }

/* ---- INTRO ---- */
.bw-intro h2{ max-width:18ch; }

/* ---- SERVICES (list, not boxes) ---- */
.bw-svc{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--bw-line); margin-top:36px; }
.bw-svc a{ position:relative; display:block; padding:28px 30px 28px 0; border-bottom:1px solid var(--bw-line); text-decoration:none; }
.bw-svc a:nth-child(even){ padding-left:40px; border-left:1px solid var(--bw-line); }
.bw-svc a::after{ content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--bw-red); transition:width .3s ease; }
.bw-svc a:nth-child(even)::after{ left:40px; }
.bw-svc a:hover::after{ width:64px; }
.bw-svc .nm{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.bw-svc h3{ margin:0; font-size:1.3rem; color:var(--bw-heading); transition:color .2s; }
.bw-svc a:hover h3{ color:var(--bw-red); }
.bw-svc .arw{ width:9px; height:9px; border-right:2px solid var(--bw-muted); border-top:2px solid var(--bw-muted); transform:rotate(45deg); transition:transform .2s, border-color .2s; flex:none; }
.bw-svc a:hover .arw{ border-color:var(--bw-red); transform:rotate(45deg) translate(3px,-3px); }
.bw-svc .desc{ margin:.5em 0 0; color:var(--bw-muted); font-size:.98rem; line-height:1.55; max-width:42ch; }
@media (max-width:680px){
  .bw-svc{ grid-template-columns:1fr; }
  .bw-svc a:nth-child(even){ padding-left:0; border-left:0; }
  .bw-svc a:nth-child(even)::after{ left:0; }
}

/* ---- FEATURED WORK (asymmetric) ---- */
.bw-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:12px; margin-top:36px; }
.bw-bento a{ position:relative; overflow:hidden; border-radius:10px; display:block; background:#ddd; }
.bw-bento img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.bw-bento a:hover img{ transform:scale(1.06); }
.bw-bento .feat{ grid-column:span 2; grid-row:span 2; }
@media (max-width:860px){
  .bw-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .bw-bento .feat{ grid-column:span 2; grid-row:span 2; }
}

/* ---- WHY (dark signature section with concrete texture) ---- */
.bw-why{ position:relative; background:var(--bw-ink); color:#cfcfcf; overflow:hidden; }
.bw-why::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px); }
.bw-why .bw-wrap{ position:relative; z-index:1; }
.bw-why h2{ color:#fff; }
.bw-why .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:40px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); }
.bw-why .item{ background:var(--bw-ink); padding:30px 26px; }
.bw-why .item .tick{ width:30px; height:3px; background:var(--bw-red); margin-bottom:18px; }
.bw-why .item h3{ color:#fff; font-size:1.12rem; margin:0 0 .5em; }
.bw-why .item p{ margin:0; color:#a7a7a7; font-size:.96rem; line-height:1.6; }
@media (max-width:760px){ .bw-why .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .bw-why .grid{ grid-template-columns:1fr; } }

/* ---- TESTIMONIALS ---- */
.bw-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.bw-quote{ position:relative; padding:34px 28px 28px; border:1px solid var(--bw-line); border-radius:12px; background:#fff; }
.bw-quote::before{ content:"\201C"; position:absolute; top:6px; left:22px; font-family:Georgia,'Times New Roman',serif; font-size:4.2rem; line-height:1; color:var(--bw-red); }
.bw-quote p{ position:relative; z-index:1; color:#333; font-size:1.02rem; line-height:1.6; margin:1.4em 0 0; }
.bw-quote .nm{ margin-top:1.2em; font-weight:800; color:var(--bw-heading); text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; }
@media (max-width:860px){ .bw-quotes{ grid-template-columns:1fr; } }

/* ---- SERVICE AREA ---- */
.bw-area{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:36px; }
.bw-area a{ display:block; padding:16px; text-align:center; font-weight:700; text-decoration:none;
  color:var(--bw-heading); border:1px solid var(--bw-line); border-radius:10px; transition:.18s; letter-spacing:.02em; }
.bw-area a:hover{ background:var(--bw-ink); color:#fff; border-color:var(--bw-ink); }
@media (max-width:680px){ .bw-area{ grid-template-columns:1fr 1fr; } }

/* ---- FAQ ---- */
.bw-home .uk-accordion-title{ font-size:1.08rem; font-weight:800; color:var(--bw-heading); }
.bw-home .uk-accordion-title::before{ background-color:var(--bw-red); }

/* ---- CTA ---- */
.bw-cta{ position:relative; background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)), var(--bw-red); color:#fff; overflow:hidden; }
.bw-cta::before{ content:""; position:absolute; inset:0; opacity:.25;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 64px); }
.bw-cta .bw-wrap{ position:relative; z-index:1; text-align:center; }
.bw-cta h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.bw-cta p{ color:#ffeaea; font-size:1.18rem; max-width:48ch; margin:0 auto 1.6em; }
.bw-cta .uk-button-primary{ background:#fff; color:var(--bw-ink); }
.bw-cta .uk-button-primary:hover{ background:var(--bw-ink); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.3); }
.bw-cta .uk-button-secondary{ border-color:rgba(255,255,255,.6); }

/* ---- REVIEWS (Trustindex) ---- */
.bw-trustindex{ margin-top:48px; }

/* ---- ESTIMATE (form + map) ---- */
.bw-estimate{ background:#fafafa; }
.bw-estimate .grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:36px; align-items:start; }
.bw-estimate .panel h3{ font-size:1.25rem; margin:0 0 .5em; }
.bw-estimate .info{ list-style:none; margin:0 0 22px; padding:0; }
.bw-estimate .info li{ padding:12px 0; border-bottom:1px solid var(--bw-line); }
.bw-estimate .info li:first-child{ border-top:1px solid var(--bw-line); }
.bw-estimate .info a{ color:var(--bw-heading); text-decoration:none; font-weight:800; }
.bw-estimate .info a:hover{ color:var(--bw-red); }
.bw-estimate iframe.bw-form{ width:100%; min-height:580px; border:0; border-radius:12px; background:#fff; }
.bw-estimate iframe.bw-map{ width:100%; height:320px; border:0; border-radius:12px; }
@media (max-width:860px){ .bw-estimate .grid{ grid-template-columns:1fr; } }
.bw-home .bw-video{ text-align:center; }
.bw-home .bw-video-frame{ position:relative; width:100%; max-width:340px; margin:26px auto 0; aspect-ratio:9 / 16; border-radius:16px; overflow:hidden; border:1px solid var(--bw-line); box-shadow:0 14px 34px rgba(0,0,0,.22); background:var(--bw-ink); }
.bw-home .bw-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.bw-home .bw-video-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:40px; }
.bw-home .bw-video-row .bw-video-frame{ max-width:300px; margin:0 auto; }
.bw-home .bw-video-cap{ margin:14px 0 0; text-align:center; font-weight:800; font-size:.92rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bw-muted); }
@media (max-width:860px){ .bw-home .bw-video-row{ grid-template-columns:1fr; gap:36px; } }

@media (prefers-reduced-motion:reduce){
  .bw-home *{ transition:none !important; }
  .bw-bento a:hover img{ transform:none; }
}

/* ---- BENTO wide tile (city galleries) ---- */
.bw-bento .wide{ grid-column:span 2; }

/* ---- INTRO grid with image collage ---- */
.bw-introgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.bw-introimgs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bw-introimgs img{ width:100%; height:225px; object-fit:cover; border-radius:10px; display:block; }
.bw-introimgs img.big{ grid-column:1/-1; height:280px; }
@media (max-width:900px){ .bw-introgrid{ grid-template-columns:1fr; gap:36px; } .bw-introimgs img{ height:170px; } .bw-introimgs img.big{ height:220px; } }

/* ---- Trustindex colour correction (added 2026-07-31) ----------------------
   Widget style set is "dark-minimal" (all text #ffffff) but it sits on light
   sections, so it rendered white on white. Overrides use [data-set-id^="dark-"]
   so they still apply if the set is swapped for another dark variant, and
   !important because Trustindex injects its stylesheet after ours at runtime. */
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-widget-container,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-ai-summary-item,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-ten-rating-score{ color:#2a2a2a !important; }

.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-widget-container .ti-name,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-ai-summary-item .ti-name,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-footer .ti-name,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-footer,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-footer span,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-footer strong a,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-footer strong:not(.ti-rating-large),
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-footer-filter-text,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-rating-text,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-rating-text span,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-rating-text span strong,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-rating-text strong a,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-rating-text strong span,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-rating-text strong:not(.ti-rating-large){ color:#1c1c22 !important; }

.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-date,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-ai-summary-item .ti-date,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-verified-by-row{ color:#6b6b6b !important; }

/* "Read more" reads as a link rather than washed out grey */
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-read-more span,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-ai-summary-item .ti-read-more span{ color:#FF1616 !important; opacity:1 !important; }

/* the info icon is a CSS mask filled white, so it disappeared on a light background */
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-verified-by .ti-info-icon{ background-color:#6b6b6b !important; }

/* keep white where the background behind it is genuinely dark */
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-tooltip,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-verified-tooltip,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-verified-by-row[data-style="1"] > .ti-inner,
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-review-image .ti-more-image-count{ color:#ffffff !important; }
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-verified-by-row[data-style="1"] .ti-info-icon{ background-color:#ffffff !important; }

/* review cards need a visible edge now that the text is dark on a light panel */
.bw-trustindex .ti-widget[data-set-id^="dark-"] .ti-review-item .ti-inner{ background:#ffffff !important; border:1px solid #e4e4e4 !important; border-radius:10px !important; }

/* ============================================================
   PHOTO CARDS
   Replaces the long h3 + paragraph prose blocks. Each design
   point is now a photo with a one line caption, which is what
   the client asked for: less reading, more of the actual work.
   Every card is the same size so the captions line up across a
   row. Five cards read as three plus two, three read as one row.
   ============================================================ */
.bw-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px; margin-top:38px; }
.bw-cards .card{ display:flex; flex-direction:column; }
.bw-cards .shot{ position:relative; overflow:hidden; border-radius:10px; background:#ddd; aspect-ratio:4/3; }
.bw-cards .shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.bw-cards .card:hover .shot img{ transform:scale(1.05); }
.bw-cards h3{ margin:16px 0 0; font-size:1.16rem; line-height:1.3; color:var(--bw-heading); }
.bw-cards p{ margin:.45em 0 0; color:var(--bw-muted); font-size:.97rem; line-height:1.55; }

@media (max-width:959px){
  .bw-cards{ grid-template-columns:repeat(2,1fr); gap:22px 18px; }
}
@media (max-width:639px){
  .bw-cards{ grid-template-columns:1fr; gap:24px; }
}

/* the bento gallery now carries nine shots: one feature spanning 2x2 plus eight
   singles fills a four column grid exactly three rows deep */
@media (min-width:960px){ .bw-bento{ grid-auto-rows:200px; } }