/* ===================================================================
 * UpperBelt - custom overrides
 * Loaded after the theme stylesheets (base / vendor / main).
 * =================================================================== */

/* -------------------------------------------------------------------
 * ## info section: offers, consultation & domain vault
 * ------------------------------------------------------------------- */
.info-offer {
  text-align: center;
}

.info-offer h3 {
  font-family: "metropolis-semibold", sans-serif;
  font-size: 2.4rem;
  line-height: 1.3;
  color: #FFFFFF;
  margin-bottom: 1.8rem;
}

.info-offer > p {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* large circular icon badge */
.info-offer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(198, 15, 55, 0.08);
  color: #c60e37ff;
  font-size: 3.6rem;
  margin-bottom: 2.4rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.info-offer:hover .info-offer__icon {
  background-color: rgba(198, 15, 55, 0.18);
  border-color: #c60e37ff;
}

.info-offer .btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 5.4rem;
  line-height: 1.5;
  padding: 1rem 2.4rem;
  margin: 1.2rem 0 0 0;
  white-space: normal;
  max-width: 100%;
}

.info-offer .btn i {
  font-size: 1.8rem;
  line-height: 1;
  margin-right: .9rem;
}

.info-offer .btn .btn__logo {
  width: auto;
  height: 1.9rem;
  margin-right: .9rem;
  vertical-align: middle;
}

/* EveryExpert logo rendered as a consistently-sized icon in the social lists */

/* home page social bar - mirrors .home-social i (36px box / 20px glyph) */
.home-social a .btn__logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 8px;
  box-sizing: border-box;
  object-fit: contain;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

/* "Find Us On" list - matches .info-social i exactly:
   3.6rem wide × 2.4rem tall float, glyph left-aligned, nudged down .3rem
   (Font Awesome core is display:inline-block with line-height:1, no centering) */
.info-social a .btn__logo {
  float: left;
  position: relative;
  top: .3rem;
  width: 3.6rem;
  height: 2.4rem;
  object-fit: contain;
  object-position: left center;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.home-social a:hover .btn__logo,
.home-social a:focus .btn__logo,
.info-social a:hover .btn__logo,
.info-social a:focus .btn__logo {
  opacity: 0.85;
}

@media only screen and (max-width: 1400px) {
  .home-social a .btn__logo {
    width: 32px;
    height: 32px;
    padding: 7px;
  }
}

/* keep social labels on one line - "Twitter / X" contains spaces and the
   home label is a shrink-to-fit absolutely positioned box, so it would wrap */
.home-social span,
.info-social span {
  white-space: nowrap;
}

/* -------------------------------------------------------------------
 * ## home logo
 *    The wordmark is very wide (~5.26:1). At its fixed 48px height it
 *    grows to ~252px and runs into the top-left info-toggle (and its
 *    "More Info" label) on small screens. Scale it by width, letting the
 *    height follow, so it stays responsive and clear of the button.
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
  .home-logo img {
    width: 34vw;
    max-width: 150px;
    height: auto;
  }
}

/* -------------------------------------------------------------------
 * ## home: two pathways, each with its own CTA
 *    Paragraph 1 pairs with the waitlist "Notify Me" form (our own
 *    products); paragraph 2 pairs with a "Book a Consultation" button
 *    (our services) copied from the info page. Side by side with a
 *    hairline divider on wide screens, stacked on smaller ones.
 * ------------------------------------------------------------------- */
.home-content__pathways {
  margin-top: 6.6rem;
}

.home-pathway p {
  margin: 0;
}

.home-pathway .home-content__subscribe {
  margin-top: 2.4rem;
}

/* "Book a Consultation" — same treatment as .info-offer .btn so the
   EveryExpert logo and label render exactly like the info page */
.home-pathway__cta {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: auto;
  min-height: 5.4rem;
  line-height: 1.5;
  padding: 1rem 2.4rem;
  margin: 2.4rem 0 0 0;
  white-space: normal;
  /* match the notify form so the stacked CTAs line up */
  max-width: 420px;
}

.home-pathway__cta .btn__logo {
  width: auto;
  height: 1.9rem;
  margin-right: .9rem;
  vertical-align: middle;
}

@media only screen and (max-width: 1500px) {
  .home-content__pathways {
    margin-top: 4.8rem;
  }
}

@media only screen and (max-width: 1400px) {
  .home-content__pathways {
    margin-top: 4.2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .home-content__pathways {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .home-pathway {
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    min-width: 0;
  }

  .home-pathway:first-child {
    padding-right: 4.2rem;
  }

  .home-pathway + .home-pathway {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 4.2rem;
  }
}

.info-offers {
  margin-top: 4.2rem;
}

.info-offers .col-block {
  margin-bottom: 3.6rem;
}

/* keep the two offer cards level (equal height, CTAs aligned) */
.info-offers .block-1-2 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.info-offers .block-1-2::after {
  display: none;
}

.info-offers .info-offer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.info-offers .info-offer__icon {
  margin-left: auto;
  margin-right: auto;
}

.info-offers .info-offer .btn {
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.info-consult,
.info-vault{
  margin-top: 1.2rem;
  padding-top: 4.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.top-line {
  margin-top: 0.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.under-line {
  margin-bottom: 0.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.theme-red {
  color: #c60e37ff;
}

.theme-white {
  color: #FFFFFF;
}

.info-consult .btn,
.info-vault .btn {
  margin-top: 1.8rem;
  margin-bottom: 0;
}

/* .s-info a adds a link underline; keep theme buttons intact */
.s-info a.btn:hover,
.s-info a.btn:focus {
  border-width: .2rem;
}

@media only screen and (max-width:800px) {
  .info-offer__icon {
    width: 8rem;
    height: 8rem;
    font-size: 3rem;
    margin-bottom: 1.8rem;
  }

  .info-offer h3 {
    font-size: 2.1rem;
  }
}

/* -------------------------------------------------------------------
 * ## typography: lighter narration / description copy
 *    (countdown timer colors untouched)
 * ------------------------------------------------------------------- */
.home-content__text p,
.s-info {
  color: rgba(255, 255, 255, 0.7);
}

/* primary button hover: deeper theme red instead of the stark pink */
.btn.btn--primary:hover,
.btn.btn--primary:focus {
  background-color: #a30b2e;
  border-color: #a30b2e;
}

/* -------------------------------------------------------------------
 * ## home footer credit
 * ------------------------------------------------------------------- */
.home-copyright span::after {
  display: none;
}

.home-copyright .home-copyright__brand {
  color: #c60e37ff;
}

.home-copyright .home-copyright__name {
  color: #FFFFFF;
}

/* -------------------------------------------------------------------
 * ## info page footer
 *    At the base of the info page (.s-info), below both columns.
 * ------------------------------------------------------------------- */
.info-footer {
  clear: both;
  width: 100%;
  margin-top: 4.2rem;
  padding-top: 4.2rem;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
}

.info-footer__brand {
  color: #c60e37ff;
}

.info-footer__name {
  color: #FFFFFF;
}

.info-footer__credit,
.info-footer__credit a {
  color: #505050;
}

/* -------------------------------------------------------------------
 * ## info page team (horizontally scrollable cards)
 * ------------------------------------------------------------------- */
.team-scroller {
  display: flex;
  gap: 1.6rem;
  margin-top: 2.2rem;
  padding-bottom: 1.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.team-scroller::-webkit-scrollbar {
  height: 6px;
}

.team-scroller::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.team-scroller::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.team-card {
  position: relative;
  flex: 0 0 auto;
  width: 19rem;
  max-width: 72%;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #1a1a1a;
  scroll-snap-align: start;
}

.team-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.team-card:hover img {
  -webkit-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
}

.team-card__film {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4rem 1.6rem 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.team-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 0 !important;
  pointer-events: auto;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
}

.team-card__link i {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: color 0.25s ease-in-out, transform 0.25s ease-in-out;
  transition: color 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.team-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.team-card__link:hover,
.team-card__link:focus {
  opacity: 0.9;
  border-bottom: 0 !important;
}

.team-card__link:hover i,
.team-card__link:focus i {
  color: #FFFFFF;
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}

.team-card__name {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #FFFFFF;
}

.team-card__role {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

@media only screen and (min-width: 1200px) {
  .team-card {
    width: 21rem;
  }
}

/* Disable state for subscribe button */
#mc-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #7a091b;
  border-color: #7a091b;
}

/* Cloudflare Turnstile widget spacing (bot protection on notify-me form) */
#notify-turnstile {
  margin-top: 1.2rem;
}

/* Notify-me form messages — theme-consistent alert component.
   The theme does not bundle Bootstrap, so these classes are defined here to
   match the site's dark surfaces, 2px radii, theme red and metropolis type. */
.subscribe-message {
  display: none;
  position: relative;
  margin-top: 1.2rem;
  padding: 1.2rem 3.8rem 1.2rem 1.6rem;
  font-family: "metropolis-regular", sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: left;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid #c60e37ff;
  border-radius: 2px;
}

.subscribe-message__text {
  display: block;
}

/* Manual dismiss control */
.subscribe-message__close {
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 3.8rem;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
}

.subscribe-message__close:hover,
.subscribe-message__close:focus {
  color: #FFFFFF;
}

/* Semantic accents: muted tints over the dark surface + a themed left border. */
.subscribe-message.alert-success {
  border-left-color: #3ecf8e;
  background-color: rgba(62, 207, 142, 0.12);
}

.subscribe-message.alert-danger {
  border-left-color: #c60e37ff;
  background-color: rgba(198, 15, 55, 0.16);
}

.subscribe-message.alert-info {
  border-left-color: #4aa8d8;
  background-color: rgba(74, 168, 216, 0.12);
}

.subscribe-message.alert-warning {
  border-left-color: #e0a530;
  background-color: rgba(224, 165, 48, 0.14);
}

/* -------------------------------------------------------------------
 * ## home: sticky mobile header
 *    Below 1000px the hero scrolls (see main.css), which would carry the
 *    wordmark out of view — only the menu toggle was pinned. Pin the logo
 *    too and lay an opaque-to-transparent black gradient behind both. The
 *    bar is 84px tall: just enough to frame the two controls with even
 *    padding, so the scrolling copy fades out as it passes underneath
 *    instead of colliding with the logo or the menu button.
 *
 *    The same bar is applied to the info panel (.s-info) when it is open,
 *    so the close button stays framed at the top and the info copy scrolls
 *    underneath it. (.s-info is visibility:hidden while closed, so its
 *    ::after bar is only painted once the panel is open.)
 *
 *    The bar, logo and toggle all share an 84px centre-line (contents at
 *    y=42; the fixed 42px toggle sits at y=21). The hero (.s-home) carries
 *    a transform for the info-panel slide, so the fixed logo is contained
 *    by it and rides along when the panel opens, yet stays put while the
 *    hero itself scrolls. The toggle lives outside .s-home, so it is fixed
 *    to the viewport directly.
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1000px) {
  .home-logo {
    position: fixed;
    top: 42px;                /* vertical centre of the 84px bar */
    right: 24px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .info-toggle {
    top: 21px;                /* centres the 42px toggle in the 84px bar */
  }

  /* the header's gradient backdrop: solid at the top, fading to clear */
  .home-content::after,
  .s-info::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    z-index: 501;             /* above page content, below logo/toggle (502) */
    pointer-events: none;
    background: linear-gradient(to bottom, #000000 0%, #000000 55%, rgba(0, 0, 0, 0) 100%);
  }
}