/* HxD Kenya enhancements layered over the original working build. */

/* Fail-safe: content is always visible. The original reveal animation can never hide page sections. */
.reveal,
.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Header: supplied horizontal logo + compact two-line event information */
.site-header {
  height: 96px;
}

.header-inner {
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand-event-group {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  width: 215px !important;
  height: auto !important;
  max-height: 62px;
  object-fit: contain;
}

.event-meta {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: left !important;
  font-size: 10px !important;
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: .075em;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
}

.event-meta strong {
  font-size: 12px !important;
  line-height: 1.2;
  color: #fff;
}

.event-meta span {
  display: block !important;
}

.menu-logo {
  width: 255px !important;
  height: auto !important;
  max-height: 82px;
  object-fit: contain;
}

.menu-social {
  margin-top: 30px;
}

/* Hero: more comfortable line spacing, restrained desktop size */
.hero h1 {
  font-size: clamp(44px, 5.2vw, 78px) !important;
  line-height: 1.10 !important;
  letter-spacing: -.038em !important;
  max-width: 900px;
}

/* Market infographic */
.market-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 42px 0 34px !important;
  border: 0 !important;
}

.market-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 20px !important;
  min-height: 138px;
  background: #F5F3EE;
  border: 1px solid rgba(40, 47, 43, .13) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.market-card:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 12px 30px rgba(40, 47, 43, .07);
}

/* Reset the old .market-stats div rule so nested card elements do not inherit padding/borders. */
.market-card>div {
  padding: 0 !important;
  border: 0 !important;
}

.market-card>div:not(.market-icon) {
  min-width: 0;
  flex: 1 1 auto;
}

.market-icon {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  padding: 0 !important;
  background: #fff;
  border: 1px solid rgba(40, 47, 43, .12) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-icon img {
  width: 60px !important;
  height: 60px !important;
  max-width: 50px !important;
  object-fit: contain !important;
}

.market-card-copy {
  min-width: 0;
}

.market-card strong {
  display: block;
  color: #4F5C2C !important;
  font-size: 20px !important;
  line-height: 1.18;
  margin: 2px 0 6px !important;
}

.market-card span {
  display: block;
  font-size: 11.5px !important;
  line-height: 1.48;
  color: #68706c !important;
}

/* Market image: on tablet/desktop the right-hand content controls the section height. */
@media(min-width:801px) {
  .market-section {
    align-items: stretch !important;
    min-height: 0 !important;
  }

  .market-image {
    position: relative !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .market-image img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Testimonial slider. Without JS both testimonials remain visible and readable. */
.quote-section {
  padding: 92px 0;
}

.quote-slider {
  position: relative;
}

.quote-slide {
  padding: 0 0 38px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  margin-bottom: 38px;
}

/* Keep testimonial section height stable */
.quote-slider.slider-ready {
    display: grid;
    grid-template-rows: auto auto;
}

.quote-slider.slider-ready .quote-slide {
    grid-column: 1;
    grid-row: 1;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition: opacity .35s ease;
}

.quote-slider.slider-ready .quote-slide.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.quote-slider.slider-ready .quote-controls {
    grid-column: 1;
    grid-row: 2;
    margin-top: 32px;
}

.quote-controls {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.quote-slider.slider-ready .quote-controls {
  display: flex;
}

.quote-arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: #fff;
  font: 300 28px/1 Poppins, sans-serif;
  cursor: pointer;
  transition: .2s ease;
}

.quote-arrow:hover {
  background: rgba(255, 255, 255, .08);
}

.quote-dots {
  display: flex;
  gap: 9px;
}

.quote-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  background: transparent;
  cursor: pointer;
}

.quote-dots button.is-active {
  background: #D4963E;
  border-color: #D4963E;
}

/* Sectors: corrected, purpose-specific, consistent line icons */
.sector-icon {
    height: 94px !important;
    display: flex;
    align-items: flex-start;
}

.sector-icon img {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    object-fit: contain !important;
}

.sector-card {
    min-height: 225px;
}

/* Knowledge platform */
.talks {
  position: relative;
}

.talks:after {
  content: "";
  position: absolute;
  right: 2%;
  top: 5%;
  width: 290px;
  height: 86%;
  background: url('../images/hxd-design-element.png') center/contain no-repeat;
  opacity: .075;
  pointer-events: none;
}

.talks-device {
  display: none !important;
}

.talks-grid {
  position: relative;
  z-index: 1;
}

.talks-logo {
  display: block;
  width: min(390px, 90%);
  height: auto;
  margin: 2px 0 28px;
}

/* Social icons */
.social-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-links a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .2);
  transition: .2s ease;
}

.social-links a:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
}

.social-links img {
  width: 18px;
  height: 18px;
}

/* Footer: no decorative footer artwork, social row integrated cleanly */
.footer-art {
  display: none !important;
}

.footer-logo {
  width: 235px !important;
  height: auto !important;
  max-height: 70px;
  object-fit: contain;
}

.footer-brand {
  gap: 24px;
}

.footer-utilities {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-social a {
  width: 34px;
  height: 34px;
}

.footer-social img {
  width: 16px;
  height: 16px;
}

@media(max-width:1050px) {
  .brand img {
    width: 185px !important;
  }

  .brand-event-group {
    gap: 14px;
  }

  .event-meta {
    font-size: 9px !important;
  }

  .event-meta strong {
    font-size: 11px !important;
  }

  .header-cta {
    display: none;
  }

  .talks:after {
    width: 220px;
    right: -2%;
  }
}

@media(max-width:800px) {
  .site-header {
    height: 84px;
  }

  .brand img {
    width: 160px !important;
    max-height: 54px;
  }

  .event-meta {
    font-size: 8px !important;
    letter-spacing: .05em;
  }

  .event-meta strong {
    font-size: 9.5px !important;
  }

  .market-stats {
    grid-template-columns: 1fr !important;
  }

  .talks-logo {
    width: min(330px, 90%);
  }

  .talks:after {
    width: 180px;
    opacity: .055;
  }

  .footer-utilities {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
}

@media(max-width:600px) {
  .brand-event-group {
    gap: 10px;
  }

  .brand img {
    width: 145px !important;
  }

  .event-meta {
    display: none !important;
  }

  .hero h1 {
    font-size: clamp(39px, 11.5vw, 58px) !important;
    line-height: 1.11 !important;
  }

  .market-card {
    min-height: 0;
  }

  .talks:after {
    width: 135px;
    right: -7%;
    opacity: .045;
  }

  .footer-logo {
    width: 200px !important;
  }
}