/* src/css/home.css */

/* === Hero Section === */
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-primary, #ffffff);
    background-color: var(--theme-color-surface);
    background-image: var(--theme-background-texture-url);
}

/* Hero illustrations container - flattened for Grid */
.hero-illustrations {
    display: contents;
    /* Allows children to participate in the .hero grid */
}

.hero-illustration {
    position: relative;
    transition: transform 0.3s ease-out;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-illustration img,
.hero-illustration picture {
    width: 100%;
    height: auto;
    display: block;
}

/* Swappable illustrations */
.hero-illustration .illustration-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.7s ease-in-out;
}

.hero-illustration .illustration-img-wrapper.secondary {
    opacity: 0;
}

.hero-illustration.is-swapped .illustration-img-wrapper.primary {
    opacity: 0;
}

.hero-illustration.is-swapped .illustration-img-wrapper.secondary {
    opacity: 1;
}

/* Responsive positioning for illustrations using Grid */
.hero-illustration.ill-1 {
    grid-column: 7 / 9;
    grid-row: 5 / 9;
    width: 100%;
    transform: translate(-20px, 20px);
}

.hero-illustration.ill-2 {
    grid-column: 9 / 12;
    grid-row: 3 / 7;
    width: 80%;
    justify-self: end;
}

.hero-illustration.ill-3 {
    grid-column: 2 / 4;
    grid-row: 7 / 9;
    width: 70%;
    align-self: end;
    transform: translate(25px);
}

/* Hero text box */
.hero-text-box {
    position: relative;
    grid-column: 4 / 7;
    grid-row: 9 / 12;
    width: 100%;
    max-width: 300px;
    color: var(--theme-text-on-surface);
    z-index: 4;
    pointer-events: auto;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
    align-self: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: var(--space-sm);
    border-radius: var(--border-radius);
}

.hero-text-box h3 {
    font-family: var(--font-primary);
    font-size: clamp(var(--font-size-md), 3vw, var(--font-size-lg));
    margin-bottom: var(--space-xs);
}

.hero-text-box p {
    font-size: clamp(var(--font-size-sm), 2vw, var(--font-size-sm));
}

.hero-content {
    position: relative;
    z-index: 4;
    grid-column: 2 / 8;
    grid-row: 2 / 8;
    background-image: none;
    background-repeat: repeat;
    background-position: center center;
    color: var(--theme-text-on-surface);
    height: auto;
    width: 100%;
    max-width: none;
    padding: var(--space-md);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 0;
    margin: 0;
}

.hero-content h1 {
    font-size: clamp(var(--font-size-xxl), 6vw, var(--font-size-xxxl));
    margin-bottom: var(--space-xs);
}

.hero-content p {
    font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-md));
    margin-bottom: var(--space-md);
}

.hero-content .cta-button {
    border-radius: var(--button-border-radius);
    padding: clamp(var(--button-padding-y), 2vw, var(--button-padding-y)) clamp(var(--button-padding-x), 4vw, var(--button-padding-x));
}

/* Tablet-specific adjustments (between mobile and desktop) */
@media (min-width: 601px) and (max-width: 1024px) {
    .hero {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(12, 1fr);
    }

    .hero-content {
        grid-column: 1 / 6;
        grid-row: 2 / 8;
        padding-left: var(--space-lg);
    }

    .hero-illustration.ill-1 {
        grid-column: 6 / 9;
        grid-row: 6 / 9;
        width: 100%;
        transform: translate(-50px);
    }

    .hero-illustration.ill-2 {
        grid-column: 6 / 9;
        grid-row: 2 / 5;
        width: 70%;
        align-self: end;
        transform: translate(-35px);
    }

    .hero-illustration.ill-3 {
        grid-column: 2 / 4;
        grid-row: 6 / 8;
        transform: translate(50px);
    }

    .hero-text-box {
        grid-column: 2 / 7;
        grid-row: 9 / 11;
        transform: translate(20px, 40px);
    }
}

/* Nest Hub (1024x600) specific adjustments */
@media (min-width: 601px) and (max-width: 1024px) and (max-height: 600px) {
    .hero-illustration.ill-1 {
        /* Adjustments for ill-1 */
        grid-row: 6 / 9;
        width: 90%;
    }

    .hero-illustration.ill-3 {
        /* Adjustments for ill-3 */
        grid-row: 6 / 8;
        width: 60%;
    }

    .hero-text-box {
        /* Adjustments for hero-text-box */
        grid-row: 9 / 11;
        transform: translate(10px, 60px);
    }
}

/* Mobile styles */
@media (max-width: 600px) {
    .hero {
        display: flex;
        height: auto;
        min-height: auto;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--space-md) 0;
        align-items: center;
        overflow: visible;
    }

    .hero-illustrations {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: var(--space-lg) var(--space-sm) 0;
        position: relative;
        pointer-events: auto;
        z-index: auto;
    }

    .hero-illustration,
    .hero-text-box {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .hero-text-box {
        grid-column: 1 / 2;
        grid-row: 1;
        align-self: center;
        text-align: left;
        text-shadow: none;
    }

    .hero-illustration.ill-1 {
        grid-column: 2 / 3;
        grid-row: 1;
        justify-self: start;
        max-width: 200px;
        margin-top: var(--space-sm);
        margin-left: -20px;
    }

    .hero-illustration.ill-3 {
        display: none;
    }

    .hero-content {
        width: 100%;
        max-width: none;
        height: auto;
        padding: var(--space-md);
        border-radius: 0;
        text-align: center;
        align-items: center;
        margin-top: 0;
    }

    .hero-illustration.ill-2 {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        max-width: 190px;
        margin-top: var(--space-sm);
        margin-left: 10px
    }

    .hero-content h1 {
        font-size: var(--font-size-xxl);
    }

    .hero-content p {
        font-size: var(--font-size-md);
    }

    .hero-content .cta-button {
        padding: var(--button-padding-y) var(--button-padding-x);
    }
}

/* Offer Section Styles */
.offer {
    background-color: var(--theme-color-surface);
    background-image: var(--theme-background-texture-url);
    color: var(--theme-text-on-surface, var(--theme-color-neutral));
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    position: relative;
}

.offer .container {
    display: flex;
    align-items: flex-start;
    gap: var(--intro-section-column-gap, 3rem);
    flex-wrap: wrap;
}

.offer-content {
    flex: 1;
    min-width: 300px;
    /* max-width: 400px; /* Removed to allow features to span wider */
}

/* NEW: Compact feature list under the offer content */
.offer-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    margin-top: var(--space-lg);
    width: 100%;
    /* Take up the width of the parent .offer-content */
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content vertically */
    text-align: center;
    gap: var(--space-xs);
    /* Tile styling */
    background-color: var(--theme-color-background);
    border: none;
    border-radius: var(--border-radius);
    padding: var(--space-sm);
    min-height: 150px;
    /* Make tiles taller */
    box-shadow: var(--theme-shadow-md);
    /* Add shadow */
    transition: transform var(--transition-duration) var(--transition-timing-function),
        box-shadow var(--transition-duration) var(--transition-timing-function);
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-lg);
}

.feature-item picture,
.feature-item img {
    flex-shrink: 0;
    /* Prevents the icon from being squished */
    width: 48px;
    height: 48px;
    object-fit: contain;
    /* Prevents distortion */
}

.feature-item h3 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    /* Bolder for tile heading */
    color: var(--theme-text-on-background);
    margin: 0;
}

/* Visual section wrapper */
.offer-visual {
    flex: 1;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

/* Link wrapper styling */
.feature-item-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

/* Force h3 to be black by default */
.feature-item-link h3,
.feature-item h3 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--theme-text-on-background);
    /* Black/dark color */
    margin: 0;
    transition: color var(--transition-duration) var(--transition-timing-function);
}

/* Change h3 color on hover */
.feature-item-link:hover h3 {
    color: var(--theme-text-on-background);
    /* Your accent/green color */
}

/* Bottom rule for offer section */
.offer-bottom-rule {
    width: 70%;
}



/* Responsive Layout */
@media (max-width: 968px) {
    .offer .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .offer-content {
        max-width: none;
        margin-bottom: var(--space-lg);
        align-items: center;
        /* Center the button and new features grid */
    }

    .offer-features {
        max-width: 350px;
        /* Keep the grid from looking too stretched on mobile */
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        /* Revert to 2 columns on mobile */
        margin-left: auto;
        /* Center the grid container */
        margin-right: auto;
        /* Center the grid container */
    }

    .offer-visual {
        min-width: auto;
        width: 100%;
    }
}


/* ============================= */
/* Reason Section Styles          */
/* ============================= */
.reason {

    padding-bottom: var(--space-lg);
    background-color: var(--theme-color-surface);
    background-image: var(--theme-background-texture-url);
}

.reason .text-center {
    margin-bottom: var(--space-lg);
}

.reason-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.reason-tile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background-color: var(--theme-color-background);
    padding: var(--space-sm);
    border-radius: var(--border-radius);
    box-shadow: var(--theme-shadow-md);
    transition: transform var(--transition-duration) var(--transition-timing-function),
        box-shadow var(--transition-duration) var(--transition-timing-function);
    min-height: 100px;
    /* Helps create the wide aspect ratio */
}

.reason-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-lg);
}

.reason-tile picture,
.reason-tile img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    object-fit: contain;
    /* Prevents distortion */
}

.reason-tile-content h3 {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--theme-text-on-background);
    margin: 0 0 var(--space-xxs) 0;
}

.reason-tile-content p {
    font-size: var(--font-size-sm);
    color: var(--theme-text-on-background);
    margin: 0;
    line-height: var(--line-height-tight);
}

.reason-tile-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.reason-tile-link h3,
.reason-tile-link p {
    color: var(--theme-text-on-background);
}

/* Responsive for Reason Section */
@media (max-width: 968px) {
    .reason-tiles {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

@media (max-width: 768px) {
    .reason-tiles {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
    }
}



/* ============================= */
/* Price Section Styles          */
/* ============================= */
.price {
    background-color: var(--theme-color-surface);
    background-image: var(--theme-background-texture-url);
    color: var(--theme-text-on-surface, var(--theme-color-neutral));
    padding-bottom: var(--intro-section-padding-y);
    position: relative;
}

.price .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

/* Main grid layout */
.price-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: stretch;
    gap: var(--intro-section-column-gap, 3rem);
    width: 100%;
    min-height: 400px;
}

.feature-item-link {
    /* Existing styles */
    text-decoration: none;
    color: inherit;
    /* FIX 1: Must be block to contain inner elements */
    display: block;
    /* FIX 2: Must take full height for inner flex/percentage children to calculate correctly */
    height: 100%;
    /* FIX 3: Also needs to be a flex container to manage its children's height vertically */
    display: flex;
    flex-direction: column;
}

/* Left side - Visual */
.price-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    justify-content: flex-start;
    height: 100%;
    /* REMOVED: min-width: 400px; <-- This was likely causing overflow */
}

.price-display {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transform: perspective(1000px) rotateY(0deg);
    transition: transform 0.3s ease;
    /* Add flex-shrink: 0 so it doesn't shrink unnecessarily */
    flex-shrink: 0;
}

.price-display:hover {
    transform: perspective(1000px) rotateY(0deg);
}

.price-text {
    font-size: 1.9rem;
    font-weight: bold;
    color: var(--theme-text-on-surface);
    font-family: var(--font-family-heading);
    white-space: nowrap;
    /* overridden on mobile */
}

/* Price Text Highlight */
.price-text-highlight {
    display: inline-block;
    position: relative;
    z-index: 1;
    white-space: normal;
}

.price-text-highlight::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.3em;
    right: -0.3em;
    height: 1.5em;
    background-color: rgba(127, 191, 127, 0.4);
    transform: translateY(-50%) rotate(0deg);
    z-index: -1;
    border-radius: 2px;
}

/* Price shapes */
.price-shapes {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    align-items: center;
    transform: perspective(1000px) rotateY(0deg);
    transition: transform 0.3s ease;
    flex: 1;
    justify-content: center;
    padding: var(--space-md) 0;
}

.price-shapes:hover {
    transform: perspective(1000px) rotateY(0deg);
}

/* Shape styling */
.shape {
    border-radius: var(--border-radius);
    position: relative;
    width: 80%;
    max-width: 200px;
    border: 2px solid var(--theme-text-on-surface, var(--theme-color-neutral));
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-heading);
    font-weight: bold;
    font-size: 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.shape:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
}

.shape--large {
    height: 70%;
}

.shape--small {
    height: 30%;
}

.shape-price {
    position: relative;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 3px;
    color: var(--theme-text-on-surface);
}

.shape--large .shape-price {
    background-color: rgba(255, 179, 102, 0.4);
}

.shape--small .shape-price {
    background-color: rgba(255, 255, 153, 0.4);
}

/* Right side - Content */
.price-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 300px;
}

/* Price card */
.card--price {
    max-width: 500px;
    width: auto;
    padding: var(--space-md);
    gap: var(--space-lg);
    transform: perspective(1000px) rotateY(0deg);
    font-family: var(--font-family-heading);
}

.card--price:hover {
    transform: perspective(1000px) rotateY(2deg);
}

/* Price items */
.price-item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.price-marker {
    width: 20px;
    height: 100%;
    min-height: 80px;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    border-radius: 2px;
}

.price-marker--large {
    background-color: rgba(255, 179, 102, 0.4);
    transform: translateY(0) rotate(-1deg);
}

.price-marker--large::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 60%;
    background-color: rgba(255, 179, 102, 0.6);
    transform: rotate(1.5deg);
    border-radius: 2px;
}

.price-marker--small {
    background-color: rgba(255, 255, 153, 0.4);
    transform: translateY(0) rotate(1deg);
}

.price-marker--small::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: rgba(255, 255, 153, 0.6);
    transform: rotate(-1.2deg);
    border-radius: 2px;
}

.price-details {
    flex: 1;
}

.price-details h3 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--theme-text-on-background);
}

.price-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price-list li {
    position: relative;
    padding: 2px 0;
    padding-left: var(--space-sm);
    font-size: 1.3rem;
    color: var(--theme-text-on-background);
    line-height: 1.4;
}

.price-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--theme-color-accent);
    font-weight: bold;
    font-size: 1.3rem;
}

/* Bottom rule */
.price-bottom-rule {
    width: 60%;
}

/* ============================= */
/* Responsive Layout           */
/* ============================= */
@media (max-width: 968px) {
    .price-grid {
        grid-template-columns: 1fr;
        justify-content: center;
        text-align: center;
        gap: var(--space-lg);
    }

    /* FIX: Reset min-widths on mobile */
    .price-visual {
        min-width: auto;
        /* This is the key fix! */
        width: 100%;
    }

    /* Center the card on mobile */
    .price-content {
        width: 100%;
        min-width: auto;
        /* Also reset this min-width */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card--price {
        width: auto;
        max-width: 400px;
        /* ensures card never exceeds screen */
        margin: 0 auto;
        padding: var(--space-md);
        gap: var(--space-lg);
        box-sizing: border-box;
        text-align: left;
        transform: perspective(800px) rotateY(0deg);
    }

    .price-text {
        white-space: normal;
        /* allow wrapping */
    }

    /* Make shapes taller on mobile */
    .price-shapes {
        min-height: 300px;
        /* Increase overall container height */
        padding: var(--space-sm) 0;
        /* Reduced padding */
    }

    .shape--large {
        height: 120px;
        /* Fixed height instead of percentage */
    }

    .shape--small {
        height: 80px;
        /* Fixed height instead of percentage */
    }

    /* Reduce gaps between elements on mobile */
    .price-visual {
        gap: var(--space-sm);
        /* Reduced from var(--space-md) */
    }

    .price-grid {
        gap: var(--space-md);
        /* Reduced from var(--space-lg) */
    }
}

@media (max-width: 640px) {
    .card--price {
        width: 100%;
        min-width: 0;
        /* critical: allow shrinking */
        padding: var(--space-sm);
        gap: var(--space-md);
        transform: perspective(800px) rotateY(0deg);
        flex: 0 1 auto;
        box-sizing: border-box;
        margin: 0 auto;
        /* center on screen */
    }

    .card--price .price-details h3 {
        font-size: 1.1rem;
        white-space: normal;
        /* allow wrapping */
        word-break: break-word;
        /* break long words */
        line-height: 1.3;
    }

    .card--price .price-list li {
        font-size: 1.1rem;
        white-space: normal;
        /* allow wrapping */
        word-break: break-word;
        /* break long phrases */
    }

    /* Keep markers aligned */
    .price-item {
        flex-direction: row;
        gap: var(--space-sm);
        align-items: flex-start;
    }

    .price-marker {
        flex-shrink: 0;
    }
}


/* Services Home Section */
.services-home-section {
    padding-top: var(--space-md);
    padding-bottom: var(--space-lg);
    background-image: var(--theme-background-texture-url);
    background-color: var(--theme-color-surface);
}

.services-home-layout {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-lg);
    align-items: center;
}

.services-home-text-content {
    flex: 1 1 33%;
    padding-right: var(--space-md);
}

.services-home-text-content h2 {
    text-align: left;
    margin-bottom: var(--space-md);
}

.services-home-text-content p {
    text-align: left;
    line-height: var(--line-height-base);
}

.services-home-slider-column {
    flex: 2 1 65%;
    display: flex;
    justify-content: center;
}

/* Swiper container for home services */
.services-home-swiper {
    width: 600px;
    /* Keep this if 280px card width is desired */
    max-width: 100%;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.swiper-wrapper {
    align-items: stretch;
}

.service-card-home {
    width: 280px;
    /* Keep this if 280px card width is desired */
    height: 450px;
    /* Fixed height for the overall card */
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Push content wrapper to the bottom */
    color: var(--theme-text-on-primary);
    /* Default text color for the banner content */
    box-shadow: var(--theme-shadow-lg);
    transition: transform 0.3s ease-in-out;
    text-decoration: none;
}

.service-card-home:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--theme-shadow-lg);
}

/* Hover state for text elements inside the card */
.service-card-home:hover .service-card-home__title,
.service-card-home:hover .service-card-home__description {
    color: var(--theme-color-accent);
    /* Change text color to accent on hover */
}


/* Styles for the eleventy-image generated <picture> and <img> backgrounds */
.service-card-home picture,
.service-card-home .service-card-home__background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: inherit;
}

.service-card-home__banner--bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    /* ADJUSTED: Top and bottom padding now match left/right */
    padding: var(--space-sm);
    /* Using --space-sm for all sides */
    box-sizing: border-box;
    background-color: var(--home-service-card-banner-bottom-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 180px;
    /* Fixed height for the bottom banner */
    /* Folder Cover Effect */
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-xs);
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
    transform: translateY(2px);
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);

    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 20px solid var(--home-service-card-banner-bottom-color-darker, rgba(0, 0, 0, 0.1));
        border-left: 20px solid transparent;
        border-top-right-radius: var(--border-radius-xs);
        transform: translateY(-1px);
        box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
    }
}

.service-card-home__title {
    margin-bottom: var(--space-xxs);
    color: inherit;
    text-shadow: none;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-heading);
    margin-top: 0;
    align-self: stretch;
    text-align: left;

    /* Force single line with ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-card-home__description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: inherit;
    flex-grow: 1;
    /* Allow description to take up available space before the icon */
    width: 100%;
    text-align: left;
    margin-bottom: var(--space-xs);
    /* Space above the icon */

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Allows up to 3 lines, adjust as needed */
    -webkit-box-orient: vertical;
    white-space: normal;
}

.service-card-home__icon {
    margin-top: auto;
    /* Pushes the icon to the bottom if description is short */
    margin-left: auto;
    /* Pushes icon to the right */
    align-self: flex-end;
    /* Ensures it's at the end of the cross-axis */
    display: block;
    width: var(--font-size-xl);
    height: var(--font-size-xl);
    filter: var(--footer-icon-filter);
    /* Use the existing filter variable */
}

/* Swiper Navigation and Pagination Styling (Generic for service carousels) */
.services-home-swiper .swiper-pagination-bullet {
    background-color: var(--theme-color-accent);
    opacity: 0.7;
}

.services-home-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

.services-home-swiper .swiper-button-next,
.services-home-swiper .swiper-button-prev {
    color: var(--theme-color-accent);
}

/* Keyframes for pulsing navigation arrows (also moved here as they are generic for Swiper arrows) */
@keyframes pulse-left-arrow {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-4px);
    }
}

@keyframes pulse-right-arrow {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

.services-home-swiper .swiper-button-prev {
    animation: pulse-left-arrow 1.5s infinite ease-in-out;
}

.services-home-swiper .swiper-button-next {
    animation: pulse-right-arrow 1.5s infinite ease-in-out;
}

/* Keyframes for icon pulsing animation (used by service card icon and contact icons) */
@keyframes pulse-icon {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Responsive for service cards slider - basic stacking */
@media (max-width: 768px) {
    .services-home-layout {
        flex-wrap: wrap;
        flex-direction: column;
        gap: var(--space-md);
    }

    .services-home-text-content {
        flex-basis: auto;
        margin-bottom: var(--space-md);
        padding-right: 0;
        text-align: center;
    }

    .services-home-text-content h2,
    .services-home-text-content p {
        text-align: center;
    }

    .services-home-slider-column {
        flex-basis: auto;
        width: 100%;
    }

    .services-home-swiper {
        width: 100%;
    }

    .service-card-home {
        width: 280px;
        height: 410px;
    }

    /* Adjust bottom banner for mobile if needed */
    .service-card-home__banner--bottom {
        height: 170px;
        /* Adjusted fixed height for mobile banner */
    }
}


/* About Home Section */
.about-home-section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    background-image: var(--theme-background-texture-url);
    background-color: var(--theme-color-surface);
    /* Standard body background */
}

.about-home-section .container {
    display: flex;
    align-items: center;
    /* Vertically align content of columns */
    justify-content: center;
    /* Center the two columns as a group */
    gap: var(--space-md);
    /* Gap between columns */
}

.about-home-image-wrapper {
    flex: 0 1 40%;
    /* Takes up to 40% of space, can shrink */
    /* Consider max-width if image is very large and you want to constrain it */
}

.about-home-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    /* Remove bottom space under image */
    border-radius: var(--border-radius-lg);
    /* Nice rounded corners */
    box-shadow: var(--theme-shadow-lg);
}

.about-home-text-wrapper {
    flex: 0 1 40%;
    /* Match image wrapper's flex-basis, allow shrink, don't grow */
    /* This makes the text column aim for the same width as the image column */
}

.about-home-text-wrapper h2 {
    /* font-family, font-size, and color inherit from global h2 styles */
    margin-bottom: var(--space-md);
}

.about-home-text-wrapper p {
    /* font-family, font-size, and color inherit from global p styles */
    line-height: var(--line-height-base);
}

.about-home-text-wrapper .btn {
    /* Standard button styles apply */
}

/* Horizontal rules for About Home Section */
.about-home-horizontal-rule {
    width: 100%;
}

.about-home-horizontal-rule.rule-above-heading {
    margin-bottom: var(--space-md);
}

.about-home-horizontal-rule.rule-below-text {
    margin-top: var(--space-md);
    margin-bottom: 0;
}

/* Responsive for About Home Section */
@media (max-width: 992px) {

    /* Tablet breakpoint, adjust as needed */
    .about-home-section .container {
        gap: var(--space-sm);
        /* Reduce gap for tablets */
    }

    /* Removed specific font-size override for .about-home-text-wrapper h2 here.
It will now follow global h2 responsive rules or remain --font-size-xxl from its base style,
matching the behavior of the .intro section's h2. */
}

@media (max-width: 768px) {

    /* Mobile breakpoint */
    .about-home-section .container {
        flex-direction: column;
        /* Stack items vertically */
        text-align: center;
        /* Center text content when stacked */
    }

    .about-home-image-wrapper {
        order: 1;
        /* Image first */
        margin-bottom: var(--space-md);
        width: 85%;
        /* Control image width on mobile */
        max-width: 450px;
        /* Max width for the image */
    }

    .about-home-text-wrapper {
        order: 3;
        /* Text third */
    }

    .about-home-horizontal-rule {
        margin-left: auto;
        /* Center the rule on mobile */
        margin-right: auto;
        /* Center the rule on mobile */
        width: 90%;
        /* Adjust width for mobile when text wrapper is full-width */
    }
}




/* Testimonial Home Section */
.testimonial-home-section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    background-color: var(--theme-color-surface);
    /* Fallback background color */

    /* Animated Gradient Setup */
    /* The gradient is defined twice to create a seamless loop over a 200% width */
    background-image: linear-gradient(135deg,
            /* Diagonal from top-left to bottom-right feeling movement */
            /* Wave 1 - Using --theme-color-secondary-rgb */
            rgba(var(--theme-color-secondary-rgb), 0.05) 0%,
            rgba(var(--theme-color-secondary-rgb), 0.1) 10%,
            rgba(var(--theme-color-secondary-rgb), 0.3) 20%,
            rgba(var(--theme-color-secondary-rgb), 0.3) 30%,
            rgba(var(--theme-color-secondary-rgb), 0.1) 40%,
            rgba(var(--theme-color-secondary-rgb), 0.05) 50%,
            /* Wave 2 (identical, for seamless looping) - Using --theme-color-secondary-rgb */
            rgba(var(--theme-color-secondary-rgb), 0.05) 50%,
            rgba(var(--theme-color-secondary-rgb), 0.1) 60%,
            rgba(var(--theme-color-secondary-rgb), 0.3) 70%,
            rgba(var(--theme-color-secondary-rgb), 0.3) 80%,
            rgba(var(--theme-color-secondary-rgb), 0.1) 90%,
            rgba(var(--theme-color-secondary-rgb), 0.05) 100%);
    background-size: 200% 200%;
    /* Make the gradient pattern twice as wide and tall for diagonal movement */
    animation: move-testimonial-gradient 10s linear infinite;
    /* Apply the animation, even faster */
}

@keyframes move-testimonial-gradient {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
        /* Moves the background from its top-left to its bottom-right */
        /* This creates the visual effect of the pattern moving from top-left to bottom-right of the element */
    }
}


.testimonial-home-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* Changed to 8 columns */
    /* grid-template-rows: auto auto; /* Implicitly two rows based on content */
    row-gap: var(--space-md);
    /* Increased vertical gap to match column-gap */
    column-gap: var(--space-md);
    /* Kept original horizontal gap */
    align-items: stretch;
    /* Make grid items stretch to fill row height */
}

.testimonial-home-intro {
    /* grid-column will be handled by grid-area below */
    grid-row: 1;
    color: var(--theme-color-primary);
    /* Or --theme-color-neutral if gradient is light */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically center content if row is tall */
    /* padding-right: var(--space-md); Removed as grid gap should suffice */
}

.testimonial-home-intro h2 {
    /* font-family and font-size inherit from global h2 styles */
    margin-bottom: var(--space-md);
}

.testimonial-home-intro p {
    /* font-family and font-size inherit from global p styles */
    line-height: var(--line-height-base);
    margin-bottom: var(--space-sm);
    color: var(--theme-text-on-surface);
    /* <--- ADJUSTED THIS LINE */
}

.testimonial-home-card-wrapper {
    /* This wrapper helps with consistent alignment if needed, and applies to specific grid cells */
    position: relative;
    /* Establishes stacking context for z-index */
    z-index: 1;
    /* Default stacking order */
}

/* Explicit placement for each grid item based on the HTML structure */
/* Updated grid areas for 8-column layout */
/* Row 1 */
.testimonial-home-grid>div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 4;
}

/* Intro (R1, C1-3, 3 cols wide) - Narrower */
.testimonial-home-grid>div:nth-child(3) {
    grid-area: 1 / 5 / 2 / 8;
}

/* Testimonial 1 (R1, C5-7, 3 cols wide) - HTML child 3 */
.testimonial-home-grid>div:nth-child(2) {
    grid-area: 1 / 8 / 2 / 9;
}

/* Empty Cell 1 (R1, C8, 1 col wide) - HTML child 2 */

/* Row 2 - Testimonials pushed right, each 3 cols wide */
.testimonial-home-grid>div:nth-child(4) {
    grid-area: 2 / 1 / 3 / 2;
}

/* Empty Cell 2 (HTML child 4) in R2, C1 (1 col wide) */
.testimonial-home-grid>div:nth-child(5) {
    grid-area: 2 / 3 / 3 / 6;
}

/* Testimonial 2 (HTML child 5) in R2, C3-5 (3 cols wide) - Shifted slightly right */
.testimonial-home-grid>div:nth-child(6) {
    grid-area: 2 / 1 / 3 / 1;
}

/* Empty Cell 3 (HTML child 6) - now zero-width in R2, effectively hidden */
.testimonial-home-grid>div:nth-child(7) {
    grid-area: 2 / 6 / 3 / 9;
}

/* Testimonial 3 (HTML child 7) in R2, C6-8 (3 cols wide) - Stays in place */


.testimonial-home-card {
    position: relative;
    /* For shimmer pseudo-element */
    overflow: hidden;
    /* To clip shimmer pseudo-element */
    background-color: var(--theme-color-surface);
    /* Standard card background */
    padding: var(--space-sm);
    /* Reduced padding for more content space */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--theme-shadow-md);
    /* display: flex; and flex-direction: column; removed to allow natural text flow */
    height: 100%;
    /* Make card fill the wrapper/grid cell height */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* Added existing card hover transitions */
    z-index: 2;
    /* Ensure card is above default wrapper z-index, helps with hover effect */
}

.testimonial-home-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-lg);
}

.testimonial-home-card-wrapper:hover {
    z-index: 10;
    /* Bring hovered wrapper (and its card) to the front */
}

.testimonial-home-card::after {
    /* Shimmer effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg,
            /* Angle of the shimmer */
            transparent 15%,
            rgba(255, 255, 255, 0.45) 40%,
            /* Shimmer color - more potent */
            rgba(255, 255, 255, 0.45) 60%,
            /* Shimmer color - more potent */
            transparent 85%);
    transform: translateX(-100%);
    /* Start off-screen */
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
    /* So it doesn't interfere with mouse events on the card */
    z-index: 1;
    /* Ensure shimmer is above background but below text if text had z-index */
}

.testimonial-home-card:hover::after {
    transform: translateX(100%);
    /* Move shimmer across the card */
}

.testimonial-home-card .testimonial-text {
    /* font-family, font-size, and color inherit from global p styles */
    line-height: var(--line-height-base);
    /* margin-bottom: var(--space-sm); /* Removed to allow text to flow closer to author */
    font-style: italic;
    /* flex-grow: 1; /* No longer needed as card is not flex container for text/author */
    /* Text will naturally fill the card's padding. */
    /* If text is very long, it will flow behind the author overlay, which is the desired effect. */
}

/* Styles for the new author overlay */
.testimonial-home-card .testimonial-author-overlay {
    position: absolute;
    top: 50%;
    /* Vertically center */
    right: var(--space-xs);
    /* Position from the card's right padding edge */
    transform: translateY(-50%);
    /* Adjust for vertical centering */
    background-color: var(--theme-testimonial-author-overlay-bg);
    /* Use themeable transparent background */
    padding: 2px 8px;
    /* Further reduced top/bottom padding, kept horizontal padding */
    border-radius: var(--border-radius-sm);
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    /* INTENTIONAL OVERRIDE: Smaller text for author */
    color: var(--theme-testimonial-author-text-color);
    /* Uses client.css defined variable */
    line-height: 1.2;
    /* Compact line height */
    font-style: normal;
    /* Remove italic if previously used */
    z-index: 3;
    /* Ensure it's above the text and shimmer effect */
    box-shadow: var(--theme-shadow-sm);
    /* Optional: subtle shadow for the overlay itself */
}

/* Responsive adjustments for Testimonial Home Section */
@media (max-width: 1024px) {

    /* Tablet: 2 columns */
    .testimonial-home-grid {
        /* Revert to 2 columns for tablet */
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-home-intro {
        grid-column: 1 / span 2;
        /* Full width */
        grid-row: 1;
        text-align: center;
        padding-right: 0;
    }

    /* .testimonial-home-intro h2 font size will now inherit global responsive h2 or remain var(--font-size-xxl) */
    /* If global h2 styles reduce size on tablet, this will follow. Otherwise, it stays xxl. */
    /* This matches the .intro section's behavior which doesn't have a specific h2 font size change here. */
    .testimonial-home-intro p {
        text-align: center;
        padding-right: 0;
        /* Keep this for layout */
        /* Font size will now inherit global responsive p or remain var(--font-size-md) */
    }

    .testimonial-home-empty-cell {
        display: none;
        /* Hide empty cells on tablet and mobile */
    }

    /* Reset explicit grid areas for tablet to allow natural flow into 2 columns */
    .testimonial-home-grid>div {
        grid-area: auto !important;
        /* Allow items to flow naturally */
    }

    /* Reset card overlap styling for tablet and mobile */
    .testimonial-home-card {
        width: 100%;
        right: auto;
        position: relative;
        /* Ensure 'right' is reset properly if it was absolute due to overlap */
    }
}

@media (max-width: 767px) {

    /* Mobile: 1 column */
    /* Tablet styles for .testimonial-home-grid > div (grid-area: auto) will also apply here,
which is fine as they will stack into a single column.
*/
    .testimonial-home-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-home-intro {
        grid-column: span 1;
        /* Full width */
    }

    /* Empty cells are already hidden from tablet styles */
}

/* Keyframes for the shimmering animation */
@keyframes shimmer-pulse {

    0%,
    100% {
        opacity: 0.7;
        /* Original full opacity for the symbols */
    }

    50% {
        opacity: 0.3;
        /* Dimmer opacity for the pulse effect */
    }
}



/* ============================================= */
/* Flow Section Homepage                         */
/* ============================================= */
.flow-section {
    padding-top: var(--intro-section-padding-y);
    padding-bottom: var(--intro-section-padding-y);
    background-color: var(--theme-color-surface);
    background-image: var(--theme-background-texture-url);
    position: relative;
    overflow-x: clip;
    /* Prevent horizontal overflow */
}

.flow-section .text-center {
    margin-bottom: var(--space-xl);
}

.flow-tiles {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    /* Align to top for consistent SVG positioning */
    gap: var(--space-xs);
    /* More space between elements */
    position: relative;
}

.flow-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-sm);
    border-radius: var(--border-radius-lg);
    background-color: var(--theme-color-background);
    position: relative;
    overflow: hidden;
    /* Flat look - no shadow */
    box-shadow: none;
    border: 1px solid rgba(var(--theme-color-on-surface-rgb), 0.08);
    transition: transform 0.2s ease;
}

.flow-tile:hover {
    transform: translateY(-2px);
}

/* SVG container with fixed positioning */
.flow-tile picture,
.flow-tile img {
    width: 150px;
    /* Larger SVGs */
    height: auto;
    margin-bottom: var(--space-md);
    flex-shrink: 0;
    /* Prevent shrinking */
}

.flow-tile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.flow-tile-content h3 {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--theme-text-on-background);
    margin: 0 0 var(--space-sm) 0;
    line-height: var(--line-height-tight);
}

.flow-tile-content p {
    font-size: var(--font-size-sm);
    color: var(--theme-text-on-background);
    margin: 0;
    line-height: var(--line-height-base);
    opacity: 0.8;
}

/* Shimmer effect for flow tiles */
.flow-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
            transparent 25%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 75%);
    transform: translateX(-100%);
    transition: none;
    pointer-events: none;
    opacity: 0;
}

.flow-tile.is-shimmering::after {
    transform: translateX(100%);
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Connectors */
.flow-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 100px;
    /* Fixed height to align with SVG level */
    margin-top: 10px;
    /* Offset to align with SVG center */
}

.flow-connector svg {
    width: 120px;
    /* Fixed width */
    height: 4px;
    /* Thin line */
    overflow: visible;
    display: block;
    /* Prevent inline spacing issues */
}

.flow-connector path {
    stroke: var(--theme-color-accent);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 8, 6;
    /* Dotted pattern */
    stroke-linecap: round;
    /* Animation properties */
    stroke-dashoffset: 200;
    opacity: 0;
}

.flow-connector.is-drawing path {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset 10.2s ease-out, opacity 0.3s ease;
}

.flow-bottom-rule {
    width: 70%;
    margin-top: var(--space-lg);
}

/* Responsive for Flow Section */
@media (max-width: 768px) {
    .flow-tiles {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .flow-tile {
        margin-bottom: var(--space-md);
    }

    .flow-connector {
        transform: rotate(90deg);
        min-height: 60px;
        min-width: auto;
        width: 60px;
        /* This becomes the length of the line */
        margin: 0 auto;
        /* Center the connector */
        padding: 0;
    }

    .flow-connector svg {
        width: 100%;
        /* SVG takes full width of the connector (which is now its length) */
    }

    .flow-connector svg {
        height: 4px;
        width: 100%;
    }
}

@media (max-width: 480px) {

    .flow-tile picture,
    .flow-tile img {
        width: 170px;
        height: auto;
    }

    .flow-connector {
        margin-top: 0;
    }
}






/* CTA Home Section */
.cta-section {
    padding: var(--space-lg) var(--space-sm);
    /* Generous padding above/below and some on sides */
    text-align: center;
    /* Center all inline/inline-block children */
    position: relative;
    /* For positioning pseudo-elements */
    color: var(--theme-text-on-surface, --theme-color-neutral);
    /* Text on default surface */
}

/* Rule below the CTA button */
.cta-bottom-rule {
    width: 48%;
    margin-top: var(--space-lg);
    margin-bottom: 0;
}


.cta-section h2 {
    /* font-family inherits from global h2 styles */
    /* color: inherit; /* Inherits from .cta-section, which is --color-text-on-primary */
    /* Font size is handled by global h2 styles, can be overridden if a different size is desired */
    margin-bottom: var(--space-sm);
}

.cta-section p {
    /* font-family inherits from global p styles */
    /* color: inherit; /* Inherits from .cta-section */
    line-height: var(--line-height-base);
    margin-bottom: var(--space-md);
    max-width: 700px;
    /* Constrain line length for better readability */
    margin-left: auto;
    /* Center the paragraph block if max-width is applied */
    margin-right: auto;
    /* Center the paragraph block if max-width is applied */
}

/* Styling for the button within the CTA section to make it a prominent, primary-style button */
.cta-section .cta-button.cta-button-prominent {
    display: inline-block;
    /* Behaves like a button */
    background-color: var(--theme-color-primary);
    /* Main button background color */
    color: var(--theme-text-on-primary);
    /* Main button text color */
    padding: calc(var(--button-padding-y) * 1.2) calc(var(--button-padding-x) * 1.8);
    /* Slightly larger padding for prominence */
    border-radius: var(--button-border-radius);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    /* INTENTIONAL OVERRIDE: Larger than default button */
    text-transform: var(--button-text-transform);
    line-height: var(--line-height-base);
    border: none;
    /* Ensure no default border from user agent styles for <a> */
    cursor: pointer;
    transition: var(--transition);
}

.cta-section .cta-button.cta-button-prominent:hover {
    background-color: var(--theme-color-secondary);
    /* Main button hover background */
    color: var(--theme-text-on-secondary);
}

/* Hide symbols on mobile */
@media (max-width: 768px) {

    /* Adjust breakpoint as needed */
    .cta-section::before,
    .cta-section::after {
        display: none;
    }
}



/* ============================================= */
/* Contact Section (Home Page)                   */
/* Styles adapted from underpages.css for consistency */
/* ============================================= */

.contact-section.contact-page-section {
    padding-top: var(--space-md);
    /* Reduced top padding to bring it closer to section above */
    /* padding-bottom: var(--space-lg); /* This is already in .contact-page-section from underpages.css */
}

/* CSS for .contact-section .contact-home-horizontal-rule.rule-above-heading removed */

/* Title styling */
.contact-section .contact-page-main-title {
    /* font-family inherits from global h2 styles (assuming this contains an h2) */
    /* font-size is now controlled by global h2 styles in main.css */
    margin-bottom: var(--space-lg);
    /* Ensure consistent space below title before actions */
    /* text-align: center; is handled by .text-center class */
}

/* Actions: Icons and (previously) CTA Button */
.contact-section .contact-page-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    /* Reduced gap as CTA button is removed */
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    /* Reduced space before the cards */
}

.contact-section .contact-page-icons {
    display: flex;
    gap: var(--space-lg);
}

.contact-section .contact-page-icons a img {
    height: var(--icon-size-contact-home, 80px);
    width: auto;
    /* transition: transform 0.2s ease-in-out; Keep hover effect, animation is separate */
    animation: pulse-icon 2s infinite ease-in-out;
    filter: var(--footer-icon-filter);
    /* Apply the filter from client.css */
}

.contact-section .contact-page-icons a:hover img {
    transform: scale(1.1);
}

/* CTA button was removed from contact-home.njk, so its styles can be omitted here if not used elsewhere */
/*
.contact-section .contact-page-cta {
background-color: var(--dm-button-primary-bg);
color: var(--dm-button-primary-text);
padding: calc(var(--button-padding-y) * 1.1) calc(var(--button-padding-x) * 1.5);
font-size: var(--font-size-lg);
}

.contact-section .contact-page-cta:hover {
background-color: var(--dm-button-primary-hover-bg);
}
*/

/* Layout for the two cards (Direktkontakt and Map) */
.contact-section .contact-page-cards-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
}

/* Styling for individual cards */
.contact-section .contact-page-content-card,
.contact-section .contact-page-map-card {
    background-color: var(--theme-color-surface);
    padding: var(--space-md);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--theme-shadow-lg);
    flex: 1 1 var(--contact-card-basis-home, 420px);
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.contact-section .contact-page-content-card h3,
.contact-section .contact-page-map-card h3 {
    margin-top: 0;
    /* font-family inherits from global h3 styles */
    margin-bottom: var(--space-sm);
    color: var(--theme-color-heading-text);
    /* UPDATED: Now uses the dedicated heading text color */
    /* font-size inherits from global h3 styles */
    border-bottom: 2px solid var(--theme-text-on-surface);
    /* <--- ADJUSTED THIS LINE (horizontal rule color) */
    padding-bottom: var(--space-xs);
}

/* Styling for the "Direktkontakt" card content */
.contact-section .contact-page-content-card .contact-info p {
    /* font-family inherits from global p styles */
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-base);
    color: var(--theme-text-on-surface);
    /* <--- ADJUSTED THIS LINE (general paragraph color) */
}

.contact-section .contact-page-content-card .contact-info p strong {
    color: var(--theme-color-primary);
    /* Or --theme-color-neutral */
    font-family: var(--font-primary);
    /* Labels can use primary font for emphasis - INTENTIONAL OVERRIDE */
    font-weight: var(--font-weight-bold);
    display: block;
    margin-bottom: 0;
}

.contact-section .contact-page-content-card .contact-info a {
    color: var(--theme-text-on-surface);
    /* <--- ADJUSTED THIS LINE (telefon, email, whatsapp color) */
    text-decoration: none;
    /* font-family inherits from global a styles or p styles */
    font-weight: var(--font-weight-medium);
}

.contact-section .contact-page-content-card .contact-info a:hover {
    color: var(--theme-color-accent);
    /* Hover to accent */
    text-decoration: underline;
}

.contact-section .contact-page-content-card .contact-info p.contact-info-group-heading {
    margin-bottom: 0.25em;
}

.contact-section .contact-page-content-card .opening-hours-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    /* font-family inherits from global li/p styles */
    color: var(--theme-text-on-surface);
    /* <--- ADJUSTED THIS LINE (opening hours list color) */
}

.contact-section .contact-page-content-card .opening-hours-list li {
    margin-bottom: var(--space-xxs);
}

/* Styling for the Map card */
.contact-section .contact-page-map-card iframe {
    border-radius: var(--border-radius-md);
    display: block;
    flex-grow: 1;
    min-height: 300px;
}

.contact-section .contact-page-map-card .map-navigation-button {
    margin-top: var(--space-sm);
    align-self: center;
}

/* Responsive adjustments for home page contact section */
@media (max-width: 768px) {
    .contact-section .contact-page-icons {
        gap: var(--space-sm);
    }

    .contact-section .contact-page-icons a img {
        height: 45px;
    }

    .contact-section .contact-page-content-card,
    .contact-section .contact-page-map-card {
        flex-basis: 100%;
    }
}

/* Keyframes for icon pulsing animation */
@keyframes pulse-icon {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        /* Pulse to 110% size */
    }
}