/* Brightr Hero — scoped component, no theme styles overridden. */
.brightr-hero, .brightr-hero * { box-sizing: border-box; }
.brightr-hero { --bh-navy:#102f40; --bh-blue:#24a9e4; --bh-ice:#87cef1; --bh-white:#fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:#fff; margin:0; background:var(--bh-navy); width:100%; isolation:isolate; }
.brightr-hero__inner { max-width:1500px; margin:0 auto; min-height:640px; display:grid; grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr); }
.brightr-hero__content { display:flex; flex-direction:column; justify-content:center; padding:70px clamp(30px,5.5vw,94px) 72px clamp(30px,6vw,100px); position:relative; z-index:2; background: var(--bh-navy); }
.brightr-hero__eyebrow { font-size:12px; line-height:1.45; text-transform:uppercase; font-weight:800; letter-spacing:2.5px; color:#fff; margin:0 0 10px; }
.brightr-hero__areas { font-size:11px; line-height:1.6; letter-spacing:1.5px; text-transform:uppercase; color:var(--bh-ice); font-weight:700; margin:0 0 24px; }
.brightr-hero__title { color:#fff; font-size:clamp(34px,3.55vw,56px); line-height:1.055; letter-spacing:-1.8px; font-weight:790; margin:0; max-width:590px; }
.brightr-hero__title span { color:#44c0f5; }
.brightr-hero__description { max-width:500px; line-height:1.52; font-size:clamp(15px,1.25vw,18px); color:#e5f0f6; margin:20px 0 26px; }
.brightr-hero__proof { display:flex; flex-wrap:wrap; gap:12px 18px; padding:0; list-style:none; margin:0 0 29px; }
.brightr-hero__proof li { display:flex; align-items:center; gap:9px; font-size:12px; line-height:1.2; color:#eff8fc; font-weight:550; }
.brightr-hero__proof svg { flex:none; width:25px; height:25px; stroke:#45bff3; stroke-width:1.8; fill:none; }
.brightr-hero__buttons { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.brightr-hero__cta { text-align:center; text-decoration:none!important; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 25px; min-height:55px; border:2px solid transparent; border-radius:6px; font-family:inherit; font-size:15px; font-weight:750; line-height:1.2; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; box-shadow:none; }
.brightr-hero__cta:hover { transform:translateY(-2px); }
.brightr-hero__cta:focus-visible {outline:3px solid #ffd34c;outline-offset:3px;}
.brightr-hero__cta--primary {color:#fff!important; background:#24a9e4; min-width:210px; }
.brightr-hero__cta--primary:hover { background:#118bc8; box-shadow:0 6px 24px #001a2a55; }
.brightr-hero__cta--secondary { color:#143143!important; background:#fff; min-width:200px; }
.brightr-hero__cta--secondary:hover {background:#eaf9ff;}

/* Unified background color matching navy text section */
.brightr-hero__media { position:relative; min-width:0; overflow:hidden; background:var(--bh-navy); min-height:640px; }

/* WIDE FEATHERED GRADIENT BLEED LAYER */
.brightr-hero__gradient-bleed {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px; /* Extra wide spread to completely dissolve any boundary line */
  height: 100%;
  z-index: 2; 
  pointer-events: none; 
  background: linear-gradient(
    to right, 
    rgba(16, 47, 64, 1.0) 0%, 
    rgba(16, 47, 64, 0.85) 15%, 
    rgba(16, 47, 64, 0.5) 40%, 
    rgba(16, 47, 64, 0.15) 70%, 
    rgba(16, 47, 64, 0.0) 100%
  );
}

.brightr-hero__comparison { --split:50%; position:absolute; inset:0; overflow:hidden; user-select:none; touch-action:pan-y; z-index: 1; }
.brightr-hero__photo { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:51% center; display:block; pointer-events:none; z-index: 1; }
.brightr-hero__photo--after { clip-path:inset(0 0 0 var(--split)); }
.brightr-hero__labels {position:absolute;top:29px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;z-index:5;}
.brightr-hero__labels span {background:#092c3adf;color:#fff;letter-spacing:.8px;text-transform:uppercase;font-size:11px;font-weight:800;border-radius:40px;padding:9px 15px;}
.brightr-hero__labels span:last-child {background:#eaf9ff;color:#006bb2;}
.brightr-hero__line { position:absolute; z-index:5; left:var(--split); top:0; height:100%; width:2px; background:#ffffff; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 8px #0005; }
.brightr-hero__handle { position:absolute; top:50%; left:var(--split); transform:translate(-50%,-50%); z-index:6; pointer-events:none; display:flex; justify-content:center; align-items:center; border-radius:50%; width:54px; height:54px; background:#fff; box-shadow:0 3px 16px #031e3066; color:#113446; font-size:25px; font-weight:800; line-height:1; }
.brightr-hero__range {position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; border:0; opacity:0; cursor:ew-resize; z-index:7; appearance:none; -webkit-appearance:none; touch-action:pan-y; }
.brightr-hero__range:focus-visible + .brightr-hero__focus-ring {outline:3px solid #ffe074;outline-offset:-6px;}
.brightr-hero__focus-ring {position:absolute;inset:0;pointer-events:none;z-index:6;}
.brightr-hero__photo-note { position:absolute; bottom:13px; right:15px; font-size:10px; color:#fff; background:#082e40a8; padding:4px 8px; border-radius:3px; pointer-events:none; z-index:6; }
.brightr-hero__business-note {background:#eaf7fc;color:#143446;font-size:14px;padding:16px 20px;border-radius:8px;margin-top:17px;max-width:500px;}
.brightr-hero__business-note[hidden] {display:none;}

@media (max-width: 1100px) and (min-width: 761px) {
 .brightr-hero__inner{grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr);}
 .brightr-hero__content{padding:46px 34px;}
 .brightr-hero__title{font-size:clamp(31px,4vw,44px)}
 .brightr-hero__cta{min-width:unset;flex:1;}
 .brightr-hero__proof{gap:10px;}
}
@media (max-width:760px) {
 .brightr-hero__inner {display:flex;flex-direction:column;min-height:0;}
 .brightr-hero__media{order:0;min-height:0;height:clamp(260px,77vw,410px);}
 
 /* MOBILE FEATHERED GRADIENT BLEED LAYER */
 .brightr-hero__gradient-bleed {
   top: auto;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 180px; /* Deep vertical feathering */
   background: linear-gradient(
     to top, 
     rgba(16, 47, 64, 1.0) 0%, 
     rgba(16, 47, 64, 0.85) 15%, 
     rgba(16, 47, 64, 0.5) 40%, 
     rgba(16, 47, 64, 0.15) 70%, 
     rgba(16, 47, 64, 0.0) 100%
   );
 }

 .brightr-hero__content{order:1;padding:28px 22px 34px;}
 .brightr-hero__eyebrow {font-size:11px;letter-spacing:1.7px;margin-bottom:6px;}
 .brightr-hero__areas {font-size:9px;letter-spacing:.9px;margin-bottom:14px;}
 .brightr-hero__title {font-size:clamp(32px,8.1vw,45px);letter-spacing:-1.25px;line-height:1.1;}
 .brightr-hero__description {font-size:14px;margin:15px 0 20px;}
 .brightr-hero__proof {gap:11px 13px;margin-bottom:20px;}
 .brightr-hero__proof li {font-size:11px;gap:6px;}
 .brightr-hero__proof svg {width:19px;height:19px;}
 .brightr-hero__buttons{gap:9px;}
 .brightr-hero__cta{min-width:0;flex:1;min-height:52px;font-size:14px;padding:12px 10px;}
 .brightr-hero__labels{top:17px;left:16px;right:16px;}
 .brightr-hero__labels span{font-size:10px;padding:7px 12px;}
 .brightr-hero__handle{width:46px;height:46px;}
}
@media (max-width:355px){.brightr-hero__cta{flex-basis:100%;}.brightr-hero__title{font-size:31px}.brightr-hero__proof{flex-direction:column;}}
@media (prefers-reduced-motion: reduce){.brightr-hero__cta{transition:none;}}

/* Styled Before/After Labels with Elegant Borders */
.brightr-hero__labels { 
  position: absolute; 
  top: 29px; 
  left: 24px; 
  right: 24px; 
  display: flex; 
  justify-content: space-between; 
  pointer-events: none; 
  z-index: 5; 
}

.brightr-hero__labels span { 
  background: rgba(16, 47, 64, 0.85); /* Rich semi-translucent navy backdrop */
  color: #fff; 
  letter-spacing: 1px; 
  text-transform: uppercase; 
  font-size: 11px; 
  font-weight: 800; 
  border-radius: 40px; 
  padding: 8px 16px; 
  
  /* The new pop-out touch */
  border: 1.5px solid rgba(135, 206, 241, 0.4); /* Soft ice-blue glowing border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Soft depth shadow */
  backdrop-filter: blur(4px); /* Modern glassmorphism blur effect */
}

/* Optional custom flair for the 'After' label to pop slightly more if desired */
.brightr-hero__labels span:last-child { 
  background: rgba(36, 169, 228, 0.85); /* Brighter brand blue tint */
  border-color: rgba(255, 255, 255, 0.6); 
  color: #fff; 
}