/* ============================================================
   Impact / RSE — light "commitment" section (Ad Grants palette).
   Diptych: Social (Google blue) + Environmental (green).
   ============================================================ */
.impact-sec {
    --imp-bg: #FAFAF7;
    --imp-surface: #FDFCFA;
    --imp-border: #EAE7DF;
    --imp-ink: #1A1F2E;
    --imp-text: #2A3040;
    --imp-muted: #6B7080;
    --imp-blue: #4285F4;
    --imp-blue-soft: rgba(66, 133, 244, .10);
    --imp-green: #34A853;
    --imp-green-soft: #E5F4EA;
    position: relative;
    overflow: hidden;
}
/* subtle glow rising from the bottom, in the section's own two offer colours —
   blue (social · left) + green (eco · right), blending in the centre. Echoes the
   title's blue→green highlight and draws the eye to the CTA. */
.impact-sec::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 82%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(82% 96% at 22% 116%, rgba(66, 133, 244, 0.16), transparent 68%),
        radial-gradient(82% 96% at 78% 116%, rgba(52, 168, 83, 0.15), transparent 68%);
}
.impact-sec > .container { position: relative; z-index: 1; }

/* head + CTA sit on the site's dark background; only the cards are light */
.impact-head { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.impact-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--imp-green); margin-bottom: 14px;
}
.impact-title {
    font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; font-weight: 700;
    color: #fff; letter-spacing: -.5px; margin: 0 0 14px;
}
.impact-title__hl {
    background: linear-gradient(100deg, var(--imp-blue), var(--imp-green));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.impact-sub { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .6); margin: 0; }

.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.impact-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--imp-surface); border: 1px solid var(--imp-border); border-radius: 20px;
    padding: 34px 32px 30px; overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    --imp-accent: var(--imp-blue);
}
.impact-card::before {
    content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
    background: var(--imp-accent); opacity: .9;
}
.impact-card--social { --imp-accent: var(--imp-blue); }
.impact-card--eco { --imp-accent: var(--imp-green); }
.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(26, 31, 46, .28);
    border-color: var(--imp-accent);
}

.impact-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.impact-card__glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; color: var(--imp-accent);
}
.impact-card--social .impact-card__glyph { background: var(--imp-blue-soft); }
.impact-card--eco .impact-card__glyph { background: var(--imp-green-soft); }
.impact-card__glyph svg { width: 24px; height: 24px; }
.impact-card__tag {
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--imp-accent);
}
.impact-card__title { font-size: 24px; font-weight: 700; color: var(--imp-ink); letter-spacing: -.3px; margin: 0 0 12px; }
.impact-card__lead { font-size: 15px; line-height: 1.6; color: var(--imp-text); margin: 0 0 18px; }
.impact-card__lead strong { color: var(--imp-ink); font-weight: 700; }

.impact-card__points { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.impact-card__points li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--imp-muted); }
.impact-card__points li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--imp-accent);
}
.impact-card__points li::after {
    content: ""; position: absolute; left: 5px; top: 5.5px; width: 4px; height: 7px;
    border: 1.6px solid #fff; border-top: none; border-left: none; transform: rotate(45deg);
}

.impact-card__cta {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 700; color: var(--imp-accent); text-decoration: none;
}
.impact-card__arrow { width: 18px; height: 18px; transition: transform .25s ease; }
.impact-card__cta:hover .impact-card__arrow { transform: translateX(4px); }
/* keep the CTA coloured on hover — beats the global `a:hover{color:inherit}` (would go white-on-white) */
.impact-card--social .impact-card__cta:hover,
.impact-card--social .impact-card__cta:focus { color: #1A73E8; }
.impact-card--eco .impact-card__cta:hover,
.impact-card--eco .impact-card__cta:focus { color: #2D8F48; }
/* whole Ad Grants card clickable — stretched link over the card (only the social card has a CTA) */
.impact-card--social { cursor: pointer; }
.impact-card--social .impact-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* conversion cap — turns the values section into an action; button = the site's .crv-butn */
.impact-cta { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 56px; }
.impact-cta__line { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, .74); margin: 0 auto 22px; max-width: 560px; }

@media (max-width: 767px) {
    .impact-head { margin-bottom: 38px; }
    .impact-grid { grid-template-columns: 1fr; gap: 18px; }
    .impact-card { padding: 28px 24px 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .impact-card, .impact-card__arrow { transition: none; }
}