/* ============================================================
   HOME — AREAS OF SUPPORT
============================================================ */

.lavSupport {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(224, 210, 235, 0.68) 0,
            rgba(224, 210, 235, 0) 34%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(205, 188, 222, 0.55) 0,
            rgba(205, 188, 222, 0) 36%
        ),
        linear-gradient(
            135deg,
            #fbf8fc 0%,
            #f6f0f8 45%,
            #eee5f3 100%
        );
}


/* ============================================================
   BOTANICAL BACKGROUND — LEFT
============================================================ */

.lavSupport::before {
    content: "";

    position: absolute;
    z-index: -2;

    left: clamp(-150px, -8vw, -70px);
    bottom: clamp(-100px, -5vw, -40px);

    width: clamp(380px, 42vw, 700px);
    aspect-ratio: 4 / 5;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 650'%3E%3Cg fill='none' stroke='%23765d8e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M92 640C112 542 142 450 188 360C224 289 258 224 296 158'/%3E%3Cpath d='M158 640C174 540 205 440 251 342C286 268 316 205 352 130'/%3E%3Cpath d='M210 650C225 554 255 472 300 388C342 310 374 239 402 163'/%3E%3Cpath d='M109 548C80 519 64 488 54 451'/%3E%3Cpath d='M131 500C101 469 87 435 81 400'/%3E%3Cpath d='M156 447C126 417 113 385 109 350'/%3E%3Cpath d='M184 392C153 362 140 330 139 294'/%3E%3Cpath d='M213 337C182 306 170 275 171 237'/%3E%3Cpath d='M242 282C214 254 203 224 205 189'/%3E%3Cpath d='M274 220C248 194 238 166 241 135'/%3E%3Cpath d='M175 544C212 512 237 477 250 437'/%3E%3Cpath d='M194 492C231 460 255 425 268 385'/%3E%3Cpath d='M217 438C252 408 275 374 289 336'/%3E%3Cpath d='M242 382C277 351 299 318 312 280'/%3E%3Cpath d='M270 324C304 294 325 261 338 225'/%3E%3Cpath d='M298 266C330 238 349 208 362 175'/%3E%3C/g%3E%3Cg fill='%239c7fb4' opacity='.36'%3E%3Cellipse cx='52' cy='443' rx='8' ry='16' transform='rotate(-32 52 443)'/%3E%3Cellipse cx='76' cy='401' rx='8' ry='16' transform='rotate(-35 76 401)'/%3E%3Cellipse cx='103' cy='350' rx='8' ry='16' transform='rotate(-36 103 350)'/%3E%3Cellipse cx='134' cy='294' rx='8' ry='16' transform='rotate(-34 134 294)'/%3E%3Cellipse cx='168' cy='237' rx='8' ry='16' transform='rotate(-31 168 237)'/%3E%3Cellipse cx='202' cy='188' rx='8' ry='16' transform='rotate(-28 202 188)'/%3E%3Cellipse cx='239' cy='134' rx='8' ry='16' transform='rotate(-24 239 134)'/%3E%3Cellipse cx='250' cy='438' rx='8' ry='16' transform='rotate(42 250 438)'/%3E%3Cellipse cx='269' cy='385' rx='8' ry='16' transform='rotate(40 269 385)'/%3E%3Cellipse cx='290' cy='336' rx='8' ry='16' transform='rotate(39 290 336)'/%3E%3Cellipse cx='313' cy='280' rx='8' ry='16' transform='rotate(37 313 280)'/%3E%3Cellipse cx='338' cy='225' rx='8' ry='16' transform='rotate(35 338 225)'/%3E%3Cellipse cx='362' cy='175' rx='8' ry='16' transform='rotate(31 362 175)'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;

    opacity: 0.58;

    pointer-events: none;
}


/* ============================================================
   BOTANICAL BACKGROUND — RIGHT
============================================================ */

.lavSupport::after {
    content: "";

    position: absolute;
    z-index: -2;

    top: clamp(-110px, -5vw, -40px);
    right: clamp(-160px, -8vw, -70px);

    width: clamp(360px, 38vw, 620px);
    aspect-ratio: 4 / 5;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 650'%3E%3Cg fill='none' stroke='%236f5688' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M410 648C390 548 360 452 315 360C278 285 245 218 204 145'/%3E%3Cpath d='M350 650C336 551 306 452 260 352C226 278 198 217 163 142'/%3E%3Cpath d='M300 648C287 557 257 471 215 390C176 316 144 246 115 174'/%3E%3Cpath d='M397 552C427 521 442 489 452 451'/%3E%3Cpath d='M375 502C405 472 419 438 425 403'/%3E%3Cpath d='M349 450C379 421 391 388 395 353'/%3E%3Cpath d='M321 396C351 366 364 334 365 299'/%3E%3Cpath d='M292 341C322 311 334 278 333 243'/%3E%3Cpath d='M264 286C292 258 303 228 301 193'/%3E%3Cpath d='M232 224C258 198 269 170 266 139'/%3E%3Cpath d='M342 546C305 515 280 480 267 440'/%3E%3Cpath d='M323 496C286 463 262 429 249 389'/%3E%3Cpath d='M300 442C265 411 242 378 228 340'/%3E%3Cpath d='M275 386C240 356 218 322 205 284'/%3E%3Cpath d='M247 328C213 298 192 265 179 229'/%3E%3Cpath d='M219 270C187 242 168 212 155 179'/%3E%3C/g%3E%3Cg fill='%239a7db3' opacity='.34'%3E%3Cellipse cx='452' cy='451' rx='8' ry='16' transform='rotate(32 452 451)'/%3E%3Cellipse cx='426' cy='403' rx='8' ry='16' transform='rotate(34 426 403)'/%3E%3Cellipse cx='396' cy='353' rx='8' ry='16' transform='rotate(36 396 353)'/%3E%3Cellipse cx='365' cy='299' rx='8' ry='16' transform='rotate(34 365 299)'/%3E%3Cellipse cx='334' cy='243' rx='8' ry='16' transform='rotate(31 334 243)'/%3E%3Cellipse cx='302' cy='193' rx='8' ry='16' transform='rotate(28 302 193)'/%3E%3Cellipse cx='266' cy='139' rx='8' ry='16' transform='rotate(24 266 139)'/%3E%3Cellipse cx='267' cy='440' rx='8' ry='16' transform='rotate(-42 267 440)'/%3E%3Cellipse cx='248' cy='389' rx='8' ry='16' transform='rotate(-40 248 389)'/%3E%3Cellipse cx='227' cy='340' rx='8' ry='16' transform='rotate(-38 227 340)'/%3E%3Cellipse cx='204' cy='284' rx='8' ry='16' transform='rotate(-36 204 284)'/%3E%3Cellipse cx='179' cy='229' rx='8' ry='16' transform='rotate(-34 179 229)'/%3E%3Cellipse cx='155' cy='179' rx='8' ry='16' transform='rotate(-31 155 179)'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;

    opacity: 0.5;

    transform: rotate(2deg);

    pointer-events: none;
}


/* ============================================================
   AMBIENT VEIL
============================================================ */

.lavSupport .container {
    position: relative;
    z-index: 2;
}

.lavSupport .container::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: clamp(-30px, -3vw, -10px);

    border: 1px solid rgba(111, 86, 136, 0.08);
    border-radius: clamp(28px, 4vw, 54px);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.54),
            rgba(255, 255, 255, 0.2)
        );

    box-shadow:
        0 45px 110px rgba(83, 61, 104, 0.08);

    backdrop-filter: blur(2px);
}


/* ============================================================
   HEADER
============================================================ */

.lavSupportHeader {
    max-width: 820px;

    margin: 0 auto clamp(58px, 7vw, 92px);

    text-align: center;
}

.lavSupportHeader .section-title {
    max-width: 760px;

    margin-inline: auto;
    margin-top: 18px;
}

.lavSupportHeader .section-description {
    max-width: 650px;

    margin-inline: auto;
    margin-top: 24px;
}


/* ============================================================
   GRID
============================================================ */

.lavSupportGrid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin: 0;
    padding: 0;

    border-top:
        1px solid
        rgba(92, 68, 113, 0.14);

    border-left:
        1px solid
        rgba(92, 68, 113, 0.14);

    list-style: none;
}


/* ============================================================
   ITEM
============================================================ */

.lavSupportItem {
    position: relative;

    min-height: 260px;

    padding:
        clamp(30px, 3vw, 46px)
        clamp(26px, 3vw, 42px);

    border-right:
        1px solid
        rgba(92, 68, 113, 0.14);

    border-bottom:
        1px solid
        rgba(92, 68, 113, 0.14);

    background:
        rgba(255, 255, 255, 0.18);

    transition:
        background-color 350ms ease,
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms ease;
}

.lavSupportItem::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #765d8e,
            #b49ac7
        );

    transition:
        width 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lavSupportItem:hover {
    z-index: 2;

    background:
        rgba(255, 255, 255, 0.6);

    transform:
        translateY(-6px);

    box-shadow:
        0 24px 60px rgba(73, 52, 94, 0.1);
}

.lavSupportItem:hover::before {
    width: 74px;
}


/* ============================================================
   NUMBER
============================================================ */

.lavSupportNumber {
    display: block;

    margin-bottom: 25px;

    color:
        rgba(102, 77, 124, 0.58);

    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}


/* ============================================================
   TITLE
============================================================ */

.lavSupportItem h3 {
    max-width: 300px;

    margin: 0 0 17px;

    color: var(--lavender-ink);

    font-family:
        "Newsreader",
        Georgia,
        serif;

    font-size:
        clamp(1.35rem, 1.6vw, 1.72rem);

    font-weight: 500;
    line-height: 1.2;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.lavSupportItem p {
    max-width: 320px;

    margin: 0;

    color: var(--lavender-muted);

    font-size: 0.98rem;
    line-height: 1.8;
}


/* ============================================================
   ACTION
============================================================ */

.lavSupportAction {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: clamp(18px, 3vw, 34px);

    margin-top: clamp(48px, 6vw, 74px);
    padding-top: clamp(30px, 4vw, 42px);

    border-top:
        1px solid
        rgba(92, 68, 113, 0.12);

    text-align: center;
}

.lavSupportAction p {
    margin: 0;

    color: var(--lavender-ink);

    font-family:
        "Newsreader",
        Georgia,
        serif;

    font-size:
        clamp(1.2rem, 2vw, 1.55rem);

    font-style: italic;
    line-height: 1.4;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    .lavSupportGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .lavSupport::before {
        left: -220px;

        opacity: 0.38;
    }

    .lavSupport::after {
        right: -220px;

        opacity: 0.34;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .lavSupport {
        background:
            radial-gradient(
                circle at 15% 12%,
                rgba(224, 210, 235, 0.58),
                transparent 34%
            ),
            linear-gradient(
                160deg,
                #fbf8fc 0%,
                #f0e7f4 100%
            );
    }

    .lavSupportHeader {
        margin-bottom: 48px;

        text-align: left;
    }

    .lavSupportHeader .section-title,
    .lavSupportHeader .section-description {
        margin-inline: 0;
    }

    .lavSupportGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lavSupportItem {
        min-height: auto;

        padding:
            30px
            24px;
    }

    .lavSupportAction {
        align-items: flex-start;
        flex-direction: column;

        text-align: left;
    }

    .lavSupport::before {
        left: -230px;
        bottom: -50px;

        width: 470px;

        opacity: 0.3;
    }

    .lavSupport::after {
        top: -80px;
        right: -240px;

        width: 460px;

        opacity: 0.25;
    }

    .lavSupport .container::before {
        inset: -12px;

        border-radius: 28px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .lavSupportItem {
        transition: none;
    }

    .lavSupportItem:hover {
        transform: none;
    }

}