/* --- Content from global.css --- */
      @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
      * {
        -webkit-font-smoothing: antialiased;
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0px;
        min-height: 100%; /* fix */
        font-family: 'Outfit', sans-serif;
        overflow-x: hidden; /* Prevent global horizontal scroll */
      }
      /* a blue color as a generic focus style */
      button:focus-visible {
        outline: 2px solid #4a90e2 !important;
        outline: -webkit-focus-ring-color auto 5px !important;
      }
      a {
        text-decoration: none;
      }

      /* --- Content from styleguide.css --- */
      :root {
        --colors-white: rgba(255, 255, 255, 1);
        --colors-green-60: rgba(77, 136, 59, 1);
        --colors-green-90: rgba(0, 42, 24, 1);
        --colors-gray-10: rgba(232, 237, 243, 1);
        --colors-gray-40: rgba(177, 177, 177, 1);
        --colors-red-80: rgba(230, 76, 76, 1);
        --collection-2-background-card: var(--colors-white);
        --collection-2-background-body: var(--colors-gray-10);
        --collection-2-background-action: var(--colors-green-90);
        --collection-2-background-hover: var(--colors-green-60);
        --collection-2-background-error: var(--colors-red-80);
        --collection-2-button-button-bg: var(--colors-green-90);
        --collection-2-button-button-hover-bg: var(--colors-green-60);
        --collection-2-button-button-text: var(--colors-white);
        --collection-2-icon-secondary: var(--colors-gray-40);
        --collection-2-icon-primary: var(--colors-white);
        --collection-2-text-primary: var(--colors-green-90);
        --collection-2-text-primary-inverted: var(--colors-white);
        --collection-2-text-secondary: var(--colors-gray-40);
        --collection-2-text-error: var(--colors-red-80);
        /* New variables for width limitation */
        --content-max-width: 1302px;
        --content-padding-side: 32px;
        --mobile-padding-side: 16px; /* For mobile padding */
      }
      
      /* --- Content from style.css (Refactored) --- */
      body {
        background-color: var(--collection-2-background-body);
      }
      
      .element {
        width: 100%;
        overflow-x: hidden; /* Prevent horizontal scroll from children, allow vertical scroll */
        position: relative; 
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 128px; 
        padding: 120px var(--content-padding-side) 64px;
      }
      
      /* Blurred green circles */
      .rounded-rectangle, .div, .rounded-rectangle-2, .rounded-rectangle-3 {
        position: absolute;
        filter: blur(70.65px);
        background: radial-gradient(50% 50% at 73% 48%, rgba(209, 255, 213, 1) 0%, rgba(235, 255, 240, 1) 100%);
        z-index: -1;
      }
      .rounded-rectangle { top: 790px; left: 471px; width: 1121px; height: 874px; border-radius: 622px; }
      .div { top: 3704px; left: calc(50% - 209px); width: 860px; height: 759px; border-radius: 657px; }
      .rounded-rectangle-2 { top: 2093px; left: -213px; width: 449px; height: 409px; border-radius: 160px; }
      .rounded-rectangle-3 { top: -100px; left: -100px; width: 300px; height: 300px; border-radius: 50%; }

      /* Header blocks */
      .logo-container, .contact-info {
        position: absolute;
        top: 17px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 24px;
        background-color: var(--collection-2-button-button-bg);
        border-radius: 32px;
        z-index: 10;
        transition: all 0.3s ease;
        width: auto;
      }

      /* Desktop: Alignment to content boundaries (1302px) */
      .logo-container { 
        left: 50%; 
        transform: translateX(calc( -1 * (var(--content-max-width) / 2) ));
        margin-left: var(--content-padding-side);
        right: auto;
      }
      .contact-info { 
        right: 50%; 
        transform: translateX(calc( var(--content-max-width) / 2 ));
        margin-right: var(--content-padding-side);
        left: auto; 
      }

      .logo-container .image { width: 30px; height: 30px; }
      
      /* H3 / Large text - clamp() */
      .logo, .contact-number, .appointment-button {
        font-family: "Outfit", sans-serif;
        color: var(--collection-2-button-button-text);
        font-size: clamp(24px, 3.5vw, 28.8px);
        white-space: nowrap;
      }
      .logo { color: #eeefe9; }
      .contact-number { color: var(--collection-2-background-card); }
      
      .main-header {
        width: 100%;
        max-width: 1302px;
        display: flex;
        gap: 32px; 
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
      }

      /* H1 - clamp() */
      .consulting-services, .first-call-benefits, .step-by-step-plan, .results-statement, .consultation-signup {
        font-family: "Outfit", sans-serif;
        color: var(--collection-2-text-primary);
        font-size: clamp(36px, 6vw, 57.6px); 
        line-height: clamp(40px, 6.5vw, 61.2px); 
      }
      
      /* Title — left part (65%) */
      .consulting-services { 
        max-width: 800px; 
        flex-basis: 65%;
        margin-right: auto;
      } 
      
      /* Description — right part (30%) */
      .guidance-description {
        max-width: 350px; 
        font-family: "Outfit", sans-serif;
        color: var(--collection-2-text-primary);
        font-size: clamp(16px, 2.5vw, 21.6px); 
        line-height: clamp(24px, 3.5vw, 28.8px); 
        text-align: right;
        margin-top: 0;
        flex-basis: 30%;
      }
      
      .section-container {
        width: 100%;
        max-width: 1302px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
      }
      
      /* Section "We don't just consult — we deliver results" */
      .card-grid-results {
        width: 100%;
        max-width: 1112px; 
        margin: 0 auto; 
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
        gap: 16px;
      }

      /* Container for cards C4 and C5 (bottom-row-center) - For desktop, it spans all 3 columns */
      .bottom-row-center {
        display: flex;
        justify-content: center;
        gap: 16px;
        width: 100%; 
        grid-column: 1 / -1; /* Spans all columns on desktop (3-2 layout) */
        flex-wrap: wrap; 
      }

      .card-container-4, .card-container-5, .card-container-6, .card-container-7 {
        display: flex;
        gap: 16px;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
      }
      
      /* CORE CARD REDUCTION: Padding is 20px for all cards (down from 24px) */
      .card, .card-2, .card-3, .card-4, .card-5, .card-6, .card-7, .card-8, .card-9, .div-wrapper {
        background-color: var(--collection-2-background-card);
        border-radius: 32px;
        box-shadow: 0px 4px 16.2px #00000008;
        padding: 20px; 
        display: flex;
        flex-direction: column;
        height: auto; 
        min-height: auto; 
      }

      /* Image Aspect Ratio Fix: Added object-fit for all card images (Preserves logo proportions) */
      .card .image-2, .card-2 .image-3, .card-3 .image-4, .card-4 .image-4, 
      .card-5 .image-4, .card-6 .image-4, .card-9 .image-5, .confirmation-modal .image-13 {
          object-fit: contain; 
      }
      
      /* Applying desktop min-height (Reduced by ~15%) only in desktop context */
      @media (min-width: 1200px) {
        .card {
            min-height: 410px; /* Reduced from 480px */
            justify-self: center; /* Ensures the max-width is respected */
        }
        .card-2 { 
            min-height: 645px; /* Reduced from 758px */
        }
        .card-3, .card-4, .card-5, .card-6 { 
            min-height: 315px; /* Reduced from 371px */
        }
      }

      /* Card styles - for C1, C2, C3, C4, C5 in the first grid (We deliver results) */
      .card {
        width: 100%; 
        max-width: 360px; /* Default desktop max width */
        align-items: center;
        justify-content: space-between;
      }
      
      .card .div-2 { width: 100%; }
      .card .image-2 { width: 256px; height: 256px; }
      
      /* H3 - clamp() */
      .text-wrapper-3 {
        font-family: "Outfit", sans-serif;
        font-size: clamp(24px, 3.5vw, 28.8px);
        color: var(--collection-2-text-primary);
        line-height: clamp(28px, 4vw, 34.2px);
      }
      /* Paragraph size */
      .p, .text-wrapper-5 {
        font-family: "Outfit", sans-serif;
        font-size: clamp(18px, 2.5vw, 21.6px); 
        color: var(--collection-2-text-secondary); 
        line-height: clamp(26px, 3.5vw, 28.8px);
        margin-top: 12px;
      }
      
      /* Confirmation text style - UPDATED: Increased size by ~20% */
      .small-confirmation-text {
        font-family: "Outfit", sans-serif;
        font-size: clamp(17px, 2.4vw, 22px); 
        color: var(--collection-2-text-primary); 
        text-align: left; 
        line-height: 1.4;
        margin-top: 0; 
        flex-grow: 1; 
        padding-right: 60px; 
      }

      /* Class for dark green text */
      .dark-green-text {
        color: var(--collection-2-text-primary);
      }
      
      /* Class for left-aligned heading */
      .heading-left {
        align-self: flex-start;
        text-align: left;
      }
      
      /* Class for centered heading */
      .heading-center {
        text-align: center;
      }

      /* Second grid (First call benefits) */
      /* New wrapper for mobile horizontal scroll containment */
      .grid-carousel-wrapper {
        width: 100%;
        max-width: 1302px; 
        margin: 0 auto;
      }

      .grid-container {
        width: 100%;
        display: grid;
        /* Default desktop layout */
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 16px;
      }

      .card-2 { 
        grid-row: span 2; 
        justify-content: space-between; 
        align-items: center; 
      } 
      /* Large image size on desktop */
      .card-2 .image-3 { width: 100%; max-width: 361px; height: auto; }
      
      .card-3, .card-4, .card-5, .card-6 { justify-content: space-between; align-items: center; text-align: center; }
      /* Small image size on desktop */
      .card-3 .image-4, .card-4 .image-4, .card-5 .image-4, .card-6 .image-4 { width: 200px; height: 200px; }

      /* Audit Cases size */
      .audit-cases {
        font-family: "Outfit", sans-serif;
        font-size: clamp(16px, 2.2vw, 21.6px);
        color: var(--collection-2-text-secondary);
      }

      .div-wrapper {
        flex: 1;
        min-width: 280px;
        align-items: center;
        text-align: center;
        justify-content: center;
      }
      
      /* Form section */
      .form-container {
        width: 100%;
        max-width: 780px; 
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .form-field-container {
        position: relative;
        background-color: var(--collection-2-background-card);
        border-radius: 24px;
        overflow: hidden;
      }

      /* Label text size */
      .form-field-container .label {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        /* added opacity */
        transition: all 0.2s ease-out, opacity 0.2s ease-out; 
        font-size: clamp(20px, 3.5vw, 28.8px);
        color: var(--collection-2-text-secondary);
        font-family: "Outfit", sans-serif;
      }
      
      /* Input text size */
      .form-field-container input {
        all: unset;
        box-sizing: border-box;
        width: 100%;
        padding: 20px 24px; 
        font-family: "Outfit", sans-serif;
        font-weight: 400;
        font-size: clamp(20px, 3.5vw, 28.8px);
        color: var(--collection-2-text-primary);
      }

      /* changed - removed tip (opacity: 0) */
      .form-field-container input:focus + .label,
      .form-field-container input:not(:placeholder-shown) + .label {
        top: 12px; /* keep position to fight CLS */
        transform: translateY(0);
        font-size: 14px;
        opacity: 0; /* Disable text completely */
        visibility: hidden;
      }
      .form-field-container input::placeholder { color: transparent; }

      .button {
        all: unset; box-sizing: border-box; display: flex;
        justify-content: center; align-items: center; 
        padding: 24px 48px;
        width: 100%; background-color: var(--collection-2-button-button-bg);
        border-radius: 60px; cursor: pointer; transition: background-color 0.3s ease;
      }
      .button:hover { background-color: var(--collection-2-button-button-hover-bg); }

      .card-7, .card-8 {
        flex: 1;
        min-width: 300px;
        justify-content: space-between;
      }
      
      .card-container-7 {
        flex: 2;
        min-width: 300px;
        display: flex; 
        flex-direction: row; 
        gap: 16px; 
        justify-content: center;
      }
      .card-container-7 .card-9 {
        flex: 1; 
      }
      
      /* Default desktop/tablet setting for card-9: horizontal flex */
      .card-9 {
        flex: 1;
        width: 100%;
        flex-direction: row; 
        justify-content: space-between;
        align-items: center; 
      }
      .support-stage, .systematic-approach { text-align: left; }
      .image-5 { width: 130px; height: 130px; }

      /* Footer */
      .footer-wrapper {
        width: 100%;
        max-width: 1302px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px; 
        margin: 0 auto; 
      }
      
      .footer-nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        padding: 0 40px; 
        margin-bottom: 0; 
      }

      .footer-nav .text-wrapper-2 {
        font-family: "Outfit", sans-serif;
        font-size: clamp(16px, 2vw, 21.6px);
        color: var(--colors-gray-40); 
        white-space: nowrap;
      }

      .footer-logo {
        width: 100%;
        max-width: 1302px;
        height: 120px; 
        max-height: 120px; 
        padding: 24px 64px; 
        display: flex;
        flex-wrap: nowrap; 
        align-items: center; 
        justify-content: center; 
        gap: clamp(10px, 2vw, 30px); 
        background-color: var(--collection-2-button-button-bg);
        border-radius: 32px; 
        overflow: hidden; 
      }
      
      .footer-logo .img { 
        width: clamp(30px, 9vw, 100px); 
        height: clamp(30px, 9vw, 100px); 
        flex-shrink: 0; 
      } 
      
      .footer-logo .text-wrapper {
        font-family: "Outfit", sans-serif;
        font-size: clamp(12px, 6.6vw, 72px); 
        color: #eeefe9;
        white-space: nowrap;
        text-align: left; 
        line-height: 1; 
        flex-shrink: 0; 
        margin: 0; 
      }

      /* --- STICKY BUTTON STYLES --- */

      .sticky-action-button {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 16px 0;
          background-color: transparent; 
          box-shadow: none !important; 
          filter: none !important; 
          border-top: none !important; 
          z-index: 100;
          display: flex;
          justify-content: center;
          visibility: hidden; /* HIDDEN by default */
          opacity: 0;
          transition: opacity 0.3s ease, visibility 0.3s ease;
      }

      .sticky-action-button.visible {
          visibility: visible;
          opacity: 1;
      }

      .sticky-action-button .button-sticky-style {
          all: unset; box-sizing: border-box; display: flex;
          justify-content: center; align-items: center; 
          padding: 24px 48px;
          width: auto; 
          min-width: 250px;
          max-width: 380px; 
          background-color: var(--collection-2-button-button-bg);
          border-radius: 60px; 
          cursor: pointer; 
          transition: background-color 0.3s ease;
          margin: 0 var(--content-padding-side); 
      }
      .sticky-action-button .button-sticky-style:hover { 
          background-color: var(--collection-2-button-button-hover-bg); 
      }

      /* --- CONFIRMATION MODAL STYLES --- */
      .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 42, 24, 0.4); /* Dark green tint overlay */
        backdrop-filter: blur(5px);
        display: none; /* Hidden by default */
        justify-content: center;
        align-items: center;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .modal-overlay.visible {
        display: flex;
        opacity: 1;
      }

      .confirmation-modal {
        /* UPDATED: Reduced border-radius for more square look */
        background-color: var(--collection-2-background-card);
        border-radius: 20px; 
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        position: relative; /* CRITICAL for absolute positioning of close button */
        padding: 32px;
        width: 90%;
        max-width: 600px;
        height: auto; 
        min-height: 400px; 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0; 
      }
      
      /* Close Button - UPDATED: Absolute position + 20% size increase */
      .close-button {
        all: unset;
        position: absolute; 
        top: 32px; /* Aligned with top padding */
        right: 32px; /* Aligned with right padding */
        flex-shrink: 0; 
        width: 44px; /* +20% from 36px */
        height: 44px; /* +20% from 36px */
        border-radius: 50%;
        background-color: var(--colors-gray-10);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }
      .close-button:hover {
        background-color: var(--colors-gray-40);
      }
      /* SVG Cross Icon - UPDATED: 20% size increase */
      .close-button svg {
        width: 22px; /* +20% from 18px */
        height: 22px; /* +20% from 18px */
        fill: var(--collection-2-text-primary);
      }

      .confirmation-modal .image-13 {
        width: 100%;
        max-width: 250px;
        height: auto;
        /* Adjusted margin for new top layout */
        margin: 24px 0 24px; 
      }

      /* Ok Button in Modal */
      .modal-ok-button {
        padding: 16px 48px;
        width: 100%;
        margin-top: auto; /* Pushes the button to the bottom */
      }
      
      /* --- ADAPTIVE STYLES --- */
      
      /* Intermediate Screens (1366px and below) */
      @media (max-width: 1366px) {
        /* Header positioning */
        .logo-container { 
            left: var(--mobile-padding-side); 
            transform: none; 
            margin-left: 0;
            right: auto; 
        }
        .contact-info { 
            right: var(--mobile-padding-side); 
            transform: none; 
            margin-right: 0;
            left: auto; 
            width: auto; 
        }

        .consulting-services, .guidance-description {
            max-width: 100%;
            flex-basis: auto;
        }
        .guidance-description { text-align: left; }
        .main-header { justify-content: center; }
        
        /* FIX: Tablet Layout (650px - 1199px) - CORRECTED TO 2-2-1 FLOW WITH UNIFORM SPACING */
        @media (min-width: 650px) and (max-width: 1199px) {
            
            .card-grid-results {
                /* Set to 2 columns for tablet */
                max-width: 800px; /* Limits the grid width */
                grid-template-columns: repeat(2, 1fr); /* Cards should fill 1fr */
                margin: 0 auto;
                gap: 16px;
            }
            
            .card-grid-results .card {
                /* CRITICAL FIX: Ensure cards fill the 1fr column width */
                max-width: none; 
                width: 100%;
                margin: 0;
                justify-self: stretch; /* Fills the grid cell */
            }

            /* 1. Hack to make C4 and C5 flow into the main grid */
            .card-grid-results .bottom-row-center {
                display: contents; /* Makes children flow into the parent grid */
            }

            /* 2. Target the 5th item (C5) in the flow and force it to span and center (Row 3, Col 1+2) */
            .card-grid-results > article:nth-child(5) {
                grid-column: 1 / -1; /* Span two columns */
                max-width: 400px; /* Constrain width for centering */
                margin: 0 auto; /* Center the constrained card */
                justify-self: center; /* Ensure it respects grid centering */
            }

            /* Tablet layout for 'What will you get' grid - STILL GRID */
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .card-2 {
                grid-row: span 2;
            }
        }
      }
      
      /* Mobile configuration (<768px) */
      @media (max-width: 768px) {
        .element { 
            padding-top: 80px; 
            padding-left: var(--mobile-padding-side);
            padding-right: var(--mobile-padding-side);
            gap: 64px;
        }
        
        /* 1. Compression of the top logo to a circle */
        .logo-container {
            width: 46px; 
            height: 46px;
            padding: 0; 
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            left: var(--mobile-padding-side);
            right: auto;
            transform: none;
            top: 17px;
        }
        .logo-container .logo {
            display: none; 
        }
        
        /* 2. Phone Block (Stays top right) */
        .contact-info { 
            top: 17px; 
            right: var(--mobile-padding-side); 
            left: auto; 
            transform: none;
        }
        
        /* --- MOBILE CAROUSEL STYLES (What will you get) --- */

        /* Wrapper to take full viewport width and contain the scroll */
        .grid-carousel-wrapper {
            width: 100vw; 
            max-width: none; 
            margin: 0;
            /* Hide the native scrollbar */
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        .grid-carousel-wrapper::-webkit-scrollbar {
            display: none;
        }

        .grid-container {
            /* OVERRIDE GRID TO FLEX FOR HORIZONTAL CAROUSEL */
            display: flex;
            flex-wrap: nowrap;
            /* Crucial: Enable horizontal scrolling and snapping */
            overflow-x: scroll;
            overflow-y: hidden;
            scroll-snap-type: x mandatory; 
            
            /* Add padding to the scroll container itself to center the first/last card */
            padding: 0 10vw; 
            gap: 16px;
            
            /* Overrides desktop grid properties */
            grid-template-columns: unset;
            width: auto; 
            justify-content: flex-start;
        }
        
        /* Make the cards align for snapping and give them a fixed width */
        .card-2, .card-3, .card-4, .card-5, .card-6 {
            /* RESETTING MOBILE GRID/CARD STYLES */
            grid-row: unset !important; 
            min-height: auto !important;
            height: auto !important;
            max-height: auto !important; 
            
            /* Fixed width for snapping (80% of viewport width) */
            flex-shrink: 0; 
            width: 80vw; 
            max-width: 400px; 
            scroll-snap-align: center; 
            
            margin: 0; 
            justify-content: space-between !important; 
            text-align: center !important;
        }

        /* C2 image size (Analysis of your current readiness) - kept small */
        .card-2 .image-3 {
            width: 100%;
            max-width: 150px !important; 
            height: auto !important; 
            flex-shrink: 0;
        }
        
        /* UPDATED: Increase image size for card-3, 4, 5, 6 (Recommendations and subsequent) */
        .card-3 .image-4, .card-4 .image-4, .card-5 .image-4, .card-6 .image-4 { 
            width: 80% !important; /* Make them fill most of the card width */
            height: auto !important; 
            max-width: 250px !important; 
            min-height: 150px; 
        }
        
        /* Styles for compact card-7 and card-8 (ISCC/ISO blocks) */
        .card-7, .card-8 {
            padding: 16px !important; 
            min-height: auto; 
            width: 100%; 
        }

        /* FIX: C9 Blocks (Support/Systematic) layout on mobile/tablet */
        .card-container-7 {
            flex-direction: row; 
            flex-wrap: wrap; /* Allow blocks to wrap */
            width: 100%;
            gap: 16px; 
        }

        .card-container-7 .card-9 {
            flex: 1; 
            min-width: 45%; /* Mobile screens */
            padding: 16px !important; 
        }
        
        /* .card9 is now verical */
        .card-9 { 
            display: flex;
            flex-direction: column !important; /* CRITICAL FIX: Force vertical stack (internal content) */
            text-align: center; 
            align-items: center; /* Center logo and text blocks */
            justify-content: center;
            gap: 16px;
        } 
        
        /* centering */
        .support-stage, .systematic-approach { 
            text-align: center !important; 
            flex: none; 
            width: 100%;
        }
        .image-5 { 
            width: 60%;
            height: auto;
            max-width: 100px;
            flex-shrink: 0;
        }
        
        /* 3. Bottom logo height returned to 90px */
        .footer-logo { 
            height: 90px; 
            max-height: 90px; 
            padding: 16px 16px; 
            flex-direction: row; 
            justify-content: flex-start;
            align-items: center; 
        } 
        
        .form-container {
             max-width: 90%; 
        }

        .form-field-container input {
            padding: 16px 24px; 
        }

        /* Sticky button on mobile takes full available width */
        .sticky-action-button .button-sticky-style {
            padding: 20px 48px;
            max-width: 100%; 
            margin: 0 var(--mobile-padding-side); 
        }
      }
      
      /* 1-Column Mobile Fallback (<650px) */
      @media (max-width: 650px) {
        
        .card-grid-results {
            max-width: 400px; 
            grid-template-columns: 1fr; 
            margin: 0 auto;
        }

        /* General card reinforcement for the results grid */
        .card {
            max-width: 400px; 
            margin: 0 auto;
            min-height: 250px !important; 
            height: auto !important; 
            align-items: center !important; 
            justify-self: center !important; 
        }
        
        /* Reset tablet specific hacks for 1-column mobile */
        .card-grid-results > .card:nth-child(5) {
            grid-column: unset; 
            max-width: 400px; 
            margin: 0 auto;
        }

        /* Ensure bottom-row-center children flow vertically on mobile */
        .bottom-row-center {
            grid-column: unset; /* Remove grid column span */
            display: flex;
            flex-direction: column; 
            align-items: center; 
            width: 100%; 
            gap: 16px;
        }

        .bottom-row-center > .card {
             max-width: 400px; 
             width: 100%;
        }

        /* Image inside C4/C5 - Guarantee a minimum height for the visual space */
        .bottom-row-center > .card .image-2 {
            min-height: 150px; 
        }
        
        /* make 45-45 */
        .card-container-7 .card-9 {
            min-width: 45%; /* Back to 45% */
        }
      }
      
      /* Desktop Reset for the 2-2-1 Tablet Fix */
      @media (min-width: 1200px) {
        .card-grid-results {
            /* Reset to 3 columns for desktop (3-2 layout) */
            grid-template-columns: repeat(3, 1fr);
            max-width: 1112px;
        }
        
        /* C1, C2, C3 reset to max-width: 360px */
        .card-grid-results > .card {
            max-width: 360px;
        }

        /* C4, C5 flow within wrapper (bottom-row-center) */
        .card-grid-results .bottom-row-center {
            grid-column: 1 / -1; /* Full span row */
            display: flex; /* Restore flex container */
            flex-direction: row; 
            justify-content: center;
            gap: 16px; 
            width: 100%;
        }
        
        /* make card9 horisontal on desktop */
        .card-9 {
            flex-direction: row; 
            text-align: left; 
            align-items: center; 
            justify-content: space-between;
            gap: 8px;
        }
        .support-stage, .systematic-approach { text-align: left; }
      }

      /* Styles for simple legal pages: agreement.html and privacy.html */
      .legal-page-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 64px 32px;
        background-color: var(--colors-white);
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }
      .legal-page-container h1 {
        font-size: 36px;
        color: var(--collection-2-text-primary);
        margin-bottom: 24px;
        border-bottom: 3px solid var(--colors-green-60);
        padding-bottom: 8px;
      }
      .legal-page-container h2 {
        font-size: 24px;
        color: var(--collection-2-text-primary);
        margin-top: 32px;
        margin-bottom: 16px;
      }
      .legal-page-container p, .legal-page-container li {
        font-size: 18px;
        line-height: 1.6;
        color: var(--collection-2-text-primary);
        margin-bottom: 12px;
      }
      .legal-page-container ul {
        list-style: disc;
        padding-left: 40px;
      }