/* ============================================================
   Byford Carpet Cleaning — Premium Homepage (2026 redesign)
   Scoped under body.bp  |  loaded after styles.css on index.html
   Fonts: Cormorant Garamond (headings), Inter (body),
          Montserrat (nav / buttons / uppercase labels)
   Brand: logo navy + logo red
   ============================================================ */

body.bp {
  /* ---- Brand palette (from Byford logo) ---- */
  --bp-red: #e2384b;
  --bp-red-2: #f04a5d;
  --bp-red-dark: #c01f31;

  --bp-navy-900: #060f24;   /* deepest section bg */
  --bp-navy-850: #0a1733;
  --bp-navy-800: #0d1c3f;
  --bp-navy-700: #122a59;
  --bp-navy-600: #1b3a78;
  --bp-royal:    #1d4ed8;
  --bp-blue:     #2563eb;

  --bp-blue-on-light: #2563eb;  /* accent words on light bg */
  --bp-blue-on-dark:  #7fb0ff;  /* accent words on dark bg  */

  --bp-ink: #16243d;            /* main dark text */
  --bp-body: #475467;           /* body grey */
  --bp-body-light: rgba(255,255,255,0.82);

  --bp-light: #f4f7fc;          /* light premium bg */
  --bp-pale-blue: #e9f1fd;      /* pale blue bg */
  --bp-white: #ffffff;

  --bp-fh: 'Cormorant Garamond', Georgia, serif;   /* headings */
  --bp-fb: 'Inter', system-ui, sans-serif;          /* body */
  --bp-fl: 'Montserrat', sans-serif;                /* labels/nav/buttons */

  --bp-shadow-card: 0 18px 45px -20px rgba(13,28,63,0.35);
  --bp-shadow-soft: 0 10px 30px -12px rgba(13,28,63,0.22);
  --bp-radius: 22px;
  --bp-radius-lg: 30px;

  font-family: var(--bp-fb);
  color: var(--bp-ink);
  background: var(--bp-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.bp main { display: block; }

/* Reusable wrappers */
.bp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.bp-section { position: relative; padding: 92px 0; overflow: hidden; }
.bp-section--tight { padding: 70px 0; }

/* Section base backgrounds */
.bp-bg-light { background: linear-gradient(180deg,#ffffff 0%, var(--bp-light) 100%); }
.bp-bg-pale  { background: linear-gradient(180deg, var(--bp-pale-blue) 0%, #f3f8ff 100%); }
.bp-bg-dark  {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,0.28), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(29,78,216,0.22), transparent 60%),
    linear-gradient(160deg, var(--bp-navy-850) 0%, var(--bp-navy-800) 45%, var(--bp-navy-900) 100%);
  color: #fff;
}

/* Soft decorative wave / dots layers */
.bp-wave-top, .bp-wave-bottom { position:absolute; left:0; width:100%; line-height:0; z-index:1; pointer-events:none; }
.bp-wave-top { top:-1px; }
.bp-wave-bottom { bottom:-1px; }
.bp-section > .bp-wrap { position: relative; z-index: 2; }

.bp-dots {
  position:absolute; width:180px; height:180px; z-index:1; pointer-events:none; opacity:.5;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 18px 18px;
}
.bp-bg-light .bp-dots, .bp-bg-pale .bp-dots { color: rgba(37,99,235,0.20); }
.bp-bg-dark .bp-dots { color: rgba(255,255,255,0.12); }

/* ---- Typography ---- */
body.bp h1, body.bp h2, body.bp h3, body.bp h4 { font-family: var(--bp-fh); color: var(--bp-ink); font-weight: 600; line-height: 1.08; }
body.bp .bp-bg-dark h1, body.bp .bp-bg-dark h2, body.bp .bp-bg-dark h3, body.bp .bp-bg-dark h4,
body.bp .bp-footer h1, body.bp .bp-footer h2, body.bp .bp-footer h3, body.bp .bp-footer h4 { color:#fff; }

.bp-eyebrow {
  font-family: var(--bp-fl); font-weight: 700; font-size: .82rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bp-red); display:inline-block; margin-bottom: 14px;
}
.bp-bg-dark .bp-eyebrow { color: var(--bp-red-2); }
.bp-eyebrow--red, .bp-bg-dark .bp-eyebrow--red { color: var(--bp-red-2); }

.bp-h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); margin-bottom: 10px; letter-spacing:.2px; }
/* heading colors (override shared styles.css h1-h6 navy) */
body.bp .bp-h2, body.bp .bp-feature-title { color: var(--bp-ink); }
body.bp .bp-hero-title,
body.bp .bp-bg-dark .bp-h2,
body.bp .bp-bg-dark .bp-feature-title { color:#fff; }
.bp-lead { font-family: var(--bp-fb); font-size: 1.05rem; line-height: 1.75; color: var(--bp-body); max-width: 720px; }
.bp-bg-dark .bp-lead { color: var(--bp-body-light); }

.bp-accent { color: var(--bp-blue-on-light); }
.bp-bg-dark .bp-accent { color: var(--bp-blue-on-dark); }
.bp-accent-red { color: var(--bp-red); }
.bp-bg-dark .bp-accent-red { color: var(--bp-red-2); }

.bp-center { text-align:center; }
.bp-center .bp-lead { margin-left:auto; margin-right:auto; }

/* Red divider with dots (under headings) */
.bp-divider { display:flex; align-items:center; gap:7px; margin: 16px 0 26px; }
.bp-center .bp-divider { justify-content:center; }
.bp-divider span { display:block; height:3px; width:46px; border-radius:3px; background: var(--bp-red); }
.bp-divider i { width:5px; height:5px; border-radius:50%; background: var(--bp-red); opacity:.75; }
.bp-divider i:last-child { opacity:.4; }

/* ============================================================
   BUTTONS — premium pill, glass, glow
   ============================================================ */
.bp-btn {
  --g1:#2563eb; --g2:#1d4ed8;
  position: relative; display: inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--bp-fl); font-weight: 600; font-size: .95rem; letter-spacing:.02em;
  color:#fff; text-decoration:none; cursor:pointer; border:none;
  padding: 15px 28px; border-radius: 50px; line-height:1;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 10px 24px -8px rgba(37,99,235,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, filter .28s ease;
  overflow: hidden; isolation:isolate;
}
.bp-btn::before { /* sheen */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-130%); transition: transform .6s ease;
}
.bp-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(37,99,235,0.75), inset 0 1px 0 rgba(255,255,255,0.3); }
.bp-btn:hover::before { transform: translateX(130%); }
.bp-btn:active { transform: translateY(-1px); }
.bp-btn svg { width:18px; height:18px; flex:0 0 auto; }
.bp-btn--lg { padding: 18px 34px; font-size: 1rem; }

/* Red (urgent) */
.bp-btn--red { --g1: var(--bp-red-2); --g2: var(--bp-red-dark); box-shadow: 0 10px 24px -8px rgba(226,56,75,0.6), inset 0 1px 0 rgba(255,255,255,0.25); }
.bp-btn--red:hover { box-shadow: 0 18px 34px -10px rgba(226,56,75,0.8), inset 0 1px 0 rgba(255,255,255,0.3); }

/* Glass (on dark hero) */
.bp-btn--glass {
  background: linear-gradient(135deg, rgba(59,130,246,0.30), rgba(29,78,216,0.32));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.bp-btn--glass:hover { background: linear-gradient(135deg, rgba(59,130,246,0.45), rgba(29,78,216,0.5)); }

/* Ghost / outline-light */
.bp-btn--ghost {
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.35); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.bp-btn--ghost:hover { background: rgba(255,255,255,0.16); }

/* ============================================================
   HEADER
   ============================================================ */
body.bp .bp-header {
  position: sticky; top:0; z-index: 1000;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(13,28,63,0.07);
  box-shadow: 0 6px 24px -16px rgba(13,28,63,0.4);
}
.bp-header-inner { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 22px; height: 84px; }
.bp-logo { display:flex; align-items:center; justify-self:start; }
.bp-logo img { height: 56px; width:auto; display:block; }
.bp-nav { justify-self:center; }
.bp-header-inner > .bp-call-btn { justify-self:end; }
.bp-burger { justify-self:end; grid-column:3; }
.bp-nav .bp-call-btn { display:none; } /* in-nav call btn only shows in mobile menu */
.bp-nav-list { display:flex; align-items:center; gap: 4px; list-style:none; margin:0; padding:0; }
.bp-nav-list > li { position: relative; }
.bp-nav-list a {
  font-family: var(--bp-fl); font-weight:600; font-size:.92rem; color: var(--bp-ink);
  text-decoration:none; padding: 10px 16px; border-radius: 40px; display:inline-flex; align-items:center; gap:6px;
  transition: color .2s ease, background .2s ease;
}
.bp-nav-list a:hover { color: var(--bp-royal); background: rgba(37,99,235,0.08); }
.bp-nav-list .bp-caret { width:12px; height:12px; transition: transform .25s ease; }
.bp-has-dropdown:hover .bp-caret { transform: rotate(180deg); }
.bp-dropdown {
  position:absolute; top: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(8px);
  min-width: 290px; background:#fff; border-radius: 18px; padding: 10px;
  box-shadow: var(--bp-shadow-card); border:1px solid rgba(13,28,63,0.06);
  opacity:0; visibility:hidden; transition: opacity .22s ease, transform .22s ease; list-style:none;
}
.bp-has-dropdown:hover .bp-dropdown { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
/* invisible bridge so the dropdown stays open while the cursor crosses the gap */
.bp-dropdown::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; background:transparent; }
.bp-dropdown li a { display:block; padding: 11px 16px; border-radius: 12px; font-size:.9rem; width:100%; }
.bp-dropdown li a:hover { background: var(--bp-pale-blue); }

.bp-call-btn {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-family: var(--bp-fl); color:#fff; padding: 11px 22px 11px 14px; border-radius: 50px;
  background: linear-gradient(135deg, var(--bp-red-2), var(--bp-red-dark));
  box-shadow: 0 12px 26px -10px rgba(226,56,75,0.7), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bp-call-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(226,56,75,0.85), inset 0 1px 0 rgba(255,255,255,0.35); }
.bp-call-btn .bp-call-icon {
  width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background: rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35);
}
.bp-call-btn .bp-call-icon svg { width:18px; height:18px; }
.bp-call-btn .bp-call-txt { display:flex; flex-direction:column; line-height:1.15; }
.bp-call-btn .bp-call-top { font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; opacity:.92; }
.bp-call-btn .bp-call-num { font-size:1.02rem; font-weight:700; letter-spacing:.02em; }

.bp-burger { display:none; background:none; border:none; cursor:pointer; padding:8px; margin-left:4px; }
.bp-burger span { display:block; width:26px; height:2.5px; background: var(--bp-ink); border-radius:3px; margin:5px 0; transition: .3s; }
body.bp.bp-menu-open .bp-burger span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
body.bp.bp-menu-open .bp-burger span:nth-child(2){ opacity:0; }
body.bp.bp-menu-open .bp-burger span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   ICON CHIPS (blue glass circle, white icon w/ red accent)
   ============================================================ */
.bp-ichip {
  position:relative; z-index:5;
  display:grid; place-items:center; flex:0 0 auto; border-radius:50%;
  background: linear-gradient(150deg, var(--bp-royal), var(--bp-navy-700));
  box-shadow: 0 10px 22px -8px rgba(29,78,216,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  color:#fff;
}
.bp-ichip svg { width:54%; height:54%; }
.bp-ichip .ac { color: var(--bp-red-2); }   /* red accent stroke/fill */
.bp-ichip--sm { width:46px; height:46px; }
.bp-ichip--md { width:64px; height:64px; }
.bp-ichip--lg { width:74px; height:74px; }

/* On dark bg: glassy white version */
.bp-ichip--glass {
  background: linear-gradient(150deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  border:1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 26px -12px rgba(0,0,0,0.6);
}


/* ============================================================
   HERO
   ============================================================ */
.bp-hero { position: relative; color:#fff; padding: 84px 0 96px; overflow:hidden; }
.bp-hero::before { /* subtle animated gradient overlay */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(circle at 30% 50%, rgba(59,130,246,0.15), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(226,56,75,0.12), transparent 50%);
  animation: bp-hero-glow 12s ease-in-out infinite;
}
.bp-hero::after { /* premium light orbiting smoothly around the hero */
  content:""; position:absolute; z-index:1; pointer-events:none;
  width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; top:-25%; left:-15%;
  background: radial-gradient(circle, rgba(120,170,255,0.20), rgba(120,170,255,0.08) 35%, transparent 62%);
  filter: blur(50px); will-change: transform;
  animation: bp-hero-orbit 22s linear infinite;
}
@keyframes bp-hero-glow {
  0%, 100% { opacity:.6; transform: scale(1) translateY(0); }
  50% { opacity:.85; transform: scale(1.08) translateY(-8px); }
}
@keyframes bp-hero-orbit {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(55vw, 8vh); }
  50%  { transform: translate(48vw, 36vh); }
  75%  { transform: translate(-8vw, 26vh); }
  100% { transform: translate(0, 0); }
}
.bp-hero .bp-hero-inner {
  position: relative; z-index:3; display:grid; grid-template-columns: 1.05fr 1fr;
  gap: 56px; align-items:center;
}
.bp-hero-title { font-size: clamp(2.6rem, 5.4vw, 4.3rem); font-weight:600; letter-spacing:.4px; margin-bottom: 8px; }
.bp-hero-text { font-family: var(--bp-fb); font-size: 1.12rem; line-height: 1.8; color: rgba(255,255,255,0.86); max-width: 540px; margin: 18px 0 30px; }
.bp-hero-text b { color:#fff; font-weight:700; }
.bp-hero-text .bp-accent { font-weight: 600; }
.bp-hero-btns { display:flex; flex-wrap:wrap; gap: 14px; }

/* premium glowing video frame */
.bp-video-frame {
  position: relative; border-radius: 26px; padding: 10px;
  background: linear-gradient(150deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}
.bp-video-frame::after { /* outer glow */
  content:""; position:absolute; inset:-2px; border-radius: 28px; z-index:-1;
  background: radial-gradient(60% 60% at 50% 30%, rgba(59,130,246,0.55), transparent 70%);
  filter: blur(28px); opacity:.85;
}
.bp-video-inner { position: relative; border-radius: 18px; overflow:hidden; aspect-ratio: 16/9; background:#04122e; }
.bp-video-inner video, .bp-video-inner img { width:100%; height:100%; object-fit:cover; display:block; }

/* Light video frame (for light sections) */
.bp-frame-light {
  position: relative; border-radius: 24px; padding: 10px; background:#fff;
  border:1px solid rgba(13,28,63,0.08); box-shadow: var(--bp-shadow-card);
}
.bp-frame-light::after {
  content:""; position:absolute; inset:-10px; border-radius: 30px; z-index:-1;
  background: linear-gradient(135deg, rgba(37,99,235,0.22), rgba(226,56,75,0.16)); filter: blur(18px); opacity:.7;
}
.bp-frame-light .bp-video-inner { background:#04122e; }

/* ============================================================
   VIDEO PLAY BUTTON OVERLAY (coded)
   ============================================================ */
.bp-playwrap { position:relative; cursor:pointer; }
.bp-playwrap .bp-poster { width:100%; height:100%; object-fit:cover; display:block; }
.bp-play-overlay {
  position:absolute; inset:0; display:grid; place-items:center; z-index:3;
  background: linear-gradient(180deg, rgba(6,15,36,0.05), rgba(6,15,36,0.35));
  transition: background .3s ease;
}
.bp-playwrap:hover .bp-play-overlay { background: linear-gradient(180deg, rgba(6,15,36,0.1), rgba(6,15,36,0.45)); }
.bp-play-btn {
  position: relative; width: 86px; height:86px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--bp-red-2), var(--bp-red-dark));
  box-shadow: 0 16px 40px -10px rgba(226,56,75,0.7), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.bp-play-btn svg { width: 34px; height:34px; margin-left:5px; fill:#fff; }
.bp-play-btn::before, .bp-play-btn::after { /* ripple rings */
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,0.55);
  animation: bp-ripple 2.6s ease-out infinite;
}
.bp-play-btn::after { animation-delay: 1.3s; }
@keyframes bp-ripple { 0% { transform: scale(1); opacity:.7; } 100% { transform: scale(1.9); opacity:0; } }
.bp-playwrap:hover .bp-play-btn { transform: scale(1.12); box-shadow: 0 22px 50px -10px rgba(226,56,75,0.85), 0 0 0 8px rgba(255,255,255,0.12); }
.bp-playwrap.is-playing .bp-play-overlay { opacity:0; visibility:hidden; }
.bp-playwrap video { width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   PROOF BAND
   ============================================================ */
.bp-proof { position: relative; z-index:5; margin-top: -42px; }
.bp-proof-card {
  background: linear-gradient(150deg, rgba(13,28,63,0.92), rgba(10,23,51,0.92));
  border:1px solid rgba(255,255,255,0.12); border-radius: var(--bp-radius);
  box-shadow: 0 30px 60px -25px rgba(6,15,36,0.7); backdrop-filter: blur(10px);
  padding: 26px 18px; display:grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.bp-proof-item { display:flex; align-items:center; gap:14px; justify-content:center; padding: 6px 8px; }
.bp-proof-item + .bp-proof-item { border-left: 1px solid rgba(255,255,255,0.1); }
.bp-proof-meta { display:flex; flex-direction:column; line-height:1.1; }
.bp-proof-num { font-family: var(--bp-fh); font-size: 1.9rem; font-weight:700; color:#fff; }
.bp-proof-label { font-family: var(--bp-fl); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,0.7); margin-top:3px; }

/* ============================================================
   WHY WORK WITH US
   ============================================================ */
.bp-why-head { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; margin-bottom: 52px; }
.bp-why-media { display:grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.bp-why-media img { width:100%; height:100%; object-fit:cover; border-radius: 18px; box-shadow: var(--bp-shadow-card); }
.bp-why-media .bp-why-tall { aspect-ratio: 3/4; }
.bp-why-cards { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.bp-vcard {
  background:#fff; border:1px solid rgba(13,28,63,0.07); border-radius: var(--bp-radius);
  padding: 30px 24px; box-shadow: var(--bp-shadow-soft); text-align:center;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.bp-vcard:hover { transform: translateY(-8px); box-shadow: var(--bp-shadow-card); }
.bp-vcard .bp-ichip { margin: 0 auto 18px; }
.bp-vcard h4 { font-size: 1.45rem; margin-bottom: 6px; }
.bp-vcard .bp-divider { margin: 10px auto 14px; justify-content: center; }
.bp-vcard p { font-family: var(--bp-fb); font-size:.93rem; color: var(--bp-body); line-height:1.65; }

/* ============================================================
   CORE / SPECIALIST SERVICE CARDS
   ============================================================ */
.bp-cards-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 46px; }
.bp-scard {
  position: relative; background:#fff; border-radius: var(--bp-radius); overflow:hidden;
  border:1px solid rgba(13,28,63,0.07); box-shadow: var(--bp-shadow-soft);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.bp-scard:hover { transform: translateY(-10px); box-shadow: var(--bp-shadow-card); }
.bp-scard-media { position: relative; aspect-ratio: 16/11; overflow:hidden; }
.bp-scard-media img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.bp-scard:hover .bp-scard-media img { transform: scale(1.07); }
.bp-scard-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(6,15,36,0.45)); }
.bp-scard-body { position:relative; padding: 44px 26px 28px; display:flex; flex-direction:column; flex:1; }
.bp-scard .bp-ichip {
  position:absolute; left: 22px; top:-30px; z-index:6; border:3px solid #fff;
}
.bp-scard-body h3 { font-size: 1.6rem; margin-bottom: 4px; }
.bp-scard-body .bp-divider { margin: 8px 0 14px; }
.bp-scard-body p { font-family: var(--bp-fb); font-size:.95rem; color: var(--bp-body); line-height:1.65; margin-bottom: 22px; flex:1; }
.bp-scard-body .bp-btn { width:100%; }

/* specialist row (smaller pill cards) */
.bp-spec { margin-top: 56px; text-align:center; }
.bp-spec-label { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom: 24px; }
.bp-spec-label span { height:2px; width:54px; background: var(--bp-red); border-radius:2px; }
.bp-spec-label b { font-family: var(--bp-fl); font-weight:700; letter-spacing:.04em; color: var(--bp-ink); font-size:1.02rem; }
.bp-spec-row { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.bp-spec-card {
  display:flex; align-items:center; gap:16px; text-align:left; text-decoration:none;
  background:#fff; border:1px solid rgba(13,28,63,0.08); border-radius: 60px; padding: 14px 22px 14px 14px;
  box-shadow: var(--bp-shadow-soft); transition: transform .3s ease, box-shadow .3s ease;
}
.bp-spec-card:hover { transform: translateY(-5px); box-shadow: var(--bp-shadow-card); }
.bp-spec-card .bp-stext { display:flex; flex-direction:column; }
.bp-spec-card .bp-stext b { font-family: var(--bp-fl); font-size:.95rem; color: var(--bp-ink); font-weight:700; }
.bp-spec-card .bp-arrow { margin-left:auto; color: var(--bp-red); flex:0 0 auto; transition: transform .3s ease; }
.bp-spec-card:hover .bp-arrow { transform: translateX(5px); }
.bp-spec-card .bp-arrow svg { width:20px; height:20px; }

/* ============================================================
   HOW OUR CLEANING WORKS (dark) + PROCESS cards
   ============================================================ */
.bp-step-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 50px; }
.bp-step {
  position: relative; border-radius: var(--bp-radius); padding: 40px 24px 28px; text-align:center;
  background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 20px 40px -24px rgba(0,0,0,0.7);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.bp-step:hover { transform: translateY(-8px); }
.bp-step-num {
  position:absolute; top:-20px; left:50%; transform: translateX(-50%);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family: var(--bp-fl); font-weight:700; color:#fff; font-size:1.05rem;
  background: linear-gradient(135deg, var(--bp-red-2), var(--bp-red-dark));
  box-shadow: 0 10px 22px -8px rgba(226,56,75,0.8);
}
.bp-step .bp-ichip { margin: 8px auto 18px; }
.bp-step h4 { font-size: 1.4rem; color:#fff; margin-bottom: 6px; }
.bp-step .bp-divider { margin: 8px auto 12px; }
.bp-step p { font-family: var(--bp-fb); font-size:.92rem; color: rgba(255,255,255,0.78); line-height:1.6; }

/* ============================================================
   FEATURE SECTIONS (image + text)
   ============================================================ */
.bp-feature-inner { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.bp-feature-inner.reverse .bp-feature-text { order:2; }
.bp-feature-img { position: relative; }
.bp-feature-img img { width:100%; height:auto; border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow-card); }
.bp-feature-img::before {
  content:""; position:absolute; inset:-14px -14px 18px 18px; border-radius: var(--bp-radius-lg); z-index:-1;
  background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(226,56,75,0.12));
  filter: blur(8px);
}
.bp-feature-title { font-size: clamp(2.1rem,4vw,3.1rem); margin-bottom: 6px; }
.bp-feature-text > p { font-family: var(--bp-fb); color: var(--bp-body); line-height:1.8; font-size: 1.02rem; margin: 16px 0; max-width: 520px; }
.bp-bg-dark .bp-feature-text > p { color: var(--bp-body-light); }
.bp-check-list { list-style:none; margin: 22px 0 30px; padding:0; display:grid; gap: 13px; }
.bp-check-list li { display:flex; align-items:center; gap: 12px; font-family: var(--bp-fb); font-size: 1rem; color: var(--bp-ink); }
.bp-bg-dark .bp-check-list li, .bp-bg-pale .bp-check-list li { color: var(--bp-ink); }
.bp-bg-dark .bp-check-list li { color:#eaf1ff; }
.bp-check-ic { flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(150deg, var(--bp-royal), var(--bp-navy-700)); }
.bp-check-ic svg { width:14px; height:14px; stroke:#fff; }


/* ============================================================
   HOT WATER EXTRACTION PROCESS (dark)
   ============================================================ */
.bp-process-video { max-width: 900px; margin: 0 auto 50px; }
.bp-process-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.bp-pcard {
  border-radius: var(--bp-radius); padding: 32px 22px; text-align:center;
  background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 20px 40px -24px rgba(0,0,0,0.7);
  transition: transform .3s ease;
}
.bp-pcard:hover { transform: translateY(-8px); }
.bp-pcard .bp-ichip { margin: 0 auto 16px; }
.bp-pcard h4 { font-size: 1.32rem; color:#fff; margin-bottom: 6px; }
.bp-pcard .bp-divider { margin: 8px auto 12px; }
.bp-pcard p { font-family: var(--bp-fb); font-size:.9rem; color: rgba(255,255,255,0.78); line-height:1.6; }

/* ============================================================
   REVIEWS (light)
   ============================================================ */
.bp-review-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 46px; }
.bp-review-card {
  position: relative; background:#fff; border-radius: var(--bp-radius); padding: 34px 30px 30px;
  box-shadow: var(--bp-shadow-soft); border:1px solid rgba(13,28,63,0.06); overflow:hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.bp-review-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background: linear-gradient(180deg, var(--bp-royal), var(--bp-red)); }
.bp-review-card:hover { transform: translateY(-8px); box-shadow: var(--bp-shadow-card); }
.bp-review-stars { display:flex; gap:3px; margin-bottom: 14px; }
.bp-review-stars svg { width:20px; height:20px; fill: var(--bp-red); }
.bp-review-text { font-family: var(--bp-fb); font-style: italic; color: var(--bp-ink); line-height:1.75; font-size:1.02rem; margin-bottom: 18px; }
.bp-review-div { width:42px; height:3px; border-radius:3px; background: var(--bp-red); margin-bottom: 14px; }
.bp-review-name { font-family: var(--bp-fl); font-weight:700; color: var(--bp-ink); font-size:1rem; }
.bp-review-loc { font-family: var(--bp-fb); color: var(--bp-body); font-size:.88rem; }
.bp-quote-mark { position:absolute; right:24px; top:18px; font-family: var(--bp-fh); font-size:5rem; line-height:1; color: rgba(37,99,235,0.1); }

/* ============================================================
   SERVICE COVERAGE (light)
   ============================================================ */
.bp-area-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 46px; }

/* Premium service-coverage banner (shared look with inner pages) */
.bp-cov-cta { position:relative; margin-top: 44px; border-radius: var(--bp-radius-lg); overflow:hidden;
  padding: 44px 48px; color:#fff; display:grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items:center;
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(37,99,235,0.5), transparent 60%),
    radial-gradient(560px 300px at 100% 100%, rgba(226,56,75,0.28), transparent 60%),
    linear-gradient(150deg, var(--bp-navy-850), var(--bp-navy-900));
  box-shadow: var(--bp-shadow-card); }
.bp-cov-cta-main { display:flex; align-items:flex-start; gap: 22px; }
.bp-cov-cta-main .bp-ichip { flex:0 0 auto; }
.bp-cov-cta-text .bp-eyebrow { color: var(--bp-blue-on-dark); }
body.bp .bp-cov-cta-text h3 { color:#fff; font-family: var(--bp-fh); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height:1.12; margin: 6px 0 10px; }
.bp-cov-cta-text p { font-family: var(--bp-fb); color: rgba(255,255,255,0.82); line-height:1.7; font-size:.98rem; margin:0; }
.bp-cov-cta-text p strong { color:#fff; }
.bp-cov-cta-side { display:flex; flex-direction:column; gap: 22px; }
.bp-cov-stats { display:flex; gap: 14px; }
.bp-cov-stat { flex:1; background: rgba(255,255,255,0.06); border:1px solid rgba(127,176,255,0.22); border-radius: 16px;
  padding: 16px 14px; text-align:center; }
.bp-cov-stat strong { display:block; font-family: var(--bp-fh); font-size: 1.7rem; color:#fff; line-height:1; }
.bp-cov-stat span { display:block; margin-top:6px; font-family: var(--bp-fl); font-size:.74rem; letter-spacing:.03em;
  text-transform:uppercase; color: rgba(255,255,255,0.66); }
.bp-cov-cta-side .bp-btn { width:100%; }
@media (max-width: 980px) {
  .bp-cov-cta { grid-template-columns: 1fr; gap: 30px; padding: 38px 30px; }
}
.bp-area-card {
  position: relative; background:#fff; border-radius: var(--bp-radius); overflow:hidden;
  border:1px solid rgba(13,28,63,0.07); box-shadow: var(--bp-shadow-soft);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; display:flex; flex-direction:column;
}
.bp-area-card:hover { transform: translateY(-10px); box-shadow: var(--bp-shadow-card); }
.bp-area-media { position: relative; aspect-ratio: 16/10; overflow:hidden; }
.bp-area-media img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.bp-area-card:hover .bp-area-media img { transform: scale(1.07); }
.bp-area-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(6,15,36,0.5)); }
.bp-area-body { position:relative; padding: 42px 26px 28px; display:flex; flex-direction:column; flex:1; }
.bp-area-card .bp-ichip { position:absolute; left:22px; top:-28px; z-index:6; border:3px solid #fff; }
.bp-area-body h3 { font-size: 1.5rem; margin-bottom: 3px; }
.bp-area-sub { font-family: var(--bp-fl); font-weight:700; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color: var(--bp-red); margin-bottom: 10px; }
.bp-area-body > p { font-family: var(--bp-fb); color: var(--bp-body); line-height:1.6; font-size:.95rem; margin-bottom: 16px; }
.bp-cov-list { list-style:none; margin:0; padding:0; display:grid; gap: 11px; border-top:1px solid rgba(13,28,63,0.08); padding-top: 16px; }
.bp-cov-list li { display:flex; align-items:center; gap: 12px; font-family: var(--bp-fb); font-size:.93rem; color: var(--bp-ink); }
.bp-cov-ic { flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background: var(--bp-pale-blue); color: var(--bp-royal); }
.bp-cov-ic.red { background: rgba(226,56,75,0.12); color: var(--bp-red); }
.bp-cov-ic svg { width:16px; height:16px; }

.bp-cov-banner {
  position: relative; margin-top: 40px; border-radius: var(--bp-radius); overflow:hidden; text-align:center;
  padding: 38px 24px; color:#fff;
  background:
    radial-gradient(700px 300px at 80% 0%, rgba(37,99,235,0.45), transparent 60%),
    linear-gradient(135deg, var(--bp-navy-800), var(--bp-navy-700));
  box-shadow: var(--bp-shadow-card);
}
body.bp .bp-cov-banner h3 { color:#fff; font-size: 1.9rem; margin-bottom: 4px; }
.bp-cov-banner p { font-family: var(--bp-fb); color: rgba(255,255,255,0.85); }
.bp-cov-summary { margin-top: 30px; background:#fff; border-radius: var(--bp-radius); border:1px solid rgba(13,28,63,0.07);
  box-shadow: var(--bp-shadow-soft); padding: 30px; display:flex; align-items:center; gap: 24px; flex-wrap:wrap; justify-content:center; text-align:center; }
.bp-cov-summary p { font-family: var(--bp-fb); color: var(--bp-body); line-height:1.7; max-width: 640px; margin:0; }
.bp-cov-summary p strong { color: var(--bp-ink); }

/* ============================================================
   NEED A QUOTE / EMERGENCY (dark)
   ============================================================ */
.bp-cta-head { text-align:center; max-width: 760px; margin: 0 auto 12px; }
.bp-cta-title { font-size: clamp(2.2rem,4.6vw,3.4rem); }
.bp-cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin: 28px 0 50px; }
.bp-cta-video { max-width: 860px; margin: 0 auto; }

/* ============================================================
   FOOTER
   ============================================================ */
body.bp .bp-footer {
  position: relative; color: rgba(255,255,255,0.8); overflow:hidden;
  background:
    radial-gradient(800px 400px at 90% -10%, rgba(37,99,235,0.25), transparent 60%),
    radial-gradient(700px 360px at 0% 110%, rgba(226,56,75,0.12), transparent 60%),
    linear-gradient(160deg, var(--bp-navy-850), var(--bp-navy-900));
  padding: 70px 0 0;
}
.bp-footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.bp-footer-brand img { height: 64px; width:auto; margin-bottom: 18px; }
.bp-footer-brand p { font-family: var(--bp-fb); font-size:.95rem; line-height:1.7; color: rgba(255,255,255,0.7); max-width: 320px; margin-bottom: 22px; }
.bp-trust-row { display:flex; flex-wrap:wrap; gap: 10px; }
.bp-trust { display:inline-flex; align-items:center; gap:8px; font-family: var(--bp-fl); font-size:.78rem; font-weight:600;
  padding: 8px 14px; border-radius: 40px; color:#eaf1ff;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); }
.bp-trust svg { width:15px; height:15px; }
.bp-trust .ac { color: var(--bp-red-2); }
.bp-footer h4 { font-family: var(--bp-fl); font-size: .95rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom: 20px; position:relative; padding-bottom: 12px; }
.bp-footer h4::after { content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:3px; background: var(--bp-red); }
.bp-footer ul { list-style:none; margin:0; padding:0; display:grid; gap: 11px; }
.bp-footer ul a { font-family: var(--bp-fb); color: rgba(255,255,255,0.72); text-decoration:none; font-size:.92rem; transition: color .2s ease, padding .2s ease; display:inline-flex; align-items:center; gap:8px; }
.bp-footer ul a:hover { color:#fff; padding-left: 4px; }
.bp-footer-contact li { display:flex; align-items:flex-start; gap: 12px; font-family: var(--bp-fb); font-size:.92rem; color: rgba(255,255,255,0.78); }
.bp-footer-contact .bp-ichip { margin-top:2px; }
.bp-footer-contact a { color: rgba(255,255,255,0.78); text-decoration:none; }
.bp-footer-contact a:hover { color:#fff; }
.bp-social-row { display:flex; gap: 12px; margin-top: 4px; }
.bp-social-row a { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); transition: transform .25s ease, background .25s ease; }
.bp-social-row a:hover { transform: translateY(-4px); background: var(--bp-royal); }
.bp-social-row svg { width:20px; height:20px; }
.bp-footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding: 22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.bp-footer-bottom p { font-family: var(--bp-fb); font-size:.85rem; color: rgba(255,255,255,0.6); margin:0; }
.bp-footer-bottom-links { display:flex; gap:20px; }
.bp-footer-bottom-links a { font-family: var(--bp-fb); font-size:.85rem; color: rgba(255,255,255,0.6); text-decoration:none; }
.bp-footer-bottom-links a:hover { color:#fff; }
.bp-footer-credit { text-align:center; padding: 14px 0 22px; border-top:1px solid rgba(255,255,255,0.08); }
.bp-footer-credit p { font-family: var(--bp-fb); font-size:.82rem; color: rgba(255,255,255,0.5); margin:0; }
.bp-footer-credit a { color: rgba(255,255,255,0.66); text-decoration:underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .bp-hero .bp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .bp-hero-media { max-width: 620px; }
  .bp-why-head { grid-template-columns: 1fr; }
  .bp-why-cards { grid-template-columns: repeat(2,1fr); }
  .bp-step-grid, .bp-process-grid { grid-template-columns: repeat(2,1fr); }
  .bp-cards-3, .bp-review-grid, .bp-area-grid { grid-template-columns: repeat(2,1fr); }
  .bp-spec-row { grid-template-columns: 1fr; }
  .bp-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Remove all white space around the header on mobile.
     Header stays sticky (in normal flow) so there is no gap above OR below it.
     Override the old styles.css body padding-top that created the top gap. */
  body.bp { margin: 0 !important; padding-top: 0 !important; }
  body.bp .bp-header { position: sticky; top: 0; left: 0; right: 0; }
  
  .bp-nav, .bp-call-btn { display:none; }
  .bp-burger { display:block; margin-left:auto; }
  /* mobile slide-down menu - anchored to right side */
  .bp-nav.bp-nav-mobile {
    display:block; position: fixed; top: 84px; right: 0; width: 80%; max-width: 320px;
    height: calc(100vh - 84px); z-index: 999;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(12px);
    transform: translateX(100%); transition: transform .35s ease; padding: 22px; overflow-y: auto;
    box-shadow: -8px 0 24px rgba(13, 28, 63, 0.15);
  }
  body.bp.bp-menu-open .bp-nav.bp-nav-mobile { transform: translateX(0); }
  .bp-nav-mobile .bp-nav-list { flex-direction:column; align-items:stretch; gap:4px; }
  .bp-nav-mobile .bp-nav-list a { font-size:1.05rem; padding:14px 16px; border-radius:12px; }
  .bp-nav-mobile .bp-dropdown { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 0 14px; min-width:0; }
  .bp-nav-mobile .bp-caret { display:none; }
  .bp-nav-mobile .bp-call-btn { display:inline-flex; margin-top: 18px; width:100%; justify-content:center; }
}

@media (max-width: 680px) {
  .bp-section { padding: 64px 0; }
  .bp-proof-card { grid-template-columns: repeat(2,1fr); gap: 18px; }
  .bp-proof-item:nth-child(odd) { border-left:none; }
  .bp-proof-item { border-left:none !important; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:14px; }
  .bp-why-cards, .bp-step-grid, .bp-process-grid, .bp-cards-3, .bp-review-grid, .bp-area-grid { grid-template-columns: 1fr; }
  .bp-why-media { grid-template-columns: 1fr 1fr; }
  .bp-feature-inner { grid-template-columns: 1fr; gap: 36px; }
  .bp-feature-inner.reverse .bp-feature-text { order:0; }
  .bp-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .bp-play-btn { width: 68px; height:68px; }
  .bp-play-btn svg { width: 26px; height:26px; }
  .bp-hero-btns .bp-btn { flex: 1 1 100%; }
  .bp-footer-bottom { flex-direction:column; text-align:center; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bp-play-btn::before, .bp-play-btn::after { animation:none; }
  .bp-hero::before, .bp-hero::after { animation:none; }
  body.bp .bp-btn, body.bp .bp-scard, body.bp .bp-vcard, body.bp .bp-area-card, body.bp .bp-review-card { transition: none; }
}