/* ============================================================
   Handyman Services Section — services-section.css
   ============================================================ */

:root {
    --hs-blue: #1E3A8A;
    --hs-blue-dark: #132a67;
    --hs-blue-light: #3155b7;
    --hs-orange: #F97316;
    --hs-orange-dark: #ea6507;
    --hs-bg: #f4f7ff;
    --hs-surface: rgba(255,255,255,0.78);
    --hs-text-dark: #0f1c3f;
    --hs-text-mid: #53607f;
    --hs-border: rgba(30,58,138,0.12);
    --hs-r-card: 26px;
    --hs-r-icon: 18px;
    --hs-r-pill: 999px;
    --hs-shadow: 0 18px 45px rgba(30,58,138,0.08);
    --hs-shadow-hover: 0 28px 70px rgba(30,58,138,0.16);
}

/* Elementor neutralisation */
.elementor-widget-shortcode .elementor-widget-container,
.elementor-widget-text-editor .elementor-widget-container {
    line-height: 1 !important;
    font-size: 0 !important;
}

.elementor-widget-shortcode .elementor-widget-container .hs-section,
.elementor-widget-text-editor .elementor-widget-container .hs-section {
    font-size: 1rem !important;
}

.elementor-widget-shortcode .elementor-widget-container > p,
.elementor-widget-text-editor .elementor-widget-container > p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
.e-con-inner {
    padding: 0 !important;
}

.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
}

/* Reset */
.hs-section,
.hs-section *,
.hs-section *::before,
.hs-section *::after {
    box-sizing: border-box !important;
}

.hs-section * {
    margin: 0;
    padding: 0;
}

/* Section */
.hs-section {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;

    padding: 86px 24px 96px !important;

    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(249,115,22,0.12) 0%, transparent 28%),
        radial-gradient(circle at 90% 16%, rgba(30,58,138,0.14) 0%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f4f7ff 48%, #edf3ff 100%) !important;

    overflow: hidden !important;
}

/* Background grid */
.hs-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background-image:
        linear-gradient(rgba(30,58,138,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,58,138,0.045) 1px, transparent 1px);

    background-size: 58px 58px;
    pointer-events: none;
}

/* Floating blur shape */
.hs-section::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -240px;
    bottom: -300px;
    z-index: -1;

    background: radial-gradient(circle, rgba(249,115,22,0.18) 0%, rgba(249,115,22,0.08) 36%, transparent 72%);
    pointer-events: none;
}

.hs-section__inner {
    max-width: 1220px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

/* Header */
.hs-header {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto 58px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}

.hs-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    background: rgba(249,115,22,0.10) !important;
    color: var(--hs-orange) !important;

    border: 1px solid rgba(249,115,22,0.24) !important;
    border-radius: var(--hs-r-pill) !important;

    padding: 8px 18px !important;

    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.hs-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hs-orange);
    box-shadow: 0 0 0 6px rgba(249,115,22,0.14);
}

.hs-heading {
    color: var(--hs-text-dark) !important;

    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;

    font-style: normal !important;
}

.hs-heading__highlight {
    color: var(--hs-orange) !important;
    font-style: italic !important;
}

.hs-subtext {
    max-width: 560px !important;

    color: var(--hs-text-mid) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    font-weight: 450 !important;
}

/* Grid */
.hs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px !important;
    list-style: none !important;
}

/* Card */
.hs-card {
    position: relative !important;
    overflow: hidden !important;

    min-height: 330px !important;
    padding: 30px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;

    background:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.74) 100%) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    border: 1px solid rgba(255,255,255,0.72) !important;
    border-radius: var(--hs-r-card) !important;

    box-shadow:
        var(--hs-shadow),
        inset 0 1px 0 rgba(255,255,255,0.8) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease !important;

    text-align: left !important;
}

/* Gradient border glow */
.hs-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 1px !important;
    border-radius: inherit !important;

    background: linear-gradient(
        135deg,
        rgba(30,58,138,0.35),
        rgba(249,115,22,0.42),
        rgba(255,255,255,0.18)
    ) !important;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;

    opacity: 0 !important;
    transition: opacity 0.28s ease !important;
    pointer-events: none !important;
}

/* Big faded icon background */
.hs-card::after {
    content: "" !important;
    position: absolute !important;
    right: -44px !important;
    bottom: -44px !important;
    width: 150px !important;
    height: 150px !important;

    background: radial-gradient(circle, rgba(30,58,138,0.10) 0%, transparent 68%) !important;
    border-radius: 50% !important;

    transition: transform 0.28s ease, opacity 0.28s ease !important;
    pointer-events: none !important;
}

.hs-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(249,115,22,0.26) !important;

    box-shadow:
        var(--hs-shadow-hover),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.hs-card:hover::before {
    opacity: 1 !important;
}

.hs-card:hover::after {
    transform: scale(1.16) !important;
    opacity: 0.9 !important;
}

/* Icon */
.hs-card__icon-wrap {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;

    border-radius: 20px !important;

    background:
        linear-gradient(135deg, rgba(30,58,138,0.10), rgba(249,115,22,0.10)) !important;

    color: var(--hs-blue) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;

    transition:
        transform 0.28s ease,
        color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease !important;
}

.hs-card__icon-wrap svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
}

.hs-card:hover .hs-card__icon-wrap {
    transform: translateY(-3px) rotate(-4deg) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--hs-blue), var(--hs-orange)) !important;
    box-shadow: 0 14px 34px rgba(30,58,138,0.24) !important;
}

/* Content */
.hs-card__title {
    position: relative !important;
    z-index: 2 !important;

    color: var(--hs-text-dark) !important;
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
}

.hs-card__desc {
    position: relative !important;
    z-index: 2 !important;

    color: var(--hs-text-mid) !important;
    font-size: 0.94rem !important;
    line-height: 1.7 !important;
    font-weight: 450 !important;

    flex: 1 !important;
}

/* CTA */
.hs-card__cta {
    position: relative !important;
    z-index: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: fit-content !important;
    margin-top: 8px !important;

    color: var(--hs-blue) !important;
    text-decoration: none !important;

    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    transition: color 0.22s ease, gap 0.22s ease !important;
}

.hs-card__cta:hover {
    color: var(--hs-orange) !important;
    gap: 15px !important;
    text-decoration: none !important;
}

.hs-card__arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    border-radius: 50% !important;

    background: rgba(30,58,138,0.08) !important;
    color: var(--hs-blue) !important;

    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease !important;
}

.hs-card__arrow svg {
    width: 16px !important;
    height: 16px !important;
}

.hs-card__cta:hover .hs-card__arrow {
    background: var(--hs-orange) !important;
    color: #ffffff !important;
    transform: rotate(-45deg) !important;
}

/* Individual card tint */
.hs-card--electrical .hs-card__icon-wrap {
    background: linear-gradient(135deg, rgba(30,58,138,0.10), rgba(249,115,22,0.12)) !important;
}

.hs-card--plumbing .hs-card__icon-wrap {
    background: linear-gradient(135deg, rgba(30,58,138,0.12), rgba(14,165,233,0.12)) !important;
}

.hs-card--kitchens .hs-card__icon-wrap {
    background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(30,58,138,0.08)) !important;
}

.hs-card--bathrooms .hs-card__icon-wrap {
    background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(249,115,22,0.12)) !important;
}

.hs-card--flooring .hs-card__icon-wrap {
    background: linear-gradient(135deg, rgba(120,53,15,0.10), rgba(249,115,22,0.12)) !important;
}

.hs-card--commercial .hs-card__icon-wrap {
    background: linear-gradient(135deg, rgba(30,58,138,0.14), rgba(99,102,241,0.10)) !important;
}

.hs-card__corner-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 28px;
    height: 28px;
    color: var(--hs-blue);
    opacity: 0.15;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.hs-card__corner-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hover Animation Effect */
.hs-card:hover .hs-card__corner-icon {
    opacity: 0.5;
    transform: translate(6px, -6px) scale(1.1);
    color: var(--hs-orange);
}

/* Ensure Title padding to avoid overlap */
.hs-card__title {
    padding-right: 35px;
}

/* Ensure the card container remains relative for the absolute icon */
.hs-card {
    position: relative !important;
    /* ... keep your other card styles ... */
}

/* ============================================================
   EXISTING STYLES (Retain these for structural integrity)
   ============================================================ */

.hs-section {
    position: relative !important;
    padding: 86px 24px 96px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 48%, #edf3ff 100%) !important;
    overflow: hidden !important;
}

.hs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px !important;
}

.hs-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(249,115,22,0.26) !important;
    box-shadow: var(--hs-shadow-hover), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 580px) {
    .hs-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-card, .hs-card__corner-icon { transition: none !important; }
}

/* Responsive */
@media (max-width: 1024px) {
    .hs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .hs-section {
        padding: 72px 20px 84px !important;
    }

    .hs-header {
        margin-bottom: 46px !important;
    }
}

@media (max-width: 580px) {
    .hs-section {
        padding: 60px 16px 72px !important;
    }

    .hs-header {
        margin-bottom: 36px !important;
    }

    .hs-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .hs-card {
        min-height: auto !important;
        padding: 28px 24px !important;
        border-radius: 22px !important;
    }

    .hs-heading {
        font-size: clamp(1.8rem, 8vw, 2.45rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-card,
    .hs-card::before,
    .hs-card::after,
    .hs-card__icon-wrap,
    .hs-card__cta,
    .hs-card__arrow {
        transition: none !important;
    }
}


/* Ensure mobile overrides are applied last */
@media screen and (max-width: 580px) {
    .hs-card__icon-wrap {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        border-radius: 16px !important;
    }

    .hs-card__icon-wrap svg {
        width: 24px !important;
        height: 24px !important;
    }

    .hs-card__corner-icon {
        width: 20px !important;
        height: 20px !important;
        top: 15px !important;
        right: 15px !important;
    }
}