/*
Theme Name: Absolute Intelligence v2-7
Theme URI: https://absoluteintelligence.co.uk
Author: GroFu
Description: Custom theme for Absolute Intelligence UK
Version: 2.7
*/

/* -------------------------------------------- BASE STYLES ---------------------------------------------*/
/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  color: #040928;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a:visited {
  color: inherit;
}

.green {
  color: #28A875;
}

.white {
  color: #FFFFFF;
}

/* -------------------------------------------- HEADER / NAV ---------------------------------------------*/
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  padding: 40px 60px;
  background: #040928;
  z-index: 100;
}

.logo img {
  height: 63px;
  width: auto;
  display: block;
}

.main-nav ul {
  display: flex;
  gap: 40px;
  list-style: none;
  align-items: center;
}

.main-nav a {
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-nav a:hover {
  color: #28A875;
}

.main-nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 25px;
  height: 50px;
  padding: 0 30px;
}

.menu-item-147 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 25px;
  height: 50px;
  padding: 0 30px;
}

.menu-item-147 a:hover {
  background: #fff;
  color: #040928;
}



.main-nav a.nav-cta:hover {
  background: #fff;
  color: #040928;
}

/* -------------------------------------------- HERO ---------------------------------------------*/
.hero {
  position: relative;
  height: 750px;
  background-color: #040928;
  background-image: url('assets/images/backgrounds/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: visible;
}

.hero-inner {
  height: 100%;
  position: relative;
  padding: 80px 60px 0;
  max-width: 1600px;
  margin: 0 auto;
}

.hero-content {
  position: absolute;
  left: 60px;
  bottom: 140px;
  max-width: 880px;
  color: #ffffff;
}

.hero-content h1 {
  font-size: 78px;
  line-height: 1.04;
  font-weight: 600;
  max-width: 800px;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}


.hero-sub {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  max-width: 740px;
  color: #ffffff;
}

.hero-ctas {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: #28A875;
  color: #040928 !important;
  border: none;
  height: 50px;
  padding: 0 30px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn-primary .btn-arrow {
  width: 30px;
  height: 18px;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #ffffff;
  transform: translateX(2px);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* HERO VIDEOS - desktop only */
.hero-videos {
  position: absolute;
  right: 60px;
  bottom: -170px;
  display: grid;
  gap: 24px;
}

/* HERO VIDEOS - desktop only */
.hero-static-image {
  position: absolute;
  right: 60px;
  bottom: 90px;
  display: grid;
  gap: 24px;
}

.video-row-1 {
  display: flex;
  justify-content: flex-end;
}

.video-row-2 {
  display: flex;
  gap: 24px;
}

.vid {
  object-fit: cover;
  background: #000;
}

.vid.large {
  width: 480px;
  height: 478px;
  border-radius: 100px;
}

.vid.mid {
  width: 330px;
  height: 234px;
  border-radius: 50px;
}

.vid.small {
  width: 220px;
  height: 160px;
  border-radius: 40px;
}

/* HERO IMAGES - mobile only */
.hero-images {
  display: none;
}

@media (max-width: 880px) {
  .hero-videos {
    display: none;
  }

  .hero-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
  }

  .hero-images img {
    height: auto;     
    display: block;
    width: 100vw;      
    max-width: 100%;    

  }
}

/* -------------------------------------------- GLOBAL H2 STYLING ---------------------------------------------*/

h2 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.04em;
  /* -4% */
  line-height: 1.15;
  color: #06114E;
  /* deep blue */
}

.hero h2 { color: #fff;}

/* -------------------------------------------- VARIOUS PANELS ---------------------------------------------*/
/* Ensure consistent inner padding and max width for all panels */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  /* match your global gutter spacing */
  box-sizing: border-box;
}

/* -------------------------------------------- INTRO PANEL ---------------------------------------------*/
.intro {
  background: #fff;
  padding: 100px 60px;
  color: #040928;
  display: flex;
  justify-content: center;
}

.intro-content {
  width: 740px;
  text-align: left;
}

.intro-content h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.2;
  margin-bottom: 24px;
}

.intro-content p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 18px;
}

.intro-content strong {
  font-weight: 700;
}

.cta-email {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.04em;
  padding: 0 24px;
  height: 44px;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid #040928;
  color: #040928;
  background: transparent;
  transition: all 0.2s ease;
}

.cta-email:hover {
  background-color: #040928;
  color: #ffffff;
  transform: translateX(2px);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* -------------------------------------------- SOLUTIONS PANEL ---------------------------------------------*/
.solutions {
  background: #ffffff;
  padding: 100px 60px;
  /* match intro panel */
}

.solutions h2 .accent-dot {
  color: #28A875;
}

/* green highlight */
.solutions-intro {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  max-width: 640px;
  /* limit width */
  margin-bottom: 60px;
}

/* Cards container */
.solution-cards {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

/* Individual cards */
.solution-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Card image */
.card-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.card-image img {
  transition: transform 0.3s ease;
}

.solution-card:hover .card-image img {
  transform: scale(1.05);
}

/* Card content fills background */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
}

/* Card headings */
.card-content h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
  margin: 0;
}

.card-content h3 .accent-dot {
  color: inherit;
}

/* Card paragraph */
.card-content p {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  /* 160% */
  letter-spacing: -0.02em;
  /* -2% */
  margin: 0;
}

/* Card buttons */
.btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  height: 44px;
  padding: 0 24px;
  font-weight: 600;
  /* semi-bold */
  font-size: 18px;
  letter-spacing: -0.04em;
  text-decoration: none;
  transition: all 0.2s ease;
  background: transparent;
}

.btn-card:hover {
  transform: translateX(3px);
}

/* CARD SPECIFIC STYLING */

/* .card-1 {
  background: #0E4AAE;
} */

.card-1 .card-content {
  color: #040928;
}

.card-1 h3 .accent-dot {
  color: #28A875;
}

.card-1 .btn-card {
  color: #040928;
  border: 2px solid #040928;
}

.card-1 .btn-card:hover {
  background: #040928;
  color: #ffffff;
}

/* .card-2 {
  background: #28A875;
} */

.card-2 .card-content {
  color: #ffffff;
}

.card-2 h3 .accent-dot {
  color: #ffffff;
}

.card-2 .btn-card {
  color: #ffffff;
  border: 2px solid #ffffff;
}

.card-2 .btn-card:hover {
  background: #ffffff;
  color: #7039B8;
}

/* .card-3 {
  background: #7039B8;
} */

.card-3 .card-content {
  color: #ffffff;
}

.card-3 h3 .accent-dot {
  color: #28A875;
}

.card-3 .btn-card {
  color: #ffffff;
  border: 2px solid #ffffff;
}

.card-3 .btn-card:hover {
  background: #ffffff;
  color: #0E4AAE;
}

/* -------------------------------------------- CLIENT LOGOS PANEL ---------------------------------------------*/
.client-logos {
  background-color: #F3F3FF;
  /* light blue */
  padding: 80px 0px;
}

.client-logos .logos-heading {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.05em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 40px;
}

.logos-wrapper {
  overflow: hidden;
  /* hide scrollbar */
}

.logos-track {
  display: flex;
  gap: 80px;
  /* width: max-content; */
  animation: scroll-logos 8s linear infinite;
}

.logo-item img {
  width: 220px;
  height: 60px;
  object-fit: contain;
}

/* Animate logos horizontally */
@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Responsive adjustments */
@media (max-width: 880px) {
  .client-logos {
    padding: 60px 24px;
  }

  .logos-track {
    gap: 40px;
    animation: scroll-logos 4s linear infinite;
  }

  .logo-item img {
    width: 160px;
    height: auto;
  }

  /* Mobile nav layout & hamburger button  */

  .site-header .logo img {
    height: 40px;
  }



  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
    position: absolute;
    right: 24px;
    top: 18px;
    width: 36px;
    height: 36px;
    padding: 0;
  }


  
  .hamburger,
  .hamburger::before,
  .hamburger::after {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: #fff;
    border-radius: 1px;
    position: relative;
    transition: all 0.3s ease;
  }

  .hamburger::before {
    top: -10px;
    position: absolute;
  }

  .hamburger::after {
    top: 10px;
    position: absolute;
  }
  .hamburger.open::before,
  .hamburger.open::after {
    transform-origin: center;
    /* ensures even rotation */
  }

  .hamburger.open::before {
    transform: rotate(45deg) translate(0, 0);
  }

  .hamburger.open::after {
  
    transform: rotate(-45deg) translate(0, 0);
  }



  /* Hide nav by default */
  .main-nav {
    display: none;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #040928;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    padding-top: 0; 
    align-items: center;
  }

  /* Show nav when active */
  .main-nav.active {
    display: flex;
    background: #06114E;
  }

  .main-nav a {
    font-size: 22px;
    text-align: center;
    width: 100%;
  }

  .mobile-menu-toggle.open .hamburger {
    background-color: transparent;
  }

  .mobile-menu-toggle.open .hamburger::before {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .mobile-menu-toggle.open .hamburger::after {
    transform: rotate(-45deg) translate(6px, -6px);
    top: 8px !important;
  }


}

/* -------------------------------------------- AUDIO PREVIEW PANEL ---------------------------------------------*/
.audio-preview {
  background: url('assets/images/backgrounds/audio-bg.jpg') center/cover no-repeat;
  padding: 100px 60px;
  /* same as intro panel */
  text-align: center;
  color: #ffffff;
}

.section-block.audio-preview .section-inner {
  max-width: 780px;
  /* content width */
  margin: 0 auto;
}

.audio-preview h2 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.15;
  /* 115% */
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 40px;
}

.audio-preview h2 .accent-dot {
  color: #28A875;
  /* green highlight for full stop */
}

.audio-preview .intro-text {
  font-size: 20px;
  font-weight: 300;
  /* light */
  line-height: 1.6;
  margin-bottom: 40px;
  color: #ffffff;
}

.audio-preview .disclaimer-text {
  font-size: 16px;
  margin-top: 24px;
  color: #ffffff;
}

/* FORM STYLING */
.email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.email-form input[type="email"] {
  height: 50px;
  /* match button */
  font-size: 18px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  border-radius: 25px;
  padding-left: 24px;
  padding-right: 24px;;
  border: 2px solid #ffffff;
  background-color: #ffffff;
  color: #040928;
  width: 100%;
  margin-bottom: 12px;
}

.email-form input::placeholder {
  color: #5C5C5C;
  font-weight: 400;
  font-size: 18px;
  font-family: "DM Sans", system-ui, sans-serif;
}

/* When text is entered, placeholder appears dark blue */
.email-form input:focus::placeholder,
.email-form input:not(:placeholder-shown)::placeholder {
  color: #040928;
}

/* Hide the visually hidden label (optional, for this panel) */
.audio-preview .email-form label {
  display: none;
}

/* BUTTON */
.btn-outline {
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 25px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  padding: 0 30px;
  height: 50px;
  /* same as input */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  width: 100%;
}

.audio-preview .btn-arrow {
  width: 30px;
  height: 18px;
  margin-left: 12px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.audio-preview .btn-outline:hover .btn-arrow {
  transform: translateX(2px);
  content: url('assets/images/icon-arrow-right-blue.svg');
  /* or dark version matching #040928 */
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: #28A875;
  color: #040928;
  border-color: #040928;
}

/* RESPONSIVE */
@media (max-width: 880px) {
  .audio-preview {
    padding: 60px 24px;
  }

  .audio-preview h2 {
    font-size: 36px;
  }

  .email-form input,
  .btn-outline {
    font-size: 16px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .audio-preview {
    padding: 40px 16px;
  }

  .audio-preview h2 {
    font-size: 30px;
  }

  .email-form input,
  .btn-outline {
    font-size: 14px;
    height: 40px;
  }
}

/* AUDIO PREVIEW PANEL RESPONSIVE WIDTHS */
.section-block.audio-preview .section-inner {
  max-width: 760px;
  /* desktop */
  margin: 0 auto;
  padding-left: 24px;
  /* keep some breathing room */
  padding-right: 24px;
}

@media (max-width: 880px) {
  .section-block.audio-preview .section-inner {
    max-width: 100%;
    /* full width minus padding */
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 480px) {
  .section-block.audio-preview .section-inner {
    max-width: 100%;
    /* full width minus padding */
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ================================ Services Panel ================================ */
.services-panel {
  background-color: #f9fafb;
  /* You can replace this with your chosen solid color */
  padding: 100px 0;
  /* Match "Our Solutions" panel padding */
}

.services-panel .section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.services-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.service-category {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.category-heading {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #111;
  font-family: "DM Sans", sans-serif;
  letter-spacing: 0.5px;
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-list li {
  font-size: 18px;
  line-height: 1.6;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.service-list li:last-child {
  border-bottom: none;
}

.services-panel .cta-btn {
  margin-top: 60px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .services-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-categories {
    grid-template-columns: 1fr;
  }

  .services-panel {
    padding: 70px 0;
  }
}


/* --------------------------------------------
   CONTACT PANEL
---------------------------------------------*/
.contact-panel.dark-bg-panel {
  background-color: #040928;
  background-image: url('assets/images/backgrounds/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  padding: 100px 60px;
}

.contact-panel.dark-bg-panel .section-heading {
  color: #ffffff;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 40px;
}

.contact-panel.dark-bg-panel .section-heading .accent-dot {
  color: #28A875;
}

.contact-panel.dark-bg-panel .contact-intro {
  max-width: 740px;
  margin: 0 auto 40px auto;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}

/* Form wrapper to constrain width */
.contact-panel.dark-bg-panel .form-inner {
  max-width: 740px;
  margin: 0 auto;
  text-align: left;
}

/* Labels left-aligned */
.contact-panel.dark-bg-panel .contact-form label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  font-family: "DM Sans", sans-serif;
  color: #ffffff;
}

/* Inputs and textarea */
.contact-panel.dark-bg-panel .contact-form input,
.contact-panel.dark-bg-panel .contact-form textarea {
  width: 100%;
  background-color: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.3);
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  font-family: "DM Sans", sans-serif;
}

/* Unified placeholder styling */
.contact-panel.dark-bg-panel .contact-form input::placeholder,
.contact-panel.dark-bg-panel .contact-form textarea::placeholder {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
}

/* Focus states */
.contact-panel.dark-bg-panel .contact-form input:focus,
.contact-panel.dark-bg-panel .contact-form textarea:focus {
  border-color: #28A875;
  background-color: rgba(255,255,255,0.1);
  color: #ffffff;
  outline: none;
}

/* Form button (match hero styling, full width) */
.contact-panel.dark-bg-panel .contact-form .btn-primary {
  background: #28A875;
  color: #040928;
  border: none;
  height: 50px;
  padding: 0 30px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 100%; /* stretch to input width */
}

.contact-panel.dark-bg-panel .contact-form .btn-primary .btn-arrow {
  width: 30px;
  height: 18px;
  display: inline-block;
  background: url('assets/images/icon-arrow-right-blue.svg') no-repeat center;
  background-size: contain;
}

.contact-panel.dark-bg-panel .contact-form .btn-primary:hover {
  background-color: #22a06b;
  transform: translateX(2px);
}

/* Contact info under form */
.contact-panel.dark-bg-panel .contact-info-btm {
  margin-top: 40px;
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
}

.contact-panel.dark-bg-panel .contact-info-btm a {
  color: #ffffff;
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 880px) {
  .contact-panel .container {
    padding-left: 0;
    padding-right: 0;
  }

  .contact-panel.dark-bg-panel {
    padding: 60px 24px;
  }
  .contact-panel.dark-bg-panel .section-heading {
    font-size: 36px;
  }
  .contact-panel.dark-bg-panel .contact-intro {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .contact-panel.dark-bg-panel .contact-form input,
  .contact-panel.dark-bg-panel .contact-form textarea {
    font-size: 16px;
    padding: 12px 16px;
  }
  .contact-panel.dark-bg-panel .contact-form .btn-primary {
    font-size: 16px;
    height: 44px;
  }
  .contact-panel.dark-bg-panel .contact-info-btm {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .contact-panel.dark-bg-panel .contact-intro {
    font-size: 16px;
  }
}





/* -------------------------------------------- LEARN MORE PANELS ---------------------------------------------*/
.learn-more {
  background: #ffffff;
  padding: 100px 60px;
}

.learn-more .text-center {
  text-align: center;
  color: #06114E;
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 80px;
}

.learn-panel {
  display: flex;
  align-items: stretch;
  margin-bottom: 100px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.learn-panel:last-child {
  margin-bottom: 0;
}

.learn-panel .learn-image {
  flex: 1 1 50%;
}

.learn-panel .learn-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learn-panel .learn-content {
  flex: 1 1 50%;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Headings within learn panels */
.learn-panel .learn-content h3 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
}

/* Paragraph styling */
.learn-panel .learn-content p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

/* Panel color variations */
.learn-panel-1, .learn-panel-4, .learn-panel-7 {
  /* background: #0E4AAE; */
  /* mid blue */
  color: #040928;
}

.learn-panel-1 .accent-dot, .learn-panel-4 .accent-dot, .learn-panel-7 .accent-dot {
  color: #ffffff;
  /* green */
}

.learn-panel-2, .learn-panel-5, .learn-panel-8 {
  /* background: #28A875; */
  /* green */
  color: #ffffff;
  /* dark blue */
}

.learn-panel-2 .accent-dot, .learn-panel-5 .accent-dot, .learn-panel-8 .accent-dot {
  color: #08ad72;
}

.learn-panel-3, .learn-panel-6, .learn-panel-9 {
 /* background: #7039B8; */
  /* purple */
  color: #ffffff;
}

.learn-panel-3 .accent-dot, .learn-panel-6 .accent-dot, .learn-panel-9 .accent-dot {
  color: #28A875;
}

.learn-panel.reverse {
  flex-direction: row-reverse;
}

/* Responsive stacking */
@media (max-width: 880px) {
  .learn-panel {
    flex-direction: column;
  }

  .learn-panel .learn-image,
  .learn-panel .learn-content {
    flex: 1 1 100%;
  }

  .learn-panel .learn-content {
    padding: 60px 24px;
  }
}

/* Learn More panel buttons */
/* Base button for Learn More panels */
.btn-solution-1,
.btn-solution-2,
.btn-solution-3,
.btn-solution-4,
.btn-solution-5,
.btn-solution-6,
.btn-solution-7,
.btn-solution-8,
.btn-solution-9,
.btn-solution-10,
.btn-solution-11,
.btn-solution-12 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Panel 1 - mid blue background */
.btn-solution-1, .btn-solution-4 {
  color: #050927;
  border: 2px solid #050927;
  background: transparent;
}

.btn-solution-1:hover, .btn-solution-4:hover, .btn-solution-7:hover   {
  background: #050927;
  color: #ffffff;
  transform: translateX(2px);
}

/* Panel 2 - green background */
.btn-solution-2, .btn-solution-5, .btn-solution-8 {
  color: #ffffff;
  border: 2px solid #ffffff;
  background: transparent;
}

.btn-solution-2:hover, .btn-solution-5:hover, .btn-solution-8:hover {
  background: #ffffff;
  color: #7039b8;
  transform: translateX(2px);
}

/* Panel 3 - purple background */
.btn-solution-3, .btn-solution-6, .btn-solution-9 {
  color: #fff;
  border: 2px solid #fff;
  background: transparent;
}

.btn-solution-3:hover, .btn-solution-6:hover, .btn-solution-9:hover   {
  background: #fff;
  color: #0f4aae;
  transform: translateX(2px);
}

/* Transitions */
.btn-solution-1,
.btn-solution-2,
.btn-solution-3,
.btn-solution-4,
.btn-solution-5,
.btn-solution-6,
.btn-solution-7,
.btn-solution-8,
.btn-solution-9,
.btn-solution-10,
.btn-solution-11,
.btn-solution-12 {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* -------------------------------------------- LEARN PANEL ANIMATIONS (ALTERNATING) ---------------------------------------------*/
.reveal {
  opacity: 0;
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* Starting states */
.reveal.left {
  transform: translateX(-60px);
}

.reveal.right {
  transform: translateX(60px);
}

/* Active state */
.reveal.active {
  opacity: 1;
  transform: translateX(0);
}

/* Optional stagger */
.learn-panel:nth-of-type(1).active {
  transition-delay: 0s;
}

.learn-panel:nth-of-type(2).active {
  transition-delay: 0.15s;
}

.learn-panel:nth-of-type(3).active {
  transition-delay: 0.3s;
}

/* Mobile devices – simpler fade-up motion */
@media (max-width: 880px) {

  .reveal.left,
  .reveal.right {
    transform: translateY(40px);
  }
}

/* -------------------------------------------- OTHER SECTION BLOCKS ---------------------------------------------*/
.section-block {
  width: 100%;
  color: #040928;
}

.section-block .section-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.section-block h2 {
  font-weight: 700;
  margin-bottom: 24px;
}
.section-block h2 .accent-dot {
    color: #28A875;
}

/* .section-block:nth-of-type(odd) { background: #f9f9f9; } .section-block:nth-of-type(even) { background: #ffffff; } */
/* -------------------------------------------- FOOTER ---------------------------------------------*/
.site-footer {
  background: #040928;
  color: #fff;
  padding: 100px 60px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 100px;
}

.footer-social h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.25;
  margin-bottom: 40px;
  color: #fff;
}

.footer-social h2 .accent-dot {
  color: #28A875;
}

.social-list {
  list-style: none;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.social-list img {
  width: 32px;
  height: 32px;
}

.footer-logo img {
  display: block;
  height: 46px;
  width: auto;
}

.footer-bottom .smallprint {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.footer-bottom .smallprint a {
  color: #fff;
  text-decoration: underline;
}

/* -------------------------------------------- RESPONSIVE BREAKPOINTS ---------------------------------------------*/
/* ≤ 1360px */
@media (max-width: 1360px) {
  .hero {
    height: 680px;
  }


  .hero-content h1 {
    font-size: 62px;
    line-height: 1.08;
    max-width: 600px;
  }

  .hero-sub {
    font-size: 18px;
    max-width: 600px;
  }

  .btn-primary {
    font-size: 16px;
    height: 48px;
    padding: 0 26px;
  }

  .btn-primary .btn-arrow {
    width: 26px;
    height: 16px;
  }
}

/* ≤ 1060px */
@media (max-width: 1240px) {
  .hero {
    height: 600px;
    padding: 0 24px;
  }

  .hero-content {
    bottom: 80px;
    left: 24px;
    max-width: 90%;
  }

  .hero-content h1 {
    font-size: 48px;
    line-height: 1.1;
  }

  .hero-sub {
    font-size: 18px;
  }

  .hero-videos {
    gap: 16px;
    bottom: -90px;
  }


  .hero-videos .vid.large {
    width: 300px;
    height: 320px;
    border-radius: 60px;
  }
  .hero-videos .vid.mid {
    width: 250px;
    height: 154px;
    border-radius: 30px;
  }
  .hero-videos .vid.small {
    width: 160px;
    height: 100px;
    border-radius: 20px; 
  }
  h2 {
    font-size: 48px;
  }

  .btn-primary {
    font-size: 16px;
    height: 46px;
    padding: 0 24px;
  }

  .intro,
  .site-footer {
    padding: 80px 24px;
  }
}

/* ≤ 880px */
@media (max-width: 880px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 24px;
    z-index: 99999; /* ensure open mobile menu apepars above live chat button  */
  }

  .main-nav ul {
    flex-direction: column;
    gap: 28px;
    margin-top: 180px;
  }

  .hero {
    height: auto;
    text-align: left;
    padding: 140px 0 0 0 ;

  }

  .hero-content {
    position: relative;
    left: 0;
    bottom: 40px;
    max-width: 100%;
    padding: 0 24px;
  }

  .hero-content h1 {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 16px;
  }



  h2 {
    font-size: 36px;
  }

  .btn-primary {
    font-size: 16px;
    height: 44px;
    padding: 0 22px;
  }

  .btn-primary .btn-arrow {
    width: 22px;
    height: 14px;
  }

  .intro,
  .site-footer {
    padding: 60px 24px 120px 24px;
  }

  .intro-content {
    width: 100%;
    /* make full width on mobile */
  }

  .footer-logo img {
    height: 36px;
  }

  .footer-social h2 {
    font-size: 28px;
  }


  .solution-cards {
    display: block; /* stack cards vertically like learn-panels */
    gap: 24px; /* optional spacing between cards */
    padding-left: 0;
    padding-right: 0;
  }

  .solution-card {
    width: 100%;
    margin-bottom: 24px; /* spacing between cards */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  }

  .solution-card .card-image img {
    width: 100%;
    height: auto; 
    display: block;
    object-fit: cover;
  }

  .solution-card .card-content {
    padding: 24px; 
    display: block;
  }

  .solution-card .card-content h3, 
  .solution-card .card-content p   { 
    margin-bottom: 24px; 
  }

  .solution-card .card-content h3 { 
    font-size: 28px;
    line-height: 1.15;
  }
  .solution-card .btn-card { 
    height: auto;
    padding: 8px 24px;
    text-align: center;
  }
  


  .solutions {
    padding-left: 24px;
    padding-right: 24px;
  }

  .learn-panel {
    margin-bottom: 40px; /* Reduce the spacing on mobile */
    padding: 0 0 24px 0 ;
  }

  /* 2. Remove left/right padding on the 'learn-more' outer container */
  .learn-more {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }


  /* 3. Reduce left/right padding for the 'learn-panel' content */
  .learn-panel .learn-content {
    padding: 24px; 
  }

  .learn-panel .learn-content h3 {
    font-size: 28px;
    line-height: 1.15;
  }

  /* 1. Reduce H2 heading size like 'intro' panel */
  .learn-more .text-center {
    font-size: 36px;
    margin-bottom: 0;
  }


  .learn-panel:last-child {
    margin-bottom: 0; /* Keep the last panel flush with container */
  }

  .learn-panel.reverse {
    flex-direction: column; /* force normal vertical stacking */
  }

  .learn-panel.reverse .learn-image,
  .learn-panel.reverse .learn-content {
    flex: 1 1 100%;
  }

  .learn-panel.reverse .learn-content {
    padding: 24px;
  }



}

/* ≤ 480px */
@media (max-width: 480px) {

  .hero-inner {
    padding: 0;
  }





  h2 {
    font-size: 30px;
  }

  .footer-logo img {
    height: 28px;
  }
}

/* ================================ Audio Samples page / Text pages =================== */
.audio-previews-page .hero,
.text-page .hero {
  height: 620px;
}

/* ================================ Audio Samples Panel ================================ */
.audio-samples {
  background-color: #f9fafb;
  /* optional — change/remove if you prefer white */
  padding: 100px 0;
  /* same vertical rhythm as other panels */
  font-family: "DM Sans", sans-serif;
}

.audio-samples .section-heading {
  text-align: center;
  margin-bottom: 24px;
}

.audio-samples .intro-text {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 60px auto;
  text-align: center;
  line-height: 1.6;
  color: #333;
}

.audio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  align-items: stretch;
}

@media (max-width: 360px) {
  .audio-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }
}

/* Each audio card */
.audio-grid figure {
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.audio-grid figure:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.audio-grid figcaption h4 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
  color: #111;
}

.audio-grid audio {
  width: 100%;
  border-radius: 8px;
  outline: none;
}

/* Small spacing for audio controls */
.audio-grid audio::-webkit-media-controls-panel {
  background-color: #fff;
}

/* Responsive tweaks */
@media (max-width: 992px) {

  .audio-previews-page .hero,
  .text-page .hero {
    height: auto;
    padding-top: 120px;   
    padding-bottom: 40px; 
  }
  .audio-samples {
    padding: 80px 0;
  }

  .audio-grid {
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .audio-samples {
    padding: 60px 0;
  }

  .audio-grid figure {
    padding: 20px;
  }

  .audio-grid figcaption h4 {
    font-size: 16px;
  }
}

/* ================================ Audio Player Styling ================================ */
/* Modern browsers (WebKit-based: Chrome, Edge, Safari) */
audio::-webkit-media-controls-panel {
  background-color: #fff;
  border-radius: 8px;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #111;
  /* brand text/icon colour */
}

audio::-webkit-media-controls-play-button:hover,
audio::-webkit-media-controls-mute-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-timeline {
  accent-color: #040928;
  /* sets slider and progress accent (Chrome/Edge/Safari 15+) */
}

/* Firefox accent support */
audio {
  accent-color: #040928;
}

/* -------------------------------------------- HOVER EFFECTS ---------------------------------------------*/
.cta-email:hover,
.cta-email:focus {
  background-color: #040928;
  color: #ffffff;
  transform: translateX(2px);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* Hide mobile menu toggle on desktop */
@media (min-width: 881px) {
  .mobile-menu-toggle {
    display: none;
  }
}


/* ---- Various responsive fixes ---- */
@media (max-width: 880px) {
  /* 2. Remove left/right padding on the 'learn-more' outer container */
  .learn-more {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }


  /* 3. Reduce left/right padding for the 'learn-panel' content */
  .learn-panel .learn-content {
    padding: 24px; 
  }

  /* 1. Reduce H2 heading size like 'intro' panel */
  .learn-more .text-center {
    font-size: 36px;
    margin-bottom: 0;
  }

    .learn-panel {
    margin-bottom: 40px; /* Reduce the spacing on mobile */
    padding: 0 0 24px 0 ;
  }

  .learn-panel:last-child {
    margin-bottom: 0; /* Keep the last panel flush with container */
  }

  .learn-panel.reverse {
    flex-direction: column; /* force normal vertical stacking */
  }

  .learn-panel.reverse .learn-image,
  .learn-panel.reverse .learn-content {
    flex: 1 1 100%;
  }

  .learn-panel.reverse .learn-content {
    padding: 24px;
  }

}

/* ---- Contact Form 7 Plugin styles ---- */

.email-form .wpcf7-not-valid-tip {
  color: white;
  font-weight: bold;
}

.email-form .wpcf7 form .wpcf7-response-output {
  color: #fff;
  background: rgba(112, 57, 184, 0.25);
  border-radius: 8px;
  padding: 16px;
}


/* ---- Text pages - Main content panels - Typography  ---- */

/* ======================= MAIN CONTENT PANEL ======================= */
.main-content-panel {
  background: #fff;
  padding: 100px 60px; /* match intro panel */
  color: #040928;
  display: flex;
  justify-content: center;
}

.main-content-inner {
  width: 100%;
  max-width: 740px; /* same as intro-content */
  text-align: left;
}

/* -------------------- Typography -------------------- */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -0.04em; /* follow refined heading spacing */
  color: #06114E;
}

.main-content h2 {
  font-size: 40px; /* match intro h2 */
}

.main-content h3 {
  font-size: 32px;
  line-height: 1.25;
}

.main-content h4 {
  font-size: 28px;
  line-height: 1.3;
}

.main-content p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.main-content strong {
  font-weight: 700;
}

/* Links inside main content */
.main-content a {
  color: #0E4AAE;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}

.main-content a:hover {
  color: #28A875;
}

/* Lists */
.main-content ul,
.main-content ol {
  margin: 16px 0 24px 20px;
  padding: 0;
}

.main-content li {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* -------------------- Mobile responsiveness -------------------- */
@media (max-width: 880px) {
  .main-content-panel {
    padding: 60px 24px;
  }

  .main-content-inner {
    width: 100%;
  }

  .main-content h2 {
    font-size: 36px;
  }

  .main-content h3 {
    font-size: 28px;
  }

  .main-content p,
  .main-content li {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .main-content-panel {
    padding: 40px 16px;
  }

  .main-content h2 {
    font-size: 30px;
  }

  .main-content p,
  .main-content li {
    font-size: 16px;
  }
}