/* ================================
   HERO DOTS — CSS (optimised)
   Static gradient version
================================ */

/* Base section */
.c-hero-dots{
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  margin: 0 !important;
  padding: 0 !important;
  background-image: linear-gradient(
    to right bottom,
    rgb(76, 72, 249) 0%,
    rgb(76, 72, 249) 40%,
    rgb(211, 158, 253) 100%
  ) !important;
}

/* Zero-size sprite holding the shared halftone shapes + gradients */
.c-hero-dots__sprite{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* DnD rows add a global 8px margin; remove it around the hero */
.dnd-row:has(.c-hero-dots){
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Fallback only for browsers without :has() */
@supports not selector(:has(*)){
  .dnd-row .c-hero-dots{
    display: block;
    margin-top: -8px !important;
    margin-bottom: -8px !important;
  }
}

/* Full-bleed background layer (decorative, never interactive) */
.c-hero-dots__bg{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Halftone frames — fade is baked into the SVG gradient, so no mask needed */
.c-hero-dots__halftone{
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(280px, 34vw, 680px);
  z-index: 1;
}

.c-hero-dots__halftone--left{
  left: calc(50% - 50vw);
}

.c-hero-dots__halftone--right{
  right: calc(50% - 50vw);
}

.c-hero-dots__halftone-svg{
  position: absolute;
  top: -6%;
  height: 115%;
  width: auto;
  display: block;
}

.c-hero-dots__halftone--left .c-hero-dots__halftone-svg{
  left: -18%;
}

.c-hero-dots__halftone--right .c-hero-dots__halftone-svg{
  right: -18%;
  transform: rotate(180deg);
  transform-origin: center;
}

/* Content layer */
.c-hero-dots__inner{
  position: relative;
  z-index: 2;
  max-width: 1250px;
  margin: 0 auto;
  padding: clamp(64px, 7vw, 110px) 20px 40px;
  text-align: center;
}

.c-hero-dots__content{
  max-width: 1020px;
  margin: 0 auto;
}

/* Eyebrow + title + subhead.
   Scoped with .c-hero-dots (same specificity as the old .s-br26 overrides)
   so one rule set replaces the previous duplicated pairs. */
.c-hero-dots .c-hero-dots__eyebrow{
  margin: 0 0 14px;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

.c-hero-dots .c-hero-dots__title{
  margin: 0;
  color: #ffffff !important;
  font-weight: 600 !important;
  line-height: 1.15;
  font-size: 48px;
  text-wrap: balance;
}

.c-hero-dots .c-hero-dots__subhead{
  max-width: 780px;
  margin: 26px auto 0;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.55;
  font-weight: 400 !important;
  text-wrap: balance;
}

/* CTAs */
.c-hero-dots__ctas{
  margin-top: 45px;
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.c-hero-dots .c-hero-dots__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
  padding: 14px 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  min-width: 160px;
}

/* Colour + weight for the button and everything inside it (text span, icon) */
.c-hero-dots .c-hero-dots__btn,
.c-hero-dots .c-hero-dots__btn *{
  font-weight: 600 !important;
}

.c-hero-dots .c-hero-dots__btn--primary,
.c-hero-dots .c-hero-dots__btn--primary *{
  color: #ffffff !important;
}

.c-hero-dots .c-hero-dots__btn--secondary,
.c-hero-dots .c-hero-dots__btn--secondary *{
  color: #000000 !important;
}

.c-hero-dots .c-hero-dots__btn--primary{
  background: transparent;
  border-color: rgba(255,255,255,0.95);
}

.c-hero-dots .c-hero-dots__btn--primary:hover,
.c-hero-dots .c-hero-dots__btn--primary:focus-visible{
  background: rgba(255,255,255,0.10);
  border-color: #ffffff;
}

.c-hero-dots .c-hero-dots__btn--secondary{
  background: #ffffff;
  border-color: transparent;
}

.c-hero-dots .c-hero-dots__btn--secondary:hover,
.c-hero-dots .c-hero-dots__btn--secondary:focus-visible{
  background: rgba(255,255,255,0.92);
}

.c-hero-dots__btn:hover{
  transform: translateY(-2px);
}

/* Under CTAs */
.c-hero-dots__under-ctas{
  padding-top: 100px;
}

.c-hero-dots .c-hero-dots__eyebrow--logos{
  margin: 0 0 16px;
  font-size: 20px;
  letter-spacing: unset;
  text-transform: unset;
}

/* Static logo row */
.c-hero-dots__logo-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 6px 0 0;
}

.c-hero-dots__logo{
  flex: 0 0 auto;
  width: 130px;
  height: 40px;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 1100px){
  .c-hero-dots__halftone{
    display: none !important;
  }
}

@media (max-width: 700px){
  .c-hero-dots .c-hero-dots__title{
    font-size: 38px;
  }

  .c-hero-dots .c-hero-dots__subhead{
    font-size: 16px !important;
    line-height: 1.5;
    margin-top: 14px;
  }

  .c-hero-dots__logo{
    width: 120px;
    height: 36px;
  }
}

@media (max-width: 600px){
  .c-hero-dots__under-ctas{
    display: none !important;
  }

  .c-hero-dots__inner{
    padding-top: calc(clamp(64px, 7vw, 110px) - 20px) !important;
  }

  .c-hero-dots__ctas{
    gap: 10px;
  }

  .c-hero-dots .c-hero-dots__btn{
    min-width: 0;
    padding: 11px 18px;
    font-size: 0.8em;
    gap: 8px;
  }

  .c-hero-dots__btn-icon{
    font-size: 0.8em;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .c-hero-dots .c-hero-dots__btn{
    transition: none;
  }
}