/* Merged CSS from Updated CSS.docx and injected fixes */


/* Block ID: book-demo-button-main-style */

/* Define necessary CSS variables if they aren't globally defined yet */
:root {
    --color-text-default: #000000; /* Assuming black text for contrast on the green button */
    --bor-neutral-300: #cccccc; /* Example neutral color for disabled text */
    --bor-neutral-100: #f0f0f0; /* Example neutral color for disabled background */
}
#book-demo-button {
    /* Base button styling - adapted from your .notion-button__content */
    display: inline-flex; /* Enables flex properties for centering content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    overflow: hidden; /* Crucial for the text slide animation */
    border-radius: 50px; /* From .notion-button__content */
    font-weight: 600; /* From .notion-button__content */
    text-align: center; /* Ensures text is centered */
    background: #95BF47; /* From .notion-button__content */
    color: var(--color-text-default); /* From .notion-button__content, using defined variable */
    font-size: 14px; /* From .notion-button__content */
    line-height: 1.25rem; /* Ensures consistent text height for animation */
    padding: 12px 20px; /* From .notion-button__content */
    border: 0px solid var(--color-text-default); /* From .notion-button__content */
    cursor: pointer; /* From .notion-button__content */
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* From .notion-button__content */
}

/* Styling for the inner relative div that contains the text spans (for animation) */
#book-demo-button > div.relative {
    position: relative;
    height: 1.25rem; /* Must match the line-height of the text for smooth animation */
    overflow: hidden; /* Ensures only one text span is visible at a time */
}

/* Styling for the first span (the initially visible text) */
#book-demo-button .relative span.block {
    display: block; /* Ensures it takes full width/height for transform */
    transform: translateY(0); /* Initial position: visible */
    transition: transform 0.3s ease; /* Smooth transition for slide effect */
}

/* Styling for the second span (the text that slides in on hover) */
#book-demo-button .relative span.absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block; /* Ensures it takes full width/height for transform */
    transform: translateY(200%); /* Initial position: hidden below */
    transition: transform 0.3s ease; /* Smooth transition for slide effect */
}

/* Hover effect: When the button is hovered, slide the first span up and the second span in */
#book-demo-button:hover .relative span.block {
    transform: translateY(-200%); /* Slides up out of view */
}

#book-demo-button:hover .relative span.absolute {
    transform: translateY(0); /* Slides into view */
}

/* Styling for disabled state, adapted from the Tailwind classes */
#book-demo-button[disabled] {
    color: var(--bor-neutral-300); /* Matches disabled:text-bor-neutral-300 */
    cursor: not-allowed; /* Matches disabled:cursor-not-allowed */
    background-color: var(--bor-neutral-100); /* Matches disabled:bg-bor-neutral-100 */
    box-shadow: none; /* Matches disabled:dark\:hover\:shadow-none */
    pointer-events: none; /* Prevents clicks on disabled elements */
}

/* Remove hover effects for disabled state */
#book-demo-button[disabled]:hover .relative span.block {
    transform: translateY(0); /* Keep first span visible */
}

#book-demo-button[disabled]:hover .relative span.absolute {
    transform: translateY(200%); /* Keep second span hidden */
}

/* 3. For the paragraph text ("Scale your in-house creative team...") */
#sub-paragraph {
    font-family: 'YourParagraphFont', sans-serif !important; /* Replace with your desired paragraph font */
    font-size: 20px;
}
#block-1f05d72ed39680bd8577fbcf21f567ba {
  margin-left: 100px;
  margin-right: 100px;  
}
/* Block ID: category-carousel-margin */
#category-carousel-section {
    margin: 100px !important;
}
#block-2015d72ed39680019cdad6e98ef90ceb {
    text-align: center !important;
    font-size: 1rem;
}
/* Block ID: block-1f05d72ed3968019a401f30567818c37 */
#block-1f05d72ed3968019a401f30567818c37 {
    text-align: left !important;
}
#block-1f05d72ed39680d193b2f28d4dcad024 {
    text-align: left !important;
}
#block-1f05d72ed39680bd941cd7239f9d1e7b {
    text-align: left !important;
}
/* Block ID: block-1f35d72ed3968076a900e279aee589d6 */
#block-1f35d72ed3968076a900e279aee589d6 {
    text-align: center !important;
}
#block-1f15d72ed396805aa7f2f8a8c3b7e4df {
    text-align: center !important;
}
#block-1f15d72ed39680128273d733e31fd282 {
  margin: 0 100px;
}
/* Block ID: onboarding-hero-styling-readable */

.onboarding-hero-section {
    background-color: #1a3628; /* Dark green for the entire section background, as per your screenshot */
    padding: 0px 0px!important; /* Some padding around the section */
    padding: 0px !important;
}

/* Block ID: content-grid-height-corrected */
.onboarding-hero-section > div > .content-grid {
    display: flex;
    flex-grow: 1; /* Corrected: This makes the div take available height */
    flex-direction: column; /* Stack columns on mobile by default */
    gap: 0px; /* Space between columns/rows */
    margin: 0; /* Center content */
}

/* This is the crucial change: Set text color to white for readability */
.onboarding-hero-section .grid-column-right span,
.onboarding-hero-section .grid-column-right h3,
.onboarding-hero-section .grid-column-right h5,
.onboarding-hero-section .grid-column-right p {
    color: #8DFDBA !important; /* White text for contrast against the dark green background */
}

@media (min-width: 1024px) { /* For larger screens (e.g., desktops) */
    .onboarding-hero-section > div > .content-grid {
        flex-direction: row; /* Arrange columns side-by-side */
        align-items: center; /* Vertically align items in the center */
        justify-content: space-between; /* Space out content */
    }
    h2 {
  line-height: 1.2; /* tighter vertical spacing */
}
.start-a-project-style,
.text-[calc(100%+4px)] {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.start-a-project-style .lets-talk-style {
    font-size: 2.25rem; /* also enlarge "creative team" */
}
    .start-a-project-style {
  letter-spacing: -2px !important;  /* adjust kerning (positive = more space, negative = tighter) */
  font-weight: 400;       /* keep consistent weight */
  display: inline-block;  /* ensures letter-spacing applies cleanly */
}
.call-to-action-section .project-heading {
    font-size: 2.85rem !important; /* larger on desktop */
}
    .onboarding-hero-section .grid-column-left,
    .onboarding-hero-section .grid-column-right {
        flex: 1; /* Allow columns to grow and take equal space */
    }

    .onboarding-hero-section .grid-column-left {
        padding-right: 0px; /* Space between image and text */
    }

    .onboarding-hero-section .grid-column-right {
        padding-left: 40px; /* Space between image and text */
        padding-right: 40px; /* Space between image and text */
    }
.onboarding-hero-section .grid-column-left
img {
width: 700px !important; / Example fixed width /
height: auto; / Maintain aspect ratio */
}
/* Block ID: new-phrase-styles */

/* Styles for "Scale your creative team" (based on "creative team’s") */
.creative-team-style {
    font-family: 'Baskerville', serif !important; /* Assumes --font-serif is defined for your serif font */
    font-size: calc(100% + 20px) !important; /* Makes it slightly larger than the parent font size */
    /* The <em> tag already makes it italic */
    font-weight: 400 !important;
}

/* Styles for "with Superside in as little as 1 week" (based on "Your") */
.onboarding-style {
    color: var(--bor-accent); /* Assumes --bor-accent is defined for your accent color */
    font-weight: normal !important;
    font-size: 1.2em; /* Makes text 1.2 times larger than its parent's font size */
    line-height: 0.75em !important;
}

/* Ensure these styles are still applied to the overall h3 */
.onboarding-hero-section .grid-column-right h3 {
    /* Retain original h3 styling from previous turns */
    font-family: var(--font-heading, sans-serif); /* font-heading */
    box-sizing: border-box; /* box-border */
    letter-spacing: 0.1px; /* tracking-[0.1px] */
    font-size: 1.875rem; /* text-bor-3xl (e.g., 30px) */
    /* And other responsive font sizes from earlier CSS */
}
/* Block ID: onboarding-line-css-corrected-for-empty-span */
.onboarding-hero-section .grid-column-right .onboarding-header-group .onboarding-line {
    display: block; /* Make it a block-level element so it can have width and margins */
    width: 100%; /* Give it a specific width, adjust as needed */
    margin-top: 10px; /* Add some space between "ONBOARDING" text and the line */
    /* If padding-bottom was intended to push content below the line, you might add it to the line itself or the text above.
       For a simple line, padding-bottom might not be needed on the line element itself.
       If you want space between the line and the H3, add margin-bottom to this line or margin-top to H3. */

    border-top: 1px solid #8DFDBA; /* Creates a 1px solid white line. Using #ffffff directly ensures it's white. */
    /* The 'color: #ffffff;' property on this span is technically not needed for the line color if you set border-top directly to white,
       but it also doesn't hurt. If you want the line to adapt to parent text color via currentColor, keep it. */
}

/* Also, ensure your 'ONBOARDING' text span doesn't have an old border */
.onboarding-hero-section .grid-column-right .onboarding-header-group span:first-child {
    border-bottom: none !important; /* Make sure the ONBOARDING text itself doesn't have a border now */
    padding-bottom: 0px !important; /* Remove any padding-bottom that might have been for its own border */
}

/* And ensure the other text lines are also explicitly removed as before */
.onboarding-hero-section .grid-column-right .onboarding-header-group h3 {
    border-bottom: none !important;
    margin-top: 40px;
    line-height: 1.2em !important;
}

.onboarding-hero-section .grid-column-right .onboarding-header-group h3 span,
.onboarding-hero-section .grid-column-right .onboarding-header-group h3 em {
    border-bottom: none !important;
}
.onboarding-hero-section .grid-column-right h5 {
    font-weight: normal !important;
    font-size: 1.4em; /* Makes text 1.2 times larger than its parent's font size */
    line-height: 1.45em;
    letter-spacing: -0.02em !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    
}
.onboarding-hero-section .grid-column-right p {
    font-weight: normal !important;
    font-size: 16px; /* Makes text 1.2 times larger than its parent's font size */
    line-height: 1.5em;
}
/* Block ID: call-to-action-section-css */
.call-to-action-section {
    background-image: url("https://cdn.sanity.io/images/canvases/caq51M4rYJJQ/618c35581136deffa68a682682ddaac1e872994d-4096x2296.jpg");
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the image within the container */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    min-height: 300px; /* Give the section a minimum height, adjust as needed */
    display: flex; /* Use flexbox to center content */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within its flow */
    padding: 60px 20px; /* Add padding around the content */
}
.call-to-action-section h2 {
  color: white;
  text-align: center !important;
  font-size: calc(110% + 25px) !important;
  margin-bottom: 20px !important;
}
.call-to-action-section .notion-button a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  /* shape & spacing */
  border-radius: 9999px;     /* full pill shape */
  padding: 16px 20px;        /* bigger padding */
  font-size: 1.125rem;       /* ~18px */
  font-weight: 600;
  line-height: 1.5;

  /* colors */
  background-color: #d8ff85 !important; /* same bright green */
  color: #0a0a0a;            /* dark text for contrast */

  /* transition */
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect */
.call-to-action-section .notion-button a:hover {
  background-color: #96c843 !important; /* slightly darker green */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Optional: disabled state */
.call-to-action-section .notion-button a:disabled {
  background-color: #d4d4d4;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
#block-OUR-DIFFERENT {
    text-align: center !important;
}
.super-root {
  display: none !important;
}
.super-content-wrapper,
.notion-header,
.notion-root {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
.call-to-action-section {
  min-height: 600px;           /* optional: force minimum height */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centers content vertically */
  align-items: center;         /* centers content horizontally */
  text-align: center;          /* optional: for alignment */
}
/* Target the heading and paragraph directly */
#sub-paragraph {
    /* Ensure text within them is left-aligned */
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: 400 !important; /* Set font weight to normal */
}
#main-heading {
    line-height: 1.2em !important;
    font-weight: 450 !important; /* Set font weight to normal */
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Main-hero-heading-styles */
#main-heading .text-bor-accent {
    /* Apply Inter Tight to the main heading text */
    color: #8dfdba !important;
    font-family: "Inter Tight", sans-serif !important;
    font-size: var(--bor-text-5xl); /* Use your custom variable for size */
    font-style: normal !important; /* Ensure it's not italic by default */
    text-align: left;
    padding-bottom: 20px;
}

#main-heading .font-serif.text-\[calc\(105\%\)\] em {
    /* Apply Instrument Serif to the specific italicized part */
    color: var(--bor-highlight-green) !important;
    font-family: "Instrument Serif", serif !important;
    font-size: calc(100% + 4px) !important; /* Maintain the specific size calculation */
    font-style: italic !important; /* Ensure it's italic */
    font-weight: 450 !important; /* Set font weight to 400 */
}
#sub-paragraph {
            text-align: left;
            margin-left: 0 !important;
            margin-right: auto !important;
            line-height: 1.5;
        }
.notion-heading.notion-semantic-string {
  font-weight: 400;
  font-size: 50px;
  letter-spacing: -2px !important;
}
.notion-text.notion-semantic-string {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem !important ;
  letter-spacing: 2px !important;
}
.instrument-serif-text {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important; /* Assuming you want this weight */
  font-size: calc(100% + 8px) !important; /* Increased from +4px to +8px for bigger size */
  letter-spacing: 0.01em !important; /* Keep consistent or adjust as needed */
}
.instrument-headline {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important;
  font-size: calc(100% + 4px) !important;
  letter-spacing: 0.01em !important;
}
.lets-talk-style {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important;
  font-size: calc(100% + 4px) !important;
  letter-spacing: -2px !important;  
}
.column-title {
  font-family: "Inter", sans-serif; /* Apply Inter as the default sans-serif font */
  font-weight: 400;
  font-size: 1.2em !important;
  letter-spacing: -1px;
}
.column-paragraph {
  font-size: 16px !important;
  padding-top: 10px !important;
}
.column-title-why-us {
  font-size: 25px !important;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: -1px;
}
.instrument-headline-onboarding {
  font-size: 1.2em;
}
.headline-sans-serif {
  font-size: 1.3em;
  letter-spacing: -1px;  
  line-height: 1.2em;
  font-weight: 400!important;
}
#block-whatwecreate {
  text-align: center !important;
}
}
@media (max-width: 768px) {
  #process .process-tagline{
    font-size: 1.8em !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;           /* remove top/bottom gaps */
    padding: 0 !important;
    line-height: 1.05 !important;   /* tighter lines (try 1.0 if you want ultra tight) */
    letter-spacing: 0 !important;   /* cancel tracking */
  }
  #process .process-tagline .font-serif,
  #process .process-tagline .instrument-headline{
    font-size: 1em !important;
    letter-spacing: 0 !important;   /* ensure inner span/em has no tracking */
  }
  #block-1f35d72ed3968029a682c0b9550b5ceb,
  #block-1f05d72ed3968143bbbddd843a889505,
  #block-Everytypeofcreativework,
  #block-1f15d72ed39680b895c6c1d3e4fd0fe8
  {
    font-size: 1.8em; /* Example: Smaller font size for mobile */
    padding: 0px 40px !important; /* Example: Some padding */
    font-weight: 400;
    letter-spacing: -0.5px;
}
  #block-2015d72ed39680019cdad6e98ef90ceb,
  #block-whatwecreate,
  #block-1f35d72ed3968076a900e279aee589d6,
  #block-OUR-DIFFERENT {
    font-size: 0.85em;    /* Smaller font for mobile */
    letter-spacing: 2px;
    text-align: center;
}
#our-process .timeline-grid p {
  margin-right: 40px !important;
}
.instrument-headline {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important;
  font-size: calc(100% + 4px) !important;
  letter-spacing: 0.01em !important;
}
.font-serif.text-\[calc\(105\%\)\].font-\[300\] em {
    color: var(--bor-highlight-green) !important;
    font-family: "Instrument Serif", serif !important;
    font-size: calc(100% + 4px) !important;
    font-style: italic !important;
    font-weight: 450 !important;
}
.notion-heading.notion-semantic-string em {
  font-weight: 400;
  font-size: calc(100% + 2px) !important;
  letter-spacing: 0.01px !important;
}
/* Block ID: book-demo-button-main-style */

/* Define necessary CSS variables if they aren't globally defined yet */
:root {
    --color-text-default: #000000; /* Assuming black text for contrast on the green button */
    --bor-neutral-300: #cccccc; /* Example neutral color for disabled text */
    --bor-neutral-100: #f0f0f0; /* Example neutral color for disabled background */
}

#book-demo-button {
    /* Base button styling - adapted from your .notion-button__content */
    display: inline-flex; /* Enables flex properties for centering content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    overflow: hidden; /* Crucial for the text slide animation */
    border-radius: 50px; /* From .notion-button__content */
    font-weight: 600; /* From .notion-button__content */
    text-align: center; /* Ensures text is centered */
    background: #95BF47; /* From .notion-button__content */
    color: var(--color-text-default); /* From .notion-button__content, using defined variable */
    font-size: 14px; /* From .notion-button__content */
    line-height: 1.25rem; /* Ensures consistent text height for animation */
    padding: 12px 20px; /* From .notion-button__content */
    border: 0px solid var(--color-text-default); /* From .notion-button__content */
    cursor: pointer; /* From .notion-button__content */
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; /* From .notion-button__content */
}

/* Styling for the inner relative div that contains the text spans (for animation) */
#book-demo-button > div.relative {
    position: relative;
    height: 1.25rem; /* Must match the line-height of the text for smooth animation */
    overflow: hidden; /* Ensures only one text span is visible at a time */
}

/* Styling for the first span (the initially visible text) */
#book-demo-button .relative span.block {
    display: block; /* Ensures it takes full width/height for transform */
    transform: translateY(0); /* Initial position: visible */
    transition: transform 0.3s ease; /* Smooth transition for slide effect */
}

/* Styling for the second span (the text that slides in on hover) */
#book-demo-button .relative span.absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block; /* Ensures it takes full width/height for transform */
    transform: translateY(200%); /* Initial position: hidden below */
    transition: transform 0.3s ease; /* Smooth transition for slide effect */
}

/* Hover effect: When the button is hovered, slide the first span up and the second span in */
#book-demo-button:hover .relative span.block {
    transform: translateY(-200%); /* Slides up out of view */
}

#book-demo-button:hover .relative span.absolute {
    transform: translateY(0); /* Slides into view */
}

/* Styling for disabled state, adapted from the Tailwind classes */
#book-demo-button[disabled] {
    color: var(--bor-neutral-300); /* Matches disabled:text-bor-neutral-300 */
    cursor: not-allowed; /* Matches disabled:cursor-not-allowed */
    background-color: var(--bor-neutral-100); /* Matches disabled:bg-bor-neutral-100 */
    box-shadow: none; /* Matches disabled:dark\:hover\:shadow-none */
    pointer-events: none; /* Prevents clicks on disabled elements */
}

/* Remove hover effects for disabled state */
#book-demo-button[disabled]:hover .relative span.block {
    transform: translateY(0); /* Keep first span visible */
}

#book-demo-button[disabled]:hover .relative span.absolute {
    transform: translateY(200%); /* Keep second span hidden */
}

/* 3. For the paragraph text ("Scale your in-house creative team...") */
#sub-paragraph {
    font-family: 'YourParagraphFont', sans-serif !important; /* Replace with your desired paragraph font */
    font-size: 20px;
}
#block-1f05d72ed39680bd8577fbcf21f567ba {
  margin-left: 100px;
  margin-right: 100px;  
}
/* Block ID: category-carousel-margin */
#category-carousel-section {
    margin: 100px !important;
}
#block-2015d72ed39680019cdad6e98ef90ceb {
    text-align: center !important;
    font-size: 1rem;
}
/* Block ID: block-1f05d72ed3968019a401f30567818c37 */
#block-1f05d72ed3968019a401f30567818c37 {
    text-align: left !important;
}
#block-1f05d72ed39680d193b2f28d4dcad024 {
    text-align: left !important;
}
#block-1f05d72ed39680bd941cd7239f9d1e7b {
    text-align: left !important;
}
/* Block ID: block-1f35d72ed3968076a900e279aee589d6 */
#block-1f35d72ed3968076a900e279aee589d6 {
    text-align: center !important;
}
#block-1f15d72ed396805aa7f2f8a8c3b7e4df {
    text-align: center !important;
}
#block-1f15d72ed39680128273d733e31fd282 {
  margin: 0 100px;
}
/* Block ID: onboarding-hero-styling-readable */

.onboarding-hero-section {
    background-color: #1a3628; /* Dark green for the entire section background, as per your screenshot */
    padding: 0px 0px!important; /* Some padding around the section */
    padding: 0px !important;
}

/* Block ID: content-grid-height-corrected */
.onboarding-hero-section > div > .content-grid {
    display: flex;
    flex-grow: 1; /* Corrected: This makes the div take available height */
    flex-direction: column; /* Stack columns on mobile by default */
    gap: 0px; /* Space between columns/rows */
    margin: 0; /* Center content */
}

/* This is the crucial change: Set text color to white for readability */
.onboarding-hero-section .grid-column-right span,
.onboarding-hero-section .grid-column-right h3,
.onboarding-hero-section .grid-column-right h5,
.onboarding-hero-section .grid-column-right p {
    color: #8DFDBA !important; /* White text for contrast against the dark green background */
}

@media (min-width: 1024px) { /* For larger screens (e.g., desktops) */
/* Contact button styling */
    .onboarding-hero-section > div > .content-grid {
        flex-direction: row; /* Arrange columns side-by-side */
        align-items: center; /* Vertically align items in the center */
        justify-content: space-between; /* Space out content */
    }

    .onboarding-hero-section .grid-column-left,
    .onboarding-hero-section .grid-column-right {
        flex: 1; /* Allow columns to grow and take equal space */
    }

    .onboarding-hero-section .grid-column-left {
        padding-right: 0px; /* Space between image and text */
    }

    .onboarding-hero-section .grid-column-right {
        padding-left: 40px; /* Space between image and text */
        padding-right: 40px; /* Space between image and text */
    }
.onboarding-hero-section .grid-column-left
img {
width: 700px !important; / Example fixed width /
height: auto; / Maintain aspect ratio */
}
/* Block ID: new-phrase-styles */

/* Styles for "Scale your creative team" (based on "creative team’s") */
.creative-team-style {
    font-family: 'Baskerville', serif !important; /* Assumes --font-serif is defined for your serif font */
    font-size: calc(100% + 20px) !important; /* Makes it slightly larger than the parent font size */
    /* The <em> tag already makes it italic */
    font-weight: 400 !important;
}

/* Styles for "with Superside in as little as 1 week" (based on "Your") */
.onboarding-style {
    color: var(--bor-accent); /* Assumes --bor-accent is defined for your accent color */
    font-weight: normal !important;
    font-size: 1.2em; /* Makes text 1.2 times larger than its parent's font size */
    line-height: 0.75em !important;
}

/* Ensure these styles are still applied to the overall h3 */
.onboarding-hero-section .grid-column-right h3 {
    /* Retain original h3 styling from previous turns */
    font-family: var(--font-heading, sans-serif); /* font-heading */
    box-sizing: border-box; /* box-border */
    letter-spacing: 0.1px; /* tracking-[0.1px] */
    font-size: 1.875rem; /* text-bor-3xl (e.g., 30px) */
    /* And other responsive font sizes from earlier CSS */
}
/* Block ID: onboarding-line-css-corrected-for-empty-span */
.onboarding-hero-section .grid-column-right .onboarding-header-group .onboarding-line {
    display: block; /* Make it a block-level element so it can have width and margins */
    width: 100%; /* Give it a specific width, adjust as needed */
    margin-top: 10px; /* Add some space between "ONBOARDING" text and the line */
    /* If padding-bottom was intended to push content below the line, you might add it to the line itself or the text above.
       For a simple line, padding-bottom might not be needed on the line element itself.
       If you want space between the line and the H3, add margin-bottom to this line or margin-top to H3. */

    border-top: 1px solid #8DFDBA; /* Creates a 1px solid white line. Using #ffffff directly ensures it's white. */
    /* The 'color: #ffffff;' property on this span is technically not needed for the line color if you set border-top directly to white,
       but it also doesn't hurt. If you want the line to adapt to parent text color via currentColor, keep it. */
}

/* Also, ensure your 'ONBOARDING' text span doesn't have an old border */
.onboarding-hero-section .grid-column-right .onboarding-header-group span:first-child {
    border-bottom: none !important; /* Make sure the ONBOARDING text itself doesn't have a border now */
    padding-bottom: 0px !important; /* Remove any padding-bottom that might have been for its own border */
}

/* And ensure the other text lines are also explicitly removed as before */
.onboarding-hero-section .grid-column-right .onboarding-header-group h3 {
    border-bottom: none !important;
    margin-top: 40px;
    line-height: 1.2em !important;
}

.onboarding-hero-section .grid-column-right .onboarding-header-group h3 span,
.onboarding-hero-section .grid-column-right .onboarding-header-group h3 em {
    border-bottom: none !important;
}
.onboarding-hero-section .grid-column-right h5 {
    font-weight: normal !important;
    font-size: 1.4em; /* Makes text 1.2 times larger than its parent's font size */
    line-height: 1.45em;
    letter-spacing: -0.02em !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    
}
.onboarding-hero-section .grid-column-right p {
    font-weight: normal !important;
    font-size: 16px; /* Makes text 1.2 times larger than its parent's font size */
    line-height: 1.5em;
}
/* Block ID: call-to-action-section-css */
.call-to-action-section {
    background-image: url("https://cdn.sanity.io/images/canvases/caq51M4rYJJQ/618c35581136deffa68a682682ddaac1e872994d-4096x2296.jpg");
    background-size: cover; /* Ensures the image covers the entire container */
    background-position: center; /* Centers the image within the container */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    min-height: 300px; /* Give the section a minimum height, adjust as needed */
    display: flex; /* Use flexbox to center content */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within its flow */
    padding: 60px 20px; /* Add padding around the content */
}
.call-to-action-section h2 {
  color: white;
  text-align: center !important;
  font-size: calc(100% + 25px) !important;
}
#block-OUR-DIFFERENT {
    text-align: center !important;
}
.super-root {
  display: none !important;
}
.super-content-wrapper,
.notion-header,
.notion-root {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
.call-to-action-section {
  min-height: 600px;           /* optional: force minimum height */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centers content vertically */
  align-items: center;         /* centers content horizontally */
  text-align: center;          /* optional: for alignment */
}
/* Target the heading and paragraph directly */
#sub-paragraph {
    /* Ensure text within them is left-aligned */
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-weight: 400 !important; /* Set font weight to normal */
}
#main-heading {
    line-height: 1.2em !important;
    font-weight: 450 !important; /* Set font weight to normal */
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Main-hero-heading-styles */
#main-heading .text-bor-accent {
    /* Apply Inter Tight to the main heading text */
    color: #8dfdba !important;
    font-family: "Inter Tight", sans-serif !important;
    font-size: var(--bor-text-5xl); /* Use your custom variable for size */
    font-style: normal !important; /* Ensure it's not italic by default */
    text-align: left;
    padding-bottom: 20px;
}

#main-heading .font-serif.text-\[calc\(105\%\)\] em {
    /* Apply Instrument Serif to the specific italicized part */
    color: var(--bor-highlight-green) !important;
    font-family: "Instrument Serif", serif !important;
    font-size: calc(100% + 4px) !important; /* Maintain the specific size calculation */
    font-style: italic !important; /* Ensure it's italic */
    font-weight: 450 !important; /* Set font weight to 400 */
}
#sub-paragraph {
            text-align: left;
            margin-left: 0 !important;
            margin-right: auto !important;
            line-height: 1.5;
        }
.notion-heading.notion-semantic-string {
  font-weight: 400;
  font-size: 50px;
  letter-spacing: -2px !important;
}
.notion-text.notion-semantic-string {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem !important ;
  letter-spacing: 2px !important;
}
.instrument-serif-text {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important; /* Assuming you want this weight */
  font-size: calc(100% + 8px) !important; /* Increased from +4px to +8px for bigger size */
  letter-spacing: 0.01em !important; /* Keep consistent or adjust as needed */
}
.instrument-headline {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important;
  font-size: calc(100% + 4px) !important;
  letter-spacing: 0.01em !important;
}
.lets-talk-style {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important;
  font-size: calc(100% + 4px) !important;
  letter-spacing: -2px !important;  
}
.column-title {
  font-family: "Inter", sans-serif; /* Apply Inter as the default sans-serif font */
  font-weight: 400;
  font-size: 1.2em !important;
  letter-spacing: -1px;
}
.column-paragraph {
  font-size: 16px !important;
  padding-top: 10px !important;
}
.instrument-headline-onboarding {
  font-size: 1.2em;
}
.headline-sans-serif {
  font-size: 1.3em;
  letter-spacing: -1px;  
  line-height: 1.2em;
  font-weight: 400!important;
}
#block-whatwecreate {
  text-align: center !important;
}
}
@media (max-width: 768px) {
    .onboarding-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding: 2.75rem 0;      /* matches pt-11 / pb-11 */
    gap: 3rem;               /* matches gap-12 */
  }
  
  .timeline-grid p {
    padding-right: 20px !important;
  }

  /* Text block (title, description, subtext) */
  .onboarding-section .onboarding-text {
    width: 100%;
    max-width: 532px;
    margin: 0 auto;
    order: 0;                /* text appears first on mobile */
  }

  /* Subtitle styling (the “onboarding” label) */
  .onboarding-section .onboarding-text .subtitle {
    font-size: 0.875rem;     /* similar to text-bor-sm */
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid currentColor;
    margin-bottom: 1.5rem;
  }

  /* Main heading (“Scale your creative team …”) */
  .onboarding-section .onboarding-text h3 {
    font-size: 1.875rem;     /* similar to text-bor-3xl */
    line-height: 2.25rem;
    margin: 0 0 1.5rem 0;
  }

  /* Subheading (“Our agile onboarding process…”) */
  .onboarding-section .onboarding-text h5 {
    font-size: 1.125rem;     /* similar to text-bor-1.5xl */
    line-height: 1.75rem;
    margin: 0 0 1rem 0;
  }

  /* Paragraph text (“The average time from contract…” etc.) */
  .onboarding-section .onboarding-text p {
    font-size: 1rem;         /* similar to text-bor-base */
    line-height: 1.5rem;
    margin: 0;
  }

  /* Image block */
  .onboarding-section .onboarding-image {
    width: 100%;
    order: 1;                /* image comes after text on mobile */
    margin: 0;
  }
  .onboarding-section .onboarding-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .column-title-why-us {
  font-size: 22px !important;
  margin-bottom: 10px !important;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: -1px;
}
  .notion-column-list {
    display: flex;
    flex-direction: column;
    margin: 20px 20px !important;
  }
  .notion-column {
    width: 100% !important;
    margin-inline-start: 0 !important;
    margin-bottom: 24px;
  }
  .column-paragraph {
    padding-right: 0 !important;
  }
  #block-1f35d72ed3968029a682c0b9550b5ceb,
  #block-1f05d72ed3968143bbbddd843a889505,
  #block-Everytypeofcreativework,
  #block-1f15d72ed39680b895c6c1d3e4fd0fe8,
  {
    font-size: 1.8em; /* Example: Smaller font size for mobile */
    padding: 0px 40px !important; /* Example: Some padding */
    font-weight: 400;
    letter-spacing: -0.5px;
}
  #block-partnership
  {
    font-size: 2.2em; /* Example: Smaller font size for mobile */
    font-weight: 400;
    letter-spacing: -0.5px;
  }
  #block-partnership em.instrument-headline {
  line-height: 1;  /* prevent extra space */
  display: block;  /* makes it a proper line */
}
  #block-2015d72ed39680019cdad6e98ef90ceb,
  #block-whatwecreate,
  #block-1f35d72ed3968076a900e279aee589d6,
  #block-OUR-DIFFERENT {
    font-size: 0.85em;    /* Smaller font for mobile */
    letter-spacing: 2px;
    text-align: center;
}
.instrument-headline {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 550 !important;
  font-size: calc(100% + 4px) !important;
  letter-spacing: 0.01em !important;
}
.font-serif.text-\[calc\(105\%\)\].font-\[300\] em {
    color: var(--bor-highlight-green) !important;
    font-family: "Instrument Serif", serif !important;
    font-size: calc(100% + 4px) !important;
    font-style: italic !important;
    font-weight: 450 !important;
}
.column-paragraph {
  font-size: 16px !important;
  padding: 0px 0px !important;
  text-align: left !important;
}
#block-1f05d72ed39680799e04cc2a1326132d,
#block-1f05d72ed3968019a401f30567818c37,
#block-1f05d72ed39680d193b2f28d4dcad024
{
  font-weight: 400;
  font-size: 1.5em !important;
}
#block-1f05d72ed39680b79af8dc5224fbcec6,
#block-1f05d72ed39680f7ad10fdf8c4b73bf3,
#block-1f05d72ed39680bd941cd7239f9d1e7b {
  font-size: 0.8rem !important;      /* smaller font for mobile */
  line-height: 1.5 !important;
  opacity: 1 !important;              /* make sure it's visible */
  max-height: none !important;        /* remove height limit */
  overflow: visible !important;       /* allow full content */
  transition: none !important;        /* no transition needed */
  margin-top: 8px !important;         /* optional spacing */
  text-align: center !important;
}
#block-1f05d72ed39680bd8577fbcf21f567ba p {
  padding: 0 30px!important;
  }
#block-1f05d72ed39680bd8577fbcf21f567ba h2 {
  font-size: 1.5em !important;
  line-height: 1.2 !important;
}
  /* Scroll effect wrapper */
  #block-1f05d72ed39680bd8577fbcf21f567ba {
    position: relative;
    height: 300vh; /* 3 x 100vh for each column */
    display: block !important;
    margin: 0;
    padding: 0;
  }
  /* Each column fills screen and is layered */
  #block-1f05d72ed39680bd8577fbcf21f567ba .notion-column {
    position: sticky;
    top: 0;
    width: 100% !important;
    height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* instead of center */
    padding: 0px 0px; /* reduce space */
    box-sizing: border-box;
    opacity: 1 !important;
    z-index: 1;
    overflow: visible !important;
  }
    /* Z-index layering */
  #block-1f05d72ed39680ab8c97dcaa31daa9e5 { z-index: 1; }
  #block-1f05d72ed39680a4baf3e06609cc4764 { z-index: 2; }
  #block-1f05d72ed39680e3a2f3e4d39f09f10f { z-index: 3; }
  
  :root {
    --independent-carousel-item-height: 300px !important;
    --independent-carousel-item-width: 200px !important;
  }
  #block-1f15d72ed39680b895c6c1d3e4fd0fe8 {
   padding: 0px 50px !important; 
  }
  .super-root {
  display: none !important;
  }
  .super-content-wrapper,
  .notion-header,
  .notion-root {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  }
  .metrics {
    justify-content: center;
    text-align: center;
  }

  .metric {
    text-align: center;
  }
  .feedback-main {
    font-family: 'Inter Tight', sans-serif;
  }

  .feedback-main .quote {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
  }

  .feedback-main .author {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .feedback-main .position {
    font-size: 0.8rem;
    color: #555;
  }

  .metrics {
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .metric-data {
    font-size: 1.1rem;
    font-weight: 500;
  }

  .metric-desc {
    font-size: 0.7rem;
    color: #666;
  }
  .grid-column-right {
    padding: 16px;
  }

  .onboarding-header-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .onboarding-header-group span:first-child {
    font-size: 14px;
  }

  .onboarding-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,0.3); /* adjust to your theme */
    margin: 4px 0 12px 0;
  }

  .onboarding-header-group h3 {
    font-size: 26px;  /* matches reference mobile size */
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
  }

  .onboarding-header-group h3 .instrument-headline-onboarding {
    font-style: italic;
    font-size: calc(100% + 14px) !important;
    margin-right: 0 !important;
  }

  .onboarding-header-group h3 .headline-sans-serif {
    display: inline;
    letter-spacing: -1px !important;
  }

  .grid-column-right h5 {
    font-size: 18px;
    line-height: 1.5;
    font-spacing: -0.5 !important;
    font-weight: 300;
    margin: 12px 0;
  }

  .grid-column-right p {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 4px;
    margin-bottom: 10px;
  }
  /* Your hero section should already have the background image */
  .hero, .hero-section, .hero-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }
.call-to-action-section {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: clamp(48px, 8vw, 120px) 5vw;

  /* astronaut fishing background */
  background-color: #0d2926;
  background-image: url("https://cdn.sanity.io/images/canvases/caq51M4rYJJQ/618c35581136deffa68a682682ddaac1e872994d-4096x2296.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 35vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.call-to-action-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  z-index: 0;
}

.call-to-action-section > * {
  position: relative;
  z-index: 1;
}
/* =========================
   CTA: Headline (scoped)
   ========================= */
.call-to-action-section .project-heading {
  font-weight: 400;
  color: #fff;
  text-align: center;
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  line-height: 1.2;   /* tighter */
  margin-bottom: 0.5rem;
}

.call-to-action-section .project-heading .lets-talk-style {
  display: inline;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 1.1em;
  margin: 0;                    /* keep lines tight */
  line-height: 1.2;
}

.call-to-action-section .project-heading .start-a-project-style {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 450;
  letter-spacing: -0.02em;      /* subtle tightening */
  margin-top: 0.25rem;
}
  .call-to-action-section .project-heading .start-a-project-style:last-child {
    display: block;
    margin-top: 0.2rem;
  }
/* =========================
   CTA: Button
   ========================= */
.call-to-action-section .notion-button {
  margin-top: 10px;
  margin-bottom: 50px;
}

.call-to-action-section .notion-button a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  /* shape & spacing */
  border-radius: 9999px;
  padding: 16px 135px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;

  /* colors */
  background-color: #d8ff85;    /* bright green */
  color: #0a0a0a;

  /* transition */
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.call-to-action-section .notion-button a:hover {
  background-color: #96c843;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Optional: disabled-like state (works if a button element is used) */
.call-to-action-section .notion-button a:disabled {
  background-color: #d4d4d4;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* =========================
   Mobile-only adjustments
  .call-to-action-section .project-heading {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.25;
  }
  .call-to-action-section .project-heading .start-a-project-style {
    font-size: 0.95rem;
    letter-spacing: -0.015em;
  }
  .call-to-action-section .project-heading .lets-talk-style {
    font-size: 0.9rem;
    margin-top: 0.15rem;       /* small gap between lines */
    margin-bottom: 0.15rem;
  }
  .call-to-action-section .notion-button a {
    padding: 14px 28px;        /* more reasonable on small screens */
    font-size: 1rem;
  }
}

/* === Carousel Wrapper === */
.independent-carousel-wrapper {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  height: var(--independent-carousel-item-height) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  position: relative !important;
}

/* === Carousel Track === */
.independent-carousel {
  height: var(--independent-carousel-item-height) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  position: relative !important;
}

.independent-carousel-inner {
  display: flex !important;
  flex-direction: row !important;
  height: 100% !important;
  gap: var(--independent-carousel-image-gap) !important;
  animation: independent-horizontal-slide var(--independent-carousel-animation-duration) infinite linear !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  overflow: visible !important;
}

/* === Card Items === */
.independent-carousel-item {
  flex-shrink: 0 !important;
  width: var(--independent-carousel-item-width) !important;
  height: calc(var(--independent-carousel-item-height) - 100px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: #fff !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1) !important,
              box-shadow 800ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform-origin: center center !important; /* match reference */
  will-change: transform, box-shadow !important;
}

/* Stagger (desktop only) */
@media (min-width: 1024px) {
  .independent-carousel-item:nth-child(odd) {
    transform: translateY(1.5rem) !important; /* smaller stagger */
  }
}

/* Hover Effects */
@media (min-width: 1024px) {
  .independent-carousel-item:hover {
    transform: rotate(0.5deg) scale(1.01) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  }
  .independent-carousel-item:nth-child(odd):hover {
    transform: translateY(1.5rem) rotate(0.5deg) scale(1.01) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  }
}

/* Images */
.independent-carousel-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}
/* Optional: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .independent-carousel-item { transition: none; }
}
/* ===== OUR PROCESS — Timeline (clean) ===== */
#our-process{
  --line-w: 1px;
  --dot-d: 44px;
  --ring: 1px;
  --active: rgba(255,255,255,.95);
  --track:  rgba(255,255,255,.16);
  --bg:     var(--bor-background, #0f1e1e);
  --timeline-lag: .10;
  --timeline-anchor: .52;
  --timeline-delay: 0 !important; /* px */
}

/* stacking + z-order */
#our-process .timeline-grid,
#our-process .grid { position: relative; isolation: isolate; }
#our-process .timeline-node { position: relative; z-index: 2; }   /* dots above line */

/* LINE (track behind dots) — supports both structures */
#our-process .timeline-line,
#our-process .w-0.5.items-start.justify-self-center{
  position: relative !important;
  z-index: 0 !important;                  /* behind dots */
  width: var(--line-w) !important;
  background: var(--track);
  margin-top: calc(var(--dot-d)/2 + var(--ring));
  overflow-y: clip;
}

/* Progress when using .timeline-line (pseudo) */
#our-process .timeline-line::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top:0; width:var(--line-w); height: var(--progress, 0);
  background: var(--active);
}

/* Progress when using sticky inner fill element */
#our-process .w-0.5.items-start.justify-self-center .sticky > .bg-bor-foreground{
  position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:var(--line-w); height:100vh; background: var(--active);
}

/* DOTS (solid bg same as section, thin ring) */
#our-process .timeline-dot{
  width: var(--dot-d); height: var(--dot-d);
  display:grid; place-items:center; line-height:1;
  border-radius: 9999px;
  background: var(--bg) !important;
  border: var(--ring) solid var(--track);
  color: var(--active);
  font-variant-numeric: lining-nums;
}

#our-process .w-0.5.items-start.justify-self-center .sticky > .bg-bor-foreground{
  height: 0; /* JS will set height dynamically */
}
/* Use pseudo-layers for the ring; keep solid fill as-is */
#our-process .timeline-dot{
  position: relative;
  background: var(--bg);            /* your existing solid center */
  border: 0 !important;             /* turn off old border ring */
  overflow: visible;                 /* ring sits inside via inset shadow */
}

/* TRACK ring (dim, always visible) */
#our-process .timeline-dot::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: inset 0 0 0 var(--ring) var(--track);
  z-index: 1;
  pointer-events:none;
}

/* ACTIVE ring overlay (bright) — masked from top->bottom */
#our-process .timeline-dot::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow: inset 0 0 0 var(--ring) var(--active); /* bright ring */
  z-index: 2;
  pointer-events:none;

  /* Rectangle mask that grows downward by --strokePx */
  -webkit-mask-image: linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--strokePx, 0px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top;

          mask-image: linear-gradient(#000, #000);
          mask-size: 100% var(--strokePx, 0px);
          mask-repeat: no-repeat;
          mask-position: top;
}

/* Keep the number above the rings */
#our-process .timeline-dot > span{ position: relative; z-index: 3; }

/* Optional: brighten ring while being filled/after */
#our-process .timeline-step.is-touching .timeline-dot::before,
#our-process .timeline-step.is-reached  .timeline-dot::before{
  box-shadow: inset 0 0 0 var(--ring) var(--active);
}
/* ===== OUR PROCESS — compact spacing ===== */

/* Make the dot↔content column gap smaller + reduce vertical spacing between steps */
#our-process .timeline-grid{
  column-gap: .5rem !important;   /* was .75rem+ */
  row-gap: 1.25rem !important;    /* was 2rem+ */
}

/* Slightly roomier on larger screens but still compact */
@media (min-width: 1024px){
  #our-process .timeline-grid{
    column-gap: .625rem !important;
    row-gap: 3rem !important;   /* down from lg:gap-y-20 */
  }
}

/* Tighter spacing inside the right-hand content block */
#our-process .timeline-grid .text-bor-foreground .flex.flex-col{ gap: .375rem; }
#our-process .timeline-grid h6{ margin: 0; }
#our-process .timeline-grid p{  margin: 0; }

/* (Optional) make each item’s inner sub-gaps extra tight */
#our-process .timeline-grid .text-bor-foreground .flex.flex-col.gap-2{ gap: .375rem; }
#our-process .timeline-grid .text-bor-foreground .flex.flex-col.gap-1{ gap: .25rem; }
/* exact 3px gap between h6 and p */
.h6-tight { margin: 0 0 3px 0; }
.p-tight  { margin-top: 0; }


/* ===== Injected fixes for 3-column sections and mobile stacking ===== */
.notion-column-list {
  display: flex;
  gap: var(--column-spacing, 24px);
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 0 auto;
  max-width: var(--layout-max-width, 1560px);
  box-sizing: border-box;
}
.notion-column { flex: 0 1 auto; box-sizing: border-box; min-width: 0; }
.notion-image img { width:100%; height:auto; display:block; object-fit:cover; border-radius:12px; }

/* Specific block fixes (the block id you pointed out) */
#block-1f15d72ed39680128273d733e31fd282 { margin: 20px 100px; box-sizing:border-box; }
#block-1f15d72ed39680128273d733e31fd282 > .notion-column { width: calc((100% - var(--column-spacing, 24px) * 2) / 3) !important; margin:0 !important; }
#block-1f15d72ed39680128273d733e31fd282 .column-title-why-us { font-size:1.25rem; margin-top:12px; margin-bottom:8px; font-weight:600; color:var(--bor-foreground-inverted,#0d0c0c); }
#block-1f15d72ed39680128273d733e31fd282 .column-paragraph { font-size:18px; line-height:1.4rem; padding-right:25px; margin:0; color:var(--bor-foreground-inverted,#0d0c0c); }
#block-1f15d72ed39680128273d733e31fd282 .size-\[85px\] { width:85px; height:85px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
#block-1f15d72ed39680128273d733e31fd282 .size-\[85px\] svg { width:36px; height:36px; }

@media (max-width: 1024px) {
  #block-1f15d72ed39680128273d733e31fd282 { margin:20px 24px; }
  #block-1f15d72ed39680128273d733e31fd282 > .notion-column { width:100% !important; margin-bottom:var(--column-spacing,24px) !important; }
  #block-1f15d72ed39680128273d733e31fd282 .size-\[85px\] { width:56px; height:56px; }
  #block-1f15d72ed39680128273d733e31fd282 .column-paragraph { padding-right:0; }
}
/* =========================
   Hover animation: heading then paragraph
   Matches the "before/after hover" reference
   Target: #block-1f05d72ed39680bd8577fbcf21f567ba
   ========================= */

/* card container baseline */
#block-1f05d72ed39680bd8577fbcf21f567ba {
  display: flex !important;
  gap: var(--column-spacing, 24px) !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* each column = card */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column {
  position: relative;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 12px;
  min-height: 490px;                /* mobile baseline */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: transparent;
  transition: transform .36s cubic-bezier(.2,.9,.2,1);
}

/* desktop larger height */
@media (min-width:1024px){
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column { min-height: 588px; }
}
@media (min-width:1280px){
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column { min-height: 720px; }
}

/* image fill full card and sit behind text */
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image,
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  transition: transform .6s cubic-bezier(.2,.9,.2,1);
}

/* overlay area uses existing h2 and p (no HTML change) */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 28px 32px 36px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, rgba(3,20,14,0) 0%, rgba(3,20,14,0.96) 42%) !important;
  border-radius: 0 0 12px 12px !important;
  z-index: 2 !important;
  transform: translateY(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Title (heading) visual */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  color: #8DFDBA; /* mint accent for heading text by default */
  letter-spacing: 0.1px;
  pointer-events: auto !important;
}

/* italic piece style (ensure same mint color) */
#block-1f05d72ed39680bd8577fbcf21f567ba .instrument-serif-text,
#block-1f05d72ed39680bd8577fbcf21f567ba .text-\[calc\(100\%\+\s*4px\)\] {
  font-family: "Instrument Serif", serif !important;
  font-style: italic !important;
  color: #8DFDBA !important;
  font-weight: 400 !important;
}

/* paragraph style inside overlay (hidden initially) */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  margin-top: 8px !important;
  color: rgba(255,255,255,0.94) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  pointer-events: auto !important;
}

/* Hover: reveal heading first (small delay), then paragraph (longer delay) */
/* On desktop (hover) */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover {
  transform: translateY(-10px);
}
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover .notion-image img {
  transform: scale(1.04);
}

/* heading appears with tiny delay */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover h2.notion-heading {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform .36s cubic-bezier(.2,.9,.2,1) .04s, opacity .36s cubic-bezier(.2,.9,.2,1) .04s !important;
}

/* paragraph appears slightly later for staged reveal */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform .36s cubic-bezier(.2,.9,.2,1) .18s, opacity .36s cubic-bezier(.2,.9,.2,1) .18s !important;
}

/* Always show overlay on mobile and remove hover transforms */
@media (max-width: 900px) {
  #block-1f05d72ed39680bd8577fbcf21f567ba {
    display: block !important;
    padding: 0 16px;
  }
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column {
    min-height: 420px !important;
    margin-bottom: var(--column-spacing,20px) !important;
    transform: none !important;
  }
  #block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(3,20,14,0) 0%, rgba(3,20,14,0.96) 40%) !important;
    padding: 20px 22px !important;
  }
}

/* tiny accessibility & fallback: if hover unsupported, keep overlay visible */
@media (hover: none) {
  #block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
  }
}
/* ===== FINAL: precise title-first, paragraph-on-hover overlay =====
   Replace previous overlay rules with this block.
   Targets both h5[data-testid="heading"] and h2.notion-heading,
   paragraphs p.text-bor-base and p.column-paragraph.
   ===== */

 /* container baseline */
#block-1f05d72ed39680bd8577fbcf21f567ba {
  display:flex !important;
  gap:var(--column-spacing,24px) !important;
  justify-content:center !important;
  align-items:stretch !important;
  max-width:1400px !important;
  margin:0 auto !important;
  padding:0 18px !important;
  box-sizing:border-box !important;
}

/* card wrapper */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
#block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 {
  position:relative !important;
  flex:1 1 0% !important;
  min-width:0 !important;
  overflow:hidden !important;
  border-radius:12px !important;
  min-height:490px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important; /* image top, footer overlay bottom */
  background:transparent !important;
  transition:transform .36s cubic-bezier(.2,.9,.2,1) !important;
}

/* larger heights */
@media (min-width:1024px){
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
  #block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 { min-height:588px !important; }
}
@media (min-width:1280px){
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
  #block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 { min-height:720px !important; }
}

/* Force image to fully cover card and be behind everything */
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image,
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image img,
#block-1f05d72ed39680bd8577fbcf21f567ba img {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  z-index:0 !important;
  transition:transform .6s cubic-bezier(.2,.9,.2,1) !important;
}

/* Remove white/bg from inner wrapper that created the gap */
#block-1f05d72ed39680bd8577fbcf21f567ba .px-4,
#block-1f05d72ed39680bd8577fbcf21f567ba .px-4.py-6,
#block-1f05d72ed39680bd8577fbcf21f567ba .flex.max-w-full.flex-[0_0_auto].flex-col.w-full.px-4.py-6 {
  background:transparent !important;
  position:relative !important;
  z-index:1 !important;
  padding:0 !important; /* remove extra white spacing */
}

/* Footer overlay wrapper behaviour:
   - small footer height visible pre-hover (title only)
   - paragraph hidden (offscreen) and slides up on hover
*/
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"],
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
  box-sizing:border-box !important;
  z-index:2 !important;
}

/* Title: always visible in a small footer bar */
#block-1f05d72ed39680bd8577fbcf21f567ba .title-footer {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  padding:16px 22px !important;        /* thin footer height pre-hover */
  background:linear-gradient(180deg, rgba(3,20,14,0) 0%, rgba(3,20,14,0.78) 110%) !important;
  border-radius:0 0 12px 12px !important;
  display:block !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
  opacity:1 !important;
}

/* Normal title selectors - style them, and ensure they are placed into .title-footer area.
   We will force their position to be inside footer by absolute rules (pre-hover). */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"] {
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  bottom:12px !important; /* sits inside the thin footer */
  margin:0 !important;
  padding:0 !important;
  color:#8DFDBA !important;
  font-family:"Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  font-weight:400 !important;
  font-size:30px !important;
  line-height:1.05 !important;
  z-index:3 !important;
  text-shadow:0 1px 0 rgba(0,0,0,0.18) !important;
  pointer-events:auto !important;
}

/* Paragraph: hidden initially, positioned below footer (offscreen)
   It will slide up into view on hover. */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-100% !important;            /* offscreen below card */
  margin:0 !important;
  padding:24px 28px 36px !important;
  box-sizing:border-box !important;
  background:linear-gradient(180deg, rgba(3,20,14,0) 0%, rgba(3,20,14,0.96) 100%) !important;
  color:rgba(255,255,255,0.96) !important;
  font-size:16px !important;
  line-height:1.6 !important;
  border-radius:0 0 12px 12px !important;
  z-index:2 !important;
  transform:translateY(18px) !important;
  opacity:0 !important;
  transition: transform .42s cubic-bezier(.2,.9,.2,1) .18s, opacity .42s cubic-bezier(.2,.9,.2,1) .18s !important;
  pointer-events:auto !important;
}

/* Hover behavior: reveal paragraph by sliding it up to sit above the title-footer.
   Paragraph final bottom set so it doesn't overlap title (we move title up a little). */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover,
#block-1f05d72ed39680bd8577fbcf21f567ba .mx-2:hover {
  transform:translateY(-6px) !important;
}

/* scale image slightly */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover img,
#block-1f05d72ed39680bd8577fbcf21f567ba .mx-2:hover img {
  transform:scale(1.04) !important;
}

/* Move paragraph into visible area: bottom equals footer height + paragraph height offset.
   We approximate by setting bottom to the footer height (48–180px depending on content).
   Using translateY to achieve smooth slide. */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba .mx-2:hover p.text-bor-base {
  bottom:0 !important;
  transform:translateY(0) !important;
  opacity:1 !important;
  transition-delay:.12s !important;
}

/* To avoid overlap: when paragraph visible, nudge title up a bit so they don't collide */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba .mx-2:hover h5[data-testid="heading"] {
  bottom: calc( (1.0em * 1.05) + 20px ) !important; /* move title up ~ one line + padding */
  transition: bottom .36s cubic-bezier(.2,.9,.2,1) .06s !important;
}

/* Mobile: no hover, paragraph always visible and overlay becomes relative block */
@media (max-width:900px){
  #block-1f05d72ed39680bd8577fbcf21f567ba { display:block !important; padding:0 12px !important; }
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
  #block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 { min-height:420px !important; margin-bottom:var(--column-spacing,20px) !important; transform:none !important; }
  #block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
  #block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"] {
    position:relative !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    padding:16px 18px !important;
    color:#8DFDBA !important;
    font-size:28px !important;
  }
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
    position:relative !important;
    bottom:auto !important;
    opacity:1 !important;
    transform:none !important;
    padding:20px 18px !important;
    background:linear-gradient(180deg, rgba(3,20,14,0) 0%, rgba(3,20,14,0.96) 100%) !important;
  }
}

/* safety fallback: if hover not supported show paragraphs */
@media (hover:none){
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base { opacity:1 !important; transform:none !important; position:relative !important; bottom:auto !important; }
}
/* ===========================
   OVERRIDE: Card height + title-first / paragraph-on-hover overlay
   Paste this at the end of style.css
   =========================== */

/* 1) Card height control (75% of previous) */
:root{
  /* adjust this base to control desktop base height (original ~ 588–720). */
  --card-desktop-original: 588px;
  --card-desktop-h: calc(var(--card-desktop-original) * 0.75); /* 75% of original */
  --card-tablet-h: calc(480px * 0.75);
  --card-mobile-h: calc(420px * 0.75);
  --overlay-gradient: linear-gradient(180deg, rgba(8,18,14,0) 0%, rgba(8,18,14,0.95) 60%); /* dark green gradient */
}

/* Apply compact heights to each card wrapper */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
#block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 {
  min-height: var(--card-desktop-h) !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* keep image top, overlay bottom */
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  border-radius: 12px !important;
}

/* Responsive height adjustments */
@media (max-width: 1280px){
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
  #block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 {
    min-height: var(--card-tablet-h) !important;
  }
}
@media (max-width: 900px){
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
  #block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 {
    min-height: var(--card-mobile-h) !important;
  }
}

/* 2) Force image behind everything and cover the full card */
#block-1f05d72ed39680bd8577fbcf21f567ba img,
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  transition: transform .6s cubic-bezier(.2,.9,.2,1) !important;
}

/* 3) Overlay area — always show title (heading) on dark green gradient at bottom.
      Paragraph is hidden by default and revealed on hover, sliding up under the title.
      We use absolute positioned overlay container (no white background exposure). */

/* target the heading and paragraph used in your markup */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"],
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  box-sizing: border-box !important;
  padding: 18px 28px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Title (visible by default) — sits on top of gradient background */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"] {
  background: var(--overlay-gradient) !important; /* dark green gradient */
  color: #8DFDBA !important; /* mint heading color */
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 28px !important;       /* adjust to taste */
  line-height: 1.05 !important;
  padding: 16px 28px !important;    /* keep the title area compact */
  border-radius: 0 0 12px 12px !important;
  opacity: 1 !important;            /* ensure always visible */
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Paragraph (hidden initially): positioned under the title but clipped by max-height */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
  background: transparent !important; /* keep it visually on the same gradient */
  color: rgba(255,255,255,0.96) !important;
  margin-top: 8px !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;

  /* hide by clipping: safe, avoids white background */
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: translateY(8px) !important;
  transition: max-height 0.42s cubic-bezier(.2,.9,.2,1) 0.12s, opacity 0.36s ease 0.12s, transform 0.36s cubic-bezier(.2,.9,.2,1) 0.12s;
  pointer-events: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Make sure the combined overlay area has the same gradient so no white shows */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading::after {
  content: "" ;
  display: block ;
  position: absolute ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  top: 0 ;
  z-index: 1 ;
  pointer-events: none ;
  background: var(--overlay-gradient) ;
  border-radius: 0 0 12px 12px ;
  opacity: 1 ;
}

/* 4) Hover: reveal paragraph — it expands under the title; no white background visible */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.text-bor-base {
  max-height: 240px !important; /* adjust depending how much paragraph you want to show */
  opacity: 1 !important;
  transform: translateY(0) !important;
  overflow: visible !important;
  pointer-events: auto !important;
  /* the paragraph sits visually immediately under the title padding */
  padding: 8px 28px 28px !important;
}

/* Slight staged reveal: ensure heading remains visible (no flicker) */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover h5[data-testid="heading"] {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform .28s cubic-bezier(.2,.9,.2,1) .02s, opacity .28s ease .02s;
  z-index: 3 !important;
}

/* 5) Avoid showing any white (card background) when paragraph expands:
   ensure card wrapper background stays transparent and gradient covers bottom region */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-column > .notion-image {
  background: transparent !important;
}

/* 6) Mobile / touch fallback — always show overlay (no hover) */
@media (max-width: 900px){
  #block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
  #block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 {
    min-height: var(--card-mobile-h) !important;
  }

  /* Heading becomes relative (in-flow) and paragraph visible */
  #block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
  #block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"]{
    position: relative !important;
    padding: 16px 18px !important;
    background: var(--overlay-gradient) !important;
    border-radius: 12px 12px 0 0 !important;
    color: #8DFDBA !important;
  }

  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
    position: relative !important;
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    padding: 18px !important;
    background: linear-gradient(180deg, rgba(3,20,14,0.0) 0%, rgba(3,20,14,0.95) 100%) !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* 7) Optional: small accessibility fallback if hover not supported */
@media (hover: none){
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
    position: relative !important;
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
  }
}
/* ===========================
   FIX: Remove white bg, ensure text is on top of dark-green gradient
   =========================== */

/* Card container: no white background */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column,
#block-1f05d72ed39680bd8577fbcf21f567ba .mx-2 {
  background: #08120e !important; /* dark green base */
  overflow: hidden !important;
  position: relative !important;
}

/* Ensure image fills top, not overlaying text */
#block-1f05d72ed39680bd8577fbcf21f567ba img,
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}

/* Overlay gradient covers bottom area */
#block-1f05d72ed39680bd8577fbcf21f567ba::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,18,14,0) 50%, rgba(8,18,14,1) 100%);
  z-index: 1; /* sits above image but below text */
}

/* Title always visible, on top of gradient */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"] {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 24px 28px 12px !important;
  margin: 0 !important;
  color: #8DFDBA !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  background: none !important; /* no extra layer */
  z-index: 2 !important; /* ensure above gradient */
}

/* Paragraph hidden initially */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 64px 28px 28px !important; /* below title */
  color: rgba(255,255,255,0.9) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  z-index: 2 !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: all 0.4s ease !important;
  background: none !important;
}

/* Hover: show paragraph */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.text-bor-base {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Ensure everything scales on mobile */
@media (max-width: 900px){
  #block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
  #block-1f05d72ed39680bd8577fbcf21f567ba h5[data-testid="heading"] {
    position: relative !important;
    background: #08120e !important;
  }
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    padding-top: 8px !important;
  }
}
/* ===== REMOVE ALL GRADIENTS FROM HERO & 3 BLOCKS ===== */
.call-to-action-section::after,
.onboarding-hero-section,
.onboarding-hero-section::before,
.onboarding-hero-section::after,
#block-1f05d72ed39680bd8577fbcf21f567ba::after,
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading::after,
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
#block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
  background: none !important;
}
/* ===============================
   FIX: Dark-green solid background + proper spacing after hover
   Target: 3 cards section
   =============================== */

#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 12px;
  background-color: #08120e !important; /* solid dark green */
  transition: transform 0.35s ease;
}

#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}

/* Overlay container always has solid background behind text */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  position: relative;
  z-index: 2;
  background-color: #08120e !important; /* solid dark green */
  margin: 0 !important;
  padding: 20px 28px !important;
  box-sizing: border-box;
}

/* Title — visible by default */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
  color: #8DFDBA !important; /* mint */
  font-family: "Inter Tight", sans-serif !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  padding-bottom: 10px !important; /* ensure gap for paragraph */
}

/* Paragraph hidden initially */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transform: translateY(6px);
  transition: all 0.35s ease;
}

/* Hover: reveal paragraph below title, spaced by 10px */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph {
  opacity: 1 !important;
  max-height: 240px !important;
  transform: translateY(0);
  margin-top: 10px !important; /* 10px space between title and paragraph */
}

/* Optional subtle lift on hover */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover {
  transform: translateY(-6px);
}
/* ================================
   SHOW: headline (2 lines) before hover,
         reveal full paragraph under it after hover (10px gap)
   Target: #block-1f05d72ed39680bd8577fbcf21f567ba
   Paste at end of style.css
   ================================ */

/* 1) Card container: image behind, content pinned to bottom */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* text at bottom */
  overflow: hidden !important;
  border-radius: 12px !important;
  background-color: #08120e !important; /* solid dark green base */
}

/* 2) Image: full-bleed behind text */
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image,
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
}

/* 3) Text: in-flow, sitting above image (z-index:2), with solid background */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  position: relative !important;
  z-index: 2 !important;
  background-color: #08120e !important; /* keep solid bg under text */
  margin: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

/* 4) Heading: smaller, clamp to 2 lines, visible before hover */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
  color: #8DFDBA !important;            /* mint green */
  font-family: "Inter Tight", sans-serif !important;
  font-size: 26px !important;          /* tweak to make it fit 2 lines */
  line-height: 1.18 !important;
  font-weight: 400 !important;
  padding-top: 20px !important;
  padding-bottom: 0 !important;        /* paragraph will supply spacing on hover */
  display: -webkit-box !important;     /* for line-clamp */
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* 5) Paragraph: hidden by default (will be revealed on hover)
      keep color white and readable */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  padding-top: 0 !important;           /* no extra top padding until reveal */
  padding-bottom: 20px !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: translateY(6px) !important;
  transition: max-height 420ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease, transform 320ms cubic-bezier(.2,.9,.2,1);
  margin-top: 0 !important;            /* will set margin-top on hover = 10px */
}

/* 6) Hover: reveal paragraph fully, keep heading visible, add 10px gap */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph {
  opacity: 1 !important;
  transform: translateY(0) !important;
  max-height: 800px !important;        /* large enough to show full paragraph */
  margin-top: 10px !important;         /* 10px gap between title and paragraph */
}

/* keep heading stable on hover (no overlap) */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover h2.notion-heading {
  padding-bottom: 0 !important;        /* remove bottom padding so gap is via paragraph margin */
}

/* 7) Accessibility / mobile fallback: if hover not supported, always show paragraph in flow */
@media (hover: none), (max-width: 900px) {
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
    position: relative !important;
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 20px !important;
  }

  /* Let heading flow normally on mobile */
  #block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
  }
}

/* 8) Force remove any old absolute-overlay rules that may conflict */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading[style],
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph[style] {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
/* ===============================
   Overlay: solid bottom band + show paragraph on hover (tight gap)
   Paste at end of style.css
   =============================== */

/* 1) Ensure card wrapper is positioned */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border-radius: 12px !important;
  background-color: #08120e !important; /* visual comes from ::after */
  /* optional subtle lift */
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
}

/* 2) Image fills background at z=0 */
#block-1f05d72ed39680bd8577fbcf21f567ba .notion-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
}

/* 3) Solid dark-green band at bottom (always visible before hover) */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column::after {
  content: "" ;
  position: absolute ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  height: 20% ;                 /* adjust how tall the band is */
  background-color: #08120e;    /* solid dark green */
  z-index: 1 ;                  /* sits above image but below text */
  border-radius: 0 0 12px 12px ;
  pointer-events: none ;
}

/* 4) Text (title + paragraph) in-flow, above overlay (z=2) */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
  background: transparent !important; /* text sits above the solid band */
}

/* 5) Heading: clamp to 2 lines, visible before hover */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
  color: #8DFDBA !important;
  font-family: "Inter Tight", sans-serif !important;
  font-size: 26px !important;   /* tweak to fit 2 lines */
  line-height: 1.18 !important;
  font-weight: 400 !important;
  padding-top: 20px !important; /* creates distance from image above */
  padding-bottom: 0 !important; /* keep small - gap will come from paragraph */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* 6) Paragraph: hidden by default (will reveal on hover) */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  padding-bottom: 20px !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: translateY(6px) !important;
  transition: max-height 420ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease, transform 320ms cubic-bezier(.2,.9,.2,1);
  margin-top: 0 !important; /* will set to small gap on reveal */
}

/* 7) Hover: reveal paragraph, with small gap (8px) under title */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph {
  opacity: 1 !important;
  transform: translateY(0) !important;
  max-height: 800px !important; /* large enough for full copy */
  margin-top: 8px !important;   /* small gap between title and paragraph */
}

/* Keep title stable on hover */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover h2.notion-heading {
  /* no extra bottom padding, spacing managed by paragraph margin */
  padding-bottom: 0 !important;
}

/* 8) Small hover lift (optional) */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover {
  transform: translateY(-6px);
}

/* 9) Mobile & no-hover fallback: paragraph always visible in-flow */
@media (hover: none), (max-width: 900px) {
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph,
  #block-1f05d72ed39680bd8577fbcf21f567ba p.text-bor-base {
    position: relative !important;
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    margin-top: 8px !important;
    padding-bottom: 20px !important;
  }

  #block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
  }
}

/* 10) Force override of old absolute-overlay rules that may interfere */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading[style],
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph[style] {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
/* OVERLAY WRAPPER: giữ absolute + gradient */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg,
    rgba(3,20,14,0) 0%,
    rgba(3,20,14,0.96) 50%
  ) !important;
  border-radius: 0 0 12px 12px !important;
  z-index: 2 !important;
  transform: translateY(12px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* headline */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
  padding: 20px 28px 8px !important; /* TOP ↓, bottom nhỏ lại */
}

/* paragraph */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  padding: 0 28px 24px !important; /* gap giữa h2 và p nhỏ */
}
/* =========================================
   FINAL FIX: tighter before hover + smaller gap after hover
   ========================================= */

/* Dark-green band only as tall as content */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto !important;
  background: #08120e;
  z-index: 1;
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}

/* Keep text relative and above the band */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading,
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  position: relative !important;
  z-index: 2 !important;
  background-color: #08120e !important;
  margin: 0 !important;
  box-sizing: border-box;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* Headline — minimal top padding so it hugs the image */
#block-1f05d72ed39680bd8577fbcf21f567ba h2.notion-heading {
  padding-top: 6px !important;
  padding-bottom: 0 !important;
  color: #8DFDBA !important;
  font-size: 26px !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Paragraph — hidden by default, tight layout */
#block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transform: translateY(4px);
  transition: all 0.3s ease;
}

/* Hover: show paragraph right under headline (tiny gap) */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover p.column-paragraph {
  opacity: 1 !important;
  max-height: 800px !important;
  transform: translateY(0);
  margin-top: 4px !important; /* tighter spacing */
}

/* Prevent heading from pushing paragraph down */
#block-1f05d72ed39680bd8577fbcf21f567ba > .notion-column:hover h2.notion-heading {
  padding-bottom: 0 !important;
}

/* Mobile fallback: show all text */
@media (hover: none), (max-width: 900px) {
  #block-1f05d72ed39680bd8577fbcf21f567ba p.column-paragraph {
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    margin-top: 4px !important;
  }
}