/* STRONGER CSS WITH HIGHER SPECIFICITY */

/* Wrapper styles with higher specificity */
.dnd-section.section-drawing-inspiration,
.section-drawing-inspiration,
body .section-drawing-inspiration {
    display: block !important;
    padding: 0px;
    position: relative;
    z-index: 1;
}

.dnd-section.we-believe,
.we-believe,
body .we-believe {
    display: block !important;
    padding: 0px;
    position: relative;
    z-index: 1;
}

/* DESKTOP: H6 elements hidden by default with higher specificity */
.dnd-section.section-drawing-inspiration h6,
.section-drawing-inspiration h6,
body .section-drawing-inspiration h6,
.dnd-section.we-believe h6,
.we-believe h6,
body .we-believe h6 {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.7s ease-in-out !important;
    color: #FFFDF9 !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* DESKTOP: Hover effects with higher specificity */
.dnd-section.section-drawing-inspiration:hover h6,
.section-drawing-inspiration:hover h6,
body .section-drawing-inspiration:hover h6 {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dnd-section.we-believe:hover h6,
.we-believe:hover h6,
body .we-believe:hover h6 {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* TABLET AND MOBILE: Always visible with higher specificity */
@media (max-width: 1024px) {
    .dnd-section.section-drawing-inspiration h6,
    .section-drawing-inspiration h6,
    body .section-drawing-inspiration h6,
    .dnd-section.we-believe h6,
    .we-believe h6,
    body .we-believe h6 {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .dnd-section.section-drawing-inspiration:hover h6,
    .section-drawing-inspiration:hover h6,
    body .section-drawing-inspiration:hover h6,
    .dnd-section.we-believe:hover h6,
    .we-believe:hover h6,
    body .we-believe:hover h6 {
        opacity: 1 !important;
    }
}

/* Clean up empty elements with higher specificity */
.section-drawing-inspiration pre,
.section-drawing-inspiration p:empty,
.section-drawing-inspiration h6:empty,
.we-believe pre,
.we-believe p:empty,
.we-believe h6:empty {
    display: none !important;
}

/* List styling with higher specificity */
.section-drawing-inspiration h6 + ul ul li,
.we-believe h6 + ul ul li {
    color: #FFFDF9 !important;
}

.section-drawing-inspiration h6 + ul ul li::marker,
.we-believe h6 + ul ul li::marker {
    color: #FFFDF9 !important;
}
/* Alternative targeting method */
.slide-in-section {
  transform: translateX(100px); /* Start visible instead of hidden */
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.slide-in-section.animate {
  transform: translateX(0);
  opacity: 1;
}

.slide-in-left {
  transform: translateX(-100px); /* Start visible instead of hidden */
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.slide-in-left.animate {
  transform: translateX(0);
  opacity: 1;
}

/* Full Width Image Section with Hover Effect */
.full-width-image-section {
    width: 100%; /* Ensures it spans the full width of the page */
    overflow: hidden; /* Important to hide any overflow during scaling */
    position: relative; /* For stacking context if needed */
    padding: 0; /* Remove any default padding that might affect full width */
    margin: 0; /* Remove any default margin */
    min-height: 300px; /* Example min-height, adjust as needed */
    display: flex; /* Helps center content vertically if image is smaller than container */
    justify-content: center;
    align-items: center;
}

/* Wrapper for the image to apply hover effects */
.image-hover-wrapper {
    display: block; /* Make it a block element to take full space */
    width: 100%;
    height: 100%; /* Make it take full height of its parent (.full-width-image-section) */
    position: relative;
    overflow: hidden; /* Ensure image within wrapper is clipped if it tries to escape */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transitions */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    cursor: pointer; /* Indicate it's clickable */
}

/* The actual image */
.image-hover-wrapper img.responsive-image {
    display: block;
    width: 100%; /* Make image fill its wrapper */
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    transition: transform 0.3s ease-in-out; /* Smooth transition for image scaling */
}

/* Hover effect for the wrapper */
.image-hover-wrapper:hover {
    /* Shrinks the overall wrapper slightly */
    transform: scale(0.98);
    /* Creates a thick border effect with specified color */
    box-shadow: 0 0 0 400px #FFFDF9; /* <-- A LOT THICKER (100px) and your desired color */
}



/* Media query for mobile responsiveness:
   Adjustments for smaller screens to make the effect less aggressive or different. */
@media (max-width: 767px) {
    .full-width-image-section {
        min-height: 200px; /* Adjust min-height for mobile if desired */
    }

    .image-hover-wrapper:hover {
        /* Reduce border thickness on mobile, but keep the new color */
        box-shadow: 0 0 0 40px #FFFDF9; /* <-- Adjusted thickness for mobile */
        transform: scale(0.99); /* Less aggressive shrink on mobile */
    }
}

/* Fade-In-On-Scroll Animation */
.fade-in-on-scroll {
  opacity: 0; /* Start fully transparent */
  transform: translateY(-20px); /* Start 40px ABOVE its final position (increased for more noticeable effect) */
  transition: opacity 1s ease-out, transform 1s ease-out; /* SLOWER transition (1 second) for opacity and position */
  will-change: opacity, transform; /* Optimize for animation performance */
}

/* Class added by JavaScript when element is visible */
.fade-in-on-scroll.is-visible {
  opacity: 1; /* Fade in to fully opaque */
  transform: translateY(0); /* Move to its original position */
}



  /* New container for the CTA and the arrow */
  .arrow-with-cta-section {
    width: 60%; /* The entire section (CTA + Arrow) takes up 60% of the page width */
    margin: 50px auto; /* Center the section horizontally with vertical spacing */
    display: flex; /* Use Flexbox to align CTA and arrow side-by-side */
    align-items: center; /* Vertically center items */
    justify-content: center; /* Center the CTA and arrow as a group */
    gap: 20px; /* Space between the CTA and the arrow */
    box-sizing: border-box; /* Include padding/border in total width/height */
  }

  /* Container for the HubSpot CTA on the left */
  .cta-on-left {
    flex-shrink: 0; /* Prevent the CTA from shrinking if space is tight */
    /* Add any specific styling for your CTA wrapper here if needed */
  }

  /* Container for the arrow line */
  .thin-long-arrow-container {
    width: 70%; /* Arrow line takes up 70% of the *flex container's* width, making it longer */
    height: 4px; /* Adjust for desired thinness */
    background-color: #6F6F6F; /* The specified color */
    position: relative; /* Needed for positioning the arrowhead */
    margin: 0; /* Remove previous auto margins as it's now in a flex container */
    display: block;
    overflow: visible;
    box-sizing: border-box;
  }

  /* Arrowhead using a pseudo-element (left-pointing) */
  .thin-long-arrow-container::after {
    content: '';
    position: absolute;
    left: -10px; /* Adjusted to -10px to shift it slightly more to the left */
    top: 50%;
    transform: translateY(-50%); /* No rotation needed for this triangle method */
    width: 0; /* Essential for border-based triangles */
    height: 0; /* Essential for border-based triangles */
    border: 8px solid transparent; /* Base transparent borders */
    border-right-color: #6F6F6F; /* Makes the right border visible, forming a left-pointing triangle */
    /* The size of the triangle is controlled by the border-width (e.g., 8px) */
  }

  /* Responsive adjustments */
  @media (max-width: 767px) {
    .arrow-with-cta-section {
      width: 90%; /* Adjust overall section width for smaller screens */
      flex-direction: column; /* Stack CTA and arrow vertically on mobile */
      gap: 15px; /* Adjust gap for mobile */
      margin: 30px auto; /* Less vertical spacing on mobile */
    }

    .thin-long-arrow-container {
      display: none;
    }
    .thin-long-arrow-container::after {
      display: none;
    }
.cta-on-left {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%
}
}

h2 {
  display: inline-block; /* Makes the h2 behave like an inline element */
  margin-right: 5px; /* Add a small space between "Results in" and "action" */
  /* Add any other specific styling for "Results in" here */
}

h4 {
  display: inline-block; /* Makes the h4 behave like an inline element */
  /* Add any other specific styling for "action" here */
}

/* CASE STUDY PAGES (1-315) ------------------------------------------------------------------------------------------------ */
/* BLOCK 1 ........................................................................................*/ 
.animate-heading,
.animate-description {
  opacity: 0;
  transform: translateY(-20px);
  animation-fill-mode: forwards;
}

.animate-heading {
  animation: fadeSlideDown 0.8s ease-out 0.2s forwards;
}

.animate-description {
  animation: fadeSlideDown 0.8s ease-out 0.6s forwards;
}

@keyframes fadeSlideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.delay-animate-heading,
.delay-animate-description {
  opacity: 0;
  transform: translateY(-20px);
  animation-fill-mode: forwards;
}

.delay-animate-heading {
  animation: fadeSlideDown 0.8s ease-out 2s forwards;
}

.delay-animate-description {
  animation: fadeSlideDown 0.8s ease-out 2.4s forwards;
}

@keyframes fadeSlideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Mobile-Specific Overrides for Headings and Descriptions --- */
/* (Previous CSS for font sizes, margins, etc. goes here, then add this) */

/* Add top padding to prevent content from being hidden behind fixed header */
body {
  padding-top: 110px; /* Adjust this value based on your header height */
}

/* Alternative: target the main content container instead of body */
.body-container-wrapper,
main,
.page-content {
  padding-top: 110px;
}

/* TABLET STYLES - Add this to your child.css */
@media (min-width: 769px) and (max-width: 1024px) {
    .animate-heading,
    .delay-animate-heading {
        font-size: 36px;
        line-height: 1.3;
        margin-left: 30px;
        margin-right: 30px;
        max-width: calc(100% - 60px);
    }
    /* Hide the <br> tag inside .animate-heading for tablet */
    .animate-heading br {
        display: none;
    }
    /* Hide the <br> tag inside .delay-animate-heading for tablet */
    .delay-animate-heading br {
        display: none;
    }
    .animate-description,
    .delay-animate-description {
        font-size: 22px;
        line-height: 1.3;
        margin-left: 30px;
        margin-right: 30px;
        max-width: calc(100% - 60px);
    }
    
   /* Your specific columns - full width, no margins */
#tablet-column-HP {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}


/* Tablet styling - reduce right padding to 50px */
@media (max-width: 1024px) and (min-width: 769px) {
    #tablet-column-CS {
        padding-right: 50px !important;
    }
}

/* Mobile styling - reduce right padding to 50px */
@media (max-width: 768px) {
    #tablet-column-CS {
        padding-right: 50px !important;
    }
}

/* Text content within your specific columns */
#tablet-column-HP p,
#tablet-column-HP div,
#tablet-column-HP h1,
#tablet-column-HP h2,
#tablet-column-HP h3
{
    max-width: 100% !important;
    word-wrap: break-word;
    line-height: 1.4;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* If columns are in a flex container */
#tablet-column-HP
{
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
}

/* EXISTING MOBILE STYLES - Keep as is */
@media (max-width: 480px) { /* Adjustments for smaller phones */
    .animate-heading,
    .delay-animate-heading {
        font-size: 24px;
        line-height: 1.2;
        margin-left: 15px;
        margin-right: 15px;
        max-width: calc(100% - 30px);
    }
    /* Hide the <br> tag inside .animate-heading for smaller phones */
    .animate-heading br {
        display: none;
    }
    /* Hide the <br> tag inside .delay-animate-heading for smaller phones */
    .delay-animate-heading br {
        display: none;
    }
    .animate-description,
    .delay-animate-description {
        font-size: 18px;
        line-height: 1.2;
        margin-left: 15px;
        margin-right: 15px;
        max-width: calc(100% - 30px);
    }
}
/* BLOCK 2 ........................................................................................*/

.text-box-blue {
  background-color: #0F90A1;
  width: 80%;
  margin-left: auto; /* push box to the right */
  margin-right: 0;   /* flush with right side of screen */
  padding: 42px;     /* inner space for text */
  border-radius: 0px;
  color: #FFFDF9;
  text-align: left;
  margin-top: 48px;
  margin-bottom: 48px;
  
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.text-box-blue.visible {
  opacity: 1;
  transform: translateX(0);
}

.font-regular {
  font-family: 'Source Sans Pro', regular;
}

.font-script {
  font-family: 'Source Serif Pro', serif;
  font-weight: 600;
  font-style: italic;
}

@media (max-width: 768px) {
  .text-box-blue {
    width: 95%;              /* wider on mobile */
    margin-left: 5%;       /* center horizontally */
    margin-right: auto;
    padding: 24px;           /* smaller padding for smaller screens */
    border-radius: 0px;      /* keep as is or adjust if needed */
    text-align: left;        /* keep text alignment */
  }
}

/* BLOCK 3 ........................................................................................*/

.text-box {
  margin: 24px auto; /* Top/bottom spacing */
}

.invert-box-row {
  display: flex;
  gap: 12px; /* or whatever space you want between boxes */
  flex-wrap: wrap; /* so it wraps nicely on mobile */
  margin-top: 16px;
  margin left:0; 
}

.invert-box {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  background-color: #6F6F6F;
  color: #FFFDF9;
  border: 2px solid #FFFDF9;
  transition: background-color 0.4s ease-in-out, 
              color 0.4s ease-in-out,
              border-color 0.4s ease-in-out;
  font-family: 'Source Serif Pro', serif;
  font-size: 25px;
  font-weight: 600;
  font-style: italic;
  cursor: default;
  text-align: center;
}

.invert-box {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  background-color: #6F6F6F;
  color: #FFFDF9;
  border: 2px solid #FFFDF9;     /* added border */
  transition: 
    background-color 0.4s ease-in-out, 
    color 0.4s ease-in-out,
    border-color 0.4s ease-in-out;
  font-family: 'Source Serif Pro', serif;
  font-size: 25px
  font-weight: 600;
  font-style: bold italic;
  cursor: default;
  text-align: center;
}

.invert-box:hover {
  background-color: #FFFDF9;
  color: #6F6F6F;
  border-color: #FFFDF9;         /* invert border color */
}



.hs-richtext {
  background-color: #FFFDF9; /* Replace with your desired color */
}


.gray-box {
  background-color: #6F6F6F; /* dark gray */
  padding: 40px 40px;
}

.nude-box {
  background-color: #FFFDF9; /* light cream */
  padding: 40px 40px 10px 60px;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 768px) {
  .invert-box-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .invert-box {
    font-size: 16px;
    padding: 8px 8px;
    width: auto; /* auto-size based on content */
    max-width: 90%; /* optional: prevent overly long text from breaking layout */
    box-sizing: border-box;
  }
  
  .gray-box {
  padding-left: 16px; /* reduce left padding on mobile */
  padding-right: 16px; /* optional: reduce right padding too */
}

.nude-box {
  padding-left: 40px; /* reduce left padding on mobile */
}
  .nude-box h2 {
    line-height: .5; /* tighter line spacing */
    font-size: 30px;  /* optional: slightly smaller text */
    margin-bottom: 8px; /* optional: reduce space below */
  }
}

/* BLOCK 4 ........................................................................................*/

.results-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;              /* space between stacked boxes */
  align-items: flex-start;
  margin-top: 30px;
}

/* White result box */
.result-box {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 600px; /* ✅ fixed consistent width */
  max-width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}


/* Inside left part */
.result-box-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.result-title {
  color: #6F6F6F;
  font-size: 20px;
  margin: 0 0 6px;
  font-weight: 500;
  font-family: 'Source Sans Pro', sans-serif;
}

.result-number {
  color: #000;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  font-family: 'Source Serif Pro', serif;
}

.result-tag {
  background-color: #e0e0e0;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  font-family: 'Source Sans Pro', sans-serif;
  margin-left: 20px;
}

.content-wrapper {
  max-width: 600px;  /* same width as your .result-box */
  margin-left: 40px; /* match the left padding in .gray-box */
}

@media (max-width: 768px) {
  .result-box {
    width: 100%;
  }

.content-wrapper {
  max-width: 600px;  /* same width as your .result-box */
  margin-left: 20px; /* match the left padding in .gray-box */
}