@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap');

/* ========================================
   ABOUT PAGE - Mobile First
   ======================================== */

.about-page {
  color: #ffffff;
  font-family: "Eudoxus Sans", sans-serif;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.about-page-ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  /* Visible at stack level 0, content needs to be higher */
  pointer-events: none;
}

body.page-template-page-about,
body.page-template-page-about main,
body.page-template-page-about .about-page,
.page-template-page-about,
body.page-template-front-page,
body.page-template-front-page main,
body.page-template-front-page .about-page {
  background-color: #1D1D1D !important;
}



/* -------------------------------------------------
   HERO SECTION
   ------------------------------------------------- */
.about-page .hero-wrapper {
  position: relative;
  z-index: 2;
  /* Ensure hero content is above ripples */
  /* For absolute positioned decorations */
}

.about-page .hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 85px;
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}

/* Hero Decorative Elements */
.about-page .hero-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.about-page .hero-deco {
  position: absolute;
}

.about-page .hero-deco-mouse {
  top: 0;
  left: 0;
  height: 75.69px;
  width: auto;
}

.about-page .hero-deco-thumbs {
  top: 0;
  right: 0;
  height: 70.86px;
  width: auto;
}

.about-page .hero-deco-robot {
  bottom: 0;
  left: 0;
  height: 95px;
  width: auto;
}

.about-page .hero-deco-note {
  bottom: 0;
  right: 0;
  height: 85px;
  width: auto;
}

.about-page .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Spacing between title and description */
  margin-bottom: 30px;
  /* Spacing between content and buttons */
}

.about-page .hero-title {
  font-family: "Unbounded", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 0%;
  color: #FEF9F6;
  text-align: center;
  margin: 0;
}

.title-line {
  display: inline;
}

.about-page .hero-title .highlight {
  opacity: 0.5;
}

.about-page .hero-subtitle {
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: -1%;
  color: #C3C3C3;
  opacity: 60%;
  text-align: center;
  margin: 0;
  max-width: 600px;
}

.about-page .hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  align-items: center;
}

.about-page .btn-primary {
  background-color: #ADEBE7;
  color: #1D1D1D;
  border: none;
  font-family: "Rethink Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -1%;
  padding: 16px 24px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 100%;
}

.about-page .btn-primary strong {
  font-weight: 700;
}

.about-page .btn-secondary {
  background-color: #212121;
  color: #fff;
  border: 1px solid rgba(255, 241, 235, 0.2);
  font-family: "Rethink Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: -1%;
  padding: 16px 24px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 100%;
}

/* -------------------------------------------------
   PARTNERS SECTION (We've Worked With)
   ------------------------------------------------- */
.about-page .partners-section {
  padding-top: 11px;
  padding-bottom: 50px;
}

.about-page .partners-title {
  font-family: "Unbounded", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -3%;
  color: #ffffff;
  opacity: 30%;
  text-align: center;
  margin: 0;
  margin-bottom: 33px;
}

.about-page .partners-container {
  background-color: #212121;
  padding: 15px 23px 11px 23px;
  overflow: hidden;
}

.about-page .partners-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  animation: scroll-partners 30s linear infinite;
  width: max-content;
}

.about-page .partner-logo {
  flex-shrink: 0;
  height: auto;
  width: auto;
}

@keyframes scroll-partners {
  0% {
    transform: translateX(0);
  }

  100% {
    /* 
     * IMPORTANT: translateX(-50%) scrolls half the content width.
     * But we need to also account for the gap after the 12th item.
     * Since gaps are between items, there are 11 gaps in 12 items.
     * The duplicated set starts after item 12 with a gap.
     * calc(-50% - 16px) compensates for half the gap (32px / 2).
     */
    transform: translateX(calc(-50% - 16px));
  }
}

/* -------------------------------------------------
   SERVICES SECTION (Sticky Notes)
   ------------------------------------------------- */
/* -------------------------------------------------
   SERVICES SECTION
   ------------------------------------------------- */
.about-page .services-section {
  background-color: #212121;
  padding-top: 50px;
  padding-bottom: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-page .services-title-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* As requested, though items-center handles alignment */
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  /* Spacing before notes *NOT* specified but needed for visual separation, user said 'no need to use any gap to seperate this section and the above title container section', which implies they might be distinct but normally there's flow. Wait, "no need to use any gap... into another section". Let's stick to no margin if user insists, but usually requires some spacing. User said "no need to use any gap". I will use 0 gap/margin if strictly requested, but flex gap on parent might be needed. Let's start with 0 margin on container and rely on flow. */
  margin-bottom: 0;
}

/* If the user meant "no gap between title container And notes container", I should ensure that. */

.about-page .services-title {
  font-family: "Unbounded", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -3%;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
}

.about-page .mini-wave-icon {
  width: auto;
  height: auto;
}

.about-page .services-notes-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Stacking the notes vertically as per image */
  margin-top: -40px;
  /* Negative margin to pull up per request */
  position: relative;
  z-index: 2;
  /* Ensure above bubbles */
}

.about-page .service-note {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -90px;
  /* Reduced from -110px */
  background: transparent !important;
  /* Ensure no unwanted bg */
}

.about-page .service-note:last-child {
  margin-bottom: 0;
}

.about-page .note-bg {
  width: 100%;
  max-width: 350px;
  /* Adjust based on asset natural size */
  height: auto;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.2));
}

.about-page .note-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 30px;
  /* Adjusting visual center per request */
  font-family: "Unbounded", sans-serif;
  font-size: 27.04px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -2px;
  max-width: 100%;
  /* I set this previously, assuming it overrides the 213px? The orphan had 213px. */
  text-align: center;
  width: 100%;
  margin: 0;
  color: #000000;
}

.about-page .highlight {
  position: relative;
  display: inline-block;

  /* Text color match */
  text-decoration: underline;
  text-decoration-color: rgba(254, 249, 246, 0.5);
  /* #FEF9F6 at 50% */
  text-underline-offset: 8px;
  /* Adjustable visual preference */
  text-decoration-thickness: 3px;
  /* Keep it subtle */
}

.about-page .ampersand {
  color: #FEF9F6;
  opacity: 0.5;
  /* Consistent opacity */
  text-decoration: none;
  font-weight: inherit;
}

/* Rotations */
.about-page .note-1 {
  transform: rotate(1.54deg);
  z-index: 1;
  margin-bottom: -100px;
  /* Pull Note 2 up */
}

.about-page .note-2 {
  transform: rotate(-3.64deg);
  z-index: 2;
  margin-bottom: -115px;

}

.about-page .note-3 {
  transform: rotate(1.54deg);
  z-index: 3;
  margin-bottom: -110px;

}

.about-page .note-4 {
  transform: rotate(0deg);
  z-index: 4;
}




/* -------------------------------------------------
   PUBLICATIONS SECTION
   ------------------------------------------------- */
/* -------------------------------------------------
   PRODUCTS/SOLUTIONS SECTION
   ------------------------------------------------- */
.about-page .products-section {
  padding: 50px 7.5px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Increased from 30px */
  align-items: center;
  /* Center for Mobile */
  position: relative;
  /* Required for z-index */
  z-index: 10;
}

.about-page .products-title {
  font-family: "Unbounded", sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 115%;
  letter-spacing: -3%;
  font-weight: 500;
  text-align: center;
  /* Center for Mobile */
  margin: 0;
  padding-left: 0;
  /* Align with content padding if needed */
}

.about-page .products-carousel {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  width: 100%;
  padding-bottom: 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Hide scrollbar Firefox */
}

.about-page .products-carousel::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar Chrome/Safari */
}

.about-page .product-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: 380px;
  /* Increased from 315px */
  scroll-snap-align: center;
}

/* Legacy duplicated styles removed */

/* Duplicate legacy styles removed */

.about-page .products-carousel {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  /* Allow scrolling for carousel effect */
  width: 100%;
  padding-bottom: 0px;
  /* Removing scrollbar padding to rely on clean spacing */
  padding-left: 30px;
  padding-right: 30px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar */
  scrollbar-width: none;
}

.about-page .products-carousel::-webkit-scrollbar {
  display: none;
}

.about-page .product-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: 315px;
  /* Card outer container for layout */
  scroll-snap-align: center;
}

.about-page .product-card-inner {
  position: relative;
  background-color: #212121;
  border-radius: 0;
  /* No roundness */
  padding-top: 26.53px;
  padding-bottom: 0px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Gradient Border around Card */
.about-page .product-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  /* No roundness */
  padding: 0.83px;
  background: linear-gradient(to bottom,
      rgba(102, 102, 102, 0.5),
      rgba(0, 0, 0, 0.5));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.about-page .product-card-header {
  padding-left: 19.89px;
  padding-right: 19.89px;
  padding-bottom: 19.89px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

}

/* Header Bottom Stroke (Inset to match padding) */
.about-page .product-card-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 19.89px;
  right: 19.89px;
  height: 1px;
  /* Increased from 0.21px for visibility */
  background: linear-gradient(to bottom, #666666 0%, #000000 100%);
  opacity: 0.5;
  z-index: 10;
}



.about-page .header-left {
  display: flex;
  flex-direction: column;
  gap: 6.63px;
}

.about-page .product-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 500;
  font-size: 16.58px;
  color: #FFFFFF;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -1%;
}

.about-page .product-desc {
  font-family: "Rethink Sans", sans-serif;
  font-weight: 400;
  font-size: 9.95px;
  color: #FFFFFF;
  opacity: 0.5;
  margin: 0;
  line-height: normal;
}

.about-page .try-btn {
  -webkit-appearance: none;
  appearance: none;
  background-color: #181818;
  color: #FFFFFF;
  font-family: "Rethink Sans", sans-serif;
  /* Assumed font */
  font-size: 9.95px;
  font-weight: 500;
  padding: 11.61px 9.95px;
  border-radius: 4.97px;
  cursor: pointer;

  /* Button Border: 0.08px Gradient */
  border: 1px solid transparent;
  /* Fallback */
  background-image: linear-gradient(#181818, #181818),
    linear-gradient(to right, rgba(153, 153, 153, 0.3) 0%, rgba(255, 255, 255, 0.05) 96%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* Note: 0.08px is extremely thin, CSS usually renders min 1px on low DPI but scalable */
  border-width: 1px;
  /* Forced to 1px for visibility, otherwise 0.08px is invisible */

  /* Drop Shadows */
  box-shadow:
    0px 0.83px 2.49px rgba(0, 0, 0, 0.2),
    0px 0.83px 0.25px rgba(0, 0, 0, 0.1);
}

.about-page .try-btn--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.about-page a.try-btn {
  text-decoration: none;
  display: inline-block;
}

.about-page .product-card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: relative;
  min-height: 250px;
  flex: 1;
  overflow: hidden;
}

.about-page .product-image {
  max-width: 100%;
  height: auto;
}

/* Footer Wrapper for Spacing Control */
.about-page .product-card-footer-wrapper {
  padding: 1px;
}

.about-page .product-card-footer {
  height: 49.74px;
  width: 100%;
  border-radius: 0;

  /* Glass Effect */
  background: rgba(33, 33, 33, 0.05);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);

  /* Top Stroke */
  border-top: 0.83px solid rgba(102, 102, 102, 0.5);
  position: relative;

  /* Drop Shadow */
  box-shadow: 0px -13.26px 12.02px rgba(0, 0, 0, 0.25);
}



/* Coming Soon Product Cards */
.about-page .product-card--coming-soon .product-card-content {
  overflow: hidden;
}

.about-page .product-card--coming-soon .product-image {
  filter: blur(12px);
  opacity: 0.5;
  transform: scale(1.1);
}

.about-page .coming-soon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-family: "Rethink Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* Indicators */
.about-page .carousel-indicators {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
  /* Ensure full width for centering */
  align-self: center;
  /* Override flex-start of parent if needed */
}

.about-page .indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4E4E4E;
  /* Inactive color */
  border: none;
  /* No border */
  cursor: pointer;
  transition: background-color 0.3s;
}

.about-page .indicator.active {
  background-color: #FFFFFF;
  /* Active color */
  border-color: #FFFFFF;
}

/* Duplicate Press Styles Removed */

/* -------------------------------------------------
   INFO / MISSION SECTION
   ------------------------------------------------- */
.about-page .mission-section {
  background: transparent;
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

.about-page .mission-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.about-page .section-icon {
  width: auto;
  height: auto;
}

.about-page .mission-title {
  font-family: "Unbounded", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}

.about-page .mmission-content {
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
  max-width: 65%;
}



.about-page .highlight-underline {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: 6%;
  text-underline-offset: auto;
}

.about-page .highlight-gray {
  color: #C3C3C3;
}

/* -------------------------------------------------
   PRESS SECTION
   ------------------------------------------------- */
.press-section {
  padding: 40px var(--site-padding);
}

.press-title {
  font-family: "Unbounded", sans-serif;
  font-size: 20px;
  margin-bottom: 32px;
  text-align: center;
}

.press-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Legacy press-card styles removed */

/* -------------------------------------------------
   PRESS FEATURES SECTION (Folder Cards)
   ------------------------------------------------- */
.about-page .press-section {
  background: transparent;
  padding-top: 50px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-page .press-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13.34px;
  margin-bottom: 30px;
  /* Gap between title and cards */
}

.about-page .press-title {
  font-family: "Unbounded", sans-serif;
  font-size: 23.35px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -3%;
  color: #FFFFFF;
  margin: 0;
}

.about-page .press-grid {
  display: flex;
  flex-direction: column;
  gap: 100px;
  /* Increased gap for mobile so cards don't overlap */
  align-items: center;
  padding-top: 70px;
  /* Reducing from 110px as requested "too much" */
}

/* Main Folder Wrapper */
.about-page .press-card {
  position: relative;
  width: 316.09px;
  /* From spec */
  height: 233.52px;
  /* From spec */
  /* Ensure centering */
  display: flex;
  justify-content: center;
  /* Compensation for Reveal Card Translate Up */
  margin-top: 45.04px;
}

/* Dark Back Rect */
.about-page .card-back-rect {
  position: absolute;
  inset: 0;
  background-color: #212121;
  border-top-right-radius: 20.02px;
  border-radius: 0 20.02px 0 0;
  /* Only top right specified, but standard usually has some? sticking to spec */
  z-index: 0;

  /* Gradient Border 0.83px */
  border: 0.83px solid transparent;
  /* Need proper gradient border methodology */
}

.about-page .card-back-rect::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 20.02px 0 0;
  padding: 0.83px;
  background: linear-gradient(to bottom, #666666 0%, #000000 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* White Reveal Card */
.about-page .reveal-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 275.22px;
  height: 272.72px;
  background-color: #FFFFFF;

  /* Default state: closed */
  transform: translate(-50%, calc(-50% - 45.04px));
  /* Smooth transition for open/close animation */
  transition: transform 0.4s ease-out;

  z-index: 1;
  /* Above Back Rect, Below Pocket */

  padding-top: 24.48px;
  padding-left: 14.18px;
  padding-right: 14.18px;
  /* box-sizing assumption */
  box-sizing: border-box;

  /* Flex removed here, moved to .reveal-content */
}

.about-page .reveal-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10.96px;
  /* Correct gap between Text Group and Image */
  height: 100%;
}

/* Hover: Open the card */
.about-page .press-card:hover .reveal-card {
  transform: translate(-50%, calc(-50% - 94.66px));
}

/* Legacy class-based states (can be removed if not needed) */
.about-page .press-card.open .reveal-card {
  transform: translate(-50%, calc(-50% - 94.66px));
}

.about-page .press-card.closed .reveal-card {
  transform: translate(-50%, calc(-50% - 45.04px));
}

.about-page .reveal-text-group {
  display: flex;
  flex-direction: column;
  gap: 6.67px;
  /* Correct gap between Title and Desc */
  /* margin-bottom removed to prevent double spacing */
}

.about-page .reveal-title {
  font-family: "Unbounded", sans-serif;
  /* Not specified but standard for bold titles */
  /* bold, 16.68 */
  font-weight: 700;
  font-size: 16.68px;
  line-height: 1.2;
  letter-spacing: -2%;
  color: #181818;
  margin: 0;
  /* margin-bottom removed to prevent double spacing */
}

.about-page .reveal-desc {
  font-family: "Outfit", sans-serif;
  /* Requested font import, assume available or fallback */
  font-weight: 400;
  /* Regular */
  font-size: 10.01px;
  letter-spacing: -0.42px;
  color: #181818;
  opacity: 0.6;
  margin: 0;
}

.about-page .reveal-image-container {
  height: 120.1px;
  width: 100%;
  overflow: hidden;
  /* maybe radius? not spec'd, assume square or fit */
}

.about-page .reveal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default: hidden when closed */
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Show image on hover */
.about-page .press-card:hover .reveal-image {
  opacity: 1;
}

/* Front Pocket Rect */
.about-page .card-pocket {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Default: closed state height */
  height: 187.65px;

  background-color: #212121;
  z-index: 2;
  /* Topmost */

  display: flex;
  justify-content: center;
  align-items: center;

  /* Drop Shadow */
  box-shadow: 0px -13.34px 12.09px rgba(0, 0, 0, 0.25);
  /* Smooth transition for open/close animation */
  transition: height 0.4s ease-out;
}

/* Gradient Stroke for Pocket */
.about-page .card-pocket::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.83px;
  background: linear-gradient(to bottom, #666666 0%, #000000 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Hover: Open the pocket (smaller height reveals more paper) */
.about-page .press-card:hover .card-pocket {
  height: 96.74px;
}

/* Legacy class-based states (can be removed if not needed) */
/* Open State */
.about-page .press-card.open .card-pocket {
  height: 96.74px;
}

/* Closed State */
.about-page .press-card.closed .card-pocket {
  height: 187.65px;
}

.about-page .pocket-logo {
  /* centered irrespective of height */
  width: auto;
  height: auto;
  max-width: 80%;
}

/* -------------------------------------------------
   TEAM SECTION (Carousel)
   ------------------------------------------------- */
.about-page .team-section {
  background: transparent;
  padding-block: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-page .team-grid-desktop {
  display: none;
  /* Hidden on mobile */
}

.about-page .team-grid-desktop {
  display: none;
  /* Hidden on mobile */
}

.about-page .team-title {
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -3%;
  color: #FFFFFF;
  margin: 0;
  margin-bottom: 30.23px;
  /* Exact gap to cards */
  text-align: center;
}

.about-page .team-carousel {
  display: flex;
  flex-direction: row;
  /* Horizontal Carousel of Groups */
  width: 100%;
  position: relative;
  /* Coordinate context */
  gap: 30px;
  /* Horizontal gap between groups */
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Centering Logic: Padding = (100% - CardWidth) / 2 */
  /* Card width ~315px. On mobile (375px), pad ~30px. */
  padding-left: calc(50% - 157.38px);
  padding-right: calc(50% - 157.38px);

  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 20px;
  /* Prevent bottom clipping */
}

.about-page .team-carousel::-webkit-scrollbar {
  display: none;
}

/* The Slide Wrapper (Vertical Stack of 2 Cards) */
.about-page .team-group {
  /* Width matches the card exactly so snapping centers it efficiently */
  min-width: 314.77px;
  flex: 0 0 314.77px;

  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Vertical gap between cards (Updated from 16px) */
  scroll-snap-align: center;
  align-items: center;
  /* Center the cards in the slide */
}

.about-page .team-card {
  width: 100%;
  max-width: 314.77px;
  /* Fixed height to prevent expansion during animation */
  height: 400px;
  position: relative;
  background-color: #212121;
  flex-shrink: 0;

  /* Gradient Stroke 0.75px */
  border: 0.75px solid transparent;
  padding-top: 30px;
  /* padding-left/right removed to allow full-width image bleed */

  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* Clip content that overflows */
}

.about-page .team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* border-radius removed */
  padding: 0.75px;
  background: linear-gradient(to bottom, #666666 0%, #000000 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.about-page .team-card-flair {
  position: absolute;
  width: 227.95px;
  height: 207.09px;
  bottom: 0;
  left: 50%;

  /* Transform: Center X, Translate Y Down, Rotate Left */
  transform: translateX(-50%) translateY(61.52px) rotate(-30deg);

  background: linear-gradient(to bottom, #666666 0%, #000000 100%);
  /* Assuming this property */
  filter: blur(112.78px);
  z-index: 1;
  /* Behind text (2) and image (5) but above card bg */
  opacity: 0.6;
  /* Slight transparency for better blend? optional */
}

.about-page .team-content {
  text-align: center;
  position: relative;
  /* z-index removed so image can be on top */
  width: 100%;
  padding-left: 18px;
  /* Moved padding here */
  padding-right: 18px;
  z-index: 2;
  /* Ensure text is above flair */
}

.about-page .member-name {
  font-family: "Unbounded", sans-serif;
  font-size: 30.07px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -1%;
  color: #FFFFFF;
  margin: 0;
  transition: font-size 0.3s ease-out;
}

/* Role - hidden by default, animated on hover */
.about-page .member-role {
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: -1%;
  color: #888888;
  margin-top: 8px;
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
}

/* Description - hidden by default, animated on hover */
.about-page .member-desc {
  font-family: "Rethink Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: -1%;
  color: #888888;
  margin: 24px 0 0 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
}

/* Hover: Shrink name, show role and description */
.about-page .team-card:hover .member-name {
  font-size: 20px;
  letter-spacing: -1%;
}

.about-page .team-card:hover .member-role {
  opacity: 1;
  max-height: 50px;
}

.about-page .team-card:hover .member-desc {
  opacity: 1;
  max-height: 200px;
}

.about-page .team-section .carousel-indicators {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.about-page .team-carousel-indicators .indicator.active {
  background-color: #FFFFFF !important;
  opacity: 1;
}

/* Ensure Team Indicators are visible/active styling matches generic if needed, 
   but likely inherited. Just spacing here. */
.about-page .indicator {
  /* ... inherited ... */
  cursor: pointer;
  /* Ensure clickable cursor */
}

.about-page .team-image-wrapper {
  width: 100%;
  /* Pull image up significantly to overlap behind text */
  margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  /* Image takes remaining space */
  flex-grow: 1;

  position: relative;
  /* Image BEHIND text */
  z-index: 1;
  /* Clip image overflow so sliding doesn't expand card */
  overflow: hidden;
}

.about-page .team-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* Smooth transition for hover slide */
  transition: transform 0.3s ease-out;
}

/* Hover: Slide image down (out of view from bottom) */
.about-page .team-card:hover .team-image {
  transform: translateY(50%);
}

/* -------------------------------------------------
   QUESTIONS/CTA SECTION
   ------------------------------------------------- */
/* Legacy/Unused styles removed to prevent conflicts */


/* ========================================
   CLIENTS SECTION - FIXED HORIZONTAL OVERFLOW & FULL BLEED
   ======================================== */

/* -------------------------------------------------
   1. SECTION – proper full-bleed centering (no scrollbar)
   ------------------------------------------------- */
.clients-section {
  width: 100vw;
  /* Full viewport width */
  margin-left: calc(50% - 50vw);
  /* Center to parent, ignore paddings */
  overflow: hidden;
  /* Clip everything, no scrollbar */
  padding-block: 0rem;
  /* Vertical padding only */
  position: relative;
  /* For relative positioning */
  box-sizing: border-box;
}

/* -------------------------------------------------
   2. HEADER – centered inside full section
   ------------------------------------------------- */
.clients-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  position: relative;
  z-index: 2;
}

.clients-title {
  font-size: 2rem;
  font-weight: 500;
}

/* -------------------------------------------------
   3. GRID – relative to full section
   ------------------------------------------------- */
.clients-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Minimal space between rows */
}

/* -------------------------------------------------
   4. ROWS – full width, no clipping
   ------------------------------------------------- */
.client-row {
  width: 100%;
  height: 140px;
  /* Buffer for buttons + hover */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* -------------------------------------------------
   5. WRAPPER – button gaps
   ------------------------------------------------- */
.logos-wrapper {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 200%;
  height: 100%;
  will-change: transform;
  box-sizing: border-box;
}

/* -------------------------------------------------
   6. BUTTONS – exact image size
   ------------------------------------------------- */
.client-logo {
  flex: 0 0 auto;
  padding: 32px;
  background: #1a1a1a;
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.25s ease;
  cursor: pointer;
  box-sizing: border-box;
  min-width: 154px;
  /* 90px img + 32px L + 32px R */
  height: 108px;
  /* 44px img + 32px T + 32px B */
  border: none;
}

.client-logo img {
  width: 90px;
  /* Exact specified size */
  height: 44.06px;
  /* Exact specified height */
  object-fit: contain;
  pointer-events: none;
  position: relative;
}

.client-logo:hover {
  background: #2a2a2a;
  outline-color: #555;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------
   7. ANIMATIONS – infinite scroll
   ------------------------------------------------- */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

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

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes scroll-left-offset {
  0% {
    transform: translateX(-15%);
  }

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

.client-row-1 .logos-wrapper {
  animation: scroll-left 30s linear infinite;
}

.client-row-2 .logos-wrapper {
  animation: scroll-left-offset 25s linear infinite;
}

.client-row-3 .logos-wrapper {
  animation: scroll-right 35s linear infinite;
}

.client-logo {
  flex: 0 0 auto;
  width: 150px;
  /* Adjust based on your logo size */
  height: 100px;
  /* Adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  /* Spacing between logos */
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Animations */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

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

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes scroll-left-offset {
  0% {
    transform: translateX(-15%);
    /* Offset by 15% to the left for staggered effect */
  }

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

/* Apply to rows */
.client-row-1 .logos-wrapper {
  animation: scroll-left 30s linear infinite;
}

.client-row-2 .logos-wrapper {
  animation: scroll-left-offset 25s linear infinite;
  /* Using left direction but with offset; adjust duration for parallax feel */
}

.client-row-3 .logos-wrapper {
  animation: scroll-right 35s linear infinite;
  /* Reverse direction for variety */
}

.contact-section {
  text-align: center;
  padding: 50px 16px;
  display: inline-flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: #1d1d1d;
}

.contact-header {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1rem;
}

.contact-title {
  font-size: 2rem;
  font-weight: 500;
}

.contact-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-inline: auto;
  max-width: 784px;
}

.contact-button {
  width: fit-content;
  margin-inline: auto;
}

.faq-section {
  text-align: center;
  padding: 4rem 0;
}

.faq-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.faq-title {
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
}

.faq-text {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: auto;
  max-width: 784px;
}

.assessment-section {
  padding: 4rem 1rem;
  text-align: center;
  position: relative;
}

.assessment-title {
  font-family: "Unbounded", sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.assessment-btn {
  padding: 1.25rem 2rem;
  background: #000000;
  border-radius: 0.625rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.assessment-image {
  width: 100%;
  height: auto;
  margin-top: 2rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}


/* Services Section Decoration */
.about-page .services-section {
  position: relative;
  overflow: visible;
  /* Allow bubbles to hang off */
}

.about-page .bubbles-decoration {
  position: absolute;
  bottom: 0;
  /* left: 50%; */
  padding-inline: 16px;
  transform: translateY(60px);
  width: auto;
  height: 110px;
  z-index: 1;
}

/* -------------------------------------------------
   TESTIMONIALS SECTION
   ------------------------------------------------- */
.about-page .testimonials-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;

  /* Hide scrollbar for infinite scroll */
}

/* Header */
.about-page .testimonials-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* Gap between wave and text */
  margin-bottom: 30px;
  /* Gap between header and cards */
}

.about-page .mini-wave {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
}

.about-page .testimonials-header h2 {
  font-family: "Unbounded", sans-serif;
  font-size: 20px;
  font-weight: 500;
  /* Medium */
  line-height: 115%;
  letter-spacing: -3%;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
}

/* Infinite Scroll Container */
.about-page .testimonials-scroll-container {
  width: 100vw;
  /* Full viewport width */
  margin-left: calc(50% - 50vw);
  /* Break out of container */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12.16px;

}

.about-page .testimonials-track {
  display: flex;
  gap: 12.16px;
  /* Restore Horizontal Gap */
  width: max-content;
  /* Allow track to grow */
  animation: scroll-left-testimonials 40s linear infinite;
  /* Reuse or new animation */
  padding-left: 0;
  /* Initial offset/padding */
  padding-right: 0;
}

/* Pause animation when hovering over the entire scroll container */
.about-page .testimonials-scroll-container:hover .testimonials-track {
  animation-play-state: paused;
}

/* Row 2 specific styles */
.about-page .testimonials-track.row-2 {
  animation-direction: reverse;
  /* Opposite direction */
  transform: translateX(-25%);
  /* Initial Offset */
}

@keyframes scroll-left-testimonials {
  0% {
    transform: translateX(0);
  }

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

/* Card Styling */
.about-page .testimonial-card {
  /* Dimensions & Spacing */
  max-width: 340.91px;
  min-width: 300px;
  /* Ensure it doesn't squish too much */
  width: 340.91px;
  padding: 24px 18px;
  box-sizing: border-box;

  /* Background & Border */
  background-color: #212121;
  position: relative;
  /* Gradient Stroke using pseudo-element */
  display: flex;
  flex-direction: column;
  /* Smooth transition for hover rotation */
  transition: transform 0.3s ease-out;
  cursor: pointer;
  /* Anti-aliasing for smooth edges during rotation */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* Hover: Rotate card slightly to the left */
.about-page .testimonial-card:hover {
  transform: rotate(-3deg) translateZ(0);
}

/* Gradient Border for Card */
.about-page .testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.76px;
  /* Stroke width */
  background: linear-gradient(to bottom, #666666 0%, #000000 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.about-page .testimonial-quote {
  font-family: "Rethink Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #FFFFFF;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}

.about-page .testimonial-divider {
  width: 100%;
  height: 0.19px;
  /* Stroke width */
  background: linear-gradient(to bottom, #666666 0%, #000000 100%);
  margin-block: 18px;
  opacity: 0.5;
}

.about-page .testimonial-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-page .testimonial-user {
  display: flex;
  flex-direction: row;
  gap: 6.08px;
  align-items: center;
}

.about-page .testimonial-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.about-page .testimonial-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.about-page .t-name {
  font-family: "Rethink Sans", sans-serif;
  font-size: 13.68px;
  font-weight: 700;
  /* Bold */
  line-height: 175%;
  letter-spacing: -1%;
  color: #FFFFFF;
}

.about-page .t-role {
  font-family: "Rethink Sans", sans-serif;
  font-size: 10.64px;
  font-weight: 400;
  /* Regular */
  line-height: normal;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 0.7;
}

.about-page .testimonial-logo {
  width: auto;
  height: 25px;
}

/* Hide Global CTA on About Page */
.about-page .cta-banner {
  display: none !important;
}


/* -------------------------------------------------
   CONTACT/QUESTIONS CTA SECTION
   ------------------------------------------------- */
.about-page .contact-questions-section {
  padding: 100px 15px;
  /* py-100px mobile, px-15px mobile */
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}

.about-page .contact-questions-container {
  /* Parent with bg image */
  background-image: url('../images/gradient-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Border as requested */
  border: 1px solid #212121;
  border-radius: 0;

  /* Inner content centering */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  width: 100%;
  padding: 100px 15px;
  /* py-100px, px-15px as requested */
  box-sizing: border-box;
}

.about-page .mini-wave-orange {
  width: auto;
  height: auto;
  margin-bottom: 16px;
  /* Gap between wave and text */
}

.about-page .contact-questions-title {
  font-family: "Unbounded", sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -3%;
  color: #FFFFFF;
  margin: 0;
  margin-bottom: 32px;

}

.about-page .btn-contact-questions {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  background-color: #ED7221;
  border-radius: 12px;
  padding: 16px 24px;
  /* px-24, py-16 */

  font-family: "Rethink Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 115%;
  letter-spacing: -3%;
  color: #FFFFFF;
  text-decoration: none;

  transition: opacity 0.3s ease;
}

.about-page .btn-contact-questions:hover {
  opacity: 0.9;
}


@media (min-width: 480px) {
  .about-page .hero-title {
    font-size: 2.75rem;
  }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  /* .about-container {
    padding: 0 4rem;
  } */

  .about-page .hero-title {
    font-size: 42px;
    /* Reduced to 42px for Tablet to fit 4-line layout */
  }

  .about-page .title-line {
    display: block;
  }

  /* Tablet/Desktop Products Section Alignment */
  .about-page .products-section {
    align-items: flex-start;
    gap: 64px;

  }

  .about-page .products-title {
    text-align: left;
    padding-left: 72px;
    /* moved padding to element */
    /* Assuming section padding handles indent */
  }

  /* Remove Carousel Padding for Tablet+ */
  .about-page .products-carousel {
    padding-left: 72px;
    /* Align first card with title */
    padding-right: 0;
    /* Allow scroll bleed */
    width: 100%;
    /* Reset width calc */
    margin-right: 0;
    /* Reset margin */
  }

  .about-page-ripples {
    height: 500px;
    width: 100%;
  }

  .about-page .hero-section {
    padding-left: 72px;
    padding-right: 72px;
  }

  .hero-subtitle {
    font-size: 1.25rem;
  }

  .about-page .hero-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }



  /* Hide Indicators for Tablet+ */
  .about-page .carousel-indicators {
    display: none;
  }

  /* Info/Mission Section Tablet+ updates */
  .about-page .mission-section {
    padding-top: 100px;
  }

  .about-page .mmission-content {
    font-size: 38px;
  }

  /* Press Grid Tablet/Desktop Layout */
  .about-page .press-grid {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    row-gap: 120px;
    /* Increased row gap so second row cards don't overlap */
    width: 100%;
    flex-wrap: wrap;
    /* Allow wrapping */
  }

  .about-page .press-header {
    margin-bottom: 100px;
    /* Increased gap per request */
  }

  .about-page .btn-primary,
  .about-page .btn-secondary {
    width: auto;
    max-width: none;
    padding: 16px 32px;
    /* Optional: slightly larger touch target adjustments if needed, or keep same */
  }

  .intro-title {
    font-size: 2.25rem;
  }

  /* Team Section Tablet/Desktop Swap */
  .about-page .team-carousel,
  .about-page .team-section .carousel-indicators {
    display: none;
  }

  /* Team Section Spacing for Tablet/Desktop */
  .about-page .team-section {
    padding-left: 72px;
    padding-right: 72px;
    align-items: center;
    width: 100%;
    /* Reinforce centering */
  }

  .about-page .team-title {
    text-align: center;

    width: 100%;
    position: relative;
    /* Ensure it establishes its own context */
    z-index: 1;
    /* Ensure visibility */
  }

  .about-page .team-grid-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding-inline: 72px;
    margin: 0 auto;
  }

  /* Override card width for Grid context */
  .about-page .team-grid-desktop .team-card {
    max-width: 100%;
    /* Fill flex item */
    width: calc((100% - 40px) / 3);
    flex-grow: 0;
  }

  /* Tablet+: Hide role and desc by default, reveal on hover */
  .about-page .member-role {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
  }

  .about-page .member-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
  }

  /* Hover: Shrink name, show role and description */
  .about-page .team-card:hover .member-name {
    font-size: 20px;
    letter-spacing: -1%;
  }

  .about-page .team-card:hover .member-role {
    opacity: 1;
    max-height: 50px;
  }

  .about-page .team-card:hover .member-desc {
    opacity: 1;
    max-height: 200px;
  }

  .about-page .testimonials-section {
    padding-top: 128px;
  }

  .about-page .services-notes-container {
    flex-direction: row;
    gap: 0;
    margin-top: 0;
    justify-content: center;
    /* Ensure centering */
    padding: 30px 0;
    /* Add vertical padding to prevent rotation clipping */
    width: 100%;
    /* Ensure full width */
    overflow: visible;
    /* Allow rotations to spill slightly if needed */
  }

  /* Reset Note Styles for Tablet+ */
  .about-page .service-note {
    transform: none;
    margin: 0;
    margin-left: -60px;
    /* Overlap effect */
    height: 200px;
    /* Reduced to 200px to prevent Tablet clipping */
    width: auto;
  }

  .about-page .service-note:first-child {
    margin-left: 0;
  }

  .about-page .note-bg {
    height: 100%;
    width: auto;
    max-width: none;
  }

  .about-page .note-content {
    font-size: 20px;
    /* Reduced and specificity fixed */
  }

  /* Specific Rotations for Tablet/Desktop */
  .about-page .note-1 {
    transform: rotate(-1.54deg) !important;
    z-index: 1;
  }

  .about-page .note-2 {
    transform: rotate(3.64deg) !important;
    z-index: 2;
  }

  .about-page .note-3 {
    transform: rotate(-1.54deg) !important;
    z-index: 3;
  }

  .about-page .note-4 {
    transform: rotate(0deg) !important;
    z-index: 4;
  }

  .about-page .contact-questions-section {
    padding-top: 64px;
    padding-left: 72px;
    padding-right: 72px;
  }

  /* Restore Aspect Ratio for Desktop Grid */
  .about-page .team-card {
    aspect-ratio: 1 / 1.1;
  }

  .about-page .contact-questions-title {
    font-size: 32px;
    max-width: 563px;
    margin-inline: auto;
  }

  .assessment-section {
    padding: 8rem 0;
  }

  .assessment-title {
    font-size: 3.75rem;
  }

  .assessment-image {
    position: absolute;
    left: 0;
    top: -4rem;
    width: 18rem;
    margin-top: 0;
  }

  .about-page .hero-deco-mouse {
    height: 150px;
    width: auto;
  }

  .about-page .hero-deco-thumbs {
    height: 160px;
    width: auto;
  }

  .about-page .hero-deco-robot {
    height: 170px;
    width: auto;
  }

  .about-page .hero-deco-note {
    height: 170px;
    width: auto;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .about-container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* Restore Large Decoration Sizes for Desktop */
  .about-page .hero-deco-mouse {
    height: 200px;
    width: auto;
  }

  .about-page .hero-deco-thumbs {
    height: 200.48px;
    width: auto;
  }

  .about-page .hero-deco-robot {
    height: 230px;
    width: auto;
  }

  .about-page .hero-deco-note {
    height: 230px;
    width: auto;
  }

  .member-name {
    font-size: 20px;
  }

  .about-page .hero-title {
    font-size: 64px;
  }



  .about-page .services-notes-container {
    flex-direction: row;
  }

  /* Desktop Specific Note Styles */
  .about-page .service-note {
    height: 240px;
    /* Increased to make them a bit bigger */
    margin-left: -60px;
    /* Matched to Tablet */
    width: auto;
  }

  .about-page .note-content {
    font-size: 24px;
    /* Scaled up to 24px to match the visual ratio of Tablet (240px container vs 200px) */
  }

  .about-page .service-note:first-child {
    margin-left: 0;
  }

  .about-page .hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 8rem;
    padding-bottom: 8rem;

    /* Reduced from 18rem */
    z-index: 1;
    position: relative;
    width: 100%;
    /* gap: 2rem; Removed to reduce spacing */
  }

  .about-page .hero-title {
    width: 100%;
    opacity: 1;
    max-width: 800px;
    /* Updated to 828px per user request */
    height: auto;
    /* Allow growth */
    line-height: 1.1;
    font-size: 64px;
    margin-bottom: 0;
    /* Handled by gap/padding */
    margin-top: 0;
  }

  .about-page .hero-subtitle {
    margin-bottom: 0;
    margin-top: 10px;
    /* Small gap from title if needed, or rely on parent gap */
    max-width: 680px;
  }

  .team-member {
    width: 22%;
  }

  .hero-image {
    width: 100%;
    object-fit: contain;
    height: auto;
    left: 0;
    transform: none;
  }

  .contact-section {
    padding: 5rem 0;
  }

  .hero-buttons {
    margin-top: 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
  }

  .hero-image>img {
    width: 100px;
    height: 252.438px;
    object-fit: cover;
  }

  .member-image {
    width: 294px;
    height: 294px;
    object-fit: cover;
    margin-bottom: 0;
  }

  .logos-wrapper {
    gap: 28px;
  }

  .client-row {
    height: 120px;
  }

  .service-card {
    width: 416px;
  }

  .intro-section {
    padding-block: 6rem;
  }
}

/* ========================================
   CONTACT FORM MODAL
   ======================================== */
.about-contact-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.about-contact-modal.is-open {
  display: flex;
}

.about-contact-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.about-contact-modal__content {
  position: relative;
  background: #1D1D1D;
  border: 1px solid rgba(173, 235, 231, 0.15);
  border-radius: 16px;
  padding: 32px 24px;
  width: 100%;
  height: 100%;
  margin-top: 50px;
  max-width: 520px; 
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  overflow-y: auto;
  z-index: 1;
}

.about-contact-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #C3C3C3;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}

.about-contact-modal__close:hover {
  color: #fff;
}

.about-contact-modal__title {
  font-family: "Unbounded", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}

.about-contact-modal__subtitle {
  font-family: "Eudoxus Sans", sans-serif;
  font-size: 0.9rem;
  color: #C3C3C3;
  margin: 0 0 24px;
}

.about-contact-modal__row {
  display: grid;
  grid-template-columns: 1fr;
  /* gap: 16px; */
}

@media (min-width: 480px) {
  .about-contact-modal__row {
    grid-template-columns: 1fr 1fr;
  }
}

.about-contact-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.about-contact-modal__field label {
  font-family: "Eudoxus Sans", sans-serif;
  font-size: 0.85rem;
  color: #C3C3C3;
  font-weight: 500;
}

.about-contact-modal__field label span {
  color: #ED7221;
}

.about-contact-modal__field input,
.about-contact-modal__field textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-family: "Eudoxus Sans", sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.about-contact-modal__field input:focus,
.about-contact-modal__field textarea:focus {
  outline: none;
  border-color: #ADEBE7;
}

.about-contact-modal__field input::placeholder,
.about-contact-modal__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.about-contact-modal__submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #ADEBE7, #7dd3cf);
  color: #1D1D1D;
  border: none;
  border-radius: 8px;
  font-family: "Eudoxus Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
}

.about-contact-modal__submit:hover {
  opacity: 0.9;
}

.about-contact-modal__feedback {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: "Eudoxus Sans", sans-serif;
}

.about-contact-modal__feedback.success {
  background: rgba(173, 235, 231, 0.15);
  color: #ADEBE7;
}

.about-contact-modal__feedback.error {
  background: rgba(237, 114, 33, 0.15);
  color: #ED7221;
}

/* -------------------------------------------------
   ENQUIRY TYPE SELECT FIELD
   ------------------------------------------------- */
.about-contact-modal__field select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: "Eudoxus Sans", sans-serif;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.about-contact-modal__field select:focus {
  border-color: #ADEBE7;
}

.about-contact-modal__field select option {
  background: #2a2a2a;
  color: #ffffff;
}

/* -------------------------------------------------
   SERVICE CARDS — HOVER FLOAT EFFECT
   ------------------------------------------------- */
.service-note {
  transition: transform 0.3s ease;
}

.service-note:hover {
  transform: translateY(-8px);
}

/* -------------------------------------------------
   PARTNER LOGOS — CONTRAST FIX FOR DARK BG
   ------------------------------------------------- */
.partner-logo {
  /* filter: brightness(0) invert(1); */
}