/* ═════════════════════════════════════════════════════════════════════
   SPRINT 4 — BRAND UNIFICATION OVERRIDE (2026-05-15)
   Goal: make the new sections (cluster strip, how-it-works, case studies,
   cluster pages) look like ONE coherent brand with the rest of the site.

   What we change:
   - REMOVE the tech-blue + bio-violet accents (they don't appear anywhere
     else on the site → visually confusing).
   - UNIFY to the existing brand green (#16A34A / #15803D) + neutral grays.
   - SOFTEN cards, badges, gradients to match the existing trust-badges,
     product cards, and footer treatments.
   - KEEP all the NEW copy (AI, IoT, Life Sciences messaging) — only the
     visual treatment changes.
   ═════════════════════════════════════════════════════════════════════ */

/* ───── 1. HERO PILL EYEBROW — unify to brand green ───── */
.mh-hero__eyebrow--pill {
    background: rgba(22, 163, 74, 0.10) !important;
    border-color: rgba(22, 163, 74, 0.18) !important;
    color: #0f172a !important;
}
.mh-pill-dot--ai,
.mh-pill-dot--iot,
.mh-pill-dot--life {
    background: #16A34A !important;
    box-shadow: 0 0 6px rgba(22,163,74,.5) !important;
}

/* ───── 2. CLUSTER STRIP SECTION — flatten + unify ───── */
.mh-clusters {
    background: #fff !important; /* remove radial gradient mash */
}
.mh-clusters__eyebrow {
    background: rgba(22, 163, 74, 0.10) !important;
    color: #15803D !important;
}
.mh-clusters__title {
    color: #0f172a !important;
}

/* All cluster cards use brand green, distinguished only by icon */
.mh-cluster {
    border: 1px solid #E2E8F0 !important;
}
.mh-cluster::before { display: none !important; } /* kill the colored gradient overlay */
.mh-cluster:hover {
    border-color: #16A34A !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
}
.mh-cluster--schools,
.mh-cluster--homes,
.mh-cluster--hotels,
.mh-cluster--farms {
    --cluster-color: #16A34A !important;
}
.mh-cluster__ai-badge {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #15803D !important;
    font-weight: 700;
}
.mh-cluster__title  { color: #0f172a !important; }
.mh-cluster__ai-line { color: #16A34A !important; }

/* ───── 3. HOW-IT-WORKS QUARTET — soft brand-only treatment ───── */
.mh-how {
    background: #fafafa !important;
}
.mh-how__eyebrow {
    background: rgba(22, 163, 74, 0.10) !important;
    color: #15803D !important;
}
.mh-how__title {
    color: #0f172a !important;
}
.mh-how__num {
    background: #16A34A !important;
    box-shadow: 0 2px 6px rgba(22,163,74,.25) !important;
}
.mh-how__step strong { color: #0f172a !important; }
.mh-how__step--3 strong { color: #15803D !important; } /* keep AI step subtle accent */
.mh-how__step--3 .mh-how__step-icon { filter: none !important; }

/* ───── 4. FEATURED CASE STUDIES (homepage) — unify ───── */
.mh-cases {
    background: #fafafa !important;
}
.mh-cases__eyebrow {
    background: rgba(22, 163, 74, 0.10) !important;
    color: #15803D !important;
}
.mh-cases__title { color: #0f172a !important; }

.mh-case,
.mh-case--schools,
.mh-case--homes,
.mh-case--hotels,
.mh-case--agriculture {
    --mh-case-color: #16A34A !important;
    border: 1px solid #E2E8F0 !important;
}
.mh-case:hover {
    border-color: #16A34A !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
}
.mh-case__stat {
    background: rgba(22, 163, 74, 0.10) !important;
    color: #15803D !important;
}
.mh-case__cta { color: #16A34A !important; }

/* ═════════════════════════════════════════════════════════════════════
   CLUSTER PAGES (/for-schools, /for-homes, /for-hotels-hospitals,
   /smart-agriculture, /our-vision, /industries, /case-studies, etc.)
   ═════════════════════════════════════════════════════════════════════ */

/* All clusters now share the brand green palette. The only visual
   differentiator is the icon. This matches the rest of the site. */
.tnw-cluster-page--schools,
.tnw-cluster-page--homes,
.tnw-cluster-page--hotels,
.tnw-cluster-page--agriculture,
.tnw-cluster-page--vision,
.tnw-cluster-page--industries {
    --cp-accent:        #16A34A !important;
    --cp-accent-2:      #15803D !important;
    --cp-soft:          #DCFCE7 !important;
    --cp-soft-2:        #BBF7D0 !important;
    --cp-hero-tint:     rgba(22,163,74,.08) !important;
    --cp-hero-tint-2:   rgba(21,128,61,.06) !important;
    --cp-eyebrow-bg:    rgba(22,163,74,.10) !important;
    --cp-eyebrow-color: #15803D !important;
}

/* Cluster-page CTA strip — flatten the gradient */
.tnw-cp-cta-strip {
    background: #16A34A !important; /* solid brand green instead of multi-color */
}

/* Cluster-page kit AI badge — unify to soft green pill */
.tnw-cp-kit__tag--ai {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #15803D !important;
    font-weight: 700 !important;
}

/* Timeline step numbers — unify to brand green (was multicolor) */
.tnw-cp-timeline__num {
    background: #16A34A !important;
    box-shadow: 0 4px 10px rgba(22,163,74,.25) !important;
}

/* Horizon page (/our-vision) — kept subtle, hover ring matches brand */
.tnw-cp-horizon__item:hover {
    border-color: #16A34A !important;
}

/* ═════════════════════════════════════════════════════════════════════
   Footer tagline — keep the dot decoration but tone to brand greens
   ═════════════════════════════════════════════════════════════════════ */
.tnw-footer__tagline span[style*="background:#2563EB"],
.tnw-footer__tagline span[style*="background:#7C3AED"] {
    background: #16A34A !important;
    box-shadow: 0 0 6px rgba(22,163,74,.5) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   SPRINT 4 — PHOTO SYSTEM (2026-05-15)
   Real photos replace emojis in cluster cards, case studies, and hero
   backgrounds. CSS gradient fallback if image fails to load (graceful
   degradation — visitor never sees a broken image).
   ═════════════════════════════════════════════════════════════════════ */

/* ───── 1. PHOTO WRAPPER PRIMITIVE ───── */
.tnw-photo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}
.tnw-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.tnw-photo:hover > img { transform: scale(1.04); }
.tnw-photo > img.is-broken { opacity: 0; } /* fallback: gradient shows */

/* ═════════════════════════════════════════════════════════════════════
   2. HOMEPAGE CLUSTER CARDS — photo on top, text below
   Aspect 16:10 — feels modern, less square than 1:1, fits 4-column grid.
   ═════════════════════════════════════════════════════════════════════ */
.mh-cluster {
    padding: 0 !important; /* photo extends to card edges */
    overflow: hidden;
}
.mh-cluster__photo {
    aspect-ratio: 16 / 10;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}
.mh-cluster__photo > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.mh-cluster:hover .mh-cluster__photo > img { transform: scale(1.06); }
.mh-cluster__photo::after {
    /* subtle bottom darken to ground the AI inside badge */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.18) 100%);
}
.mh-cluster__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.mh-cluster__photo .mh-cluster__ai-badge {
    /* re-position the AI badge onto the photo top corner */
    position: absolute !important;
    top: 12px !important;
    inset-inline-end: 12px !important;
    z-index: 2;
    background: rgba(255,255,255,.95) !important;
    color: #15803D !important;
    backdrop-filter: blur(4px);
}
.mh-cluster__icon { font-size: 26px; line-height: 1; }
.mh-cluster .mh-cluster__title { font-size: 18px; margin: 4px 0 6px; }
.mh-cluster .mh-cluster__hook { font-size: 13.5px; margin: 0 0 12px; }

@media (max-width: 1024px) {
    .mh-cluster__photo { aspect-ratio: 16 / 9; } /* taller on mobile */
}

/* ═════════════════════════════════════════════════════════════════════
   3. HOMEPAGE CASE STUDY CARDS — photo on top
   ═════════════════════════════════════════════════════════════════════ */
.mh-case {
    padding: 0 !important;
    overflow: hidden;
}
.mh-case__photo {
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}
.mh-case__photo > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.mh-case:hover .mh-case__photo > img { transform: scale(1.06); }
.mh-case__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45) 100%);
}
.mh-case__photo-icon {
    /* small accent icon on photo */
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: rgba(255,255,255,.95);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    z-index: 2;
}
.mh-case__body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mh-case__title { margin: 0 !important; }
.mh-case__loc  { font-size: 12px; color: #64748b; }
.mh-case__cta { margin-top: 8px; }

/* ═════════════════════════════════════════════════════════════════════
   4. CLUSTER PAGE HERO — background photo with dark gradient overlay
   ═════════════════════════════════════════════════════════════════════ */
.tnw-cp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.tnw-cp-hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}
.tnw-cp-hero__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.85) 40%,
        rgba(255,255,255,.65) 100%
    );
    z-index: -1;
}
[dir="rtl"] .tnw-cp-hero__photo::after {
    background: linear-gradient(
        225deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.85) 40%,
        rgba(255,255,255,.65) 100%
    );
}

/* When hero has a photo, content gets a subtle text shadow for crispness */
.tnw-cp-hero--photo .tnw-cp-hero__title,
.tnw-cp-hero--photo .tnw-cp-hero__sub {
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* ═════════════════════════════════════════════════════════════════════
   5. CASE STUDY DETAIL PAGE — hero with full background photo
   ═════════════════════════════════════════════════════════════════════ */
.tnw-case-detail-hero {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    padding: 96px 0 64px;
    color: #fff;
}
.tnw-case-detail-hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}
.tnw-case-detail-hero__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
        135deg,
        rgba(15,23,42,.85) 0%,
        rgba(22,163,74,.75) 100%
    );
    z-index: -1;
}
.tnw-case-detail-hero .tnw-cp-hero__eyebrow {
    background: rgba(255,255,255,.20) !important;
    color: #fff !important;
}
.tnw-case-detail-hero .tnw-cp-hero__title { color: #fff !important; }
.tnw-case-detail-hero .tnw-cp-hero__sub   { color: rgba(255,255,255,.92) !important; }