/*=========================================
  CC CONNECT — module.css

  >>> EDIT ONLY THE CONTROL BLOCK BELOW 

  [token] = follows tokens.css. Replace the
            whole var() with a literal to
            detach just this module.
  [field] = set per instance from the
            Content or Styles tab

  Sits on a DARK background (image +
  overlay). Glass action cards above a
  light form panel.

  The form markup comes from HubSpot, so
  the last block restyles its classes.
=========================================*/

.cc-connect {

  /*--- Section ---*/
  --cn-pad-y:            var(--cc-section-pad-y);          /* [token] */
  --cn-fallback-bg:      var(--cc-navy-deep);              /* [token] */
  --cn-block-gap:        var(--cc-block-gap);              /* [token] */
  --cn-text-align:       center;                           /* [field] */
  --cn-block-inline:     auto;   /* auto = centered, 0 = flush left */

  /*--- Overlay ---*/
  --cn-overlay-color:    var(--cc-navy-deep);       /* [token] [field] */
  --cn-overlay-opacity:  0.82;                             /* [field] */

  /*--- Header ---*/
  --cn-header-max:       var(--cc-measure-tight);          /* [token] */
  --cn-eyebrow-size:     var(--cc-fs-eyebrow);             /* [token] */
  --cn-eyebrow-color:    var(--cc-red-light);       /* [token] [field] */
  --cn-eyebrow-track:    var(--cc-ls-eyebrow);             /* [token] */
  --cn-eyebrow-weight:   var(--cc-fw-bold);                /* [token] */
  --cn-eyebrow-gap:      1rem;

  --cn-heading-size:     var(--cc-fs-h2);                  /* [token] */
  --cn-heading-color:    var(--cc-white);           /* [token] [field] */
  --cn-heading-font:     var(--cc-font-heading);           /* [token] */
  --cn-heading-lh:       var(--cc-lh-tight);               /* [token] */

  --cn-intro-size:       var(--cc-fs-body);                /* [token] */
  --cn-intro-color:      var(--cc-text-light);      /* [token] [field] */
  --cn-intro-lh:         var(--cc-lh-loose);               /* [token] */
  --cn-intro-max:        var(--cc-measure);                /* [token] */
  --cn-intro-gap:        1.25rem;

  /*--- Card grid ---*/
  --cn-cols:             3;                                /* [field] */
  --cn-card-gap:         var(--cc-grid-gap);        /* [token] [field] */

  /*--- Action card (dark glass) ---*/
  /* Darker than --cc-glass-bg: these sit directly on
     the photo and need to read as a solid panel.    */
  --cn-card-bg:          rgba(7, 21, 49, 0.62);            /* [field] */
  --cn-card-bg-blur:     14px;
  --cn-card-border:      rgba(255, 255, 255, 0.14);        /* [field] */
  --cn-card-border-w:    1px;
  --cn-card-pad:         var(--cc-card-pad);               /* [token] */
  --cn-card-pad-sm:      var(--cc-card-pad-sm);            /* [token] */
  --cn-card-radius:      var(--cc-card-radius);            /* [token] */
  --cn-card-shadow:      var(--cc-shadow-dark);            /* [token] */

  --cn-card-title-size:  var(--cc-fs-h4);                  /* [token] */
  --cn-card-title-color: var(--cc-white);           /* [token] [field] */
  --cn-card-title-lh:    var(--cc-lh-snug);                /* [token] */
  --cn-card-title-gap:   0.75rem;

  --cn-card-text-size:   var(--cc-fs-body-sm);             /* [token] */
  --cn-card-text-color:  var(--cc-text-light);      /* [token] [field] */
  --cn-card-text-lh:     var(--cc-lh-body);                /* [token] */
  --cn-card-cta-gap:     1.75rem;

  /*--- Form panel (light) ---*/
  --cn-panel-bg:         var(--cc-white);           /* [token] [field] */
  --cn-panel-pad:        clamp(1.75rem, 4vw, 3.25rem);
  --cn-panel-radius:     var(--cc-card-radius);            /* [token] */
  --cn-panel-shadow:     var(--cc-shadow-lg);              /* [token] */
  --cn-panel-max:        980px;                            /* [field] */

  --cn-panel-heading-size:  var(--cc-fs-h3);               /* [token] */
  --cn-panel-heading-color: var(--cc-navy-deep);    /* [token] [field] */
  --cn-panel-heading-gap:   0.75rem;

  --cn-panel-text-size:  var(--cc-fs-body);                /* [token] */
  --cn-panel-text-color: var(--cc-text-muted);      /* [token] [field] */
  --cn-panel-text-lh:    var(--cc-lh-body);                /* [token] */
  --cn-panel-head-gap:   var(--cc-space-lg);               /* [token] */


  /*--- Rich text ---*/
  --cn-rt-gap:           1rem;
  --cn-rt-list-indent:   1.75rem;
  --cn-rt-list-gap:      0.625rem;
  --cn-check-color:      var(--cc-red);                    /* [token] */
  --cn-check-size:       1.05em;
  --cn-check-top:        0.05em;

  /*--- Closing block ---*/
  --cn-outro-max:        var(--cc-measure);                /* [token] */
  --cn-outro-heading-size:  var(--cc-fs-h3);               /* [token] */
  --cn-outro-heading-color: var(--cc-white);        /* [token] [field] */
  --cn-outro-heading-lh:    var(--cc-lh-heading);          /* [token] */
  --cn-outro-heading-gap:   1rem;
  --cn-outro-size:       var(--cc-fs-body);                /* [token] */
  --cn-outro-color:      var(--cc-text-light);      /* [token] [field] */
  --cn-outro-lh:         var(--cc-lh-loose);               /* [token] */

  /*--- Buttons ---*/
  --cn-btn-size:         var(--cc-btn-fs);                 /* [token] */
  --cn-btn-weight:       var(--cc-btn-fw);                 /* [token] */
  --cn-btn-pad:          var(--cc-btn-pad-y) var(--cc-btn-pad-x);  /* [token] */
  --cn-btn-radius:       var(--cc-btn-radius);             /* [token] */
  --cn-btn-lift:         var(--cc-btn-lift);               /* [token] */
  --cn-btn-border-w:     var(--cc-btn-border-w-strong);    /* [token] */
  --cn-btn-width:        100%;   /* desktop card button */

  /* Primary — filled red */
  --cn-btn1-bg:          var(--cc-red);             /* [token] [field] */
  --cn-btn1-bg-hover:    var(--cc-red-dark);               /* [token] */
  --cn-btn1-color:       var(--cc-white);                  /* [token] */

  /* Light — solid white on the dark card */
  --cn-btn2-bg:          var(--cc-white);                  /* [token] */
  --cn-btn2-bg-hover:    var(--cc-off-white);              /* [token] */
  --cn-btn2-color:       var(--cc-navy-deep);              /* [token] */

  /* Ghost — outlined on the dark card */
  --cn-btn3-bg:          var(--cc-btn-ghost-bg);           /* [token] */
  --cn-btn3-bg-hover:    var(--cc-btn-ghost-bg-hover);     /* [token] */
  --cn-btn3-color:       var(--cc-btn-ghost-color);        /* [token] */
  --cn-btn3-border:      var(--cc-btn-ghost-border);       /* [token] */

  /*--- Focus ring ---*/
  --cn-focus-color:      var(--cc-focus-color-dark);       /* [token] */
  --cn-focus-color-light: var(--cc-focus-color);           /* [token] */
  --cn-focus-width:      var(--cc-focus-width);            /* [token] */
  --cn-focus-offset:     var(--cc-focus-offset);           /* [token] */

  /*--- Motion ---*/
  --cn-ease:             var(--cc-ease);                   /* [token] */
}


/*--- Alignment variants ---*/
.cc-connect--align-center { --cn-text-align: center; --cn-block-inline: auto; }
.cc-connect--align-left   { --cn-text-align: left;   --cn-block-inline: 0; }


/*--- Form panel width variants ---*/
.cc-connect--form-narrow { --cn-panel-max: 720px; }
.cc-connect--form-wide   { --cn-panel-max: 980px; }
.cc-connect--form-full   { --cn-panel-max: none; }


/*=========================================
  >>> BELOW THIS LINE: STRUCTURE ONLY 
=========================================*/

.cc-connect {
  position: relative;
  isolation: isolate;
  padding-block: var(--cn-pad-y);
  background: var(--cn-fallback-bg);
  overflow: hidden;
}


/*--- Background layers ---*/
.cc-connect__bg,
.cc-connect__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Locked: center center / cover / no-repeat on every device */
.cc-connect__bg {
  z-index: -2;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cc-connect__overlay {
  z-index: -1;
  background: var(--cn-overlay-color);
  opacity: var(--cn-overlay-opacity);
}

/* No image chosen — solid background, no see-through overlay */
.cc-connect--no-image .cc-connect__overlay { opacity: 1; }


/*--- Header ---*/
.cc-connect__header {
  max-width: var(--cn-header-max);
  margin-inline: var(--cn-block-inline);
  text-align: var(--cn-text-align);
}

.cc-connect__eyebrow {
  display: block;
  margin-bottom: var(--cn-eyebrow-gap);
  font-size: var(--cn-eyebrow-size);
  font-weight: var(--cn-eyebrow-weight);
  letter-spacing: var(--cn-eyebrow-track);
  text-transform: uppercase;
  color: var(--cn-eyebrow-color);
}

.cc-connect__heading {
  margin: 0;
  font-family: var(--cn-heading-font);
  font-size: var(--cn-heading-size);
  line-height: var(--cn-heading-lh);
  color: var(--cn-heading-color);
}

.cc-connect__intro {
  max-width: var(--cn-intro-max);
  margin-inline: var(--cn-block-inline);
  margin-top: var(--cn-intro-gap);
  font-size: var(--cn-intro-size);
  line-height: var(--cn-intro-lh);
  color: var(--cn-intro-color);
}


/*--- Rich text (shared) ---*/
.cc-connect__rt p { margin: 0; }
.cc-connect__rt p + p,
.cc-connect__rt ul,
.cc-connect__rt ol { margin-top: var(--cn-rt-gap); }

.cc-connect__rt > ul:first-child,
.cc-connect__rt > ol:first-child { margin-top: 0; }

.cc-connect__rt ol {
  margin-bottom: 0;
  padding-left: var(--cn-rt-list-indent);
  text-align: left;
}

.cc-connect__rt li + li { margin-top: var(--cn-rt-list-gap); }
.cc-connect__rt strong { font-weight: 700; }

.cc-connect__rt a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/*--- Bulleted lists render as check marks ---*/
.cc-connect__rt ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  text-align: left;
}

.cc-connect__rt ul > li {
  position: relative;
  padding-left: var(--cn-rt-list-indent);
}

.cc-connect__rt ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--cn-check-top);
  width: var(--cn-check-size);
  height: var(--cn-check-size);
  background-color: var(--cn-check-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4l4.3 4.29 9.3-9.29a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4l4.3 4.29 9.3-9.29a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/*--- Card grid ---*/
.cc-connect__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cn-card-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}


/*--- Action card (dark glass) ---*/
.cc-connect__card {
  display: flex;
  flex: 0 1 calc((100% - (var(--cn-cols) - 1) * var(--cn-card-gap)) / var(--cn-cols));
  flex-direction: column;
  padding: var(--cn-card-pad);
  border: var(--cn-card-border-w) solid var(--cn-card-border);
  border-radius: var(--cn-card-radius);
  background: var(--cn-card-bg);
  box-shadow: var(--cn-card-shadow);
  backdrop-filter: blur(var(--cn-card-bg-blur));
  -webkit-backdrop-filter: blur(var(--cn-card-bg-blur));
  text-align: left;
}

.cc-connect__card-title {
  margin: 0 0 var(--cn-card-title-gap);
  font-family: inherit;
  font-size: var(--cn-card-title-size);
  font-weight: 700;
  line-height: var(--cn-card-title-lh);
  color: var(--cn-card-title-color);
}

.cc-connect__card-text,
.cc-connect__card-text p,
.cc-connect__card-text li {
  font-size: var(--cn-card-text-size);
  line-height: var(--cn-card-text-lh);
  color: var(--cn-card-text-color);
}

/* margin-top: auto pins the button to the bottom, so
   buttons line up across cards in the same row however
   long the title runs. */
.cc-connect__card-cta {
  margin-top: auto;
  padding-top: var(--cn-card-cta-gap);
}

.cc-connect__card-cta .cc-connect__btn {
  width: var(--cn-btn-width);
}


/*--- Form panel ---*/
.cc-connect__panel {
  max-width: var(--cn-panel-max);
  margin-inline: auto;
  padding: var(--cn-panel-pad);
  border-radius: var(--cn-panel-radius);
  background: var(--cn-panel-bg);
  box-shadow: var(--cn-panel-shadow);
  text-align: left;
}

.cc-connect__panel-head {
  margin-bottom: var(--cn-panel-head-gap);
}

.cc-connect__panel-heading {
  margin: 0 0 var(--cn-panel-heading-gap);
  font-family: var(--cn-heading-font);
  font-size: var(--cn-panel-heading-size);
  line-height: var(--cc-lh-heading);
  color: var(--cn-panel-heading-color);
}

.cc-connect__panel-text,
.cc-connect__panel-text p {
  font-size: var(--cn-panel-text-size);
  line-height: var(--cn-panel-text-lh);
  color: var(--cn-panel-text-color);
}

/*--- Kill HubSpot's own form padding ---*/
.cc-connect__form {
  --hsf-background__padding: 0;
  --hsf-default-background__padding: 0;
}


/*--- Closing block ---*/
.cc-connect__closing {
  max-width: var(--cn-outro-max);
  margin-inline: auto;
  text-align: center;
}

.cc-connect__closing-heading {
  margin: 0 0 var(--cn-outro-heading-gap);
  font-family: var(--cn-heading-font);
  font-size: var(--cn-outro-heading-size);
  line-height: var(--cn-outro-heading-lh);
  color: var(--cn-outro-heading-color);
}

.cc-connect__closing-heading:last-child { margin-bottom: 0; }

.cc-connect__outro,
.cc-connect__outro p,
.cc-connect__outro li {
  font-size: var(--cn-outro-size);
  line-height: var(--cn-outro-lh);
  color: var(--cn-outro-color);
}


/*--- Buttons ---*/
.cc-connect__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cn-btn-pad);
  font-size: var(--cn-btn-size);
  font-weight: var(--cn-btn-weight);
  line-height: 1;
  text-align: center;
  border: var(--cn-btn-border-w) solid transparent;
  border-radius: var(--cn-btn-radius);
  text-decoration: none;
  transition: all var(--cn-ease);
}

.cc-connect__btn--primary {
  background: var(--cn-btn1-bg);
  border-color: var(--cn-btn1-bg);
  color: var(--cn-btn1-color);
}

.cc-connect__btn--primary:hover {
  background: var(--cn-btn1-bg-hover);
  border-color: var(--cn-btn1-bg-hover);
  color: var(--cn-btn1-color);
  transform: translateY(var(--cn-btn-lift));
}

.cc-connect__btn--light {
  background: var(--cn-btn2-bg);
  border-color: var(--cn-btn2-bg);
  color: var(--cn-btn2-color);
}

.cc-connect__btn--light:hover {
  background: var(--cn-btn2-bg-hover);
  border-color: var(--cn-btn2-bg-hover);
  color: var(--cn-btn2-color);
  transform: translateY(var(--cn-btn-lift));
}

.cc-connect__btn--ghost {
  background: var(--cn-btn3-bg);
  border-color: var(--cn-btn3-border);
  color: var(--cn-btn3-color);
}

.cc-connect__btn--ghost:hover {
  background: var(--cn-btn3-bg-hover);
  border-color: var(--cn-btn3-color);
  color: var(--cn-btn3-color);
  transform: translateY(var(--cn-btn-lift));
}

.cc-connect__btn:focus-visible {
  outline: var(--cn-focus-width) solid var(--cn-focus-color);
  outline-offset: var(--cn-focus-offset);
  border-radius: var(--cn-btn-radius);
}


/*--- Vertical rhythm ---
  Kept last so these margins win over the
  margin resets in the blocks above.      */
.cc-connect__header { margin-bottom: var(--cn-block-gap); }

.cc-connect__panel,
.cc-connect__closing {
  margin-top: var(--cn-block-gap);
}


/*--- Motion preference ---*/
@media (prefers-reduced-motion: reduce) {
  .cc-connect__btn:hover,
}


/*--- Responsive ---*/
@media (max-width: 767px) {
  /* Header centres on small screens, whatever the
     desktop alignment field says.                 */
  .cc-connect--align-left {
    --cn-text-align:   center;
    --cn-block-inline: auto;
  }
}

@media (max-width: 575px) {
  .cc-connect__card { padding: var(--cn-card-pad-sm); }
  }
}