/* investor.css — Investor Services overview (EW2027).
   Uses the shared ew-theme.css tokens; the signature element is the rotating
   LifeCycle wheel in the hero (and reused as the Grade card icon). */

.inv-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 20px 72px;
}

/* ---- hero ---- */
.inv-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 0 36px;
    border-bottom: 1px solid var(--border, #d6dce6);
    margin-bottom: 40px;
}

.inv-hero-wheel {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
}

    .inv-hero-wheel .inv-wheel {
        width: 100%;
        height: 100%;
        display: block;
    }

/* the wheel's arrow group spins slowly (via SMIL animateTransform in the SVG);
   the colored quadrants stay put */
.inv-wheel {
    display: block;
    width: 100%;
    height: 100%;
}

.inv-hero-copy {
    min-width: 0;
}

.inv-eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ew-gold, #ddb785);
}

.inv-title {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    font-weight: 800;
    color: var(--text, #050505);
}

.inv-lede {
    margin: 0;
    max-width: 60ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text-muted, #5b6472);
}

/* ---- offering grid ---- */
.inv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 680px) {
    .inv-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .inv-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.inv-card {
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d6dce6);
    border-radius: 14px;
    padding: 26px 24px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.inv-card-link {
    cursor: pointer;
    /* the cards are <a> elements now, so the whole card is one link target and
       keyboard users can tab to it. Undo the default link colour/underline.
       (They were <article onclick> before: unreachable without a mouse.) */
    text-decoration: none;
    color: inherit;
}

    .inv-card-link:focus-visible {
        outline: 2px solid var(--ew-gold, #ddb785);
        outline-offset: 3px;
    }

    .inv-card-link:hover {
        border-color: var(--ew-gold, #ddb785);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    }

.inv-card-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    color: var(--ew-gold, #ddb785);
}

    .inv-card-icon .inv-icon {
        width: 100%;
        height: 100%;
        display: block;
    }

        .inv-card-icon .inv-icon path,
        .inv-card-icon .inv-icon rect,
        .inv-card-icon .inv-icon polygon,
        .inv-card-icon .inv-icon circle {
            fill: currentColor;
        }
        /* Shapes drawn with STROKES set fill="none" deliberately — the blanket rule
   above would turn the screener's magnifier and the guidance mark into solid
   blobs. The attribute selector outranks it, so those keep their outline.
   Strokes already use currentColor, so they still take the gold. */
        .inv-card-icon .inv-icon [fill="none"],
        .inv-card-icon .inv-icon [fill="none"] path,
        .inv-card-icon .inv-icon [fill="none"] circle,
        .inv-card-icon .inv-icon [fill="none"] rect,
        .inv-card-icon .inv-icon [fill="none"] polygon {
            fill: none;
        }

/* the A+ Grade seal fills gold via currentColor (inherited from .inv-card-icon) */

.inv-card-title {
    margin: 0 0 10px;
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text, #050505);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

    .inv-card-title sup {
        font-size: 0.6em;
    }

.inv-card-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted, #5b6472);
}

.inv-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ew-gold, #ddb785);
    border: 1px solid var(--ew-gold, #ddb785);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    /* SMIL animation on the arrows can't be paused via CSS; the pie is static
       and the rotation is slow/subtle, so this is acceptable. */
    .inv-card-link:hover {
        transform: none;
    }
}