/* =====================================================================
   KlinikPlus – Homepage MOBILE-ONLY fixes
   ---------------------------------------------------------------------
   Loaded LAST and ONLY on the landing homepage. Every rule is wrapped in
   `@media (max-width: 991px)` and scoped under `.klinikplus-home-page`,
   so large screens (992px, 1024px, 1200px, 1440px, 1920px, ...) are
   NEVER affected — they keep rendering exactly as before.
   ===================================================================== */

/* The mobile "How it Works" timeline only ever renders below 992px. */
.hiw-mobile {
    display: none;
}

/* Service cards repeat their heading inside the reveal panel on mobile only;
   on desktop the heading stays in `.service-card-content`. */
.service-card-hover-title {
    display: none;
}

@media (max-width: 991px) {

    /* -----------------------------------------------------------------
       0) HERO
       The doctor photo is pulled up with translateY(-60px) for the
       desktop composition. On phones that pull made the girl's head
       overlap the "Join Now" button. Drop the pull, add a little gap,
       and shrink the button so it fits the phone width.
    ----------------------------------------------------------------- */
    .klinikplus-home-page .hero-doctor-img {
        transform: none !important;
    }

    .klinikplus-home-page .hero-image {
        margin-top: 22px;
    }

    .klinikplus-home-page .hero-btn-primary {
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 18px !important;
        font-size: 0.8125rem !important;
        gap: 0.35rem;
    }

    .klinikplus-home-page .hero-btn-arrow {
        width: 18px;
        height: 18px;
    }

    /* -----------------------------------------------------------------
       0a) OTHER CTA BUTTONS
       The "Let's talk" (60px) and "Send message" (80px) buttons were
       oversized on phones. Bring every page CTA down to the same compact
       hero-button size (≈48px tall, 15px text, smaller arrow icon).
    ----------------------------------------------------------------- */
    .klinikplus-home-page .transforming-btn,
    .klinikplus-home-page .lets-talk-btn,
    .klinikplus-home-page .send-message-btn {
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 18px !important;
        font-size: 0.8125rem !important;
        gap: 0.35rem !important;
    }

    .klinikplus-home-page .transforming-btn-arrow,
    .klinikplus-home-page .lets-talk-btn img,
    .klinikplus-home-page .send-message-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* The consultation CTA goes full-width on phones, so centre its label
       instead of leaving it hugging the left edge. */
    .klinikplus-home-page .lets-talk-btn {
        justify-content: center !important;
    }

    /* Footer "Get started" CTA. The footer sits OUTSIDE .klinikplus-home-page,
       so this hook is intentionally unscoped — but home-mobile.css only loads
       on the homepage, so only the homepage footer is affected. */
    /* -2px vertical padding vs the others because this button has a 2px
       border, so the total height matches the hero button exactly (38px). */
    .footer-cta-btn {
        padding: 7px 18px !important;
        font-size: 0.8125rem !important;
    }

    .footer-cta-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* The logo/email/phone block above "Follow Us" duplicates the contact
       section right above it, so drop it on phones. */
    footer .footer-brand-intro {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       0b) STATS COUNTER CARDS
       Desktop stacks the number above a full-bleed illustration inside a
       tall saturated tile. On phones that reads as three huge blocks, so
       the card flips to a short landscape tile: number + label on the
       left, artwork on the right inside a soft colour blob, on a tinted
       (instead of saturated) background. The dark card keeps its dark fill.
    ----------------------------------------------------------------- */
    .klinikplus-home-page .stats-card {
        height: auto !important;
        min-height: 168px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 22px 0 22px 22px !important;
        margin-bottom: 16px !important;
        border-radius: 22px !important;
        box-shadow: none !important;
    }

    /* Dotted texture in the top-left corner */
    .klinikplus-home-page .stats-card::before {
        content: '';
        position: absolute;
        top: 16px;
        left: 18px;
        width: 44px;
        height: 32px;
        background-image: radial-gradient(currentColor 1.2px, transparent 1.3px);
        background-size: 8px 8px;
        opacity: 0.55;
        pointer-events: none;
        z-index: 4;
    }

    .klinikplus-home-page .stats-card-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .klinikplus-home-page .stats-number {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.03em !important;
        margin-bottom: 0.25rem !important;
    }

    .klinikplus-home-page .stats-text {
        font-size: 1rem !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
    }

    /* Short accent rule under the label */
    .klinikplus-home-page .stats-text::after {
        content: '';
        display: block;
        width: 46px;
        height: 3px;
        border-radius: 3px;
        margin-top: 14px;
    }

    /* Artwork moves out of the absolute full-bleed slot into a right column */
    .klinikplus-home-page .stats-card-image {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        overflow: visible !important;
    }

    /* Soft colour blob sitting behind the artwork */
    .klinikplus-home-page .stats-card-image::before {
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 124px;
        height: 124px;
        border-radius: 50%;
        z-index: 0;
    }

    .klinikplus-home-page .stats-card-image img {
        position: relative;
        z-index: 1;
        height: 122px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: center right !important;
    }

    /* Tinted cards keep the artwork inset; the dark card lets it bleed out */
    .klinikplus-home-page .stats-card-orange .stats-card-image,
    .klinikplus-home-page .stats-card-yellow .stats-card-image {
        padding-right: 16px;
    }

    /* --- Card 1: clinics served --- */
    .klinikplus-home-page .stats-card-orange {
        background: #FDF3EE !important;
        color: #F0BFAA;
    }

    .klinikplus-home-page .stats-card-orange .stats-number {
        color: #FF6B47 !important;
    }

    .klinikplus-home-page .stats-card-orange .stats-text {
        color: #140F2D !important;
    }

    .klinikplus-home-page .stats-card-orange .stats-text::after {
        background: #FF8E6C;
    }

    .klinikplus-home-page .stats-card-orange .stats-card-image::before {
        background: #FBE0D5;
    }

    /* --- Card 2: leads generated --- */
    .klinikplus-home-page .stats-card-black {
        background: #2E2E2E !important;
        color: #575757;
        min-height: 176px !important;
    }

    .klinikplus-home-page .stats-card-black .stats-number,
    .klinikplus-home-page .stats-card-black .stats-text {
        color: #FFF !important;
    }

    .klinikplus-home-page .stats-card-black .stats-text::after {
        background: #FF8E6C;
    }

    /* This card uses a photo rather than an illustration, so instead of
       sitting on a blob it fills the right half edge-to-edge and fades
       into the dark background so the copy stays readable on top of it. */
    .klinikplus-home-page .stats-card-black .stats-card-image {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 26% !important;
        padding: 0 !important;
        z-index: 1;
    }

    .klinikplus-home-page .stats-card-black .stats-card-image::before {
        display: none;
    }

    .klinikplus-home-page .stats-card-black .stats-card-image::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(90deg, #2E2E2E 0%, rgba(46, 46, 46, 0.7) 26%, rgba(46, 46, 46, 0) 58%);
    }

    .klinikplus-home-page .stats-card-black .stats-card-image img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .klinikplus-home-page .stats-card-black .stats-card-content {
        position: relative;
        z-index: 3;
    }

    /* --- Card 3: satisfied patients --- */
    .klinikplus-home-page .stats-card-yellow {
        background: #FDF8EA !important;
        color: #E7CF91;
    }

    .klinikplus-home-page .stats-card-yellow .stats-number {
        color: #EFB528 !important;
    }

    .klinikplus-home-page .stats-card-yellow .stats-text {
        color: #140F2D !important;
    }

    .klinikplus-home-page .stats-card-yellow .stats-text::after {
        background: #F5C542;
    }

    .klinikplus-home-page .stats-card-yellow .stats-card-image::before {
        background: #FBEFC6;
    }

    /* Transforming section CTA – smaller on phones (matches hero button) */
    .klinikplus-home-page .transforming-btn {
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 18px !important;
        font-size: 0.8125rem !important;
        gap: 0.35rem;
    }

    .klinikplus-home-page .transforming-btn-arrow {
        width: 18px;
        height: 18px;
    }

    /* -----------------------------------------------------------------
       0c) TRANSFORMING SECTION – reorder on mobile
       Desktop keeps its two columns (image | heading+text). On phones
       the requested order is:  heading -> image -> text.
       The heading and text live inside one box and the image in another,
       so we flatten the wrappers with `display: contents` and reorder the
       now-sibling pieces with flex `order`.
    ----------------------------------------------------------------- */
    .klinikplus-home-page .transforming-section .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
    }

    .klinikplus-home-page .transforming-section .row > .col-12,
    .klinikplus-home-page .transforming-section .transforming-content {
        display: contents !important;
    }

    .klinikplus-home-page .transforming-section .transforming-content > h2 {
        order: 1;
    }

    .klinikplus-home-page .transforming-section .transforming-image {
        order: 2;
        max-width: 280px !important;      /* was full-width (359px) – shrink + centre */
        margin: 4px auto 12px !important;
        transform: none !important; /* cancel fade-in-left shift on mobile */
    }

    .klinikplus-home-page .transforming-section .transforming-image img {
        width: 100% !important;
        height: auto !important;
    }

    .klinikplus-home-page .transforming-section .transforming-content > .transforming-text {
        order: 3;
    }

    .klinikplus-home-page .transforming-section .transforming-content > .transforming-buttons {
        order: 4;
    }

    /* the flattened pieces lost the column padding – restore side spacing */
    .klinikplus-home-page .transforming-section .transforming-content > h2,
    .klinikplus-home-page .transforming-section .transforming-content > .transforming-text,
    .klinikplus-home-page .transforming-section .transforming-content > .transforming-buttons,
    .klinikplus-home-page .transforming-section .transforming-image {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Desktop pads 2rem below the copy AND 2rem above the button; stacked on a
       phone that reads as a 64px hole in front of "Join Now". */
    .klinikplus-home-page .transforming-section .transforming-content > .transforming-text {
        margin-bottom: 12px !important;
    }

    .klinikplus-home-page .transforming-section .transforming-content > .transforming-buttons {
        margin-top: 4px !important;
    }

    /* The hairline above the team heading only reads as a stray line on a
       narrow screen. */
    .klinikplus-home-page .gradient-divider {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       0d) TEAM SLIDER
       On phones the cards were only 280px with slivers of the neighbours
       showing and the arrows sitting on top of the photo. Make one card
       prominent (~86% width with a peek of the next), snap it while
       swiping, and drop the overlapping arrows (swipe instead).
    ----------------------------------------------------------------- */
    .klinikplus-home-page .team-scroll-container {
        scroll-snap-type: x proximity;
        margin: 0 !important;
        padding: 15px 0 !important;
    }

    /* min-width:max-content made the wrapper size to ALL cards, so a
       percentage card width blew up. Reset it so one card = 100% of the
       visible track (full width, no peek of the next card). */
    .klinikplus-home-page .team-scroll-wrapper {
        min-width: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .klinikplus-home-page .team-card-scroll {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        scroll-snap-align: center;
    }

    /* keep the left/right arrows on the card edges */
    .klinikplus-home-page .team-nav-btn {
        width: 42px;
        height: 42px;
    }
    .klinikplus-home-page .team-nav-left  { left: 6px; }
    .klinikplus-home-page .team-nav-right { right: 6px; }

    /* -----------------------------------------------------------------
       0e) TESTIMONIALS
       The slide kept its desktop min/max-width of 408px, so on a 375px
       phone the card overflowed the slider and the text was clipped on
       the right. Make one slide fill the visible track instead.
    ----------------------------------------------------------------- */
    .klinikplus-home-page .testimonials-slider {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .klinikplus-home-page .testimonials-track {
        width: 100% !important;
        min-width: 0 !important;
    }

    .klinikplus-home-page .testimonial-slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* There are 5 testimonials, but klinikplus.css hides the prev/next
       arrows (and the dots) below 991px — so on a phone only the first
       card was reachable. Bring the arrows back as a centred pair BELOW
       the card (the JS slider already wires up next/prev + disabled
       states). Overlaying them on the sides would sit on top of the
       text, so they go under the card instead. */
    .klinikplus-home-page .testimonials-track {
        padding-bottom: 24px !important;
    }

    .klinikplus-home-page .testimonials-slider {
        padding-bottom: 76px !important;
    }

    .klinikplus-home-page .testimonials-nav {
        display: flex !important;
        top: auto !important;
        bottom: 16px !important;
        transform: none !important;
        width: 46px !important;
        height: 46px !important;
    }

    .klinikplus-home-page .testimonials-nav-prev {
        left: 50% !important;
        right: auto !important;
        margin-left: -54px !important;
    }

    .klinikplus-home-page .testimonials-nav-next {
        left: 50% !important;
        right: auto !important;
        margin-left: 8px !important;
    }

    /* -----------------------------------------------------------------
       1) HOW IT WORKS
       The desktop layout is a 3-column grid (content | timeline | image)
       that cannot survive a phone width. On mobile it is replaced wholesale
       by `.hiw-mobile`: a vertical numbered timeline where every step is a
       card. The step illustrations are dropped entirely here.
       Each description is clamped to 2 lines and expands when the card
       reaches the middle of the viewport (see home-mobile.js).
    ----------------------------------------------------------------- */
    .klinikplus-home-page .how-it-works-container {
        display: none !important;
    }

    /* Drop the white panel so the white step cards read against the page. */
    .klinikplus-home-page .how-it-works-wrapper {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 10px 0 20px !important;
    }

    .klinikplus-home-page .how-it-works-wrapper .text-center h2 {
        margin-bottom: 28px;
        position: relative;
        padding-bottom: 14px;
    }

    .klinikplus-home-page .how-it-works-wrapper .text-center h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 52px;
        height: 4px;
        border-radius: 4px;
        background: #FF8E6C;
    }

    .klinikplus-home-page .hiw-mobile {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 0 2px;
    }

    .klinikplus-home-page .hiw-mobile-step {
        position: relative;
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 14px;
        align-items: center;
    }

    /* Dashed connector, split above/below the number so it bridges the gap
       between consecutive steps without needing a fixed card height. */
    .klinikplus-home-page .hiw-mobile-step::before,
    .klinikplus-home-page .hiw-mobile-step::after {
        content: '';
        position: absolute;
        left: 21px;
        width: 0;
        border-left: 2px dashed #FFC0A6;
    }

    .klinikplus-home-page .hiw-mobile-step::before {
        top: -18px;
        bottom: calc(50% + 24px);
    }

    .klinikplus-home-page .hiw-mobile-step::after {
        top: calc(50% + 24px);
        bottom: -18px;
    }

    .klinikplus-home-page .hiw-mobile-step:first-child::before,
    .klinikplus-home-page .hiw-mobile-step:last-child::after {
        display: none;
    }

    .klinikplus-home-page .hiw-mobile-num {
        position: relative;
        z-index: 1;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFE8DF;
        color: #FF6B47;
        font-family: Outfit, sans-serif;
        font-size: 0.9375rem;
        font-weight: 700;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .klinikplus-home-page .hiw-mobile-step.is-active .hiw-mobile-num {
        background: #FF8E6C;
        color: #FFF;
    }

    .klinikplus-home-page .hiw-mobile-card {
        background: #FFF;
        border: 1px solid transparent;
        border-radius: 16px;
        padding: 18px 18px 20px;
        box-shadow: 0 6px 22px rgba(20, 15, 45, 0.06);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .klinikplus-home-page .hiw-mobile-step.is-active .hiw-mobile-card {
        border-color: #FFC0A6;
        box-shadow: 0 10px 28px rgba(255, 142, 108, 0.16);
    }

    .klinikplus-home-page .hiw-mobile-title {
        color: #140F2D;
        font-family: Outfit, sans-serif;
        font-size: 1.0625rem;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 8px;
    }

    .klinikplus-home-page .hiw-mobile-desc {
        color: #6B7280;
        font-family: Outfit, sans-serif;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.6;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .klinikplus-home-page .hiw-mobile-step.is-active .hiw-mobile-desc {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }

    /* -----------------------------------------------------------------
       2) SERVICE CARDS
       On desktop the feature list + CTA appear on hover. Touch devices
       have no hover, so a small script toggles `.hover-active` on the card
       that scrolls through the centre of the screen (spotlight reveal).
       These rules just make that class animate the same way hover does.
    ----------------------------------------------------------------- */
    .klinikplus-home-page .service-card-new.hover-active {
        background-color: #140F2D;
        transform: none;
        border-color: #140F2D;
    }

    .klinikplus-home-page .service-card-new.hover-active .service-card-content {
        opacity: 0;
    }

    .klinikplus-home-page .service-card-new.hover-active .service-card-hover {
        opacity: 1;
        visibility: visible;
    }

    /* The reveal panel hides the card heading, so it is repeated at the top of
       the panel and slides up into place as the card is revealed. */
    .klinikplus-home-page .service-card-hover {
        justify-content: flex-start !important;
        padding: 28px 22px !important;
    }

    .klinikplus-home-page .service-card-hover-title {
        display: block;
        color: #FFF;
        font-family: 'Outfit', sans-serif;
        font-size: 1.3125rem;
        font-weight: 600;
        line-height: 1.25;
        margin: 0 0 16px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.35s ease 0.08s, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
    }

    .klinikplus-home-page .service-card-new.hover-active .service-card-hover-title,
    .klinikplus-home-page .service-card-new:hover .service-card-hover-title {
        opacity: 1;
        transform: none;
    }

    .klinikplus-home-page .service-card-hover .service-learn-more {
        margin-top: auto;
    }

    /* Reveal-overlay CTA: centre it and shrink it on phones */
    .klinikplus-home-page .service-card-new .service-learn-more {
        align-self: center !important;
        height: auto !important;
        min-height: 0 !important;
        width: auto !important;
        min-width: 120px;
        padding: 9px 18px !important;
        font-size: 0.8125rem !important;
        gap: 0.35rem !important;
    }

    .klinikplus-home-page .service-card-new .service-learn-more img {
        width: 18px !important;
        height: 18px !important;
    }

    /* On desktop the button text swaps "Join Now" -> "Learn More" on hover.
       The mobile reveal uses `.hover-active` (not :hover), so mirror that
       swap here too. */
    .klinikplus-home-page .service-card-new.hover-active .service-learn-more span {
        opacity: 0;
    }

    .klinikplus-home-page .service-card-new.hover-active .service-learn-more::before {
        opacity: 1;
    }

    .klinikplus-home-page .service-card-new.hover-active .service-learn-more img {
        transform: translateX(5px);
        filter: brightness(0) invert(1);
    }

    /* Compact the whole "Smart Solutions" service card on phones. It was a
       fixed 393px box with 40px padding, a 28px title, a big icon and 18px
       bullets spaced 20px apart. The front (icon+title) and the hover
       (bullets+CTA) are BOTH position:absolute/inset:0, so the height must
       stay fixed – just make it a smaller fixed box and shrink the pieces. */
    .klinikplus-home-page .service-card-new {
        height: 300px !important;
        padding: 22px !important;
        border-radius: 20px !important;
    }

    /* Title was pinned with top:335px (tuned to the old 393px height); pin it
       to the bottom instead so it stays correct in the shorter card. */
    .klinikplus-home-page .service-card-new .service-card-content {
        top: auto !important;
    }

    .klinikplus-home-page .service-card-new .service-card-icon {
        height: 70px !important;
        margin-bottom: 6px !important;
    }

    .klinikplus-home-page .service-card-new .service-card-icon svg,
    .klinikplus-home-page .service-card-new .service-card-icon circle {
        width: 70px !important;
        height: 70px !important;
    }

    .klinikplus-home-page .service-card-new .service-icon-img {
        width: 32px !important;
        height: 32px !important;
    }

    .klinikplus-home-page .service-card-new .service-card-title {
        font-size: 1.375rem !important;   /* 22px */
        margin-bottom: 8px !important;
    }

    .klinikplus-home-page .service-card-new .service-features {
        margin: 0 !important;
    }

    .klinikplus-home-page .service-card-new .service-features li {
        font-size: 0.9375rem !important;  /* 15px */
        margin-bottom: 10px !important;
    }

    /* -----------------------------------------------------------------
       3) SECTION HEADINGS + CONTACT FORM
       The team, testimonials and contact-form headings sat around 24-26px
       and the form inputs were 58px tall with 16px text – all a bit large
       on phones. Trim them down.
    ----------------------------------------------------------------- */
    .klinikplus-home-page .team-section h2,
    .klinikplus-home-page .team-section h3,
    .klinikplus-home-page .testimonials-section h2,
    .klinikplus-home-page .testimonials-section h3 {
        font-size: 1.25rem !important;      /* 20px */
        line-height: 1.3 !important;
    }

    .klinikplus-home-page .contact-section .form-title {
        font-size: 1.1875rem !important;    /* 19px */
        line-height: 1.3 !important;
    }

    .klinikplus-home-page .contact-section .form-subtitle {
        font-size: 0.875rem !important;     /* 14px */
        line-height: 1.4 !important;
    }

    /* Form inputs / textarea – a touch smaller */
    .klinikplus-home-page .contact-section .form-field input,
    .klinikplus-home-page .contact-section .form-field textarea {
        padding: 11px 14px !important;
        font-size: 0.875rem !important;     /* 14px */
    }

    /* Tighten the whole contact section – it was very tall on phones.
       Shrink the left heading/text/info block, the form padding and all
       the vertical gaps. */
    .klinikplus-home-page .contact-section .transform-clinic-container {
        gap: 16px !important;
    }

    .klinikplus-home-page .contact-section .transform-content {
        padding: 6px !important;
    }

    .klinikplus-home-page .contact-section .transform-content h2 {
        font-size: 1.25rem !important;      /* 20px */
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .klinikplus-home-page .contact-section .transform-text {
        font-size: 0.9375rem !important;    /* 15px */
        margin-bottom: 16px !important;
    }

    .klinikplus-home-page .contact-section .contact-info {
        margin-top: 18px !important;
    }

    .klinikplus-home-page .contact-section .contact-info-item {
        margin-bottom: 14px !important;
    }

    .klinikplus-home-page .contact-section .contact-info-content h3 {
        margin-bottom: 0 !important;
        line-height: 1.3 !important;
    }

    .klinikplus-home-page .contact-section .contact-info-content p {
        line-height: 1.3 !important;
    }

    .klinikplus-home-page .contact-section .transform-form {
        padding: 20px 16px !important;
    }

    .klinikplus-home-page .contact-section form {
        gap: 10px !important;
    }

    .klinikplus-home-page .contact-section .form-field .form-label {
        margin-bottom: 4px !important;
    }

    /* On mobile the form is ordered above the copy, so the section's 80px
       tail padding lands right before the footer and — stacked on the
       footer's own top padding and the now-hidden brand block's spacing —
       left a large empty band above "Follow Us". */
    .klinikplus-home-page .contact-section {
        padding-bottom: 20px !important;
    }

    /* -----------------------------------------------------------------
       4) VERTICAL RHYTHM BETWEEN THE LOWER SECTIONS
       Team -> Testimonials -> How it Works -> FAQ -> Contact each carry
       40-130px of desktop tail padding. Stacked on a phone those add up to
       big empty bands between sections, so they are all pulled in.
    ----------------------------------------------------------------- */
    .klinikplus-home-page .team-section {
        padding-bottom: 16px !important;
    }

    .klinikplus-home-page .testimonials-section {
        padding-bottom: 12px !important;
    }

    .klinikplus-home-page .testimonials-section .klinikplus-container > .text-center {
        margin-bottom: 8px !important;
    }

    .klinikplus-home-page .testimonials-slider {
        margin-top: 16px !important;
    }

    /* The author panel is painted with a 310x127 SVG stretched to the block's
       box. On a phone that box is narrower and much taller, so the small tab
       on its top edge skews into a stray triangle. Use a plain rounded panel
       instead and recolour it for the card's dark state. */
    .klinikplus-home-page .testimonial-author-wrapper {
        padding-bottom: 8px !important;
    }

    .klinikplus-home-page .testimonial-author-wrapper:before {
        display: none !important;
    }

    .klinikplus-home-page .testimonial-author {
        align-items: center !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        background-color: #F6F2ED;
        transition: background-color 0.25s ease;
    }

    .klinikplus-home-page .testimonial-card-new:hover .testimonial-author {
        background-color: #403A5F;
    }

    .klinikplus-home-page .author-avatar {
        width: 48px !important;
        height: 48px !important;
        background-color: #E7E0D6;
    }

    .klinikplus-home-page .author-info h4 {
        font-size: 0.9375rem !important;
        margin-bottom: 2px !important;
    }

    .klinikplus-home-page .author-info p {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
    }

    .klinikplus-home-page .how-it-works-section {
        padding-bottom: 16px !important;
    }

    .klinikplus-home-page .how-it-works-wrapper {
        margin-bottom: 0 !important;
    }

    /* The component sets `padding: 0 0 130px` inline, so this needs the
       !important to win. */
    .klinikplus-home-page .faq-section {
        padding-bottom: 24px !important;
    }

    footer > .container {
        padding-top: 12px !important;
    }

    footer .footer-social-link {
        margin-top: 0 !important;
    }
}