/* style.css */

/* Global HTML/Body reset for overflow */
html, body {
  overflow-x: hidden; /* Ensures no horizontal scrollbar */
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Geist Font Imports - Ensure these paths are correct for your font files */
@font-face {
  font-family: 'Geist-Regular';
  src: url('assets/fonts/Geist-Regular.woff2') format('woff2'),
       url('assets/fonts/Geist-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Best practice for font loading */
}

@font-face {
  font-family: 'Geist-Medium';
  src: url('assets/fonts/Geist-Medium.woff2') format('woff2'),
       url('assets/fonts/Geist-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist-Bold'; /* Added for display-3 font if needed */
  src: url('assets/fonts/Geist-Bold.woff2') format('woff2'),
       url('assets/fonts/Geist-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Variables (from original styleguide.css or inline) */
:root {
  --displaydisplay-1: #ffffff;
  --displaydisplay-2: #f8f8f8;
  --displaydisplay-3: #ffffff;
  --paragraphparagraph-1: #333333;
  --paragraphparagraph-2: #ffffff;
  --dividersdivider-1: #e8e8e8;
  --textheadline: #000000;

  /* Ensure Geist font is applied to these variables */
  --paragraph-paragraph-2-font-family: "Geist-Regular", sans-serif;
  --paragraph-paragraph-2-font-weight: 400;
  --paragraph-paragraph-2-font-size: 18px;
  --paragraph-paragraph-2-letter-spacing: -0.36px;
  --paragraph-paragraph-2-line-height: 24.3px;
  --paragraph-paragraph-2-font-style: normal;

  --display-display-3-font-family: "Geist-Bold", sans-serif; /* Using Geist-Bold for display-3 */
  --display-display-3-font-weight: 700;
  --display-display-3-font-size: 60px;
  --display-display-3-letter-spacing: -3.00px;
  --display-display-3-line-height: 66px;
  --display-display-3-font-style: normal;

  --button-font-family: "Geist-Medium", sans-serif;
  --button-font-weight: 500;
  --button-font-size: 16px;
  --button-letter-spacing: 0;
  --button-line-height: 16px;
  --button-font-style: normal;

  --paragraph-paragraph-3-font-family: "Geist-Regular", sans-serif;
  --paragraph-paragraph-3-font-weight: 400;
  --paragraph-paragraph-3-font-size: 16px;
  --paragraph-paragraph-3-letter-spacing: 0;
  --paragraph-paragraph-3-line-height: 22.4px;
  --paragraph-paragraph-3-font-style: normal;
}


/* Base Desktop Styles */
.desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: var(--displaydisplay-2);
  width: 100%;
  min-height: 100vh; /* Ensure content pushes footer down */
  /* overflow-x: hidden; is now on html, body */
}

/* Navbar Section */
.nav-contents-wrapper {
  display: flex;
  flex-direction: column; /* Allows stacking for mobile menu */
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 50px; /* Desktop padding */
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0077b6;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-content-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px; /* Constrain max-width for desktop nav */
  margin: 0 auto; /* Center nav content */
}

.vector {
  position: relative;
  width: 24.06px;
  height: 24px;
}

.nav-links {
  display: inline-flex; /* Shown by default on desktop */
  gap: 37px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.text-wrapper-14, .text-wrapper-15 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Geist-Regular", sans-serif; /* Applied Geist */
  font-weight: 400;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: -0.39px;
  line-height: 12.3px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.text-wrapper-14:hover, .text-wrapper-15:hover {
  color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-button {
  display: none; /* Hidden by default on desktop, shown by media query */
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #ffffff; /* Sets color for the SVG's currentColor property */
  outline: none;
}

/* Ensure the SVG inside the button is visible */
.mobile-menu-button svg {
  width: 24px; /* Explicit width to match w-6 */
  height: 24px; /* Explicit height to match h-6 */
  stroke: #ffffff; /* Explicitly set stroke color to white */
  stroke-width: 2; /* Adjust stroke thickness for visibility */
}


.mobile-nav-menu {
  flex-direction: column;
  width: 100%;
  background-color: #0077b6;
  padding: 10px 0;
  display: none; /* Explicitly hide on desktop */
}

.mobile-nav-link {
  padding: 10px 50px;
  color: #ffffff;
  text-decoration: none;
  font-family: "Geist-Regular", sans-serif;
  font-size: 16px;
  display: block;
  transition: background-color 0.3s ease;
}

.mobile-nav-link:hover {
  background-color: rgba(0, 0, 0, 0.2);
}


/* Header Section */
.header-section {
  flex-direction: column;
  height: 800px;
  justify-content: flex-end;
  gap: 86px;
  padding: 25px 50px 70px;
  /* Combined background properties for correct layering */
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7) 0%, /* Darkened shade */
    rgba(0, 0, 0, 0.7) 100% /* Darkened shade */
  ), url('assets/images/header-background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  margin-top: 64px; /* Space for fixed navbar */
}

.header-content {
  flex-direction: column;
  height: 236px;
  justify-content: flex-end;
  gap: 78px;
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.welcome-to {
  position: relative;
  width: fit-content;
  margin-top: -99.00px;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: var(--displaydisplay-1);
  font-size: 100px;
  letter-spacing: -3.00px;
  line-height: 95.0px;
}

.header-subcontent {
  gap: 24px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.text-wrapper {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Geist-Medium", sans-serif;
  font-weight: 500;
  color: var(--displaydisplay-1);
  font-size: 30px;
  letter-spacing: -1.50px;
  line-height: 32.7px;
}

.whether-you-re-just {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--paragraph-paragraph-2-font-family);
  font-weight: var(--paragraph-paragraph-2-font-weight);
  color: var(--displaydisplay-1);
  font-size: var(--paragraph-paragraph-2-font-size);
  letter-spacing: var(--paragraph-paragraph-2-letter-spacing);
  line-height: var(--paragraph-paragraph-2-line-height);
  font-style: var(--paragraph-paragraph-2-font-style);
}

/* Welcome Section */
.welcome-section {
  align-items: flex-start;
  padding: 135px 186px 178px 152px;
  align-self: stretch;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.welcome-content {
  max-width: 1180px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  margin: 0 auto;
}

.div {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Geist-Medium", sans-serif;
  font-weight: 500;
  color: var(--paragraphparagraph-1);
  font-size: 32px;
  letter-spacing: -1.60px;
  line-height: 34.9px;
  white-space: nowrap;
}

.welcome-body-copy {
  flex-direction: column;
  gap: 50px;
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.welcome-body {
  flex-wrap: wrap;
  width: 942px;
  gap: 48px 48px;
  display: flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.p {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: var(--paragraphparagraph-1);
  font-size: 18px;
  letter-spacing: -0.36px;
  line-height: 24.3px;
}

.text-wrapper-2 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--paragraph-paragraph-2-font-family);
  font-weight: var(--paragraph-paragraph-2-font-weight);
  color: var(--paragraphparagraph-1);
  font-size: var(--paragraph-paragraph-2-font-size);
  letter-spacing: var(--paragraph-paragraph-2-letter-spacing);
  line-height: var(--paragraph-paragraph-2-line-height);
  font-style: var(--paragraph-paragraph-2-font-style);
}

.button-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: #0077b6;
  border-radius: 500px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.button-dark:hover {
  background-color: #00568f;
}

.schedule-a-consult {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--paragraphparagraph-2);
  font-size: var(--button-font-size);
  text-align: center;
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  white-space: nowrap;
  font-style: var(--button-font-style);
  display: block;
}

/* Image Breaker Section */
.image-breaker {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 625px;
  /* Combined background properties for correct layering */
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.05) 100%
  ), url('assets/images/image-breaker-section.png');
  background-size: cover;
  background-position: center;
}

/* Offering Section */
.offering-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 93px 0px 126px 152px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #0077b6;
}

.offering-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.offering-subhead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 74px 0px 0px;
  position: relative;
  flex: 0 0 auto;
}

.text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Geist-Medium", sans-serif;
  font-weight: 500;
  color: var(--displaydisplay-3);
  font-size: 32px;
  letter-spacing: -1.60px;
  line-height: 34.9px;
  white-space: nowrap;
}

.offering-list {
  display: flex;
  flex-direction: column;
  width: 926px;
  align-items: flex-start;
  gap: 64px;
  position: relative;
  margin-right: -74.00px;
}

.offering-list-items {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.website-launch {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Geist-Regular", sans-serif !important;
  font-weight: 400 !important;
  color: var(--displaydisplay-3);
  font-size: var(--display-display-3-font-size);
  letter-spacing: var(--display-display-3-letter-spacing);
  line-height: var(--display-display-3-line-height);
  font-style: var(--display-display-3-font-style);
  white-space: nowrap;
}

/* Our Clients Section */
.our-clients-section {
  align-items: center;
  gap: 74px;
  padding: 100px 152px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.headline-and-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 80px 0px 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  max-width: 1200px;
  margin: 0 auto;
}

.our-clients-intro {
  align-items: flex-start;
  gap: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Geist-Medium", sans-serif;
  font-weight: 500;
  color: var(--paragraphparagraph-1);
  font-size: 50px;
  letter-spacing: -2.50px;
  line-height: 54.5px;
}

.text-wrapper-5 {
  position: relative;
  width: fit-content;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: var(--paragraphparagraph-1);
  font-size: 18px;
  text-align: center;
  letter-spacing: -0.36px;
  line-height: 24.3px;
  white-space: nowrap;
}

.icons-module {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.icon-lockup, .icon-lockup-2, .icon-lockup-3 {
  gap: 24px;
  padding: 40px 20px 40px 0px;
  display: flex;
  flex-direction: column;
  min-width: 265px;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--dividersdivider-1);
}

.icon-lockup-2 {
  border-color: #e8e8e8;
}

.img {
  position: relative;
  width: 24px;
  height: 24px;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.text-wrapper-6 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: var(--textheadline);
  font-size: 24px;
  letter-spacing: -0.72px;
  line-height: 24px;
}

.text-wrapper-7 {
  position: relative;
  align-self: stretch;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: var(--paragraphparagraph-1);
  font-size: 18px;
  letter-spacing: -0.36px;
  line-height: 24.3px;
}

.schedule-a-consult-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  position: relative;
  flex: 0 0 auto;
  background-color: #0077b6;
  border-radius: 500px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.schedule-a-consult-wrapper:hover {
  background-color: #00568f;
}

/* Image Divider Section */
.image-divider { /* Corrected class name */
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 625px;
  /* Combined background properties for correct layering */
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.05) 100%
  ), url('assets/images/image-divider-section.png'); /* Corrected image path */
  background-size: cover;
  background-position: center;
}

/* Footer Section */
.footer-section {
  flex-direction: column;
  align-items: flex-start;
  gap: 84px;
  padding: 68px 152px;
  background-color: #ffffff;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame {
  display: flex;
  align-items: flex-start;
  gap: 84px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  max-width: 1200px;
  margin: 0 auto;
}

.frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.footer-header {
  align-items: center;
  justify-content: flex-start; /* Left-align logo */
  gap: 20px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame-3 {
  position: relative;
  width: 241.84px;
  height: auto;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.contact-column {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
}

.text-wrapper-8 {
  margin-top: -1.00px;
  position: relative;
  width: 255px;
  font-family: var(--paragraph-paragraph-3-font-family);
  font-weight: var(--paragraph-paragraph-3-font-weight);
  color: var(--paragraphparagraph-1);
  font-size: var(--paragraph-paragraph-3-font-size);
  letter-spacing: var(--paragraph-paragraph-3-letter-spacing);
  line-height: var(--paragraph-paragraph-3-line-height);
  font-style: var(--paragraph-paragraph-3-font-style);
}

.text-wrapper-9 {
  position: relative;
  width: 255px;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: var(--paragraphparagraph-1);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 19.6px;
}

.text-wrapper-10 {
  position: relative;
  width: 255px;
  font-family: var(--paragraph-paragraph-3-font-family);
  font-weight: var(--paragraph-paragraph-3-font-weight);
  color: var(--paragraphparagraph-1);
  font-size: var(--paragraph-paragraph-3-font-size);
  letter-spacing: var(--paragraph-paragraph-3-letter-spacing);
  line-height: var(--paragraph-paragraph-3-line-height);
  font-style: var(--paragraph-paragraph-3-font-style);
}

.frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Ensure children start aligned */
  justify-content: flex-end;
  gap: 40px;
  position: relative;
  flex: 1; /* Allow to grow */
  flex-grow: 1;
  width: 100%; /* Ensure it takes full available width in its flex context */
}

.footer-subhead {
  flex-direction: column;
  align-items: flex-start; /* Left-align */
  justify-content: center;
  gap: 16px;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  text-align: left; /* Left-align text */
}

.text-wrapper-11 {
  position: relative;
  align-self: stretch;
  font-family: var(--paragraph-paragraph-2-font-family);
  font-weight: var(--paragraph-paragraph-2-font-weight);
  color: var(--paragraphparagraph-1);
  font-size: var(--paragraph-paragraph-2-font-size);
  letter-spacing: var(--paragraph-paragraph-2-letter-spacing);
  line-height: var(--paragraph-paragraph-2-line-height);
  font-style: var(--paragraph-paragraph-2-font-style);
  text-align: left; /* Left-align text */
}

/* Styles for the newly structured form */
.full-width-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: stretch; /* Make children stretch across */
  gap: 24px; /* Space between the form-fields-container and messages */
}

.form-fields-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px; /* Space between individual form fields */
  align-items: stretch; /* Make input fields stretch across */
}


.input-field {
  padding: 10px 0px 24px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #e8e8e8;
  position: relative;
  width: 100%; /* Explicitly ensure full width */
  border: none;
  background: none;
  margin-top: -1.00px;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box; /* Include padding in width calculation */
  text-align: left; /* Default text alignment for desktop forms */
}

.input-field:focus {
  border-color: #0077b6;
}

/* Specific styling for the message textarea */
.message-field {
  height: 90px; /* Match original div height */
  padding: 10px 0px 10px; /* Adjusted padding for textarea */
  resize: vertical; /* Allow vertical resizing */
}


/* Hidden honeypot field */
.hidden-field {
  display: none !important; /* Strictly hide this field */
}

.button-dark-2 {
  display: flex;
  align-self: stretch; /* Allow button to stretch */
  width: 100%; /* Explicitly ensure full width */
  border: 1px solid;
  border-color: #e8e8e8;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  position: relative;
  flex: 0 0 auto;
  background-color: #0077b6;
  border-radius: 500px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-sizing: border-box; /* Include padding in width calculation */
}

.button-dark-2:hover {
  background-color: #00568f;
}

.button-dark-2:disabled {
  background-color: #a0a0a0;
  cursor: not-allowed;
}

.div-2 {
  align-items: center;
  justify-content: space-between;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-bottom-row { /* Specific class for footer bottom row for clarity */
  max-width: 1200px; /* Constrain width */
  margin: 0 auto; /* Center content */
  border-top: 1px solid var(--dividersdivider-1); /* Re-added top border if original had it */
  padding-top: 20px; /* Space above copyright */
}

.text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Geist-Regular", sans-serif;
  font-weight: 400;
  color: var(--paragraphparagraph-1);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 19.6px;
  white-space: nowrap;
}


/* --- Form Messages Initial State --- */
.form-success-message,
.form-error-message {
  /* CRITICAL CHANGE: Use !important to override any other display rules */
  display: none !important;
}

/* Specific styling for the message once displayed by JS */
.form-success-message:not(.hidden-message) {
  color: #0077b6; /* Blue for success */
  font-family: "Geist-Medium", sans-serif;
  font-size: 16px;
  margin-top: 15px;
  text-align: center;
  width: 100%;
  padding: 10px;
  border: 1px solid #0077b6;
  border-radius: 8px;
  background-color: #e6f7ff; /* Light blue background */
}

.form-error-message:not(.hidden-message) {
  color: #cc0000; /* Red for error */
  font-family: "Geist-Medium", sans-serif;
  font-size: 16px;
  margin-top: 15px;
  text-align: center;
  width: 100%;
  padding: 10px;
  border: 1px solid #cc0000;
  border-radius: 8px;
  background-color: #ffe6e6; /* Light red background */
}

/* --- Scroll Animation Logic (Intersection Observer) --- */
.animate-on-scroll, .animate-on-scroll-item {
  opacity: 0;
  transform: translateY(40px); /* Increased transform for more noticeable effect */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Optimize for animation */
  animation-fill-mode: forwards; /* Keep element in its final state after animation */
}

.animate-on-scroll.is-visible, .animate-on-scroll-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Add staggered delay for child items if desired, e.g. for icon-lockups */
.icons-module .animate-on-scroll-item:nth-child(1) { transition-delay: 0.1s; }
.icons-module .animate-on-scroll-item:nth-child(2) { transition-delay: 0.2s; }
.icons-module .animate-on-scroll-item:nth-child(3) { transition-delay: 0.3s; }