/*
░███     ░███            ░██                            ░██               ░██            
░████   ░████                                           ░██               ░██            
░██░██ ░██░██  ░██████   ░██░████████      ░███████  ░████████ ░██    ░██ ░██  ░███████  
░██ ░████ ░██       ░██  ░██░██    ░██    ░██           ░██    ░██    ░██ ░██ ░██    ░██ 
░██  ░██  ░██  ░███████  ░██░██    ░██     ░███████     ░██    ░██    ░██ ░██ ░█████████ 
░██       ░██ ░██   ░██  ░██░██    ░██           ░██    ░██    ░██   ░███ ░██ ░██        
░██       ░██  ░█████░██ ░██░██    ░██     ░███████      ░████  ░█████░██ ░██  ░███████  
                                                                      ░██                
                                                                ░███████                
*/

@font-face {
    font-family: 'SUSE';
    src: url('fonts/SUSE.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost';
    src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant';
    src: url('fonts/Cormorant-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-size: 16px; 
}

body {
    font-family: 'Jost', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #2128bd;
    overflow-x: hidden;
}

h2, h3 {
    font-family: 'SUSE', sans-serif;
}

h3.why-quote {
    font-family: 'Cormorant', sans-serif;
}

p {
    font-family: 'Jost', sans-serif;
    line-height: 1.6;
}

/*                                                                   
░███     ░███            ░██                                                                              
░████   ░████                                                                                             
░██░██ ░██░██  ░██████   ░██░████████      ░███████   ░███████  ░██░████  ░███████   ░███████  ░████████  
░██ ░████ ░██       ░██  ░██░██    ░██    ░██        ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ 
░██  ░██  ░██  ░███████  ░██░██    ░██     ░███████  ░██        ░██      ░█████████ ░█████████ ░██    ░██ 
░██       ░██ ░██   ░██  ░██░██    ░██           ░██ ░██    ░██ ░██      ░██        ░██        ░██    ░██ 
░██       ░██  ░█████░██ ░██░██    ░██     ░███████   ░███████  ░██       ░███████   ░███████  ░██    ░██ 
*/

/* RESPONSIVE FIXES */
@media (max-width: 1024px) {
    html { font-size: 15px; }
}

@media (max-width: 768px) {
    html { font-size: 14px; }
    /* Prevents horizontal overflow on smaller screens */
    img, video, canvas { max-width: 100%; height: auto; }
}


/*
░█████████                                                           ░██████                                                                     
░██     ░██                                                         ░██   ░██                                                                    
░██     ░██  ░███████  ░████████          ░██    ░██ ░████████     ░██         ░██    ░██  ░███████   ░███████   ░███████   ░███████   ░███████  
░█████████  ░██    ░██ ░██    ░██ ░██████ ░██    ░██ ░██    ░██     ░████████  ░██    ░██ ░██    ░██ ░██    ░██ ░██    ░██ ░██        ░██        
░██         ░██    ░██ ░██    ░██         ░██    ░██ ░██    ░██            ░██ ░██    ░██ ░██        ░██        ░█████████  ░███████   ░███████  
░██         ░██    ░██ ░███   ░██         ░██   ░███ ░███   ░██     ░██   ░██  ░██   ░███ ░██    ░██ ░██    ░██ ░██               ░██        ░██ 
░██          ░███████  ░██░█████           ░█████░██ ░██░█████       ░██████    ░█████░██  ░███████   ░███████   ░███████   ░███████   ░███████  
                       ░██                           ░██                                                                                         
                       ░██                           ░██                                                                                         
*/

/* Full screen overlay */
.overlay-success {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* White popup box */
.popup-success {
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: left;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.popup-success .close-success {
  position: absolute;
  top: 15px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  line-height: 1;
}

.popup-success .close-success:hover {
  color: #000000;
}

/*
  ░██████                                                     
 ░██   ░██                                                    
░██        ░██    ░██ ░██░████  ░███████   ░███████  ░██░████ 
░██        ░██    ░██ ░███     ░██        ░██    ░██ ░███     
░██        ░██    ░██ ░██       ░███████  ░██    ░██ ░██      
 ░██   ░██ ░██   ░███ ░██             ░██ ░██    ░██ ░██      
  ░██████   ░█████░██ ░██       ░███████   ░███████  ░██    
  */
/* Hide default cursor */
body {
    cursor: none;
}

/* Custom Cursor Styling */
.cursor {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #0099ff; 
    mix-blend-mode: difference; 
    position: fixed;
    top: -100px;
    left: -100px;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, transform 0.1s;
}
/* Grow effect class */
.cursor.grow {
    transform: translate(-50%, -50%) scale(2.5);
}


/*------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/

main {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    overflow: visible;
}

::selection { /*HIGHLIGHT TEXT*/
    background-color: #f7f706;
    color: #000000;
}
::-moz-selection { /*HIGHLIGHT TEXT*/
    background-color: #f7f706;
    color: #000000;
}

/* 
░██                                      ░██ ░██                      
░██                                      ░██                          
░██          ░██████   ░████████   ░████████ ░██░████████   ░████████ 
░██               ░██  ░██    ░██ ░██    ░██ ░██░██    ░██ ░██    ░██ 
░██          ░███████  ░██    ░██ ░██    ░██ ░██░██    ░██ ░██    ░██ 
░██         ░██   ░██  ░██    ░██ ░██   ░███ ░██░██    ░██ ░██   ░███ 
░██████████  ░█████░██ ░██    ░██  ░█████░██ ░██░██    ░██  ░█████░██ 
                                                                  ░██ 
                                                            ░███████  
                                                                      
*/

/* 1. MAIN CONTAINER - Handles the Shape & Positioning */
#halo-hero {
    position: relative;
    width: 100%;
    min-height: 65vh; 
    z-index: 2;
    border-bottom-left-radius: 15vw;
    border-bottom-right-radius: 15vw;
    overflow: hidden;
}


.halo-inner-wrapper {
    position: absolute;
    inset: 0;
    background: #2128bd;
    isolation: isolate; 
    overflow: hidden; 
    border-bottom-right-radius: 15vw; 
}


/* Step 1: The Blue Square extending down */
#halo-hero::before {
  content: "";
  background-color: #ffffff; 
  position: absolute;
  top: 100%;
  left: 0;
  width: 15vw; 
  height: 15vw;
  z-index: 1;
}

/* Step 2: The Gray Rounded Shape masking the square */
#halo-hero::after {
  content: "";
  background-color: transparent;
  position: absolute;
  top: 100%;
  left: 0;
  width: 15vw;
  height: 15vw;
  z-index: 2; 
  border-top-left-radius: 15vw; 
}



.halo-blobs {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    will-change: transform;
    pointer-events: none;
}

.b1 { background: #005ffe; width: 650px; height: 650px; }
.b2 { background: #ff7b00; width: 440px; height: 440px; }
.b3 { background: #ff00a6; width: 270px; height: 270px; }

.halo-text-mask {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff; 
    mix-blend-mode: screen; 
    z-index: 2;
    pointer-events: none;
}

.halo-text-mask h1 {
    color: #000000 !important;
}

/* Vertical stacking */
.halo-text-wrapper {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 1.5rem; 
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    pointer-events: auto;
    padding: 20px;
}

.halo-title {
    font-family: 'SUSE', sans-serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    color: #000 !important;
    text-align: center;
    margin: 0;
}

.halo-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #000 !important;
    text-align: center;
    margin: 0;
}

.halo-restoration-note {
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none;
    color: #000 !important;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding-top: 1rem;
    display: inline-block;
    margin: 0;
}

/* Highlights */
.highlight { position: relative; display: inline-block; font-weight: 600; }
.highlight::after { content: ''; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: 0.2em; z-index: -1; }
.highlight-cyan::after { background-color: #00ADEF; }
.highlight-magenta::after { background-color: #EC008C; }


@media (max-width: 1024px) {
    #halo-hero {
        min-height: auto;
        padding-bottom: 2rem;
        /* Increase corner radius slightly to keep the look */
        border-bottom-left-radius: 20vw;
        border-bottom-right-radius: 20vw;
        margin-top: var(--header-height);
    }

    /* Scale the corner clipping mechanism */
    #halo-hero::before,
    #halo-hero::after {
        width: 20vw;
        height: 20vw;
        border-top-left-radius: 20vw;
    }

    .halo-text-wrapper {
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {

    #halo-hero {
        min-height: 60vh; /* C: hero height, 50 is too little, if adding new things increase */
        display: block !important;
        background: #ffffff;
        padding: 0 !important; 
        box-sizing: border-box;
        margin-top: 105px; /* C: because header hides it*/
    }

    .halo-inner-wrapper {
        display: block !important;
        position: absolute;
        inset: 0;
        background: #2128bd;
        border-bottom-left-radius: 20vw;
        border-bottom-right-radius: 20vw;
    }

    .halo-blobs {
        display: block !important;
        position: absolute;
        inset: 0;
    }

    .halo-text-mask {
        display: flex !important;
        position: absolute;
        inset: 0;
        background: #ffffff;
        mix-blend-mode: screen;
        z-index: 2;
    }

    /* 2. SCALE & ANIMATE BLOBS */
    .blob {
        animation: blobMobileAnim 10s ease-in-out infinite alternate !important;
        will-change: transform;
    }

.b1 { 
        width: 90vw; height: 90vw; 
        top: -20%; left: -20%; 
        animation-duration: 14s; 
    }
    
    .b2 { 
        width: 80vw; height: 80vw; 
        top: 25%; right: -30%; left: auto; 
        animation-duration: 18s; 
        animation-delay: -4s; 
    }
    
    .b3 { 
        width: 60vw; height: 60vw; 
        bottom: -10%; left: 10%; top: auto;
        animation-duration: 12s; 
        animation-delay: -8s; 
    }

    @keyframes blobMobileAnim {
        0% { transform: translate(0, 0) scale(1) rotate(0deg); }
        33% { transform: translate(40px, -50px) scale(1.1) rotate(10deg); }
        66% { transform: translate(-30px, 20px) scale(0.9) rotate(-10deg); }
        100% { transform: translate(20px, 30px) scale(1.05) rotate(5deg); }
    }

    /* 3. TEXT ADJUSTMENTS */
    .halo-text-wrapper {
        padding: 0rem 2rem !important; 
        box-sizing: border-box !important;
    }

    .halo-title {
        font-size: 2.8rem;
    }

    .halo-subtitle {
        font-size: 1rem;
        padding: 0 15px;
    }

    /* 4. HIDE DESKTOP CLIPPING MASK (Not suitable for deep mobile curves) */
    #halo-hero::before,
    #halo-hero::after {
        display: none !important;
    }
}


/* 
  ░██████      ░██                                      ░████████              ░██                  
 ░██   ░██     ░██                                      ░██    ░██             ░██                  
░██         ░████████  ░██████   ░██░████  ░███████     ░██    ░██   ░███████  ░██    ░██ ░████████ 
 ░████████     ░██          ░██  ░███     ░██           ░████████   ░██    ░██ ░██   ░██ ░██    ░██ 
        ░██    ░██     ░███████  ░██       ░███████     ░██     ░██ ░██        ░███████  ░██    ░██ 
 ░██   ░██     ░██    ░██   ░██  ░██             ░██    ░██     ░██ ░██    ░██ ░██   ░██ ░██   ░███ 
  ░██████       ░████  ░█████░██ ░██       ░███████     ░█████████   ░███████  ░██    ░██ ░█████░██ 
                                                                                                ░██ 
                                                                                          ░███████  
*/
#backgroundEffects {
  position: fixed; /* or absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* behind everything */
  pointer-events: none; /* so clicks pass through */
}
@media (max-width: 1024px) {
  #backgroundEffects {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #backgroundEffects {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #backgroundEffects {
    display: none !important;
  }
 }

        .tight-text {
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }

.adv img {
    content: '';
    display: block;
    height: 31px; 
    
    /* Full viewport width */
    width: 100vw;
    margin-top: 80px;

}

/*                                                                   
  ░██████      ░██                                      ░████████              ░██                       ░██████                                                        
 ░██   ░██     ░██                                      ░██    ░██             ░██                      ░██   ░██                                                       
░██         ░████████  ░██████   ░██░████  ░███████     ░██    ░██   ░███████  ░██    ░██ ░████████    ░██          ░███████  ░██░████  ░███████   ░███████  ░████████  
 ░████████     ░██          ░██  ░███     ░██           ░████████   ░██    ░██ ░██   ░██ ░██    ░██     ░████████  ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ 
        ░██    ░██     ░███████  ░██       ░███████     ░██     ░██ ░██        ░███████  ░██    ░██            ░██ ░██        ░██      ░█████████ ░█████████ ░██    ░██ 
 ░██   ░██     ░██    ░██   ░██  ░██             ░██    ░██     ░██ ░██    ░██ ░██   ░██ ░██   ░███     ░██   ░██  ░██    ░██ ░██      ░██        ░██        ░██    ░██ 
  ░██████       ░████  ░█████░██ ░██       ░███████     ░█████████   ░███████  ░██    ░██ ░█████░██      ░██████    ░███████  ░██       ░███████   ░███████  ░██    ░██ 
                                                                                                ░██                                                                     
                                                                                          ░███████                                                                      
*/

/* Tablet - 768px to 1024px */
@media screen and (max-width: 1024px) {
    #backgroundEffects {
        /* No changes needed - already responsive */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
    }
    
    .tight-text {
        /* Already responsive - no changes needed */
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    
    .adv img {
        height: 25px;
        width: 100vw;
        margin-top: 60px;
    }
}

/* Mobile - up to 768px */
@media screen and (max-width: 768px) {
    .adv img {
        height: 20px;
        width: 100vw;
        margin-top: 40px;
    }
}

/* Extra small mobile - up to 480px */
@media screen and (max-width: 480px) {
    .adv img {
        height: 15px;
        width: 100vw;
        margin-top: 25px;
    }
}


















/* 
  ░██████                                  ░██                                 
 ░██   ░██                                                                     
░██          ░███████  ░██░████ ░██    ░██ ░██ ░███████   ░███████   ░███████  
 ░████████  ░██    ░██ ░███     ░██    ░██ ░██░██    ░██ ░██    ░██ ░██        
        ░██ ░█████████ ░██       ░██  ░██  ░██░██        ░█████████  ░███████  
 ░██   ░██  ░██        ░██        ░██░██   ░██░██    ░██ ░██               ░██ 
  ░██████    ░███████  ░██         ░███    ░██ ░███████   ░███████   ░███████  
*/

.services-container {
    max-width: 1200px;
    margin: 0;
    width: 100%; 
    padding: 3rem 20px 2rem; 
    box-sizing: border-box;
}
.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2 rem;
}
.section-subtitle-services {
    font-size: 1.1rem;
    color: #e7e7e7;
    margin-top: 0;
    text-align: center;
    margin-bottom: 2rem;
}
.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.section-subtitle {
    font-size: 1rem;
    color: #f3f3f3;
    margin: 0 auto;
    max-width: 700px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat (4,1fr); 
    gap: 2rem;
    align-items: start;
}

.service-card {
    background-color: #ffffff;
    
    /* DOME SHAPE: High radius on top, small on bottom */
    border-radius: 500px 500px 16px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /*border: 1px solid #e8e8e8;*/
    transition: box-shadow 0.3s ease; 
    position: relative;
    padding-bottom: 20px;
}

/* HOVER STATE: Keep card static, just slight shadow increase */
.service-card:hover {
    transform: none; /* Prevents jumping */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* --- CHECKBOX HACK SETUP --- */
.card-toggle-checkbox {
    display: none; 
}

/* --- CARD CONTENT WRAPPERS --- */
.card-visible-content {
    /* Adjusted padding to fit dome shape */
    padding: 3.5rem 1.5rem 1.5rem; 
    text-align: center;
}

/* ICON WRAPPER (Illustrations) */
.icon-wrapper {
    /* 50%+ LARGER SIZE */
    height: 110px; /* Was 60px */
    width: 100%;   /* Allow it to fill the width */
    max-width: 140px; /* Constraint to keep it balanced */
    margin: 0 auto 1.5rem;
}

.card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
}
.card-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: #DC0486;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.service-list-container {
    padding: 1.5rem 2rem 1.5rem;
    border-top: 1px solid #eee;
    text-align: left;
}
.service-item {
    margin-bottom: 1rem;
}
.service-item:last-child {
    margin-bottom: 0;
}
.service-item-title {
    font-weight: 700;
    color: #181818;
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

/* FORCE THE IMAGE TO FIT THE WRAPPER */
.icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
}

/* --- THE HIDDEN BULLET POINTS --- */
.service-sublist {
    list-style-type: none;
    padding-left: 1.2rem;
    margin: 0;
    font-size: 0.95rem;
    color: #333333;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.service-sublist li {
    position: relative;
    margin-bottom: 0.25rem;
}
.service-sublist li::before {
    content: '•';
    position: absolute;
    left: -1.2rem;
    color: #01d;
}

/* --- REVEAL ON CHECKBOX CHECKED --- */
.card-toggle-checkbox:checked ~ .card-content-wrapper .service-sublist {
    max-height: 500px; 
}

/* --- PULL TAB STYLES (LABEL) --- */
.pull-tab {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 8px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background-color 0.3s;
    /* PREPARE FOR CURL ANIMATION */
    transform-style: preserve-3d;
}

/* THE CURL SHADOW EFFECT (Hidden by default) */
.pull-tab::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    /* Gradient matches background to hide corner + create shadow */
    background: linear-gradient(315deg, transparent 45%, #aaa 50%, #ccc 56%, white 80%);
    box-shadow: -1px -1px 1px rgba(0,0,0,0.4);
    transition: width 0.3s, height 0.3s;
    pointer-events: none;
    border-radius: 0 0 12px 0; /* Match tab corner radius */
}

.service-card:hover .pull-tab {
    background-color: #f9f9f9;
}

/* TRIGGER CURL ON CARD HOVER */
.service-card:hover .pull-tab::before {
    width: 18px; /* Size of the curl */
    height: 18px;
}

.pull-tab-icon {
    width: 24px;
    height: 24px;
    color: #DC0486;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.card-toggle-checkbox:checked ~ .pull-tab .pull-tab-icon {
    transform: rotate(180deg);
}

/* --- CTA STYLES --- */
.cta-container { 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 3rem; 
}

/* --- 1. DESKTOP DEFAULT (4 Columns) --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items in a row */
    gap: 2rem;
    align-items: start;
    width: 100%;
}

.btn-services-primary, .btn-services-secondary {
    padding: 14px 32px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: transform 0.2s, filter 0.2s;
    font-family: 'Jost', sans-serif;
    display: inline-block;
}

.btn-services-primary {
    background-color: #FFD700; /* Golden Yellow */
    color: #000000;
}

.btn-services-secondary {
    background-color: #00ADEF; /* Light Blue */
    color: #ffffff;
}

.btn-services-primary:hover, .btn-services-secondary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}


/*                                                                   
  ░██████                                  ░██                                      ░██████                                                        
 ░██   ░██                                                                         ░██   ░██                                                       
░██          ░███████  ░██░████ ░██    ░██ ░██ ░███████   ░███████   ░███████     ░██          ░███████  ░██░████  ░███████   ░███████  ░████████  
 ░████████  ░██    ░██ ░███     ░██    ░██ ░██░██    ░██ ░██    ░██ ░██            ░████████  ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ 
        ░██ ░█████████ ░██       ░██  ░██  ░██░██        ░█████████  ░███████             ░██ ░██        ░██      ░█████████ ░█████████ ░██    ░██ 
 ░██   ░██  ░██        ░██        ░██░██   ░██░██    ░██ ░██               ░██     ░██   ░██  ░██    ░██ ░██      ░██        ░██        ░██    ░██ 
  ░██████    ░███████  ░██         ░███    ░██ ░███████   ░███████   ░███████       ░██████    ░███████  ░██       ░███████   ░███████  ░██    ░██ */

/* When screen is smaller than 1100px, switch to 2x2 */
@media (max-width: 1100px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        gap: 2rem; /* Keep spacing consistent */
    }
}

/* When screen is smaller than 768px, switch to 1 column */
@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr; /* Stack vertically */
    }
    
    /* Ensure cards take full width but don't overflow */
    .service-card {
        width: 85%;
        margin: 0 auto 2rem auto; /* Add space between stacked cards */
    }
    
    /* Optional: Reduce the subtitle gap slightly on mobile so it's not huge */
    .section-subtitle {
        margin-bottom: 3rem; 
    }
}

/* 
░██     ░██                                 ░██   ░██                                             ░██                  
░██     ░██                                       ░██                                             ░██                  
░██     ░██  ░███████  ░██    ░██    ░██    ░██░████████    ░██    ░██    ░██  ░███████  ░██░████ ░██    ░██ ░███████  
░██████████ ░██    ░██ ░██    ░██    ░██    ░██   ░██       ░██    ░██    ░██ ░██    ░██ ░███     ░██   ░██ ░██        
░██     ░██ ░██    ░██  ░██  ░████  ░██     ░██   ░██        ░██  ░████  ░██  ░██    ░██ ░██      ░███████   ░███████  
░██     ░██ ░██    ░██   ░██░██ ░██░██      ░██   ░██         ░██░██ ░██░██   ░██    ░██ ░██      ░██   ░██        ░██ 
░██     ░██  ░███████     ░███   ░███       ░██    ░████       ░███   ░███     ░███████  ░██      ░██    ░██ ░███████  
*/ 

/* --- SECTION WRAPPER & SCALLOPS --- */
.how-it-works-section {
    position: relative;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23eaeaea' fill-opacity='0.17' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");

    
    /* TIGHTER SPACING */
    margin-top: 4rem; 
    padding: 4rem 1.5rem; /* Reduced padding */
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
}

.section-title-how {
    text-align: center;
    margin-top: 2rem;      /* Adds space above the title */
    margin-bottom: 1rem; /* Adds space between Title and Subtitle */
    font-size: 2.2rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 2 rem;
}

.section-subtitle-how {
    font-size: 1.1rem;
    color: #000000;
    margin-top: 0;
    text-align: center;
    margin-bottom: 1.5rem; /* Changed from 5 rem- NO CHANGE ON WEBSITE */
}


/* TOP SCALLOP */
.how-it-works-section::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: radial-gradient(circle at 10px 0, transparent 10px, #ffffff  10.5px);
    background-size: 20px 20px;
    background-repeat: repeat-x;
}

/* BOTTOM SCALLOP */
.how-it-works-section::after {
    content: "";
    position: absolute;
    bottom: -20px; 
    left: 0;
    width: 100%;
    height: 20px;
    background-image: radial-gradient(circle at 10px 0, #ffffff  10px, transparent 10.5px);
    background-size: 20px 20px;
    background-repeat: repeat-x;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HEADER --- */
.section-header {
    text-align: center;
    margin-bottom: 1.5rem; /* CHANGE THIS: Reduced from 3rem to 1.5rem */
}



/* --- PROCESS LAYOUT --- */
.process-steps {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 0.5rem; /* CHANGE THIS: Reduced from 2rem to 0.5rem */
}

/* --- STEP CONTENT --- */
.step-content {
    text-align: center;
    width: 100%; 
    max-width: 280px; /* Constrains text width */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ICON CONTAINER (Reduced to 180px to fix clipping) */
.circle-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* FIXED SIZE */
    width: 180px;
    height: 180px;
    
    margin: 0 auto 1rem auto;
}

.circle-icon-container img {
    width: 100%; 
    height: 100%;
    object-fit: contain;
    display: block;
}

.step-main-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: #000000;
    margin-bottom: 0.5rem;
}

.step-sub-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #101010;
    margin: 0;
}

/* --- ARROW STYLING (Mobile: Points Down) --- */
.step-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 100%;
    opacity: 0.4;
}

/* Using pseudo-element for the arrow graphic */
.step-arrow::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(135deg); /* Points Down */
}

/* --- CTA BUTTON --- */
.cta-container { 
    text-align: center; 
    margin-top: 3.5rem; 
}

.cta-button { 
    display: inline-block; 
    background-color: #FBFF00; 
    color: rgb(0, 0, 0); 
    padding: 0.9rem 2.8rem; 
    border: none; 
    border-radius: 100px; /* Pill shape */
    font-size: 1rem; 
    font-weight: 600; 
    text-decoration: none; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    box-shadow: 0 4px 10px rgba(114, 114, 6, 0.37);
}

.cta-button:hover { 
    background-color: #FBFF00 ; 
    transform: translateY(-2px);
}

/*                                                                   
░██     ░██                                 ░██   ░██                                             ░██                                                                                     
░██     ░██                                       ░██                                             ░██                                                                                     
░██     ░██  ░███████  ░██    ░██    ░██    ░██░████████    ░██    ░██    ░██  ░███████  ░██░████ ░██    ░██ ░███████      ░███████   ░███████  ░██░████  ░███████   ░███████  ░████████  
░██████████ ░██    ░██ ░██    ░██    ░██    ░██   ░██       ░██    ░██    ░██ ░██    ░██ ░███     ░██   ░██ ░██           ░██        ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ 
░██     ░██ ░██    ░██  ░██  ░████  ░██     ░██   ░██        ░██  ░████  ░██  ░██    ░██ ░██      ░███████   ░███████      ░███████  ░██        ░██      ░█████████ ░█████████ ░██    ░██ 
░██     ░██ ░██    ░██   ░██░██ ░██░██      ░██   ░██         ░██░██ ░██░██   ░██    ░██ ░██      ░██   ░██        ░██           ░██ ░██    ░██ ░██      ░██        ░██        ░██    ░██ 
░██     ░██  ░███████     ░███   ░███       ░██    ░████       ░███   ░███     ░███████  ░██      ░██    ░██ ░███████      ░███████   ░███████  ░██       ░███████   ░███████  ░██    ░██ 
*/

@media (min-width: 900px) {
    
    /* 1. OUTER PADDING: Reduced slightly to save height */
    .how-it-works-section {
        padding-top: 0.5rem;    /* Reduced to minimum safe space */
        padding-bottom: 2.25rem; /* Just enough for button hover space */
    }

    /* 2. HEADER GAP: Increased to fix "squished" look */
    .section-header {
        margin-bottom: 2.5rem; /* Was 0.5rem -> Now breathes */
    }

    /* 3. BUTTON GAP: Increased to separate from text */
    .cta-container {
        margin-top: 2.5rem; /* Was 0.5rem -> Now breathes */
    }

    /* --- Existing Layout Rules (Do Not Change) --- */
    .process-steps {
        flex-direction: row; 
        align-items: flex-start; 
        justify-content: space-between;
        gap: 0;
    }

    .step-content {
        flex: 1; 
        padding-bottom: 0;
    }

    /* --- Existing Arrow Alignment (Do Not Change) --- */
    .step-arrow {
        width: 40px; 
        height: auto;
        /* Aligns arrow to the center of the 180px image */
        margin-top: 82px; 
    }

    .step-arrow::before {
        transform: rotate(45deg); 
    }
}

/* 
░██████████                         ░██    ░██                                      ░██           ░██            
    ░██                             ░██                                                           ░██            
    ░██     ░███████   ░███████  ░████████ ░██░█████████████   ░███████  ░████████  ░██ ░██████   ░██  ░███████  
    ░██    ░██    ░██ ░██           ░██    ░██░██   ░██   ░██ ░██    ░██ ░██    ░██ ░██      ░██  ░██ ░██        
    ░██    ░█████████  ░███████     ░██    ░██░██   ░██   ░██ ░██    ░██ ░██    ░██ ░██ ░███████  ░██  ░███████  
    ░██    ░██               ░██    ░██    ░██░██   ░██   ░██ ░██    ░██ ░██    ░██ ░██░██   ░██  ░██        ░██ 
    ░██     ░███████   ░███████      ░████ ░██░██   ░██   ░██  ░███████  ░██    ░██ ░██ ░█████░██ ░██  ░███████ 
*/

/* MAIN CONTAINER */
.review-section {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 2rem 1rem;  */
    /* Ensure background is transparent so page background shows through */
    background-color: transparent; 
}

/* HEADER STYLES */
.section-header {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 2rem;
}

.title {
    margin: 0;
    font-size: 2.2rem;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.2;
    transform: translateY(4rem);
}

/* LAYOUT GRID */
.content-wrapper {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 100px;
}

/* 5. LEFT COLUMN */
.image-col.left {
    flex: 1;
    max-width: 350px; 
}

/* 6. MIDDLE COLUMN */
.text-col {
    flex: 1.2; 
    padding: 0 20px;
}

.review-quote {
    font-size: 1rem;
    line-height: 1.6;
    color: #f3f3f3;       /* OFF-WHITE Quote text */
    margin-bottom: 20px;
    font-weight: 400;
}

.author-name {
    font-size: 1.2rem;
    color: #ffffff;    /* WHITE Author Name */
    font-weight: 700;
    margin: 0;
}

/* 7. RIGHT COLUMN */
.image-col.right {
    flex: 1;
    max-width: 350px;
    position: relative;
}

.menu-img {
    width: 100%;
    height: 400px; 
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    background-color: #333;
    display: block;
}

.menu-img.active {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px; 
    height: auto; 
    z-index: 9999;
    cursor: zoom-out;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
}

.img-close-btn {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background: white;
    color: black;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    display: none; /* Hidden by default */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.img-close-btn.visible {
    display: block;
}



/*                                                                  
░██████████                         ░██    ░██                                      ░██           ░██                 ░██████                                                        
    ░██                             ░██                                                           ░██                ░██   ░██                                                       
    ░██     ░███████   ░███████  ░████████ ░██░█████████████   ░███████  ░████████  ░██ ░██████   ░██  ░███████     ░██          ░███████  ░██░████  ░███████   ░███████  ░████████  
    ░██    ░██    ░██ ░██           ░██    ░██░██   ░██   ░██ ░██    ░██ ░██    ░██ ░██      ░██  ░██ ░██            ░████████  ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ 
    ░██    ░█████████  ░███████     ░██    ░██░██   ░██   ░██ ░██    ░██ ░██    ░██ ░██ ░███████  ░██  ░███████             ░██ ░██        ░██      ░█████████ ░█████████ ░██    ░██ 
    ░██    ░██               ░██    ░██    ░██░██   ░██   ░██ ░██    ░██ ░██    ░██ ░██░██   ░██  ░██        ░██     ░██   ░██  ░██    ░██ ░██      ░██        ░██        ░██    ░██ 
    ░██     ░███████   ░███████      ░████ ░██░██   ░██   ░██  ░███████  ░██    ░██ ░██ ░█████░██ ░██  ░███████       ░██████    ░███████  ░██       ░███████   ░███████  ░██    ░██ 
*/

@media (max-width: 900px) {
    /* Apply padding to the main container so everything (including title) is spaced */
    .review-section {
        padding: 2rem; 
        box-sizing: border-box;
    }
    .title {
        font-size: 2.2rem;
        transform: none; /* Reset the desktop translate offset */
    }

    .content-wrapper {
        flex-direction: column; 
        text-align: center;
        gap: 2rem;
        padding: 0; /* Remove wrapper padding since parent has it now */
    }

    .image-col.left, 
    .text-col {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    /* Hide the second image column completely */
    .image-col.right {
        display: none;
    }

    .image-col.left { order: 1; }
    .text-col { order: 2; margin: 20px 0; }
    
    .menu-img { 
        height: 300px; 
        width: 100%; 
    }
}

/* 
  ░██████                          ░██    ░██            ░██                                  
 ░██   ░██                         ░██    ░██            ░██                                  
░██     ░██ ░██    ░██ ░██░████    ░██    ░██  ░██████   ░██ ░██    ░██  ░███████   ░███████  
░██     ░██ ░██    ░██ ░███        ░██    ░██       ░██  ░██ ░██    ░██ ░██    ░██ ░██        
░██     ░██ ░██    ░██ ░██          ░██  ░██   ░███████  ░██ ░██    ░██ ░█████████  ░███████  
 ░██   ░██  ░██   ░███ ░██           ░██░██   ░██   ░██  ░██ ░██   ░███ ░██               ░██ 
  ░██████    ░█████░██ ░██            ░███     ░█████░██ ░██  ░█████░██  ░███████   ░███████  
*/

.expect-section {
    width: 100%;
    margin-top: 4rem;
    padding: 4rem 1.5rem;
    /* background-color: #FFF8E7;*/
    position: relative;
    display: block;
    
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23eaeaea' fill-opacity='0.17' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");

}

.expect-section-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* TOP SCALLOP */
.expect-section::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: radial-gradient(circle at 10px 0, transparent 10px, #ffffff 10.5px);
    background-size: 20px 20px;
    background-repeat: repeat-x;
}

/* BOTTOM SCALLOP */
.expect-section::after {
    content: "";
    position: absolute;
    bottom: -20px; 
    left: 0;
    width: 100%;
    height: 20px;
    background-image: radial-gradient(circle at 10px 0, #ffffff 10px, transparent 10.5px);
    background-size: 20px 20px;
    background-repeat: repeat-x;
}

/* Update Main Heading */
.expect-heading {
    font-size: 2.2rem; 
    font-weight: 700; 
    letter-spacing: 0; 
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 3rem; 
}

.expect-items-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    /* padding: 20px 0; Maybe remove this? */
}

.expect-item {
    background: transparent;
    border: none;
    padding: 0;

}

.expect-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
    color: #1a1a1a;
}

/* Update the Description text */
.expect-description {
    font-size: 0.95rem; 
    line-height: 1.5;
    text-align: left;
    opacity: 1;        
    color: #555;
}

/*                                                                
  ░██████                          ░██    ░██            ░██                                                                                                                
 ░██   ░██                         ░██    ░██            ░██                                                                                                                
░██     ░██ ░██    ░██ ░██░████    ░██    ░██  ░██████   ░██ ░██    ░██  ░███████   ░███████      ░███████   ░███████  ░██░████  ░███████   ░███████  ░████████   ░███████  
░██     ░██ ░██    ░██ ░███        ░██    ░██       ░██  ░██ ░██    ░██ ░██    ░██ ░██           ░██        ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ ░██        
░██     ░██ ░██    ░██ ░██          ░██  ░██   ░███████  ░██ ░██    ░██ ░█████████  ░███████      ░███████  ░██        ░██      ░█████████ ░█████████ ░██    ░██  ░███████  
 ░██   ░██  ░██   ░███ ░██           ░██░██   ░██   ░██  ░██ ░██   ░███ ░██               ░██           ░██ ░██    ░██ ░██      ░██        ░██        ░██    ░██        ░██ 
  ░██████    ░█████░██ ░██            ░███     ░█████░██ ░██  ░█████░██  ░███████   ░███████      ░███████   ░███████  ░██       ░███████   ░███████  ░██    ░██  ░███████   
*/

/* --- MOBILE STYLES (Consolidated) --- */
@media (max-width: 900px) {
    /* Add padding to the main section to prevent content touching the edges */
    .expect-section {
        padding: 2rem;
        box-sizing: border-box;
    }

    /* Stack grid items vertically */
    .expect-items-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem; /* Creates consistent space between stacked items */
        padding-bottom: 0; /* Removes the unwanted empty space */
    }

    /* Reset unnecessary side margins/paddings from desktop layout */
    .expect-heading,
    .expect-title,
    .expect-description {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Simplify typography for all smaller screens */
    .expect-heading {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }
    
    .expect-title {
        font-size: 1.3rem;
    }
    
    .expect-description {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* 
  ░██████                           ░██                             ░██    
 ░██   ░██                          ░██                             ░██    
░██         ░███████  ░████████  ░████████  ░██████    ░███████  ░████████ 
░██        ░██    ░██ ░██    ░██    ░██          ░██  ░██    ░██    ░██    
░██        ░██    ░██ ░██    ░██    ░██     ░███████  ░██           ░██    
 ░██   ░██ ░██    ░██ ░██    ░██    ░██    ░██   ░██  ░██    ░██    ░██    
  ░██████   ░███████  ░██    ░██     ░████  ░█████░██  ░███████      ░████ 
*/

/* --------- CONTACT FUNCTIONALITY BUTTON ---------- */
/* Big alert */
.alert {
    padding: 1.5rem 2rem;
    margin: 2rem auto;
    max-width: 800px;
    border-radius: 12px;
    font-weight: 500;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}

/* --------- CONTACT DESIGN ---------- */

.contact-section {
    padding: 4rem 2rem 0 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* 1. LAYOUT GRID */
.contact-wrapper {
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1.8fr 1fr; 
    gap: 2rem;
    align-items: start; 
}

.card {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e8e8e8;
}

.reply-time {
    font-size: 1rem;
    color: #F77205;
    margin: 1rem 0; /* Creates even space between hours and buttons */
    font-style: italic;
}

/* SCALLOP BOTTOM EFFECT (For the Right Card) */
.scallop-bottom {
    position: relative;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 25px; 
}

.scallop-bottom::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background-image: radial-gradient(circle at 7.5px 0, #ffffff 7.5px, transparent 8px);
    background-size: 15px 15px; 
    background-repeat: repeat-x;
}

.contact-form-card {
    height: auto; 
    padding-bottom: 2rem;
}

.form-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1rem 0;
    color: #1a1a1a;
}

.form-subtitle {
    font-size: 1rem;
    text-align: center;
    color: #666;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.form-group { margin-bottom: 1.5rem; }
.floating-label { position: relative; }

.form-input, .form-textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
    font-family: inherit;
}

.form-textarea { min-height: 120px; resize: vertical; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: #ff0090; }

.form-label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease-out;
}

.form-input:not(:placeholder-shown) + .form-label,
.form-textarea:not(:placeholder-shown) + .form-label,
.form-input:focus + .form-label,
.form-textarea:focus + .form-label {
    top: -0.75rem;
    left: 0.75rem;
    font-size: 0.8rem;
    color: #ff0090;
    background-color: #ffffff;
    padding: 0 0.25rem;
}

.required { color: #e74c3c; margin-left: 4px; }
.button-container { text-align: center; }

.submit-button {
    position: relative; 
    background-color: #ff7702;
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'SUSE'; 
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    max-width: 250px;
}

.submit-button:hover { 
    background-color: #ff5900; 
}

/* General SVG styling for the button */
.submit-button svg { 
    width: 1em; 
    height: 1em; 
    margin-right: 0.5em; 
    vertical-align: middle; 
    fill: none; 
    stroke: currentColor; 
    stroke-width: 2;
}

/* Success Message Container - Hidden by default */
.submit-button .success {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    opacity: 0;
    display: none; 
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    width: 100%;
}

/* Success Icon Styling */
.submit-button .success svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 20;
    stroke-dashoffset: 0;
    margin-right: 0; /* Override general margin */
}

/* --- Active States --- */

/* Hide the default "Send Message" text */
.submit-button.is_active .default { 
    display: none; 
}

/* Show the "Success" text */
.submit-button.is_active .success { 
    display: flex; 
    opacity: 1; 
}

/* --- RIGHT COLUMN: UNIFIED SIDEBAR --- */
.info-card {
    /* No special flex needed here, just block layout */
    text-align: left;
}

.info-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Divider Line */
.sidebar-divider {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 2rem 0; /* Space between Hours and Socials */
    width: 100%;
}

/* Hours List */
.hours-list {
    padding: 0;
    margin: 0 0 1.5rem 0;
    list-style: none;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    color: #333;
}

.hours-list li .day { font-weight: 600; color: #000; }
.hours-list li .time { color: #666; font-variant-numeric: tabular-nums; }

/* Dotted Line Filler */
.hours-list li .dots {
    flex-grow: 1;
    border-bottom: 1px dotted #ccc;
    margin: 0 8px;
    position: relative;
    top: -4px;
}

/* Outlined Social Buttons */
.social-buttons.horizontal {
    display: flex;
    gap: 0.8rem;
}

.social-btn.outlined {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: transparent;
    border: 1px solid #ccc; /* Subtle outline */
    color: #555;
    transition: all 0.2s ease;
}

.social-btn.outlined .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: fill 0.2s ease;
}

/* Social Hover States */
.social-btn.facebook.outlined:hover {
    border-color: #1877F2;
    background-color: #1877F2;
    color: white;
}
.social-btn.instagram.outlined:hover {
    border-color: #E4405F;
    background-color: #E4405F;
    color: white;
}

/* ---------------- Social Media Card ---------------- */
/* .social-media-contact p {
    font-size: 1rem;
    color: #666;
    margin-top: 0;
} */

/* Social Buttons */
.social-buttons {
    display: flex;
    gap: 1rem; /* Adjust gap if needed */
    flex-wrap: wrap; /* Allows stacking if too narrow */
}

.social-media-contact-button {
    flex: 1; /* Makes buttons equal width */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    color: white;
    transition: opacity 0.3s;
}

.social-media-contact-button:hover { opacity: 0.9; }
.facebook-button { background-color: #1877F2; }
.instagram-button { background-color: #E4405F; }
.icon { width: 20px; height: 20px; fill: currentColor; }

/*                                                                   
  ░██████                           ░██                             ░██                                                                       
 ░██   ░██                          ░██                             ░██                                                                       
░██         ░███████  ░████████  ░████████  ░██████    ░███████  ░████████     ░███████   ░███████  ░██░████  ░███████   ░███████  ░████████  
░██        ░██    ░██ ░██    ░██    ░██          ░██  ░██    ░██    ░██       ░██        ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ 
░██        ░██    ░██ ░██    ░██    ░██     ░███████  ░██           ░██        ░███████  ░██        ░██      ░█████████ ░█████████ ░██    ░██ 
 ░██   ░██ ░██    ░██ ░██    ░██    ░██    ░██   ░██  ░██    ░██    ░██              ░██ ░██    ░██ ░██      ░██        ░██        ░██    ░██ 
  ░██████   ░███████  ░██    ░██     ░████  ░█████░██  ░███████      ░████     ░███████   ░███████  ░██       ░███████   ░███████  ░██    ░██ 
*/
@media (max-width: 900px) {
    .contact-wrapper {
        grid-template-columns: 1fr; /* Stacks vertically on mobile */
    }
}

/* 
░██████████                      
░██                              
░██         ░██████    ░████████ 
░█████████       ░██  ░██    ░██ 
░██         ░███████  ░██    ░██ 
░██        ░██   ░██  ░██   ░███ 
░██         ░█████░██  ░█████░██ 
                             ░██ 
                             ░██ 
*/

.faq-section {
    width: 100%;
    max-width: none;
    margin: 4rem 0 0rem 0;
    padding: 4rem 0;
    background-color: #ffffff;
    border-top-left-radius: 15vw;
    border-top-right-radius: 15vw;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-heading,
.faq-subtitle,
.faq-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start; 
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-heading {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 0;
    color: #000000;
}

.faq-subtitle {
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    color: #ff7702;
    margin-bottom: 3rem;
    margin-top: 0;
}

.faq-item {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #000000;
    transition: background-color 0.3s ease;
    font-family: inherit;
    box-sizing: border-box;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    background-color: #f8f8f8;
}

.question-text {
    flex: 1;
    padding-right: 1rem;
    line-height: 1.4;
}

.faq-toggle {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
}

.faq-item[open] > .faq-question .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #fafafa;
}

.faq-item[open] > .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer p {
    padding: 1rem 1.25rem;
    margin: 0;
    line-height: 1.6;
    color: #333333;
    font-size: 0.95rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in-out 0.1s;
    min-height: 0;
}

.faq-item[open] .faq-answer p {
    opacity: 1;
}

/*                                                                   
░██████████                                                                                         
░██                                                                                                 
░██         ░██████    ░████████     ░███████   ░███████  ░██░████  ░███████   ░███████  ░████████  
░█████████       ░██  ░██    ░██    ░██        ░██    ░██ ░███     ░██    ░██ ░██    ░██ ░██    ░██ 
░██         ░███████  ░██    ░██     ░███████  ░██        ░██      ░█████████ ░█████████ ░██    ░██ 
░██        ░██   ░██  ░██   ░███           ░██ ░██    ░██ ░██      ░██        ░██        ░██    ░██ 
░██         ░█████░██  ░█████░██     ░███████   ░███████  ░██       ░███████   ░███████  ░██    ░██ 
*/

@media (max-width: 768px) {
    .faq-section {
        padding: 2rem 1rem;
        margin-bottom: 5rem;
    }
    
    /* Stack to a single column on mobile */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-heading {
        font-size: 2rem;
    }
    
    .faq-question {
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
    }
    
    .faq-toggle {
        width: 14px;
        height: 14px;
        font-size: 18px;
    }
    
    .faq-answer p {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
}

















/*
  ░██████                                  ░██ ░██ ░██                            
 ░██   ░██                                 ░██ ░██ ░██                            
░██          ░███████  ░██░████  ░███████  ░██ ░██ ░████████   ░██████   ░██░████ 
 ░████████  ░██    ░██ ░███     ░██    ░██ ░██ ░██ ░██    ░██       ░██  ░███     
        ░██ ░██        ░██      ░██    ░██ ░██ ░██ ░██    ░██  ░███████  ░██      
 ░██   ░██  ░██    ░██ ░██      ░██    ░██ ░██ ░██ ░███   ░██ ░██   ░██  ░██      
  ░██████    ░███████  ░██       ░███████  ░██ ░██ ░██░█████   ░█████░██ ░██      
*/

/* =========================================
   CUSTOM SCROLLBAR (Blue -> Orange)
   ========================================= */

body {
  --sb-track-color: #f0f0f0;       /* Slightly off-white for the track */
  --sb-thumb-color: #0099ff;       /* Blue */
  --sb-thumb-hover-color: #ff6600; /* Orange */
  --sb-size: 12px;                 /* 12px is standard "average" size */
}

/* 1. Size */
body::-webkit-scrollbar {
  width: var(--sb-size);
}

/* 2. Track (Background + Border) */
body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  /* This creates the standard "channel" look */
  border-left: 1px solid #dcdcdc; 
}

/* 3. Thumb (The Moving Bar) */
body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;
  
  /* Adds a gap around the thumb so it looks like a pill inside the track */
  border: 2px solid var(--sb-track-color);
  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px;
}

/* 4. Thumb Hover (Orange) */
body::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover-color);
}

/* 5. ARROW BUTTONS CONFIGURATION */
body::-webkit-scrollbar-button {
  display: block;
  height: 12px;
  background-color: var(--sb-track-color);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  border-left: 1px solid #dcdcdc; /* Matches track border */
}

/* --- TOP ARROW (Single Only) --- */
body::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230099ff'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}
body::-webkit-scrollbar-button:vertical:start:decrement:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6600'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}

/* --- BOTTOM ARROW (Single Only) --- */
body::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230099ff'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}
body::-webkit-scrollbar-button:vertical:end:increment:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6600'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}

/* --- HIDE EXTRA BUTTONS --- */
body::-webkit-scrollbar-button:vertical:start:increment,
body::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

/* 6. Firefox Fallback */
@supports not selector(::-webkit-scrollbar) {
  body {
      scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

/*
░█████████                                            
░██     ░██                                           
░██     ░██  ░██████   ░████████   ░███████  ░██░████ 
░█████████        ░██  ░██    ░██ ░██    ░██ ░███     
░██          ░███████  ░██    ░██ ░█████████ ░██      
░██         ░██   ░██  ░███   ░██ ░██        ░██      
░██          ░█████░██ ░██░█████   ░███████  ░██      
                       ░██                            
                       ░██                            
*/

/* THE good paper TEXTURE
.paper-texture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTA4bW0iCiAgIGhlaWdodD0iMjg1Ljc1bW0iCiAgIHZpZXdCb3g9IjAgMCA1MDggMjg1Ljc1IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgICAgaWQ9ImRlZnMxIj48ZmlsdGVyCiAgICAgICBzdHlsZT0iY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOnNSR0IiCiAgICAgICBpZD0iZmlsdGVyMTAxIgogICAgICAgeD0iMCIKICAgICAgIHk9IjAiCiAgICAgICB3aWR0aD0iMSIKICAgICAgIGhlaWdodD0iMSI+PGZlVHVyYnVsZW5jZQogICAgICAgICBpZD0iZmVUdXJidWxlbmNlMTAxIgogICAgICAgICBiYXNlRnJlcXVlbmN5PSIwLjAyMDAwMDAwMDAwMDAwMDAxMSIKICAgICAgICAgbnVtT2N0YXZlcz0iOSIKICAgICAgICAgc2VlZD0iMTAiCiAgICAgICAgIHR5cGU9ImZyYWN0YWxOb2lzZSIgLz48ZmVEaWZmdXNlTGlnaHRpbmcKICAgICAgICAgaWQ9ImZlRGlmZnVzZUxpZ2h0aW5nMTAxIgogICAgICAgICBzdXJmYWNlU2NhbGU9IjIuMDQ5OTk5OTUiCiAgICAgICAgIGRpZmZ1c2VDb25zdGFudD0iMSI+PGZlRGlzdGFudExpZ2h0CiAgICAgICAgICAgaWQ9ImZlRGlzdGFudExpZ2h0MTAzIgogICAgICAgICAgIGF6aW11dGg9Ijc1IgogICAgICAgICAgIGVsZXZhdGlvbj0iNTAiIC8+PC9mZURpZmZ1c2VMaWdodGluZz48L2ZpbHRlcj48L2RlZnM+PGcKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTU0KSI+PHJlY3QKICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojN2I0OTM4O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoyLjY0NTgzO2ZpbHRlcjp1cmwoI2ZpbHRlcjEwMSkiCiAgICAgICBpZD0icmVjdDEwMSIKICAgICAgIHdpZHRoPSI1MDgiCiAgICAgICBoZWlnaHQ9IjI4NS43NSIKICAgICAgIHg9IjE1NTQiCiAgICAgICB5PSItNC45NzM3OTkyZS0xNCIgLz48L2c+PC9zdmc+Cg==');
  mix-blend-mode: multiply;
  opacity: 0.25;} */



/* THE ONE USED 
body {
  position: relative;
}

.paper-texture {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTA4bW0iCiAgIGhlaWdodD0iMjg1Ljc1bW0iCiAgIHZpZXdCb3g9IjAgMCA1MDggMjg1Ljc1IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgICAgaWQ9ImRlZnMxIj48ZmlsdGVyCiAgICAgICBzdHlsZT0iY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOnNSR0IiCiAgICAgICBpZD0iZmlsdGVyMTAxIgogICAgICAgeD0iMCIKICAgICAgIHk9IjAiCiAgICAgICB3aWR0aD0iMSIKICAgICAgIGhlaWdodD0iMSI+PGZlVHVyYnVsZW5jZQogICAgICAgICBpZD0iZmVUdXJidWxlbmNlMTAxIgogICAgICAgICBiYXNlRnJlcXVlbmN5PSIwLjAyMDAwMDAwMDAwMDAwMDAxMSIKICAgICAgICAgbnVtT2N0YXZlcz0iOSIKICAgICAgICAgc2VlZD0iMTAiCiAgICAgICAgIHR5cGU9ImZyYWN0YWxOb2lzZSIgLz48ZmVEaWZmdXNlTGlnaHRpbmcKICAgICAgICAgaWQ9ImZlRGlmZnVzZUxpZ2h0aW5nMTAxIgogICAgICAgICBzdXJmYWNlU2NhbGU9IjIuMDQ5OTk5OTUiCiAgICAgICAgIGRpZmZ1c2VDb25zdGFudD0iMSI+PGZlRGlzdGFudExpZ2h0CiAgICAgICAgICAgaWQ9ImZlRGlzdGFudExpZ2h0MTAzIgogICAgICAgICAgIGF6aW11dGg9Ijc1IgogICAgICAgICAgIGVsZXZhdGlvbj0iNTAiIC8+PC9mZURpZmZ1c2VMaWdodGluZz48L2ZpbHRlcj48L2RlZnM+PGcKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTU0KSI+PHJlY3QKICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojN2I0OTM4O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoyLjY0NTgzO2ZpbHRlcjp1cmwoI2ZpbHRlcjEwMSkiCiAgICAgICBpZD0icmVjdDEwMSIKICAgICAgIHdpZHRoPSI1MDgiCiAgICAgICBoZWlnaHQ9IjI4NS43NSIKICAgICAgIHg9IjE1NTQiCiAgICAgICB5PSItNC45NzM3OTkyZS0xNCIgLz48L2c+PC9zdmc+Cg==');
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.4;

  /* --- THE PERFORMANCE FIX --- */
  /* This forces the GPU to handle this layer separately 
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform; 
}

/*---------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/

/*
 ░██████                           ░██                                      ░██         ░██████   ░██                                    ░██                                   
 ░██   ░██                          ░██                                      ░██        ░██   ░██                                         ░██                                   
░██         ░███████  ░████████  ░████████ ░██░████  ░██████    ░███████  ░████████    ░██         ░██ ░████████ ░████████   ░██████   ░████████ ░██    ░██ ░██░████  ░███████  
░██        ░██    ░██ ░██    ░██    ░██    ░███           ░██  ░██    ░██    ░██        ░████████  ░██░██    ░██ ░██    ░██       ░██     ░██    ░██    ░██ ░███     ░██    ░██ 
░██        ░██    ░██ ░██    ░██    ░██    ░██       ░███████  ░██           ░██               ░██ ░██░██    ░██ ░██    ░██  ░███████     ░██    ░██    ░██ ░██      ░█████████ 
 ░██   ░██ ░██    ░██ ░██    ░██    ░██    ░██      ░██   ░██  ░██    ░██    ░██        ░██   ░██  ░██░██   ░███ ░██    ░██ ░██   ░██     ░██    ░██   ░███ ░██      ░██        
  ░██████   ░███████  ░██    ░██     ░████ ░██       ░█████░██  ░███████      ░████      ░██████   ░██ ░█████░██ ░██    ░██  ░█████░██     ░████  ░█████░██ ░██       ░███████  
                                                                                                             ░██                                                                
                                                                                                       ░███████                                                                 
*/


  .contract-text {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 1rem;
    background: #f9f9f9;
    margin-bottom: 20px;
}

#sig-canvas {
    border: 2px dashed #333;
    background: #fff;
    cursor: crosshair;
    display: block;
    width: 100%;
    max-width: 500px;
    touch-action: none; 
}

/*
░█████████           ░██                                 
░██     ░██                                              
░██     ░██ ░██░████ ░██ ░███████   ░███████   ░███████  
░█████████  ░███     ░██░██    ░██ ░██    ░██ ░██        
░██         ░██      ░██░██        ░█████████  ░███████  
░██         ░██      ░██░██    ░██ ░██               ░██ 
░██         ░██      ░██ ░███████   ░███████   ░███████  
*/

.receipts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 40px 10px;
    font-family: 'Jost', sans-serif;
    max-width: 1600px;
    margin: 0 auto;
}

.receipt-container {
    flex: 0 1 350px;
    box-sizing: border-box;
}

.receipt-paper {
    background: #fff url(https://static.licdn.com/scds/common/u/images/apps/payments/textures/texture_paper_304x128_v1.png);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 0px, rgba(0, 0, 0, 0.2) 0px 10px 10px -5px;
    position: relative;
    padding-bottom: 30px;
}

.receipt-paper:after {
    content: ' ';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 10px;
    background: url(https://static.licdn.com/scds/common/u/images/apps/payments/textures/texture_paper_zigzag_288x18_v1.png) repeat-x;
}

.receipt-header {
    padding: 35px 20px 10px;
    position: relative;
}

.receipt-header:after {
    content: "";
    position: absolute;
    right: 20px;
    top: -30px;
    width: 70px;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M45,10 L15,10 C10,10 10,20 15,20 L40,20 C43,20 43,14 40,14 L18,14' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
    transform: rotate(125deg);
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2));
    z-index: 10;
}

.receipt-main-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

.receipt-content { padding: 0 20px 20px; }

.receipt-table {
    width: 100%;
    border-collapse: collapse;
}

.receipt-table th, .receipt-table td {
    padding: 12px 0;
    border-bottom: 1px dashed #000;
    vertical-align: top;
    color: #000;
}

.col-price, 
.receipt-table td { 
    text-align: right !important; 
    width: 25%; 
    font-weight: 400;
}

.col-service, 
.receipt-table tbody th { 
    text-align: left !important; 
    width: 50%; 
    font-weight: 700;
    white-space: nowrap;
}

.receipt-table thead th, 
.receipt-table thead td {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    border-bottom: 2px solid #000;
}

.service-note {
    display: block;
    font-size: 0.85rem; 
    font-weight: 400;
    font-style: italic;
    color: #444;
    margin-top: 4px;
    line-height: 1.3;
    white-space: normal;
}

.receipt-table tr:last-child th, 
.receipt-table tr:last-child td { border-bottom: none; }


@media (max-width: 800px) {
    .receipt-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .receipt-table tbody th {
        white-space: normal;
    }
}

/* Pricing TOP */

.pricing-intro-section {
    width: 100%;
    margin-bottom: 2rem; /* Margin at bottom now as it's a header */
    padding: 2.5rem 1.5rem 4rem 1.5rem; /* More padding at bottom for the curve */
    background-color: #ffffff;
    /* Flipped Radius: Flat top, rounded bottom */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10vw;
    border-bottom-right-radius: 10vw;
    box-sizing: border-box;
    /* Flipped shadow direction */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    font-family: 'Jost', sans-serif;
    color: #000;
}

.pricing-intro-content {
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-intro-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
}

.pricing-grid-cols {
    display: flex;
    gap: 40px;
    margin-bottom: 2rem;
}

.pricing-col { flex: 1; }

.pricing-col p, .pricing-definitions li {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
}

.pricing-definitions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-definitions li::before {
    content: "→";
    margin-right: 8px;
}

.pricing-actions-centered {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 1rem;
}

.pricing-btn-primary, 
.pricing-btn-secondary {
    text-decoration: none;
    padding: 0.9rem 2.5rem;
    font-weight: 700;
    border-radius: 100px;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.pricing-btn-primary { background: #000; color: #fff; border: 2px solid #000; }
.pricing-btn-secondary { background: transparent; color: #000; border: 2px solid #000; }

@media (max-width: 850px) {
    .pricing-grid-cols { flex-direction: column; gap: 1rem; }
    .pricing-actions-centered { flex-direction: column; align-items: center; }
    .pricing-btn-primary, .pricing-btn-secondary { width: 100%; text-align: center; max-width: 350px; }
    .pricing-intro-section { border-bottom-left-radius: 15vw; border-bottom-right-radius: 15vw; }
}