/*
 * Hero and shared footer, responsive without clipping or device-specific
 * duplicate content. Uses one DOM across desktop, tablet and phone.
 */

/* The branding remains in the footer's top-left. The only Connect copy
 * visible is the heading, with the social links at the very bottom. */
body.cx-unified-chrome .footer {
  position:relative!important;
  padding-bottom:clamp(83px,8vw,110px)!important;
}
body.cx-unified-chrome .footer .footer-inner {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  text-align:left!important;
  max-width:100%!important;
  gap:clamp(15px,2vw,24px)!important;
}
body.cx-unified-chrome .footer .footer-brand {
  order:0!important;
  display:inline-flex!important;
  align-self:flex-start!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  max-width:100%!important;
  margin:0!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
body.cx-unified-chrome .footer .footer-center {
  order:1!important;
  align-self:flex-start!important;
  text-align:left!important;
  max-width:100%!important;
  margin:0!important;
}
body.cx-unified-chrome .footer .footer-inner > small {
  order:2!important;
  position:static!important;
  align-self:flex-start!important;
  margin:0!important;
  max-width:100%!important;
  text-align:left!important;
}
body.cx-unified-chrome .footer .footer-connect {
  order:3!important;
  align-self:stretch!important;
  margin:clamp(18px,3vw,34px) 0 0!important;
  padding:clamp(24px,3vw,36px) 0 0!important;
  width:100%!important;
  max-width:100%!important;
  border-top:1px solid rgba(178,162,200,.2)!important;
  border-bottom:0!important;
  text-align:center!important;
}
body.cx-unified-chrome .footer .footer-connect :is(
  .footer-connect-eyebrow,.footer-connect-description
) {
  display:none!important;
}
body.cx-unified-chrome .footer .footer-connect-title {
  font-size:clamp(31px,3.6vw,52px)!important;
  line-height:1.14!important;
  margin:0!important;
  overflow-wrap:break-word!important;
}
/* The social links are always one horizontal row. Each column takes the
 * same share of the width, and the entire row may be aligned by the designer.
 * A phone does not have to squeeze five full-sized desktop icons into place. */
body.cx-unified-chrome .footer .footer-connect-socials {
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:auto!important;
  align-items:start!important;
  align-content:start!important;
  justify-items:center!important;
  justify-content:space-evenly!important;
  width:min(100%,900px)!important;
  max-width:100%!important;
  margin:clamp(18px,3vw,30px) auto 0!important;
  padding:0!important;
  gap:clamp(3px,1.4vw,20px)!important;
}
body.cx-unified-chrome .footer .footer-connect-socials .connect-social-link {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-direction:column!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  padding:0!important;
  gap:clamp(4px,.9vw,9px)!important;
}
body.cx-unified-chrome .footer .footer-connect-socials .social-icon {
  width:clamp(30px,5vw,59px)!important;
  height:clamp(30px,5vw,59px)!important;
  flex:0 0 auto!important;
}
body.cx-unified-chrome .footer .footer-connect-socials .social-icon img {
  display:block!important;
  width:clamp(22px,3.5vw,41px)!important;
  height:clamp(22px,3.5vw,41px)!important;
  object-fit:contain!important;
}
body.cx-unified-chrome .footer .footer-connect-socials .social-label {
  display:block!important;
  max-width:100%!important;
  font-size:clamp(9px,.95vw,12px)!important;
  line-height:1.25!important;
  letter-spacing:.02em!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
/* Administrator access is a quiet, transparent footer-corner link.
 * Keep the existing small/link nodes so saved Site Designer IDs are stable. */
body.cx-unified-chrome .footer .studio-footer-link {
  position:absolute!important;
  inset:auto clamp(13px,2.7vw,35px) clamp(14px,2vw,26px) auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:calc(100% - 30px)!important;
  min-height:35px!important;
  margin:0!important;
  padding:7px 13px!important;
  color:#cfc2df!important;
  background:transparent!important;
  border:1px solid rgba(194,176,215,.3)!important;
  border-radius:999px!important;
  box-shadow:none!important;
  font:500 clamp(10px,.95vw,12px)/1.35 var(--sans)!important;
  letter-spacing:.04em!important;
  text-transform:lowercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  opacity:.8;
  z-index:4!important;
}
body.cx-unified-chrome .footer .studio-footer-link:hover,
body.cx-unified-chrome .footer .studio-footer-link:focus-visible {
  background:rgba(185,163,213,.12)!important;
  color:#fff4ff!important;
  opacity:1;
}
/* Fluid desktop heading. The saved desktop maximum is respected. */
body.cx-homepage.cx-public-page main .hero .hero-title {
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  font-size:clamp(32px,5.7vw,var(--cx-hero-title,76px))!important;
  line-height:1.11!important;
  overflow:visible!important;
  white-space:normal!important;
}
body.cx-homepage.cx-public-page main .hero .hero-title-main,
body.cx-homepage.cx-public-page main .hero .hero-title-sub {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-size:inherit!important;
  line-height:inherit!important;
}
body.cx-homepage.cx-public-page main .hero .hero-copy {
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}
body.cx-homepage.cx-public-page main .hero .hero-background,
body.cx-homepage.cx-public-page main .hero .hero-bg-img {
  max-width:100%!important;
}
body.cx-homepage.cx-public-page main .hero .hero-bg-img {
  object-fit:contain!important;
  object-position:right center!important;
}


/* The artwork stays behind the quote on every screen. Its right edge is
 * anchored so the butterfly remains on the right as the viewport changes. */
@media(max-width:900px) {
  body.cx-homepage.cx-public-page main .hero {
    display:block!important;
    position:relative!important;
    height:auto!important;
    min-height:clamp(430px,60vw,620px)!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-background {
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-background .hero-bg-img {
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:right center!important;
    opacity:.68!important;
    filter:saturate(.8) brightness(.72)!important;
  }
  body.cx-homepage.cx-public-page main .hero::before {
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:
      linear-gradient(90deg,rgba(17,22,35,.89) 0%,rgba(17,22,35,.72) 39%,rgba(17,22,35,.30) 74%,rgba(17,22,35,.08) 100%),
      linear-gradient(0deg,rgba(17,22,35,.32),transparent 40%)!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-shell {
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    grid-column:auto!important;
    grid-row:auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:calc(100% - 34px)!important;
    height:auto!important;
    min-height:clamp(430px,60vw,620px)!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-copy {
    width:100%!important;
    max-width:min(100%,760px)!important;
    padding:clamp(55px,8vw,85px) 0!important;
    text-align:center!important;
    overflow:visible!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-title {
    font-size:clamp(29px,6vw,54px)!important;
    line-height:1.14!important;
    margin:clamp(12px,2.5vw,22px) 0!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-desc {
    display:block!important;
    max-width:min(100%,650px)!important;
    max-height:none!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
    line-clamp:unset!important;
    margin-inline:auto!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-kicker,
  body.cx-homepage.cx-public-page main .hero .hero-overline {
    white-space:normal!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-footnote {
    display:none!important;
  }
}

@media(max-width:600px) {
  body.cx-homepage.cx-public-page main .hero,
  body.cx-homepage.cx-public-page main .hero .hero-shell {
    min-height:clamp(430px,115vw,590px)!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-title {
    font-size:clamp(27px,7.65vw,37px)!important;
    letter-spacing:-.018em!important;
    line-height:1.15!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-shell {
    width:calc(100% - 30px)!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-copy {
    padding:clamp(48px,12vw,72px) 0!important;
  }
  body.cx-homepage.cx-public-page main .hero .hero-background .hero-bg-img {
    width:100%!important;
    height:100%!important;
    opacity:.58!important;
  }
  body.cx-homepage.cx-public-page main .hero::before {
    background:
      linear-gradient(90deg,rgba(17,22,35,.77) 0%,rgba(17,22,35,.61) 53%,rgba(17,22,35,.16) 100%),
      linear-gradient(0deg,rgba(17,22,35,.28),transparent 45%)!important;
  }
  body.cx-unified-chrome .footer {
    padding-bottom:75px!important;
  }
  body.cx-unified-chrome .footer .footer-inner {
    width:calc(100% - 30px)!important;
  }
  body.cx-unified-chrome .footer .footer-brand {
    align-self:flex-start!important;
    justify-content:flex-start!important;
    text-align:left!important;
  }
  body.cx-unified-chrome .footer .footer-connect-socials {
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:clamp(2px,1vw,8px)!important;
  }
  body.cx-unified-chrome .footer .footer-connect-socials .social-icon {
    width:clamp(31px,9.4vw,43px)!important;
    height:clamp(31px,9.4vw,43px)!important;
  }
  body.cx-unified-chrome .footer .footer-connect-socials .social-icon img {
    width:clamp(22px,6.9vw,31px)!important;
    height:clamp(22px,6.9vw,31px)!important;
  }
  body.cx-unified-chrome .footer .footer-connect-socials .social-label {
    font-size:clamp(8px,2.45vw,11px)!important;
  }
  body.cx-unified-chrome .footer .studio-footer-link {
    right:13px!important;
    bottom:14px!important;
    min-height:32px!important;
    font-size:10px!important;
  }
}