/* ============================================================
   INVESTOR GRIEVANCE PAGE — DESIGN SYSTEM (ig- prefix)
   Signature: the same trending "bento" language as the Auditors
   page — bold gradient identity tiles with blurred glow blobs,
   crisp elevated info tiles on CSS Grid for exact alignment,
   repeated per contact group. Single-hue bright green, white
   canvas, no numbering.
   ============================================================ */

:root {
    --ig-g-900: #06281C;
    --ig-g-800: #0A3B29;
    --ig-g-700: #0E5A3B;
    --ig-g-600: #128F5C;
    --ig-g-500: #17B26A;
    --ig-g-400: #33D687;
    --ig-g-300: #7CEBB2;
    --ig-g-200: #BFF6DA;
    --ig-g-100: #EDFDF5;
    --ig-ink: var(--tf-black, #0A0A0A);
    --ig-grey: var(--tf-grey, #6f7a75);
    --ig-line: rgba(6, 40, 28, .10);
    --ig-radius: 26px;
}

.ig-page { overflow-x: hidden; }

.ig-page {
    --ab-teal: var(--ig-g-500);
    --ab-teal-dark: var(--ig-g-700);
    --ab-teal-glow: rgba(23, 178, 106, .32);
}

.ig-page .ab-banner__title span {
    background: linear-gradient(90deg, var(--ig-g-400), var(--ig-g-600));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ig-page .ab-banner__orb--2 {
    background: radial-gradient(circle, rgba(124, 235, 178, .18) 0%, transparent 72%);
}

/* ============================================================
   0. SECTION FRAME — white canvas
   ============================================================ */
.ig-section {
    position: relative;
    padding: 60px 0 60px;
    background: #ffffff;
}

.ig-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.ig-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.ig-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ig-g-600);
    margin-bottom: 16px;
}

.ig-eyebrow::before,
.ig-eyebrow::after {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--ig-g-500);
    border-radius: 2px;
}

.ig-head h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ig-ink);
    margin: 0;
}

.ig-head h2 span {
    background: linear-gradient(90deg, var(--ig-g-600), var(--ig-g-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   1. GROUP — one per contact (Registrar, Company Secretary...)
   ============================================================ */
.ig-group + .ig-group {
    margin-top: 46px;
    padding-top: 46px;
    border-top: 1px solid var(--ig-line);
}

.ig-group__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ig-g-700);
    background: var(--ig-g-100);
    border: 1px solid var(--ig-g-200);
    border-radius: 30px;
    padding: 8px 16px;
    margin-bottom: 22px;
}

.ig-group__label i { color: var(--ig-g-500); }

/* ============================================================
   2. BENTO GRID — CSS Grid for exact alignment
   ============================================================ */
.ig-bento {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "intro location"
        "intro phone";
    gap: 22px;
}

@media (max-width: 900px) {
    .ig-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "intro"
            "location"
            "phone";
    }
}

/* Shared tile base */
.ig-tile {
    position: relative;
    border-radius: var(--ig-radius);
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* min-height: 168px; */
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s ease, border-color .45s ease;
}

/* ---------- Intro tile — bold gradient ---------- */
.ig-tile--intro {
    grid-area: intro;
    background: linear-gradient(155deg, var(--ig-g-600), var(--ig-g-800) 78%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    justify-content: space-between;
}

.ig-tile--intro::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    top: -90px;
    right: -80px;
    background: radial-gradient(circle, rgba(124,235,178,.4) 0%, transparent 70%);
    filter: blur(6px);
    z-index: -1;
    transition: transform .6s ease;
}

.ig-tile--intro::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    bottom: -100px;
    left: -60px;
    background: radial-gradient(circle, rgba(51,214,135,.35) 0%, transparent 70%);
    filter: blur(6px);
    z-index: -1;
}

.ig-tile--intro:hover::before {
    transform: translate(-10px, 10px) scale(1.08);
}

.ig-tile--intro:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(6, 40, 28, .3);
}

.ig-tile__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 22px;
    backdrop-filter: blur(4px);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.ig-tile--intro:hover .ig-tile__icon {
    transform: rotate(-8deg) scale(1.06);
}

.ig-tile--intro .ig-tile__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ig-g-200);
    margin-bottom: 10px;
}

.ig-tile--intro h3 {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 20px;
    color: #fff;
}

.ig-tile--intro .ig-tile__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 30px;
    padding: 8px 16px;
}

.ig-tile--intro .ig-tile__badge i { color: var(--ig-g-300); }

/* ---------- Info tiles — clean elevated white ---------- */
.ig-tile--info {
    background: #fff;
    border: 1px solid var(--ig-line);
    box-shadow: 0 6px 24px rgba(6, 40, 28, .04);
    flex-direction: row;
    align-items: center;
    gap: 22px;
    text-align: left;
}

.ig-tile--info:hover {
    transform: translateY(-6px);
    border-color: var(--ig-g-300);
    box-shadow: 0 22px 46px rgba(23, 178, 106, .14);
}

.ig-tile--location { grid-area: location; }
.ig-tile--phone { grid-area: phone; }

.ig-tile--info .ig-tile__icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--ig-g-100);
    color: var(--ig-g-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .4s ease, color .4s ease;
}

.ig-tile--info:hover .ig-tile__icon {
    transform: rotate(-8deg) scale(1.08);
    background: var(--ig-g-600);
    color: #fff;
}

.ig-tile--info .ig-tile__body h4 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ig-ink);
    margin: 0 0 8px;
}

.ig-tile--info .ig-tile__body p {
    font-size: .93rem;
    line-height: 1.7;
    color: var(--ig-grey);
    margin: 0;
}

.ig-tile--info a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--ig-g-500), var(--ig-g-500));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s ease, color .35s ease;
}

.ig-tile--info a:hover {
    color: var(--ig-g-700);
    background-size: 100% 1px;
}

@media (max-width: 575px) {
    .ig-tile--info { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================================================
   3. SCROLL-REVEAL HOOK
   ============================================================ */
.ig-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
    transition-delay: var(--delay, 0s);
}

.ig-animate.ig-visible {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 767px) {
    .ig-tile--intro h3{
        font-size: 18px;
    }
}