/*
 * Warm stone refinement — 3 November 2026.
 * This deliberately sits after home.css so the previous presentation remains
 * intact and can be restored by removing its link from Features/Home/Index.cshtml.
 */

.impact-home {
    --stone-ivory: #f7f1e8;
    --stone-limestone: #e7dccd;
    --stone-mushroom: #c8b8a3;
    --stone-bronze: #927454;
    --stone-espresso: #30261e;
    --stone-hairline: rgba(112, 88, 63, .24);
    overflow-x: clip;
}

/* A quiet limestone field keeps the real website work as the hero image. */
.impact-home .impact-hero {
    border-bottom: 1px solid var(--stone-hairline);
    background:
        radial-gradient(ellipse at 80% 48%, rgba(177, 145, 104, .24), transparent 42%),
        var(--stone-ivory);
}

.impact-home .impact-hero::before { content: none; }

.impact-home .impact-device-scene::before {
    content: none;
}

.impact-home .impact-device-scene {
    background: radial-gradient(ellipse at 48% 83%, rgba(103, 76, 50, .13), transparent 53%);
}

.impact-home .impact-device-scene::after {
    left: 8%;
    right: 6%;
    bottom: 3%;
    height: 8%;
    background: radial-gradient(ellipse, rgba(61, 43, 28, .22), transparent 68%);
    filter: blur(13px);
}

.impact-home .impact-laptop {
    width: 84%;
    left: 5%;
    top: 14%;
    transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg) rotateZ(-1deg);
}

.impact-home .impact-laptop-lid {
    padding: 7px 6px 6px;
    border: 1px solid #786f63;
    border-radius: 13px 13px 4px 4px;
    background: linear-gradient(145deg, #3b3834, #201e1b);
    box-shadow:
        0 24px 42px rgba(53, 37, 24, .20),
        inset 0 0 0 1px rgba(255, 255, 255, .10);
}

.impact-home .impact-laptop-lid img { border-color: #28231f; }

.impact-home .impact-laptop-base {
    width: 106%;
    left: -3%;
    height: 9px;
    background: linear-gradient(#ded7cd 0%, #8c857b 42%, #cbc4b9 49%, #756e65 100%);
    box-shadow: 0 8px 13px rgba(55, 39, 26, .18);
}

.impact-home .impact-phone {
    width: 18%;
    right: 4%;
    bottom: 8%;
    padding: 4px;
    border: 1px solid #786f63;
    border-radius: 20px;
    background: linear-gradient(145deg, #393632, #211f1c);
    transform: rotate(1deg);
    box-shadow: 0 20px 34px rgba(53, 37, 24, .24);
}

.impact-home .impact-phone img { border-radius: 15px; }

.impact-home .impact-phone-camera {
    top: 7px;
    height: 5px;
}

.impact-home .impact-copy::before {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin-bottom: 28px;
    background: var(--stone-bronze);
}

.impact-home .impact-copy .eyebrow { margin-bottom: 18px; }

/* The sector register becomes a deliberate material transition under the hero. */
.impact-home .impact-clients {
    width: 100%;
    max-width: none;
    padding: 25px 5% 27px;
    background: #e9dfd1;
    border-bottom: 1px solid var(--stone-hairline);
}

.impact-home .impact-sector-list li {
    position: relative;
    padding-left: 17px;
    color: #665442;
}

.impact-home .impact-sector-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border: 1px solid var(--stone-bronze);
}

/* Project imagery is presented on one consistent limestone plinth. */
.impact-home .impact-work { padding-block: 72px 76px; }

.impact-home .impact-project-stage {
    position: relative;
    border: 1px solid rgba(112, 88, 63, .18);
    background:
        linear-gradient(125deg, rgba(255, 255, 255, .42), transparent 38%),
        linear-gradient(150deg, #ece3d6, #d8c7b1);
    box-shadow: inset 0 1px rgba(255, 255, 255, .56);
}

.impact-home .impact-project-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(91, 68, 47, .055) 50%, transparent 50.2%),
        linear-gradient(0deg, transparent 49.8%, rgba(255, 255, 255, .12) 50%, transparent 50.2%);
}

.impact-home .impact-mini-screen {
    border-color: #8c7a66;
    box-shadow: 0 14px 30px rgba(48, 38, 30, .20);
}

.impact-home .impact-project-register {
    border-top-color: var(--stone-bronze);
    color: #76614c;
}

.impact-home .impact-project-caption {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--stone-hairline);
}

/* The standard remains the visual anchor, with restrained bronze detailing. */
.impact-home .impact-standard {
    border-block: 1px solid rgba(191, 159, 119, .52);
    background:
        radial-gradient(ellipse at 88% 26%, rgba(151, 115, 73, .24), transparent 40%),
        linear-gradient(118deg, #2a211a 0 54%, #3a2c21 100%);
}

.impact-home .impact-standard::before {
    inset: 0;
    opacity: .22;
    background:
        linear-gradient(90deg, transparent 0 72%, rgba(213, 184, 145, .16) 72% 72.08%, transparent 72.08%),
        repeating-linear-gradient(118deg, transparent 0 140px, rgba(189, 161, 123, .12) 141px 142px);
}

.impact-home .impact-principles li { border-top-color: rgba(207, 178, 139, .58); }

/* Services use bronze numbering and rules, not card containers. */
.impact-home .impact-services {
    position: relative;
    padding-block: 70px 74px;
}

.impact-home .impact-services::before {
    content: "";
    position: absolute;
    inset: 0 calc((100vw - 100%) / -2);
    z-index: -1;
    background: linear-gradient(180deg, #f8f3eb, #f2eadf);
    border-bottom: 1px solid var(--stone-hairline);
}

.impact-home .impact-services article { border-left-color: rgba(146, 116, 84, .38); }

.impact-home .impact-service-number {
    font-size: 28px;
    line-height: 1;
    color: rgba(146, 116, 84, .64);
    letter-spacing: -.03em;
}

.impact-home .impact-local {
    margin-block: 22px;
    padding-block: 52px 56px;
    border-top-color: var(--stone-bronze);
    border-bottom: 1px solid var(--stone-hairline);
}

.impact-home .impact-local > div:first-child {
    position: relative;
    padding-left: 26px;
}

.impact-home .impact-local > div:first-child::before {
    content: "";
    position: absolute;
    inset: 2px auto 2px 0;
    width: 3px;
    background: var(--stone-bronze);
}

@media (max-width: 1100px) {
    .impact-home .impact-service-number { font-size: 24px; }
    .impact-home .impact-laptop { width: 86%; left: 3%; top: 15%; }
    .impact-home .impact-phone { width: 19%; right: 2%; bottom: 8%; }
}

@media (max-width: 700px) {
    .impact-home .impact-hero {
        background:
            radial-gradient(ellipse at 75% 76%, rgba(177, 145, 104, .20), transparent 35%),
            var(--stone-ivory);
    }

    .impact-home .impact-copy::before { width: 38px; margin-bottom: 22px; }
    .impact-home .impact-device-scene { margin-left: 0; }
    .impact-home .impact-laptop { width: 84%; left: 3%; top: 16%; }
    .impact-home .impact-laptop-lid { padding: 5px 4px 4px; border-radius: 8px 8px 3px 3px; }
    .impact-home .impact-laptop-base { height: 6px; }
    .impact-home .impact-phone { width: 19%; right: 2%; bottom: 7%; padding: 3px; border-radius: 13px; }
    .impact-home .impact-phone img { border-radius: 10px; }
    .impact-home .impact-phone-camera { top: 5px; height: 4px; }
    .impact-home .impact-clients { padding-inline: 5.5%; }
    .impact-home .impact-work { padding-block: 48px 52px; }
    .impact-home .impact-project-caption { padding-bottom: 18px; }
    .impact-home .impact-services { padding-block: 46px 50px; }
    .impact-home .impact-service-number { font-size: 20px; }
    .impact-home .impact-local { margin-block: 0; padding-block: 40px 44px; }
    .impact-home .impact-local > div:first-child { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .impact-home .impact-project-stage,
    .impact-home .impact-mini-screen { box-shadow: none; }
}