/* design-system.css */

:root {
  /* Colors */
  --gray-smoke: #D2D2D2;
  --black: #000000;
  --light-gray: #F0F0F0;
  /* --primary-white: #FFF; */
  --primary-red: #F20505;
  --GRAY-Charcoal: #323232;

  /* Button Variables */
  --btn-primary-bg: var(--primary-red);
  /* --btn-primary-color: var(--primary-white); */
  --btn-primary-color: #fff;
  --btn-primary-border-radius: 100px;
  --btn-primary-min-width: 240px;
  --btn-primary-padding: 20px 36px 24px 36px;
  
  /* Borders */
  --border-gray-smoke: 1px solid var(--gray-smoke);
  --border-black: 1px solid var(--black);
  --border-black-3: 3px solid var(--black);

  /* Base Regular */
    --base-regular-font-family: 'Inter', sans-serif;
    --base-regular-font-size: 16px;
    --base-regular-font-style: normal;
    --base-regular-font-weight: 400;
    --base-regular-line-height: 141.667%; /* 22.667px */
    --base-regular-letter-spacing: -0.053px;

  /* Base Bold */
  --base-bold-font-family: 'Inter', sans-serif;
  --base-bold-font-size: 16px;
  --base-bold-font-style: normal;
  --base-bold-font-weight: 800;
  --base-bold-line-height: 142%; /* 22.72px */
  --base-bold-letter-spacing: -0.33%;

  /* M Regular - 2.25× */
  --m-regular-2-25x-font-family: 'Inter', sans-serif;
  --m-regular-2-25x-font-size: 36px;
  --m-regular-2-25x-font-style: normal;
  --m-regular-2-25x-font-weight: 400;
  --m-regular-2-25x-line-height: 116.667%; /* 42px */
  --m-regular-2-25x-letter-spacing: -0.54px;

  /* M Bold - 2.25× */
  --m-bold-2-25x-font-family: 'Inter', sans-serif;
  --m-bold-2-25x-font-size: 36px;
  --m-bold-2-25x-font-style: normal;
  --m-bold-2-25x-font-weight: 800;
  --m-bold-2-25x-line-height: 117%; /* 42.12px */
  --m-bold-2-25x-letter-spacing: -1.5%;

  /* L Bold - 3× */
  --l-bold-3x-font-family: 'Inter', sans-serif;
  --l-bold-3x-font-size: 48px;
  --l-bold-3x-font-style: normal;
  --l-bold-3x-font-weight: 800;
  --l-bold-3x-line-height: 117%; /* 56.16px */
  --l-bold-3x-letter-spacing: -1.88%;

  /* XXS Bold - 0.75× */
  --xxs-bold-0-75x-font-family: Inter;
  --xxs-bold-0-75x-font-size: 12px;
  --xxs-bold-0-75x-font-style: normal;
  --xxs-bold-0-75x-font-weight: 800;
  --xxs-bold-0-75x-line-height: 141.667%; /* 17px */
  --xxs-bold-0-75x-letter-spacing: -0.04px;

  /* XS Regular - 1.125× */
  --xs-regular-1-125x-font-family: 'Inter', sans-serif;
  --xs-regular-1-125x-font-size: 20px;
  --xs-regular-1-125x-font-style: normal;
  --xs-regular-1-125x-font-weight: 400;
  --xs-regular-1-125x-line-height: 141.667%; /* 28.333px */
  --xs-regular-1-125x-letter-spacing: -0.8px;

  /* XS Bold - 1.125× */
--xs-bold-1-125x-font-family: 'Inter', sans-serif;
--xs-bold-1-125x-font-size: 20px;
--xs-bold-1-125x-font-style: normal;
--xs-bold-1-125x-font-weight: 800;
--xs-bold-1-125x-line-height: 142%; /* 28.4px */
--xs-bold-1-125x-letter-spacing: -0.33px;

  /* S Regular - 1.5× */
  --s-regular-1-5x-font-family: 'Inter', sans-serif;
  --s-regular-1-5x-font-size: 24px;
  --s-regular-1-5x-font-style: normal;
  --s-regular-1-5x-font-weight: 400;
  --s-regular-1-5x-line-height: 133.333%; /* 32px */
  --s-regular-1-5x-letter-spacing: -0.24px;

  /* S Bold - 1.5× */
  --s-bold-1-5x-font-family: 'Inter', sans-serif;
  --s-bold-1-5x-font-size: 24px;
  --s-bold-1-5x-font-style: normal;
  --s-bold-1-5x-font-weight: 800;
  --s-bold-1-5x-line-height: 133.333%; /* 32px */
  --s-bold-1-5x-letter-spacing: -0.24px;

  /* L Bold - 3x  */
--xl-bold-3x-font-family: Inter;
--xl-bold-3x-font-size: 48px;
--xl-bold-3x-font-style: normal;
--xl-bold-3x-font-weight: 800;
--xl-bold-3x-line-height: 116.7%;
--xl-bold-3x-letter-spacing: -0.9px;

  /* XL Bold - 4.125x */
    --xl-bold-font-family: 'Inter', sans-serif;
    --xl-bold-font-size: 66px;
    --xl-bold-font-style: normal;
    --xl-bold-font-weight: 800;
    --xl-bold-line-height: 100%; /* 66px */
    --xl-bold-letter-spacing: -1.732px;

  /* XXL Bold - 5.25× */
  --xxl-bold-5-25x-font-family: 'Inter', sans-serif;
  --xxl-bold-5-25x-font-size: 84px;
  --xxl-bold-5-25x-font-style: normal;
  --xxl-bold-5-25x-font-weight: 800;
  --xxl-bold-5-25x-line-height: 100%; /* 84px */
  --xxl-bold-5-25x-letter-spacing: -2.94px;

  /* Design-specific widths */
  --width-content-column: 62%;
  --width-sidebar-column: 38%;

   /* custom gap widths */
   /* custom gap widths */
  --col-gap-36: 2.25rem;
  --col-gap-54: 3.375rem;

  /* 12-column grid system */
  --col-1: calc(1 / 12 * 100%);
  --col-2: calc(2 / 12 * 100%);
  --col-3: calc(3 / 12 * 100%);
  --col-3-5: calc(3.5 / 12 * 100%);
  --col-4: calc(4 / 12 * 100%);
  --col-4-5: calc(4.5 / 12 * 100%);
  --col-5: calc(5 / 12 * 100%);
  --col-6: calc(6 / 12 * 100%);
  --col-7: calc(7 / 12 * 100%);
  --col-7-5: calc(7.5 / 12 * 100%);
  --col-8: calc(8 / 12 * 100%);
  --col-8-5: calc(8.5 / 12 * 100%);
  --col-9: calc(9 / 12 * 100%);
  --col-10: calc(10 / 12 * 100%);
  --col-11: calc(11 / 12 * 100%);
  --col-12: 100%;

  /* Padding */
  --padding-1-5: 0.375rem;
  --hero-pt-mobile: 5.25rem; 

  /* Text Indent */
  --indent-neg-1-4: -1.4rem;
}



/* Utility Class */

/* Padding */
.py-1-5 { padding-top: var(--padding-1-5); padding-bottom: var(--padding-1-5); }
.hero-pt-mobile { padding-top: var(--hero-pt-mobile); }

/* Text Indent */
.indent-neg-1-4 { text-indent: var(--indent-neg-1-4); }

/* Color Utilities */
.light-gray-bg { background-color: var(--light-gray); }
.bg-gray-charcoal { background-color: var(--GRAY-Charcoal); }
.bg-red { background-color: var(--primary-red); }
/* .bg-white { background-color: var(--primary-white); } */
.border-gray-smoke { border: var(--border-gray-smoke); }
.border-t-gray-smoke { border-top: var(--border-gray-smoke); }
.border-x-gray-smoke { border-left: var(--border-gray-smoke); border-right: var(--border-gray-smoke); }
.border-y-gray-smoke { border-top: var(--border-gray-smoke); border-bottom: var(--border-gray-smoke); }
.border-black-top-only-3 { border-top: var(--border-black-3); }
.border-black-bottom-only { border-bottom: var(--border-black); }
.text-red { color: var(--primary-red); }
/* .text-white { color: var(--primary-white) } */
.text-white { color: #fff; }
.text-gray-smoke { color: var(--gray-smoke) }
.text-black { color: var(--black) }

/* Primary Button */
.btn-primary {
  /* Layout */
  display: inline-flex;
  width: var(--btn-primary-min-width);
  padding: var(--btn-primary-padding);
  justify-content: center;
  align-items: center;
  
  /* Style */
  border-radius: var(--btn-primary-border-radius);
  background: var(--btn-primary-bg);
  border: 2px solid var(--primary-red);
  cursor: pointer;
  
  /* Typography (BODY/Bold */
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: .5;
  letter-spacing: -0.053px;
  
  /* Text */
  color: var(--btn-primary-color);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  
  /* Transition */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Hover state - outline with black border */
.btn-primary:hover {
  /* background: var(--primary-white); */
  background: #fff;
  color: var(--primary-black);
  border-color: var(--primary-black);
}

/* Active/Focus states */
.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:focus {
  outline: 2px solid var(--primary-red);
  outline-offset: 2px;
}

/* Text Utilities */
.text-base-regular, .email-input {
  font-family: var(--base-regular-font-family);
  font-size: var(--base-regular-font-size);
  font-style: var(--base-regular-font-style);
  font-weight: var(--base-regular-font-weight);
  line-height: var(--base-regular-line-height);
  letter-spacing: var(--base-regular-letter-spacing);
}
.text-base-bold {
  font-family: var(--base-bold-font-family);
  font-size: var(--base-bold-font-size);
  font-style: var(--base-bold-font-style);
  font-weight: var(--base-bold-font-weight);
  line-height: var(--base-bold-line-height);
  letter-spacing: var(--base-bold-letter-spacing);
}
.text-m-regular-2-25x {
  font-family: var(--m-regular-2-25x-font-family);
  font-size: var(--m-regular-2-25x-font-size);
  font-style: var(--m-regular-2-25x-font-style);
  font-weight: var(--m-regular-2-25x-font-weight);
  line-height: var(--m-regular-2-25x-line-height);
  letter-spacing: var(--m-regular-2-25x-letter-spacing);
}
.text-m-bold-2-25x {
  font-family: var(--m-bold-2-25x-font-family);
  font-size: var(--m-bold-2-25x-font-size);
  font-style: var(--m-bold-2-25x-font-style);
  font-weight: var(--m-bold-2-25x-font-weight);
  line-height: var(--m-bold-2-25x-line-height);
  letter-spacing: var(--m-bold-2-25x-letter-spacing);
}
.text-l-bold-3x {
  font-family: var(--l-bold-3x-font-family);
  font-size: var(--l-bold-3x-font-size);
  font-style: var(--l-bold-3x-font-style);
  font-weight: var(--l-bold-3x-font-weight);
  line-height: var(--l-bold-3x-line-height);
  letter-spacing: var(--l-bold-3x-letter-spacing);
}
.text-xxs-bold-0-75x {
  font-family: var(--xxs-bold-0-75x-font-family);
  font-size: var(--xxs-bold-0-75x-font-size);
  font-style: var(--xxs-bold-0-75x-font-style);
  font-weight: var(--xxs-bold-0-75x-font-weight);
  line-height: var(--xxs-bold-0-75x-line-height);
  letter-spacing: var(--xxs-bold-0-75x-letter-spacing);
}
.text-xs-regular-1-125x, .post p, .post ul li {
  font-family: var(--xs-regular-1-125x-font-family);
  font-size: var(--xs-regular-1-125x-font-size);
  font-style: var(--xs-regular-1-125x-font-style);
  font-weight: var(--xs-regular-1-125x-font-weight);
  line-height: var(--xs-regular-1-125x-line-height);
  letter-spacing: var(--xs-regular-1-125x-letter-spacing);
}
.text-xs-bold-1-125x, .post p strong, .post strong {
  font-family: var(--xs-bold-1-125x-font-family);
  font-size: var(--xs-bold-1-125x-font-size);
  font-style: var(--xs-bold-1-125x-font-style);
  font-weight: var(--xs-bold-1-125x-font-weight);
  line-height: var(--xs-bold-1-125x-line-height);
  letter-spacing: var(--xs-bold-1-125x-letter-spacing);
}
.text-s-regular-1-5x {
  font-family: var(--s-regular-1-5x-font-family);
  font-size: var(--s-regular-1-5x-font-size);
  font-style: var(--s-regular-1-5x-font-style);
  font-weight: var(--s-regular-1-5x-font-weight);
  line-height: var(--s-regular-1-5x-line-height);
  letter-spacing: var(--s-regular-1-5x-letter-spacing);
}
.text-s-bold-1-5x, .post h2 {
  font-family: var(--s-bold-1-5x-font-family);
  font-size: var(--s-bold-1-5x-font-size);
  font-style: var(--s-bold-1-5x-font-style);
  font-weight: var(--s-bold-1-5x-font-weight);
  line-height: var(--s-bold-1-5x-line-height);
  letter-spacing: var(--s-bold-1-5x-letter-spacing);
}
.text-xl-bold-3x {
  font-family: var(--xl-bold-3x-font-family);
  font-size: var(--xl-bold-3x-font-size);
  font-style: var(--xl-bold-3x-font-style);
  font-weight: var(--xl-bold-3x-font-weight);
  line-height: var(--xl-bold-3x-line-height);
  letter-spacing: var(--xl-bold-3x-letter-spacing);
}
.text-xl-bold {
  font-family: var(--xl-bold-font-family);
  font-size: var(--xl-bold-font-size);
  font-style: var(--xl-bold-font-style);
  font-weight: var(--xl-bold-font-weight);
  line-height: var(--xl-bold-line-height);
  letter-spacing: var(--xl-bold-letter-spacing);
}
.text-xxl-bold-5-25x {
  font-family: var(--xxl-bold-5-25x-font-family);
  font-size: var(--xxl-bold-5-25x-font-size);
  font-style: var(--xxl-bold-5-25x-font-style);
  font-weight: var(--xxl-bold-5-25x-font-weight);
  line-height: var(--xxl-bold-5-25x-line-height);
  letter-spacing: var(--xxl-bold-5-25x-letter-spacing);
}
/* Base width utilities */
.w-content-col { width: var(--width-content-column); }
.w-sidebar-col { width: var(--width-sidebar-column); }
/* Layout Utilities */
.flex-col-row {
  display: flex;
  flex-direction: column;
}
.flex-0-auto {
    flex: 0 0 auto;
}
/* Targets EXP Squares specifically */
.flex-col-row > .exp-square {
  flex: 1 1 0;
  min-width: 0;
}
.flex-1-0 {
    flex: 1 0 0;
}
/* Gap Utilities */
.col-gap-36 { column-gap: var(--col-gap-36); }
.col-gap-54 { column-gap: var(--col-gap-54); }

/* Menu Link Styles */
.menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-arrow, .link-arrow {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.menu-link:hover .menu-arrow, .link-arrow {
  opacity: 1;
}

/* Hero Title */
.hero-title, .challenges-title, .more-title, .subscribe-title, .press-title {
  font-family: var(--m-bold-2-25x-font-family);
  font-size: var(--m-bold-2-25x-font-size);
  font-style: var(--m-bold-2-25x-font-style);
  font-weight: var(--m-bold-2-25x-font-weight);
  line-height: var(--m-bold-2-25x-line-height);
  letter-spacing: var(--m-bold-2-25x-letter-spacing);
}

/* Grid Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; } 

/* Width utilities - mobile first */
.w-col-1 { width: var(--col-1); }
.w-col-2 { width: var(--col-2); }
.w-col-3 { width: var(--col-3); }
.w-col-3-5 { width: var(--col-3-5); }
.w-col-4 { width: var(--col-4); }
.w-col-4-5 { width: var(--col-4-5); }
.w-col-5 { width: var(--col-5); }
.w-col-6 { width: var(--col-6); }
.w-col-7 { width: var(--col-7); }
.w-col-7-5 { width: var(--col-7-5); }
.w-col-8 { width: var(--col-8); }
.w-col-8-5 { width: var(--col-8-5); }
.w-col-9 { width: var(--col-9); }
.w-col-10 { width: var(--col-10); }
.w-col-11 { width: var(--col-11); }
.w-col-12 { width: var(--col-12); }

/* Subscribe Form */

.signup-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    flex-wrap: wrap;
    position: relative;
}

/* Honeypot fields - hidden from view but accessible to bots */
.subscribeForm {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.email-input {
    min-width: 100%;
    padding: 26px 24px;
    height: 64px;
    box-sizing: border-box;
    border: none !important;
    outline: none;
    background-color: #fff;
}

.email-input::placeholder {
    color: var(--color-placeholder, #666);
}

.post a {
  border-bottom: 2px solid var(--black);
}

/* SEARCH INPUT */

.search-input-container {
  border-bottom: 1px solid var(--gray-smoke);
  padding: 18px 24px 24px 18px;
  display: flex;
  align-items: center;
}

#search-input.search-input {
  background: transparent;
  width: 100%;
  border: none;
  display: flex;
  flex: 1;
  align-items: center;
  color: var(--GRAY-Charcoal);
}

.search-input-magnifier::before {
  color: var(--GRAY-Charcoal, #323232);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.2px;
}

.search-input-container #search-input.search-input:focus {
  outline: none;
}

.search-input-container:focus-within {
  box-shadow: 0 2px 8px rgba(50, 50, 50, 0.1);
}

/* Our Clients Hero */

.our-clients-hero {
  position: relative;
  width: 100%;
  min-height: 500px; /* Adjust based on your content needs */
  background-image: url('/uploads/exp-our-clients-hero-bg-2026.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 80px;
}

.our-clients-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 79.35%);
  pointer-events: none;
  z-index: 1;
}

.our-clients-hero > * {
  position: relative;
  z-index: 2; /* Ensures content appears above the gradient overlay */
  color: white;
}

/* Hero Breadcrumb */

.hero-breadcrumb, .hero-breadcrumb-hidden {
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.hero-breadcrumb::after, .hero-breadcrumb-hidden::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: black;
  transition: width 0.3s ease;
}

.hero-breadcrumb::after { width: 100%; }

.hero-breadcrumb-hidden:hover::after {
  width: 100%;
}

/* Logo grid borders */
.logo-wall > div {
    border-bottom: 1px solid #d2d2d2;
}

/* Remove right border on last column and bottom border on last row */

/* Mobile layout (1 column) - default */
.logo-wall > div:last-child {
    border-bottom: none;
}
/* Force Swiper slides to have equal heights */
 .card-wrapper {
    align-items: stretch;
}

.card-wrapper .single-card {
    height: auto;
    display: flex;
}

.card-wrapper .single-card > a {
    display: flex;
    width: 100%;
}

/* Ensure the card stretches to fill the slide */
.card-wrapper .single-card .bg-white {
    box-sizing: border-box;
    flex: 1;
}

/* Small breakpoint (sm: 640px) */
@media (min-width: 640px) {
  .sm\:w-col-1 { width: var(--col-1); }
  .sm\:w-col-2 { width: var(--col-2); }
  .sm\:w-col-3 { width: var(--col-3); }
  .sm\:w-col-3-5 { width: var(--col-3-5); }
  .sm\:w-col-4 { width: var(--col-4); }
  .sm\:w-col-4-5 { width: var(--col-4-5); }
  .sm\:w-col-5 { width: var(--col-5); }
  .sm\:w-col-6 { width: var(--col-6); }
  .sm\:w-col-7 { width: var(--col-7); }
  .sm\:w-col-7-5 { width: var(--col-7-5); }
  .sm\:w-col-8 { width: var(--col-8); }
  .sm\:w-col-8-5 { width: var(--col-8-5); }
  .sm\:w-col-9 { width: var(--col-9); }
  .sm\:w-col-10 { width: var(--col-10); }
  .sm\:w-col-11 { width: var(--col-11); }
  .sm\:w-col-12 { width: var(--col-12); }
  .sm\:w-content-col { width: var(--width-content-column); }
  .sm\:w-sidebar-col { width: var(--width-sidebar-column); }
  /* Grid Columns */
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sm\:grid-cols-none { grid-template-columns: none; } 
}

/* Tablet breakpoint (md: 768px) */
@media (min-width: 768px) {
  .md\:w-col-1 { width: var(--col-1); }
  .md\:w-col-2 { width: var(--col-2); }
  .md\:w-col-3 { width: var(--col-3); }
  .md\:w-col-3-5 { width: var(--col-3-5); }
  .md\:w-col-4 { width: var(--col-4); }
  .md\:w-col-4-5 { width: var(--col-4-5); }
  .md\:w-col-5 { width: var(--col-5); }
  .md\:w-col-6 { width: var(--col-6); }
  .md\:w-col-7 { width: var(--col-7); }
  .md\:w-col-7-5 { width: var(--col-7-5); }
  .md\:w-col-8 { width: var(--col-8); }
  .md\:w-col-8-5 { width: var(--col-8-5); }
  .md\:w-col-9 { width: var(--col-9); }
  .md\:w-col-10 { width: var(--col-10); }
  .md\:w-col-11 { width: var(--col-11); }
  .md\:w-col-12 { width: var(--col-12); }
  .md\:w-content-col { width: var(--width-content-column); }
  .md\:w-sidebar-col { width: var(--width-sidebar-column); }
  /* Grid Columns */
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:grid-cols-none { grid-template-columns: none; } 
  .email-input { min-width: 540px; }
  .md\:text-xl-bold {
    font-family: var(--xl-bold-font-family);
    font-size: var(--xl-bold-font-size);
    font-style: var(--xl-bold-font-style);
    font-weight: var(--xl-bold-font-weight);
    line-height: var(--xl-bold-line-height);
    letter-spacing: var(--xl-bold-letter-spacing);
  } 
}

@media (min-width: 768px) and (max-width: 1023px) {
   /* Tablet layout Logo Wall (2 columns) */
  .logo-wall > div {
    border-right: 1px solid #d2d2d2;
  }
  .logo-wall > div:nth-child(2n) {
        border-right: none; /* Remove right border on every 2nd item (last column) */
    }
    
    .logo-wall > div:nth-last-child(-n+2) {
        border-bottom: none; /* Remove bottom border on last 2 items (last row) */
    }
}

/* Desktop breakpoint (lg: 1024px) */
@media (min-width: 1024px) {
  .lg\:w-col-1 { width: var(--col-1); }
  .lg\:w-col-2 { width: var(--col-2); }
  .lg\:w-col-3 { width: var(--col-3); }
  .lg\:w-col-3-5 { width: var(--col-3-5); }
  .lg\:w-col-4 { width: var(--col-4); }
  .lg\:w-col-4-5 { width: var(--col-4-5); }
  .lg\:w-col-5 { width: var(--col-5); }
  .lg\:w-col-6 { width: var(--col-6); }
  .lg\:w-col-7 { width: var(--col-7); }
  .lg\:w-col-7-5 { width: var(--col-7-5); }
  .lg\:w-col-8 { width: var(--col-8); }
  .lg\:w-col-8-5 { width: var(--col-8-5); }
  .lg\:w-col-9 { width: var(--col-9); }
  .lg\:w-col-10 { width: var(--col-10); }
  .lg\:w-col-11 { width: var(--col-11); }
  .lg\:w-col-12 { width: var(--col-12); }
  .flex-col-row { flex-direction: row; }
  .lg\:w-content-col { width: var(--width-content-column); }
  .lg\:w-sidebar-col { width: var(--width-sidebar-column); }
  /* Grid Columns */
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:grid-cols-none { grid-template-columns: none; } 
  .hero-title, .challenges-title, .subscribe-title {
    font-family: var(--l-bold-3x-font-family);
    font-size: var(--l-bold-3x-font-size);
    font-style: var(--l-bold-3x-font-style);
    font-weight: var(--l-bold-3x-font-weight);
    line-height: var(--l-bold-3x-line-height);
    letter-spacing: var(--l-bold-3x-letter-spacing);
  }
  .press-title {
    font-family: var(--xl-bold-font-family);
    font-size: var(--xl-bold-font-size);
    font-style: var(--xl-bold-font-style);
    font-weight: var(--xl-bold-font-weight);
    line-height: var(--xl-bold-line-height);
    letter-spacing: var(--xl-bold-letter-spacing);
  }
  .more-title {
    font-family: var(--xl-bold-font-family);
    font-size: var(--xl-bold-font-size);
    font-style: var(--xl-bold-font-style);
    font-weight: var(--xl-bold-font-weight);
    line-height: var(--xl-bold-line-height);
    letter-spacing: var(--xl-bold-letter-spacing);
  }
  .lg\:border-x-gray-smoke { border-left: var(--border-gray-smoke); border-right: var(--border-gray-smoke); }
  .border-y-gray-smoke { border-top: none; border-bottom: none; }
  .lg\:text-white { color: #fff; }
  .our-clients-hero { margin-top: 136px; };
  /* Desktop layout Logo Wall (4 columns) */
  .logo-wall > div {
    border-right: 1px solid #d2d2d2;
  }
  .logo-wall > div:nth-child(2n) {
        border-right: 1px solid #d2d2d2;
        border-left: 1px solid #d2d2d2;
    }
    
    .logo-wall > div:nth-child(4n) {
        border-right: none; /* Remove right border on every 4th item (last column) */
    }
    
    .logo-wall > div:nth-last-child(-n+4) {
        border-bottom: none; /* Remove bottom border on last 4 items (last row) */
    }
    .hero-pt-mobile { padding-top: 0; }
}

/* Large desktop breakpoint (xl: 1280px) */
@media (min-width: 1280px) {
  .xl\:w-col-1 { width: var(--col-1); }
  .xl\:w-col-2 { width: var(--col-2); }
  .xl\:w-col-3 { width: var(--col-3); }
  .xl\:w-col-3-5 { width: var(--col-3-5); }
  .xl\:w-col-4 { width: var(--col-4); }
  .xl\:w-col-4-5 { width: var(--col-4-5); }
  .xl\:w-col-5 { width: var(--col-5); }
  .xl\:w-col-6 { width: var(--col-6); }
  .xl\:w-col-7 { width: var(--col-7); }
  .xl\:w-col-7-5 { width: var(--col-7-5); }
  .xl\:w-col-8 { width: var(--col-8); }
  .xl\:w-col-8-5 { width: var(--col-8-5); }
  .xl\:w-col-9 { width: var(--col-9); }
  .xl\:w-col-10 { width: var(--col-10); }
  .xl\:w-col-11 { width: var(--col-11); }
  .xl\:w-col-12 { width: var(--col-12); }
  .xl\:w-content-col { width: var(--width-content-column); }
  .xl\:w-sidebar-col { width: var(--width-sidebar-column); }
  .hero-title {
    font-family: var(--xxl-bold-5-25x-font-family);
    font-size: var(--xxl-bold-5-25x-font-size);
    font-style: var(--xxl-bold-5-25x-font-style);
    font-weight: var(--xxl-bold-5-25x-font-weight);
    line-height: var(--xxl-bold-5-25x-line-height);
    letter-spacing: var(--xxl-bold-5-25x-letter-spacing);
  }
}