/* ============================================================
   POULTRY INDIA 2026 — Design System v4.0 (Expo Edition)
   IPEMA Association + Expo Platform
   Brand: Black + Bright Yellow (#FFE600) + Expo Pink CTA (#FF005C)
   Background: Soft Off-White (#FFFDF5) · 70/20/10 distribution
   Modern UX: Emil Kowalski Animation Principles
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --pi-black: #000000;
    --pi-charcoal: #111111;
    --pi-yellow: #FFE600;             /* Bright Yellow — primary brand */
    --pi-yellow-dark: #F4C400;        /* Warm Gold — hover / secondary brand */
    --pi-yellow-light: #FFF8C9;       /* Pale yellow wash for tints */
    --pi-yellow-glow: rgba(255, 230, 0, 0.18);
    --pi-accent: #FF005C;             /* Expo Pink — CTA accent (use sparingly) */
    --pi-accent-dark: #D6004D;
    --pi-accent-soft: rgba(255, 0, 92, 0.10);
    --pi-bg: #FFFDF5;                 /* Soft Off-White — page background (70%) */
    --pi-white: #FFFFFF;
    --pi-border: #E5E5E5;             /* Border / muted divider */
    --pi-text-secondary: #666666;     /* Medium gray secondary text */
    --pi-gray-50: #F9FAFB;
    --pi-gray-100: #F3F4F6;
    --pi-gray-200: #E5E5E5;
    --pi-gray-300: #D1D5DB;
    --pi-gray-400: #9CA3AF;
    --pi-gray-500: #6B7280;
    --pi-gray-600: #4B5563;
    --pi-gray-700: #2B2B2B;
    --pi-gray-800: #1F2937;
    --pi-gray-900: #0E0E0E;
    --pi-red: #E31E24;
    --pi-red-dark: #C41A1F;
    --pi-red-light: #FFF0F0;
    --pi-success: #16A34A;
    --pi-info: #0284C7;
    --pi-font: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pi-radius-sm: 0.375rem;
    --pi-radius-md: 0.625rem;
    --pi-radius-lg: 1rem;
    --pi-radius-xl: 1.25rem;
    --pi-radius-full: 50%;
    --pi-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --pi-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --pi-shadow-lg: 0 12px 28px rgba(0,0,0,0.12);
    --pi-shadow-xl: 0 24px 48px rgba(0,0,0,0.15);
    --pi-shadow-glow: 0 0 30px rgba(255, 230, 0, 0.22);
    --pi-shadow-glow-pink: 0 0 30px rgba(255, 0, 92, 0.22);

    /* Emil Kowalski: Strong custom easing curves */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    --pi-transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    --pi-transition-fast: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

/* --- Keyframe Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes borderGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 230, 0, 0); }
    50% { box-shadow: 0 0 20px 4px rgba(255, 230, 0, 0.3); }
}
/* Stagger fadeIn for items */
@keyframes staggerFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Base --- */
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scrollbar-gutter: stable; }
body { font-family: var(--pi-font); color: var(--pi-gray-700); line-height: 1.7; background: var(--pi-bg); margin: 0; overflow-x: clip; }
h1, h2, h3, h4, h5, h6 { font-family: var(--pi-font); color: var(--pi-black); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
a { color: var(--pi-black); text-decoration: none; transition: color 0.2s var(--ease-out); }
a:hover { color: var(--pi-yellow-dark); }
img { max-width: 100%; height: auto; }
::selection { background: var(--pi-yellow); color: var(--pi-black); }

/* --- Scroll Reveal Animations --- */
.pi-reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.pi-reveal.visible { opacity: 1; transform: translateY(0); }
.pi-reveal-left {
    opacity: 0; transform: translateX(-40px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.pi-reveal-left.visible { opacity: 1; transform: translateX(0); }
.pi-reveal-right {
    opacity: 0; transform: translateX(40px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.pi-reveal-right.visible { opacity: 1; transform: translateX(0); }
.pi-reveal-scale {
    opacity: 0; transform: scale(0.95);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.pi-reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Clip-path image reveal — slides up from bottom */
.pi-reveal-clip {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.9s var(--ease-in-out);
}
.pi-reveal-clip.visible { clip-path: inset(0 0 0 0); }

/* Clip-path reveal from left */
.pi-reveal-clip-left {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.9s var(--ease-in-out);
}
.pi-reveal-clip-left.visible { clip-path: inset(0 0 0 0); }

/* Clip-path reveal from right */
.pi-reveal-clip-right {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.9s var(--ease-in-out);
}
.pi-reveal-clip-right.visible { clip-path: inset(0 0 0 0); }

/* Staggered children — 50ms between items (Emil: keep stagger delays short) */
.pi-stagger > * {
    opacity: 0; transform: translateY(20px);
    animation: staggerFadeIn 0.5s var(--ease-out) forwards;
    animation-play-state: paused;
}
.pi-stagger.visible > * { animation-play-state: running; }
.pi-stagger.visible > *:nth-child(1) { animation-delay: 0ms; }
.pi-stagger.visible > *:nth-child(2) { animation-delay: 50ms; }
.pi-stagger.visible > *:nth-child(3) { animation-delay: 100ms; }
.pi-stagger.visible > *:nth-child(4) { animation-delay: 150ms; }
.pi-stagger.visible > *:nth-child(5) { animation-delay: 200ms; }
.pi-stagger.visible > *:nth-child(6) { animation-delay: 250ms; }
.pi-stagger.visible > *:nth-child(7) { animation-delay: 300ms; }
.pi-stagger.visible > *:nth-child(8) { animation-delay: 350ms; }

/* --- Top Bar --- */
.pi-topbar { background: var(--pi-black); color: var(--pi-gray-300); font-size: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pi-topbar a { color: var(--pi-gray-400); }
.pi-topbar a:hover { color: var(--pi-yellow); }
.pi-topbar-social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.7rem;
}
.pi-topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

@media (max-width: 991.98px) {
    .pi-topbar .col-7 span:nth-child(1),
    .pi-topbar .col-7 span:nth-child(2) {
        display: none;
    }
}

/* --- Black info top bar (above navbar) --- */
.pi-topbar { background: var(--pi-black); color: var(--pi-white); padding: 0.45rem 0; font-size: 0.82rem; border-bottom: 1px solid rgba(255, 230, 0, 0.18); }
.pi-topbar-row { display: flex; align-items: center;  gap: 1.5rem; flex-wrap: wrap; }
.pi-topbar-item { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--pi-gray-200); text-decoration: none; transition: color 0.2s ease; line-height: 1.2; }
.pi-topbar-item:hover { color: var(--pi-yellow); }
.pi-topbar-item i { color: var(--pi-yellow); font-size: 0.95rem; }
.pi-topbar-social { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.pi-topbar-social a { background: #ffffff; color: var(--pi-black); width: 26px; height: 26px; border-radius: 50%; font-size: 0.78rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.pi-topbar-social a:hover { background: var(--pi-yellow); color: var(--pi-black); transform: translateY(-1px); }
@media (max-width: 575.98px) {
    .pi-topbar { padding: 0.35rem 0; font-size: 0.72rem; }
    .pi-topbar-row { gap: 0.6rem; justify-content: center; text-align: center; }
    .pi-topbar-social { margin-left: 0; }
}

/* --- Sticky Navbar --- */
.pi-site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 100%;
    will-change: transform;
    /* Disable browser scroll-anchoring under the sticky header — prevents the page from
       "anchoring" content position when the navbar resizes, which causes the shake. */
    overflow-anchor: none;
}
/* Same anti-shake measure on the scroll container */
html { overflow-anchor: none; }
.pi-navbar { will-change: padding; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.pi-navbar { background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0 0 10px 0; z-index: 1050; transition: padding 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); border-bottom: 2px solid rgba(255, 230, 0, 0.35); position: relative; top: auto; }
.pi-navbar-icons { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; padding: 0; margin-bottom: -0.2rem; }
.pi-navbar-icons a { font-size: 1.5rem; line-height: 1; transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease; }
.pi-navbar-icons a:hover { transform: translateY(-2px); filter: brightness(0.85); }
/* Brand-specific colors for social media icons site-wide
   (navbar, footer, contact page, newsletters, news items, articles).
   !important needed to override per-element inline color/border styles
   present on a few pages (e.g. Contact.cshtml). */
a[aria-label="Facebook"]  .bi-facebook,    a[aria-label="Facebook"]  i.bi-facebook,    a[aria-label="Facebook"]  { color: #1877F2 !important; }
a[aria-label="Twitter"]   .bi-twitter-x,   a[aria-label="Twitter"]   i.bi-twitter-x,   a[aria-label="Twitter"],
a[aria-label="Twitter"]   .bi-twitter,     a[aria-label="Twitter"]   i.bi-twitter      { color: #000000 !important; }
a[aria-label="LinkedIn"]  .bi-linkedin,    a[aria-label="LinkedIn"]  i.bi-linkedin,    a[aria-label="LinkedIn"]  { color: #0A66C2 !important; }
a[aria-label="Instagram"] .bi-instagram,   a[aria-label="Instagram"] i.bi-instagram,   a[aria-label="Instagram"] { color: #E4405F !important; }
a[aria-label="YouTube"]   .bi-youtube,     a[aria-label="YouTube"]   i.bi-youtube,     a[aria-label="YouTube"]   { color: #FF0000 !important; }
a[aria-label="Pinterest"] .bi-pinterest,   a[aria-label="Pinterest"] i.bi-pinterest,   a[aria-label="Pinterest"] { color: #E60023 !important; }

/* News-share buttons (use title= instead of aria-label) — pick up brand colors via icon class */
.pi-news-share-btn .bi-facebook,
a[title="Facebook"]   .bi-facebook   { color: #1877F2 !important; }
.pi-news-share-btn .bi-twitter-x,
.pi-news-share-btn .bi-twitter,
a[title="Twitter"]    .bi-twitter-x,
a[title="Twitter"]    .bi-twitter    { color: #000000 !important; }
.pi-news-share-btn .bi-linkedin,
a[title="LinkedIn"]   .bi-linkedin   { color: #0A66C2 !important; }
.pi-news-share-btn .bi-instagram,
a[title="Instagram"]  .bi-instagram  { color: #E4405F !important; }
.pi-news-share-btn .bi-youtube,
a[title="YouTube"]    .bi-youtube    { color: #FF0000 !important; }
.pi-news-share-btn .bi-pinterest,
a[title="Pinterest"]  .bi-pinterest  { color: #E60023 !important; }
.pi-news-share-btn .bi-whatsapp,
a[title="WhatsApp"]   .bi-whatsapp   { color: #25D366 !important; }
.pi-navbar-ctas-row { display: flex; gap: 0.65rem; align-items: center; justify-content: flex-end; padding: 0 0.5rem 0 0; margin-top: 12px; flex-wrap: wrap; }
.pi-navbar-link-cta { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--pi-gray-700) !important; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; padding: 0.4rem 0.9rem; line-height: 1.15; position: relative; transition: color 0.2s ease; white-space: nowrap; }
.pi-navbar-link-cta i { color: var(--pi-yellow); font-size: 0.95rem; }
.pi-navbar-link-cta::before { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 3px; background: var(--pi-yellow); border-radius: 3px; transition: width 0.3s var(--ease-out); transform: translateX(-50%); }
.pi-navbar-link-cta:hover, .pi-navbar-link-cta.active { color: var(--pi-black) !important; }
.pi-navbar-link-cta:hover::before, .pi-navbar-link-cta.active::before { width: 80%; }
.pi-navbar-support-row { display: flex; justify-content: flex-end; padding: 0; margin-top: -1.2rem; margin-bottom: 0; }
.pi-navbar-support-row .pi-navbar-link-cta { padding-right: 0; padding-left: 0; }
@media (max-width: 575.98px) {
    .pi-navbar-support-row { justify-content: center; padding: 0; margin-top: 0; margin-bottom: 0; }
    .pi-navbar-support-row .pi-navbar-link-cta { padding: 0.3rem 0.5rem; }
}
@media (max-width: 575.98px) {
    .pi-navbar-icons { gap: 0.85rem; padding: 0.3rem 0 0.5rem; margin-bottom: 0.35rem; }
    .pi-navbar-icons a { font-size: 1.2rem; }
    .pi-navbar-ctas-row { gap: 0.5rem; justify-content: center; padding: 0.5rem 0 0.3rem; margin-top: 0.1rem; }
}
.pi-navbar.scrolled { padding: 0.15rem 0; box-shadow: var(--pi-shadow-lg); border-bottom: 2px solid var(--pi-yellow); }
.pi-navbar-main-row { position: relative; padding: 15px 0; gap: 1.5rem; min-width: 0; }
.pi-navbar.scrolled .pi-navbar-main-row { padding: 4px 0; }
.pi-navbar .navbar-brand { display: inline-flex; align-items: center; gap: 1rem; padding: 0; max-width: 600px; flex-shrink: 1; position: absolute; top: 0; left: 0; margin: 0; z-index: 1300; }
/* Home-page logo swap on scroll */
.pi-navbar .navbar-brand .brand-logo-scrolled { display: none; }
.pi-navbar.scrolled .navbar-brand .brand-logo-default { display: none; }
.pi-navbar.scrolled .navbar-brand .brand-logo-scrolled { display: inline-block; }
/* CTA buttons hidden on page reload, appear when scrolled */
.pi-navbar .pi-navbar-ctas-row { display: none; }
.pi-navbar.scrolled .pi-navbar-ctas-row { display: flex; }
.pi-navbar-main-row .navbar-collapse { flex: 1 1 auto; min-width: 0; }
.pi-navbar-main-row .navbar-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; margin: 0; padding: 0; }
.pi-navbar-main-row .navbar-nav .nav-item { margin: 0; padding: 0; }
/* Keep all nav items including Event Support & Contact on the same single row */
@media (min-width: 992px) {
    .pi-navbar-main-row .navbar-nav { flex-wrap: nowrap; row-gap: 0; }
    .pi-navbar-main-row .navbar-nav > li:last-child { flex-basis: auto; max-width: none; display: list-item; justify-content: initial; }
}
@media (min-width: 992px) {
    .pi-navbar-main-row { flex-wrap: nowrap !important; }
}
.pi-navbar .navbar-brand img { height: 100%; max-height: 320px; min-height: 300px; max-width: 100%; width: auto; transition: max-height 0.3s var(--ease-out), min-height 0.3s var(--ease-out), margin 0.3s var(--ease-out); object-fit: contain; background: #ffffff; padding: 0.5rem; border-radius: 12px; box-shadow: 0 6px 18px rgba(20, 33, 61, 0.12); }
.pi-navbar.scrolled .navbar-brand { margin: 0; position: absolute; top: 0; left: 0; z-index: 1300; }
.pi-navbar.scrolled .navbar-brand img { max-height: 220px; min-height: 190px; }
/* Compact navbar on scroll — keep icons + CTAs visible to avoid layout reflow shake; just shrink them */
.pi-navbar.scrolled .pi-navbar-icons { padding: 0; margin-bottom: -0.2rem; transition: padding 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
.pi-navbar.scrolled .pi-navbar-icons a { font-size: 1.05rem; }
.pi-navbar.scrolled .pi-navbar-ctas-row { padding: 0 0.5rem 0 0; margin-top: 6px; transition: padding 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
.pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-exhibit,
.pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-visit { font-size: 0.78rem; padding: 0.45rem 1rem; transition: padding 0.3s var(--ease-out), font-size 0.3s var(--ease-out); }
.pi-navbar .pi-navbar-ctas-row .pi-btn-exhibit,
.pi-navbar .pi-navbar-ctas-row .pi-btn-visit { font-size: 0.7rem; padding: 7px 14px; letter-spacing: 0.04em; transition: padding 0.3s var(--ease-out), font-size 0.3s var(--ease-out), transform 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out), background 0.16s var(--ease-out); }
.pi-navbar .pi-navbar-icons,
.pi-navbar .pi-navbar-ctas-row { transition: padding 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
.pi-navbar.scrolled .nav-link { padding: 0 0.6rem 8px !important; font-size: 0.95rem; line-height: 1.25; letter-spacing: 0.03em; }
.pi-navbar.scrolled .pi-navbar-icons a { font-size: 1.4rem; }
.pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-exhibit,
.pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-visit { font-size: 0.7rem !important; padding: 7px 14px !important; }
.pi-site-header { transition: box-shadow 0.3s var(--ease-out); }
.pi-site-header:has(.pi-navbar.scrolled) { box-shadow: 0 4px 16px rgba(20, 33, 61, 0.12); }
@media (max-width: 991.98px) {
    /* Navbar on mobile — no negative-margin overflow trick; logo sits cleanly inside the bar */
    .pi-navbar { padding: 0.4rem 0; }
    .pi-navbar .navbar-brand { max-width: calc(100% - 56px); margin: 0; align-self: center; gap: 0.5rem; }
    .pi-navbar .navbar-brand img { max-height: 80px; min-height: 0; height: auto; max-width: 100%; }
    .pi-navbar.scrolled { padding: 0.3rem 0; }
    .pi-navbar.scrolled .navbar-brand { margin: 0; }
    .pi-navbar.scrolled .navbar-brand img { max-height: 60px; min-height: 0; }

    /* Hide the headset icon on the Event Support & Contact nav link on mobile */
    .pi-navbar .nav-link .bi-headset { display: none; }

    /* Mobile layout — Row 1: logo (left) + hamburger (right) | Row 2: collapsed menu | Row 3: CTAs */
    .pi-navbar-main-row { justify-content: space-between; }
    .pi-navbar .navbar-toggler { margin-left: auto; }

    /* Hide social icons on mobile — keep navbar clean (logo + menu + buttons only) */
    .pi-navbar-icons { display: none; }

    /* CTAs in ONE line on mobile — 3 buttons share width equally, text wraps inside if needed */
    .pi-navbar-ctas-row { gap: 0.35rem; padding: 0.4rem 0.25rem; margin-top: 0; justify-content: stretch; flex-wrap: nowrap; }
    .pi-navbar.scrolled .pi-navbar-ctas-row { padding: 0.3rem 0.25rem; margin-top: 0; }
    .pi-navbar-ctas-row .pi-btn-exhibit,
    .pi-navbar-ctas-row .pi-btn-visit { flex: 1 1 0; min-width: 0; font-size: 0.62rem; padding: 0.45rem 0.45rem; letter-spacing: 0.02em; line-height: 1.2; white-space: normal; text-align: center; word-break: break-word; }
    .pi-navbar-ctas-row .pi-btn-exhibit i,
    .pi-navbar-ctas-row .pi-btn-visit i { display: none; }
    /* Buttons shrink noticeably on scroll (mobile) */
    .pi-navbar.scrolled .pi-navbar-ctas-row { gap: 0.25rem; padding: 0.2rem 0.2rem; }
    .pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-exhibit,
    .pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-visit { font-size: 0.5rem !important; padding: 0.3rem 0.25rem !important; line-height: 1.15; letter-spacing: 0.01em; }

    .pi-navbar-support-row { padding: 0.2rem 0.25rem; margin: 0; justify-content: center; }
    .pi-navbar-support-row .pi-navbar-link-cta { padding: 0.3rem 0.5rem; font-size: 0.75rem; }

    /* Collapsed mobile menu — drops DOWN below the navbar as an absolutely-positioned panel.
       The navbar's height stays fixed when the hamburger is tapped — the menu floats on top
       of page content instead of pushing the navbar taller. */
    .pi-navbar { position: relative; }
    .pi-navbar-main-row { flex-wrap: nowrap; }
    .pi-navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: #fff;
        border-radius: 0 0 12px 12px;
        padding: 0.5rem 0.5rem 0.85rem;
        margin: 0;
        box-shadow: 0 12px 28px rgba(20, 33, 61, 0.18);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        z-index: 1100;
    }
    .pi-navbar .navbar-nav { width: 100%; }
    .pi-navbar .nav-link { padding: 0.7rem 1rem !important; font-size: 0.95rem; border-bottom: 1px solid var(--pi-gray-100); white-space: normal; }
    .pi-navbar .nav-item:last-child .nav-link { border-bottom: none; }
    .pi-navbar .dropdown-menu { box-shadow: none; border: none; border-top: 1px dashed var(--pi-gray-100); border-radius: 0; padding: 0.25rem 0 0.5rem; min-width: 100%; background: transparent; animation: none; position: static !important; transform: none !important; }
    .pi-navbar .dropdown-item { padding-left: 1.75rem; font-size: 0.88rem; white-space: normal; }
    /* Allow the sticky header to overflow so the dropped panel is fully visible */
    .pi-site-header { overflow: visible; }

    /* Toggler — bigger tap target */
    .pi-navbar .navbar-toggler { padding: 0.5rem; flex-shrink: 0; }
}

@media (max-width: 575.98px) {
    .pi-navbar { padding: 0.35rem 0; }
    .pi-navbar .navbar-brand { margin: 0; }
    .pi-navbar .navbar-brand img { max-height: 64px; }
    .pi-navbar.scrolled { padding: 0.25rem 0; }
    .pi-navbar.scrolled .navbar-brand { margin: 0; }
    .pi-navbar.scrolled .navbar-brand img { max-height: 50px; }
    .pi-navbar-icons { gap: 0.55rem; padding: 0.25rem 0; }
    .pi-navbar-icons a { font-size: 1rem; }
    .pi-navbar-ctas-row { gap: 0.25rem; padding: 0.3rem 0; }
    .pi-navbar-ctas-row .pi-btn-exhibit,
    .pi-navbar-ctas-row .pi-btn-visit { font-size: 0.55rem; padding: 0.4rem 0.3rem; letter-spacing: 0.01em; }
    .pi-navbar-support-row .pi-navbar-link-cta { font-size: 0.7rem; padding: 0.25rem 0.4rem; }
}

/* Horizontal-scroll guard kept on body only (line 105) — applying it to <html> too
   breaks position: sticky on the navbar in most browsers, so we deliberately do not set it here. */

/* Nav Links with Underline Animation */
.pi-navbar .nav-link { color: var(--pi-gray-700) !important; font-weight: 600; font-size: 0.95rem; padding: 0 0.6rem 8px !important; text-transform: uppercase; letter-spacing: 0.04em; position: relative; overflow: hidden; line-height: 1; }
.pi-navbar .nav-link::before { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 3px; background: var(--pi-yellow); border-radius: 3px; transition: width 0.3s var(--ease-out); transform: translateX(-50%); }
.pi-navbar .nav-link:hover, .pi-navbar .nav-link.active { color: var(--pi-black) !important; }
.pi-navbar .nav-link:hover::before, .pi-navbar .nav-link.active::before { width: 80%; }

/* --- Mega Menu Dropdowns --- */
.pi-navbar .dropdown-menu { border: none; border-radius: var(--pi-radius-lg); padding: 0.75rem 0; box-shadow: var(--pi-shadow-xl); border-top: 3px solid var(--pi-yellow); animation: slideDown 0.2s var(--ease-out); min-width: 260px; background: var(--pi-white); overflow: hidden; }
.pi-navbar .dropdown-item { padding: 0.65rem 1.25rem; font-size: 0.88rem; font-weight: 500; color: var(--pi-gray-700); display: flex; align-items: center; gap: 0.75rem; border-radius: 0; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), padding-left 0.15s var(--ease-out); }
.pi-navbar .dropdown-item i { font-size: 1.1rem; width: 24px; text-align: center; color: var(--pi-gray-400); transition: color 0.15s var(--ease-out); }
.pi-navbar .dropdown-item:hover { background: linear-gradient(90deg, var(--pi-yellow-light) 0%, transparent 100%); color: var(--pi-black); padding-left: 1.5rem; }
.pi-navbar .dropdown-item:hover i { color: var(--pi-yellow-dark); }
.pi-navbar .dropdown-item.pi-highlight { background: var(--pi-yellow-light); font-weight: 700; color: var(--pi-black); }
.pi-navbar .dropdown-item.pi-highlight i { color: var(--pi-yellow-dark); }
.pi-navbar .dropdown-divider { margin: 0.35rem 1rem; border-color: var(--pi-gray-100); }

.d-flexy {
    display: flex !important;
    justify-content:center;
    align-items:center;
}
/* Desktop hover dropdown */
@media (min-width: 992px) {
    .pi-navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
    .pi-navbar .navbar-collapse { display: flex !important; flex-direction: row; align-items: center; }
    .pi-navbar .navbar-nav { margin-bottom: 0; }
}

/* --- CTA Buttons (Nav) --- */
.pi-btn-exhibit, .pi-btn-visit { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.85rem 1.6rem; border-radius: 50px; transition: transform 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out), background 0.16s var(--ease-out); white-space: nowrap; display: inline-block; text-align: center; line-height: 1.3; }
.pi-btn-exhibit { background: var(--pi-yellow); color: var(--pi-black); border: 2px solid var(--pi-yellow); }
.pi-btn-visit { background: var(--pi-black); color: var(--pi-white); border: 2px solid var(--pi-black); }
/* Emil: active state — buttons must feel responsive */
.pi-btn-exhibit:active, .pi-btn-visit:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
    .pi-btn-exhibit:hover { background: var(--pi-yellow-dark); border-color: var(--pi-yellow-dark); color: var(--pi-black); transform: translateY(-2px); box-shadow: var(--pi-shadow-glow); }
    .pi-btn-visit:hover { background: var(--pi-gray-800); border-color: var(--pi-gray-800); color: var(--pi-white); transform: translateY(-2px); box-shadow: var(--pi-shadow-md); }
}

/* --- Buttons --- */
.pi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 700; font-size: 0.88rem; padding: 0.7rem 1.75rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; transition: transform 0.16s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); border: 2px solid transparent; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; }
.pi-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.5s var(--ease-out); }
/* Emil: active state scale(0.97) for responsiveness */
.pi-btn:active { transform: scale(0.97); }
.pi-btn-primary { background: var(--pi-yellow); color: var(--pi-black); border-color: var(--pi-yellow); }
.pi-btn-dark { background: var(--pi-black); color: var(--pi-white); border-color: var(--pi-black); }
.pi-btn-outline { background: transparent; color: var(--pi-black); border-color: var(--pi-gray-300); }
.pi-btn-sponsors-home { border-color: var(--pi-yellow); }
.pi-btn-outline-light { background: transparent; color: var(--pi-white); border-color: rgba(255,255,255,0.3); }
.pi-btn-sm { padding: 0.45rem 1.1rem; font-size: 0.78rem; }
.pi-btn-lg { padding: 0.9rem 2.5rem; font-size: 0.95rem; }
.pi-btn-xl { padding: 1rem 3rem; font-size: 1rem; }

/* Hover states gated behind hover media query */
@media (hover: hover) and (pointer: fine) {
    .pi-btn:hover::after { transform: translateX(100%); }
    .pi-btn-primary:hover { background: var(--pi-yellow-dark); border-color: var(--pi-yellow-dark); color: var(--pi-black); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 230, 0,0.35); }
    .pi-btn-dark:hover { background: var(--pi-gray-800); border-color: var(--pi-gray-800); color: var(--pi-white); transform: translateY(-3px); box-shadow: var(--pi-shadow-lg); }
    .pi-btn-outline:hover { border-color: var(--pi-yellow); background: var(--pi-yellow-light); }
    .pi-btn-outline-light:hover { border-color: var(--pi-yellow); background: var(--pi-yellow); color: var(--pi-black); }
    .pi-section .pi-btn-outline:hover { background: var(--pi-yellow); color: var(--pi-black); border-color: var(--pi-yellow); }
}

/* --- Hero Section --- */
.pi-hero { position: relative; background: var(--pi-black); color: var(--pi-white); min-height: auto; display: flex; align-items: center; overflow: hidden; padding-top: 100px; padding-bottom: 100px; }
@media (max-width: 991.98px) {
    .pi-hero { padding-top: 100px; padding-bottom: 100px; }
}
@media (max-width: 575.98px) {
    .pi-hero { padding-top: 100px; padding-bottom: 100px; }
}
/* Anchor links to #home (or any in-page jump) account for the sticky navbar */
html { scroll-padding-top: clamp(80px, 15vh, 200px); }
.pi-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pi-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 100%); }
.pi-hero-particles { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 20% 80%, rgba(255, 230, 0,0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 230, 0,0.03) 0%, transparent 50%); }
.pi-hero-content { position: relative; z-index: 2; }

.pi-hero .pi-edition-badge { display: inline-block; background: linear-gradient(135deg, var(--pi-yellow) 0%, #FFE066 100%); color: var(--pi-black); font-weight: 800; font-size: 0.8rem; padding: 0.4rem 1.1rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.12em; animation: pulse 3s ease infinite; }
.pi-hero h1 { color: var(--pi-white); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; }
.pi-hero h1 span { color: var(--pi-yellow); text-shadow: 0 0 40px rgba(255, 230, 0,0.3); }
.pi-hero .pi-tagline { font-size: 1.1rem; color: var(--pi-gray-300); max-width: 550px; line-height: 1.7; }
.pi-hero-logo { width: 100%; max-width: 280px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.25)); animation: none; }

/* Countdown */
.pi-countdown { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pi-countdown-item { text-align: center; background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); border: 1px solid rgba(255, 230, 0,0.2); border-radius: var(--pi-radius-lg); padding: 0.85rem 1.1rem; min-width: 80px; transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.pi-countdown-number { font-size: 2.2rem; font-weight: 900; color: var(--pi-yellow); line-height: 1; font-variant-numeric: tabular-nums; }
.pi-countdown-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--pi-gray-400); margin-top: 0.3rem; font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
    .pi-countdown-item:hover { background: rgba(255, 230, 0,0.1); border-color: rgba(255, 230, 0,0.4); transform: translateY(-3px); }
}

/* --- Stats Banner --- */
.pi-stats { background: linear-gradient(135deg, var(--pi-yellow) 0%, #FFE066 100%); padding: 3rem 0; position: relative; overflow: hidden; }
.pi-stats::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M30 30m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0' fill='rgba(0,0,0,0.04)'/%3E%3C/svg%3E"); }
.pi-stat-item { text-align: center; padding: 0.5rem 1rem; position: relative; }
.pi-stat-number { font-size: 3rem; font-weight: 900; color: var(--pi-black); line-height: 1; letter-spacing: -0.03em; }
.pi-stat-label { font-size: 0.8rem; font-weight: 700; color: rgba(0,0,0,0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.25rem; }

/* --- Sections --- */
.pi-section { padding: 5rem 0; position: relative; }
.pi-section-sm { padding: 2.5rem 0; }
.pi-section-gray { background: var(--pi-gray-50); }
.pi-section-dark { background: var(--pi-black); color: var(--pi-white); }
.pi-section-dark h2, .pi-section-dark h3, .pi-section-dark h4 { color: var(--pi-white); }
.pi-section-gradient { background: linear-gradient(180deg, var(--pi-white) 0%, var(--pi-gray-50) 100%); }

.pi-section-header { text-align: center; margin-bottom: 3.5rem; }
.pi-section-header h2 { margin-bottom: 0.75rem; }
.pi-section-header .pi-subtitle { color: var(--pi-gray-500); font-size: 1.05rem; max-width: 600px; margin: 0 auto; line-height: 1.7; }
.pi-section-header .pi-accent-bar { display: block; width: 50px; height: 4px; background: linear-gradient(90deg, var(--pi-yellow) 0%, var(--pi-yellow-dark) 100%); margin: 1rem auto 0; border-radius: 4px; }

/* Modern Newsletter Layout — clean grid, minimal chrome */
.pi-nl-modern { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.pi-nl-modern-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 767.98px) { .pi-nl-modern-grid { grid-template-columns: 1fr; } }
.pi-nl-modern-grid--gallery { grid-template-columns: 1fr; }
.pi-nl-modern-grid--gallery .pi-nl-modern-card-img {
    aspect-ratio: 16 / 9;
    padding: 0.5rem;
    background: var(--pi-white);
}
.pi-nl-modern-grid--gallery .pi-nl-modern-card-img img { object-fit: contain; }
.pi-nl-modern-grid--gallery .pi-nl-modern-card:hover .pi-nl-modern-card-img img { transform: none; }
.pi-nl-modern-card {
    display: flex;
    flex-direction: column;
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
    height: 100%;
}
.pi-nl-modern-card:hover { transform: translateY(-3px); box-shadow: var(--pi-shadow-md); border-color: var(--pi-yellow); }
.pi-nl-modern-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--pi-gray-100);
    overflow: hidden;
    position: relative;
}
.pi-nl-modern-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-out); }
.pi-nl-modern-card:hover .pi-nl-modern-card-img img { transform: scale(1.04); }
.pi-nl-modern-card-body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pi-nl-modern-card-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pi-yellow-dark); margin-bottom: 0.6rem; }
.pi-nl-modern-card-tag--green { color: #0f766e; }
.pi-nl-modern-card-tag--red { color: var(--pi-red); }
.pi-nl-modern-card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--pi-black); margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.pi-nl-modern-card-text { font-size: 0.9rem; line-height: 1.6; color: var(--pi-gray-600); margin: 0 0 1rem; flex: 1; }
.pi-nl-modern-card-cta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--pi-black); text-decoration: none; border-bottom: 2px solid var(--pi-yellow); align-self: flex-start; padding-bottom: 2px; transition: color 0.2s ease, transform 0.2s ease; }
.pi-nl-modern-card-cta:hover { color: var(--pi-yellow-dark); transform: translateX(3px); }

/* Chef / recipe author block inside the Recipe card */
.pi-nl-modern-chef { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.85rem; margin: 0.6rem 0 0.9rem; background: rgba(255, 230, 0,0.08); border: 1px solid rgba(255, 230, 0,0.3); border-left: 3px solid var(--pi-yellow); border-radius: 10px; }
.pi-nl-modern-chef-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; border: 2px solid var(--pi-yellow); box-shadow: 0 2px 6px rgba(20,33,61,0.12); }
.pi-nl-modern-chef-meta { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.pi-nl-modern-chef-meta strong { font-size: 0.95rem; font-weight: 700; color: var(--pi-black); line-height: 1.2; }
.pi-nl-modern-chef-meta span { font-size: 0.82rem; color: var(--pi-gray-600); line-height: 1.3; }

/* Featured wide card spanning 2 cols */
.pi-nl-modern-feature { grid-column: 1 / -1; }
.pi-nl-modern-feature .pi-nl-modern-card { flex-direction: row; }
.pi-nl-modern-feature .pi-nl-modern-card-img { flex: 0 0 45%; max-width: 45%; aspect-ratio: auto; }
.pi-nl-modern-feature .pi-nl-modern-card-body { justify-content: center; padding: 1.75rem 2rem; }
.pi-nl-modern-feature .pi-nl-modern-card-title { font-size: 1.4rem; line-height: 1.25; }
@media (max-width: 767.98px) {
    .pi-nl-modern-feature .pi-nl-modern-card { flex-direction: column; }
    .pi-nl-modern-feature .pi-nl-modern-card-img { flex: 0 0 auto; max-width: 100%; aspect-ratio: 16 / 10; }
}

/* Section heading within modern newsletter */
.pi-nl-modern-section-head { display: flex; align-items: center; gap: 0.9rem; margin: 2.5rem 0 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--pi-yellow); }
.pi-nl-modern-section-head i { color: var(--pi-yellow-dark); font-size: 1.5rem; }
.pi-nl-modern-section-head h2 { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

/* President's Desk call-out card */
.pi-nl-modern-roundup { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; background: linear-gradient(135deg, rgba(255, 230, 0,0.08) 0%, rgba(255, 230, 0,0.02) 100%); border: 1px solid rgba(255, 230, 0,0.3); border-left: 4px solid var(--pi-yellow); border-radius: 12px; margin-top: 1.5rem; }
.pi-nl-modern-roundup-logo { flex: 0 0 64px; width: 64px; height: 64px; background: var(--pi-white); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--pi-gray-200); }
.pi-nl-modern-roundup-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pi-nl-modern-roundup-body { flex: 1; }
.pi-nl-modern-roundup-body h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--pi-black); }
.pi-nl-modern-roundup-body p { font-size: 0.92rem; line-height: 1.6; color: var(--pi-gray-700); margin: 0 0 0.75rem; }
@media (max-width: 575.98px) { .pi-nl-modern-roundup { flex-direction: column; align-items: flex-start; padding: 1.25rem; } }

/* Footer Expo call-to-action */
.pi-nl-modern-expo { margin-top: 2rem; padding: 1.75rem 2rem; background: linear-gradient(135deg, var(--pi-black) 0%, #1a1a2e 100%); color: var(--pi-white); border-radius: 14px; text-align: center; }
.pi-nl-modern-expo h3 { color: var(--pi-yellow); font-size: 1.35rem; font-weight: 800; margin: 0 0 0.25rem; }
.pi-nl-modern-expo p { color: var(--pi-gray-300); font-size: 0.92rem; margin: 0 0 0.35rem; }
.pi-nl-modern-expo-social { margin-top: 0.75rem; display: flex; justify-content: center; gap: 0.6rem; }
.pi-nl-modern-expo-social a { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--pi-white); align-items: center; justify-content: center; font-size: 0.95rem; transition: background 0.2s ease, color 0.2s ease; }
.pi-nl-modern-expo-social a:hover { background: var(--pi-yellow); color: var(--pi-black); }

/* Newsletter archive (Newsletter landing page) */
.pi-nl-archive-year {
    font-size: 1.45rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--pi-yellow);
}
.pi-nl-archive-link { text-decoration: none; display: block; height: 100%; }
.pi-nl-archive-card {
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.pi-nl-archive-card-head {
    height: 136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--pi-black);
    background: linear-gradient(135deg, var(--pi-yellow) 0%, #e6a800 100%);
}
.pi-nl-archive-card-head i { font-size: 2rem; }
.pi-nl-archive-card-head span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pi-nl-archive-card-body { padding: 1.15rem 1.15rem 1.25rem; text-align: center; }
.pi-nl-archive-card-title {
    font-size: 0.95rem;
    color: var(--pi-black);
    margin: 0 0 0.55rem;
}
.pi-nl-archive-cta { font-size: 0.8rem; color: var(--pi-gray-600); }
@media (hover: hover) and (pointer: fine) {
    .pi-nl-archive-link:hover .pi-nl-archive-card {
        transform: translateY(-4px);
        border-color: var(--pi-yellow);
        box-shadow: var(--pi-shadow-md);
    }
    .pi-nl-archive-link:hover .pi-nl-archive-cta { color: var(--pi-black); }
}

.pi-nl-subscribe-card {
    border: 2px solid var(--pi-yellow);
    background: var(--pi-yellow-light);
}
.pi-nl-subscribe-card-body { padding: 2.5rem; }
.pi-nl-subscribe-icon {
    width: 64px;
    height: 64px;
    background: var(--pi-yellow);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    color: var(--pi-black);
    box-shadow: 0 6px 20px rgba(253,196,15,0.3);
}
.pi-nl-subscribe-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.pi-nl-subscribe-text {
    font-size: 0.92rem;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}
.pi-nl-subscribe-form { max-width: 480px; margin: 0 auto; }
.pi-nl-subscribe-btn { white-space: nowrap; }
.pi-nl-subscribe-note { font-size: 0.75rem; }
@media (max-width: 575.98px) {
    .pi-nl-subscribe-card-body { padding: 1.5rem 1rem; }
}

/* --- Cards v3 — Image-first design --- */
.pi-card { background: var(--pi-white); border: 1px solid var(--pi-gray-200); border-radius: var(--pi-radius-lg); overflow: hidden; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); position: relative; }
.row > [class*="col"] > .pi-card,
.row > [class*="col"] > .pi-icon-card,
.row > [class*="col"] > .pi-image-card,
.row > [class*="col"] > .pi-exhibitor-card { height: 100%; }
.pi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pi-yellow); transform: scaleX(0); transition: transform 0.4s var(--ease-out); transform-origin: left; }
.pi-card-img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.pi-img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(45deg, var(--pi-gray-100), var(--pi-gray-100) 10px, var(--pi-gray-200) 10px, var(--pi-gray-200) 20px);
    border: 2px dashed var(--pi-gray-300);
    border-radius: var(--pi-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--pi-gray-500);
}
.pi-img-placeholder i { font-size: 2.25rem; color: var(--pi-gray-400); }
.pi-img-placeholder span { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.pi-img-placeholder::after {
    content: attr(data-label);
    font-size: 0.75rem;
    color: var(--pi-gray-500);
    font-style: italic;
    max-width: 80%;
    text-align: center;
}
.pi-article-featured .pi-img-placeholder { margin: 0; aspect-ratio: 16 / 9; }

/* --- Newsletter Hatchline section (image-left / text-right cards) --- */





.pi-hatchline {
    background: #fff6ff;
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.3rem;
}
.pi-hatchline-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.pi-hatchline-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pi-hatchline-icon img,
.pi-hatchline-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pi-hatchline-titles h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #1a1a3a;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.pi-hatchline-titles p {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #1a1a3a;
    line-height: 1.2;
}
.pi-hatchline-cards {
    display: flex;
    flex-direction: column;
}
.pi-hatchline-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.25rem;
    overflow: hidden;
    padding: 0.85rem;
}
.pi-hatchline-card-img {
    border-radius: 8px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b29a;
    font-size: 2rem;
    overflow: hidden;
}
.pi-hatchline-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pi-hatchline-card-body {
    padding: 0.4rem 0.5rem 0.4rem 0;
    display: flex;
    flex-direction: column;
}
.pi-hatchline-card-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.55rem;
    color: #1a1a3a;
    line-height: 1.3;
}
.pi-hatchline-card-body p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #555;
    margin: 0 0 0.85rem;
}
.pi-hatchline-btn {
    display: inline-block;
    align-self: flex-start;
    background: #5d0079;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    margin-top: auto;
}
@media (max-width: 575.98px) {
    .pi-hatchline-card { grid-template-columns: 1fr; }
    .pi-hatchline-card-img { height: 180px; }
}

/* --- Newsletter generic image block (with placeholder fallback) --- */
.pi-nl-imgblock {
    width: 100%;
    overflow: hidden;
    background: #f4f5f7;
    position: relative;
    aspect-ratio: 16 / 7;
}
.pi-nl-imgblock--pun { aspect-ratio: 16 / 9.8; }
.pi-nl-imgblock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pi-nl-imgblock-fallback {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--pi-gray-500);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    text-transform: uppercase;
    background: repeating-linear-gradient(45deg, #f0f1f3, #f0f1f3 10px, #e6e8eb 10px, #e6e8eb 20px);
}
.pi-nl-imgblock-fallback i { font-size: 2.25rem; color: var(--pi-gray-400); }
.pi-nl-imgblock--placeholder .pi-nl-imgblock-fallback { display: flex; }

/* Poultry Pun section */
.pi-pun .pi-pun-label {
    display: inline-block;
    background: #2a2540;
    color: var(--pi-yellow);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.4rem 1rem;
    letter-spacing: 0.02em;
}
.pi-pun .pi-nl-imgblock {
    border-top-left-radius: 0;
}

/* President's Desk IPEMA section */
.pi-presdesk {
    background: #eeeeee;
    padding: 1.75rem 1.75rem 2rem;
    margin-bottom: 2.5rem;
}
.pi-presdesk-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.pi-presdesk-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pi-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a1a3a;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.pi-presdesk-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #1a1a3a;
    letter-spacing: -0.01em;
}
.pi-presdesk-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.75rem;
    align-items: start;
}
.pi-presdesk-logo {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #eef0f2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.pi-presdesk-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pi-presdesk-logo-fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--pi-gray-500);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pi-presdesk-logo-fallback i { font-size: 2rem; color: var(--pi-gray-400); }
.pi-presdesk-logo--placeholder .pi-presdesk-logo-fallback { display: flex; }
.pi-presdesk-text h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
    color: #1a1a3a;
    line-height: 1.35;
}
.pi-presdesk-text h4 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 0.65rem;
    color: #1a1a3a;
    line-height: 1.35;
}
.pi-presdesk-text p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #555;
    margin: 0 0 1rem;
}
.pi-presdesk-btn {
    display: inline-block;
    background: #6b2e8e;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    text-decoration: none;
}
@media (max-width: 575.98px) {
    .pi-presdesk-body { grid-template-columns: 1fr; }
    .pi-presdesk-logo { max-width: 200px; margin: 0 auto; }
}

/* Recipe section (e.g. Chicken Haleem) */
.pi-recipe {
    background: #eaeaea;
    overflow: hidden;
    margin-bottom: 0;
    padding-bottom: 1rem;
    text-align: center;
}
.pi-recipe-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 0.75rem;
}
.pi-recipe-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pi-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a1a3a;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.pi-recipe-header h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
    color: #1a1a3a;
    letter-spacing: -0.01em;
}
.pi-recipe-img {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--pi-gray-200);
    border-bottom: 1px solid var(--pi-gray-200);
    aspect-ratio: 4 / 3;
}
.pi-recipe-body {
    padding: 1.25rem 1.5rem 1.25rem;
    background: #eaeaea;

}
.pi-recipe-body h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: #1a1a3a;
    line-height: 1.3;
}
.pi-recipe-body p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #555;
    margin: 0 0 0.9rem;
}
.pi-recipe-btn {
    display: inline-block;
    background: #6b2e8e;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    text-decoration: none;
}
.pi-recipe-credit {
    display: inline-block;
    background: #6b2e8e;
    color: #fff;
    padding: 0.6rem 1.25rem;
    margin: 0 auto;
    border-radius: 6px;
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
    max-width: calc(100% - 3rem);
}
.pi-recipe-share {
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    color: #1a1a3a;
    background: #eaeaea;
    padding: 0.85rem 1rem 1rem;
    border-radius: 0;
    margin: 0;
}

/* Newsletter footer banner (purple) */
.pi-nl-footer {
    background: #5d1882;
    color: #fff;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
.pi-nl-footer h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
    color: #fff;
}
.pi-nl-footer .pi-nl-footer-venue {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #fff;
}
.pi-nl-footer p {
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 0.25rem;
    color: rgba(255,255,255,0.92);
}
.pi-nl-footer a {
    color: #fff;
    text-decoration: underline;
}
.pi-nl-footer-note {
    font-size: 0.82rem !important;
    font-style: italic;
    color: rgba(255,255,255,0.8) !important;
    margin: 1.25rem 0 1rem !important;
}
.pi-nl-footer-social {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 0.5rem;
}
.pi-nl-footer-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
}

/* EGGstory section */
.pi-eggstory {
    padding: 1.25rem 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
}
.pi-eggstory-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #f0e5c8;
    border-radius: 999px;
    padding: 0.4rem 1rem 0.4rem 0.5rem;
    margin-bottom: 1.25rem;
    font-weight: 800;
    color: #1a1a3a;
    font-size: 1rem;
}
.pi-eggstory-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pi-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1a1a3a;
    font-size: 0.95rem;
}
.pi-eggstory-img { aspect-ratio: 16 / 9; }
.pi-eggstory-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a3a;
    margin: 0 0 0.65rem;
    line-height: 1.35;
}
.pi-eggstory-text {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #555;
    margin: 0 0 1rem;
}

/* --- Newsletter masthead (print-style header) --- */
.pi-nl-shell {
    background: linear-gradient(180deg, #f6f8fc 0%, #eef3f9 100%);
}
.pi-nl-shell-content {
    background: #fff;
    border: 1px solid var(--pi-gray-200);
    border-radius: 14px;
    box-shadow: var(--pi-shadow-sm);
    padding: 1.25rem;
    margin-top: 1rem;
}
.pi-nl-masthead {
    overflow: hidden;
    padding: 2px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--pi-gray-200);
    box-shadow: var(--pi-shadow-sm);
}
.pi-nl-titlebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    background: #fff;
}
.pi-nl-ipema-logo {
    background: var(--pi-yellow);
    border-right: 1px solid var(--pi-gray-200);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    position: relative;
    margin-right: 2px;
}
.pi-nl-ipema-logo img {
    max-width: 250px;
    max-height: 350px;
    object-fit: contain;
}
.pi-nl-ipema-logo .pi-nl-placeholder-text {
    display: none;
}
.pi-nl-ipema-logo.pi-nl-placeholder-logo .pi-nl-placeholder-text {
    display: block;
    width: 100px;
    height: 100px;
    border: 2px dashed var(--pi-gray-400);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pi-gray-500);
    text-align: center;
    line-height: 1.2;
}
.pi-nl-title-panel {
    background: var(--pi-yellow);
    color: var(--pi-black);
    padding: 0 0 1.25rem 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    position: relative;
    margin-left: 2px;
}
.pi-nl-title-main {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
}
.pi-nl-title-sub {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.1rem;
}
.pi-nl-title-date {
    position: absolute;
    right: 1.5rem;
    bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.01rem;
    color: var(--pi-black);
}
.pi-nl-banner {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    min-height: 200px;
    margin: 0;
    padding: 0.75rem 0;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--pi-gray-200);
    background: #fff;
}
.pi-nl-banner--split {
    grid-template-columns: 1fr 2.3fr;
}
.pi-nl-banner--single {
    grid-template-columns: 1fr;
}
.pi-nl-banner-expo-img {
    background: #000;
    padding: 0;
    overflow: hidden;
}
.pi-nl-banner-expo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.pi-nl-banner-col {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pi-nl-banner-chick {
    background: #f4f7fa;
    padding: 0;
}
.pi-nl-banner-chick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pi-nl-banner-chick.pi-nl-placeholder-chick {
    background: repeating-linear-gradient(45deg, #e9edf2, #e9edf2 10px, #dfe4eb 10px, #dfe4eb 20px);
}
.pi-nl-banner-chick .pi-nl-placeholder-text {
    display: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--pi-gray-500);
    text-transform: uppercase;
}
.pi-nl-banner-chick.pi-nl-placeholder-chick .pi-nl-placeholder-text { display: block; }
.pi-nl-banner-expo {
    background: var(--pi-black);
    color: #fff;
    flex-direction: column;
    padding: 1.25rem 1rem;
    text-align: center;
    gap: 0.35rem;
}
.pi-nl-expo-heading {
    color: var(--pi-yellow);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
}
.pi-nl-expo-kday {
    font-size: 0.85rem;
    line-height: 1.3;
}
.pi-nl-kday-label { color: #fff; margin-right: 0.25rem; }
.pi-nl-kday-title { color: #e53935; font-weight: 800; font-style: italic; }
.pi-nl-kday-date { display: block; color: #fff; font-weight: 600; margin-top: 0.1rem; }
.pi-nl-expo-dates {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0;
}
.pi-nl-date-pill {
    background: #fff;
    color: #000;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    line-height: 1.1;
}
.pi-nl-date-pill.is-accent { background: var(--pi-yellow); }
.pi-nl-date-month {
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 0.25rem;
}
.pi-nl-expo-tagline {
    font-size: 0.85rem;
    color: var(--pi-yellow);
    font-weight: 700;
}
.pi-nl-expo-tagline strong { font-size: 1.1rem; }
.pi-nl-expo-org {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.05em;
}
.pi-nl-banner-logo {
    background: radial-gradient(ellipse at center, #3a2600 0%, #1a1100 80%);
    padding: 1rem;
}
.pi-nl-banner-logo img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}
.pi-nl-banner-logo.pi-nl-placeholder-pi {
    background: repeating-linear-gradient(45deg, #2a1d00, #2a1d00 10px, #3a2600 10px, #3a2600 20px);
}
.pi-nl-banner-logo .pi-nl-placeholder-text {
    display: none;
    color: var(--pi-yellow);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
}
.pi-nl-banner-logo.pi-nl-placeholder-pi .pi-nl-placeholder-text {
    display: block;
}
.pi-nl-banner-logo .pi-nl-placeholder-text strong { font-size: 1.5rem; color: #fff; display: block; }
.pi-nl-banner-logo .pi-nl-placeholder-text small { font-size: 0.65rem; opacity: 0.8; display: block; margin-top: 0.35rem; }
.pi-nl-masthead-footer {
    background: var(--pi-yellow);
    color: var(--pi-black);
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
@media (max-width: 767.98px) {
    .pi-nl-titlebar { grid-template-columns: 100px 1fr; }
    .pi-nl-ipema-logo { min-height: 90px; padding: 0.75rem; }
    .pi-nl-title-main { font-size: 1.5rem; }
    .pi-nl-title-sub { font-size: 1rem; letter-spacing: 0.2em; }
    .pi-nl-title-date { position: static; margin-top: 0.35rem; font-size: 0.72rem; }
    .pi-nl-banner { grid-template-columns: 1fr; min-height: 0; }
    .pi-nl-banner-col { min-height: 160px; }
    .pi-nl-masthead-footer { font-size: 0.75rem; padding: 0.5rem; }
    .pi-nl-shell-content { padding: 0.85rem; }
}

/* ============================================================
   NewsItems masthead — pi-nl-masthead variant matching refre.png
   Logo on the left, heading on top-right, date on bottom-right
   with a clean horizontal divider in the right column.
   ============================================================ */
.pi-news-page-masthead {
    margin: 0 0 1.75rem;
}
.pi-news-page-masthead .pi-nl-title-panel {
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    text-align: left !important;
}
.pi-news-page-masthead .pi-nl-title-main {
    padding: 1rem 1.5rem;
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.pi-news-page-masthead .pi-nl-title-date {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    padding: 1rem 1.5rem;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
}
@media (max-width: 767.98px) {
    .pi-news-page-masthead .pi-nl-title-main { font-size: 1rem !important; padding: 0.75rem 1rem; }
    .pi-news-page-masthead .pi-nl-title-date { font-size: 0.78rem !important; padding: 0.6rem 1rem; }
}

/* ============================================================
   Newsletter masthead (April2026, March2026, etc.) — matches refre.png
   Logo on the left, heading on top-right, masthead-footer on bottom-right.
   Footer is INSIDE the right column so it never spans below the logo.
   ============================================================ */
.pi-newsletter-masthead {
    margin: 0 0 1.75rem;
}
.pi-newsletter-masthead .pi-nl-titlebar {
    grid-template-columns: 1.1fr 1fr !important;
    min-height: 200px;
}
.pi-newsletter-masthead .pi-nl-ipema-logo {
    min-height: 200px;
    padding: 1.25rem;
}
.pi-newsletter-masthead .pi-nl-ipema-logo img {
    max-width: 100%;
    max-height: 340px;
}
.pi-newsletter-masthead .pi-nl-title-panel {
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    text-align: center !important;
    margin-left: 2px;
}
.pi-newsletter-masthead .pi-nl-title-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1.5rem;
    gap: 0.25rem;
}
.pi-newsletter-masthead .pi-nl-title-main {
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em;
}
.pi-newsletter-masthead .pi-nl-title-sub {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em;
}
.pi-newsletter-masthead .pi-nl-title-date {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    margin-top: 0.35rem;
}
.pi-newsletter-masthead .pi-nl-title-panel > .pi-nl-masthead-footer {
    background: var(--pi-yellow);
    color: var(--pi-black);
    text-align: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 767.98px) {
    .pi-newsletter-masthead .pi-nl-titlebar { grid-template-columns: 1.1fr 1fr !important; min-height: 130px; }
    .pi-newsletter-masthead .pi-nl-ipema-logo { min-height: 130px; padding: 0.6rem; }
    .pi-newsletter-masthead .pi-nl-ipema-logo img { max-height: 190px; }
    .pi-newsletter-masthead .pi-nl-title-heading { padding: 0.75rem 0.85rem; }
    .pi-newsletter-masthead .pi-nl-title-main { font-size: 1.25rem !important; }
    .pi-newsletter-masthead .pi-nl-title-sub { font-size: 0.75rem !important; letter-spacing: 0.18em; }
    .pi-newsletter-masthead .pi-nl-title-date { font-size: 0.72rem !important; }
    .pi-newsletter-masthead .pi-nl-title-panel > .pi-nl-masthead-footer { font-size: 0.75rem; padding: 0.5rem 0.85rem; }
}

/* --- Report / case-study article layout (hero + numbered sections) --- */
.pi-report {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 3rem;
    color: #1a1a1a;
}
.pi-report-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: var(--pi-gray-900, #1a1a1a);
    overflow: hidden;
    margin-bottom: 2.5rem;
    border-radius: 8px;
}
.pi-report-hero-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 12px, #333 12px, #333 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 2rem;
}
.pi-report-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pi-report-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem;
    color: #fff;
}
.pi-report-hero-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pi-yellow);
    margin-bottom: 0.75rem;
}
.pi-report-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
    max-width: 760px;
}
/* Normal article layout: the page-header above already shows the article title,
   so the duplicate kicker + title overlaid on the report hero image are hidden
   (the hero shows the banner image only). */
.pi-report-hero-kicker,
.pi-report-hero-title { display: none !important; }
/* When the report hero has no image, collapse the empty banner so no space is reserved. */
.pi-report-hero.pi-jan-ph { display: none !important; }
/* Round-up / article-modern: if the featured image is missing, collapse the
   placeholder so no empty image space is reserved. */
.pi-article-modern .pi-article-featured.pi-jan-ph { display: none !important; }
.pi-report-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--pi-gray-200);
    border-radius: 6px;
    margin-bottom: 3rem;
    overflow: hidden;
}
.pi-report-fact {
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--pi-gray-200);
}
.pi-report-fact:last-child { border-right: none; }
.pi-report-fact-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pi-gray-500);
    margin-bottom: 0.4rem;
    display: block;
}
.pi-report-fact-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
}
.pi-report-section {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 1.75rem;
    margin-bottom: 3rem;
}
.pi-report-number {
    font-family: Georgia, serif;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    color: var(--pi-yellow);
    font-style: italic;
}
.pi-report-section-body h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0.35rem 0 1rem;
    color: #1a1a1a;
}
.pi-report-section-body p {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 0 0 1rem;
    color: #2a2a2a;
}
.pi-report-section-body p:last-child { margin-bottom: 0; }
.pi-report-section-body .pi-report-inline-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem 0;
    border-radius: 4px;
    background: var(--pi-gray-100);
}
.pi-report-section-body .pi-img-placeholder { margin: 1.5rem 0; aspect-ratio: 16 / 9; }
.pi-report-callout {
    background: #111;
    color: #fff;
    padding: 2.5rem 2.75rem;
    margin: 3rem 0;
    border-radius: 6px;
    position: relative;
}
.pi-report-callout::before {
    content: '"';
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 0.8;
    color: var(--pi-yellow);
    position: absolute;
    top: 1.5rem;
    left: 1.75rem;
    opacity: 0.6;
}
.pi-report-callout blockquote {
    font-family: Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.5;
    margin: 0 0 0 3.5rem;
    font-style: italic;
    color: #fff;
}
.pi-report-callout cite {
    display: block;
    margin-top: 1rem;
    margin-left: 3.5rem;
    font-family: -apple-system, sans-serif;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--pi-yellow);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}
.pi-report-partners {
    margin: 3rem 0 0;
    padding: 2rem 0;
    border-top: 1px solid var(--pi-gray-200);
    border-bottom: 1px solid var(--pi-gray-200);
}
.pi-report-partners-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pi-gray-500);
    margin-bottom: 1.25rem;
    text-align: center;
}
.pi-report-partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.pi-report-partner {
    padding: 1rem 0.75rem;
    text-align: center;
    border: 1px solid var(--pi-gray-200);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    background: var(--pi-gray-100);
}
@media (max-width: 767.98px) {
    .pi-report-hero { aspect-ratio: 4 / 3; }
    .pi-report-hero-overlay { padding: 1.5rem; }
    .pi-report-hero-title { font-size: 1.6rem; }
    .pi-report-facts { grid-template-columns: 1fr; }
    .pi-report-fact { border-right: none; border-bottom: 1px solid var(--pi-gray-200); }
    .pi-report-fact:last-child { border-bottom: none; }
    .pi-report-section { grid-template-columns: 1fr; gap: 0.5rem; }
    .pi-report-number { font-size: 2.25rem; }
    .pi-report-section-body h2 { font-size: 1.3rem; }
    .pi-report-callout { padding: 2rem 1.5rem; }
    .pi-report-callout::before { font-size: 3.5rem; left: 1rem; }
    .pi-report-callout blockquote, .pi-report-callout cite { margin-left: 2.25rem; font-size: 1.1rem; }
    .pi-report-partners-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Memorial / condolence article layout --- */
.pi-memorial {
    max-width: 620px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
    text-align: center;
    color: #2a2a2a;
    font-family: Georgia, "Times New Roman", serif;
}
.pi-memorial-kicker {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--pi-gray-500);
    padding: 0 1rem;
    margin-bottom: 2rem;
    position: relative;
}
.pi-memorial-kicker::before,
.pi-memorial-kicker::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--pi-gray-400);
    vertical-align: middle;
    margin: 0 0.75rem;
}
.pi-memorial-portrait {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin: 0 auto 2rem;
    border: 5px solid var(--pi-white);
    box-shadow: 0 0 0 1px var(--pi-gray-300);
    background: var(--pi-gray-100);
}
.pi-memorial-portrait-placeholder {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: var(--pi-gray-100);
    border: 1px dashed var(--pi-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    color: var(--pi-gray-400);
    font-size: 2.5rem;
}
.pi-memorial-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.15;
    color: #1a1a1a;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}
.pi-memorial-role {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pi-gray-600);
    margin: 0 0 0.5rem;
}
.pi-memorial-dates {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--pi-gray-600);
    margin: 0 0 2rem;
}
.pi-memorial-rule {
    width: 60px;
    height: 1px;
    background: var(--pi-gray-400);
    border: none;
    margin: 0 auto 2.5rem;
}
.pi-memorial-body {
    text-align: left;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: #2a2a2a;
}
.pi-memorial-body p { margin-bottom: 1.5rem; }
.pi-memorial-body p:last-child { margin-bottom: 0; }
.pi-memorial-opening {
    text-align: center;
    font-size: 1.15rem;
    font-style: italic;
    color: #1a1a1a;
    margin-bottom: 2.5rem !important;
    padding: 0 1rem;
    line-height: 1.6;
}
.pi-memorial-closing {
    text-align: center;
    font-family: Georgia, serif;
    font-size: 1.3rem;
    font-style: italic;
    color: #1a1a1a;
    margin: 2.5rem 0 !important;
    letter-spacing: 0.02em;
}
.pi-memorial-signoff {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--pi-gray-200);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    color: var(--pi-gray-600);
    letter-spacing: 0.02em;
}
.pi-memorial-signoff strong {
    color: #1a1a1a;
    font-weight: 600;
    display: block;
    font-size: 1rem;
    margin-top: 0.25rem;
}
@media (max-width: 575.98px) {
    .pi-memorial-name { font-size: 1.75rem; }
    .pi-memorial-portrait, .pi-memorial-portrait-placeholder { width: 220px; height: 220px; }
    .pi-memorial-body { font-size: 1rem; }
}

/* --- Modern article: tight two-column rail layout --- */
.pi-article-modern {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #1a1a1a;
}
.pi-article-modern .pi-article-meta {
    font-size: 0.85rem;
    gap: 1rem;
    color: var(--pi-gray-500);
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--pi-gray-200);
}
.pi-article-modern .pi-article-featured {
    aspect-ratio: auto !important;
    background: transparent !important;
    overflow: visible !important;
    max-width: 220px;
    width: auto !important;
    margin: 0 2rem 1rem 0;
    border-radius: 0 !important;
    float: left;
}
.pi-article-modern .pi-article-featured .pi-article-img {
    margin: 0;
    width: 100%;
    max-width: 220px;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
}
.pi-article-img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 1.25rem 0;
    border-radius: 0;
    background: transparent;
}
.pi-article-intro {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--pi-gray-700);
    border: none;
    padding: 0;
    margin: 0 0 2rem;
    font-weight: 400;
    overflow: hidden;
}
.pi-article-intro p { font-size: 1.15rem !important; line-height: 1.6 !important; margin-bottom: 0.75rem !important; }
.pi-article-intro p:last-child { margin-bottom: 0 !important; }
.pi-article-intro strong { color: #1a1a1a; font-weight: 600; }

/* Centered single-column section layout */
.pi-article-section {
    display: block;
    background: transparent;
    border: none;
    padding: 1.5rem 0;
    margin: 0;
    border-top: 1px solid var(--pi-gray-200);
}
.pi-article-section:first-of-type { border-top: none; padding-top: 0; }
.pi-date-pill {
    display: block;
    background: transparent;
    color: var(--pi-gray-500);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    border-radius: 0;
    margin: 0 0 0.5rem;
    line-height: 1.45;
}
.pi-date-pill i { display: none; }
.pi-article-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.pi-article-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.pi-article-section-head h2 {
    margin: 0 0 1rem;
    text-align: left;
}
.pi-article-section-head .pi-date-pill {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
.pi-article-section .pi-article-img { margin: 1rem auto; }
.pi-article-section .pi-article-img.pi-article-img-left { margin: 1rem 0; }
.pi-article-modern .pi-article-content p {
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #1a1a1a;
}
.pi-article-modern .pi-article-content p:last-child { margin-bottom: 0; }
.pi-article-signoff {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pi-gray-200);
    font-style: normal;
    color: var(--pi-gray-700);
}
.pi-article-signoff p { margin: 0; }
.pi-article-signoff strong { color: #1a1a1a; font-weight: 600; }

/* Month-roundup pages: keep top logo + intro balanced, then start sections left in order */
.pi-monthly-roundup .pi-article-featured {
    max-width: 140px;
    margin: 0 1.75rem 1rem 0;
}

.pi-monthly-roundup .pi-article-featured .pi-article-img {
    width: 140px;
    height: 140px !important;
    object-fit: contain;
}

.pi-monthly-roundup .pi-article-intro {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pi-monthly-roundup .pi-article-content .pi-article-section:first-of-type {
    clear: both;
}

@media (max-width: 767.98px) {
    .pi-article-modern .pi-article-featured { float: none; margin: 0 auto 1.25rem; max-width: 220px; text-align: center; }
    .pi-article-section-head { flex-direction: column; gap: 0.45rem; }
    .pi-article-section-head .pi-date-pill { text-align: left; white-space: normal; }
    .pi-monthly-roundup .pi-article-featured { margin: 0 auto 1.25rem; max-width: 220px; }
    .pi-monthly-roundup .pi-article-featured .pi-article-img { width: 130px; height: 130px !important; margin: 0 auto; }
    .pi-monthly-roundup .pi-article-intro { min-height: 0; display: block; }
    .pi-monthly-roundup .pi-article-content .pi-article-section:first-of-type { clear: none; }
    .pi-article-section { padding: 1rem 0; }
    .pi-article-section h2 { font-size: 1.2rem; }
    .pi-article-intro, .pi-article-intro p { font-size: 1.05rem !important; }
}
.pi-news-thumb-wrap { padding: 0.5rem; }
.pi-news-thumb {
    height: 180px;
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    background: var(--pi-gray-100);
}
.pi-news-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: var(--pi-radius-lg);
}
/* Compact cards for #articles section */
#articles .pi-news-thumb { height: 130px; }
#articles .pi-news-thumb-wrap > div[style*="height: 180px"] { height: 130px !important; }
#articles .pi-card-body { padding: 1rem; }
#articles .pi-card-title { font-size: 0.95rem; line-height: 1.35; }
#articles .pi-card-text { font-size: 0.82rem; line-height: 1.5; }
#articles .pi-card-tag { font-size: 0.65rem; padding: 0.2rem 0.55rem; }
.pi-card-body { padding: 1.5rem; }
.pi-card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.pi-card-text { font-size: 0.9rem; color: var(--pi-gray-600); line-height: 1.6; }
.pi-card-tag { display: inline-block; background: var(--pi-yellow-light); color: var(--pi-gray-800); font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.06em; }

@media (hover: hover) and (pointer: fine) {
    .pi-card:hover { transform: translateY(-6px); box-shadow: var(--pi-shadow-xl); border-color: var(--pi-gray-100); }
    .pi-card:hover::before { transform: scaleX(1); }
    .pi-card:hover .pi-card-img { transform: scale(1.03); }
}

/* --- Image Cards — Replace icon cards with image-based design --- */
.pi-image-card {
    position: relative; border-radius: var(--pi-radius-lg); overflow: hidden;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.pi-image-card .pi-image-card-bg {
    width: 100%; height: 240px; object-fit: cover;
    transition: transform 0.6s var(--ease-out);
}
.pi-image-card .pi-image-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem; color: var(--pi-white);
    transition: background 0.35s var(--ease-out);
}
.pi-image-card h4 {
    color: var(--pi-white);
    font-size: 1rem;
    font-weight: 500;
    min-height: 2.5rem;
    margin-bottom: 0.35rem;
}
.pi-image-card p { color: rgba(255,255,255,0.8); font-size: 0.85rem; margin: 0; line-height: 1.5; }

/* --- Homepage: Exhibition Sectors --- */
.pi-sectors-section {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.pi-sectors-grid .pi-image-card {
    border: 1px solid rgba(17, 24, 39, 0.08);
}

.pi-sectors-grid .pi-image-card .pi-image-card-bg {
    height: 210px;
}

.pi-sectors-grid .pi-image-card .pi-image-card-overlay {
    padding: 1rem;
}

.pi-sector-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.08);
}

.pi-sector-title {
    font-size: 0.96rem;
    line-height: 1.25;
    font-weight: 500;
    min-height: 2.5rem;
    margin-bottom: 0.25rem;
}

.pi-sector-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

.pi-sectors-footer-note {
    color: var(--pi-gray-500);
    font-size: 0.9rem;
}

/* --- Sector Card (image-on-top, text-below layout) --- */
.pi-sector-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(20, 33, 61, 0.08), 0 1px 3px rgba(20, 33, 61, 0.04);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.pi-sector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(20, 33, 61, 0.14), 0 4px 12px rgba(20, 33, 61, 0.06);
}
.pi-sector-card-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--pi-gray-100);
    flex-shrink: 0;
}
.pi-sector-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s var(--ease-out);
}
.pi-sector-card:hover .pi-sector-card-img img { transform: scale(1.05); }

.pi-sector-card-body {
    padding: 1.1rem 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
}
.pi-sector-card-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    background: var(--pi-yellow-light);
    color: var(--pi-black);
    border: 1px solid rgba(255, 200, 0, 0.4);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pi-sector-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pi-black);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.pi-sector-card-desc {
    font-size: 0.85rem;
    color: var(--pi-gray-600);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 575.98px) {
    .pi-sector-card-img { height: 140px; }
    .pi-sector-card-body { padding: 0.9rem 0.85rem 1rem; }
    .pi-sector-card-title { font-size: 0.95rem; }
    .pi-sector-card-desc { font-size: 0.78rem; }
}

@media (hover: hover) and (pointer: fine) {
    .pi-image-card:hover { transform: translateY(-6px); box-shadow: var(--pi-shadow-xl); }
    .pi-image-card:hover .pi-image-card-bg { transform: scale(1.06); }
    .pi-image-card:hover .pi-image-card-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%);
    }
}

/* --- Discover Hyderabad — horizontal card: image left, info right --- */
.pi-discover-card {
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: 320px;
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

/* Left — image area */
.pi-discover-media {
    position: relative;
    overflow: hidden;
    margin: 0.6rem;
    border-radius: calc(var(--pi-radius-lg) - 4px);
}
.pi-discover-carousel {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
}
.pi-discover-slides {
    position: relative;
    flex: 1;
    overflow: hidden;
}
.pi-discover-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transform: translateX(30px) scale(0.98);
    transition: opacity 0.55s var(--ease-out), transform 0.65s var(--ease-out);
}
.pi-discover-slide.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
}
.pi-discover-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    image-orientation: from-image;
}
.pi-discover-dots {
    position: absolute; bottom: 12px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
    z-index: 5;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.pi-discover-card:hover .pi-discover-dots {
    opacity: 1;
    transform: translateY(0);
}
.pi-discover-dot {
    width: 7px; height: 7px;
    padding: 0; border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: background 0.3s, width 0.3s, box-shadow 0.3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.pi-discover-dot.is-active {
    background: var(--pi-yellow);
    width: 20px;
    box-shadow: 0 2px 8px rgba(253,196,15,0.5);
}
.pi-discover-media-label {
    position: absolute; top: 12px; left: 12px; z-index: 5;
}
.pi-discover-pill {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: var(--pi-yellow);
    color: var(--pi-black);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(253,196,15,0.35);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.pi-discover-card:hover .pi-discover-pill {
    opacity: 1;
    transform: translateY(0);
}

/* Right — structured info body */
.pi-discover-body {
    padding: 0.85rem 1.1rem;
    display: flex; flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}
.pi-discover-accent {
    display: block; width: 22px; height: 2px;
    background: var(--pi-yellow);
    border-radius: 2px;
    margin-bottom: 0;
}
.pi-discover-title {
    font-size: 1.35rem; font-weight: 700;
    color: var(--pi-black);
    margin: 0;
    line-height: 1.3;
}
.pi-discover-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--pi-gray-500);
    margin: 0;
}

/* Divider line */
.pi-discover-divider {
    border: none;
    border-top: 1px solid var(--pi-gray-200);
    margin: 0;
}

/* Two-column layout: Famous For (left) + Details (right) */
.pi-discover-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.25rem;
}
.pi-discover-col-left,
.pi-discover-col-right {
    min-width: 0;
}
.pi-discover-col-right {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding-left: 1rem;
    border-left: 1px solid var(--pi-gray-200);
}
.pi-discover-detail-item {
    display: flex; align-items: flex-start; gap: 0.45rem;
    font-size: 0.72rem; line-height: 1.4;
    color: var(--pi-gray-500);
}
.pi-discover-detail-item i {
    color: var(--pi-yellow-dark);
    font-size: 0.78rem;
    margin-top: 1px;
    flex-shrink: 0;
}
.pi-discover-detail-item strong {
    display: block;
    font-size: 0.65rem; font-weight: 700;
    color: var(--pi-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}
.pi-discover-detail-item span {
    display: block;
    color: var(--pi-gray-500);
}

@media (max-width: 767.98px) {
    .pi-discover-columns { grid-template-columns: 1fr; }
    .pi-discover-col-right { padding-left: 0; border-left: none; border-top: 1px solid var(--pi-gray-200); padding-top: 0.55rem; }
}

/* Section blocks — Famous For, Nearby */
.pi-discover-section { margin: 0; }
.pi-discover-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pi-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.3rem;
    display: flex; align-items: center; gap: 0.35rem;
}
.pi-discover-section-title i {
    color: var(--pi-yellow-dark);
    font-size: 0.75rem;
}

/* Bullet points for Famous For */
.pi-discover-points {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.pi-discover-points li {
    position: relative;
    padding-left: 0.85rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--pi-gray-500);
}
.pi-discover-points li::before {
    content: '';
    position: absolute; left: 0; top: 0.5em;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--pi-yellow);
}

/* Nearby location tags */
.pi-discover-tags {
    display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.pi-discover-tag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.66rem; font-weight: 600;
    color: var(--pi-black);
    background: var(--pi-yellow-light, rgba(253,196,15,0.12));
    border: 1px solid rgba(253,196,15,0.25);
    border-radius: 999px;
    white-space: nowrap;
}


/* Gold accent line under title on hover */
.pi-discover-title {
    position: relative;
    display: inline-block;
}
.pi-discover-title::after {
    content: '';
    position: absolute; bottom: -3px; left: 0;
    width: 0; height: 2px;
    background: var(--pi-yellow);
    border-radius: 2px;
    transition: width 0.5s var(--ease-out);
}

/* Hover effects */
@media (hover: hover) and (pointer: fine) {
    .pi-discover-card {
        transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
    }
    .pi-discover-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 56px rgba(0,0,0,0.18), 0 0 0 1px rgba(253,196,15,0.4);
        border-color: rgba(253,196,15,0.3);
    }
    /* Image subtle brightness lift */
    .pi-discover-card:hover .pi-discover-slide.is-active img {
        filter: brightness(1.05) saturate(1.08);
        transition: filter 0.5s var(--ease-out);
    }
    /* Accent bar scales in */
    .pi-discover-accent {
        transform: scaleX(0); transform-origin: left;
        transition: transform 0.5s var(--ease-out) 0.1s;
    }
    .pi-discover-card:hover .pi-discover-accent {
        transform: scaleX(1);
    }
    /* Title underline sweeps in */
    .pi-discover-card:hover .pi-discover-title::after {
        width: 100%;
    }
    /* Explore pill glows */
    .pi-discover-card:hover .pi-discover-pill {
        box-shadow: 0 4px 18px rgba(253,196,15,0.55);
        transition: box-shadow 0.4s var(--ease-out);
    }
    /* Nearby tags shift up slightly staggered */
    .pi-discover-tag {
        transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
    }
    .pi-discover-card:hover .pi-discover-tag {
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(253,196,15,0.2);
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    .pi-discover-card { grid-template-columns: 280px 1fr; grid-template-rows: 280px; }
}
/* Mobile — stack vertically */
@media (max-width: 767.98px) {
    .pi-discover-card { grid-template-columns: 1fr; grid-template-rows: 220px auto; }
}

/* --- Hotel Card — info panel overlays card on hover --- */
/* Keep hovered column above siblings so overlay remains visible. */
.row:has(.pi-hotel-wrap:hover) > .pi-reveal { position: relative; }
.pi-reveal:has(.pi-hotel-wrap:hover) { position: relative; z-index: 30; }

.pi-hotel-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 1;
}
.pi-hotel-wrap:hover { z-index: 30; }

.pi-hotel-info {
    position: absolute; inset: 0;
    width: auto;
    z-index: 4;
    padding: 1.25rem 1.4rem;
    background: rgba(12, 12, 12, 0.4);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--pi-radius-lg);
    color: var(--pi-white);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 20px 44px rgba(0,0,0,0.35);
    transition: transform 0.55s var(--ease-out), opacity 0.4s var(--ease-out);
    display: flex; align-items: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.pi-hotel-wrap-right .pi-hotel-info { left: 0; transform: scale(0.96); }
.pi-hotel-wrap-left  .pi-hotel-info { right: 0; transform: scale(0.96); }

.pi-hotel-info-inner { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
.pi-hotel-info-stars { display: flex; gap: 2px; color: var(--pi-yellow); font-size: 0.85rem; }
.pi-hotel-info-title {
    font-size: 0.98rem; font-weight: 700; margin: 0; color: var(--pi-white); line-height: 1.3;
}
.pi-hotel-info-row {
    display: flex; align-items: flex-start; gap: 0.55rem;
    font-size: 0.8rem; line-height: 1.45;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.pi-hotel-info-row i { color: var(--pi-yellow); font-size: 0.85rem; margin-top: 2px; flex-shrink: 0; }
.pi-hotel-info-link { transition: color 0.25s; }
.pi-hotel-info-link:hover { color: var(--pi-yellow); }

@media (hover: hover) and (pointer: fine) {
    .pi-hotel-wrap:hover .pi-hotel-info,
    .pi-hotel-wrap.is-open .pi-hotel-info {
        opacity: 1;
        pointer-events: auto;
    }
    .pi-hotel-wrap-right:hover .pi-hotel-info,
    .pi-hotel-wrap-right.is-open .pi-hotel-info { transform: scale(1); }
    .pi-hotel-wrap-left:hover  .pi-hotel-info,
    .pi-hotel-wrap-left.is-open  .pi-hotel-info { transform: scale(1); }
}
.pi-hotel-wrap.is-open { z-index: 30; }
.pi-reveal:has(.pi-hotel-wrap.is-open) { position: relative; z-index: 30; }

/* On smaller screens the sibling panel has no room — overlay the card instead */
@media (max-width: 991.98px) {
    .pi-hotel-info {
        background: rgba(12,12,12,0.82);
        transform: translateY(12px) scale(0.98) !important;
    }
    .pi-hotel-wrap:hover .pi-hotel-info {
        transform: translateY(0) scale(1) !important;
    }
}

.pi-hotel-card {
    position: relative;
    display: flex; flex-direction: column;
    width: 100%;
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
    z-index: 2;
}
.pi-hotel-card-media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--pi-gray-200);
}
.pi-hotel-card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out);
}
.pi-hotel-card-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 40%, transparent 70%);
    opacity: 0.85;
    transition: opacity 0.4s var(--ease-out);
}
.pi-hotel-card-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 2px;
    padding: 0.4rem 0.65rem;
    background: rgba(12, 12, 12, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--pi-yellow);
    font-size: 0.78rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.pi-hotel-card-badge i { line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.pi-hotel-card-body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    flex: 1;
}
.pi-hotel-card-title {
    font-size: 1rem; font-weight: 700;
    color: var(--pi-black);
    margin: 0;
    line-height: 1.35;
}
.pi-hotel-card-meta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; color: var(--pi-gray-500);
}
.pi-hotel-card-meta i { color: var(--pi-yellow-dark); font-size: 0.9rem; }

@media (hover: hover) and (pointer: fine) {
    /* Lift the whole wrap so the card AND the sibling info panel move together */
    .pi-hotel-wrap { transition: transform 0.45s var(--ease-out); }
    .pi-hotel-wrap:hover,
    .pi-hotel-wrap.is-open { transform: translateY(-8px); }

    .pi-hotel-wrap:hover .pi-hotel-card,
    .pi-hotel-wrap.is-open .pi-hotel-card {
        box-shadow: 0 24px 50px rgba(0,0,0,0.18), 0 0 0 1px rgba(253,196,15,0.35);
        border-color: transparent;
    }
    .pi-hotel-wrap:hover .pi-hotel-card-media img,
    .pi-hotel-wrap.is-open .pi-hotel-card-media img {
        transform: scale(1.12);
        filter: saturate(1.1) contrast(1.03);
    }
    .pi-hotel-wrap:hover .pi-hotel-card-media::after,
    .pi-hotel-wrap.is-open .pi-hotel-card-media::after { opacity: 0.4; }
}

/* --- Article Page Layout --- */
.pi-article-meta {
    display: flex; flex-wrap: wrap; gap: 1rem;
    font-size: 0.82rem; color: var(--pi-gray-500);
    margin-bottom: 1.25rem;
}
.pi-article-meta i { color: var(--pi-yellow-dark); }
.pi-article-featured {
    margin-bottom: 1.75rem;
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--pi-gray-100);
}
.pi-article-featured img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 576px) {
    .pi-article-featured { aspect-ratio: 4 / 3; }
}
.pi-article-content h2 {
    font-size: 1.2rem; font-weight: 700;
    color: var(--pi-black);
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--pi-yellow);
    display: inline-block;
}
.pi-article-content h2:first-child { margin-top: 0; }
.pi-article-content p {
    font-size: 0.92rem; line-height: 1.75;
    color: var(--pi-gray-600, #555);
    margin-bottom: 0.85rem;
}
.pi-article-content ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
.pi-article-content li {
    font-size: 0.9rem; line-height: 1.7;
    color: var(--pi-gray-600, #555);
    margin-bottom: 0.4rem;
}
.pi-article-content li strong { color: var(--pi-black); }
.pi-article-share {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pi-gray-200);
}

/* --- Exhibition Material Request CTA --- */
.pi-material-request-card {
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-lg);
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.pi-material-request-content {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
.pi-material-request-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pi-yellow);
    border-radius: 16px;
    font-size: 1.75rem;
    color: var(--pi-black);
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(253,196,15,0.3);
}
.pi-material-request-text {
    flex: 1;
}
.pi-material-request-text h3 {
    font-size: 1.3rem; font-weight: 700;
    color: var(--pi-black);
    margin: 0 0 0.5rem;
}
.pi-material-request-text > p {
    font-size: 0.88rem;
    color: var(--pi-gray-500);
    line-height: 1.6;
    margin: 0 0 1rem;
}
.pi-material-request-items {
    display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.pi-material-tag {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem; font-weight: 600;
    color: var(--pi-black);
    background: rgba(253,196,15,0.1);
    border: 1px solid rgba(253,196,15,0.25);
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.pi-material-tag i { font-size: 0.8rem; color: var(--pi-yellow-dark); }
.pi-material-request-action {
    display: flex; flex-direction: column; gap: 0.75rem;
    flex-shrink: 0;
    align-self: center;
}

@media (hover: hover) and (pointer: fine) {
    .pi-material-request-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 44px rgba(0,0,0,0.12), 0 0 0 1px rgba(253,196,15,0.3);
    }
    .pi-material-tag:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(253,196,15,0.25);
    }
}
@media (max-width: 767.98px) {
    .pi-material-request-content { flex-direction: column; gap: 1.25rem; }
    .pi-material-request-card { padding: 1.5rem; }
    .pi-material-request-action { flex-direction: row; width: 100%; }
    .pi-material-request-action .pi-btn { flex: 1; text-align: center; }
}

/* --- Mobile Form Fixes — prevent overflow on small screens --- */
.pi-form { overflow: hidden; }
.pi-form .row { margin-left: 0; margin-right: 0; }

@media (max-width: 767.98px) {
    .form-select, .form-control {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box;
    }
    .form-select {
        background-size: 12px;
        padding-right: 2rem;
        text-overflow: ellipsis;
    }
    .form-select option {
        font-size: 0.82rem;
        white-space: normal;
        word-wrap: break-word;
    }
    .pi-card-body form .row > [class*="col"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .pi-card-body form .form-label {
        font-size: 0.8rem;
    }
    .pi-card-body {
        padding: 1.25rem !important;
    }
    .pi-card {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }
}
@media (max-width: 575.98px) {
    .form-select, .form-control {
        font-size: 0.8rem;
        padding: 0.45rem 0.65rem;
    }
    .form-select {
        padding-right: 1.75rem;
    }
    .pi-card-body {
        padding: 0.85rem !important;
    }
    .pi-btn-lg {
        font-size: 0.82rem;
        padding: 0.6rem 1.25rem;
    }
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* --- Icon Cards v2 (kept for minimal use) --- */
.pi-icon-card { text-align: center; padding: 2.25rem 1.75rem; background: var(--pi-white); border-radius: var(--pi-radius-lg); border: 1px solid var(--pi-gray-200); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); position: relative; overflow: hidden; }
.pi-icon-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--pi-yellow); transform: scaleX(0); transition: transform 0.4s var(--ease-out); }
.pi-icon-card .pi-icon { width: 72px; height: 72px; background: var(--pi-yellow-light); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 1.75rem; color: var(--pi-black); transition: transform 0.3s var(--ease-out-back), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.pi-icon-card h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.pi-icon-card p { font-size: 0.88rem; color: var(--pi-gray-500); margin-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
    .pi-icon-card:hover { transform: translateY(-6px); box-shadow: var(--pi-shadow-lg); }
    .pi-icon-card:hover::after { transform: scaleX(1); }
    .pi-icon-card:hover .pi-icon { background: var(--pi-yellow); transform: scale(1.1) rotate(-3deg); box-shadow: 0 6px 20px rgba(255, 230, 0,0.35); }
}

/* --- Full-Width Image Section with parallax --- */
.pi-image-section {
    position: relative; overflow: hidden;
    min-height: 500px; display: flex; align-items: center;
}
.pi-image-section-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.pi-image-section-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
    background: linear-gradient(135deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 100%);
}
.pi-image-section-content { position: relative; z-index: 2; width: 100%; }

/* --- Sponsor Tiers --- */
.pi-sponsor-tier { margin-bottom: 3rem; }
.pi-sponsor-tier-label { text-align: center; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--pi-gray-400); margin-bottom: 1.25rem; position: relative; }
.pi-sponsor-tier-label::before, .pi-sponsor-tier-label::after { content: ''; position: absolute; top: 50%; width: 25%; height: 1px; background: var(--pi-gray-200); }
.pi-sponsor-tier-label::before { left: 5%; }
.pi-sponsor-tier-label::after { right: 5%; }
.pi-sponsor-logo { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--pi-white); border: 1px solid var(--pi-gray-200); border-radius: var(--pi-radius-md); transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); min-height: 100px; }
.row > [class*="col"] > .pi-sponsor-logo { height: 100%; }
.pi-sponsor-logo img { max-height: 60px; max-width: 100%; filter: none; opacity: 1; transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.pi-as-showcase { padding: 0.75rem 1rem; min-height: auto; }
.pi-as-showcase-img {
    width: 100%;
    max-width: 1180px;
    height: auto;
    max-height: none;
    object-fit: contain;
}
.pi-media-partners-strip-wrap {
    width: 100%;
    max-width: 560px;
    height: 98px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    padding: 0.5rem 0.8rem;
}
.pi-media-partners-strip-img {
    width: 100%;
    height: 100%;
    background-image: url('https://d1lgaej9btm1e7.cloudfront.net/website/sponsors/media-partners.jpg');
    background-repeat: no-repeat;
    background-size: 138% 76%;
    background-position: right center;
}
.pi-official-media-block {
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 0.9rem;
}
.pi-official-media-label {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--pi-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pi-official-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}
.pi-official-media-logo {
    background: transparent;
    border: none;
    border-radius: 10px;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}
.pi-official-media-logo img {
    width: 100%;
    max-height: 70px;
    object-fit: contain;
}
.pi-official-media-block .pi-official-media-logo img {
    width: auto;
    max-width: 100%;
    max-height: 82px;
}
.pi-international-media-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.85rem;
}
.pi-international-media-logo {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    border: 1px solid var(--pi-gray-200);
    border-radius: 10px;
    background: #fff;
}
.pi-international-media-logo img {
    width: auto;
    max-width: 100%;
    max-height: 84px;
    object-fit: contain;
}
@keyframes piIntlMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.pi-international-media-slider {
    overflow: hidden;
    width: 100%;
}
.pi-international-media-slider .pi-international-media-track {
    display: flex;
    gap: 0.85rem;
    width: max-content;
    animation: piIntlMarquee 32s linear infinite;
}
.pi-international-media-slider .pi-international-media-logo {
    flex: 0 0 150px;
}
.pi-international-media-slider:hover .pi-international-media-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .pi-international-media-slider .pi-international-media-track {
        animation: none;
    }
}
.pi-yep-cipa-wrap {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--pi-shadow-sm);
    width: 75%;             /* narrower wrap — height (h-100) untouched */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.pi-yep-cipa-heading {
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    font-weight: 800;
    color: var(--pi-black);
    margin: 0 0 1.1rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.pi-yep-cipa-heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--pi-yellow);
    border-radius: 3px;
    margin: 0.5rem auto 0;
}
@media (max-width: 991.98px) {
    .pi-yep-cipa-wrap { width: 100%; }
}
.pi-supported-by-box {
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--pi-gray-200);
    box-shadow: var(--pi-shadow-sm);
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: center;
}
.pi-supported-by-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pi-black-600);
}
.pi-supported-by-img {
    width: 100%;
    max-width: 240px;
    height: auto;
    object-fit: contain;
    margin: auto 0;
}
.pi-yep-cipa-img {
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 250px;
    object-fit: contain;
    object-position: center;
    display: block;
}
@media (max-width: 767.98px) {
    .pi-official-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }
    .pi-official-media-logo {
        min-height: 72px;
        padding: 0.35rem;
    }
    .pi-official-media-block .pi-official-media-logo img { max-height: 66px; }
    .pi-international-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pi-international-media-logo {
        min-height: 78px;
        padding: 0.35rem;
    }
    .pi-international-media-slider .pi-international-media-logo { flex-basis: 120px; }
    .pi-yep-cipa-img {
        min-height: 170px;
        max-height: 250px;
    }
    .pi-supported-by-box { padding: 0.85rem; }
    .pi-supported-by-img { max-width: 200px; }
}
@media (max-width: 575.98px) {
    .pi-international-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: hover) and (pointer: fine) {
    .pi-sponsor-logo:hover { border-color: var(--pi-yellow); box-shadow: var(--pi-shadow-md); transform: translateY(-3px); }
    .pi-sponsor-logo:hover img { filter: grayscale(0%); opacity: 1; }
}

/* --- Testimonials --- */
.pi-testimonial { background: var(--pi-white); border-radius: var(--pi-radius-lg); padding: 2rem; border: 1px solid var(--pi-gray-200); position: relative; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); height: 100%; display: flex; flex-direction: column; }
.pi-testimonial::before { content: '\201C'; font-size: 5rem; color: var(--pi-yellow); position: absolute; top: 1rem; left: 1.25rem; line-height: 1; font-family: Georgia, serif; opacity: 0.6; }
.pi-testimonial-text { font-size: 0.92rem; color: var(--pi-gray-600); font-style: italic; padding-top: 0; margin-bottom: 0; line-height: 1.65; flex-grow: 1; }
.pi-testimonial-author { font-weight: 700; font-size: 1.05rem; color: var(--pi-black); line-height: 1.25; }
.pi-testimonial-role { font-size: 0.78rem; color: var(--pi-gray-500); margin-top: 0.2rem; line-height: 1.35; }
.pi-testimonial-header { display: flex; align-items: center; gap: 0.95rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--pi-gray-100); }
.pi-testimonial-avatar { width: 110px; height: 110px; border-radius: 50%; background: var(--pi-gray-100); border: 3px solid var(--pi-yellow); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 4px 14px rgba(20, 33, 61, 0.08); flex-shrink: 0; }
.pi-testimonial-avatar i { font-size: 2rem; color: var(--pi-gray-400); }
.pi-testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-testimonial-meta { flex: 1 1 auto; min-width: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.pi-testimonial { text-align: left; }
.pi-testimonial::before { display: none; }

@media (hover: hover) and (pointer: fine) {
    .pi-testimonial:hover { box-shadow: var(--pi-shadow-lg); transform: translateY(-4px); }
}

/* --- Forms --- */
.pi-form .form-control, .pi-form .form-select { border: 2px solid var(--pi-gray-200); border-radius: var(--pi-radius-md); padding: 0.7rem 1rem; font-size: 0.9rem; transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); background-color: var(--pi-white); }
.pi-form .form-control:focus, .pi-form .form-select:focus { border-color: var(--pi-yellow); box-shadow: 0 0 0 4px rgba(255, 230, 0,0.15); }
.pi-form .form-label { font-weight: 600; font-size: 0.83rem; color: var(--pi-gray-700); margin-bottom: 0.4rem; }

/* Dropdown chevron — applied site-wide so every <select> shows a consistent caret */
.form-select, .pi-form .form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 14px 10px;
    padding-right: 2.5rem;
}
.form-select:focus, .pi-form .form-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b8860b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select::-ms-expand { display: none; }

/* --- Footer --- */
.pi-footer { background: var(--pi-gray-900); color: var(--pi-gray-400); padding-top: 4rem; }
.pi-footer h5 { color: var(--pi-white); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem; position: relative; padding-bottom: 0.75rem; }
.pi-footer h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: var(--pi-yellow); border-radius: 3px; }
.pi-footer a { color: var(--pi-gray-400); font-size: 0.88rem; transition: color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out); }
.pi-footer a:hover { color: var(--pi-yellow); padding-left: 4px; }
.pi-footer-links { list-style: none; padding: 0; margin: 0; }
.pi-footer-links li { margin-bottom: 0.6rem; }
.pi-footer-links li a { display: flex; align-items: center; gap: 0.4rem; }
.pi-footer-links li a::before { content: '\203A'; color: var(--pi-yellow); font-weight: 700; font-size: 1.1rem; transition: transform 0.2s var(--ease-out); }
.pi-footer-links li a:hover::before { transform: translateX(3px); }
.pi-footer-supported-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.9rem 1.1rem;
}
.pi-footer-supported-logos img {
    height: 50px;
    width: auto;
    object-fit: contain;
}
.pi-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.25rem 0; margin-top: 2.5rem; font-size: 0.82rem; }
.pi-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pi-radius-full); background: #ffffff; border: 1px solid #ffffff; color: var(--pi-black); margin-right: 0.5rem; transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.pi-footer-map-link { line-height: 1.55; }
.pi-footer-map-link:hover { padding-left: 0 !important; text-decoration: underline; }
.pi-footer-map-link .bi-geo-alt-fill { color: var(--pi-yellow); font-size: 0.85rem; opacity: 0.85; }

@media (hover: hover) and (pointer: fine) {
    .pi-footer-social a:hover { background: var(--pi-yellow); border-color: var(--pi-yellow); color: var(--pi-black); padding-left: 0; transform: translateY(-3px); }
}

/* --- Page Headers --- */
.pi-page-header { background: linear-gradient(135deg, var(--pi-black) 0%, #1a1a2e 100%); color: var(--pi-white); padding: 5rem 0 3rem; text-align: center; position: relative; overflow: hidden; }
.pi-page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 230, 0,0.08) 0%, transparent 70%); }
.pi-page-header h1 { color: var(--pi-white); margin-bottom: 0.5rem; animation: fadeInUp 0.6s var(--ease-out); }
.pi-page-header p { color: var(--pi-gray-400); font-size: 1.05rem; max-width: 600px; margin: 0 auto; animation: fadeInUp 0.6s var(--ease-out) 0.1s both; }

/* --- Breadcrumbs --- */
.pi-breadcrumb { background: var(--pi-gray-50); padding: 0.85rem 0; border-bottom: 1px solid var(--pi-gray-200); }
.pi-breadcrumb .breadcrumb { margin: 0; font-size: 0.82rem; }
.pi-breadcrumb .breadcrumb-item a { color: var(--pi-gray-500); }
.pi-breadcrumb .breadcrumb-item a:hover { color: var(--pi-yellow-dark); }
.pi-breadcrumb .breadcrumb-item.active { color: var(--pi-black); font-weight: 600; }

/* --- Gallery v4 — Scroll-triggered reveal + modern hover --- */
.pi-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* Scroll-triggered entrance */
.pi-gallery-grid .pi-reveal-scale {
    opacity: 0; transform: translateY(20px) scale(0.96);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.pi-gallery-grid .pi-reveal-scale.visible {
    opacity: 1; transform: translateY(0) scale(1);
}
.pi-gallery-grid .pi-reveal-scale:nth-child(2)  { transition-delay: 0.04s; }
.pi-gallery-grid .pi-reveal-scale:nth-child(3)  { transition-delay: 0.08s; }
.pi-gallery-grid .pi-reveal-scale:nth-child(4)  { transition-delay: 0.12s; }
.pi-gallery-grid .pi-reveal-scale:nth-child(n+5) { transition-delay: 0.16s; }

.pi-gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/3;
    background: var(--pi-gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.55s var(--ease-out);
    will-change: transform;
}

.pi-gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(0.15) brightness(0.95);
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), filter 0.6s var(--ease-out);
}

/* Diagonal sheen sweep */
.pi-gallery-item::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 70%);
    z-index: 3; pointer-events: none;
    transform: translateX(-120%);
    transition: transform 0.85s var(--ease-out);
}

/* Gradient overlay for caption */
.pi-gallery-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 30%, transparent 55%);
    z-index: 2; pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
}

/* Caption — slides up with stagger */
.pi-gallery-item .pi-gallery-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1rem 1.1rem;
    z-index: 4;
    color: var(--pi-white);
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s var(--ease-out);
    display: flex; align-items: center; gap: 0.5rem;
}
.pi-gallery-item .pi-gallery-caption::before {
    content: ''; display: inline-block;
    width: 16px; height: 2px; flex-shrink: 0;
    background: var(--pi-yellow); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.45s var(--ease-out) 0.15s;
}

/* Expand icon — glass circle top-right */
.pi-gallery-item .pi-gallery-expand {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: var(--pi-white);
    font-size: 0.8rem;
    z-index: 5;
    opacity: 0;
    transform: scale(0.6) rotate(-45deg);
    transition: opacity 0.4s var(--ease-out), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Category tag — gold pill top-left */
.pi-gallery-item .pi-gallery-tag {
    position: absolute; top: 12px; left: 12px;
    padding: 0.22rem 0.6rem;
    background: var(--pi-yellow);
    color: var(--pi-black);
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    border-radius: 999px;
    z-index: 5;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.35s var(--ease-out) 0.05s, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.05s;
    box-shadow: 0 2px 8px rgba(253,196,15,0.35);
}

/* Inner shadow ring on hover */
.pi-gallery-item .pi-gallery-ring {
    position: absolute; inset: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0 rgba(253,196,15,0);
    z-index: 6; pointer-events: none;
    transition: box-shadow 0.5s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .pi-gallery-item:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 30px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(253,196,15,0.4);
    }
    .pi-gallery-item:hover img {
        transform: scale(1.12);
        filter: grayscale(0) brightness(1.08) saturate(1.15) contrast(1.02);
    }
    .pi-gallery-item:hover::before { transform: translateX(120%); }
    .pi-gallery-item:hover::after { opacity: 1; }
    .pi-gallery-item:hover .pi-gallery-caption {
        transform: translateY(0); opacity: 1;
    }
    .pi-gallery-item:hover .pi-gallery-caption::before { transform: scaleX(1); }
    .pi-gallery-item:hover .pi-gallery-expand {
        opacity: 1; transform: scale(1) rotate(0deg);
    }
    .pi-gallery-item:hover .pi-gallery-expand:hover {
        background: var(--pi-yellow);
        color: var(--pi-black);
        border-color: var(--pi-yellow);
    }
    .pi-gallery-item:hover .pi-gallery-tag {
        opacity: 1; transform: translateX(0);
    }
    .pi-gallery-item:hover .pi-gallery-ring {
        box-shadow: inset 0 0 0 3px rgba(253,196,15,0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pi-gallery-grid .pi-reveal-scale { transform: none; transition: opacity 0.3s; }
    .pi-gallery-item:hover { transform: none; }
    .pi-gallery-item:hover img { transform: none; filter: none; }
    .pi-gallery-item::before { display: none; }
}

/* Gallery "Load More" */
.pi-gallery-more { display: flex; justify-content: center; margin-top: 2rem; }
.pi-gallery-loadmore {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem; font-weight: 600;
    color: #fff; background: var(--pi-dark, #1a1a1a);
    border: 1px solid var(--pi-dark, #1a1a1a); border-radius: 999px;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease, background 0.35s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.pi-gallery-loadmore:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.pi-gallery-loadmore i { font-size: 1.1rem; }
.pi-gallery-loadmore .count { opacity: 0.7; font-weight: 400; font-size: 0.85rem; }

/* Gallery Lightbox */
.pi-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.92); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out);
}
.pi-lightbox.active { opacity: 1; visibility: visible; }
.pi-lightbox img {
    max-width: 90vw; max-height: 85vh; object-fit: contain;
    border-radius: var(--pi-radius-md);
    transform: scale(0.95); opacity: 0;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.pi-lightbox.active img { transform: scale(1); opacity: 1; }
.pi-lightbox-close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    z-index: 3;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: var(--pi-white); width: 48px; height: 48px; border-radius: var(--pi-radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; cursor: pointer;
    transition: transform 0.16s var(--ease-out), background 0.2s var(--ease-out);
}
.pi-lightbox-close:active { transform: scale(0.95); }
.pi-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: var(--pi-white); width: 48px; height: 48px; border-radius: var(--pi-radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer;
    transition: transform 0.16s var(--ease-out), background 0.2s var(--ease-out);
}
.pi-lightbox-nav:active { transform: translateY(-50%) scale(0.95); }
.pi-lightbox-nav.prev { left: 1.5rem; }
.pi-lightbox-nav.next { right: 1.5rem; }

@media (hover: hover) and (pointer: fine) {
    .pi-lightbox-close:hover { background: rgba(255,255,255,0.2); }
    .pi-lightbox-nav:hover { background: rgba(255,255,255,0.2); }
}

/* --- FAQ Accordion --- */
.pi-accordion .accordion-button { font-weight: 600; font-size: 0.95rem; color: var(--pi-black); background: var(--pi-white); border: none; padding: 1.15rem 1.25rem; box-shadow: none !important; }
.pi-accordion .accordion-button:not(.collapsed) { background: var(--pi-yellow-light); color: var(--pi-black); }
.pi-accordion .accordion-button::after { background-image: none; content: '+'; font-size: 1.35rem; font-weight: 700; width: auto; height: auto; color: var(--pi-yellow-dark); }
.pi-accordion .accordion-button:not(.collapsed)::after { content: '\2212'; transform: none; }
.pi-accordion .accordion-item { border: 1px solid var(--pi-gray-200); border-radius: var(--pi-radius-md) !important; margin-bottom: 0.75rem; overflow: hidden; }
.pi-accordion .accordion-body { font-size: 0.9rem; color: var(--pi-gray-600); line-height: 1.7; }

/* --- Exhibitor Search --- */
.pi-exhibitor-search { background: var(--pi-white); border-radius: var(--pi-radius-xl); padding: 1.75rem; box-shadow: var(--pi-shadow-lg); margin-bottom: 2.5rem; border: 1px solid var(--pi-gray-100); }
.pi-exhibitor-card { border: 1px solid var(--pi-gray-200); border-radius: var(--pi-radius-md); padding: 1.25rem; transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); display: flex; align-items: center; gap: 1rem; }
.pi-exhibitor-logo { width: 100px; height: 100px; border-radius: var(--pi-radius-md); object-fit: contain; border: 1px solid var(--pi-gray-100); padding: 0.35rem; flex-shrink: 0; filter: none; opacity: 1; }

@media (hover: hover) and (pointer: fine) {
    .pi-exhibitor-card:hover { border-color: var(--pi-yellow); box-shadow: var(--pi-shadow-md); transform: translateY(-3px); }
}

/* --- CTA Banner v3 --- */
.pi-cta-banner { background: linear-gradient(135deg, var(--pi-black) 0%, #1a1a2e 50%, var(--pi-black) 100%); background-size: 200% 200%; animation: gradientShift 8s ease infinite; padding: 4rem 0; text-align: center; color: var(--pi-white); position: relative; overflow: hidden; }
.pi-cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 230, 0,0.06) 0%, transparent 70%); }
.pi-cta-banner h2 { color: var(--pi-white); margin-bottom: 0.75rem; }
.pi-cta-banner p { color: var(--pi-gray-400); max-width: 550px; margin: 0 auto 2rem; }
.pi-cta-banner .pi-btn-outline-light { border-color: var(--pi-yellow); }

/* --- Parallax Section --- */
.pi-parallax { background-attachment: fixed; background-size: cover; background-position: center; position: relative; }
.pi-parallax > * { position: relative; z-index: 2; }

/* --- Glass Card --- */
.pi-glass { background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--pi-radius-lg); }

/* --- Past Presidents Cards --- */
#presidents .pi-stagger > [class*="col-"] > div { height: 100%; }
#presidents .pi-glass { display: flex; flex-direction: column; }
#presidents .pi-glass h4 { margin-bottom: 0.5rem; }
#presidents .pi-glass p:last-child { margin-bottom: 0; }

.pi-president-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--pi-yellow);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.pi-president-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Logo Showcase --- */
.pi-logo-showcase { text-align: center; padding: 3rem 2rem; }
.pi-logo-showcase img { max-height: 140px; margin-bottom: 1rem; }

/* --- Back to Top --- */
.pi-back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background: var(--pi-yellow); color: var(--pi-black); border: none; border-radius: var(--pi-radius-full); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out), transform 0.16s var(--ease-out), background 0.2s var(--ease-out); z-index: 999; box-shadow: var(--pi-shadow-lg); }
.pi-back-to-top.visible { opacity: 1; visibility: visible; }
.pi-back-to-top:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
    .pi-back-to-top:hover { background: var(--pi-yellow-dark); transform: translateY(-4px); box-shadow: var(--pi-shadow-glow); }
}

/* --- Utility --- */
.pi-text-yellow { color: var(--pi-yellow) !important; }
.pi-text-info { color: var(--pi-info) !important; }
.pi-text-red { color: var(--pi-red) !important; }
.pi-bg-yellow { background-color: var(--pi-yellow) !important; }
.pi-bg-red { background-color: var(--pi-red) !important; }
.pi-text-muted { color: var(--pi-gray-500) !important; }

/* 1 Nation Expo Badge */
.pi-nation-expo { display: inline-flex; align-items: baseline; gap: 0.15rem; font-weight: 800; }
.pi-nation-expo .pi-one { color: var(--pi-red); font-size: 1.6em; line-height: 1; font-style: italic; }
.pi-nation-expo .pi-text { font-size: 0.85em; color: var(--pi-black); line-height: 1.15; }
.pi-fw-900 { font-weight: 900 !important; }
.pi-ls-wide { letter-spacing: 0.12em; }
.pi-border-glow { animation: borderGlow 2.5s ease infinite; }
.pi-gradient-text { background: linear-gradient(135deg, var(--pi-yellow) 0%, #FFE066 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
    }
    .pi-reveal, .pi-reveal-left, .pi-reveal-right, .pi-reveal-scale { opacity: 1; transform: none; }
    .pi-reveal-clip, .pi-reveal-clip-left, .pi-reveal-clip-right { clip-path: none; }
    .pi-stagger > * { opacity: 1; transform: none; animation: none; }
    .pi-hero-logo { animation: none; }
    .pi-hero .pi-edition-badge { animation: none; }
    .pi-cta-banner { animation: none; }
}

/* --- Mobile Navigation --- */
@media (max-width: 991.98px) {
    .pi-site-header { z-index: 1200; }
    .pi-navbar .navbar-brand img { height: 62px; }
    .pi-navbar.scrolled .navbar-brand img { height: 54px; }
    /* Older mobile-collapse rule retained for typography/colors only — positioning is handled
       by the absolute-positioned drop-panel earlier in this stylesheet so we do not re-set
       margin/max-height/background here (it would conflict). */
    .pi-navbar .nav-link { padding: 0.65rem 0.75rem !important; font-size: 0.92rem; border-radius: var(--pi-radius-sm); }
    .pi-navbar .nav-link:hover { background: var(--pi-gray-50); }
    .pi-navbar .nav-link::before { display: none; }
    .pi-hero { min-height: 90vh; }
    .pi-hero h1 { font-size: 2.25rem; }
    .pi-section { padding: 3.5rem 0; }
    .pi-page-header { padding: 3.5rem 0 2rem; }
    .pi-stat-number { font-size: 2.25rem; }
    .pi-countdown-item { min-width: 68px; }
    .pi-image-card .pi-image-card-bg { height: 200px; }
    .pi-image-section { min-height: 400px; }

    .pi-sectors-grid .pi-image-card .pi-image-card-bg {
        height: 195px;
    }
}

@media (max-width: 575.98px) {
    .pi-hero { min-height: 85vh; }
    .pi-hero h1 { font-size: 1.85rem; }
    .pi-countdown { gap: 0.5rem; }
    .pi-countdown-item { min-width: 60px; padding: 0.6rem 0.75rem; }
    .pi-countdown-number { font-size: 1.6rem; }
    .pi-section { padding: 2.5rem 0; }
    .pi-section-header { margin-bottom: 2.5rem; }
    .pi-stat-number { font-size: 1.75rem; }
    .pi-btn-lg { padding: 0.75rem 1.75rem; font-size: 0.88rem; }
    .pi-image-card .pi-image-card-bg { height: 180px; }
    .pi-sectors-grid .pi-image-card .pi-image-card-bg { height: 165px; }
    .pi-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
    .pi-lightbox-nav { width: 40px; height: 40px; font-size: 1rem; }
    .pi-lightbox-close { width: 40px; height: 40px; font-size: 1.2rem; top: 1rem; right: 1rem; }
}

/* ============================================================================
   NEWS / ARTICLES — Horizontal card layout (image left, info right)
   ============================================================================ */
.pi-news-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pi-news-year {
    font-size: 1.45rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 3.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--pi-yellow);
}

.pi-news-month {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pi-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2.5rem;
    margin-bottom: 2.25rem;
}
.pi-news-month i { color: var(--pi-yellow); }

.pi-news-featured-card {
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid var(--pi-gray-200);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    min-height: 260px;
    height: 260px;
}

.pi-news-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    border-color: var(--pi-yellow);
}

.pi-news-featured-card-img {
    flex: 0 0 340px;
    max-width: 340px;
    position: relative;
    overflow: hidden;
    background: var(--pi-gray-100);
}

.pi-news-featured-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.pi-news-featured-card:hover .pi-news-featured-card-img img {
    transform: scale(1.05);
}

.pi-news-featured-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

.pi-news-featured-card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--pi-yellow);
    color: var(--pi-black, #111);
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.pi-news-featured-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.75rem;
    min-width: 0;
}

.pi-news-featured-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--pi-gray-500);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.pi-news-featured-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pi-gray-800, #222);
    line-height: 1.35;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pi-news-featured-card:hover .pi-news-featured-card-title {
    color: var(--pi-yellow-dark, #c49400);
}

.pi-news-featured-card-text {
    font-size: 0.92rem;
    color: var(--pi-gray-600, #555);
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pi-news-featured-card-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pi-gray-200);
}

.pi-news-featured-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.89rem;
    color: var(--pi-gray-600, #555);
    font-weight: 600;
}

.pi-news-featured-card-stats span {
    display: inline-flex;
    align-items: center;
}

.pi-news-featured-card-read {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pi-yellow-dark, #c49400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: transform 0.25s ease;
}

.pi-news-featured-card:hover .pi-news-featured-card-read {
    transform: translateX(4px);
}

@media (max-width: 767.98px) {
    .pi-news-featured-card {
        flex-direction: column;
        min-height: 0;
        height: auto;
    }
    .pi-news-featured-card-img {
        flex: 0 0 auto;
        max-width: 100%;
        height: 220px;
    }
    .pi-news-featured-card-body {
        padding: 1.25rem;
    }
    .pi-news-featured-card-title {
        font-size: 1.1rem;
    }
}

/* ============================================================================
   NEWS DETAIL — Modern layout (banner hero + centered article + sidebar cards)
   ============================================================================ */

/* --- Alternate NewsItems hero — modern full-bleed image, text block lives below --- */
.pi-news-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    background: var(--pi-white);
    min-height: 0;
}
.pi-news-hero-bg {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 560px;
    z-index: 0;
    overflow: hidden;
}
.pi-news-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: none;
}
.pi-news-hero-overlay { display: none !important; }
.pi-news-hero-content {
    max-width: 100%;
    margin: 0;
    text-align: left;
    padding: 2.25rem 0 1.25rem;
    position: relative;
    z-index: 1;
    border-top: 3px solid var(--pi-yellow);
    background: var(--pi-white);
    color: var(--pi-black);
}
.pi-news-hero-title,
.pi-news-hero-subtitle,
.pi-news-hero-meta {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    text-shadow: none;
}
.pi-news-hero-title { color: var(--pi-black); }
.pi-news-hero-subtitle { color: var(--pi-gray-700); }
.pi-news-hero-meta { color: var(--pi-gray-600); }

@media (max-width: 991.98px) {
    .pi-news-hero-bg {
        aspect-ratio: 16 / 10;
        max-height: 360px;
        width: 100%;
        inset: auto;
    }
    .pi-news-hero-content {
        max-width: 100%;
        padding: 1.5rem 0 1rem;
        margin: 0;
    }
}
@media (max-width: 575.98px) {
    .pi-news-hero-bg {
        aspect-ratio: 4 / 3;
        max-height: 320px;
    }
    .pi-news-hero-content {
        padding: 1.15rem 0 0.75rem;
    }
}

/* --- Banner header with background image --- */
.pi-page-header-banner {
    padding: 0;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pi-black);
    position: relative;
    overflow: hidden;
}
.pi-page-header-banner::before {
    background: radial-gradient(ellipse at 50% 70%, rgba(255, 230, 0,0.12) 0%, transparent 75%);
    z-index: 2;
}
.pi-page-header-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.pi-page-header-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(10,10,20,0.55) 100%);
    z-index: 1;
}
.pi-page-header-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%;
    display: block;
    filter: saturate(0.9);
}
.pi-page-header-banner > .container {
    position: relative;
    z-index: 3;
}
.pi-page-header-title-box {
    max-width: 780px;
    margin: 3rem 0;
    padding: 0 1rem 0 0;
    text-align: left;
    animation: fadeInUp 0.7s var(--ease-out);
}
.pi-page-header-title-box h1 {
    color: var(--pi-white);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.pi-page-header-title-box p {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 680px;
    margin: 0;
    text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
@media (max-width: 991.98px) {
    .pi-page-header-banner { min-height: 320px; }
    .pi-page-header-title-box { margin: 2.25rem 0; }
    .pi-page-header-title-box h1 { font-size: 2rem; }
}
@media (max-width: 575.98px) {
    .pi-page-header-banner { min-height: 240px; }
    .pi-page-header-title-box { margin: 1.75rem 0; padding: 0; }
    .pi-page-header-title-box h1 { font-size: 1.55rem; }
    .pi-page-header-title-box p { font-size: 0.95rem; }
}

/* --- Centered modern news content wrapper --- */
.pi-news-modern-wrap {
    max-width: 1080px;
    margin: 0 auto;
}
.pi-news-modern-wrap .pi-article-modern {
    max-width: 820px;
    margin: 0 auto;
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-lg);
    box-shadow: var(--pi-shadow-sm);
    padding: 1.5rem;
}
.pi-news-modern-wrap .pi-article-content { max-width: 72ch; }
.pi-news-modern-wrap .pi-article-content p { margin-bottom: 1rem; line-height: 1.75; }
.pi-news-modern-wrap .pi-article-content p:last-child { margin-bottom: 0; }
.pi-news-modern-wrap .pi-article-content h2,
.pi-news-modern-wrap .pi-article-content h3,
.pi-news-modern-wrap .pi-article-content h4 {
    margin-top: 1.35rem;
    margin-bottom: 0.65rem;
    line-height: 1.3;
}
.pi-news-modern-wrap .pi-article-content ul,
.pi-news-modern-wrap .pi-article-content ol {
    margin: 0.6rem 0 1rem;
    padding-left: 1.2rem;
}
.pi-news-modern-wrap .pi-article-content li {
    margin-bottom: 0.45rem;
    line-height: 1.6;
}
.pi-news-modern-wrap > .row { max-width: 1080px; margin: 1.75rem auto 0; }

/* Old-style NewsItems pages: align to reference layout (content left, rail right) */
@media (min-width: 992px) {
    .pi-news-modern-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
        gap: 1.5rem;
        align-items: start;
    }
    .pi-news-modern-wrap > .pi-article {
        grid-column: 1;
        margin: 0;
    }
    .pi-news-modern-wrap > .row {
        grid-column: 2;
        margin: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 1rem;
    }
    .pi-news-modern-wrap > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    /* Event Details first, then Highlights, then Related */
    .pi-news-modern-wrap > .row > [class*="col-"]:nth-child(2) { order: 1; }
    .pi-news-modern-wrap > .row > [class*="col-"]:nth-child(1) { order: 2; }
    .pi-news-modern-wrap > .row > [class*="col-"]:nth-child(3) { order: 3; }
    /* CTA banner spans full-width below the article + sidebar. (Previously it
       sat in the right rail's 2nd grid row, which left a large empty gap above
       it whenever the article and sidebar columns were different heights.) */
    .pi-news-modern-wrap > .pi-news-cta-banner {
        grid-column: 1 / -1;
        margin-top: 1.25rem !important;
    }
    .pi-news-modern-wrap > .d-flex.justify-content-between {
        grid-column: 1 / -1;
    }
}

/* --- Sidebar cards (Highlights / Event Details / Related News) --- */
.pi-news-facts-strip {
    padding: 0.9rem 0 0.25rem;
}
.pi-news-facts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}
.pi-news-fact-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-md);
    padding: 0.65rem 0.8rem;
}
.pi-news-fact-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pi-yellow-light);
    color: var(--pi-yellow-dark);
    flex-shrink: 0;
}
.pi-news-fact-text { min-width: 0; }
.pi-news-fact-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pi-gray-500);
    margin-bottom: 0.1rem;
}
.pi-news-fact-text strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--pi-black);
}

.pi-news-detail { padding-right: 0.25rem; }
.pi-news-lead {
    font-size: 1.02rem;
    line-height: 1.78;
    margin-bottom: 1.35rem;
}
.pi-news-block { margin-top: 1.35rem; }
.pi-news-block-header {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-bottom: 0.65rem;
}
.pi-news-block-number {
    color: var(--pi-yellow-dark);
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
}
.pi-news-block h2 { margin: 0; }
.pi-news-quote {
    margin: 1rem 0;
    padding: 0.95rem 1rem;
    border-left: 4px solid var(--pi-yellow);
    background: var(--pi-gray-50);
    border-radius: 10px;
}
.pi-news-quote i { color: var(--pi-yellow-dark); }
.pi-news-quote p { margin: 0.4rem 0 0.5rem; }
.pi-news-quote cite { color: var(--pi-gray-600); font-style: italic; }
.pi-news-featured-img {
    margin: 1.2rem 0 1.5rem;
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    border: 1px solid var(--pi-gray-200);
    background: var(--pi-white);
}
.pi-news-featured-img img { width: 100%; display: block; }
.pi-news-img-caption {
    display: block;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    color: var(--pi-gray-600);
    border-top: 1px solid var(--pi-gray-200);
}
.pi-news-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0.8rem 0 1rem;
}
.pi-news-stat {
    border: 1px solid var(--pi-gray-200);
    border-radius: 10px;
    padding: 0.65rem 0.7rem;
    text-align: center;
    background: #fff;
}
.pi-news-stat-number { display: block; font-size: 1.02rem; font-weight: 700; color: var(--pi-black); }
.pi-news-stat-label { display: block; font-size: 0.72rem; color: var(--pi-gray-500); }
.pi-news-highlight-box {
    margin: 0.9rem 0 1rem;
    border: 1px solid var(--pi-yellow);
    border-radius: 12px;
    background: var(--pi-yellow-light);
    padding: 0.85rem;
    display: flex;
    gap: 0.75rem;
}
.pi-news-highlight-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #fff;
    color: var(--pi-yellow-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pi-news-dignitaries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.7rem;
}
.pi-news-dignitary {
    border: 1px solid var(--pi-gray-200);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    background: #fff;
}
.pi-news-dignitary i { color: var(--pi-yellow-dark); margin-top: 0.12rem; }
.pi-news-dignitary span { display: block; font-size: 0.76rem; color: var(--pi-gray-500); }
.pi-news-share {
    margin-top: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pi-news-share-label { font-weight: 600; color: var(--pi-gray-700); }
.pi-news-share-icons { display: flex; gap: 0.5rem; }
.pi-news-share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--pi-gray-300);
    color: var(--pi-gray-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.pi-news-sidebar-cta {
    text-align: center;
    padding: 1rem;
}
.pi-news-sidebar-cta-icon { font-size: 1.7rem; color: var(--pi-yellow-dark); margin-bottom: 0.35rem; }
.pi-news-sidebar-cta-date { font-size: 0.82rem; color: var(--pi-gray-500); margin-bottom: 0.75rem; }

.pi-news-sidebar-card {
    background: var(--pi-white);
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    box-shadow: var(--pi-shadow-sm);
    height: 100%;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.pi-news-sidebar-card-header {
    background: var(--pi-gray-50);
    color: var(--pi-black);
    padding: 0.85rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--pi-gray-200);
    display: flex;
    align-items: center;
}
.pi-news-sidebar-card-header i { color: var(--pi-yellow-dark); }
.pi-news-sidebar-card-body { padding: 1rem 1.1rem; }
.pi-news-sidebar-card-body.p-0 { padding: 0 !important; }

.pi-news-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pi-news-sidebar-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--pi-gray-700);
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--pi-gray-200);
}
.pi-news-sidebar-list li:last-child { border-bottom: none; }
.pi-news-sidebar-list li i {
    color: var(--pi-success);
    flex-shrink: 0;
    margin-top: 0.2rem;
    font-size: 0.95rem;
}

.pi-news-sidebar-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--pi-gray-200);
}
.pi-news-sidebar-row:last-child { border-bottom: none; padding-bottom: 0; }
.pi-news-sidebar-row:first-child { padding-top: 0; }
.pi-news-sidebar-row > i {
    color: var(--pi-yellow-dark);
    flex-shrink: 0;
    margin-top: 0.2rem;
    font-size: 1rem;
}
.pi-news-sidebar-row > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pi-news-sidebar-label {
    font-size: 0.68rem;
    color: var(--pi-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.pi-news-sidebar-row strong {
    color: var(--pi-black);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    word-wrap: break-word;
}

.pi-news-sidebar-related {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.78rem 1rem;
    border-bottom: 1px solid var(--pi-gray-100);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s var(--ease-out);
}
.pi-news-sidebar-related:last-child { border-bottom: none; }
.pi-news-sidebar-related:hover { background: var(--pi-gray-50); color: inherit; text-decoration: none; }
.pi-news-sidebar-related img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--pi-radius-md);
    flex-shrink: 0;
    background: var(--pi-gray-100);
}
.pi-news-sidebar-related > div { min-width: 0; flex: 1; }
.pi-news-sidebar-related strong {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--pi-black);
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 600;
    margin-bottom: 0.2rem;
    transition: color 0.2s var(--ease-out);
}
.pi-news-sidebar-related strong::before {
    content: "\f285";
    font-family: "bootstrap-icons";
    font-size: 0.72rem;
    color: var(--pi-yellow-dark);
    line-height: 1;
    flex-shrink: 0;
}
.pi-news-sidebar-related span {
    font-size: 0.72rem;
    color: var(--pi-gray-500);
}
.pi-news-sidebar-related:hover strong { color: var(--pi-yellow-dark); }

@media (hover: hover) and (pointer: fine) {
    .pi-news-sidebar-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--pi-shadow-md);
        border-color: var(--pi-gray-300);
    }
}

@media (max-width: 991.98px) {
    .pi-news-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pi-news-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .pi-news-facts-grid,
    .pi-news-stats-row,
    .pi-news-dignitaries { grid-template-columns: 1fr; }
}

/* --- News inline CTA banner --- */
.pi-news-cta-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--pi-black) 0%, #1a1a2e 100%);
    color: var(--pi-white);
    padding: 2.1rem 2.25rem;
    border-radius: var(--pi-radius-lg);
    position: relative;
    overflow: hidden;
}
.pi-news-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 100% 0%, rgba(255, 230, 0,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.pi-news-cta-content {
    position: relative;
    z-index: 2;
    flex: 1 1 280px;
}
.pi-news-cta-content h3 {
    color: var(--pi-white);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    letter-spacing: -0.005em;
}
.pi-news-cta-content p {
    color: rgba(255,255,255,0.78);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.45;
}
.pi-person-card {
    background: #fff;
    border: 1px solid var(--pi-gray-200);
    border-radius: var(--pi-radius-lg);
    box-shadow: var(--pi-shadow-sm);
    padding: 1.1rem 1rem 1.2rem;
    text-align: center;
    height: 100%;
}
.pi-person-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--pi-yellow-light);
    background: var(--pi-gray-100);
}
.pi-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.pi-person-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    background: var(--pi-yellow-light);
    color: var(--pi-black);
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
}
.pi-person-role-badge-muted {
    background: var(--pi-gray-100);
    color: var(--pi-gray-700);
}
.pi-person-name { font-size: 1rem; margin-bottom: 0.2rem; }
.pi-person-title { font-size: 0.86rem; color: var(--pi-gray-600); margin-bottom: 0.2rem; }
.pi-person-company { font-size: 0.8rem; color: var(--pi-gray-500); margin-bottom: 0; }
.pi-news-cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
@media (max-width: 575.98px) {
    .pi-news-cta-banner { padding: 1.15rem 1.15rem; }
    .pi-news-cta-actions { width: 100%; }
    .pi-news-cta-actions .pi-btn { flex: 1; text-align: center; justify-content: center; }
    .pi-news-modern-wrap .pi-article-modern { padding: 1rem; }
}

/* --- Sponsor / Partner Marquee (used on /Sponsors and home page) --- */
.pi-marquee-section { padding: 3rem 0; border-bottom: 1px solid var(--pi-gray-100); }
.pi-marquee-section:last-of-type { border-bottom: none; }
.pi-marquee-section.alt { background: var(--pi-gray-100); }

.pi-marquee-heading { text-align: center; margin-bottom: 2rem; }
.pi-marquee-heading h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 700; color: var(--pi-black); margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.pi-marquee-heading p { color: var(--pi-gray-500); font-size: 0.95rem; margin: 0; }
.pi-marquee-heading-bar { display: inline-block; width: 56px; height: 3px; background: var(--pi-yellow); border-radius: 3px; margin-top: 0.6rem; }

.pi-marquee { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.pi-marquee-track { display: flex; gap: 2rem; width: max-content; animation: pi-marquee-scroll var(--pi-marquee-speed, 30s) linear infinite; }
.pi-marquee:hover .pi-marquee-track { animation-play-state: paused; }
.pi-marquee-track.reverse { animation-direction: reverse; }
@keyframes pi-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.pi-marquee-item { flex-shrink: 0; width: 180px; height: 100px; background: transparent; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; padding: 0.2rem; overflow: hidden; position: relative; }
/* Border ring overlay removed — images now float without a visible frame */
.pi-marquee-item::after { content: none; }
.pi-marquee-item:hover { box-shadow: none; }
.pi-marquee-item img { width: 90%; height: 90%; object-fit: contain; display: block; border: none; outline: none; background: transparent; transition: transform 0.3s var(--ease-out); transform-origin: center center; position: relative; z-index: 1; }
.pi-marquee-item:hover img { transform: scale(1.15); }

.pi-marquee-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; background: #fff; border: 1px dashed var(--pi-gray-200); border-radius: 12px; color: var(--pi-gray-500); font-size: 0.9rem; text-align: center; padding: 1.5rem; margin: 0 auto; max-width: 720px; }
.pi-marquee-empty i { font-size: 1.4rem; color: var(--pi-yellow); margin-right: 0.5rem; vertical-align: middle; }
.pi-marquee-static { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 1.75rem; padding: 0 1rem; }

@media (max-width: 575.98px) {
    .pi-marquee-item { width: 140px; height: 80px; padding: 0.15rem; }
    .pi-marquee-track { gap: 1.2rem; }
    .pi-marquee-section { padding: 2.25rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pi-marquee-track { animation: none; }
}

/* --- Mission / Vision cards (About page) --- */
.pi-mv-card {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem 1.5rem 1.5rem 1.4rem;
    margin-top: 1.75rem;
    background: #fff;
    border: 1px solid var(--pi-gray-100);
    border-left: 4px solid var(--pi-yellow);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(20, 33, 61, 0.06);
}
.pi-mv-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pi-yellow-light);
    color: var(--pi-yellow-dark, #F4C400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-top: 0.15rem;
}
.pi-mv-body { flex: 1 1 auto; min-width: 0; }
.pi-mv-body .pi-about-heading { margin: 0 0 0.5rem; font-size: 1.35rem; line-height: 1.25; }
.pi-mv-body p { margin: 0; color: var(--pi-gray-700); line-height: 1.65; }

@media (max-width: 575.98px) {
    .pi-mv-card { padding: 1.1rem 1.1rem 1.1rem 1rem; gap: 0.85rem; }
    .pi-mv-icon { width: 46px; height: 46px; font-size: 1.3rem; }
    .pi-mv-body .pi-about-heading { font-size: 1.15rem; }
}

/* Exhibitors section — smaller cards/images than the other marquees */
.pi-exhibitor-reveal-grid .pi-marquee-item { width: auto; height: 70px; padding: 0.65rem 0.85rem; }
.pi-exhibitor-reveal-grid .pi-marquee-item img { width: 100%; height: 100%; }
@media (max-width: 575.98px) {
    .pi-exhibitor-reveal-grid .pi-marquee-item { height: 55px; padding: 0.45rem 0.6rem; }
}

/* Featured brands — show a little larger inside their exhibitor card */
.pi-exhibitor-reveal-grid .pi-marquee-item:has(img[alt^="Alltech"]),
.pi-exhibitor-reveal-grid .pi-marquee-item:has(img[alt^="DSM"]),
.pi-exhibitor-reveal-grid .pi-marquee-item:has(img[alt^="Symaga"]) {
    padding: 0.1rem 0.2rem;
}
.pi-exhibitor-reveal-grid .pi-marquee-item img[alt^="Alltech"],
.pi-exhibitor-reveal-grid .pi-marquee-item img[alt^="DSM"],
.pi-exhibitor-reveal-grid .pi-marquee-item img[alt^="Symaga"] {
    width: 100%;
    height: 100%;
    transform: scale(1.18);
}
.pi-exhibitor-reveal-grid .pi-marquee-item:hover img[alt^="Alltech"],
.pi-exhibitor-reveal-grid .pi-marquee-item:hover img[alt^="DSM"],
.pi-exhibitor-reveal-grid .pi-marquee-item:hover img[alt^="Symaga"] {
    transform: scale(1.32);
}

/* ============================================================
   NAVBAR V2.1 — 3-tier: topbar + brand strip + dedicated menu bar
   Inspiration: IPPE / EuroTier / Gulfood / VIV Asia / SPACE
   ============================================================ */

/* TIER 2 — Brand strip (logo + event mini-info + register CTA) */
.pi-brandstrip {
    background: #ffffff;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.pi-brandstrip-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.85rem 0;
    min-height: 84px;
}
.pi-brandstrip-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.pi-brandstrip-brand img {
    height: 64px;
    max-height: 64px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}
.pi-brandstrip-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 auto;
}
.pi-brandstrip-info-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0.85rem;
    border-left: 3px solid var(--pi-yellow);
}
.pi-brandstrip-info-item i {
    font-size: 1.4rem;
    color: var(--pi-yellow-dark, var(--pi-yellow));
}
.pi-brandstrip-info-item small {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-gray-500, #6b7280);
    font-weight: 700;
}
.pi-brandstrip-info-item strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pi-black);
    margin-top: 0.1rem;
    letter-spacing: 0.01em;
}
.pi-brandstrip-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    margin-left: auto;
}
.pi-brandstrip-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}
.pi-brandstrip-cta--ghost {
    color: var(--pi-black);
    border-color: var(--pi-black);
    background: transparent;
}
.pi-brandstrip-cta--ghost:hover {
    background: var(--pi-black);
    color: var(--pi-yellow);
}
.pi-brandstrip-cta--solid {
    background: var(--pi-yellow);
    color: var(--pi-black);
    border-color: var(--pi-yellow);
    box-shadow: 0 8px 18px rgba(255, 230, 0, 0.32);
}
.pi-brandstrip-cta--solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(255, 230, 0, 0.5);
}
.pi-brandstrip-burger {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--pi-black);
    border: 0;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.pi-brandstrip-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--pi-yellow);
    border-radius: 2px;
}

/* TIER 3 — Dedicated menu bar (the missing layer) */
.pi-menubar {
    background: var(--pi-black);
    color: var(--pi-white);
    border-bottom: 3px solid var(--pi-yellow);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: relative;
    z-index: 1000;
}
.pi-menubar-collapse { display: contents; }
.pi-menubar-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
.pi-menubar-item { position: relative; }
.pi-menubar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.95rem 1.25rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.pi-menubar-link:hover,
.pi-menubar-link:focus,
.pi-menubar-link.is-active {
    color: var(--pi-yellow);
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: var(--pi-yellow);
}
.pi-menubar-link.dropdown-toggle::after {
    border-top-color: currentColor;
    margin-left: 0.4rem;
    opacity: 0.7;
}
.pi-menubar-dropdown {
    border: 0;
    border-top: 3px solid var(--pi-yellow);
    border-radius: 0 0 12px 12px;
    background: #fff;
    padding: 0.6rem 0;
    min-width: 280px;
    box-shadow: 0 22px 44px rgba(20, 33, 61, 0.22);
    margin: 0;
}
.pi-menubar-dropdown .dropdown-item {
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    color: var(--pi-gray-700);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    transition: background 0.15s ease, padding-left 0.15s ease;
}
.pi-menubar-dropdown .dropdown-item i {
    color: var(--pi-yellow-dark, var(--pi-yellow));
    font-size: 1rem;
    width: 18px;
    text-align: center;
}
.pi-menubar-dropdown .dropdown-item:hover {
    background: rgba(255, 230, 0, 0.10);
    color: var(--pi-black);
    padding-left: 1.4rem;
}
.pi-menubar-dropdown .pi-highlight {
    background: rgba(255, 230, 0, 0.16);
    font-weight: 700;
    color: var(--pi-black);
}

/* Mobile — collapse menubar inside burger toggle, hide info row */
@media (max-width: 991.98px) {
    .pi-brandstrip-row { min-height: 64px; gap: 0.5rem; padding: 0.55rem 0; }
    .pi-brandstrip-brand img { height: 52px; max-width: 160px; }
    .pi-brandstrip-cta { padding: 0.5rem 0.85rem; font-size: 0.74rem; }
    .pi-brandstrip-cta--solid span { display: none; }
    .pi-brandstrip-cta--solid i { font-size: 1.1rem; }

    .pi-menubar { border-bottom: none; border-top: 1px solid rgba(255,255,255,0.08); }
    .pi-menubar-collapse { display: none; flex-basis: 100%; }
    .pi-menubar-collapse.show,
    .pi-menubar-collapse.collapsing { display: block; }
    .pi-menubar-list { flex-direction: column; align-items: stretch; }
    .pi-menubar-link { padding: 0.95rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 0; }
    .pi-menubar-link.is-active,
    .pi-menubar-link:hover { background: rgba(255, 230, 0,0.10); }
    .pi-menubar-dropdown {
        background: rgba(255,255,255,0.04);
        box-shadow: none;
        border-radius: 0;
        border-top: 0;
        padding: 0.2rem 0 0.4rem 0.85rem;
        min-width: 0;
    }
    .pi-menubar-dropdown .dropdown-item { color: rgba(255,255,255,0.85); }
    .pi-menubar-dropdown .dropdown-item:hover { color: var(--pi-yellow); background: transparent; }
}

/* ============================================================
   (legacy) NAVBAR V2 — single-row variant (deprecated, kept for ref)
   ============================================================ */
.pi-navv2 {
    background: #ffffff;
    border-bottom: 1px solid rgba(20, 33, 61, 0.08);
    box-shadow: 0 1px 0 rgba(20, 33, 61, 0.04), 0 6px 22px rgba(20, 33, 61, 0.04);
    position: relative;
    z-index: 1050;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.pi-navv2-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 78px;
    padding: 0.55rem 0;
}
.pi-navv2-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 0.5rem;
}
.pi-navv2-brand img {
    height: 76px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
.pi-navv2-collapse { display: contents; }
.pi-navv2-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 auto 0 0.75rem;
    padding: 0;
    gap: 0.15rem;
}
.pi-navv2-menu > li { position: relative; }
.pi-navv2-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.95rem;
    color: var(--pi-black);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    position: relative;
}
.pi-navv2-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.3rem;
    width: 0;
    height: 2px;
    background: var(--pi-yellow);
    transform: translateX(-50%);
    transition: width 0.28s var(--ease-out);
    border-radius: 2px;
}
.pi-navv2-link:hover,
.pi-navv2-link:focus,
.pi-navv2-link.is-active { color: var(--pi-yellow-dark, var(--pi-yellow)); }
.pi-navv2-link:hover::after,
.pi-navv2-link.is-active::after { width: 60%; }

/* Dropdown caret cue */
.pi-navv2-link.dropdown-toggle::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 0.15rem;
    opacity: 0.5;
    order: 2;
    margin-left: 0.4rem;
    margin-top: -3px;
    transition: transform 0.2s ease;
}
.pi-navv2-link.dropdown-toggle::after { display: none; }
.pi-navv2-has-children.show .pi-navv2-link.dropdown-toggle::before {
    transform: rotate(225deg);
    margin-top: 3px;
}

/* Dropdown panels */
.pi-navv2-dropdown {
    border: 1px solid rgba(20, 33, 61, 0.08);
    border-top: 3px solid var(--pi-yellow);
    border-radius: 12px;
    padding: 0.5rem 0;
    box-shadow: 0 18px 40px rgba(20, 33, 61, 0.12);
    min-width: 260px;
    margin-top: 0.35rem;
}
.pi-navv2-dropdown .dropdown-item {
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
    color: var(--pi-gray-700);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.pi-navv2-dropdown .dropdown-item i { color: var(--pi-yellow-dark, var(--pi-yellow)); font-size: 1rem; width: 18px; text-align: center; }
.pi-navv2-dropdown .dropdown-item:hover { background: rgba(255, 230, 0, 0.10); color: var(--pi-black); padding-left: 1.35rem; }
.pi-navv2-dropdown .pi-highlight { background: rgba(255, 230, 0, 0.14); font-weight: 700; color: var(--pi-black); }

/* CTAs */
.pi-navv2-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    margin-left: 0.75rem;
}
.pi-navv2-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    border: 2px solid transparent;
    white-space: nowrap;
}
.pi-navv2-cta--ghost { background: transparent; color: var(--pi-black); border-color: var(--pi-black); }
.pi-navv2-cta--ghost:hover { background: var(--pi-black); color: var(--pi-yellow); }
.pi-navv2-cta--solid { background: var(--pi-yellow); color: var(--pi-black); border-color: var(--pi-yellow); box-shadow: 0 8px 20px rgba(255, 230, 0, 0.35); }
.pi-navv2-cta--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 230, 0, 0.45); }

/* Hamburger */
.pi-navv2-burger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--pi-yellow);
    border: 0;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.pi-navv2-burger span { display: block; width: 20px; height: 2px; background: var(--pi-black); border-radius: 2px; }

@media (max-width: 991.98px) {
    .pi-navv2-row { min-height: 64px; gap: 0.5rem; flex-wrap: wrap; }
    .pi-navv2-brand img { height: 56px; max-width: 170px; }
    .pi-navv2-burger { display: inline-flex; }
    .pi-navv2-collapse { display: none; flex-basis: 100%; }
    .pi-navv2-collapse.show,
    .pi-navv2-collapse.collapsing { display: block; }
    .pi-navv2-menu { flex-direction: column; align-items: stretch; gap: 0; margin: 0.5rem 0 0; }
    .pi-navv2-menu > li { border-bottom: 1px solid rgba(20, 33, 61, 0.06); }
    .pi-navv2-link { padding: 0.85rem 0.6rem; font-size: 0.95rem; border-radius: 0; }
    .pi-navv2-link::after { display: none; }
    .pi-navv2-dropdown { box-shadow: none; border: 0; border-top: 0; padding: 0 0 0.4rem 0.75rem; margin: 0; min-width: 0; background: rgba(255, 230, 0, 0.06); border-radius: 0; }
    .pi-navv2-actions { width: 100%; gap: 0.5rem; margin: 0.6rem 0 0.5rem; }
    .pi-navv2-cta { flex: 1 1 0; justify-content: center; padding: 0.65rem 0.5rem; font-size: 0.78rem; }
}

/* ============================================================
   HERO V2 — asymmetric: text left, edition card right
   Inspiration: Gulfood / VIV Asia / SPACE
   ============================================================ */
.pi-herov2 {
    position: relative;
    overflow: hidden;
    background: #0a0d14;
    color: var(--pi-white);
    padding: clamp(60px, 8vh, 110px) 0 clamp(40px, 6vh, 70px);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.pi-herov2-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    filter: saturate(0.85);
}
.pi-herov2-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(20, 14, 0, 0.35) 100%),
        radial-gradient(circle at 85% 30%, rgba(255, 230, 0, 0.22), transparent 55%);
}
.pi-herov2-grain {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
    pointer-events: none;
    mix-blend-mode: overlay;
}
.pi-herov2-container { position: relative; z-index: 2; }

/* Eyebrow */
.pi-herov2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-yellow);
    margin-bottom: 1.4rem;
}
.pi-herov2-eyebrow sup { font-size: 0.55em; top: -0.4em; }
.pi-herov2-eyebrow-bar {
    display: inline-block;
    width: 38px;
    height: 2px;
    background: var(--pi-yellow);
    border-radius: 2px;
}

/* Title */
.pi-herov2-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.98;
    margin: 0 0 1.5rem;
    font-size: clamp(2.2rem, 5.2vw, 4.6rem);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
.pi-herov2-title-line { display: block; }
.pi-herov2-accent {
    background: linear-gradient(90deg, var(--pi-yellow) 0%, #ffe57a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.pi-herov2-title-year {
    display: block;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
}

/* Lead */
.pi-herov2-lead {
    max-width: 580px;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 1.8rem;
}
.pi-herov2-lead strong { color: var(--pi-yellow); font-weight: 700; }

/* Meta */
.pi-herov2-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.8rem;
    max-width: 640px;
}
.pi-herov2-meta-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.95rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    backdrop-filter: blur(6px);
}
.pi-herov2-meta-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--pi-yellow);
    color: var(--pi-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.pi-herov2-meta-copy small {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
}
.pi-herov2-meta-copy strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-top: 0.15rem;
}

/* Actions */
.pi-herov2-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.pi-herov2-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid transparent;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pi-herov2-btn--primary {
    background: var(--pi-yellow);
    color: var(--pi-black);
    border-color: var(--pi-yellow);
    box-shadow: 0 14px 34px rgba(255, 230, 0, 0.35);
}
.pi-herov2-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(255, 230, 0, 0.5);
}
.pi-herov2-btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.4);
}
.pi-herov2-btn--ghost:hover {
    background: #fff;
    color: var(--pi-black);
    border-color: #fff;
}

/* Microlinks */
.pi-herov2-microlinks {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}
.pi-herov2-microlinks a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease;
}
.pi-herov2-microlinks a i { color: var(--pi-yellow); }
.pi-herov2-microlinks a:hover { color: var(--pi-yellow); }
.pi-herov2-microlinks-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

/* Aside — edition card */
.pi-herov2-aside { justify-content: flex-end; }
.pi-herov2-card {
    position: relative;
    width: 320px;
    padding: 2rem 1.6rem 1.4rem;
    background: linear-gradient(180deg, var(--pi-yellow) 0%, #ffd11a 100%);
    color: var(--pi-black);
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
    transform: rotate(-2deg);
    transition: transform 0.4s var(--ease-out);
}
.pi-herov2-card:hover { transform: rotate(0deg) translateY(-4px); }
.pi-herov2-card-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pi-black);
    color: var(--pi-yellow);
    padding: 0.4rem 0.95rem;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}
.pi-herov2-card-edition {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    margin-top: 0.5rem;
}
.pi-herov2-card-edition-num {
    font-size: 5.4rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}
.pi-herov2-card-edition-th {
    font-size: 1.6rem;
    font-weight: 800;
    margin-top: 0.65rem;
    margin-left: 0.1rem;
}
.pi-herov2-card-label {
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 700;
}
.pi-herov2-card-divider {
    width: 60px;
    height: 2px;
    background: var(--pi-black);
    border-radius: 2px;
    margin: 1rem auto;
    opacity: 0.7;
}
.pi-herov2-card-dates {
    line-height: 1;
    margin-bottom: 0.8rem;
}
.pi-herov2-card-month {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.7;
    margin-bottom: 0.35rem;
}
.pi-herov2-card-dates strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.pi-herov2-card-year {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    margin-top: 0.4rem;
    font-weight: 700;
    opacity: 0.8;
}
.pi-herov2-card-venue {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.pi-herov2-card-venue i { color: var(--pi-black); }
.pi-herov2-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--pi-black);
    color: var(--pi-yellow);
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.pi-herov2-card-cta:hover { transform: translateY(-2px); color: var(--pi-yellow); }

/* Stats strip */
.pi-herov2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: clamp(40px, 6vh, 70px);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pi-herov2-stat {
    padding: 0.5rem 1rem;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.pi-herov2-stat:last-child { border-right: 0; }
.pi-herov2-stat-num {
    display: block;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 800;
    color: var(--pi-yellow);
    letter-spacing: -0.02em;
    line-height: 1;
}
.pi-herov2-stat-num small {
    font-size: 0.55em;
    font-weight: 700;
    opacity: 0.85;
    margin-left: 0.1em;
}
.pi-herov2-stat-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.4rem;
}

@media (max-width: 991.98px) {
    .pi-herov2 { padding: 50px 0 35px; }
    .pi-herov2-stats { grid-template-columns: repeat(2, 1fr); }
    .pi-herov2-stat:nth-child(2) { border-right: 0; }
    .pi-herov2-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.10); padding-bottom: 1rem; margin-bottom: 0.6rem; }
}
@media (max-width: 575.98px) {
    .pi-herov2 { padding: 40px 0 30px; }
    .pi-herov2-actions { gap: 0.55rem; }
    .pi-herov2-btn { padding: 0.78rem 1.2rem; font-size: 0.82rem; }
    .pi-herov2-stats { grid-template-columns: 1fr 1fr; }
    .pi-herov2-meta { grid-template-columns: 1fr; }
}

/* ============================================================
   NAVBAR V3 — minimal modern (single row, default fonts)
   ============================================================ */
.pi-nav3 {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.pi-nav3-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 72px;
}
.pi-nav3-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.pi-nav3-brand img {
    height: 56px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
/* Desktop collapse layout is set in the authoritative NAV3 block near file end. */
.pi-nav3 .pi-nav3-collapse { min-width: 0; }
.pi-nav3-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 auto 0 0.5rem;
    padding: 0;
    gap: 0.25rem;
}
.pi-nav3-links a {
    display: inline-block;
    padding: 0.5rem 0.85rem;
    color: var(--pi-black);
    text-decoration: none;
    border-radius: 6px;
    position: relative;
    transition: color 0.15s ease;
}
.pi-nav3-links a:hover,
.pi-nav3-links a.is-active { color: var(--pi-yellow-dark, var(--pi-yellow)); }
.pi-nav3-links a::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: -8px;
    height: 2px;
    background: var(--pi-yellow);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.pi-nav3-links a:hover::after,
.pi-nav3-links a.is-active::after {
    opacity: 1;
}
.pi-nav3-cta {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: var(--pi-yellow);
    color: var(--pi-black);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    flex: 0 0 auto;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pi-nav3-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 230, 0, 0.4);
    color: var(--pi-black);
}
.pi-nav3-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.pi-nav3-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--pi-black);
    border-radius: 2px;
}

@media (max-width: 991.98px) {
    .pi-nav3-row { min-height: 60px; flex-wrap: wrap; gap: 0.5rem; }
    .pi-nav3-brand img { height: 48px; max-width: 150px; }
    .pi-nav3-burger { display: inline-flex; }
    .pi-nav3 .pi-nav3-collapse { display: none !important; flex-basis: 100%; }
    .pi-nav3 .pi-nav3-collapse.show,
    .pi-nav3 .pi-nav3-collapse.collapsing { display: block !important; }
    .pi-nav3-links { flex-direction: column; align-items: stretch; gap: 0; margin: 0.5rem 0; }
    .pi-nav3-links a { padding: 0.85rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); border-radius: 0; }
    .pi-nav3-links a.is-active::after { display: none; }
    .pi-nav3-cta { display: block; text-align: center; margin: 0.5rem 0 1rem; }
}

/* ============================================================
   STICKY SOCIAL RAIL — right edge of viewport, vertical column
   ============================================================ */
.pi-social-rail {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Above the Knowledge Day sticky sub-nav (z-index 1100) so the social
       icons stay visible instead of disappearing behind it on scroll. */
    z-index: 1101;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px;
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 8px 22px rgba(0, 0, 0, 0.25);
}
.pi-social-rail a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #ffffff;
    color: var(--pi-black);
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pi-social-rail a:hover {
    background: var(--pi-yellow);
    color: var(--pi-black);
    transform: translateX(-4px) scale(1.05);
}

@media (max-width: 575.98px) {
    .pi-social-rail { display: none; }
}

/* ============================================================
   HERO V3 — minimal modern, one focal point
   ============================================================ */
.pi-hero3 {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: #0a0d14;
}
.pi-hero3-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
}
.pi-hero3-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #000;
}
.pi-hero3-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}
.pi-hero3-veil {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.6s ease;
    pointer-events: none;
}
.pi-hero3-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 4rem 1rem;
    max-width: 760px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    pointer-events: none;
}
.pi-hero3.is-revealed .pi-hero3-content {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* On scroll: yellow ↔ white gradient as a BACKGROUND on the hero veil
   (text stays solid white with a soft shadow for readability) */
.pi-hero3.is-revealed .pi-hero3-veil {
    background-image: linear-gradient(120deg,
        rgba(255, 230, 0, 0.85) 0%,
        rgba(255, 247, 194, 0.7) 50%,
        rgba(255, 255, 255, 0.85) 100%);
    background-size: 240% 100%;
    background-position: 0% 50%;
    animation: pi-hero3-bg-shine 8s linear infinite;
    transition: background 0.6s ease;
}
@keyframes pi-hero3-bg-shine {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.pi-hero3.is-revealed .pi-hero3-title {
    color: var(--pi-black);
    text-shadow: 0 2px 18px rgba(255, 255, 255, 0.6);
}
.pi-hero3.is-revealed .pi-hero3-eyebrow,
.pi-hero3.is-revealed .pi-hero3-lead {
    color: rgba(0, 0, 0, 0.78);
}
.pi-hero3.is-revealed .pi-hero3-eyebrow {
    border-color: rgba(0, 0, 0, 0.35);
}
.pi-hero3-eyebrow {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.92);
}
.pi-hero3-title {
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.05;
    margin: 0 0 1rem;
    color: #fff;
}
.pi-hero3-lead {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: rgba(255,255,255,0.82);
    margin: 0 0 2rem;
}
.pi-hero3-cta {
    display: inline-block;
    padding: 0.9rem 2rem;
    background: var(--pi-yellow);
    color: var(--pi-black);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pi-hero3-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(255, 230, 0,0.4);
    color: var(--pi-black);
}

/* v4 hero refinements — date dot, year accent, highlighted lead, dual CTA, pink CTA */
.pi-hero3-eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pi-yellow);
    box-shadow: 0 0 0 4px rgba(255, 230, 0, 0.18);
    margin-right: 0.45rem;
    vertical-align: middle;
    animation: pulse 2.6s ease infinite;
}
.pi-hero3.is-revealed .pi-hero3-eyebrow-dot {
    background: var(--pi-accent);
    box-shadow: 0 0 0 4px rgba(255, 0, 92, 0.2);
}
.pi-hero3-year {
    color: var(--pi-yellow);
    transition: color 0.4s var(--ease-out);
}
.pi-hero3.is-revealed .pi-hero3-year { color: var(--pi-accent); }
.pi-hero3-mark {
    background-image: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255, 230, 0, 0.55) 60%, rgba(255, 230, 0, 0.55) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 0.15em;
    color: inherit;
    white-space: nowrap;
}
.pi-hero3.is-revealed .pi-hero3-mark {
    background-image: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.15) 92%, transparent 92%);
}
.pi-hero3-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}
.pi-hero3-cta--pink {
    background: var(--pi-accent);
    color: var(--pi-white);
}
.pi-hero3-cta--pink:hover {
    background: var(--pi-accent-dark);
    color: var(--pi-white);
    box-shadow: 0 14px 32px rgba(255, 0, 92, 0.4);
}
.pi-hero3.is-revealed .pi-hero3-cta {
    background: var(--pi-black);
    color: var(--pi-white);
}
.pi-hero3.is-revealed .pi-hero3-cta--pink {
    background: var(--pi-accent);
    color: var(--pi-white);
}
.pi-hero3.is-revealed .pi-hero3-cta:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}
.pi-hero3.is-revealed .pi-hero3-cta--pink:hover {
    background: var(--pi-accent-dark);
    box-shadow: 0 14px 32px rgba(255, 0, 92, 0.4);
}
@media (max-width: 575.98px) {
    .pi-hero3 { min-height: 70vh; }
    .pi-hero3-content { padding: 3rem 1rem; }
}

/* ============================================================
   v4 — EXPO PRIMITIVES
   Bright highlights, accent pink CTAs, marquee polish, magnet hover,
   eyebrow chip, animated underline link, stat-block. Emil-style easing.
   ============================================================ */

/* --- Eyebrow chip (use above section headlines) --- */
.pi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    color: var(--pi-black);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pi-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pi-accent);
    box-shadow: 0 0 0 3px rgba(255, 0, 92, 0.18);
}
.pi-eyebrow--yellow::before {
    background: var(--pi-yellow-dark);
    box-shadow: 0 0 0 3px var(--pi-yellow-glow);
}
.pi-eyebrow--dark {
    background: var(--pi-black);
    border-color: var(--pi-black);
    color: var(--pi-white);
}

/* --- Highlight mark — yellow brush stroke behind keywords --- */
.pi-mark {
    background-image: linear-gradient(180deg, transparent 0%, transparent 55%, var(--pi-yellow) 55%, var(--pi-yellow) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0 0.18em;
    color: inherit;
    font-weight: inherit;
    white-space: nowrap;
}
.pi-mark--pink {
    background-image: linear-gradient(180deg, transparent 0%, transparent 55%, var(--pi-accent) 55%, var(--pi-accent) 92%, transparent 92%);
    color: var(--pi-white);
}
.pi-mark--full {
    background-image: linear-gradient(180deg, var(--pi-yellow) 0%, var(--pi-yellow) 100%);
    padding: 0 0.25em;
}

/* --- Hand-drawn underline (SVG-free, dual-line) --- */
.pi-underline {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.pi-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.12em;
    height: 0.22em;
    background: var(--pi-yellow);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--ease-out);
}
.pi-reveal.visible .pi-underline::after,
.pi-underline.is-in::after { transform: scaleX(1); }

/* --- Pink CTA accent button (use sparingly for highest-priority action) --- */
.pi-btn-pink {
    background: var(--pi-accent);
    color: var(--pi-white);
    border-color: var(--pi-accent);
}
.pi-btn-pink:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .pi-btn-pink:hover {
        background: var(--pi-accent-dark);
        border-color: var(--pi-accent-dark);
        color: var(--pi-white);
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(255, 0, 92, 0.35);
    }
}

/* --- Magnetic CTA wrapper — tiny lift + glow on hover, scale on press --- */
.pi-magnet {
    display: inline-block;
    transition: transform 0.18s var(--ease-out);
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .pi-magnet:hover { transform: translateY(-2px); }
}
.pi-magnet:active { transform: scale(0.98); }

/* --- Animated link underline — appears on hover, full-width on active page --- */
.pi-link {
    position: relative;
    color: var(--pi-black);
    font-weight: 600;
    text-decoration: none;
    padding: 0.1em 0;
    display: inline-block;
}
.pi-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--pi-yellow);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease-out);
}
.pi-link:hover { color: var(--pi-black); }
.pi-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Stat block — bright expo-style card with big number --- */
.pi-stat-block {
    position: relative;
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-lg);
    padding: 1.5rem 1.25rem;
    text-align: left;
    overflow: hidden;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.pi-stat-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: var(--pi-yellow);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease-out);
}
.pi-stat-block.visible::before,
.pi-stat-block.is-in::before { transform: scaleX(1); }
.pi-stat-block .pi-stat-block-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--pi-yellow-light);
    color: var(--pi-yellow-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}
.pi-stat-block .pi-stat-block-num {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1;
    color: var(--pi-black);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    display: block;
}
.pi-stat-block .pi-stat-block-label {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pi-text-secondary);
}
.pi-stat-block--pink::before { background: var(--pi-accent); }
.pi-stat-block--pink .pi-stat-block-icon { background: var(--pi-accent-soft); color: var(--pi-accent); }
.pi-stat-block--dark { background: var(--pi-black); border-color: var(--pi-black); }
.pi-stat-block--dark .pi-stat-block-num { color: var(--pi-yellow); }
.pi-stat-block--dark .pi-stat-block-label { color: rgba(255, 255, 255, 0.7); }
@media (hover: hover) and (pointer: fine) {
    .pi-stat-block:hover {
        transform: translateY(-4px);
        border-color: var(--pi-yellow);
        box-shadow: var(--pi-shadow-lg);
    }
    .pi-stat-block--pink:hover { border-color: var(--pi-accent); }
}

/* --- Highlight panel (bright callout band) --- */
.pi-highlight-panel {
    position: relative;
    background: var(--pi-yellow);
    color: var(--pi-black);
    padding: 3.5rem 2rem;
    border-radius: var(--pi-radius-xl);
    overflow: hidden;
}
.pi-highlight-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 10%, rgba(0, 0, 0, 0.05) 0%, transparent 45%),
                radial-gradient(circle at 0% 100%, rgba(255, 0, 92, 0.08) 0%, transparent 40%);
    pointer-events: none;
}
.pi-highlight-panel > * { position: relative; z-index: 1; }
.pi-highlight-panel h2 { color: var(--pi-black); font-weight: 900; }
.pi-highlight-panel--dark { background: var(--pi-black); color: var(--pi-white); }
.pi-highlight-panel--dark h2 { color: var(--pi-white); }
.pi-highlight-panel--dark::before {
    background: radial-gradient(circle at 80% 10%, rgba(255, 230, 0, 0.16) 0%, transparent 45%),
                radial-gradient(circle at 0% 100%, rgba(255, 0, 92, 0.18) 0%, transparent 40%);
}

/* --- Refined section header with accent eyebrow + dual bar --- */
.pi-section-header.pi-section-header--v4 { margin-bottom: 3rem; }
.pi-section-header--v4 .pi-eyebrow { margin-bottom: 1rem; }
.pi-section-header--v4 h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    margin-bottom: 0.85rem;
    letter-spacing: -0.02em;
}
.pi-section-header--v4 .pi-subtitle {
    color: var(--pi-text-secondary);
    font-size: 1rem;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.65;
}

/* --- Off-white page background harmony — alt gray sections become subtle warm tint --- */
.pi-section-gray { background: #F8F6EE; }
.pi-section-gradient {
    background: linear-gradient(180deg, var(--pi-bg) 0%, #F5F2E5 100%);
}

/* --- Newsletter band --- */
.pi-newsletter-band {
    background: linear-gradient(135deg, var(--pi-yellow-light) 0%, #FFFBE5 100%);
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}
.pi-newsletter-band::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--pi-accent-soft);
    filter: blur(30px);
    pointer-events: none;
}
.pi-newsletter-band > * { position: relative; z-index: 1; }
.pi-newsletter-form .form-control {
    border-radius: 50px;
    border: 2px solid var(--pi-border);
    padding: 0.65rem 1.25rem;
    background: var(--pi-white);
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.pi-newsletter-form .form-control:focus {
    border-color: var(--pi-yellow-dark);
    box-shadow: 0 0 0 4px var(--pi-yellow-glow);
    outline: none;
}

/* --- Reduced motion fallback --- */
@media (prefers-reduced-motion: reduce) {
    .pi-mark,
    .pi-underline::after,
    .pi-stat-block::before { transition: none; }
    .pi-magnet:hover { transform: none; }
}

/* ============================================================
   ============================================================
   POULTRY INDIA — DESIGN SYSTEM v5.0  "HERITAGE EDITION"
   ============================================================
   Senior-UX redesign targeting middle/older-age audience.
   Goals:
     1. Friendly, readable, NOT neon-modern.
     2. Logo-true colors:  warm sun yellow, expo red, deep black.
     3. Larger fonts, bigger tap targets, calmer motion.
     4. Mobile-first — most visitors are on phones.
     5. Content & navigation HTML untouched — pure visual override.
   ============================================================ */

:root {
    /* --- Logo-true palette (replaces v4 neon yellow + pink) --- */
    --pi-yellow:        #F4B400;   /* warm sun yellow — primary brand */
    --pi-yellow-dark:   #D89A00;   /* hover / pressed */
    --pi-yellow-deep:   #B57F00;   /* text on yellow */
    --pi-yellow-light:  #FFF1C2;   /* soft tint backgrounds */
    --pi-yellow-glow:   rgba(244, 180, 0, 0.22);

    --pi-accent:        #D62828;   /* expo red — replaces hot pink */
    --pi-accent-dark:   #B91C1C;
    --pi-accent-soft:   rgba(214, 40, 40, 0.10);

    --pi-black:         #1A1A1A;
    --pi-charcoal:      #2A2A2A;
    --pi-bg:            #FFFBF5;   /* warm off-white */
    --pi-bg-soft:       #FAF4E6;   /* slightly warmer cream */
    --pi-white:         #FFFFFF;
    --pi-border:        #E8E2D6;
    --pi-border-strong: #C9C0AC;

    --pi-text:          #2A2A2A;
    --pi-text-secondary:#5A5A5A;
    --pi-text-muted:    #767676;

    /* Shadows — softer, less aggressive */
    --pi-shadow-sm:     0 1px 2px rgba(0,0,0,0.06);
    --pi-shadow-md:     0 4px 14px rgba(0,0,0,0.08);
    --pi-shadow-lg:     0 10px 26px rgba(0,0,0,0.10);
    --pi-shadow-glow:   0 6px 22px rgba(244, 180, 0, 0.28);
    --pi-shadow-glow-pink: 0 6px 22px rgba(214, 40, 40, 0.25);

    /* Radii — softer, classic feel */
    --pi-radius-sm: 6px;
    --pi-radius-md: 10px;
    --pi-radius-lg: 14px;
    --pi-radius-xl: 18px;
}

/* ===== Base typography — bigger, friendlier ===== */
html { font-size: 17px; }
body {
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--pi-text);
    line-height: 1.75;
    background: var(--pi-bg);
    font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--pi-black);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
p  { font-size: 1.05rem; line-height: 1.75; color: var(--pi-text); }

::selection { background: var(--pi-yellow); color: var(--pi-black); }
a { transition: color 0.2s ease; }
a:hover { color: var(--pi-yellow-dark); }

/* ===== Calm down old animations for older audience ===== */
.pi-reveal,
.pi-reveal-left,
.pi-reveal-right,
.pi-reveal-scale {
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.pi-reveal-clip,
.pi-reveal-clip-left,
.pi-reveal-clip-right {
    transition: clip-path 0.7s ease;
}
.pi-magnet { transition: transform 0.15s ease; }
@media (hover: hover) and (pointer: fine) {
    .pi-magnet:hover { transform: translateY(-1px); }
}

/* ===== Section base — more breathing room ===== */
.pi-section { padding: 4.5rem 0; }
.pi-section-sm { padding: 2.75rem 0; }
.pi-section-gray { background: var(--pi-bg-soft); }
.pi-section-dark { background: var(--pi-black); color: #E8E2D6; }
.pi-section-dark h2,
.pi-section-dark h3,
.pi-section-dark h4 { color: var(--pi-white); }
.pi-section-gradient { background: var(--pi-bg); }
.pi-section-header { margin-bottom: 2.75rem; }
.pi-section-header .pi-subtitle {
    color: var(--pi-text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0.75rem auto 0;
}

/* ===== Eyebrow chip — simpler, logo-yellow accent ===== */
.pi-eyebrow {
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    color: var(--pi-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.45rem 0.95rem;
    box-shadow: var(--pi-shadow-sm);
}
.pi-eyebrow::before {
    background: var(--pi-accent);
    box-shadow: 0 0 0 3px var(--pi-accent-soft);
}
.pi-eyebrow--yellow::before {
    background: var(--pi-yellow);
    box-shadow: 0 0 0 3px var(--pi-yellow-glow);
}
.pi-eyebrow--dark {
    background: var(--pi-black);
    border-color: var(--pi-black);
    color: var(--pi-white);
}

/* ===== Yellow highlight mark — warmer, slightly thicker ===== */
.pi-mark,
.pi-hero3-mark {
    background-image: linear-gradient(180deg,
        transparent 0%,
        transparent 58%,
        var(--pi-yellow) 58%,
        var(--pi-yellow) 95%,
        transparent 95%) !important;
    padding: 0 0.2em !important;
    color: inherit !important;
}
.pi-mark--pink {
    background-image: linear-gradient(180deg,
        transparent 0%,
        transparent 58%,
        var(--pi-accent) 58%,
        var(--pi-accent) 95%,
        transparent 95%) !important;
    color: var(--pi-white) !important;
}

/* ============================================================
   NAVBAR (.pi-nav3) — bigger, more confident, mobile-first
   ============================================================ */
.pi-nav3 {
    background: var(--pi-white);
    border-bottom: 3px solid var(--pi-yellow);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.pi-nav3-row {
    min-height: 84px;
    gap: 1.25rem;
    padding: 0.4rem 0;
}
.pi-nav3-brand img {
    height: 64px;
    max-width: 220px;
}
.pi-nav3-links { gap: 0.15rem; margin-left: 1rem; }
.pi-nav3-links a {
    padding: 0.7rem 1rem;
    color: var(--pi-black);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0;
    border-radius: 6px;
    line-height: 1.2;
}
.pi-nav3-links a:hover,
.pi-nav3-links a.is-active {
    color: var(--pi-accent);
    background: transparent;
}
.pi-nav3-links a::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.3rem;
    height: 4px;
    background: var(--k7-yellow, var(--pi-yellow));
    border-radius: 0;
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.pi-nav3-links a:hover::after,
.pi-nav3-links a.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}
.pi-nav3-cta {
    background: var(--pi-accent);
    color: var(--pi-white);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(214, 40, 40, 0.25);
    border: 2px solid transparent;
}
.pi-nav3-cta:hover {
    background: var(--pi-accent-dark);
    color: var(--pi-white);
    box-shadow: 0 8px 22px rgba(214, 40, 40, 0.35);
    transform: translateY(-2px);
}
.pi-nav3-burger {
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--pi-border);
    border-radius: 8px;
}
.pi-nav3-burger span {
    width: 24px;
    height: 2.5px;
    background: var(--pi-black);
}

@media (max-width: 991.98px) {
    .pi-nav3-row { min-height: 68px; padding: 0.35rem 0; }
    .pi-nav3-brand img { height: 52px; max-width: 170px; }
    .pi-nav3 .pi-nav3-collapse.show {
        background: var(--pi-white);
        padding: 0.5rem 0 1rem;
        border-top: 2px solid var(--pi-yellow);
        margin-top: 0.5rem;
    }
    .pi-nav3-links a {
        padding: 1.1rem 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;
        border-bottom: 1px solid var(--pi-border);
    }
    .pi-nav3-links a:hover,
    .pi-nav3-links a.is-active { color: var(--pi-accent); background: var(--pi-yellow-light); }
    .pi-nav3-cta {
        margin: 1rem 0.5rem 0;
        padding: 1rem 1.5rem;
        font-size: 1.05rem;
        text-align: center;
    }
}
@media (max-width: 575.98px) {
    .pi-nav3-brand img { height: 46px; max-width: 150px; }
}

/* ============================================================
   HERO (.pi-hero3) — clear video, big readable text, no clever tricks
   ============================================================ */
.pi-hero3 {
    min-height: 70vh;
    background: var(--pi-black);
}
.pi-hero3-veil,
.pi-hero3.is-revealed .pi-hero3-veil {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0.75) 100%) !important;
    animation: none !important;
}
.pi-hero3-content {
    padding: 4.5rem 1rem;
    max-width: 880px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.pi-hero3-eyebrow,
.pi-hero3.is-revealed .pi-hero3-eyebrow {
    color: var(--pi-white) !important;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}
.pi-hero3-eyebrow-dot,
.pi-hero3.is-revealed .pi-hero3-eyebrow-dot {
    background: var(--pi-yellow) !important;
    box-shadow: 0 0 0 4px var(--pi-yellow-glow) !important;
    animation: none;
}
.pi-hero3-title,
.pi-hero3.is-revealed .pi-hero3-title {
    color: var(--pi-white) !important;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 800;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
    margin-bottom: 1.25rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.pi-hero3-year,
.pi-hero3.is-revealed .pi-hero3-year { color: var(--pi-yellow) !important; }
.pi-hero3-lead,
.pi-hero3.is-revealed .pi-hero3-lead {
    color: rgba(255,255,255,0.95) !important;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    margin-bottom: 2.25rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.pi-hero3-actions { gap: 0.85rem; flex-wrap: wrap; justify-content: center; }
.pi-hero3-cta,
.pi-hero3.is-revealed .pi-hero3-cta {
    background: var(--pi-yellow) !important;
    color: var(--pi-black) !important;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 1rem 2.1rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(244, 180, 0, 0.35);
    border: 2px solid var(--pi-yellow);
    letter-spacing: 0.01em;
}
.pi-hero3-cta:hover {
    background: var(--pi-yellow-dark) !important;
    border-color: var(--pi-yellow-dark);
    box-shadow: 0 10px 26px rgba(244, 180, 0, 0.45);
}
.pi-hero3-cta--pink,
.pi-hero3.is-revealed .pi-hero3-cta--pink {
    background: var(--pi-accent) !important;
    color: var(--pi-white) !important;
    border: 2px solid var(--pi-accent);
    box-shadow: 0 6px 18px rgba(214, 40, 40, 0.32);
}
.pi-hero3-cta--pink:hover,
.pi-hero3.is-revealed .pi-hero3-cta--pink:hover {
    background: var(--pi-accent-dark) !important;
    border-color: var(--pi-accent-dark);
    box-shadow: 0 10px 26px rgba(214, 40, 40, 0.42);
}

@media (max-width: 767.98px) {
    .pi-hero3 { min-height: 62vh; }
    .pi-hero3-content { padding: 3rem 1.25rem; }
    .pi-hero3-actions { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
    .pi-hero3-cta { width: 100%; padding: 1.1rem 1.5rem; font-size: 1.1rem; }
}

/* ============================================================
   BUTTONS (.pi-btn family) — larger tap targets, simpler hover
   ============================================================ */
.pi-btn {
    font-size: 0.98rem;
    font-weight: 700;
    padding: 0.85rem 1.85rem;
    border-radius: 8px;
    letter-spacing: 0.02em;
    text-transform: none;
    border-width: 2px;
    min-height: 48px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.pi-btn::after { display: none; }
.pi-btn:active { transform: translateY(1px); }

.pi-btn-primary {
    background: var(--pi-yellow);
    color: var(--pi-black);
    border-color: var(--pi-yellow);
    box-shadow: 0 3px 10px rgba(244, 180, 0, 0.28);
}
.pi-btn-primary:hover {
    background: var(--pi-yellow-dark);
    border-color: var(--pi-yellow-dark);
    color: var(--pi-black);
    box-shadow: 0 6px 18px rgba(244, 180, 0, 0.38);
}
.pi-btn-dark {
    background: var(--pi-black);
    color: var(--pi-white);
    border-color: var(--pi-black);
}
.pi-btn-dark:hover {
    background: var(--pi-charcoal);
    border-color: var(--pi-charcoal);
    color: var(--pi-white);
}
.pi-btn-outline {
    background: transparent;
    color: var(--pi-black);
    border-color: var(--pi-border-strong);
}
.pi-btn-outline:hover {
    background: var(--pi-black);
    border-color: var(--pi-black);
    color: var(--pi-white);
}
.pi-btn-outline-light {
    background: transparent;
    color: var(--pi-white);
    border-color: rgba(255,255,255,0.65);
}
.pi-btn-outline-light:hover {
    background: var(--pi-white);
    color: var(--pi-black);
    border-color: var(--pi-white);
}
.pi-btn-pink {
    background: var(--pi-accent);
    color: var(--pi-white);
    border-color: var(--pi-accent);
    box-shadow: 0 3px 10px rgba(214, 40, 40, 0.28);
}
.pi-btn-pink:hover {
    background: var(--pi-accent-dark);
    border-color: var(--pi-accent-dark);
    color: var(--pi-white);
    box-shadow: 0 6px 18px rgba(214, 40, 40, 0.38);
}
.pi-btn-sm { padding: 0.55rem 1.25rem; font-size: 0.88rem; min-height: 40px; }
.pi-btn-lg { padding: 1.05rem 2.4rem; font-size: 1.08rem; min-height: 54px; }
.pi-btn-xl { padding: 1.15rem 2.75rem; font-size: 1.15rem; min-height: 58px; }

/* Header CTAs */
.pi-btn-exhibit,
.pi-btn-visit {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0.01em;
    min-height: 48px;
    border-width: 2px;
}
.pi-btn-exhibit {
    background: var(--pi-yellow);
    color: var(--pi-black);
    border-color: var(--pi-yellow);
}
.pi-btn-exhibit:hover {
    background: var(--pi-yellow-dark);
    border-color: var(--pi-yellow-dark);
}
.pi-btn-visit {
    background: var(--pi-accent);
    color: var(--pi-white);
    border-color: var(--pi-accent);
}
.pi-btn-visit:hover {
    background: var(--pi-accent-dark);
    border-color: var(--pi-accent-dark);
}

/* ============================================================
   CARDS — calmer shadows, generous padding
   ============================================================ */
.pi-image-card,
.pi-why-card {
    border: 1px solid var(--pi-border) !important;
    border-radius: var(--pi-radius-lg) !important;
    background: var(--pi-white);
    box-shadow: var(--pi-shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pi-image-card:hover,
.pi-why-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pi-shadow-md);
    border-color: var(--pi-yellow);
}
.pi-image-card-overlay {
    padding: 1.4rem !important;
    background: var(--pi-white);
    color: var(--pi-text);
}
.pi-image-card-overlay h4 {
    color: var(--pi-black) !important;
    font-size: 1.2rem !important;
    font-weight: 700;
    margin-bottom: 0.5rem !important;
}
.pi-image-card-overlay p {
    color: var(--pi-text-secondary) !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    margin-bottom: 0;
}
.pi-image-card-bg {
    height: 220px !important;
    width: 100%;
    object-fit: cover;
    display: block;
}
.pi-why-card .pi-image-card-bg { height: 240px !important; }

/* Sector cards */
.pi-sector-card {
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    box-shadow: var(--pi-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}
.pi-sector-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pi-shadow-md);
    border-color: var(--pi-yellow);
}
.pi-sector-card-img {
    height: 180px;
    overflow: hidden;
    background: var(--pi-bg-soft);
}
.pi-sector-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.pi-sector-card:hover .pi-sector-card-img img { transform: scale(1.04); }
.pi-sector-card-body { padding: 1.25rem 1.1rem 1.4rem; }
.pi-sector-card-pill {
    display: inline-block;
    background: var(--pi-yellow-light);
    color: var(--pi-yellow-deep);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    margin-bottom: 0.6rem;
}
.pi-sector-card-title {
    font-size: 1.1rem !important;
    font-weight: 700;
    color: var(--pi-black);
    margin-bottom: 0.45rem;
    line-height: 1.3;
}
.pi-sector-card-desc {
    font-size: 0.95rem;
    color: var(--pi-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Stats — flatter, friendlier */
.pi-stat-item,
.pi-stat-item-modern {
    background: var(--pi-white) !important;
    border: 1px solid var(--pi-border) !important;
    backdrop-filter: none !important;
    border-radius: var(--pi-radius-lg) !important;
    padding: 1.5rem 1rem !important;
    text-align: center;
    box-shadow: var(--pi-shadow-sm);
}
.pi-stat-icon {
    width: 48px !important;
    height: 48px !important;
    background: var(--pi-yellow-light) !important;
    color: var(--pi-yellow-deep) !important;
    font-size: 1.3rem !important;
    margin: 0 auto 0.85rem !important;
}
.pi-stat-number {
    color: var(--pi-black) !important;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.pi-stat-label {
    color: var(--pi-text-secondary) !important;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Testimonials */
.pi-testimonial {
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-lg);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--pi-shadow-sm);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pi-testimonial:hover {
    transform: translateY(-3px);
    box-shadow: var(--pi-shadow-md);
}
.pi-testimonial-text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pi-text);
}

/* Gallery items */
.pi-gallery-item {
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    box-shadow: var(--pi-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pi-gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--pi-shadow-md);
}
.pi-gallery-caption {
    background: var(--pi-white);
    color: var(--pi-black);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
    border-top: 2px solid var(--pi-yellow);
}

/* ============================================================
   ABOUT / FEATURE SECTIONS — calmer backgrounds
   ============================================================ */
.pi-about-section { background: var(--pi-bg) !important; }
.pi-why-section {
    background: var(--pi-bg-soft) !important;
}
.pi-sectors-section { background: var(--pi-bg); }

/* "Organised by" pill on dark hero */
.pi-organised-by {
    background: rgba(255,255,255,0.08) !important;
    border-color: var(--pi-yellow) !important;
}
.pi-organised-by i,
.pi-organised-by strong { color: var(--pi-yellow) !important; }

/* Glass card on KD section — solid for older readers */
.pi-glass {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--pi-radius-lg);
}

/* Edition badge */
.pi-edition-badge {
    background: var(--pi-yellow);
    color: var(--pi-black);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* ============================================================
   CTA BANNER — bolder, red + yellow contrast
   ============================================================ */
.pi-cta-banner {
    background: var(--pi-black) !important;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(244, 180, 0, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(214, 40, 40, 0.10) 0%, transparent 45%) !important;
    animation: none !important;
    padding: 4.5rem 0 !important;
    border-top: 4px solid var(--pi-yellow);
    border-bottom: 4px solid var(--pi-accent);
}
.pi-cta-banner::before { display: none; }
.pi-cta-banner h2 {
    color: var(--pi-white) !important;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin-bottom: 0.85rem;
}
.pi-cta-banner p {
    color: rgba(255,255,255,0.88) !important;
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto 2rem;
}
.pi-cta-banner .pi-card-tag {
    background: rgba(244, 180, 0, 0.18) !important;
    color: var(--pi-yellow) !important;
    font-weight: 700;
}
.pi-cta-banner .pi-btn-primary {
    background: var(--pi-yellow);
    color: var(--pi-black);
    border-color: var(--pi-yellow);
}
.pi-cta-banner .pi-btn-outline-light {
    border-color: rgba(255,255,255,0.75) !important;
    color: var(--pi-white);
}
.pi-cta-banner .pi-btn-outline-light:hover {
    background: var(--pi-white);
    color: var(--pi-black);
}

/* ============================================================
   FOOTER — warmer, more readable
   ============================================================ */
.pi-footer {
    background: #141414 !important;
    color: #C8C8C8;
    padding-top: 4rem;
    border-top: 4px solid var(--pi-yellow);
}
.pi-footer h5 {
    color: var(--pi-white);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 1.25rem;
}
.pi-footer h5::after {
    background: var(--pi-yellow);
    width: 36px;
    height: 3px;
}
.pi-footer a {
    color: #C8C8C8;
    font-size: 0.95rem;
    line-height: 1.7;
}
.pi-footer a:hover { color: var(--pi-yellow); padding-left: 4px; }
.pi-footer-links li { margin-bottom: 0.55rem; }
.pi-footer-links li a::before { color: var(--pi-yellow); }
.pi-footer p,
.pi-footer .row > div > p { font-size: 0.95rem; line-height: 1.7; }
.pi-text-yellow { color: var(--pi-yellow) !important; }
.pi-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.4rem 0;
    margin-top: 2.75rem;
    font-size: 0.9rem;
}

/* ============================================================
   SOCIAL RAIL — simpler, less intrusive
   ============================================================ */
.pi-social-rail {
    background: rgba(26, 26, 26, 0.72);
    backdrop-filter: blur(6px);
    border-radius: 12px 0 0 12px;
}
.pi-social-rail a {
    width: 40px;
    height: 40px;
    background: var(--pi-white);
    color: var(--pi-black);
    border-radius: 8px;
}
.pi-social-rail a:hover {
    background: var(--pi-yellow);
    color: var(--pi-black);
    transform: translateX(-3px);
}
@media (max-width: 767.98px) { .pi-social-rail { display: none; } }

/* Back-to-top */
.pi-back-to-top {
    background: var(--pi-yellow) !important;
    color: var(--pi-black) !important;
    border-color: var(--pi-yellow) !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 1.3rem;
    box-shadow: 0 6px 18px rgba(244, 180, 0, 0.4);
}
.pi-back-to-top:hover {
    background: var(--pi-yellow-dark) !important;
    border-color: var(--pi-yellow-dark) !important;
    transform: translateY(-3px);
}

/* ============================================================
   MARQUEE / LOGO STRIPS — cleaner look
   ============================================================ */
.pi-marquee-section {
    padding: 2.5rem 0;
    background: var(--pi-bg);
}
.pi-marquee-section.alt { background: var(--pi-bg-soft); }
.pi-marquee-heading h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.pi-marquee-heading p {
    color: var(--pi-text-secondary);
    font-size: 0.98rem;
}
.pi-marquee-heading-bar {
    background: var(--pi-yellow) !important;
    height: 3px;
    width: 56px;
}
.pi-marquee-item {
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-md);
    padding: 0.9rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.pi-marquee-item:hover {
    border-color: var(--pi-yellow);
    transform: translateY(-2px);
}

/* Newsletter band */
.pi-newsletter-band {
    background: var(--pi-yellow-light);
    border-top: 1px solid var(--pi-border);
    border-bottom: 1px solid var(--pi-border);
}
.pi-newsletter-band::after,
.pi-newsletter-band::before { display: none !important; }
.pi-newsletter-form .form-control {
    border: 2px solid var(--pi-border-strong);
    border-radius: 8px;
    padding: 0.85rem 1.2rem;
    font-size: 1rem;
    min-height: 50px;
}
.pi-newsletter-form .form-control:focus {
    border-color: var(--pi-yellow-dark);
    box-shadow: 0 0 0 3px var(--pi-yellow-glow);
}
.pi-newsletter-form .pi-btn-dark {
    border-radius: 8px;
    padding: 0.85rem 1.6rem;
    min-height: 50px;
}

/* Yep Cipa / Supported by boxes */
.pi-yep-cipa-wrap,
.pi-supported-by-box {
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-lg);
    padding: 1.4rem;
    text-align: center;
}
.pi-yep-cipa-heading,
.pi-supported-by-label {
    color: var(--pi-text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* ============================================================
   MOBILE-FIRST POLISH (everything ≤ 767px)
   ============================================================ */
@media (max-width: 767.98px) {
    html { font-size: 16.5px; }
    body { line-height: 1.7; }
    .pi-section { padding: 3rem 0; }
    .pi-section-header { margin-bottom: 2rem; }
    .pi-section-header .pi-subtitle { font-size: 1rem; }
    p { font-size: 1rem; }

    /* Stack mobile actions full-width */
    .pi-btn-lg, .pi-btn-xl { width: 100%; max-width: 360px; }

    /* Full-width hero CTA stack */
    .pi-hero3-actions { gap: 0.75rem; }

    /* Make all .d-flex.gap-3 button groups stack on mobile */
    .pi-hero3-actions a,
    .pi-cta-banner .d-flex a.pi-btn-lg { width: 100%; max-width: 320px; }

    /* Card body tightening */
    .pi-image-card-overlay { padding: 1.15rem !important; }
    .pi-sector-card-body { padding: 1rem 0.95rem 1.2rem; }
    .pi-image-card-bg, .pi-why-card .pi-image-card-bg { height: 200px !important; }
    .pi-sector-card-img { height: 150px; }

    /* Stats grid */
    .pi-stat-item, .pi-stat-item-modern { padding: 1.15rem 0.65rem !important; }
    .pi-stat-icon { width: 40px !important; height: 40px !important; font-size: 1.05rem !important; }

    /* Footer — single column, more spacing */
    .pi-footer { padding-top: 2.5rem; }
    .pi-footer h5 { margin-top: 0.5rem; }
    .pi-footer-bottom .col-md-6.text-md-end { text-align: center !important; margin-top: 0.5rem; }
    .pi-footer-bottom .col-md-6.text-md-end a { margin: 0 0.5rem; }

    /* Knowledge Day inner glass card */
    .pi-glass.p-5 { padding: 1.75rem 1.25rem !important; }
    .pi-glass h3 { font-size: 1.5rem !important; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.55rem; }
    h3 { font-size: 1.25rem; }
    .pi-hero3-title { font-size: 2rem !important; }
    .pi-hero3-lead { font-size: 1.05rem !important; }
    .pi-section { padding: 2.5rem 0; }
    .pi-cta-banner { padding: 3rem 0 !important; }
    .pi-cta-banner h2 { font-size: 1.5rem; }

    /* Stack stats 2x2 */
    .pi-stat-number { font-size: 1.5rem !important; }
}

/* ============================================================
   FORMS — bigger, friendlier for older users
   ============================================================ */
.form-control,
.form-select {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--pi-border-strong);
    border-radius: 8px;
    min-height: 48px;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--pi-yellow-dark);
    box-shadow: 0 0 0 3px var(--pi-yellow-glow);
}
.form-label {
    font-weight: 600;
    color: var(--pi-black);
    font-size: 0.98rem;
    margin-bottom: 0.4rem;
}

/* ============================================================
   ACCESSIBILITY FOCUS RING
   ============================================================ */
a:focus-visible,
button:focus-visible,
.pi-btn:focus-visible,
.pi-nav3-links a:focus-visible,
.pi-nav3-cta:focus-visible {
    outline: 3px solid var(--pi-yellow-dark);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================
   REDUCE MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pi-hero3-eyebrow-dot { animation: none !important; }
    .pi-reveal,
    .pi-reveal-left,
    .pi-reveal-right,
    .pi-reveal-scale { transition: none !important; opacity: 1 !important; transform: none !important; }
    .pi-magnet { transition: none; }
}

/* ============================================================
   END DESIGN SYSTEM v5.0
   ============================================================ */


/* ============================================================
   ============================================================
   POULTRY INDIA  —  DESIGN SYSTEM v6.0  "KISAN EXPO"
   ============================================================
   AUDIENCE: farmers, chicken-shop owners, traders.
   GOAL: a poster-bold, signboard-clear expo site.
   STRATEGY: !important on every rule so the previous
             5800 lines of CSS don't bury us again.
   ============================================================ */

:root {
    --k-red:        #D32F2F !important;   /* logo expo red */
    --k-red-dark:   #A82424 !important;
    --k-red-soft:   #FFEDED !important;
    --k-yellow:     #FDB913 !important;   /* logo sun yellow */
    --k-yellow-2:   #FFD43B !important;
    --k-yellow-soft:#FFF4D0 !important;
    --k-black:      #161616 !important;
    --k-charcoal:   #2B2B2B !important;
    --k-cream:      #FFF8E7 !important;
    --k-white:      #FFFFFF !important;
    --k-ink:        #1A1A1A !important;
    --k-ink-2:      #4A4A4A !important;
    --k-line:       #E8DFC9 !important;

    /* keep legacy aliases pointing to the new colors so old rules use new palette */
    --pi-yellow:      #FDB913 !important;
    --pi-yellow-dark: #E29F00 !important;
    --pi-yellow-light:#FFF4D0 !important;
    --pi-accent:      #D32F2F !important;
    --pi-accent-dark: #A82424 !important;
    --pi-accent-soft: #FFEDED !important;
    --pi-bg:          #FFF8E7 !important;
}

/* ===== BASE — bigger text, calmer line-height for older eyes ===== */
html  { font-size: 17.5px !important; }
body  {
    background: var(--k-cream) !important;
    color: var(--k-ink) !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--k-black) !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.5rem) !important; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem) !important; }
p  { font-size: 1.06rem !important; line-height: 1.75 !important; color: var(--k-ink) !important; }

/* ============================================================
   NAVBAR — turn it BOLD WHITE-on-RED so it doesn't look like
   the previous quiet white nav.
   ============================================================ */
.pi-site-header { position: sticky !important; top: 0 !important; z-index: 1200 !important; }

.pi-nav3 {
    background: var(--k-red) !important;
    border-bottom: 5px solid var(--k-yellow) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18) !important;
}
.pi-nav3-row {
    min-height: 88px !important;
    padding: 0.5rem 0 !important;
    gap: 1.25rem !important;
}
.pi-nav3-brand { background: var(--k-white) !important; padding: 6px 14px !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important; }
.pi-nav3-brand img { height: 60px !important; max-width: 210px !important; }
.pi-nav3-links { margin-left: 1.25rem !important; gap: 0.1rem !important; }
.pi-nav3-links a {
    color: var(--k-white) !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    padding: 0.65rem 1rem !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    border-radius: 6px !important;
}
.pi-nav3-links a:hover {
    color: var(--k-black) !important;
    background: var(--k-yellow) !important;
}
.pi-nav3-links a.is-active { color: var(--k-yellow) !important; background: transparent !important; }
.pi-nav3-links a.is-active::after {
    background: var(--k-yellow) !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: 0.2rem !important;
    height: 4px !important;
    border-radius: 4px !important;
}
.pi-nav3-cta {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    font-weight: 800 !important;
    font-size: 1.02rem !important;
    padding: 0.85rem 1.7rem !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.pi-nav3-cta:hover {
    background: var(--k-white) !important;
    color: var(--k-red) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
}
.pi-nav3-burger { background: var(--k-white) !important; border: 0 !important; border-radius: 8px !important; width: 50px !important; height: 50px !important; }
.pi-nav3-burger span { background: var(--k-red) !important; width: 26px !important; height: 3px !important; }

@media (max-width: 991.98px) {
    .pi-nav3-row { min-height: 72px !important; }
    .pi-nav3-brand img { height: 48px !important; max-width: 150px !important; }
    .pi-nav3-brand { padding: 4px 10px !important; }
    .pi-nav3 .pi-nav3-collapse.show,
    .pi-nav3 .pi-nav3-collapse.collapsing {
        background: var(--k-red) !important;
        padding: 0.5rem 0 1rem !important;
        border-top: 3px solid var(--k-yellow) !important;
    }
    .pi-nav3-links a {
        padding: 1.1rem 0.5rem !important;
        font-size: 1.15rem !important;
        color: var(--k-white) !important;
        border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    }
    .pi-nav3-links a:hover,
    .pi-nav3-links a.is-active {
        background: var(--k-yellow) !important;
        color: var(--k-black) !important;
    }
    .pi-nav3-cta { margin: 1rem 0.5rem 0 !important; padding: 1.05rem 1.5rem !important; font-size: 1.05rem !important; }
}

/* ============================================================
   HERO — keep video, much stronger overlay, BIG poster-style text
   ============================================================ */
.pi-hero3 { min-height: 72vh !important; background: var(--k-black) !important; }
.pi-hero3-veil,
.pi-hero3.is-revealed .pi-hero3-veil {
    background: linear-gradient(180deg,
        rgba(20, 10, 0, 0.55) 0%,
        rgba(20, 10, 0, 0.7) 60%,
        rgba(20, 10, 0, 0.85) 100%) !important;
    animation: none !important;
}
.pi-hero3-content {
    padding: 4.5rem 1rem 5rem !important;
    max-width: 940px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}
.pi-hero3-eyebrow,
.pi-hero3.is-revealed .pi-hero3-eyebrow {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    border: 0 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.55rem 1.15rem !important;
    margin-bottom: 1.75rem !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.4) !important;
}
.pi-hero3-eyebrow-dot,
.pi-hero3.is-revealed .pi-hero3-eyebrow-dot {
    background: var(--k-red) !important;
    box-shadow: 0 0 0 4px rgba(211, 47, 47, 0.35) !important;
    animation: none !important;
}
.pi-hero3-title,
.pi-hero3.is-revealed .pi-hero3-title {
    color: var(--k-white) !important;
    font-size: clamp(2.4rem, 7vw, 5rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
    text-transform: uppercase !important;
    text-shadow: 0 3px 18px rgba(0,0,0,0.55) !important;
    margin-bottom: 1.25rem !important;
}
.pi-hero3-year,
.pi-hero3.is-revealed .pi-hero3-year {
    color: var(--k-yellow) !important;
    display: inline-block !important;
}
.pi-hero3-lead,
.pi-hero3.is-revealed .pi-hero3-lead {
    color: rgba(255,255,255,0.96) !important;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin-bottom: 2.5rem !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
.pi-hero3-mark,
.pi-hero3.is-revealed .pi-hero3-mark {
    background-image: linear-gradient(180deg,
        transparent 0%, transparent 55%,
        var(--k-yellow) 55%, var(--k-yellow) 95%,
        transparent 95%) !important;
    padding: 0 0.2em !important;
    color: var(--k-black) !important;
    font-weight: 800 !important;
}

.pi-hero3-actions { gap: 1rem !important; flex-wrap: wrap !important; justify-content: center !important; }
.pi-hero3-cta,
.pi-hero3.is-revealed .pi-hero3-cta {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    padding: 1.05rem 2.25rem !important;
    border-radius: 8px !important;
    border: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 6px 18px rgba(253, 185, 19, 0.45) !important;
}
.pi-hero3-cta:hover {
    background: var(--k-white) !important;
    color: var(--k-red) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
}
.pi-hero3-cta--pink,
.pi-hero3.is-revealed .pi-hero3-cta--pink {
    background: var(--k-red) !important;
    color: var(--k-white) !important;
    box-shadow: 0 6px 18px rgba(211, 47, 47, 0.45) !important;
}
.pi-hero3-cta--pink:hover {
    background: var(--k-red-dark) !important;
    color: var(--k-white) !important;
    box-shadow: 0 10px 28px rgba(211, 47, 47, 0.5) !important;
}

@media (max-width: 767.98px) {
    .pi-hero3 { min-height: 62vh !important; }
    .pi-hero3-content { padding: 3rem 1rem 3.5rem !important; }
    .pi-hero3-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
    .pi-hero3-lead  { font-size: 1.1rem !important; }
    .pi-hero3-actions { flex-direction: column !important; align-items: stretch !important; }
    .pi-hero3-cta { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; padding: 1.15rem 1.5rem !important; font-size: 1.1rem !important; }
}

/* ============================================================
   STATS BANNER — yellow strip below hero, BIG numbers
   (this is the .pi-stats / pi-stat-item-modern section)
   ============================================================ */
.pi-stats {
    background: var(--k-yellow) !important;
    padding: 2.5rem 0 !important;
    border-bottom: 5px solid var(--k-red) !important;
}
.pi-stat-item,
.pi-stat-item-modern {
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    padding: 0.5rem !important;
    text-align: center !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.pi-stat-icon {
    width: 56px !important; height: 56px !important;
    background: var(--k-black) !important;
    color: var(--k-yellow) !important;
    margin: 0 auto 0.85rem !important;
    font-size: 1.4rem !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.pi-stat-number {
    color: var(--k-black) !important;
    font-weight: 900 !important;
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 0.2rem !important;
}
.pi-stat-label {
    color: var(--k-black) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ============================================================
   SECTION BASE — bold alternating bands, photo-friendly
   ============================================================ */
.pi-section { padding: 4.5rem 0 !important; }
.pi-section-sm { padding: 2.75rem 0 !important; }
.pi-section-gray,
.pi-section-gradient,
.pi-about-section { background: var(--k-cream) !important; }
.pi-why-section,
.pi-sectors-section { background: var(--k-white) !important; }
.pi-section-dark { background: var(--k-black) !important; }
.pi-section-dark *,
.pi-section-dark p { color: rgba(255,255,255,0.92) !important; }
.pi-section-dark h2,
.pi-section-dark h3,
.pi-section-dark h4 { color: var(--k-white) !important; }
.pi-section-dark .pi-mark { color: var(--k-black) !important; }

.pi-section-header { margin-bottom: 2.75rem !important; }
.pi-section-header h2 { margin-bottom: 0.65rem !important; }
.pi-section-header .pi-subtitle {
    color: var(--k-ink-2) !important;
    font-size: 1.1rem !important;
    line-height: 1.65 !important;
    max-width: 640px !important;
    margin: 0.5rem auto 0 !important;
}

/* Eyebrow — flat, bold, signboard style */
.pi-eyebrow {
    background: var(--k-black) !important;
    border: 0 !important;
    color: var(--k-yellow) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    padding: 0.45rem 0.9rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
.pi-eyebrow::before {
    background: var(--k-red) !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.3) !important;
}
.pi-eyebrow--yellow {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
}
.pi-eyebrow--yellow::before {
    background: var(--k-red) !important;
}
.pi-eyebrow--dark { background: var(--k-black) !important; color: var(--k-white) !important; }

/* Yellow highlight mark — thicker, bolder */
.pi-mark {
    background-image: linear-gradient(180deg,
        transparent 0%, transparent 55%,
        var(--k-yellow) 55%, var(--k-yellow) 95%,
        transparent 95%) !important;
    padding: 0 0.22em !important;
    color: var(--k-black) !important;
    font-weight: 800 !important;
}
.pi-mark--pink {
    background-image: linear-gradient(180deg,
        transparent 0%, transparent 55%,
        var(--k-red) 55%, var(--k-red) 95%,
        transparent 95%) !important;
    color: var(--k-white) !important;
}

/* ============================================================
   BUTTONS — chunky signboard style
   ============================================================ */
.pi-btn {
    font-weight: 800 !important;
    font-size: 1rem !important;
    padding: 0.95rem 1.85rem !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-width: 0 !important;
    min-height: 50px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}
.pi-btn::after { display: none !important; }
.pi-btn:hover { transform: translateY(-2px) !important; }
.pi-btn:active { transform: translateY(1px) !important; }
.pi-btn-sm { padding: 0.55rem 1.15rem !important; font-size: 0.85rem !important; min-height: 38px !important; }
.pi-btn-lg { padding: 1.1rem 2.25rem !important; font-size: 1.08rem !important; min-height: 56px !important; }
.pi-btn-xl { padding: 1.2rem 2.6rem !important; font-size: 1.15rem !important; min-height: 60px !important; }

.pi-btn-primary {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.35) !important;
}
.pi-btn-primary:hover {
    background: var(--k-yellow-2) !important;
    box-shadow: 0 8px 22px rgba(253, 185, 19, 0.5) !important;
}
.pi-btn-dark {
    background: var(--k-black) !important;
    color: var(--k-white) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}
.pi-btn-dark:hover { background: var(--k-charcoal) !important; }
.pi-btn-outline {
    background: var(--k-white) !important;
    color: var(--k-black) !important;
    border: 2px solid var(--k-black) !important;
    box-shadow: none !important;
}
.pi-btn-outline:hover {
    background: var(--k-black) !important;
    color: var(--k-yellow) !important;
}
.pi-btn-outline-light {
    background: transparent !important;
    color: var(--k-white) !important;
    border: 2px solid var(--k-yellow) !important;
    box-shadow: none !important;
}
.pi-btn-outline-light:hover {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
}
.pi-btn-pink,
.pi-btn-visit {
    background: var(--k-red) !important;
    color: var(--k-white) !important;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.35) !important;
}
.pi-btn-pink:hover,
.pi-btn-visit:hover {
    background: var(--k-red-dark) !important;
    box-shadow: 0 8px 22px rgba(211, 47, 47, 0.5) !important;
}
.pi-btn-exhibit {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    border: 0 !important;
    border-radius: 6px !important;
    min-height: 50px !important;
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.35) !important;
}

/* ============================================================
   CARDS — bigger photos, clear titles, yellow border on hover
   ============================================================ */
.pi-image-card,
.pi-why-card,
.pi-sector-card {
    background: var(--k-white) !important;
    border: 2px solid var(--k-line) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.pi-image-card:hover,
.pi-why-card:hover,
.pi-sector-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--k-yellow) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}
.pi-image-card-bg,
.pi-why-card .pi-image-card-bg {
    height: 230px !important;
    width: 100% !important;
    object-fit: cover !important;
}
.pi-image-card-overlay {
    padding: 1.4rem 1.3rem !important;
    background: var(--k-white) !important;
    color: var(--k-ink) !important;
}
.pi-image-card-overlay h4 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--k-black) !important;
    margin-bottom: 0.5rem !important;
}
.pi-image-card-overlay p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--k-ink-2) !important;
    margin: 0 !important;
}

.pi-sector-card-img {
    height: 180px !important;
    overflow: hidden !important;
    background: var(--k-cream) !important;
}
.pi-sector-card-img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}
.pi-sector-card:hover .pi-sector-card-img img { transform: scale(1.05) !important; }
.pi-sector-card-body { padding: 1.2rem 1.1rem 1.4rem !important; }
.pi-sector-card-pill {
    display: inline-block !important;
    background: var(--k-red) !important;
    color: var(--k-white) !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 3px !important;
    margin-bottom: 0.6rem !important;
    text-transform: uppercase !important;
}
.pi-sector-card-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--k-black) !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.3 !important;
}
.pi-sector-card-desc {
    font-size: 0.98rem !important;
    color: var(--k-ink-2) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Gallery items */
.pi-gallery-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 2px solid var(--k-line) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    background: var(--k-white) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.pi-gallery-item:hover {
    transform: translateY(-3px) !important;
    border-color: var(--k-yellow) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
}
.pi-gallery-caption {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.85rem 1rem !important;
    border-top: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Testimonials */
.pi-testimonial {
    background: var(--k-white) !important;
    border: 2px solid var(--k-line) !important;
    border-left: 5px solid var(--k-yellow) !important;
    border-radius: 10px !important;
    padding: 1.65rem 1.4rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    height: 100% !important;
}
.pi-testimonial:hover { border-color: var(--k-line) !important; border-left-color: var(--k-red) !important; }
.pi-testimonial-text {
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
    color: var(--k-ink) !important;
}
.pi-testimonial-author { color: var(--k-black) !important; font-weight: 800 !important; }
.pi-testimonial-role { color: var(--k-ink-2) !important; }

/* About points list */
.pi-about-points i { color: var(--k-red) !important; }
.pi-about-points { color: var(--k-ink) !important; font-size: 1rem !important; }

/* Organised-by pill on dark hero */
.pi-organised-by {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid var(--k-yellow) !important;
}
.pi-organised-by i,
.pi-organised-by strong { color: var(--k-yellow) !important; }
.pi-text-yellow { color: var(--k-yellow) !important; }

/* Edition badge */
.pi-edition-badge {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    font-weight: 800 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 4px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Glass card on dark sections */
.pi-glass {
    background: rgba(253, 185, 19, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--k-yellow) !important;
    border-radius: 12px !important;
}

/* ============================================================
   KNOWLEDGE-DAY-style image sections — clearer overlay
   ============================================================ */
.pi-image-section-overlay {
    background: linear-gradient(180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.75) 100%) !important;
}

/* ============================================================
   MARQUEE STRIPS — flat warm bands, cleaner logos
   ============================================================ */
.pi-marquee-section { padding: 2.75rem 0 !important; background: var(--k-white) !important; }
.pi-marquee-section.alt { background: var(--k-cream) !important; }
.pi-marquee-heading { text-align: center !important; margin-bottom: 1.5rem !important; }
.pi-marquee-heading h2 {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important;
    font-weight: 800 !important;
    margin-bottom: 0.35rem !important;
}
.pi-marquee-heading p {
    color: var(--k-ink-2) !important;
    font-size: 1rem !important;
}
.pi-marquee-heading-bar {
    background: var(--k-red) !important;
    width: 60px !important;
    height: 4px !important;
    margin: 0.6rem auto 0 !important;
    border-radius: 3px !important;
}
.pi-marquee-item {
    background: var(--k-white) !important;
    border: 1px solid var(--k-line) !important;
    border-radius: 8px !important;
    padding: 0.9rem !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
.pi-marquee-item:hover {
    border-color: var(--k-yellow) !important;
    transform: translateY(-2px) !important;
}

/* YEP / Supported boxes */
.pi-yep-cipa-wrap,
.pi-supported-by-box {
    background: var(--k-white) !important;
    border: 2px solid var(--k-yellow) !important;
    border-radius: 10px !important;
    padding: 1.5rem !important;
    text-align: center !important;
}
.pi-yep-cipa-heading,
.pi-supported-by-label {
    background: var(--k-red) !important;
    color: var(--k-white) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 4px !important;
    display: inline-block !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.85rem !important;
}

/* ============================================================
   NEWSLETTER BAND — yellow strip
   ============================================================ */
.pi-newsletter-band {
    background: var(--k-yellow) !important;
    border-top: 4px solid var(--k-black) !important;
    border-bottom: 4px solid var(--k-black) !important;
    padding: 2.5rem 0 !important;
}
.pi-newsletter-band::after,
.pi-newsletter-band::before { display: none !important; }
.pi-newsletter-band h3 { color: var(--k-black) !important; font-weight: 800 !important; }
.pi-newsletter-band p { color: var(--k-charcoal) !important; }
.pi-newsletter-form .form-control {
    border: 2.5px solid var(--k-black) !important;
    background: var(--k-white) !important;
    border-radius: 6px !important;
    padding: 0.85rem 1.15rem !important;
    font-size: 1rem !important;
    min-height: 52px !important;
}
.pi-newsletter-form .form-control:focus {
    border-color: var(--k-red) !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.25) !important;
}
.pi-newsletter-form .pi-btn-dark {
    background: var(--k-red) !important;
    border-radius: 6px !important;
    min-height: 52px !important;
    padding: 0.85rem 1.5rem !important;
}
.pi-newsletter-form .pi-btn-dark:hover {
    background: var(--k-red-dark) !important;
}

/* ============================================================
   CTA BANNER — bold poster style
   ============================================================ */
.pi-cta-banner {
    background: var(--k-red) !important;
    background-image: none !important;
    animation: none !important;
    padding: 4rem 0 !important;
    border-top: 6px solid var(--k-yellow) !important;
    border-bottom: 6px solid var(--k-yellow) !important;
    color: var(--k-white) !important;
}
.pi-cta-banner::before,
.pi-cta-banner::after { display: none !important; }
.pi-cta-banner h2 {
    color: var(--k-white) !important;
    font-size: clamp(1.75rem, 4vw, 2.6rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.005em !important;
    margin-bottom: 1rem !important;
}
.pi-cta-banner p {
    color: rgba(255,255,255,0.95) !important;
    font-size: 1.15rem !important;
    max-width: 700px !important;
    margin: 0 auto 2.2rem !important;
    line-height: 1.6 !important;
}
.pi-cta-banner .pi-card-tag {
    background: var(--k-black) !important;
    color: var(--k-yellow) !important;
    font-weight: 800 !important;
    padding: 0.45rem 1rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}
.pi-cta-banner .pi-btn-primary {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
}
.pi-cta-banner .pi-btn-primary:hover {
    background: var(--k-white) !important;
    color: var(--k-red) !important;
}
.pi-cta-banner .pi-btn-outline-light {
    background: transparent !important;
    color: var(--k-white) !important;
    border: 2px solid var(--k-white) !important;
}
.pi-cta-banner .pi-btn-outline-light:hover {
    background: var(--k-white) !important;
    color: var(--k-red) !important;
}

/* ============================================================
   FOOTER — black with yellow accents
   ============================================================ */
.pi-footer {
    background: var(--k-black) !important;
    color: #ffffff !important;
    padding-top: 3.5rem !important;
    border-top: 5px solid var(--k-yellow) !important;
}
.pi-footer h5 {
    color: var(--k-yellow) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
.pi-footer h5::after {
    background: var(--k-red) !important;
    width: 40px !important;
    height: 3px !important;
}
.pi-footer a {
    color: #ffffff !important;
    font-size: 0.96rem !important;
}
.pi-footer a:hover { color: var(--k-yellow) !important; padding-left: 5px !important; }
.pi-footer p { font-size: 1rem !important; font-weight:500!important; line-height: 1.7 !important; color: #111111 !important; }
.pi-footer-links li a::before { color: var(--k-yellow) !important; }
.pi-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    background: #0a0a0a !important;
    color: #9c9580 !important;
    padding: 1.4rem 0 !important;
    margin-top: 2.75rem !important;
    font-size: 0.92rem !important;
}
.pi-footer-supported-logos {
    background: var(--k-white) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
}

/* ============================================================
   SOCIAL RAIL — simpler
   ============================================================ */
.pi-social-rail {
    background: var(--k-black) !important;
    border-radius: 10px 0 0 10px !important;
    backdrop-filter: none !important;
    padding: 6px !important;
    box-shadow: -4px 6px 18px rgba(0,0,0,0.3) !important;
}
.pi-social-rail a {
    width: 40px !important;
    height: 40px !important;
    background: var(--k-white) !important;
    color: var(--k-black) !important;
    border-radius: 6px !important;
}
.pi-social-rail a:hover {
    background: var(--k-yellow) !important;
    color: var(--k-black) !important;
    transform: translateX(-3px) !important;
}
@media (max-width: 767.98px) { .pi-social-rail { display: none !important; } }

/* Back-to-top */
.pi-back-to-top {
    background: var(--k-red) !important;
    color: var(--k-white) !important;
    border: 0 !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    font-size: 1.3rem !important;
    box-shadow: 0 6px 18px rgba(211, 47, 47, 0.45) !important;
}
.pi-back-to-top:hover {
    background: var(--k-red-dark) !important;
    transform: translateY(-3px) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
    border: 2px solid var(--k-line) !important;
    border-radius: 6px !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 1rem !important;
    min-height: 50px !important;
    background: var(--k-white) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--k-yellow) !important;
    box-shadow: 0 0 0 3px rgba(253, 185, 19, 0.3) !important;
    outline: 0 !important;
}
.form-label {
    font-weight: 700 !important;
    color: var(--k-black) !important;
    font-size: 0.98rem !important;
    margin-bottom: 0.4rem !important;
}

/* ============================================================
   MOBILE — pack tighter, bigger buttons
   ============================================================ */
@media (max-width: 767.98px) {
    html { font-size: 16.5px !important; }
    .pi-section { padding: 3rem 0 !important; }
    .pi-section-sm { padding: 2rem 0 !important; }
    .pi-section-header { margin-bottom: 1.85rem !important; }
    .pi-section-header .pi-subtitle { font-size: 1rem !important; }
    .pi-stats { padding: 2rem 0 !important; }
    .pi-stat-icon { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }
    .pi-stat-number { font-size: 1.7rem !important; }
    .pi-stat-label { font-size: 0.82rem !important; }

    .pi-image-card-bg,
    .pi-why-card .pi-image-card-bg { height: 200px !important; }
    .pi-sector-card-img { height: 150px !important; }
    .pi-image-card-overlay { padding: 1.15rem !important; }
    .pi-sector-card-body { padding: 1rem 0.95rem 1.2rem !important; }

    .pi-cta-banner { padding: 3rem 0 !important; }
    .pi-cta-banner h2 { font-size: 1.55rem !important; }
    .pi-cta-banner p { font-size: 1.02rem !important; }
    .pi-cta-banner .d-flex { flex-direction: column !important; gap: 0.75rem !important; align-items: center !important; }
    .pi-cta-banner .pi-btn-lg { width: 100% !important; max-width: 340px !important; }

    .pi-newsletter-form { flex-direction: column !important; gap: 0.75rem !important; }
    .pi-newsletter-form .pi-btn-dark { width: 100% !important; }

    .pi-footer-bottom .col-md-6.text-md-end { text-align: center !important; margin-top: 0.6rem !important; }
    .pi-footer-bottom .col-md-6.text-md-end a { margin: 0 0.5rem !important; }
}

@media (max-width: 480px) {
    .pi-hero3-title { font-size: 2.1rem !important; }
    .pi-hero3-lead  { font-size: 1.02rem !important; }
    .pi-hero3-eyebrow { font-size: 0.8rem !important; padding: 0.45rem 0.9rem !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   END DESIGN SYSTEM v6.0  "KISAN EXPO"
   ============================================================ */


/* ============================================================
   ============================================================
   POULTRY INDIA — DESIGN SYSTEM v7.0  "POSTER EDITION"
   ============================================================
   FIXES from user feedback:
     1. RED is whispered, not shouted. Used ONLY on tiny accents:
        Register button, active nav underline, "Free" badges,
        form-error states. Everywhere else uses YELLOW.
     2. Type system overhauled: Oswald display font for headings.
        Body keeps Inter. This single change makes the entire
        site feel structurally different — not just recoloured.
     3. New visual primitives: yellow top accent strip on cards,
        thick yellow section-divider ribbons, poster-style
        eyebrow chips with yellow rule.
   Logo palette only:  YELLOW  ·  BLACK  ·  WHITE  ·  (red accent)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

:root {
    --k7-yellow:        #FDB913 !important;   /* logo sun yellow */
    --k7-yellow-warm:   #F0A500 !important;
    --k7-yellow-soft:   #FFF1C2 !important;
    --k7-yellow-tint:   #FFFBEC !important;
    --k7-red:           #D32F2F !important;   /* used ONLY as accent */
    --k7-red-soft:      #FFEDED !important;
    --k7-black:         #111111 !important;
    --k7-ink:           #1A1A1A !important;
    --k7-ink-2:         #4F4F4F !important;
    --k7-mute:          #7A7A7A !important;
    --k7-line:          #E8DFC9 !important;
    --k7-line-strong:   #C9C0AC !important;
    --k7-cream:         #FFFBEC !important;
    --k7-white:         #FFFFFF !important;

    /* v7.8: Poppins for headings (geometric, friendly, strong character)
       + Inter for body (already loaded by _Layout.cshtml, excellent at
       small sizes, pairs cleanly with Poppins). */
    --k7-font-display:  'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --k7-font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===== BASE — bigger, friendlier, NEW heading font ===== */
html { font-size: 17.5px !important; }
body {
    background: var(--k7-cream) !important;
    color: var(--k7-ink) !important;
    font-family: var(--k7-font-body) !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}
h1, h2, h3, h4, h5, h6,
.pi-section-header h2,
.pi-marquee-heading h2,
.pi-hero3-title,
.pi-cta-banner h2 {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-black) !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem) !important; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem) !important; font-weight: 700 !important; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important; font-weight: 700 !important; }
h4 { font-size: clamp(1.1rem, 1.9vw, 1.3rem) !important; font-weight: 600 !important; }
p  {
    font-family: var(--k7-font-body) !important;
    font-size: 1.06rem !important;
    line-height: 1.78 !important;
    color: var(--k7-ink) !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

/* ============================================================
   TOP DECORATIVE UTILITY STRIP — yellow line under header
   (visual ribbon to separate header from page, expo poster feel)
   ============================================================ */
.pi-site-header { position: sticky !important; top: 0 !important; z-index: 1200 !important; }

/* ============================================================
   NAVBAR — clean WHITE bar, black text, yellow underline
   (red removed entirely from navbar)
   ============================================================ */
.pi-nav3 {
    background: var(--k7-white) !important;
    border-bottom: 5px solid var(--k7-yellow) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.pi-nav3-row {
    min-height: 92px !important;
    padding: 0.4rem 0 !important;
    gap: 1.5rem !important;
}
.pi-nav3-brand { background: transparent !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.pi-nav3-brand img { height: 72px !important; max-width: 240px !important; }
/* v7.5: center the nav items between logo and CTA button */
.pi-nav3-links {
    margin: 0 auto !important;
    gap: 0.15rem !important;
    justify-content: center !important;
}
.pi-nav3-links a {
    font-family: var(--k7-font-display) !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: var(--k7-black) !important;
    padding: 0.7rem 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    background: transparent !important;
}
.pi-nav3-links a:hover {
    color: var(--k7-black) !important;
    background: transparent !important;
}
.pi-nav3-links a:hover::after,
.pi-nav3-links a.is-active::after {
    content: '' !important;
    position: absolute !important;
    left: 1rem !important; right: 1rem !important;
    bottom: 0.3rem !important;
    height: 4px !important;
    background: var(--k7-yellow) !important;
    border-radius: 0 !important;
}
.pi-nav3-links a.is-active { color: var(--k7-red) !important; }
.pi-nav3-links a.is-active::after { background: var(--k7-red) !important; }

/* The single red CTA — small accent of red, that's it */
.pi-nav3-cta {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-red) !important;
    color: var(--k7-white) !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    padding: 0.85rem 1.65rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 4px 12px rgba(211,47,47,0.28) !important;
    border: 0 !important;
}
.pi-nav3-cta:hover {
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
}
.pi-nav3-burger {
    background: var(--k7-yellow) !important;
    border: 0 !important;
    border-radius: 4px !important;
    width: 48px !important; height: 48px !important;
}
.pi-nav3-burger span { background: var(--k7-black) !important; width: 24px !important; height: 3px !important; }

@media (max-width: 991.98px) {
    .pi-nav3-row { min-height: 70px !important; }
    .pi-nav3-brand img { height: 52px !important; max-width: 170px !important; }
    .pi-nav3 .pi-nav3-collapse.show,
    .pi-nav3 .pi-nav3-collapse.collapsing {
        background: var(--k7-white) !important;
        padding: 0.4rem 0 1rem !important;
        border-top: 2px solid var(--k7-line) !important;
    }
    .pi-nav3-links a {
        padding: 1.05rem 0.5rem !important;
        font-size: 1.1rem !important;
        border-bottom: 1px solid var(--k7-line) !important;
        color: var(--k7-black) !important;
        background: transparent !important;
    }
    .pi-nav3-links a:hover { background: var(--k7-yellow-tint) !important; }
    .pi-nav3-links a:hover::after,
    .pi-nav3-links a.is-active::after { display: none !important; }
    .pi-nav3-links a.is-active { color: var(--k7-red) !important; background: var(--k7-yellow-tint) !important; }
    .pi-nav3-cta { margin: 1rem 0.5rem 0 !important; padding: 1.05rem 1.5rem !important; font-size: 1.05rem !important; }
}

/* ============================================================
   HERO — keep video, strong dark veil, poster-style title
   Title uses Oswald — INSTANTLY different from before
   ============================================================ */
.pi-hero3 { min-height: 75vh !important; background: var(--k7-black) !important; }
.pi-hero3-veil,
.pi-hero3.is-revealed .pi-hero3-veil {
    background: linear-gradient(180deg,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.65) 60%,
        rgba(0,0,0,0.85) 100%) !important;
    animation: none !important;
}
.pi-hero3-content {
    padding: 4.5rem 1rem 5.5rem !important;
    max-width: 920px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}
/* Eyebrow chip on hero — yellow tag */
.pi-hero3-eyebrow,
.pi-hero3.is-revealed .pi-hero3-eyebrow {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    border: 0 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.55rem 1.15rem !important;
    margin-bottom: 1.75rem !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 12px rgba(253,185,19,0.35) !important;
    display: inline-block !important;
}
.pi-hero3-eyebrow-dot,
.pi-hero3.is-revealed .pi-hero3-eyebrow-dot {
    background: var(--k7-black) !important;
    box-shadow: none !important;
    animation: none !important;
    width: 8px !important; height: 8px !important;
}
.pi-hero3-title,
.pi-hero3.is-revealed .pi-hero3-title {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-white) !important;
    font-size: clamp(2.3rem, 6.5vw, 4.6rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    text-shadow: 0 3px 18px rgba(0,0,0,0.55) !important;
    margin-bottom: 1.25rem !important;
}
.pi-hero3-year,
.pi-hero3.is-revealed .pi-hero3-year { color: var(--k7-yellow) !important; }
.pi-hero3-lead,
.pi-hero3.is-revealed .pi-hero3-lead {
    font-family: var(--k7-font-body) !important;
    color: rgba(255,255,255,0.96) !important;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    margin-bottom: 2.5rem !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45) !important;
}
.pi-hero3-mark,
.pi-hero3.is-revealed .pi-hero3-mark {
    background-image: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--k7-yellow) !important;
    font-weight: 600 !important;
    white-space: normal !important;
}
.pi-hero3-actions { gap: 1rem !important; flex-wrap: wrap !important; justify-content: center !important; }
.pi-hero3-cta,
.pi-hero3.is-revealed .pi-hero3-cta {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    padding: 1.05rem 2.2rem !important;
    border-radius: 4px !important;
    border: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 6px 18px rgba(253,185,19,0.4) !important;
}
.pi-hero3-cta:hover {
    background: var(--k7-white) !important;
    color: var(--k7-black) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.3) !important;
}
/* Secondary CTA: outlined (NOT red anymore) */
.pi-hero3-cta--pink,
.pi-hero3.is-revealed .pi-hero3-cta--pink {
    background: transparent !important;
    color: var(--k7-white) !important;
    border: 2px solid var(--k7-white) !important;
    box-shadow: none !important;
}
.pi-hero3-cta--pink:hover,
.pi-hero3.is-revealed .pi-hero3-cta--pink:hover {
    background: var(--k7-white) !important;
    color: var(--k7-black) !important;
    box-shadow: 0 10px 26px rgba(255,255,255,0.2) !important;
}

@media (max-width: 767.98px) {
    .pi-hero3 { min-height: 62vh !important; }
    .pi-hero3-content { padding: 3rem 1rem 3.5rem !important; }
    .pi-hero3-title { font-size: clamp(2.1rem, 8vw, 3.2rem) !important; }
    .pi-hero3-lead  { font-size: 1.08rem !important; }
    .pi-hero3-actions { flex-direction: column !important; align-items: stretch !important; }
    .pi-hero3-cta { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; }
}

/* ============================================================
   STATS BANNER — white with yellow-bordered tiles
   (no longer a yellow flood — calmer, poster strip below hero)
   ============================================================ */
.pi-stats {
    background: var(--k7-white) !important;
    padding: 3rem 0 !important;
    border-bottom: 4px solid var(--k7-yellow) !important;
    border-top: 4px solid var(--k7-yellow) !important;
}
.pi-stat-item,
.pi-stat-item-modern {
    background: var(--k7-cream) !important;
    border: 0 !important;
    border-top: 4px solid var(--k7-yellow) !important;
    backdrop-filter: none !important;
    padding: 1.25rem 0.85rem !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    border-radius: 0 !important;
}
.pi-stat-icon {
    width: 52px !important; height: 52px !important;
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    margin: 0 auto 0.75rem !important;
    font-size: 1.35rem !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
}
.pi-stat-number {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-black) !important;
    font-weight: 700 !important;
    font-size: clamp(2.1rem, 4.5vw, 3rem) !important;
    line-height: 1.0 !important;
    letter-spacing: 0.01em !important;
}
.pi-stat-label {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-ink-2) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-top: 0.25rem !important;
}

/* ============================================================
   SECTIONS — alternate white & cream bands, clear rhythm
   ============================================================ */
.pi-section { padding: 4.75rem 0 !important; }
.pi-section-sm { padding: 2.75rem 0 !important; }
.pi-section-gray,
.pi-section-gradient,
.pi-about-section { background: var(--k7-cream) !important; }
.pi-why-section,
.pi-sectors-section { background: var(--k7-white) !important; }
.pi-section-dark { background: var(--k7-black) !important; }
.pi-section-dark *,
.pi-section-dark p { color: rgba(255,255,255,0.92) !important; }
.pi-section-dark h2,
.pi-section-dark h3,
.pi-section-dark h4 { color: var(--k7-white) !important; }

.pi-section-header { margin-bottom: 2.75rem !important; }
.pi-section-header h2 { margin-bottom: 0.65rem !important; }
.pi-section-header .pi-subtitle {
    font-family: var(--k7-font-body) !important;
    color: var(--k7-ink-2) !important;
    font-size: 1.1rem !important;
    line-height: 1.65 !important;
    max-width: 640px !important;
    margin: 0.5rem auto 0 !important;
    text-transform: none !important;
}

/* Eyebrow — bigger, poster-style label */
.pi-eyebrow {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-black) !important;
    border: 0 !important;
    color: var(--k7-yellow) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    padding: 0.55rem 1.15rem !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.14) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    position: relative !important;
    overflow: hidden !important;
}
.pi-eyebrow::before {
    background: var(--k7-yellow) !important;
    box-shadow: none !important;
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
}
.pi-eyebrow--yellow {
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
}
.pi-eyebrow--yellow::before { background: var(--k7-black) !important; }
.pi-eyebrow--dark {
    background: var(--k7-black) !important;
    color: var(--k7-white) !important;
}

/* v7.5: gentle shine animation on the yellow eyebrow chip — a diagonal
   highlight slides across every 3.5 seconds. Subtle but noticeable. */
.pi-eyebrow--yellow::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(110deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,0.7) 50%,
        transparent 65%,
        transparent 100%) !important;
    transform: translateX(-110%) !important;
    animation: piEyebrowShine 3.5s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes piEyebrowShine {
    0%   { transform: translateX(-110%); }
    55%  { transform: translateX(110%); }
    100% { transform: translateX(110%); }
}
/* Pause the shine if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pi-eyebrow--yellow::after { animation: none !important; display: none !important; }
}

/* v7.4: no more brush highlight — highlighted words just become YELLOW TEXT.
   Uses the warmer logo yellow (#F0A500) so it stays readable on white. */
.pi-mark,
.pi-mark--pink {
    background-image: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--k7-yellow-warm) !important;
    font-weight: inherit !important;
    white-space: normal !important;
}
.pi-section-dark .pi-mark,
.pi-section-dark .pi-mark--pink { color: var(--k7-yellow) !important; }

/* ============================================================
   BUTTONS — chunky, yellow primary, NO red base buttons
   ============================================================ */
.pi-btn {
    font-family: var(--k7-font-display) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.95rem 1.85rem !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-width: 0 !important;
    min-height: 50px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}
.pi-btn::after { display: none !important; }
.pi-btn:hover { transform: translateY(-2px) !important; }
.pi-btn:active { transform: translateY(1px) !important; }
.pi-btn-sm { padding: 0.55rem 1.15rem !important; font-size: 0.85rem !important; min-height: 38px !important; }
.pi-btn-lg { padding: 1.1rem 2.25rem !important; font-size: 1.08rem !important; min-height: 56px !important; }
.pi-btn-xl { padding: 1.2rem 2.6rem !important; font-size: 1.15rem !important; min-height: 60px !important; }

.pi-btn-primary {
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    box-shadow: 0 4px 12px rgba(253,185,19,0.3) !important;
}
.pi-btn-primary:hover {
    background: var(--k7-yellow-warm) !important;
    box-shadow: 0 8px 22px rgba(253,185,19,0.45) !important;
}
.pi-btn-dark {
    background: var(--k7-black) !important;
    color: var(--k7-white) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22) !important;
}
.pi-btn-dark:hover { background: #2a2a2a !important; }
.pi-btn-outline {
    background: var(--k7-white) !important;
    color: var(--k7-black) !important;
    border: 2px solid var(--k7-black) !important;
    box-shadow: none !important;
}
.pi-btn-outline:hover {
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
}
.pi-btn-outline-light {
    background: transparent !important;
    color: var(--k7-white) !important;
    border: 2px solid var(--k7-white) !important;
    box-shadow: none !important;
}
.pi-btn-outline-light:hover {
    background: var(--k7-white) !important;
    color: var(--k7-black) !important;
}
/* pink/red kept ONLY for the highest-priority CTA */
.pi-btn-pink,
.pi-btn-visit {
    background: var(--k7-red) !important;
    color: var(--k7-white) !important;
    box-shadow: 0 4px 12px rgba(211,47,47,0.3) !important;
}
.pi-btn-pink:hover,
.pi-btn-visit:hover {
    background: #B91C1C !important;
    box-shadow: 0 8px 22px rgba(211,47,47,0.42) !important;
}
.pi-btn-exhibit {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    border: 0 !important;
    border-radius: 4px !important;
    min-height: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 4px 12px rgba(253,185,19,0.3) !important;
}

/* ============================================================
   CARDS — yellow top accent strip is the visual signature
   ============================================================ */
.pi-image-card,
.pi-why-card {
    background: var(--k7-white) !important;
    border: 1px solid var(--k7-line) !important;
    border-top: 5px solid var(--k7-yellow) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.pi-image-card:hover,
.pi-why-card:hover {
    transform: translateY(-4px) !important;
    border-top-color: var(--k7-black) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}
.pi-image-card-bg,
.pi-why-card .pi-image-card-bg {
    height: 230px !important;
    width: 100% !important;
    object-fit: cover !important;
}
.pi-image-card-overlay {
    padding: 1.4rem 1.3rem !important;
    background: var(--k7-white) !important;
}
.pi-image-card-overlay h4 {
    font-family: var(--k7-font-display) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--k7-black) !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    margin-bottom: 0.55rem !important;
}
.pi-image-card-overlay p {
    font-family: var(--k7-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--k7-ink-2) !important;
    text-transform: none !important;
}

/* Sector cards */
.pi-sector-card {
    background: var(--k7-white) !important;
    border: 1px solid var(--k7-line) !important;
    border-top: 5px solid var(--k7-yellow) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    height: 100% !important;
}
.pi-sector-card:hover {
    transform: translateY(-4px) !important;
    border-top-color: var(--k7-black) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}
.pi-sector-card-img { height: 180px !important; overflow: hidden !important; background: var(--k7-cream) !important; }
.pi-sector-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.4s ease !important; }
.pi-sector-card:hover .pi-sector-card-img img { transform: scale(1.05) !important; }
.pi-sector-card-body { padding: 1.2rem 1.1rem 1.4rem !important; }
.pi-sector-card-pill {
    font-family: var(--k7-font-display) !important;
    display: inline-block !important;
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 2px !important;
    margin-bottom: 0.65rem !important;
    text-transform: uppercase !important;
}
.pi-sector-card-title {
    font-family: var(--k7-font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    color: var(--k7-black) !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.3 !important;
}
.pi-sector-card-desc {
    font-family: var(--k7-font-body) !important;
    font-size: 0.98rem !important;
    color: var(--k7-ink-2) !important;
    line-height: 1.6 !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* Gallery items */
.pi-gallery-item {
    border-radius: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--k7-line) !important;
    border-top: 4px solid var(--k7-yellow) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    background: var(--k7-white) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.pi-gallery-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
}
.pi-gallery-caption {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-white) !important;
    color: var(--k7-black) !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    padding: 0.85rem 1rem !important;
    border-top: 1px solid var(--k7-line) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Testimonials */
.pi-testimonial {
    background: var(--k7-white) !important;
    border: 1px solid var(--k7-line) !important;
    border-top: 5px solid var(--k7-yellow) !important;
    border-radius: 0 !important;
    padding: 1.65rem 1.4rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    height: 100% !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.pi-testimonial:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.1) !important;
}
.pi-testimonial-text {
    font-family: var(--k7-font-body) !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
    color: var(--k7-ink) !important;
    text-transform: none !important;
}
.pi-testimonial-author {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-black) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.pi-testimonial-role {
    font-family: var(--k7-font-body) !important;
    color: var(--k7-mute) !important;
    text-transform: none !important;
}

/* About points + checks: yellow check icons (not red) */
.pi-about-points i,
.pi-image-section-content .bi-check2-circle { color: var(--k7-yellow-warm) !important; }
.pi-about-points { color: var(--k7-ink) !important; font-size: 1rem !important; }

/* Organised-by pill, edition badge, glass */
.pi-organised-by {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--k7-yellow) !important;
}
.pi-organised-by i,
.pi-organised-by strong { color: var(--k7-yellow) !important; }
.pi-text-yellow { color: var(--k7-yellow) !important; }
.pi-edition-badge {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 2px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
.pi-glass {
    background: rgba(253,185,19,0.06) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--k7-yellow) !important;
    border-radius: 0 !important;
}

/* Knowledge-day image-section overlay */
.pi-image-section-overlay {
    background: linear-gradient(180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.78) 100%) !important;
}

/* ============================================================
   MARQUEE LOGO STRIPS — clean, no border-radius pretense
   ============================================================ */
.pi-marquee-section { padding: 3rem 0 !important; background: var(--k7-white) !important; }
.pi-marquee-section.alt { background: var(--k7-cream) !important; }
.pi-marquee-heading { text-align: center !important; margin-bottom: 1.65rem !important; }
.pi-marquee-heading h2 {
    font-family: var(--k7-font-display) !important;
    font-size: clamp(1.45rem, 2.7vw, 1.85rem) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    margin-bottom: 0.35rem !important;
}
.pi-marquee-heading p {
    color: var(--k7-ink-2) !important;
    font-size: 1rem !important;
}
.pi-marquee-heading-bar {
    background: var(--k7-yellow) !important;
    width: 60px !important;
    height: 4px !important;
    margin: 0.65rem auto 0 !important;
    border-radius: 0 !important;
}
.pi-marquee-item {
    background: var(--k7-white) !important;
    border: 1px solid var(--k7-line) !important;
    border-radius: 4px !important;
    padding: 0.9rem !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}
.pi-marquee-item:hover {
    border-color: var(--k7-yellow) !important;
    transform: translateY(-2px) !important;
}

/* YEP / Supported boxes */
.pi-yep-cipa-wrap,
.pi-supported-by-box {
    background: var(--k7-white) !important;
    border: 1px solid var(--k7-line) !important;
    border-top: 5px solid var(--k7-yellow) !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.pi-yep-cipa-heading,
.pi-supported-by-label {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.9rem !important;
    border-radius: 2px !important;
    display: inline-block !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.85rem !important;
}

/* ============================================================
   NEWSLETTER BAND — yellow strip (kept the same idea)
   ============================================================ */
.pi-newsletter-band {
    background: var(--k7-yellow) !important;
    border-top: 4px solid var(--k7-black) !important;
    border-bottom: 4px solid var(--k7-black) !important;
    padding: 2.75rem 0 !important;
}
.pi-newsletter-band::after,
.pi-newsletter-band::before { display: none !important; }
.pi-newsletter-band h3 {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-black) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
}
.pi-newsletter-band p { color: var(--k7-black) !important; }
.pi-newsletter-form .form-control {
    border: 2.5px solid var(--k7-black) !important;
    background: var(--k7-white) !important;
    border-radius: 4px !important;
    padding: 0.85rem 1.15rem !important;
    font-size: 1rem !important;
    min-height: 52px !important;
}
.pi-newsletter-form .form-control:focus {
    border-color: var(--k7-yellow-warm) !important;
    box-shadow: 0 0 0 3px rgba(240,165,0,0.25) !important;
}
.pi-newsletter-form .pi-btn-dark {
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
    border-radius: 4px !important;
    min-height: 52px !important;
    padding: 0.85rem 1.5rem !important;
}
.pi-newsletter-form .pi-btn-dark:hover {
    background: #2a2a2a !important;
}

/* ============================================================
   CTA BANNER — YELLOW poster (red removed)
   ============================================================ */
.pi-cta-banner {
    background: var(--k7-yellow) !important;
    background-image: none !important;
    animation: none !important;
    padding: 4.5rem 0 !important;
    border-top: 6px solid var(--k7-black) !important;
    border-bottom: 6px solid var(--k7-black) !important;
    color: var(--k7-black) !important;
}
.pi-cta-banner::before,
.pi-cta-banner::after { display: none !important; }
.pi-cta-banner h2 {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-black) !important;
    font-size: clamp(1.7rem, 3.8vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    margin-bottom: 1rem !important;
}
.pi-cta-banner p {
    color: var(--k7-black) !important;
    font-size: 1.15rem !important;
    max-width: 720px !important;
    margin: 0 auto 2.2rem !important;
    line-height: 1.6 !important;
    text-transform: none !important;
    font-family: var(--k7-font-body) !important;
}
.pi-cta-banner .pi-card-tag {
    font-family: var(--k7-font-display) !important;
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
    font-weight: 600 !important;
    padding: 0.45rem 1rem !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
}
.pi-cta-banner .pi-btn-primary {
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
}
.pi-cta-banner .pi-btn-primary:hover {
    background: var(--k7-white) !important;
    color: var(--k7-black) !important;
}
.pi-cta-banner .pi-btn-outline-light {
    background: transparent !important;
    color: var(--k7-black) !important;
    border: 2px solid var(--k7-black) !important;
}
.pi-cta-banner .pi-btn-outline-light:hover {
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
}

/* ============================================================
   FOOTER — black with yellow accents only
   ============================================================ */
.pi-footer {
    background: var(--k7-black) !important;
    color: #ffffff !important;
    padding-top: 3.5rem !important;
    border-top: 5px solid var(--k7-yellow) !important;
}
.pi-footer h5 {
    font-family: var(--k7-font-display) !important;
    color: var(--k7-yellow) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.pi-footer h5::after {
    background: var(--k7-yellow) !important;
    width: 36px !important;
    height: 3px !important;
}
.pi-footer a {
    font-family: var(--k7-font-body) !important;
    color: #ffffff !important;
    font-size: 0.96rem !important;
    text-transform: none !important;
}
.pi-footer a:hover { color: var(--k7-yellow) !important; padding-left: 5px !important; }
.pi-footer p {
    font-family: var(--k7-font-body) !important;
    font-size: 0.96rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
    text-transform: none !important;
}
.pi-footer-links li a::before { color: var(--k7-yellow) !important; }
.pi-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    background: #0a0a0a !important;
    color: #9c9580 !important;
    padding: 1.4rem 0 !important;
    margin-top: 2.75rem !important;
    font-size: 0.92rem !important;
}
.pi-footer-supported-logos {
    background: var(--k7-white) !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    border-top: 4px solid var(--k7-yellow) !important;
}

/* Social rail simplified */
.pi-social-rail {
    background: var(--k7-black) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    padding: 6px !important;
    box-shadow: -4px 6px 18px rgba(0,0,0,0.3) !important;
}
.pi-social-rail a {
    width: 40px !important; height: 40px !important;
    background: var(--k7-white) !important;
    color: var(--k7-black) !important;
    border-radius: 4px !important;
}
.pi-social-rail a:hover {
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    transform: translateX(-3px) !important;
}
@media (max-width: 767.98px) { .pi-social-rail { display: none !important; } }

/* Back-to-top — yellow (not red) */
.pi-back-to-top {
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    border: 2px solid var(--k7-black) !important;
    width: 54px !important; height: 54px !important;
    border-radius: 50% !important;
    font-size: 1.3rem !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
}
.pi-back-to-top:hover {
    background: var(--k7-yellow-warm) !important;
    transform: translateY(-3px) !important;
}

/* Forms */
.form-control, .form-select {
    border: 2px solid var(--k7-line-strong) !important;
    border-radius: 4px !important;
    padding: 0.85rem 1.1rem !important;
    font-size: 1rem !important;
    min-height: 50px !important;
    background: var(--k7-white) !important;
    font-family: var(--k7-font-body) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--k7-yellow-warm) !important;
    box-shadow: 0 0 0 3px rgba(240,165,0,0.25) !important;
    outline: 0 !important;
}
.form-label {
    font-family: var(--k7-font-display) !important;
    font-weight: 600 !important;
    color: var(--k7-black) !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
}
.is-invalid, .form-control.is-invalid {
    border-color: var(--k7-red) !important;
}

/* ============================================================
   MOBILE — tighter, full-width buttons
   ============================================================ */
@media (max-width: 767.98px) {
    html { font-size: 16.5px !important; }
    .pi-section { padding: 3rem 0 !important; }
    .pi-section-sm { padding: 2rem 0 !important; }
    .pi-section-header { margin-bottom: 2rem !important; }
    .pi-section-header .pi-subtitle { font-size: 1rem !important; }
    .pi-stats { padding: 2.25rem 0 !important; }
    .pi-stat-icon { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }
    .pi-stat-number { font-size: 1.85rem !important; }
    .pi-stat-label { font-size: 0.82rem !important; }

    .pi-image-card-bg,
    .pi-why-card .pi-image-card-bg { height: 200px !important; }
    .pi-sector-card-img { height: 150px !important; }
    .pi-image-card-overlay { padding: 1.15rem !important; }
    .pi-sector-card-body { padding: 1rem 0.95rem 1.2rem !important; }

    .pi-cta-banner { padding: 3rem 0 !important; }
    .pi-cta-banner h2 { font-size: 1.6rem !important; }
    .pi-cta-banner p { font-size: 1.02rem !important; }
    .pi-cta-banner .d-flex { flex-direction: column !important; gap: 0.75rem !important; align-items: center !important; }
    .pi-cta-banner .pi-btn-lg { width: 100% !important; max-width: 340px !important; }

    .pi-newsletter-form { flex-direction: column !important; gap: 0.75rem !important; }
    .pi-newsletter-form .pi-btn-dark { width: 100% !important; }

    .pi-footer-bottom .col-md-6.text-md-end { text-align: center !important; margin-top: 0.6rem !important; }
    .pi-footer-bottom .col-md-6.text-md-end a { margin: 0 0.5rem !important; }
}

@media (max-width: 480px) {
    .pi-hero3-title { font-size: 2.15rem !important; }
    .pi-hero3-lead  { font-size: 1.02rem !important; }
    .pi-hero3-eyebrow { font-size: 0.78rem !important; padding: 0.45rem 0.85rem !important; }
}

/* Accessibility focus */
a:focus-visible,
button:focus-visible,
.pi-btn:focus-visible,
.pi-nav3-links a:focus-visible,
.pi-nav3-cta:focus-visible {
    outline: 3px solid var(--k7-yellow-warm) !important;
    outline-offset: 2px !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   HERO SPLIT LAYOUT (v7.2)
   Full-bleed VIDEO covers entire hero (visible behind text too).
   Text overlay sits on the LEFT 30%.
   No black panel, no yellow divider.
   ============================================================ */
.pi-hero3.pi-hero3--split {
    min-height: calc(75vh + 60px) !important;
    background: var(--k7-black) !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
}
/* Kill the legacy fullscreen video/veil/centered container */
.pi-hero3--split > .pi-hero3-video,
.pi-hero3--split > .pi-hero3-veil { display: none !important; }
.pi-hero3--split > .container { display: none !important; }

.pi-hero3-split {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: calc(75vh + 60px) !important;
}

/* VIDEO — fills the ENTIRE hero behind everything */
.pi-hero3-split-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: var(--k7-black) !important;
    z-index: 1 !important;
}
.pi-hero3-split-video .pi-hero3-video {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    background: var(--k7-black) !important;
}
.pi-hero3-split-video .pi-hero3-video iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 56.25vw !important;        /* 16:9 aspect to fill width */
    min-height: 100% !important;
    min-width: 177.78vh !important;    /* 16:9 aspect to fill height */
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Soft dark gradient ONLY on left side for text readability.
   Fades to fully transparent by ~45% width — right side of video
   is 100% visible, no overlay. */
.pi-hero3-split-video::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.50) 18%,
        rgba(0,0,0,0.25) 32%,
        rgba(0,0,0,0.00) 45%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* LEFT TEXT OVERLAY — no background, sits on top of video */
.pi-hero3-split-text {
    position: relative !important;
    z-index: 3 !important;
    width: 36% !important;
    max-width: 36% !important;
    min-height: calc(75vh + 60px) !important;
    background: transparent !important;
    padding: 3rem 2.25rem 3rem 3rem !important;
    display: flex !important;
    align-items: center !important;
}
.pi-hero3-split-text::before { display: none !important; }
.pi-hero3-split-text .pi-hero3-content {
    padding: 0 !important;
    max-width: 420px !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Text styles — strong shadow for readability over video */
.pi-hero3-split-text .pi-hero3-eyebrow {
    margin-bottom: 1.5rem !important;
}
.pi-hero3-split-text .pi-hero3-title {
    font-size: clamp(2rem, 3.4vw, 3.4rem) !important;
    text-align: left !important;
    line-height: 1.0 !important;
    margin-bottom: 1.15rem !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.6), 0 0 24px rgba(0,0,0,0.35) !important;
}
.pi-hero3-split-text .pi-hero3-lead {
    text-align: left !important;
    font-size: clamp(1rem, 1.2vw, 1.2rem) !important;
    margin-bottom: 2rem !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6) !important;
}
.pi-hero3-split-text .pi-hero3-actions {
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}
.pi-hero3-split-text .pi-hero3-cta {
    padding: 0.9rem 1.5rem !important;
    font-size: 0.98rem !important;
}

/* TABLET (992-1199): widen text overlay slightly */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .pi-hero3-split-text {
        width: 42% !important;
        max-width: 42% !important;
        padding: 2.5rem 2rem 2.5rem 2.5rem !important;
    }
    .pi-hero3-split-text .pi-hero3-title { font-size: clamp(1.9rem, 3vw, 2.7rem) !important; }
}

/* SMALL TABLET (768-991): wider text panel, slightly stronger gradient */
@media (max-width: 991.98px) and (min-width: 768px) {
    .pi-hero3.pi-hero3--split,
    .pi-hero3-split { min-height: calc(70vh + 60px) !important; }
    .pi-hero3-split-text {
        width: 50% !important;
        max-width: 50% !important;
        min-height: calc(70vh + 60px) !important;
        padding: 2.25rem 1.5rem 2.25rem 2rem !important;
    }
    .pi-hero3-split-video::after {
        background: linear-gradient(90deg,
            rgba(0,0,0,0.7) 0%,
            rgba(0,0,0,0.45) 35%,
            rgba(0,0,0,0.0) 60%) !important;
    }
    .pi-hero3-split-text .pi-hero3-title { font-size: 2.2rem !important; }
    .pi-hero3-split-text .pi-hero3-lead  { font-size: 1.02rem !important; margin-bottom: 1.5rem !important; }
}

/* MOBILE (<=767): text overlays full width on the video,
   stronger top-to-bottom dark veil so text is readable */
@media (max-width: 767.98px) {
    .pi-hero3.pi-hero3--split { min-height: calc(64vh + 60px) !important; }
    .pi-hero3-split { min-height: calc(64vh + 60px) !important; }
    .pi-hero3-split-text {
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(64vh + 60px) !important;
        padding: 2.5rem 1.25rem !important;
        align-items: center !important;
    }
    .pi-hero3-split-text .pi-hero3-content { text-align: center !important; }
    .pi-hero3-split-video::after {
        background: linear-gradient(180deg,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.55) 50%,
            rgba(0,0,0,0.75) 100%) !important;
    }
    .pi-hero3-split-text .pi-hero3-title {
        font-size: clamp(2rem, 7vw, 2.6rem) !important;
        text-align: center !important;
    }
    .pi-hero3-split-text .pi-hero3-lead  {
        font-size: 1.05rem !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }
    .pi-hero3-split-text .pi-hero3-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.7rem !important;
        justify-content: center !important;
    }
    .pi-hero3-split-text .pi-hero3-cta {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   v7.6 — softer corners + stronger eyebrow animation
   ============================================================ */

/* ---- Border-radius system (rounded everywhere) ---- */
.pi-image-card,
.pi-why-card,
.pi-sector-card                       { border-radius: 14px !important; }
.pi-gallery-item                      { border-radius: 12px !important; }
.pi-testimonial                       { border-radius: 14px !important; }
.pi-yep-cipa-wrap,
.pi-supported-by-box                  { border-radius: 14px !important; }
.pi-glass                             { border-radius: 14px !important; }
.pi-stat-item,
.pi-stat-item-modern                  { border-radius: 12px !important; }
.pi-footer-supported-logos            { border-radius: 12px !important; }
.pi-marquee-item                      { border-radius: 8px !important; }
.pi-social-rail                       { border-radius: 12px 0 0 12px !important; }
.pi-social-rail a                     { border-radius: 8px !important; }

/* Buttons — softer pills */
.pi-btn,
.pi-btn-primary,
.pi-btn-dark,
.pi-btn-outline,
.pi-btn-outline-light,
.pi-btn-pink,
.pi-btn-visit,
.pi-btn-exhibit                       { border-radius: 10px !important; }
.pi-btn-sm                            { border-radius: 8px !important; }
.pi-btn-lg, .pi-btn-xl                { border-radius: 12px !important; }
.pi-nav3-cta                          { border-radius: 10px !important; }
.pi-newsletter-form .form-control,
.pi-newsletter-form .pi-btn-dark      { border-radius: 10px !important; }
.form-control, .form-select           { border-radius: 10px !important; }

/* Small chips, badges, pills */
.pi-eyebrow                           { border-radius: 8px !important; }
.pi-sector-card-pill                  { border-radius: 6px !important; }
.pi-edition-badge                     { border-radius: 6px !important; }
.pi-yep-cipa-heading,
.pi-supported-by-label                { border-radius: 6px !important; }
.pi-cta-banner .pi-card-tag           { border-radius: 6px !important; }

/* ---- Stronger animation on the yellow eyebrow (e.g. "Organized by IPEMA",
   "Flagship Conference", "Monthly Update") — adds a subtle pulse on top
   of the existing diagonal shine. */
.pi-eyebrow--yellow {
    animation: piEyebrowPulse 2.8s ease-in-out infinite !important;
    transform-origin: center center !important;
}
@keyframes piEyebrowPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 3px 10px rgba(0,0,0,0.14);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 6px 18px rgba(253, 185, 19, 0.45);
    }
}
.pi-eyebrow--yellow::before {
    animation: piEyebrowDotPulse 1.6s ease-in-out infinite !important;
}
@keyframes piEyebrowDotPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
    .pi-eyebrow--yellow,
    .pi-eyebrow--yellow::before { animation: none !important; }
}

/* ============================================================
   v7.7 — eyebrow flipped (yellow bg + black text) +
           all grey text on light sections turned BLACK
   ============================================================ */

/* ALL eyebrow chips are now yellow background + black text.
   The dot is black. The shine + pulse animations from v7.5/v7.6
   are now applied to EVERY eyebrow (not just --yellow variant). */
.pi-eyebrow {
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
    border: 0 !important;
}
.pi-eyebrow::before {
    background: var(--k7-black) !important;
    box-shadow: none !important;
}
/* --yellow variant identical now (kept so existing markup still works) */
.pi-eyebrow--yellow {
    background: var(--k7-yellow) !important;
    color: var(--k7-black) !important;
}
.pi-eyebrow--yellow::before { background: var(--k7-black) !important; }
/* --dark variant stays dark for contrast use cases */
.pi-eyebrow--dark {
    background: var(--k7-black) !important;
    color: var(--k7-yellow) !important;
}
.pi-eyebrow--dark::before { background: var(--k7-yellow) !important; }

/* Extend the shine + pulse + dot animations to ALL eyebrows
   (not just --yellow), so every section eyebrow gets the effect */
.pi-eyebrow {
    animation: piEyebrowPulse 2.8s ease-in-out infinite !important;
}
.pi-eyebrow::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(110deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,0.7) 50%,
        transparent 65%,
        transparent 100%) !important;
    transform: translateX(-110%) !important;
    animation: piEyebrowShine 3.5s ease-in-out infinite !important;
    pointer-events: none !important;
}
.pi-eyebrow::before {
    animation: piEyebrowDotPulse 1.6s ease-in-out infinite !important;
}
.pi-eyebrow--dark::before { background: var(--k7-yellow) !important; }
@media (prefers-reduced-motion: reduce) {
    .pi-eyebrow,
    .pi-eyebrow::before,
    .pi-eyebrow::after { animation: none !important; }
    .pi-eyebrow::after { display: none !important; }
}

/* ============================================================
   ALL grey text on light backgrounds → BLACK
   (Dark sections, footer, and hero are excluded — they keep
    light text on dark backgrounds as before.)
   ============================================================ */

/* Subtitles below section headings */
.pi-section-header .pi-subtitle,
.pi-section .pi-subtitle               { color: var(--k7-black) !important; }

/* Card body text */
.pi-image-card-overlay p,
.pi-why-card .pi-image-card-overlay p  { color: var(--k7-black) !important; }
.pi-sector-card-desc                   { color: var(--k7-black) !important; }
.pi-sector-card-body p                 { color: var(--k7-black) !important; }

/* Testimonials */
.pi-testimonial-text                   { color: var(--k7-black) !important; }
.pi-testimonial-role                   { color: var(--k7-black) !important; }
.pi-testimonial .pi-testimonial-meta * { color: var(--k7-black) !important; }

/* Marquee section descriptions */
.pi-marquee-heading p                  { color: var(--k7-black) !important; }

/* About-points sub-bullets */
.pi-about-points,
.pi-about-points div                   { color: var(--k7-black) !important; font-weight: 500 !important; }

/* About mini stats */
.pi-about-mini-stats span              { color: var(--k7-black) !important; }

/* Newsletter band sub text */
.pi-newsletter-band p                  { color: var(--k7-black) !important; }

/* Body paragraphs inside light sections (any p in any non-dark section) */
.pi-section:not(.pi-section-dark) p,
.pi-section-sm p,
.pi-marquee-section p                  { color: var(--k7-black) !important; }

/* Bootstrap-style muted text inside light sections */
.pi-section:not(.pi-section-dark) .text-muted,
.pi-section:not(.pi-section-dark) .text-secondary,
.pi-marquee-section .text-muted,
.pi-marquee-section .text-secondary    { color: var(--k7-black) !important; }

/* YEP / Supported By labels inside boxes */
.pi-yep-cipa-wrap p,
.pi-supported-by-box p                 { color: var(--k7-black) !important; }

/* Stats labels */
.pi-stat-label                         { color: var(--k7-black) !important; }

/* Form labels */
.form-label                            { color: var(--k7-black) !important; }

/* Make sure the lighter custom-property fallbacks point to black too,
   so any remaining selectors using these vars also turn black */
:root {
    --k7-ink-2: #1A1A1A !important;
    --k7-mute:  #1A1A1A !important;
    --pi-text-secondary: #1A1A1A !important;
    --pi-gray-500: #1A1A1A !important;
    --pi-gray-600: #1A1A1A !important;
    --pi-gray-700: #1A1A1A !important;
}

/* ============================================================
   v7.9 — increase line-height on text only.
   More vertical breathing room between lines of body text and
   long paragraphs. Section padding, headings, and structural
   spacing are NOT changed.
   ============================================================ */
body                                   { line-height: 2 !important; }
p                                      { line-height: 2 !important; }

/* Long-form text — paragraphs, card text, testimonials, sub-points */
.pi-section-header .pi-subtitle        { line-height: 1.9 !important; }
.pi-image-card-overlay p,
.pi-why-card .pi-image-card-overlay p,
.pi-sector-card-desc                   { line-height: 1.85 !important; }
.pi-testimonial-text                   { line-height: 1.95 !important; }
.pi-about-points,
.pi-about-points div                   { line-height: 1.95 !important; }
.pi-marquee-heading p                  { line-height: 1.85 !important; }
.pi-newsletter-band p                  { line-height: 1.85 !important; }
.pi-cta-banner p                       { line-height: 1.9 !important; }

/* Hero left-panel lead text */
.pi-hero3-split-text .pi-hero3-lead    { line-height: 1.65 !important; }

/* Footer body & links */
.pi-footer p,
.pi-footer-links li a,
.pi-footer a                           { line-height: 1.9 !important; }

/* Headings stay tight on purpose (they're short, don't need more height) */
h1, h2, h3, h4, h5, h6                 { line-height: 1.25 !important; }
.pi-hero3-title                        { line-height: 1.1 !important; }

/* ============================================================
   v7.10 — Sector card pill restyled.
   No background, charcoal text, red 2px underline that hugs the
   text width (no extra padding).
   ============================================================ */
.pi-sector-card-pill {
    background: transparent !important;
    background-color: transparent !important;
    color: #2A2A2A !important;
    font-family: var(--k7-font-display) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid var(--k7-red) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

/* ============================================================
   NAV V3 — DROPDOWNS (poster-edition styling)
   ============================================================ */
.pi-nav3-links li.dropdown { position: relative !important; }

/* Hide Bootstrap's default chevron — we use a custom one for crisp alignment */
.pi-nav3-links .dropdown-toggle::after { display: none !important; }

.pi-nav3-links .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.18rem !important;   /* tight text-to-caret gap so the caret hugs its item */
}
.pi-nav3-links .dropdown-toggle::before {
    content: '' !important;
    display: inline-block !important;
    width: 0 !important; height: 0 !important;
    margin-left: 0 !important;   /* spacing handled by the toggle's flex gap */
    order: 2 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid currentColor !important;
    opacity: 0.55 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.pi-nav3-links .dropdown-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
}

.pi-nav3-dropdown {
    border: 0 !important;
    border-top: 4px solid var(--k7-yellow, #FDB913) !important;
    border-radius: 0 0 8px 8px !important;
    padding: 0.5rem 0 !important;
    margin-top: 0 !important;
    min-width: 240px !important;
    background: var(--k7-white, #fff) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06) !important;
    animation: piNav3DropdownIn 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes piNav3DropdownIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pi-nav3-dropdown .dropdown-item {
    font-family: var(--k7-font-display, inherit) !important;
    font-weight: 500 !important;
    font-size: 0.96rem !important;
    color: var(--k7-black, #14213D) !important;
    padding: 0.6rem 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
    border-left: 3px solid transparent !important;
    white-space: normal !important;
}
.pi-nav3-dropdown .dropdown-item i {
    color: var(--k7-red, #D32F2F) !important;
    font-size: 1rem !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.pi-nav3-dropdown .dropdown-item:hover,
.pi-nav3-dropdown .dropdown-item:focus {
    background: var(--k7-yellow-tint, #FFF8E1) !important;
    color: var(--k7-black, #14213D) !important;
    padding-left: 1.25rem !important;
    border-left-color: var(--k7-yellow, #FDB913) !important;
}
.pi-nav3-dropdown .dropdown-item.pi-highlight {
    background: var(--k7-yellow, #FDB913) !important;
    color: var(--k7-black, #14213D) !important;
    font-weight: 700 !important;
    margin: 0.5rem 0.6rem 0.3rem !important;
    border-radius: 6px !important;
    padding: 0.65rem 0.9rem !important;
    border-left: 0 !important;
}
.pi-nav3-dropdown .dropdown-item.pi-highlight i { color: var(--k7-red, #D32F2F) !important; }
.pi-nav3-dropdown .dropdown-item.pi-highlight:hover {
    background: var(--k7-red, #D32F2F) !important;
    color: var(--k7-white, #fff) !important;
    padding-left: 0.9rem !important;
}
.pi-nav3-dropdown .dropdown-item.pi-highlight:hover i { color: var(--k7-yellow, #FDB913) !important; }

.pi-nav3-dropdown .dropdown-divider {
    margin: 0.4rem 0 !important;
    border-top-color: var(--k7-line, rgba(0,0,0,0.08)) !important;
}

/* Keep multi-word nav labels on a single line (no wrap) */
.pi-nav3-links > li > a {
    white-space: nowrap !important;
}

/* ============================================================
   NAV V3 — QUICK ACTION BUTTONS (revealed after hero on scroll)
   ============================================================ */
.pi-nav3-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 320px !important;
    flex-shrink: 0 !important;
    /* Hidden by default — revealed when nav passes hero */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-6px) !important;
    pointer-events: none !important;
    transition: opacity 280ms ease, transform 280ms ease, visibility 280ms ease !important;
}
/* Row 1: Exhibit + Visitor side-by-side, Row 2: KD spans full width */
.pi-nav3-actions .pi-nav3-btn--kd {
    grid-column: 1 / -1 !important;
}
#mainNav.is-past-hero .pi-nav3-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.pi-nav3-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    font-family: var(--k7-font-display, inherit) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    padding: 0.30rem 0.40rem !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    border: 2px solid transparent !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease !important;
}
.pi-nav3-btn i { font-size: 0.85rem !important; }
.pi-nav3-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
}

.pi-nav3-btn--exhibit {
    background: var(--k7-red, #D32F2F) !important;
    color: var(--k7-white, #fff) !important;
}
.pi-nav3-btn--exhibit:hover {
    background: var(--k7-black, #14213D) !important;
    color: var(--k7-yellow, #FDB913) !important;
}

.pi-nav3-btn--visitor {
    background: var(--k7-yellow, #FDB913) !important;
    color: var(--k7-black, #14213D) !important;
}
.pi-nav3-btn--visitor:hover {
    background: var(--k7-black, #14213D) !important;
    color: var(--k7-yellow, #FDB913) !important;
}

.pi-nav3-btn--kd {
    background: var(--k7-white, #fff) !important;
    color: var(--k7-black, #14213D) !important;
    border-color: var(--k7-black, #14213D) !important;
}
.pi-nav3-btn--kd:hover {
    background: var(--k7-black, #14213D) !important;
    color: var(--k7-yellow, #FDB913) !important;
    border-color: var(--k7-black, #14213D) !important;
}

/* Mobile: actions become a single full-width column inside the collapse menu,
   always visible (no scroll-gating on mobile) */
@media (max-width: 991.98px) {
    .pi-nav3-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        margin: 1rem 0.5rem 0.5rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    .pi-nav3-actions .pi-nav3-btn--kd { grid-column: auto !important; }
    .pi-nav3-btn {
        padding: 0.95rem 1.1rem !important;
        font-size: 1rem !important;
    }
}

/* Hero — third CTA variant (dark outline to distinguish KD button) */
.pi-hero3-cta.pi-hero3-cta--alt {
    background: transparent !important;
    color: var(--k7-white, #fff) !important;
    border: 2px solid var(--k7-white, #fff) !important;
}
.pi-hero3-cta.pi-hero3-cta--alt:hover {
    background: var(--k7-yellow, #FDB913) !important;
    color: var(--k7-black, #14213D) !important;
    border-color: var(--k7-yellow, #FDB913) !important;
}

/* Compact variant — Media menu (fixed width; labels wrap fully in a 2-col grid) */
@media (min-width: 992px) {
    .pi-nav3-dropdown.pi-nav3-dropdown--media {
        min-width: 0 !important;
        width: 200px !important;
        max-width: 200px !important;
        overflow: visible !important;
        height: auto !important;
    }
    .pi-nav3-dropdown.pi-nav3-dropdown--media .dropdown-item {
        display: grid !important;
        grid-template-columns: 18px minmax(0, 1fr) !important;
        column-gap: 0.5rem !important;
        align-items: start !important;
        font-size: 0.84rem !important;
        padding: 0.55rem 0.7rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .pi-nav3-dropdown.pi-nav3-dropdown--media .dropdown-item i {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-top: 0.12em !important;
    }
    .pi-nav3-dropdown.pi-nav3-dropdown--media .dropdown-item span {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
    .pi-nav3-dropdown.pi-nav3-dropdown--media .dropdown-item:hover,
    .pi-nav3-dropdown.pi-nav3-dropdown--media .dropdown-item:focus {
        padding-left: 0.7rem !important;
    }
}

/* Scrollable variant — used by Newsletter dropdown with many monthly entries */
.pi-nav3-dropdown.pi-nav3-dropdown--scroll {
    max-height: 70vh !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--k7-yellow, #FDB913) transparent !important;
}
.pi-nav3-dropdown.pi-nav3-dropdown--scroll::-webkit-scrollbar { width: 6px !important; }
.pi-nav3-dropdown.pi-nav3-dropdown--scroll::-webkit-scrollbar-thumb {
    background: var(--k7-yellow, #FDB913) !important;
    border-radius: 4px !important;
}

/* Desktop hover-open for nicer feel (Bootstrap still handles click) */
@media (min-width: 992px) {
    .pi-nav3-links li.dropdown:hover > .pi-nav3-dropdown {
        display: block !important;
    }
    .pi-nav3-links li.dropdown:hover > .dropdown-toggle::before {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }
}

/* Mobile: dropdowns flow inline (block) and push siblings down — no overlap.
   Neutralises Bootstrap/Popper's inline absolute positioning + transform. */
@media (max-width: 991.98px) {
    /* Parent li and toggle must be block-stacked so dropdown can push down */
    .pi-nav3-links li.dropdown {
        display: block !important;
        width: 100% !important;
        position: static !important;
    }
    .pi-nav3-links .dropdown-toggle { width: 100% !important; }

    /* Force dropdown into normal flow — beats Popper's inline styles */
    .pi-nav3-links .dropdown-menu,
    .pi-nav3-dropdown {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        border-top: 1px dashed var(--k7-line, rgba(0,0,0,0.1)) !important;
        border-bottom: 1px dashed var(--k7-line, rgba(0,0,0,0.1)) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0.25rem 0 0.5rem !important;
        background: var(--k7-yellow-tint, #FFF8E1) !important;
        animation: none !important;
    }

    /* Bootstrap toggles display via .show — make sure it goes back to none when collapsed */
    .pi-nav3-links .dropdown-menu:not(.show) { display: none !important; }
    .pi-nav3-links .dropdown-menu.show { display: block !important; }

    /* Scrollable Newsletter variant: cap height + allow internal scrolling */
    .pi-nav3-dropdown.pi-nav3-dropdown--scroll {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    .pi-nav3-dropdown .dropdown-item {
        padding: 0.7rem 1.25rem !important;
        font-size: 0.95rem !important;
    }
    .pi-nav3-dropdown .dropdown-item:hover {
        padding-left: 1.5rem !important;
    }
    .pi-nav3-dropdown .dropdown-item.pi-highlight {
        margin: 0.4rem 1rem !important;
    }
}

/* ============================================================
   HERO CTAs — slimmer at all sizes
   ============================================================ */
.pi-hero3-cta,
.pi-hero3-cta--pink,
.pi-hero3-cta--alt,
.pi-hero3.is-revealed .pi-hero3-cta,
.pi-hero3.is-revealed .pi-hero3-cta--pink {
    font-size: 0.88rem !important;
    padding: 0.7rem 1.25rem !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 12px rgba(253,185,19,0.28) !important;
}
.pi-hero3-cta--pink,
.pi-hero3.is-revealed .pi-hero3-cta--pink,
.pi-hero3-cta--alt {
    box-shadow: none !important;
    border-width: 1.5px !important;
}
.pi-hero3-cta i { font-size: 0.95rem !important; }
.pi-hero3-actions { gap: 0.6rem !important; }

/* ============================================================
   MOBILE TUNING — hero + stats compaction
   ============================================================ */
@media (max-width: 991.98px) {
    /* Nav: breathing room — left of logo, right of burger menu */
    .pi-nav3-row { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .pi-nav3-brand { margin-left: 0.5rem !important; }
    .pi-nav3-burger { margin-right: 0.5rem !important; }

    /* About section: space above "Organized by IPEMA" eyebrow on mobile,
       since the image stacks above the text column */
    .pi-about-section .pi-reveal-right > .ps-3,
    .pi-about-section .pi-reveal-right { padding-top: 1.75rem !important; }
}

@media (max-width: 767.98px) {
    /* Hide the date/venue eyebrow on hero in mobile — beats the
       .pi-hero3.is-revealed .pi-hero3-eyebrow rule that re-shows it on scroll */
    .pi-hero3 .pi-hero3-eyebrow,
    .pi-hero3.is-revealed .pi-hero3-eyebrow,
    .pi-hero3-eyebrow { display: none !important; }

    /* Smaller hero title */
    .pi-hero3-title { font-size: 1.7rem !important; line-height: 1.15 !important; margin-bottom: 0.6rem !important; }
    .pi-hero3-year { font-size: 1.5rem !important; }

    /* Smaller lead text */
    .pi-hero3-lead { font-size: 0.92rem !important; line-height: 1.45 !important; margin-bottom: 1rem !important; }

    /* Compact hero CTAs */
    .pi-hero3-actions { gap: 0.4rem !important; }
    .pi-hero3-cta,
    .pi-hero3-cta--pink,
    .pi-hero3-cta--alt {
        width: auto !important;
        max-width: 260px !important;
        padding: 0.5rem 0.85rem !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        border-width: 1.5px !important;
    }
    .pi-hero3-cta i { font-size: 0.85rem !important; margin-right: 0.3rem !important; }

    /* Tighter hero content padding so it doesn't dominate the viewport */
    .pi-hero3-content { padding: 1.2rem 1rem !important; }

    /* Stats banner — smaller boxes below the hero */
    .pi-stats { padding: 1.5rem 0 !important; }
    .pi-stats .row.g-3 { --bs-gutter-x: 0.5rem !important; --bs-gutter-y: 0.5rem !important; }
    .pi-stat-item,
    .pi-stat-item-modern {
        padding: 0.7rem 0.4rem !important;
        border-radius: 10px !important;
    }
    .pi-stat-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.78rem !important;
        margin-bottom: 0.3rem !important;
    }
    .pi-stat-number { font-size: 1.35rem !important; line-height: 1.1 !important; }
    .pi-stat-label  { font-size: 0.7rem !important; letter-spacing: 0.02em !important; }
}

@media (max-width: 380px) {
    .pi-hero3-title { font-size: 1.45rem !important; }
    .pi-hero3-lead  { font-size: 0.88rem !important; }
    .pi-hero3-cta,
    .pi-hero3-cta--pink,
    .pi-hero3-cta--alt {
        font-size: 0.72rem !important;
        padding: 0.45rem 0.7rem !important;
        max-width: 230px !important;
    }
    .pi-hero3-cta i { font-size: 0.78rem !important; }
    .pi-stat-number { font-size: 1.2rem !important; }
    .pi-stat-label  { font-size: 0.65rem !important; }
}

/* ============================================================
   GLOBAL BUTTON RADIUS — pill (50px) for every button on every page
   ============================================================ */
.pi-btn,
.pi-btn-primary,
.pi-btn-dark,
.pi-btn-outline,
.pi-btn-outline-light,
.pi-btn-pink,
.pi-btn-sponsors-home,
.pi-btn-exhibit,
.pi-btn-visit,
.pi-btn-sm,
.pi-btn-lg,
.pi-btn-xl,
.pi-hero3-cta,
.pi-hero3-cta--pink,
.pi-hero3-cta--alt,
.btn,
button,
button.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border-radius: 50px !important;
}

/* ============================================================
   MOBILE BUTTON SIZING — smaller buttons on phones (<=767px)
   ============================================================ */
@media (max-width: 767.98px) {
    .pi-btn,
    .pi-btn-primary,
    .pi-btn-dark,
    .pi-btn-outline,
    .pi-btn-outline-light,
    .pi-btn-pink,
    .pi-btn-sponsors-home,
    .btn,
    button.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        padding: 0.5rem 1.1rem !important;
        font-size: 0.78rem !important;
        min-height: 38px !important;
        letter-spacing: 0.04em !important;
    }
    .pi-btn-sm {
        padding: 0.35rem 0.8rem !important;
        font-size: 0.7rem !important;
        min-height: 32px !important;
    }
    .pi-btn-lg {
        padding: 0.6rem 1.3rem !important;
        font-size: 0.85rem !important;
        min-height: 42px !important;
    }
    .pi-btn-xl {
        padding: 0.7rem 1.5rem !important;
        font-size: 0.9rem !important;
        min-height: 46px !important;
    }
    .pi-btn-exhibit,
    .pi-btn-visit {
        padding: 0.55rem 1rem !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.04em !important;
    }
    .pi-hero3-cta,
    .pi-hero3-cta--pink,
    .pi-hero3-cta--alt {
        padding: 0.65rem 1.15rem !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.04em !important;
    }
    .pi-hero3-cta i { font-size: 0.85rem !important; }
}

/* ============================================================
   MARQUEE LOGOS — bigger images inside the SAME card box
   (IPEMA Members, Supporting Associations N/I, Our Exhibitors,
   National & International Media Partners). Card width/height
   stay as defined; the image now fills the card.
   ============================================================ */
/* Logo cards: give the logo breathing room inside the card so the FULL
   logo is comfortably visible (object-fit: contain never crops; the padding
   is what stops wide/square logos from filling edge-to-edge and looking
   "zoomed in"). */
.pi-marquee-item {
    padding: 0.9rem 1.1rem !important;
}
.pi-marquee-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Exhibitor reveal grid — minimal padding so the logo is as LARGE as possible
   inside the same-size card (card height/width unchanged; only the logo grows). */
.pi-exhibitor-reveal-grid .pi-marquee-item {
    padding: 0.2rem 0.3rem !important;
}
.pi-exhibitor-reveal-grid .pi-marquee-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Mobile: keep proportional breathing room at the smaller card size */
@media (max-width: 575.98px) {
    .pi-marquee-item                        { padding: 0.6rem 0.75rem !important; }
    .pi-exhibitor-reveal-grid .pi-marquee-item { padding: 0.15rem 0.25rem !important; }
}

/* On touch devices a tap triggers a sticky :hover, which left the logo
   stuck at scale(1.15) — and since the card has overflow:hidden, the logo
   edges got clipped (looked "zoomed in"). Disable the hover-zoom on touch. */
@media (hover: none) {
    .pi-marquee-item:hover img { transform: none !important; }
}

/* ============================================================
   PER-SECTION LOGO SIZING (home logo marquees) — card size is
   unchanged in every case; only the logo's fit inside it changes.
   ============================================================ */

/* 1) IPEMA Members — LARGER logo inside the same-size card (less padding). */
.pi-marquee-section--ipema .pi-marquee-item {
    padding: 0.3rem 0.45rem !important;
}
.pi-marquee-section--ipema .pi-marquee-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 2) Supporting Associations — National: logo sized to 150px wide inside the
   same-size card, full logo always visible (max-height caps tall/square logos
   so they never clip; max-width keeps it inside the card on small screens). */
.pi-marquee-section--assoc-natl .pi-marquee-item {
    height: 105px !important;
    padding: 0.35rem !important;
}
.pi-marquee-section--assoc-natl .pi-marquee-item img {
    width: 150px !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* 2b) Supporting Associations — International: big logos with NO side space and
   NO rounded corners. Each card auto-sizes to its logo's width at a fixed height,
   so the card hugs the logo exactly (no letterbox gaps), full logo stays visible,
   zero padding, square corners. */
.pi-marquee-section--assoc-intl .pi-marquee-item {
    width: auto !important;
    height: 110px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
}
.pi-marquee-section--assoc-intl .pi-marquee-item:hover {
    box-shadow: none !important;
}
.pi-marquee-section--assoc-intl .pi-marquee-item img {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
@media (max-width: 575.98px) {
    .pi-marquee-section--assoc-intl .pi-marquee-item {
        height: 80px !important;
    }
}

/* 3) Our Exhibitors: show the FULL logo. The featured brands (Alltech / DSM /
   Symaga) were forced to a persistent transform: scale(1.18) which, with the
   card's overflow:hidden, clipped their edges. Remove that zoom and restore
   normal padding so every exhibitor logo fits fully. */
.pi-exhibitor-reveal-grid .pi-marquee-item:has(img[alt^="Alltech"]),
.pi-exhibitor-reveal-grid .pi-marquee-item:has(img[alt^="DSM"]),
.pi-exhibitor-reveal-grid .pi-marquee-item:has(img[alt^="Symaga"]) {
    padding: 0.2rem 0.3rem !important;
}
.pi-exhibitor-reveal-grid .pi-marquee-item img[alt^="Alltech"],
.pi-exhibitor-reveal-grid .pi-marquee-item img[alt^="DSM"],
.pi-exhibitor-reveal-grid .pi-marquee-item img[alt^="Symaga"] {
    transform: none !important;
}
/* Linked logos are wrapped in an <a> that defaults to display:inline, so the
   img's width/height:100% had no box to fill and rendered at its natural size —
   overflowing the card and getting clipped by overflow:hidden. Make the anchor
   fill the card so object-fit:contain can show the FULL logo. */
.pi-exhibitor-reveal-grid .pi-marquee-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.pi-exhibitor-reveal-grid .pi-marquee-item img,
.pi-exhibitor-reveal-grid .pi-marquee-item > a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ============================================================
   ABOUT SECTION — tagline & sub-heading helpers
   ============================================================ */
.pi-about-tagline {
    font-family: var(--k7-font-display) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--pi-text-secondary) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.85rem !important;
}
.pi-about-subheading {
    font-family: var(--k7-font-display) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--pi-black) !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.25 !important;
}

/* ============================================================
   HERO EYEBROW + NAV CTAs — explicit pill border-radius
   - .pi-hero3-eyebrow currently has border-radius: 2px (~L7927).
     Forcing pill (50px) so it matches the rounded-chip look.
   - Nav CTAs (.pi-btn-exhibit / .pi-btn-visit) get an always-on
     pill rule so they stay rounded in default AND scrolled state.
   ============================================================ */
.pi-hero3-eyebrow,
.pi-hero3.is-revealed .pi-hero3-eyebrow {
    border-radius: 50px !important;
}

.pi-navbar .pi-btn-exhibit,
.pi-navbar .pi-btn-visit,
.pi-navbar-ctas-row .pi-btn-exhibit,
.pi-navbar-ctas-row .pi-btn-visit,
.pi-navbar-link-cta,
.pi-btn-exhibit,
.pi-btn-visit {
    border-radius: 50px !important;
}

/* ============================================================
   SECTION BOXES — consistent border-radius on cards & containers
   Catches every box-style container that lives inside a section
   so corners are rounded uniformly.
   ============================================================ */
.pi-stat-item,
.pi-stat-item-modern,
.pi-card,
.pi-icon-card,
.pi-image-card,
.pi-exhibitor-card,
.pi-sector-card,
.pi-testimonial,
.pi-glass,
.pi-yep-cipa-wrap,
.pi-supported-by-box,
.pi-cta-banner,
.pi-info-box,
.pi-newsletter-band .pi-newsletter-form .form-control,
.pi-newsletter-band .pi-newsletter-form button,
.pi-knowledge-card,
.pi-feature-box,
.pi-highlight-box {
    border-radius: 14px !important;
}

/* ============================================================
   NAV BUTTONS ON SCROLL — keep pill rounding (50px)
   The scroll state shrinks padding/font-size; this rule guarantees
   the rounding is preserved (and overrides any Bootstrap defaults).
   ============================================================ */
.pi-navbar.scrolled .pi-btn-exhibit,
.pi-navbar.scrolled .pi-btn-visit,
.pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-exhibit,
.pi-navbar.scrolled .pi-navbar-ctas-row .pi-btn-visit,
.pi-navbar.scrolled .pi-navbar-link-cta,
.pi-navbar.scrolled .pi-btn,
.pi-navbar.scrolled .btn,
.pi-navbar.scrolled button:not(.navbar-toggler):not(.dropdown-toggle) {
    border-radius: 50px !important;
}

/* ============================================================
   HERO SPLIT — reduce content/text/button sizes (desktop & up)
   Mobile already shrunk via the global mobile button rule + hero
   media queries. This block tightens the desktop split-text panel.
   ============================================================ */
@media (min-width: 768px) {
    .pi-hero3-split-text {
        padding: 2rem 1.75rem 2rem 2.25rem !important;
    }
    .pi-hero3-split-text .pi-hero3-content {
        max-width: 360px !important;
    }
    .pi-hero3-split-text .pi-hero3-eyebrow {
        font-size: 0.78rem !important;
        padding: 0.38rem 0.85rem !important;
        margin-bottom: 1rem !important;
        letter-spacing: 0.08em !important;
    }
    .pi-hero3-split-text .pi-hero3-title {
        font-size: clamp(1.5rem, 2.6vw, 2.6rem) !important;
        margin-bottom: 0.85rem !important;
    }
    .pi-hero3-split-text .pi-hero3-lead {
        font-size: clamp(0.85rem, 1vw, 1rem) !important;
        margin-bottom: 1.4rem !important;
        line-height: 1.45 !important;
    }
    .pi-hero3-split-text .pi-hero3-actions {
        gap: 0.55rem !important;
    }
    .pi-hero3-split-text .pi-hero3-cta {
        padding: 0.55rem 1.1rem !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.04em !important;
    }
    .pi-hero3-split-text .pi-hero3-cta i {
        font-size: 0.85rem !important;
    }
}

/* ============================================================
   EYEBROW CHIP — light yellow gold (logo "Warm Gold" token)
   Uses --pi-yellow-dark (#F4C400) from the brand palette so the
   eyebrow matches the gold tone in the logo.
   IMPORTANT: scoped to the BASE eyebrow only — preserves the
   --yellow / --dark / --accent variants so per-section color
   variation across the site is retained.
   ============================================================ */
.pi-eyebrow:not([class*="pi-eyebrow--"]) {
    background: var(--pi-yellow-dark) !important;
    color: var(--k7-black) !important;
}

/* ============================================================
   FIX: Why Poultry India image cards
   Stack the image on top + white text card below.
   The legacy rule (~L1980) absolutely-positioned the overlay
   over the image with a transparent gradient. A later override
   (~L8278) flipped the overlay background to solid white but
   left it absolutely positioned, which completely hid the image.
   ============================================================ */
.pi-image-card {
    display: flex !important;
    flex-direction: column !important;
}
.pi-image-card .pi-image-card-overlay,
.pi-image-card-overlay {
    position: static !important;
    inset: auto !important;
}

/* ============================================================
   "Organized by" + "Supported By" labels —
   transparent background, black text, larger size.
   ============================================================ */
.pi-yep-cipa-heading,
.pi-supported-by-label {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--pi-black, #000) !important;
    box-shadow: none !important;
    border: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    letter-spacing: 0.04em !important;
}
@media (max-width: 575.98px) {
    .pi-yep-cipa-heading,
    .pi-supported-by-label {
        font-size: 1.2rem !important;
    }
}

/* ============================================================
   ORGANIZED-BY — text on top ("Organized by"), IPEMA logo below
   ============================================================ */
.pi-yep-cipa-wrap.pi-yep-cipa-wrap--combined {
    display: flex !important;
    flex-direction: column !important;     /* stack vertically */
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1rem !important;
}
.pi-yep-cipa-wrap--combined .pi-yep-cipa-heading {
    order: 1 !important;                   /* heading first (on top) */
    margin: 0 !important;
}
.pi-yep-cipa-wrap--combined .pi-yep-cipa-img {
    order: 2 !important;                   /* logo second (below) */
    width: auto !important;
    max-height: 100px !important;
    min-height: 0 !important;
    margin: 0 !important;
}
@media (max-width: 575.98px) {
    .pi-yep-cipa-wrap--combined .pi-yep-cipa-img { max-height: 70px !important; }
}

/* ============================================================
   NAV V3 — guaranteed no-overlap layout (all desktop sizes)
   Strategy: aggressive uniform shrinkage on every desktop width so
   the row physically fits, plus three layers of overflow:hidden so
   even if a single label happens to be too long it's clipped, not
   stacked under the logo or buttons.
   Row layout (flex): [logo] gap [centered links] gap [actions]
   Collapse uses display:contents so links + actions are direct flex children.
   ============================================================ */
@media (min-width: 992px) {
    /* FIX: previous `overflow-x: hidden` on .pi-nav3 was clipping the
       absolute-positioned dropdown menus to the navbar box, hiding them.
       Switched to `visible` everywhere. Horizontal-scroll prevention
       is now handled by the tight sizing below + html-level overflow. */
    .pi-nav3,
    .pi-nav3-row,
    .pi-nav3 .pi-nav3-collapse,
    .pi-nav3-links { overflow: visible !important; }
    /* Make sure dropdowns float above page content & sticky elements */
    .pi-nav3 .dropdown-menu,
    .pi-nav3-dropdown { z-index: 1500 !important; }
    /* Stop the on-hover shake on nav items:
       - kill any transform/scale on hover
       - kill the transition that animates color (causes hairline reflow)
       - reserve the 4px underline space in the link's bottom padding so
         the ::after pseudo never changes layout */
    .pi-nav3-links a {
        transition: none !important;
        transform: none !important;
    }
    .pi-nav3-links a:hover,
    .pi-nav3-links a:focus {
        transform: none !important;
    }

    .pi-nav3-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(0.65rem, 1.2vw, 1rem) !important;
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
    .pi-nav3-brand {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    .pi-nav3-brand img {
        height: 58px !important;
        max-width: 180px !important;
        width: auto !important;
    }
    .pi-nav3 .pi-nav3-collapse {
        display: contents !important;
    }
    .pi-nav3-links {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 0.35rem !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        list-style: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .pi-nav3-links {
        min-width: 0 !important;
    }
    .pi-nav3-links a {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        padding: 0.22rem 0.12rem !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }
    .pi-nav3-actions {
        flex: 0 0 auto !important;
        max-width: 175px !important;
        gap: 0.18rem !important;
        margin: 0 !important;
        padding-left: 0 !important;
    }
    .pi-nav3-btn {
        font-size: 0.58rem !important;
        padding: 0.35rem 0.35rem !important;
        gap: 0.15rem !important;
        white-space: nowrap !important;
    }
    .pi-nav3-btn i { font-size: 0.68rem !important; }
}

/* Medium desktop (≥1200px) — slight bump up */
@media (min-width: 1200px) {
    .pi-nav3-brand img { height: 68px !important; max-width: 215px !important; }
    .pi-nav3-links a { font-size: 0.9rem !important; line-height: 1.35 !important; padding: 0.24rem 0.25rem !important; }
    .pi-nav3-actions { max-width: 215px !important; gap: 0.28rem !important; }
    .pi-nav3-btn { font-size: 0.64rem !important; padding: 0.42rem 0.45rem !important; }
    .pi-nav3-btn i { font-size: 0.74rem !important; }
}

/* Large desktop (≥1400px) — sized to avoid menu/actions overlap */
@media (min-width: 1400px) {
    .pi-nav3-row { gap: 0.75rem !important; }
    .pi-nav3-brand img { height: 68px !important; max-width: 220px !important; }
    .pi-nav3-links a { font-size: clamp(0.76rem, 0.4vw + 0.58rem, 0.88rem) !important; line-height: 1.35 !important; padding: 0.2rem 0.15rem !important; }
    .pi-nav3-actions { max-width: min(230px, 28vw) !important; gap: 0.28rem !important; }
    .pi-nav3-btn { font-size: 0.66rem !important; padding: 0.38rem 0.5rem !important; }
    .pi-nav3-btn i { font-size: 0.74rem !important; }
}

/* ============================================================
   HIDE PAGE SECTION-NAV LINKS ON MOBILE — site-wide
   The IPEMA and Knowledge Day pages render an in-page section
   navigation strip (.pi-kd-subnav with links like Home · About ·
   Vision & Mission · Past Committee · Speakers · Gallery, etc.).
   On phones (<768px) this strip wastes screen height — main nav
   already exposes these via dropdowns. Hide it on mobile only.
   ============================================================ */
@media (max-width: 767.98px) {
    .pi-kd-subnav,
    .pi-page-quicklinks { display: none !important; }
}

/* ============================================================
   PAST COMMITTEE BEARERS — pi-card-tag.mb-2 text colour
   The role tag (e.g. "President · 2019–2023") inside the dark
   #presidents section now uses solid black for clear contrast
   against the light-yellow tag background.
   ============================================================ */
#presidents .pi-card-tag.mb-2 {
    color: var(--pi-black) !important;
}

/* ============================================================
   FIX: Equal-height cards in every .pi-stagger row
   Symptom: "cards are jumbling" — cards in the same row had
   different heights because the markup nests
     col → wrapper(.px-xl-1 .pb-xl-3) → card(.pi-card / .pi-glass)
   `h-100` on the card resolves to 100% of the wrapper, but the
   wrapper has no height of its own, so cards collapse to their
   intrinsic content height. Different "role" / "contribution"
   text lengths → different heights → jumbled rows.
   Fix: stretch the wrapper to fill the column and stack as a
   flex column so the card grows to fill the row's tallest card.
   Applies to ALL bearer/trustee/director/icon-card grids.
   ============================================================ */
.pi-stagger > [class*="col-"] {
    display: flex !important;
}
.pi-stagger > [class*="col-"] > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.pi-stagger > [class*="col-"] > div > .pi-card,
.pi-stagger > [class*="col-"] > div > .pi-glass,
.pi-stagger > [class*="col-"] > div > .pi-icon-card,
.pi-stagger > [class*="col-"] > div > .pi-image-card,
.pi-stagger > [class*="col-"] > div > .pi-sector-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.pi-stagger > [class*="col-"] > div > .pi-card > .pi-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Inside the trustees grid: keep role tags vertically uniform so
   1-line ("Director") and 2-line ("Honorary Trustee · MD, …")
   roles occupy the same footprint. */
.pi-trustees-row .pi-trustee-role {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.6em !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
}

/* ============================================================
   GLOBAL: WHITE THEME — every page, every section, every card
   Body white site-wide. Default .pi-section white. Accent
   .pi-section-gray softens to light cream so sections still
   visibly separate against the white body. Cards (every variant)
   render as white surfaces with black text and a soft black
   box-shadow so they pop on the white page.
   Intentionally NOT touched: hero sections, .pi-section-dark,
   .pi-page-header, .pi-cta-banner, .pi-newsletter-band,
   .pi-stats, .pi-marquee-section — they keep their brand bgs.
   ============================================================ */
body {
    background-color: #FFFFFF !important;
}
main > section.pi-section,
section.pi-section,
section.pi-section-sm:not(.pi-newsletter-band):not(.pi-page-quicklinks) {
    background-color: #FFFFFF !important;
}
main > section.pi-section.pi-section-gray,
section.pi-section.pi-section-gray,
.pi-section-gray {
    background-color: #FAF7E6 !important; /* light cream — brand-aligned */
}

/* Cards: uniform white surface, black text, soft black shadow.
   Covers every card class used on the site. Excludes cards inside
   dark sections (.pi-section-dark) which use .pi-glass for a
   translucent on-dark look. */
.pi-card,
.pi-icon-card,
.pi-image-card,
.pi-exhibitor-card,
.pi-sector-card,
.pi-testimonial,
.pi-knowledge-card,
.pi-feature-box,
.pi-highlight-box,
.pi-info-box,
.pi-yep-cipa-wrap,
.pi-supported-by-box {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
.pi-card *,
.pi-icon-card *,
.pi-image-card-overlay *,
.pi-sector-card-body *,
.pi-testimonial *,
.pi-knowledge-card *,
.pi-feature-box *,
.pi-highlight-box *,
.pi-info-box * {
    color: inherit;
}
/* Card hover — a touch deeper shadow for tactile feedback */
.pi-card:hover,
.pi-icon-card:hover,
.pi-image-card:hover,
.pi-sector-card:hover,
.pi-testimonial:hover,
.pi-knowledge-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
/* Cards inside dark sections (e.g. Past Committee Bearers) keep
   the existing .pi-glass translucent treatment — don't overwrite. */
.pi-section-dark .pi-card,
.pi-section-dark .pi-icon-card {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--pi-white) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   MOBILE-ONLY FIX BUNDLE  (≤767.98px)
   1. Spacing below "Enquire About Membership" / "Request Visa
      Letter" buttons (IPEMA + Visitors).
   2. Open mobile nav: vertical breathing room between items.
   3. Exhibitors top CTAs: flex-wrap row on mobile (already
      d-flex flex-wrap from the markup edit) — center-align them.
   4. Gallery filter chips: tighter wrap, centered.
   5. .pi-news-cta-banner action buttons: column-stack.
   6. .pi-news-sidebar-card (Event Details box): margin below.
   7. Article footer (d-flex justify-between mt-5 pt-4): stack.
   8. Knowledge Day + Contact "shake": kill :hover transforms
      that misfire on touch (no actual hover on phones).
   ============================================================ */
@media (max-width: 767.98px) {
    /* 1. Generic bottom spacer used on IPEMA + Visitors CTA buttons */
    .pi-mobile-mb { margin-bottom: 1.75rem !important; }

    /* 2. Mobile nav items — breathing room between rows */
    .pi-nav3 .pi-nav3-collapse.show .pi-nav3-links,
    .pi-nav3 .pi-nav3-collapse.collapsing .pi-nav3-links {
        gap: 0.35rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    .pi-nav3 .pi-nav3-collapse.show .pi-nav3-links > li,
    .pi-nav3 .pi-nav3-collapse.collapsing .pi-nav3-links > li {
        margin-bottom: 0.25rem !important;
    }
    .pi-nav3 .pi-nav3-collapse.show .pi-nav3-links a,
    .pi-nav3 .pi-nav3-collapse.collapsing .pi-nav3-links a {
        padding: 0.85rem 0.85rem !important;
    }
    .pi-nav3 .pi-nav3-actions {
        margin: 0.5rem 0.75rem 1rem !important;
        gap: 0.55rem !important;
    }

    /* 3. Exhibitors top CTAs — keep inline on mobile, centered */
    .pi-exhibitor-actions {
        justify-content: center !important;
    }
    .pi-exhibitor-actions .pi-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* 4. Gallery filter chips — wrap in two clean rows, smaller */
    .pi-section .d-flex.flex-wrap.gap-2.justify-content-center.mb-4 .pi-btn {
        font-size: 0.72rem !important;
        padding: 0.4rem 0.85rem !important;
    }

    /* 5. CTA banner inside news articles — stack action buttons */
    .pi-news-cta-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }
    .pi-news-cta-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
        width: 100% !important;
    }
    .pi-news-cta-actions .pi-btn { width: 100% !important; }

    /* 6. Event Details sidebar card — extra space below */
    .pi-news-sidebar-card { margin-bottom: 1.5rem !important; }

    /* 7. Article footer (Back to News / About IPEMA strip) — column */
    .pi-news-page .d-flex.justify-content-between.align-items-center.mt-5.pt-4,
    .d-flex.justify-content-between.align-items-center.mt-5.pt-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.7rem !important;
    }
    .d-flex.justify-content-between.align-items-center.mt-5.pt-4 .pi-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* 8. Stop "shake" on touch — disable hover transforms across the
       Knowledge Day and Contact pages (and globally as a safety net).
       Touch devices fire :hover briefly on tap which then animates
       back, looking like a jitter on the page. */
    .pi-card:hover,
    .pi-icon-card:hover,
    .pi-image-card:hover,
    .pi-sector-card:hover,
    .pi-testimonial:hover,
    .pi-knowledge-card:hover,
    .pi-magnet:hover,
    .pi-btn:hover,
    .pi-nav3-btn:hover {
        transform: none !important;
    }
    .pi-card,
    .pi-icon-card,
    .pi-image-card,
    .pi-sector-card,
    .pi-testimonial,
    .pi-knowledge-card,
    .pi-magnet {
        transition: none !important;
    }
}

/* ============================================================
   TESTIMONIALS — mobile-only horizontal slider (scroll-snap)
   On phones the testimonial cards turn into a one-card-at-a-time
   horizontally-scrollable strip. Native swipe + scroll-snap means
   no JS dependency; each card snaps fully into view, one by one.
   Tablet / desktop are untouched (existing 2- or 3-up grid).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Slider container — replaces Bootstrap's wrap row at this width */
    .pi-testimonials-row.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 0.5rem 0 1rem !important;
        margin: 0 !important;
        scrollbar-width: none !important;          /* Firefox */
    }
    .pi-testimonials-row.row::-webkit-scrollbar {
        display: none !important;                  /* Chrome / Safari */
    }

    /* Cancel the .pi-stagger fade-in for items inside the slider —
       cards must be visible immediately so they can be swiped. */
    .pi-testimonials-row.row > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    /* Cancel my earlier .pi-stagger > [class*="col-"] { display:flex }
       so each col here is a normal block-ish flex item that scroll-snaps */
    .pi-testimonials-row.row > [class*="col-"] {
        display: block !important;
        flex: 0 0 100% !important;                 /* one card per view */
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        padding: 0 0.85rem !important;
    }
    .pi-testimonials-row.row > [class*="col-"] > .pi-testimonial {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
}

/* ============================================================
   MOBILE: hero — vertically centered content, smaller compact CTAs
   Layout: Exhibit + Visitor side-by-side row 1, Knowledge Day
   spanning full width row 2. Higher-specificity selectors so
   these rules beat earlier hero CTA rules in the cascade.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Wrap section: ensure full vertical room so the inner panel can center */
    .pi-hero3.pi-hero3--split,
    section.pi-hero3 {
        min-height: 60vh !important;
        display: flex !important;
        align-items: stretch !important;
    }
    .pi-hero3.pi-hero3--split > .pi-hero3-split,
    .pi-hero3-split {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 60vh !important;
    }
    /* Text panel — flex column, vertically + horizontally centered */
    .pi-hero3.pi-hero3--split .pi-hero3-split-text,
    .pi-hero3 .pi-hero3-split-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.75rem 1rem !important;
        min-height: 60vh !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .pi-hero3 .pi-hero3-split-text .pi-hero3-content,
    .pi-hero3 .pi-hero3-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .pi-hero3 .pi-hero3-eyebrow {
        font-size: 0.62rem !important;
        padding: 0.22rem 0.55rem !important;
        margin: 0 0 0.5rem !important;
        letter-spacing: 0.04em !important;
    }
    .pi-hero3 .pi-hero3-title,
    .pi-hero3 .pi-hero3-split-text .pi-hero3-title {
        font-size: 1.2rem !important;
        line-height: 1.15 !important;
        margin: 0 0 0.4rem !important;
        text-align: center !important;
    }
    .pi-hero3 .pi-hero3-year { font-size: 1.15rem !important; }
    .pi-hero3 .pi-hero3-lead,
    .pi-hero3 .pi-hero3-split-text .pi-hero3-lead {
        font-size: 0.76rem !important;
        line-height: 1.38 !important;
        margin: 0 0 0.85rem !important;
        text-align: center !important;
    }

    /* CTA layout: 2-column grid; KD spans full width on row 2 */
    .pi-hero3 .pi-hero3-actions,
    .pi-hero3 .pi-hero3-split-text .pi-hero3-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        flex: none !important;
        flex-direction: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
    }
    /* Knowledge Day Registration is the THIRD action in DOM order — span both columns */
    .pi-hero3 .pi-hero3-actions > a:nth-child(3),
    .pi-hero3 .pi-hero3-actions > .pi-hero3-cta--alt {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        width: 100% !important;
    }

    /* CTA buttons themselves — narrow, short, compact text */
    .pi-hero3 .pi-hero3-cta,
    .pi-hero3 .pi-hero3-cta--pink,
    .pi-hero3 .pi-hero3-cta--alt,
    .pi-hero3 .pi-hero3-split-text .pi-hero3-cta {
        font-size: 0.6rem !important;
        padding: 0.32rem 0.4rem !important;
        letter-spacing: 0.02em !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }
    .pi-hero3 .pi-hero3-cta i { font-size: 0.65rem !important; }
}

@media (max-width: 380px) {
    .pi-hero3 .pi-hero3-split-text { min-height: 55vh !important; padding: 1.25rem 0.7rem !important; }
    .pi-hero3 .pi-hero3-title,
    .pi-hero3 .pi-hero3-split-text .pi-hero3-title { font-size: 1.05rem !important; }
    .pi-hero3 .pi-hero3-lead,
    .pi-hero3 .pi-hero3-split-text .pi-hero3-lead { font-size: 0.72rem !important; }
    .pi-hero3 .pi-hero3-actions { max-width: 280px !important; gap: 0.3rem !important; }
    .pi-hero3 .pi-hero3-cta,
    .pi-hero3 .pi-hero3-cta--pink,
    .pi-hero3 .pi-hero3-cta--alt {
        font-size: 0.55rem !important;
        padding: 0.28rem 0.35rem !important;
    }
    .pi-hero3 .pi-hero3-cta i { font-size: 0.6rem !important; }
}

/* ============================================================
   TESTIMONIALS section — no background (transparent / inherit)
   Was using .pi-section-gray; markup now uses .pi-testimonials-section
   so the section sits flush on the page background.
   ============================================================ */
.pi-testimonials-section {
    background: transparent !important;
    background-color: transparent !important;
}

/* ============================================================
   PRE-FOOTER CTA BANNER — light gray, no border, smaller buttons,
   only the BOTTOM corners rounded (10px).
   ============================================================ */
.pi-cta-banner {
    background: #F3F4F6 !important;
    background-image: none !important;
    animation: none !important;
    color: var(--pi-black, #111) !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 0 10px 10px !important;       /* bottom corners only */
    overflow: hidden !important;
}
.pi-cta-banner::before { display: none !important; }
.pi-cta-banner h2,
.pi-cta-banner h3 {
    color: var(--pi-black, #111) !important;
}
.pi-cta-banner p {
    color: var(--pi-gray-700, #333) !important;
}

/* CTA banner buttons — slightly larger + pill border-radius */
.pi-cta-banner .pi-btn,
.pi-cta-banner .btn,
.pi-cta-banner button,
.pi-cta-banner a.pi-btn {
    font-size: 0.88rem !important;
    padding: 0.6rem 1.35rem !important;
    min-height: 0 !important;
    letter-spacing: 0.04em !important;
    border-radius: 50px !important;
}
.pi-cta-banner .pi-btn-lg,
.pi-cta-banner .btn-lg {
    font-size: 0.95rem !important;
    padding: 0.7rem 1.55rem !important;
    border-radius: 50px !important;
}

/* ============================================================
   NEWSLETTER BAND — warm cream (#FAF7E6) instead of brand yellow
   ============================================================ */
.pi-section-sm.pi-newsletter-band {
    background: #FAF7E6 !important;
    background-image: none !important;
    border-top: 4px solid var(--pi-yellow, #FDB913) !important;
    border-bottom: 4px solid var(--pi-yellow, #FDB913) !important;
}

/* ============================================================
   FOOTER buttons — square (no rounding)
   ============================================================ */
.pi-footer .pi-btn,
.pi-footer .btn,
.pi-footer button,
.pi-footer a.pi-btn {
    border-radius: 0 !important;
}

/* ============================================================
   NEWSLETTER FORM — Subscribe button fully visible, smaller
   The input was eating the row width and clipping the Subscribe
   button. Lock input to flex:1 (shrinkable), button to flex:0
   (no shrink), and reduce its padding/font.
   ============================================================ */
.pi-newsletter-band .pi-newsletter-form,
.pi-section-sm.pi-newsletter-band .pi-newsletter-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
}
.pi-newsletter-band .pi-newsletter-form .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;          /* allows the input to shrink */
    padding: 0.5rem 1rem !important;
    font-size: 0.88rem !important;
}
.pi-newsletter-band .pi-newsletter-form .pi-btn,
.pi-newsletter-band .pi-newsletter-form button {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    font-size: 0.78rem !important;
    padding: 0.5rem 1.1rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}
@media (max-width: 575.98px) {
    .pi-newsletter-band .pi-newsletter-form .pi-btn,
    .pi-newsletter-band .pi-newsletter-form button {
        font-size: 0.72rem !important;
        padding: 0.45rem 0.9rem !important;
    }
}

/* ============================================================
   "Organized by IPEMA" label — CTA banner + Home About section
   Transparent background, black text, larger font.
   ============================================================ */
/* Pre-footer CTA banner (markup uses .pi-card-tag with inline yellow bg) */
.pi-cta-banner .pi-card-tag {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--pi-black, #111) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 0 !important;
    margin-bottom: 0.85rem !important;
    text-transform: uppercase !important;
}

/* Home About section (markup uses .pi-eyebrow.pi-eyebrow--yellow) */
.pi-about-section .pi-eyebrow,
.pi-about-section .pi-eyebrow--yellow,
.pi-about-section .pi-eyebrow.pi-eyebrow--yellow {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--pi-black, #111) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 0 !important;
    text-transform: uppercase !important;
}
/* Hide the eyebrow's yellow dot pseudo-element on About + CTA so the
   text sits cleanly without the leftover bullet glyph. */
.pi-about-section .pi-eyebrow::before,
.pi-cta-banner .pi-card-tag::before {
    display: none !important;
}

/* ============================================================
   END DESIGN SYSTEM v7.0  "POSTER EDITION"
   ============================================================ */


/* ============================================================
   HOMEPAGE REDESIGN v9 — "MAGAZINE"
   Each section has a genuinely different layout pattern:
   - Hero: Full-bleed video background
   - Stats: Floating overlap bar
   - About: Editorial column w/ drop cap + sidebar
   - Why: Zigzag editorial rows (alternating)
   - Sectors: Numbered directory list (typographic)
   - Knowledge Day: Ticket / poster card
   - Highlights: Horizontal snap gallery
   - Testimonials: Featured pull quote + 4 mini cards
   - Newsletter: Slim inline strip
   ============================================================ */

.pi-home-redesign {
    --v9-white: #ffffff;
    --v9-cream: #fdfaf2;
    --v9-cream-2: #fbf5e3;
    --v9-yellow-50: #fff8d6;
    --v9-yellow-200: #ffe88a;
    --v9-yellow: #ffd83d;
    --v9-gold: #c9961a;
    --v9-gold-soft: #e0b441;
    --v9-ink: #0a0a0a;
    --v9-text: #2a2a2a;
    --v9-text-2: #5a5a5a;
    --v9-mute: #8a8a8a;
    --v9-line: #ecdfb8;
    --v9-line-soft: #f3ecd5;
    --v9-red: #d72631;
    --v9-red-deep: #a01a26;

    background: var(--v9-cream);
    color: var(--v9-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* `clip` (not `hidden`) clips horizontal overflow WITHOUT turning this
       wrapper into a vertical scroll container — `overflow-x: hidden` forces
       the computed `overflow-y` to `auto`, which produced a SECOND scrollbar
       alongside the viewport's (the "double page scroller"). */
    overflow-x: clip;
}
.pi-home-redesign * { box-sizing: border-box; }
.pi-home-redesign h1,
.pi-home-redesign h2,
.pi-home-redesign h3,
.pi-home-redesign h4,
.pi-home-redesign h5 {
    font-family: 'Inter', system-ui, sans-serif !important;
    color: var(--v9-ink);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 800;
}
.pi-home-redesign p { line-height: 1.7; }
.pi-home-redesign img { display: block; max-width: 100%; }

/* Shared eyebrow */
.pi-v9-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--v9-red);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
}
.pi-v9-eyebrow::before {
    content: ""; width: 26px; height: 2px;
    background: var(--v9-red);
}
.pi-v9-eyebrow--gold { color: var(--v9-gold); }
.pi-v9-eyebrow--gold::before { background: var(--v9-gold); }
.pi-v9-eyebrow--yellow {
    color: #FFB800;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-shadow: 0 1px 0 rgba(196, 144, 0, 0.18);
}
.pi-v9-eyebrow--yellow::before { background: #FFB800; height: 3px; width: 32px; }

/* Buttons */
.pi-v9-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .35s ease;
}
.pi-v9-btn:hover { transform: translateY(-2px); text-decoration: none; }
.pi-v9-btn--primary { background: var(--v9-red); color: #fff; box-shadow: 0 16px 36px rgba(215, 38, 49, .3); }
.pi-v9-btn--primary:hover { background: var(--v9-red-deep); color: #fff; }
.pi-v9-btn--gold { background: linear-gradient(135deg, var(--v9-yellow) 0%, var(--v9-gold-soft) 100%); color: var(--v9-ink); box-shadow: 0 16px 36px rgba(214, 169, 22, .25); }
.pi-v9-btn--gold:hover { color: var(--v9-ink); }
.pi-v9-btn--dark { background: var(--v9-ink); color: #fff; }
.pi-v9-btn--dark:hover { background: #222; color: #fff; }
.pi-v9-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.pi-v9-btn--ghost:hover { background: #fff; color: var(--v9-ink); border-color: #fff; }
.pi-v9-btn--outline { background: transparent; color: var(--v9-ink); border-color: var(--v9-ink); }
.pi-v9-btn--outline:hover { background: var(--v9-ink); color: #fff; }
.pi-v9-btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }

/* ============================================
   1) HERO — FULL-BLEED VIDEO BACKGROUND
   Site header is sticky 72px tall; hero fills the area below it
   ============================================ */
.pi-v9-hero {
    position: relative;
    height: calc(100vh - 72px);
    min-height: 640px;
    max-height: 900px;
    width: 100%;
    overflow: hidden;
    background: #050505;
    color: #fff;
    margin: 0;
}
@media (max-width: 767px) {
    .pi-v9-hero {
        height: auto !important;
        min-height: 70vh !important;
        min-height: 70svh !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .pi-v9-hero-content {
        height: 100% !important;
        min-height: inherit !important;
        padding: 1rem !important;
        justify-content: center !important;
    }
    .pi-v9-hero-content > *:first-child { margin-top: 0 !important; }
    .pi-v9-hero-content > *:last-child { margin-bottom: 0 !important; }
    .pi-v9-hero-tag {
        font-size: .6rem !important;
        padding: .28rem .7rem;
        margin: 0 auto .7rem;
        gap: .35rem;
    }
    .pi-v9-hero h1 {
        font-size: 1.65rem !important;
        line-height: 1 !important;
        margin: 0 auto .8rem !important;
        letter-spacing: -0.03em !important;
    }
    .pi-v9-hero-lead {
        font-size: .8rem !important;
        line-height: 1.45 !important;
        margin: 0 auto 1rem !important;
        padding: 0 .5rem;
    }
    .pi-v9-hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 220px;
        gap: .35rem;
        margin-bottom: 0;
    }
    .pi-v9-hero-actions .pi-v9-btn,
    .pi-v9-hero-actions .pi-v9-btn--lg {
        width: 100%;
        padding: .45rem .7rem !important;
        font-size: .7rem !important;
        gap: .3rem !important;
    }
    .pi-v9-hero-actions .pi-v9-btn i {
        font-size: .75rem !important;
    }
}
/* MOBILE (<=767.98px) image-hero clipping fix.
   Image heroes (Articles, Gallery, Contact, OurGrowth, etc.) are forced to a
   fixed 360px band on mobile (see the height/min-height/max-height rule above)
   while their content is bottom-anchored (justify-content: flex-end) inside an
   overflow:hidden box. On narrow phones the content is taller than 360px, so it
   overflowed the TOP and the eyebrow badge was clipped under the sticky navbar
   (and the buttons could clip at the bottom).
   Fix: center the content and let the hero GROW with it (content drives height),
   so nothing clips. Mirrors the >=768px fix already present below. Mobile-only;
   desktop untouched. The home video hero has no .pi-v9-hero--image, so it is
   not affected. Double class + body keeps specificity above the 360px rule. */
@media (max-width: 767.98px) {
    body .pi-v9-hero.pi-v9-hero--image {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    body .pi-v9-hero.pi-v9-hero--image .pi-v9-hero-content {
        height: auto !important;
        min-height: 460px !important;   /* px, NOT vh: mobile address bar resizes
                                           vh units mid-load → hero jumps big→small */
        justify-content: center !important;
        padding-top: 1.5rem !important;
        padding-bottom: 2.25rem !important;
    }
}
/* TABLET (768-1024px) image-hero load-shift fix.
   These heroes use height: clamp(380px, 55vh, 520px) (see the unified-banner rule
   above). On tablets the address bar shows/hides during load, which recomputes
   55vh, so the hero visibly resizes (big -> small). Keep the SAME size bounds but
   swap 55vh -> 55svh (the STABLE small-viewport unit) so the height never changes.
   55vh kept first as a fallback for browsers without svh. Desktop (>=1025px) has
   no address bar, so 55vh never changes there — it keeps the base rule untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
    body .pi-v9-hero.pi-v9-hero--image {
        height: clamp(380px, 55vh, 520px) !important;    /* fallback: no svh */
        height: clamp(380px, 55svh, 520px) !important;   /* stable on tablet */
        min-height: 380px !important;
        max-height: 520px !important;
    }
}
/* KNOWLEDGE DAY hero — same vh load-shift fix. KD uses the bare .pi-v9-hero
   (video bg, no --image), so the rules above don't cover it. Scoped to the KD
   page via body:has(.pi-kd-page) so the HOME video hero is untouched.
   Mobile: keep height:auto but give a px fallback + svh min-height (no vh).
   Tablet: swap the base calc(100vh - 72px) for calc(100svh - 72px) (stable). */
@media (max-width: 767.98px) {
    body:has(.pi-kd-page) .pi-v9-hero {
        /* Match the HOME hero height (56svh). FIXED height (not auto/min-height)
           so it never tracks content -> no big->small flash on font swap; svh (not
           vh) so the mobile address bar doesn't resize it. KD hero content is only
           ~340-410px, so it fits within 56svh (~455-460px) and centers cleanly. */
        height: 440px !important;      /* px fallback for browsers without svh */
        height: 56svh !important;      /* = Home hero height, stable */
        min-height: 0 !important;
        max-height: none !important;
    }
    body:has(.pi-kd-page) .pi-v9-hero .pi-v9-hero-content {
        height: 100% !important;
        justify-content: center !important;
    }
}
/* HOME hero (mobile <=575.98px) load flash fix. The home hero height (56svh) was
   set in an inline <style> in Index.cshtml that sits AFTER the hero in the DOM, so
   the hero first painted at the base 70svh (~568px) then snapped to 56svh (~455px)
   = the big->small flash. Setting it here in render-blocking site.css makes the
   final height apply on the FIRST paint. Fixed height (not min-height) + svh also
   guard against font-swap / address-bar resizes. Scoped to .pi-home-page (home). */
@media (max-width: 575.98px) {
    .pi-home-page .pi-v9-hero {
        height: 440px !important;     /* px fallback for browsers without svh */
        height: 56svh !important;     /* fixed = no flash, matches prior home size */
        min-height: 0 !important;
        max-height: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    body:has(.pi-kd-page) .pi-v9-hero {
        height: calc(100vh - 72px) !important;    /* fallback: no svh */
        height: calc(100svh - 72px) !important;   /* stable on tablet */
    }
}
.pi-v9-hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.pi-v9-hero-video iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 100vw;
    height: calc(100vh - 72px);
    /* Object-fit:cover trick — at least as big as a 16:9 fitting the container */
    min-width: calc((100vh - 72px) * 16 / 9);
    min-height: calc(100vw * 9 / 16);
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}
/* Native <video> hero — fills the hero area, cropping to cover.
   GPU hints (transform/will-change/backface) keep the video crisp;
   image-rendering high-quality removes any browser-side downscale blur. */
.pi-v9-hero-video .pi-v9-hero-video-el,
.pi-v9-hero-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0;
    pointer-events: none;
    background: #050505;
    /* Sharpness hints */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    filter: none !important;
    -webkit-filter: none !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
@media (max-width: 767px) {
    .pi-v9-hero-video iframe {
        height: 100%;
        min-width: calc(620px * 16 / 9);
        min-height: calc(100vw * 9 / 16);
    }
}
/* Light overlay — video stays clear; minimal darkening only at the
   very bottom so the white CTA buttons remain readable. */
.pi-v9-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,10,0) 0%,
        rgba(10,10,10,0) 55%,
        rgba(10,10,10,.32) 100%);
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.pi-v9-hero-vignette {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,.08) 0%, rgba(10,10,10,0) 25%);
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.pi-v9-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 0 1rem clamp(70px, 10vh, 110px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.pi-v9-hero-tag,
.pi-v9-hero-actions,
.pi-v9-btn { text-shadow: none; }
.pi-v9-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: .35rem 0.8rem;
    background: linear-gradient(10deg, #ff7a7a40 0%, #e23b3bf0 100%); /* light red gradient */
    background-size: 200% 100%; /* extra width so the gradient can slide */
    animation: v9HeroTagSlide 4s ease-in-out infinite;
    color: #fff !important; /* white text */
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 0 auto 1.75rem;
    white-space: nowrap;
}
@keyframes v9HeroTagSlide {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pi-v9-hero-tag .dot {
    width: 8px; height: 8px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 12px var(--v9-red);
    animation: v9Pulse 2s ease-in-out infinite;
}
@keyframes v9Pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(1.2); }
}
.pi-v9-hero-tag sup { font-size: .65em; }

.pi-v9-hero h1 {
    color: #fff !important;
    font-size: clamp(3rem, 10vw, 8.2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em !important;
    font-weight: 900 !important;
    margin: 0 auto 1.5rem !important;
    max-width: 1100px;
}
.pi-v9-hero h1 .year {
    display: inline-block;
    line-height: 1.1;
    padding-bottom: 0.12em;     /* room so background-clip:text doesn't clip descenders */
    margin-bottom: -0.12em;     /* keep layout/baseline unchanged */
    background: linear-gradient(110deg, var(--v9-yellow) 0%, var(--v9-gold-soft) 50%, var(--v9-yellow) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: v9Shine 7s linear infinite;
}
@keyframes v9Shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.pi-v9-hero-lead {
    color: #ffffff !important;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
.pi-v9-hero-actions {
    display: flex; gap: 1rem; flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
}
.pi-v9-hero-info {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem 2.5rem;
    flex-wrap: wrap;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255,255,255,.18);
    max-width: 820px;
    margin: 0 auto;
    color: rgba(255,255,255,.85);
}
.pi-v9-hero-info span {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .9rem; font-weight: 600;
}
.pi-v9-hero-info i { color: var(--v9-yellow); font-size: 1.1rem; }
.pi-v9-hero-info strong { color: #fff; font-weight: 700; }
.pi-v9-hero-info .div {
    width: 1px; height: 20px;
    background: rgba(255,255,255,.2);
}
@media (max-width: 767px) { .pi-v9-hero-info .div { display: none; } }

.pi-v9-hero-scroll {
    position: absolute;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 600;
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
    animation: v9Bounce 2.5s ease-in-out infinite;
}
.pi-v9-hero-scroll .line {
    width: 1px; height: 36px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
}
@keyframes v9Bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 767px) { .pi-v9-hero-scroll { display: none; } }

/* ============================================
   2) RIBBON — Black info strip
   ============================================ */
.pi-v9-ribbon {
    background: var(--v9-ink);
    color: rgba(255,255,255,.92);
    padding: 1.85rem 0;                  /* was 1.25rem */
    border-bottom: 1px solid rgba(255, 216, 61, .2);
    overflow: visible;
}
.pi-v9-ribbon-row {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem 3rem;                    /* was 1rem 2.25rem */
    font-size: 1.4rem;                    /* was 1.15rem */
    line-height: 1;
}
.pi-v9-ribbon-row span { display: inline-flex; align-items: center; gap: .65rem; }
.pi-v9-ribbon-row i { color: var(--v9-yellow); font-size: 1.65rem; }   /* was 1.3rem */
.pi-v9-ribbon-row strong { color: #fff; }
.pi-v9-ribbon-row .sep { color: rgba(255,255,255,.22); font-size: 1.5rem; }
.pi-v9-ribbon-row .pi-v9-ribbon-logo {
    height: 80px;                         /* was 70px */
    width: auto;
    object-fit: contain;
    margin: -42px 0 -42px .65rem;         /* was -32px */
    vertical-align: middle;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    position: relative;
    z-index: 2;
}
@media (max-width: 767px) {
    .pi-v9-ribbon {
        display: block !important;
        position: relative !important;
        z-index: 4 !important;
        padding: .65rem 0 !important;
        overflow: visible !important;
        background: var(--v9-ink) !important;
        min-height: 56px !important;
    }
    .pi-v9-ribbon > .container { padding-left: 12px !important; padding-right: 12px !important; }
    .pi-v9-ribbon-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        font-size: .85rem !important;
    }
    .pi-v9-ribbon-row > span:not(:first-child) { display: none !important; }
    .pi-v9-ribbon-row > span:first-child {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .45rem !important;
        max-width: 100% !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }
    .pi-v9-ribbon-row i { font-size: 1rem !important; line-height: 1 !important; flex-shrink: 0 !important; }
    .pi-v9-ribbon-row strong {
        color: #fff !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
        flex-shrink: 0 !important;
    }
    .pi-v9-ribbon-row .pi-v9-ribbon-logo {
        display: inline-block !important;
        height: 30px !important;
        width: auto !important;
        max-width: 110px !important;
        margin: 0 0 0 .2rem !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================
   3) STATS — Floating bar between ribbon and about
   ============================================ */
.pi-v9-stats {
    position: relative;
    z-index: 1;
    padding: clamp(25px, 3vw, 40px) 0 clamp(30px, 4vw, 50px);
    background: var(--v9-cream);
}
.pi-v9-stats-bar {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0,0,0,.14);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid var(--v9-line);
    max-width: 1180px;
    margin: 0 auto;
}
.pi-v9-stats-cell {
    padding: 2rem 1.75rem;
    border-right: 1px solid var(--v9-line-soft);
    display: flex; align-items: center; gap: 1.1rem;
}
.pi-v9-stats-cell:last-child { border-right: 0; }
.pi-v9-stats-cell .ico {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--v9-yellow-50);
    color: var(--v9-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.pi-v9-stats-cell:nth-child(2) .ico { background: rgba(215,38,49,.08); color: var(--v9-red); }
.pi-v9-stats-cell:nth-child(3) .ico { background: #f3f3f3; color: var(--v9-ink); }
.pi-v9-stats-cell .num {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--v9-ink);
    line-height: 1;
    letter-spacing: -0.03em;
}
.pi-v9-stats-cell .lbl {
    font-size: .76rem;
    color: var(--v9-mute);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
    margin-top: .4rem;
}
@media (max-width: 991px) {
    .pi-v9-stats-bar { grid-template-columns: 1fr 1fr; }
    .pi-v9-stats-cell:nth-child(2) { border-right: 0; }
    .pi-v9-stats-cell:nth-child(1), .pi-v9-stats-cell:nth-child(2) { border-bottom: 1px solid var(--v9-line-soft); }
}
@media (max-width: 575px) {
    .pi-v9-stats {
        margin-top: 0 !important;
        padding-top: 24px !important;
        padding-bottom: 32px !important;
        z-index: 1 !important;
    }
    .pi-v9-stats-bar { grid-template-columns: 1fr 1fr !important; }
    .pi-v9-stats-cell {
        padding: .9rem .75rem !important;
        gap: .6rem !important;
        border-right: 1px solid var(--v9-line-soft) !important;
        border-bottom: 1px solid var(--v9-line-soft) !important;
    }
    .pi-v9-stats-cell:nth-child(2n) { border-right: 0 !important; }
    .pi-v9-stats-cell:nth-last-child(-n+2) { border-bottom: 0 !important; }
    .pi-v9-stats-cell .ico {
        width: 36px !important;
        height: 36px !important;
        font-size: .95rem !important;
        border-radius: 10px !important;
    }
    .pi-v9-stats-cell .num {
        font-size: 1.2rem !important;
        letter-spacing: -0.02em !important;
    }
    .pi-v9-stats-cell .lbl {
        font-size: .58rem !important;
        letter-spacing: .1em !important;
        margin-top: .2rem !important;
        line-height: 1.2 !important;
    }
}

/* ============================================
   4) ABOUT — Magazine Editorial w/ drop cap + sidebar
   ============================================ */
/* ABOUT v2 — tighter, with featured banner image (home-bnr1.png) */
.pi-v9-about {
    position: relative;
    background: var(--v9-white);
    padding: clamp(70px, 8vw, 110px) 0;
    overflow: hidden;
}
.pi-v9-about-head {
    max-width: 880px;
    margin: 0 auto 3rem;
    text-align: center;
}
.pi-v9-about-head .pi-v9-eyebrow { margin-bottom: .9rem; }
.pi-v9-about-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 .65rem;
}
.pi-v9-about-head h2 em { font-style: normal; color: var(--v9-red); }
.pi-v9-about-tagline {
    font-size: 1.42rem !important;
    color: var(--v9-gold);
    font-weight: 600;
    font-style: italic;
    margin: 0;
    display: inline-block;
    position: relative;
    padding-bottom: 6px;
}
.pi-v9-about-tagline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--v9-yellow-200) 0%, var(--v9-yellow) 50%, var(--v9-gold) 100%);
}

/* 2-column grid with rows:
   Row 1: [ image  ] [ text content ]      ← text height = image height
   Row 2: [ quote  ] [ venue + 17th ]
   Row 3: [        watch-out + buttons (full width)         ] */
.pi-v9-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
        "image  text"
        "note   note"
        "quote  boxes"
        "watch  watch";
    column-gap: 2.75rem;
    row-gap: 2.25rem;
    margin-top: 2.5rem;
    align-items: start;
}
@media (max-width: 991px) {
    .pi-v9-about-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "text"
            "note"
            "quote"
            "boxes"
            "watch";
        column-gap: 0;
        row-gap: 1.75rem;
    }
}

/* IMAGE — horizontal, full visible, natural aspect-derived height */
.pi-v9-about-img {
    grid-area: image;
    position: relative;
    aspect-ratio: 16 / 10.2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .1);
    background: var(--v9-cream-2);
    align-self: start;
    margin-top: 8px; /* nudge image down so its top edge aligns with the text's first line */
}
.pi-v9-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.pi-v9-about-img:hover img { transform: scale(1.03); }
.pi-v9-about-img .badge-ipema {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--v9-yellow);
    color: var(--v9-ink);
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    line-height: 1;
    z-index: 2;
}
.pi-v9-about-img .caption {
    position: absolute;
    left: 14px; right: 14px; bottom: 14px;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    display: flex; align-items: center; gap: .4rem;
    z-index: 2;
}
.pi-v9-about-img::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 35%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}

/* TEXT — same row height as image (both stretch to row max) */
.pi-v9-about-text {
    grid-area: text;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* top-align the two paragraphs; the 3rd is moved full-width below */
    font-size: .95rem;
    line-height: 1.6;
    color: var(--v9-text);
}
.pi-v9-about-text p { margin: 0 0 .8rem; }
.pi-v9-about-text p:last-child { margin-bottom: 0; }
.pi-v9-about-text strong { color: var(--v9-ink); font-weight: 700; }
/* Closing line moved full-width below the image/text row */
.pi-v9-about-note {
    grid-area: note;
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--v9-text);
}
.pi-v9-about-note strong { color: var(--v9-ink); font-weight: 700; }
/* Desktop: grow the two paragraphs so their block height matches the image,
   and tighten the gap above the full-width closing line. */
@media (min-width: 992px) {
    /* Two paragraphs with normal spacing (no big gap between them); enlarge the text
       so the block fills the image height. !important beats the global "p {...!important}". */
    .pi-v9-about-text { justify-content: flex-start !important; }
    .pi-v9-about-text p {
        font-size: 1.32rem !important;
        line-height: 2.25 !important;
        margin: 0 0 0.85rem !important;
    }
    .pi-v9-about-text p:last-child { margin-bottom: 0 !important; }
    /* Pull the full-width closing line up to reduce the gap above it. */
    .pi-v9-about-note { margin-top: -1.5rem !important; }
}
@media (max-width: 991px) {
    .pi-v9-about-text {
        align-self: start;
        justify-content: flex-start;
    }
}

/* QUOTE — below image (left column). Stretches to match row 2 height. */
.pi-v9-about-quote {
    grid-area: quote;
    background: linear-gradient(135deg, var(--v9-yellow-50) 0%, var(--v9-cream-2) 100%);
    border-left: 4px solid var(--v9-gold);
    border-radius: 14px;
    padding: 1.15rem 1.35rem 1.15rem 2.8rem;
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pi-v9-about-quote::before {
    content: "\201C";
    position: absolute;
    top: 8px; left: 14px;
    font-family: Georgia, serif;
    font-size: 2.8rem;
    color: var(--v9-gold);
    line-height: 1;
    opacity: .9;
}
.pi-v9-about-quote blockquote {
    font-size: .98rem;
    line-height: 1.6;
    color: var(--v9-ink);
    margin: 0 0 .45rem;
    font-style: italic;
    font-weight: 500;
}
.pi-v9-about-quote cite {
    display: block;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--v9-mute);
    font-weight: 700;
    font-style: normal;
}
.pi-v9-about-quote cite .cite-main,
.pi-v9-about-quote cite .cite-sub { display: inline; }
.pi-v9-about-quote cite .cite-sub::before { content: " · "; }

/* BOXES — venue + 17th edition (below text, right column).
   Stretches to row 2 height; inner cards stretch equal via grid stretch. */
.pi-v9-about-boxes {
    grid-area: boxes;
    display: grid;
    grid-template-columns: 1fr;        /* single full-width card uses the whole right column */
    gap: .85rem;
    align-self: stretch;
    align-items: stretch;
}

/* Venue card — two clearly-labelled venues (Exhibition Hall vs Knowledge Day)
   side by side, filling the full width. Colour-coded left accents make it
   obvious which location is which. */
.pi-v9-about-info-card--venue .venues {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin-top: .15rem;
}
.pi-v9-about-info-card--venue .venue-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-left: .8rem;
    border-left: 3px solid var(--v9-gold);
}
.pi-v9-about-info-card--venue .venue-item:nth-child(2) { border-left-color: var(--v9-red); }
.pi-v9-about-info-card--venue .vlabel {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--v9-ink);
}
.pi-v9-about-info-card--venue .vlabel i { color: var(--v9-gold); font-size: .95rem; }
.pi-v9-about-info-card--venue .venue-item:nth-child(2) .vlabel i { color: var(--v9-red); }
.pi-v9-about-info-card--venue .vplace {
    font-size: .92rem; line-height: 1.4; color: var(--v9-text);
}
@media (max-width: 575px) {
    .pi-v9-about-boxes { grid-template-columns: 1fr; }
    .pi-v9-about-info-card--venue .venues { grid-template-columns: 1fr; gap: .7rem; }
}

.pi-v9-about-info-card {
    background: var(--v9-cream);
    border: 1px solid var(--v9-line);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
}
.pi-v9-about-info-card h4 {
    font-size: .72rem;
    margin: 0 0 .65rem;
    color: var(--v9-ink);
    display: flex; align-items: center; gap: .5rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pi-v9-about-info-card h4 i { color: var(--v9-red); font-size: 1rem; }
.pi-v9-about-info-card--venue h4 i { color: var(--v9-gold); }
.pi-v9-about-info-card .list { display: grid; gap: .4rem; }
.pi-v9-about-info-card .list span {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .85rem; color: var(--v9-text); line-height: 1.45;
}
.pi-v9-about-info-card .list i {
    color: var(--v9-gold);
    font-size: .92rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.pi-v9-about-info-card--venue .list i { color: var(--v9-red); }

/* Venue card — larger heading / labels / text / icons (card size unchanged:
   it stretches to the quote box height, so there's slack to fill). Placed after
   the base rules so these win by source order. */
.pi-v9-about-info-card--venue h4 { font-size: .95rem; margin-bottom: .85rem; }
.pi-v9-about-info-card--venue h4 i { font-size: 1.35rem; }
.pi-v9-about-info-card--venue .vlabel { font-size: .88rem; }
.pi-v9-about-info-card--venue .vlabel i { font-size: 1.2rem; }
.pi-v9-about-info-card--venue .vplace { font-size: 1.05rem; line-height: 1.45; }

/* WATCH-OUT — heading on top, then 2-box row (60% text / 40% buttons) */
.pi-v9-about-watch {
    grid-area: watch;
    margin-top: .75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--v9-line);
}
.pi-v9-about-watch > h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--v9-ink);
    letter-spacing: -0.015em;
}
/* 1 column, 2 rows stacked — first box 60% wide, second box 40% wide */
.pi-v9-about-watch-body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    align-items: flex-start;
}
.pi-v9-about-watch-text {
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.pi-v9-about-watch-text p {
    font-size: 1rem;
    color: var(--v9-text);
    line-height: 1.65;
    margin: 0;
}
.pi-v9-about-watch-actions {
    width: 40%;
    padding: .85rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.pi-v9-about-watch-actions .pi-v9-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
}
@media (max-width: 767px) {
    .pi-v9-about-watch-text,
    .pi-v9-about-watch-actions {
        width: 100%;
    }
    .pi-v9-about-watch-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: .5rem !important;
        padding: 0 !important;
    }
    .pi-v9-about-watch-actions .pi-v9-btn {
        flex: 1 1 0 !important;
        width: auto !important;
        padding: .55rem .65rem !important;
        font-size: .78rem !important;
        letter-spacing: -.005em !important;
    }
    /* Stack the cite: "17 Successful Editions" sits below "— Organised by IPEMA" */
    .pi-v9-about-quote cite {
        font-size: .6rem !important;
        letter-spacing: .12em !important;
        display: block !important;
        white-space: normal !important;
        line-height: 1.5 !important;
    }
    .pi-v9-about-quote cite .cite-main,
    .pi-v9-about-quote cite .cite-sub {
        display: block !important;
        white-space: nowrap !important;
    }
    .pi-v9-about-quote cite .cite-sub::before { content: "" !important; }
    .pi-v9-about-quote cite .cite-sub { color: var(--v9-gold) !important; margin-top: 2px !important; }

    /* Keep the about section + its image/text strictly inside the viewport */
    .pi-v9-about,
    .pi-v9-about-grid,
    .pi-v9-about-img,
    .pi-v9-about-text,
    .pi-v9-about-quote,
    .pi-v9-about-boxes,
    .pi-v9-about-watch,
    .pi-v9-about-watch-body {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .pi-v9-about-img img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    .pi-v9-about-text,
    .pi-v9-about-quote {
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .pi-v9-about-quote {
        padding: 1rem 1rem 1rem 2.1rem !important;
    }
    .pi-v9-about-quote::before {
        font-size: 2.2rem !important;
        top: 4px !important;
        left: 10px !important;
    }
    .pi-v9-about-quote blockquote {
        font-size: .92rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   5) WHY — Zigzag Editorial Rows
   ============================================ */
.pi-v9-why {
    position: relative;
    background: var(--v9-cream);
    padding: clamp(20px, 4vw, 40px) 0;
}
.pi-v9-why-head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
}
.pi-v9-why-head .pi-v9-eyebrow { margin-bottom: .9rem; }
.pi-v9-why-head h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 .55rem;
}
.pi-v9-why-head h2 em { font-style: normal; color: var(--v9-red); }
.pi-v9-why-head p {
    color: var(--v9-text-2);
    font-size: .98rem;
    margin: 0;
}

.pi-v9-why-rows { display: flex; flex-direction: column; }
.pi-v9-why-row {
    display: grid;
    /* Smaller image: cap the photo column (~400px) and let the text take the rest.
       Odd rows = image left, even rows = image right (see overrides below). */
    grid-template-columns: minmax(0, 400px) 1fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(0.6rem, 1.4vw, 1.1rem) 0;
    border-top: 1px solid var(--v9-line);
}
.pi-v9-why-row:nth-child(even) { grid-template-columns: 1fr minmax(0, 400px); }
.pi-v9-why-row:last-child { border-bottom: 1px solid var(--v9-line); }
.pi-v9-why-row:nth-child(odd)  .pi-v9-why-pic  { order: 1; }
.pi-v9-why-row:nth-child(odd)  .pi-v9-why-text { order: 2; }
.pi-v9-why-row:nth-child(even) .pi-v9-why-text { order: 1; }
.pi-v9-why-row:nth-child(even) .pi-v9-why-pic  { order: 2; }
@media (max-width: 767px) {
    .pi-v9-why-rows { gap: 1.5rem !important; }
    .pi-v9-why-row,
    .pi-v9-why-row:nth-child(even) {
        grid-template-columns: 1fr !important;   /* stack; beat the per-side column rules above */
        gap: 0.75rem;
        padding: 1.25rem 0;
    }
    .pi-v9-why-pic { max-width: 420px; margin-inline: auto; }  /* keep the photo a sensible size on phones/tablets */
    .pi-v9-why-row > * { order: unset !important; }
}
.pi-v9-why-num { display: none; }
.pi-v9-why-text h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    font-weight: 800;
    margin: 0 0 .55rem;
    color: var(--v9-ink);
    letter-spacing: -0.015em;
}
.pi-v9-why-text p {
    font-size: 1.05rem;
    color: var(--v9-text-2);
    line-height: 1.65;
    margin: 0 0 .8rem;
}
.pi-v9-why-text .tag {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--v9-yellow-50);
    color: var(--v9-gold);
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pi-v9-why-text .tag i { font-size: .85rem; }
.pi-v9-why-pic {
    position: relative;
    aspect-ratio: 3 / 2;           /* matches the source photos (all 3:2) → image fills with NO side gaps and NO crop */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.pi-v9-why-pic img {
    width: 100%; height: 100%;
    object-fit: cover;             /* holder ratio == image ratio, so this shows the full image edge-to-edge, no letterbox */
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.pi-v9-why-pic:hover img { transform: scale(1.05); }

/* ============================================
   6) SECTORS — Numbered directory list (typographic)
   ============================================ */
.pi-v9-sectors {
    background: var(--v9-white);
    padding: clamp(25px, 7vw, 50px) 0;
    position: relative;
}
.pi-v9-sectors-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--v9-line);
}
@media (max-width: 767px) { .pi-v9-sectors-head { gap: 0.75rem; } }
.pi-v9-sectors-head .pi-v9-eyebrow { margin-bottom: 1rem; }
.pi-v9-sectors-head h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 900;
    margin: 0;
}
.pi-v9-sectors-head h2 em { font-style: normal; color: var(--v9-gold); }
.pi-v9-sectors-head p {
    color: var(--v9-red);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}
.pi-v9-sectors-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 767px) { .pi-v9-sectors-list { grid-template-columns: 1fr; gap: 0.9rem; } }
/* Base — properties shared by both desktop & mobile */
.pi-v9-sector-row {
    background: #fff;
    border: 1px solid var(--v9-line);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
.pi-v9-sector-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--v9-red);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    z-index: 3;
}
.pi-v9-sector-row:hover {
    background: var(--v9-yellow-50);
    box-shadow: 0 10px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    transform: translateY(-2px);
}
.pi-v9-sector-row:hover::before { transform: scaleY(1); }
.pi-v9-sector-row:hover .b h4 { color: var(--v9-red); }
.pi-v9-sector-row:hover .thumb img { transform: scale(1.06); }
.pi-v9-sector-row .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

/* "& many more" — slim, full-width single-line strip (icon + heading + text
   all on one line). Decorative only — no link/navigation. Works on desktop &
   mobile via flex-wrap; !important beats the base row's grid/flex/mobile rules. */
.pi-v9-sector-row--more {
    grid-column: 1 / -1 !important;          /* span both columns */
    background: var(--v9-yellow-50, #fff8e3) !important;
    border: 1px dashed var(--v9-gold, #c49400) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .25rem .55rem !important;
    padding: .5rem 1rem !important;
}
.pi-v9-sector-row--more .thumb {
    order: -1 !important;
    flex: 0 0 auto !important;
    width: auto !important; height: auto !important;
    min-height: 0 !important; max-height: none !important;
    background: none !important; box-shadow: none !important; border-radius: 0 !important;
    display: inline-flex !important; align-items: center !important;
    overflow: visible !important;
}
.pi-v9-sector-row--more .thumb i { font-size: 1.2rem; color: var(--v9-gold-deep, #6e4f00); }
.pi-v9-sector-row--more .b {
    display: inline-flex !important;
    flex-flow: row wrap;
    align-items: baseline;
    gap: .2rem .4rem;
    text-align: left;
}
.pi-v9-sector-row--more .b h4 { margin: 0 !important; font-size: 1rem !important; color: var(--v9-gold-deep, #6e4f00); }
.pi-v9-sector-row--more .b p { margin: 0 !important; font-size: .88rem; color: var(--v9-text-2, #5a5a5a); }
.pi-v9-sector-row--more:hover { transform: none; background: var(--v9-yellow-50, #fff8e3) !important; }
.pi-v9-sector-row--more:hover .b h4 { color: var(--v9-gold-deep, #6e4f00); }

/* DESKTOP only (≥768px) — original horizontal 3-column layout: [num] [text] [image] */
@media (min-width: 768px) {
    .pi-v9-sector-row {
        display: grid;
        grid-template-columns: 1fr 220px;
        gap: 1.25rem;
        align-items: center;
        padding: 1.1rem 1.15rem;
    }
    .pi-v9-sector-row .n {
        font-size: clamp(1.4rem, 2vw, 1.85rem);
        font-weight: 900;
        color: var(--v9-red);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
        position: static;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }
    .pi-v9-sector-row .b h4 {
        font-size: clamp(1.05rem, 1.5vw, 1.2rem);
        font-weight: 800;
        margin: 0 0 .25rem;
        color: var(--v9-ink);
        transition: color .25s ease;
    }
    .pi-v9-sector-row .b p {
        font-size: .88rem;
        color: var(--v9-text-2);
        margin: 0;
        line-height: 1.55;
    }
    .pi-v9-sector-row .thumb {
        width: 210px; height: 170px;
        border-radius: 12px;
        overflow: hidden;
        background: var(--v9-cream-2);
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
        aspect-ratio: auto;
        max-height: none;
    }
}
/* TABLET PORTRAIT only (768-991.98px) — at this width the container is a fixed
   720px, so the 2-column list crushes each row's text to ~110px and clips the
   thumbnail. Use a single column so every card is full width with room for the
   text AND the full image. Mobile (<=767px) and desktop (>=992px) are untouched. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pi-v9-sectors-list { grid-template-columns: 1fr; }
}

/* MOBILE — vertical stack: image on top with number badge, text below */
@media (max-width: 767px) {
    .pi-v9-sector-row {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        align-items: stretch !important;
    }
    .pi-v9-sector-row .thumb {
        width: 100% !important;
        height: 110px !important;
        min-height: 110px !important;
        max-height: 110px !important;
        aspect-ratio: auto !important;
        flex: 0 0 110px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        order: 1 !important;
    }
    .pi-v9-sector-row .thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .pi-v9-sector-row .n {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 2 !important;
        background: #fff !important;
        border-radius: 8px !important;
        padding: 2px 7px !important;
        font-size: .85rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
    }
    .pi-v9-sector-row .b {
        order: 2 !important;
        padding: .6rem .75rem .75rem !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
    }
    .pi-v9-sector-row .b h4 {
        font-size: .92rem !important;
        margin: 0 0 .2rem !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .pi-v9-sector-row .b p {
        font-size: .78rem !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .pi-v9-sector-row .n {
        font-size: .78rem !important;
        padding: 2px 6px !important;
        top: 8px !important;
        left: 8px !important;
    }
    /* Cards sized to their content — uniform image + clamped text keeps heights visually equal */
    .pi-v9-sectors-list {
        align-items: start !important;
        gap: .65rem !important;
    }
    .pi-v9-sector-row {
        min-height: 0 !important;
        height: auto !important;
        align-self: start !important;
        border-radius: 10px !important;
    }
    .pi-v9-sectors-list { align-items: stretch !important; }
    .pi-v9-sector-row { height: 100% !important; }
}

/* ============================================
   7) KNOWLEDGE DAY — Ticket / Poster Card
   ============================================ */
.pi-v9-kday {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(255, 216, 61, .12) 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(215, 38, 49, .1) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: #fff;
    padding: clamp(50px, 7vw, 80px) 0;
    position: relative;
    overflow: hidden;
}
.pi-v9-kday::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.4) 0%, transparent 70%);
    pointer-events: none;
}
.pi-v9-kday > .container { position: relative; z-index: 2; }
.pi-v9-kday-head {
    text-align: center;
    margin-top: -5px;
    margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.pi-v9-kday-head .pi-v9-eyebrow { color: var(--v9-yellow); margin-bottom: 1.25rem; }
.pi-v9-kday-head .pi-v9-eyebrow::before { background: var(--v9-yellow); }
    .pi-v9-kday-head h2 {
        color: #ED1165 !important;
        font-size: clamp(2.4rem, 5.5vw, 4.2rem);
        font-weight: 900;
        margin: 0 0 .75rem;
    }
.pi-v9-kday-head h2 em { font-style: normal; color: var(--v9-yellow); }
.pi-v9-kday-head p {
    color: #fff !important;
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto;
}

.pi-v9-ticket {
    max-width: 1100px;
    margin: 0 auto;
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
    border-radius: 28px;
    display: grid;
    grid-template-columns: 260px 1fr 290px;
    overflow: hidden;
    box-shadow: 0 50px 120px rgba(0,0,0,.45);
    position: relative;
}
@media (max-width: 991px) { .pi-v9-ticket { grid-template-columns: 1fr; } }

.pi-v9-ticket::before, .pi-v9-ticket::after { display: none; }

.pi-v9-ticket-date {
    background: linear-gradient(180deg, var(--v9-yellow-200) 0%, var(--v9-yellow) 100%);
    padding: 2.75rem 1.75rem;
    text-align: center;
    color: var(--v9-ink);
    display: flex; flex-direction: column;
    justify-content: center;
}
.pi-v9-ticket-date .m {
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
}
.pi-v9-ticket-date .d {
    font-size: clamp(4.5rem, 9vw, 7rem);
    font-weight: 900;
    line-height: .9;
    margin: .35rem 0;
    letter-spacing: -0.05em;
}
.pi-v9-ticket-date .y {
    font-size: 1.1rem;
    font-weight: 800;
}
.pi-v9-ticket-body {
    padding: 2.5rem 2.5rem;
    border-left: 2px dashed rgba(0,0,0,.12);
    border-right: 2px dashed rgba(0,0,0,.12);
    color: var(--v9-text);
}
@media (max-width: 991px) {
    .pi-v9-ticket-body {
        border-left: 0; border-right: 0;
        border-top: 2px dashed rgba(0,0,0,.12);
        border-bottom: 2px dashed rgba(0,0,0,.12);
    }
}
.pi-v9-ticket-body h3 {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 800;
    color: var(--v9-ink);
    margin: 0 0 .75rem;
}
.pi-v9-ticket-body p {
    color: var(--v9-text-2);
    margin: 0 0 1.5rem;
    font-size: .98rem;
    line-height: 1.65;
}
.pi-v9-ticket-features {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: .65rem;
}
.pi-v9-ticket-features li {
    display: flex; align-items: center; gap: .65rem;
    font-size: .9rem;
    color: var(--v9-ink);
    font-weight: 600;
}
.pi-v9-ticket-features i {
    color: var(--v9-red);
    font-size: 1rem;
}
.pi-v9-ticket-cta {
    background: var(--v9-ink);
    color: #fff;
    padding: 2.5rem 1.75rem;
    display: flex; flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .75rem;
}
.pi-v9-ticket-cta .label {
    font-size: 1rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--v9-yellow);
    font-weight: 800;
}
.pi-v9-ticket-cta .price {
    font-size: 1.55rem;
    font-weight: 900;
    color: #fff;
}
.pi-v9-ticket-cta .venue {
    font-size: .82rem;
    color: #fff;
    margin-bottom: .5rem;
    line-height: 1.4;
}
.pi-v9-ticket-cta a {
    width: 100%;
    background: var(--v9-red);
    color: #fff;
    padding: .55rem .9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    text-decoration: none;
    transition: background .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.pi-v9-ticket-cta a:hover {
    background: var(--v9-red-deep);
    color: #fff;
    transform: translateY(-2px);
}
.pi-v9-ticket-cta a.outline {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.3);
}
.pi-v9-ticket-cta a.outline:hover {
    background: #fff;
    color: var(--v9-ink);
    border-color: #fff;
}

/* ============================================
   8) HIGHLIGHTS — Horizontal Snap Gallery
   ============================================ */
.pi-v9-gallery {
    background: var(--v9-cream);
    margin-top: clamp(40px, 6vw, 80px);
    padding: clamp(30px, 4vw, 55px) 0 clamp(70px, 9vw, 110px);
    position: relative;
    overflow: hidden;
}
.pi-v9-gallery .pi-v9-btn--outline {
    padding: .55rem 1.1rem;
    font-size: .8rem;
    gap: .4rem;
}
@media (max-width: 767px) {
    .pi-v9-gallery {
        margin-top: 24px !important;
        padding-top: 20px !important;
        padding-bottom: 50px !important;
    }
    .pi-v9-gallery .pi-v9-btn--outline {
        padding: .5rem .9rem !important;
        font-size: .75rem !important;
    }
}
.pi-v9-gallery-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--v9-line);
}
.pi-v9-gallery-head .pi-v9-eyebrow { margin-bottom: 0.6rem; }
.pi-v9-gallery-head h2 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 900;
    margin: 0;
}
.pi-v9-gallery-head h2 em { font-style: normal; color: var(--v9-red); }

.pi-v9-gallery-stage { position: relative; }
.pi-v9-gallery-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1.5rem;
}
.pi-v9-gallery-nav button {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--v9-line);
    background: #fff;
    color: var(--v9-ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.pi-v9-gallery-nav button:hover {
    background: var(--v9-ink);
    color: #fff;
    border-color: var(--v9-ink);
    transform: translateY(-2px) scale(1.05);
}
.pi-v9-gallery-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem .25rem 0;
    margin: -1rem -1rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pi-v9-gallery-scroll::-webkit-scrollbar { display: none; }

.pi-v9-gallery-card {
    flex: 0 0 clamp(200px, 24vw, 320px);
    scroll-snap-align: start;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.pi-v9-gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0,0,0,.16);
}
.pi-v9-gallery-card .img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--v9-cream-2);
    position: relative;
    line-height: 0;
}
.pi-v9-gallery-card .img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.pi-v9-gallery-card:hover .img img { transform: scale(1.07); }
.pi-v9-gallery-card .img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4) 100%);
}
.pi-v9-gallery-card .meta {
    padding: 1.25rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.pi-v9-gallery-card .meta h4 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: var(--v9-ink);
}
.pi-v9-gallery-card .meta i {
    color: var(--v9-gold);
    font-size: 1.1rem;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.pi-v9-gallery-card:hover .meta i { transform: translateX(4px); }

/* ============================================
   9) ORG / SUPPORTED — Brand strip
   ============================================ */
.pi-v9-org {
    background: var(--v9-white);
    padding: clamp(60px, 7vw, 90px) 0;
}
.pi-v9-org-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 767px) { .pi-v9-org-grid { grid-template-columns: 1fr; } }
.pi-v9-org-tile {
    display: flex; align-items: center; gap: 2rem;
    padding: 2.25rem 2.25rem;
    min-height: 160px;
    border-radius: 22px;
    border: 1px solid var(--v9-line);
    background: var(--v9-cream);
    position: relative;
    overflow: hidden;
}
.pi-v9-org-tile::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 60%;
    background: var(--v9-red);
    border-radius: 0 4px 4px 0;
}
.pi-v9-org-tile--gold { background: #FFFFFF; }
.pi-v9-org-tile--gold::before { background: var(--v9-gold); }
.pi-v9-org-tile .lbl {
    font-size: 1.05rem;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-weight: 900;
    color: var(--v9-ink);
    white-space: nowrap;
    margin-left: .5rem;
}
.pi-v9-org-tile img {
    max-height: 150px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    flex-shrink: 1;
    min-width: 0;
}
.pi-v9-org-tile--gold img { max-height: 80px; }

/* TABLET PORTRAIT only (768-991.98px) — the 2-column grid + horizontal tile
   leaves the logo only ~96px of width, so it shrinks tiny. One column per tile
   gives the logo the full row width. Mobile/desktop untouched. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pi-v9-org-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .pi-v9-org-tile {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
        padding: 1.5rem 1.25rem !important;
        min-height: 0 !important;
    }
    .pi-v9-org-tile .lbl {
        margin-left: 0 !important;
        white-space: normal !important;
        font-size: .9rem !important;
        letter-spacing: .18em !important;
        order: 1 !important;
    }
    .pi-v9-org-tile img {
        order: 2 !important;
        max-height: 90px !important;
    }
    .pi-v9-org-tile--gold img { max-height: 60px !important; }
}

/* ============================================
   Marquee overrides (existing marquee infra)
   ============================================ */
.pi-home-redesign .pi-marquee-section {
    background: var(--v9-white) !important;
    padding: clamp(70px, 9vw, 110px) 0 !important;
    border-bottom: 0 !important;
}
.pi-home-redesign .pi-marquee-section.alt {
    background: var(--v9-cream) !important;
}
.pi-home-redesign .pi-marquee-heading {
    margin-bottom: 3rem !important;
    text-align: center !important;
}
.pi-home-redesign .pi-marquee-heading h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    color: var(--v9-ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: .65rem !important;
}
.pi-home-redesign .pi-marquee-heading p {
    color: var(--v9-text-2) !important;
    font-size: .98rem !important;
}
.pi-home-redesign .pi-marquee-heading-bar {
    background: var(--v9-red) !important;
    width: 48px !important;
    height: 3px !important;
}
.pi-home-redesign .pi-marquee-item {
    background: var(--v9-white) !important;
    border: 1px solid var(--v9-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s ease !important;
}
.pi-home-redesign .pi-marquee-item:hover {
    transform: translateY(-4px) !important;
    border-color: var(--v9-gold-soft) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.1) !important;
}
.pi-home-redesign .pi-marquee-item::after { border: 0 !important; }
.pi-home-redesign .pi-marquee-static {
    display: flex !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    flex-wrap: wrap !important;
}

/* ============================================
   10) TESTIMONIALS — Featured pull + 4 mini cards
   ============================================ */
.pi-v9-testi {
    background: linear-gradient(180deg, var(--v9-cream) 0%, var(--v9-cream-2) 100%);
    padding: clamp(90px, 11vw, 150px) 0;
    position: relative;
    overflow: hidden;
}
.pi-v9-testi-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4rem;
}
.pi-v9-testi-head .pi-v9-eyebrow { margin-bottom: 1.25rem; }
.pi-v9-testi-head h2 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 900;
    margin: 0 0 1rem;
}
.pi-v9-testi-head h2 em { font-style: normal; color: var(--v9-red); }
.pi-v9-testi-head p { color: var(--v9-text-2); font-size: 1.05rem; }

.pi-v9-testi-list {
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    --testi-visible: 3;
    --testi-gap: 1.25rem;
}
.pi-v9-testi-list::before,
.pi-v9-testi-list::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.pi-v9-testi-list::before { left: 0; background: linear-gradient(90deg, var(--v9-cream) 0%, transparent 100%); }
.pi-v9-testi-list::after  { right: 0; background: linear-gradient(270deg, var(--v9-cream-2) 0%, transparent 100%); }
.pi-v9-testi-track {
    display: flex;
    gap: var(--testi-gap);
    width: max-content;
    animation: testiSlide 28s linear infinite;
    will-change: transform;
}
.pi-v9-testi-list:hover .pi-v9-testi-track { animation-play-state: paused; }
@keyframes testiSlide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - (var(--testi-gap) / 2))); }
}
@media (max-width: 991px) { .pi-v9-testi-list { --testi-visible: 2; } }
@media (max-width: 575px) { .pi-v9-testi-list { --testi-visible: 1; } }

@media (max-width: 767px) {
    .pi-v9-testi {
        padding: 40px 0 50px !important;
    }
    .pi-v9-testi-head {
        margin: 0 auto 1.5rem !important;
    }
    .pi-v9-testi-head .pi-v9-eyebrow { margin-bottom: .65rem !important; }
    .pi-v9-testi-head h2 {
        font-size: 1.8rem !important;
        margin: 0 0 .6rem !important;
        line-height: 1.15 !important;
    }
    .pi-v9-testi-head p { font-size: .9rem !important; }

    .pi-v9-testi-list::before,
    .pi-v9-testi-list::after { width: 24px !important; }

    .pi-v9-testi-card {
        padding: 2.4rem 1.1rem 1.1rem !important;
        border-radius: 14px !important;
    }
    .pi-v9-testi-card .quote-icon {
        top: .45rem !important;
        left: .75rem !important;
        font-size: 1.7rem !important;
    }
    .pi-v9-testi-card .author { gap: .6rem !important; margin-bottom: .65rem !important; padding-bottom: .65rem !important; }
    .pi-v9-testi-card .author img {
        width: 48px !important;
        height: 48px !important;
        border-width: 2px !important;
    }
    .pi-v9-testi-card .author .name {
        font-size: .95rem !important;
        line-height: 1.2 !important;
    }
    .pi-v9-testi-card .author .role {
        font-size: .78rem !important;
        margin-top: 1px !important;
    }
    .pi-v9-testi-card p {
        font-size: .88rem !important;
        line-height: 1.7 !important;
        -webkit-line-clamp: 5 !important;
    }
}

.pi-v9-testi-card {
    flex: 0 0 calc((min(100vw - 2rem, 1180px) - (var(--testi-visible) - 1) * var(--testi-gap)) / var(--testi-visible));
    background: #fff;
    border: 1px solid var(--v9-line);
    border-radius: 18px;
    padding: 4rem 1.5rem 1.4rem;
    position: relative;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    transition: background .25s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.pi-v9-testi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(0,0,0,.10);
}
.pi-v9-testi-card .quote-icon {
    position: absolute;
    top: .6rem;
    left: .9rem;
    color: var(--v9-red);
    font-size: 2.4rem;
    line-height: 1;
    opacity: .85;
}
.pi-v9-testi-card .author {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--v9-line);
}
.pi-v9-testi-card .author img {
    width: 72px; height: 72px;
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--v9-yellow-50);
}
.pi-v9-testi-card .author .name {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--v9-ink);
    line-height: 1.25;
}
.pi-v9-testi-card .author .role {
    font-weight: 400;
    font-size: .92rem;
    color: var(--v9-mute);
    margin-top: 3px;
}
.pi-v9-testi-card p {
    font-size: 1rem;
    color: var(--v9-text);
    line-height: 2.25 !important;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   11) NEWSLETTER — Slim inline strip
   ============================================ */
.pi-v9-newsletter {
    background: #000000;
    padding: clamp(60px, 7vw, 90px) 0;
    border-top: 1px solid var(--v9-line);
    border-bottom: 1px solid var(--v9-line);
}
.pi-v9-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .pi-v9-newsletter {
        padding: 40px 0 !important;
    }
    .pi-v9-newsletter-inner {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 1.5rem !important;
        max-width: 100% !important;
    }
    .pi-v9-newsletter-text h3 {
        font-size: 1.4rem !important;
        margin: 0 0 .4rem !important;
    }
    .pi-v9-newsletter-text p {
        font-size: .85rem !important;
    }
    .pi-v9-newsletter-form {
        flex-direction: column !important;
        background: #fff !important;
        border-radius: 18px !important;
        padding: .5rem !important;
        gap: .4rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .pi-v9-newsletter-form input {
        width: 100% !important;
        padding: .75rem 1rem !important;
        font-size: .9rem !important;
        text-align: center !important;
    }
    .pi-v9-newsletter-form button {
        width: 100% !important;
        padding: .75rem 1rem !important;
        font-size: .88rem !important;
        justify-content: center !important;
    }
}
/* TABLET PORTRAIT only (768-991.98px) — the 2-column inner makes the columns
   lopsided and the form floats vertically-centered against the tall text block.
   Stack them (text above the form), centered, like the mobile layout — but keep
   the form horizontal since there's width. Mobile/desktop are untouched. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pi-v9-newsletter-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        max-width: 620px;
    }
    .pi-v9-newsletter-text .pi-v9-eyebrow {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}
.pi-v9-newsletter-text .pi-v9-eyebrow { margin-bottom: .85rem; }
.pi-v9-newsletter-text h3 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 .55rem;
    color: #FFFFFF !important;
}
.pi-v9-newsletter-text p {
    color: #FFFFFF !important;
    margin: 0;
    font-size: .95rem;
}
.pi-v9-newsletter-form {
    display: flex;
    background: #fff;
    border: 1px solid var(--v9-line);
    border-radius: 999px;
    padding: .35rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
}
.pi-v9-newsletter-form input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: .9rem 1.25rem;
    color: var(--v9-ink);
    font-size: .92rem;
    outline: none;
}
.pi-v9-newsletter-form button {
    background: var(--v9-red);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .9rem 1.7rem;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
    display: inline-flex; align-items: center; gap: .45rem;
}
.pi-v9-newsletter-form button:hover {
    background: var(--v9-red);
    transform: translateY(-2px);
}

/* ============================================================
   END HOMEPAGE REDESIGN v9 — "MAGAZINE"
   ============================================================ */


/* ============================================================
   NEWS CARDS v9 — same "MAGAZINE" treatment as homepage About
   Palette: white / cream / yellow / gold / red / ink
   Cleaner image display, tighter spacing, magazine typography
   ============================================================ */

/* Local tokens (mirror homepage v9) */
:root {
    --nv9-white: #ffffff;
    --nv9-cream: #fdfaf2;
    --nv9-cream-2: #fbf5e3;
    --nv9-yellow-50: #fff8d6;
    --nv9-yellow: #ffd83d;
    --nv9-gold: #c9961a;
    --nv9-gold-soft: #e0b441;
    --nv9-ink: #0a0a0a;
    --nv9-text: #2a2a2a;
    --nv9-text-2: #5a5a5a;
    --nv9-mute: #8a8a8a;
    --nv9-line: #ecdfb8;
    --nv9-red: #d72631;
    --nv9-red-deep: #a01a26;
    --nv9-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Year heading — strong typographic anchor */
.pi-news-year {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important;
    font-weight: 900 !important;
    color: var(--nv9-ink) !important;
    letter-spacing: -0.025em !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--nv9-line) !important;
    position: relative !important;
}
.pi-news-year:first-of-type { margin-top: 0 !important; }
.pi-news-year::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 72px; height: 3px;
    background: var(--nv9-red);
    border-radius: 2px;
}

/* Month heading — quiet eyebrow */
.pi-news-month {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: var(--nv9-gold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.26em !important;
    margin-top: 2.25rem !important;
    margin-bottom: 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
}
.pi-news-month i { color: var(--nv9-gold) !important; font-size: 0.92rem !important; }

/* List rhythm */
.pi-news-list {
    gap: 1.1rem !important;
}

/* Featured news card — clean magazine row */
.pi-news-featured-card {
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    background: var(--nv9-white) !important;
    border: 1px solid var(--nv9-line) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.45s var(--nv9-ease), box-shadow 0.45s ease, border-color 0.3s ease !important;
    min-height: 0 !important;
    height: auto !important;
    color: var(--nv9-text) !important;
}
.pi-news-featured-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--nv9-gold-soft) !important;
}

/* Image column — fixed 4:3 horizontal, full cover */
.pi-news-featured-card-img {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    aspect-ratio: 4 / 3;
    overflow: hidden !important;
    background: var(--nv9-cream-2) !important;
    position: relative !important;
}
.pi-news-featured-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.85s var(--nv9-ease) !important;
}
.pi-news-featured-card:hover .pi-news-featured-card-img img {
    transform: scale(1.06) !important;
}
.pi-news-featured-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.4) 100%) !important;
    pointer-events: none !important;
}

/* Yellow pill badge (same as homepage v9 "Organised by IPEMA") */
.pi-news-featured-card-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: var(--nv9-yellow) !important;
    color: var(--nv9-ink) !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
.pi-news-featured-card-badge i { font-size: 0.78rem !important; }

/* Body — tighter rhythm, neat alignment */
.pi-news-featured-card-body {
    padding: 1.4rem 1.6rem 1.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.pi-news-featured-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.2rem !important;
    font-size: 0.7rem !important;
    color: var(--nv9-mute) !important;
    margin-bottom: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-weight: 700 !important;
}
.pi-news-featured-card-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.pi-news-featured-card-meta i { color: var(--nv9-gold) !important; font-size: 0.85rem; }

.pi-news-featured-card-title {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
    font-weight: 800 !important;
    color: var(--nv9-ink) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.022em !important;
    margin-bottom: 0.7rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    transition: color 0.25s ease !important;
}
.pi-news-featured-card:hover .pi-news-featured-card-title {
    color: var(--nv9-red) !important;
}

.pi-news-featured-card-text {
    font-size: 0.88rem !important;
    color: var(--nv9-text-2) !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

/* Footer */
.pi-news-featured-card-footer {
    margin-top: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding-top: 0.9rem !important;
    border-top: 1px solid var(--nv9-line) !important;
}

/* Stats as cream pills (matches venue/edition cards on home) */
.pi-news-featured-card-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}
.pi-news-featured-card-stats span {
    background: var(--nv9-yellow-50) !important;
    border: 1px solid var(--nv9-line) !important;
    padding: 0.32rem 0.7rem !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    color: var(--nv9-text) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Read CTA — red, arrow */
.pi-news-featured-card-read {
    font-size: 0.75rem !important;
    color: var(--nv9-red) !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    transition: transform 0.35s var(--nv9-ease), color 0.25s ease !important;
}
.pi-news-featured-card:hover .pi-news-featured-card-read {
    transform: translateX(6px) !important;
    color: var(--nv9-red-deep) !important;
}

/* Responsive — stack on mobile, image becomes 16:10 banner */
@media (max-width: 767.98px) {
    .pi-news-featured-card {
        grid-template-columns: 1fr !important;
    }
    .pi-news-featured-card-img {
        aspect-ratio: 16 / 10;
        max-width: 100% !important;
        height: auto !important;
    }
    .pi-news-featured-card-body {
        padding: 1.2rem 1.25rem !important;
    }
    .pi-news-featured-card-title {
        font-size: 1.05rem !important;
    }
    .pi-news-featured-card-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   END NEWS CARDS v9
   ============================================================ */

/* ==========================================================
   HOMEPAGE — global text overrides
   1) Replace every grey/ink text token with pure black.
      Done by redefining the design-system CSS variables on
      the .pi-home-redesign root so all `color: var(--…)` rules
      that resolve to a grey or ink shade inherit #000.
      Yellow / red / gold / white / cream tokens are untouched.
   2) Add 5–7px of vertical breathing room (line-height) to
      headings, body text and links across the homepage.
   ========================================================== */
.pi-home-redesign {
    /* v9 scale (used by all 2026 sections) */
    --v9-ink: #000 !important;
    --v9-text: #000 !important;
    --v9-text-2: #000 !important;
    --v9-mute: #000 !important;
    /* legacy pi scale (still used by some shared/nav rules inside the homepage wrapper) */
    --pi-text: #000 !important;
    --pi-text-secondary: #000 !important;
    --pi-gray-500: #000 !important;
    --pi-gray-600: #000 !important;
    --pi-gray-700: #000 !important;
    --pi-gray-800: #000 !important;
    --pi-gray-900: #000 !important;
}

.pi-home-redesign h2,
.pi-home-redesign h3 { line-height: 1.3 !important; }

.pi-home-redesign h4,
.pi-home-redesign h5,
.pi-home-redesign h6 { line-height: 1.45 !important; }

.pi-home-redesign p { line-height: 1.95 !important; }

.pi-home-redesign a { line-height: 1.8 !important; }

.pi-home-redesign .pi-v9-eyebrow { line-height: 1.55 !important; }

/* Social rail — circular icon buttons with larger glyphs */
.pi-social-rail {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2px !important;
    gap: 4px !important;
    right: 4px !important;
}
.pi-social-rail a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    font-size: 1.05rem !important;
}
.pi-social-rail a i,
.pi-social-rail a i::before {
    color: #ffffff !important;
    font-size: inherit !important;
}

/* Brand colors per platform — colored circle, white glyph */
.pi-social-rail a[aria-label="Facebook"]  { background: #1877F2 !important; color: #fff !important; }
.pi-social-rail a[aria-label="Twitter"]   { background: #000000 !important; color: #fff !important; }
.pi-social-rail a[aria-label="LinkedIn"]  { background: #0A66C2 !important; color: #fff !important; }
.pi-social-rail a[aria-label="Instagram"] {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: #fff !important;
}
.pi-social-rail a[aria-label="YouTube"]   { background: #FF0000 !important; color: #fff !important; }
.pi-social-rail a[aria-label="Pinterest"] { background: #E60023 !important; color: #fff !important; }

/* Force white glyph for every brand anchor regardless of icon-class color rules */
.pi-social-rail a[aria-label="Facebook"]  i,
.pi-social-rail a[aria-label="Twitter"]   i,
.pi-social-rail a[aria-label="LinkedIn"]  i,
.pi-social-rail a[aria-label="Instagram"] i,
.pi-social-rail a[aria-label="YouTube"]   i,
.pi-social-rail a[aria-label="Pinterest"] i { color: #ffffff !important; }

.pi-social-rail a:hover {
    filter: brightness(1.1);
    transform: translateX(-3px) scale(1.05) !important;
}

/* ============================================================
   SOCIAL RAIL — desktop only; flush to the right edge.
   (Authoritative — placed after all earlier rail rules.)
   ============================================================ */
.pi-social-rail {
    right: 0 !important;
    max-width: 100vw !important;
}
@media (max-width: 991.98px) {
    .pi-social-rail {
        display: none !important;
    }
}

/* ============================================================
   Card shadows — quote box, date/venue info cards, testimonial
   cards (home + KD), and stronger exhibitor logo cards on home.
   Applies to both home page and Knowledge Day page since both
   reuse these v9 classes.
   ============================================================ */
.pi-v9-about-quote {
    box-shadow: 0 10px 28px rgba(20, 33, 61, 0.12), 0 2px 6px rgba(20, 33, 61, 0.06) !important;
}
.pi-v9-about-quote:hover {
    box-shadow: 0 16px 36px rgba(20, 33, 61, 0.16), 0 3px 8px rgba(20, 33, 61, 0.08) !important;
}

.pi-v9-about-info-card {
    box-shadow: 0 10px 28px rgba(20, 33, 61, 0.10), 0 2px 6px rgba(20, 33, 61, 0.05) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.pi-v9-about-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(20, 33, 61, 0.15), 0 4px 10px rgba(20, 33, 61, 0.07) !important;
}

/* Home testimonial cards — subtle shadow */
.pi-v9-testi-card {
    box-shadow: 0 4px 12px rgba(20, 33, 61, 0.06), 0 1px 3px rgba(20, 33, 61, 0.04) !important;
}
.pi-v9-testi-card:hover {
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.10), 0 2px 4px rgba(20, 33, 61, 0.05) !important;
}

/* KD testimonial cards (video + stat) — subtle shadow */
.kd-video-card {
    box-shadow: 0 4px 12px rgba(20, 33, 61, 0.06), 0 1px 3px rgba(20, 33, 61, 0.04) !important;
}
.kd-video-card:hover {
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.10), 0 2px 4px rgba(20, 33, 61, 0.05) !important;
}
.kd-stat-card {
    box-shadow: 0 3px 10px rgba(20, 33, 61, 0.05), 0 1px 2px rgba(20, 33, 61, 0.03) !important;
}

/* Home exhibitor logo cards — stronger shadow than current 0 2px 8px / .04 */
.pi-home-redesign .pi-marquee-item {
    box-shadow: 0 8px 22px rgba(20, 33, 61, 0.12), 0 2px 6px rgba(20, 33, 61, 0.06) !important;
}
.pi-home-redesign .pi-marquee-item:hover {
    box-shadow: 0 16px 36px rgba(20, 33, 61, 0.18), 0 4px 10px rgba(20, 33, 61, 0.08) !important;
}

/* Hover: the logo zooms in place (img scale stays) but the CARD must NOT shift
   upward. The earlier translateY(-4px) lift made every marquee card jump to the
   top on hover. Cancel the card's vertical move for all home logo marquees
   (IPEMA members, Supporting Associations N/I, Media Partners N/I, Exhibitors). */
.pi-home-redesign .pi-marquee-item:hover {
    transform: none !important;
}

/* Hide caption/meta below gallery images — home Event Highlights
   and Knowledge Day Past Highlights both use .pi-v9-gallery-card */
.pi-v9-gallery-card .meta { display: none !important; }

/* TEMPORARY — hide KD Agenda section (unhide after 1 month).
   To restore, simply delete or comment this rule. */
.kd-agenda { display: none !important; }

/* ============================================================
   Unified hero banner height for ALL pages EXCEPT home and KD.
   Home uses .pi-v9-hero (no --image, video bg). KD also uses
   the bare .pi-v9-hero. So targeting only the --image variant
   plus the legacy .pi-page-header--photo + archive hero gives
   us a single consistent banner height site-wide.
   ============================================================ */
.pi-v9-hero.pi-v9-hero--image,
.pi-page-header.pi-page-header--photo,
.pi-page-header,
.kd-archive-hero {
    height: clamp(380px, 55vh, 520px) !important;
    min-height: 380px !important;
    max-height: 520px !important;
}
@media (max-width: 767.98px) {
    .pi-v9-hero.pi-v9-hero--image,
    .pi-page-header.pi-page-header--photo,
    .pi-page-header,
    .kd-archive-hero {
        height: 360px !important;
        min-height: 320px !important;
        max-height: 400px !important;
    }
}

/* ============================================================
   Short image-bg heroes — center content vertically so it never
   overflows the top of the hero (which would cause it to slide
   under the sticky navbar on smaller desktop viewports).

   Home + Knowledge Day are excluded: they use the bare
   .pi-v9-hero (no --image) and have a tall video bg + flex-end
   alignment that works at full viewport height.
   ============================================================ */
@media (min-width: 768px) {
    .pi-v9-hero.pi-v9-hero--image .pi-v9-hero-content,
    .kd-archive-hero .pi-v9-hero-content,
    .kd-archive-hero .kd-archive-hero-inner {
        justify-content: center !important;
        padding-top: 1.25rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ============================================================
   KD PAGE ONLY — un-stick the global site header and make the
   kd-subnav strip stick instead. Uses :has() to scope the rule
   strictly to the Knowledge Day page (which has .pi-kd-page).
   ============================================================ */
/* CRITICAL: body has overflow-x: hidden globally (line 114),
   which kills position:sticky on descendants. Switch to overflow-x: clip
   on KD only — same anti-horizontal-scroll behavior, but it does NOT
   establish a scroll container, so sticky works. */
body:has(.pi-kd-page) {
    overflow-x: clip !important;
}
body:has(.pi-kd-page) .pi-site-header {
    position: relative !important;
    top: auto !important;
    z-index: 1200 !important;
}
/* ...EXCEPT on mobile (<=767.98px), where the .kd-subnav strip is display:none,
   so un-sticking the header left nothing sticky. Re-stick the header on mobile so
   KD has a sticky navbar like every other page. (Placed after the un-stick rule so
   it wins the cascade — same specificity, later wins.) */
@media (max-width: 767.98px) {
    body:has(.pi-kd-page) .pi-site-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1200 !important;
    }
}
/* Hard-pin nav dropdowns above the hero on KD so they don't slip behind it */
body:has(.pi-kd-page) .pi-nav3,
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu {
    z-index: 1300 !important;
}
body:has(.pi-kd-page) .pi-nav3 { position: relative !important; }
body:has(.pi-kd-page) .pi-v9-hero-content { z-index: 1 !important; }
/* Any ancestor with overflow:hidden also breaks sticky — neutralise
   the wrapper just in case it inherits something. */
body:has(.pi-kd-page) main,
.pi-kd-page,
.pi-home-redesign.pi-kd-page {
    overflow: visible !important;
}
.pi-kd-page .kd-subnav {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    background: #fff;
}
/* Section anchor offset needs to match the new sticky element
   (kd-subnav is ~50px tall) so links don't land behind it. */
.pi-kd-page section[id] { scroll-margin-top: 60px !important; }

/* Section heads — center the eyebrow + heading + intro paragraph
   across all v9 sections on both home and KD pages. */
.pi-v9-about-head,
.pi-v9-why-head,
.pi-v9-gallery-head,
.pi-v9-testi-head,
.pi-v9-sectors-head,
.pi-v9-kday-head,
.kd-about-head,
.kd-promise-head,
.kd-bento-head,
.kd-agenda-head {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.pi-v9-about-head .pi-v9-eyebrow,
.pi-v9-why-head .pi-v9-eyebrow,
.pi-v9-gallery-head .pi-v9-eyebrow,
.pi-v9-testi-head .pi-v9-eyebrow,
.pi-v9-sectors-head .pi-v9-eyebrow,
.pi-v9-kday-head .pi-v9-eyebrow,
.kd-about-head .pi-v9-eyebrow,
.kd-promise-head .pi-v9-eyebrow,
.kd-bento-head .pi-v9-eyebrow,
.kd-agenda-head .pi-v9-eyebrow {
    justify-content: center !important;
}
/* .pi-v9-sectors-head is a row with a heading on the left and a
   description on the right by default. Collapse it to a single
   centered column for this alignment fix. */
.pi-v9-sectors-head {
    display: block !important;
}

/* Eyebrow labels (the small caps above every section heading)
   bumped to read larger across home + KD pages. */
.pi-v9-eyebrow {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}
.pi-v9-eyebrow::before {
    width: 32px !important;
    height: 2px !important;
}
@media (max-width: 767.98px) {
    .pi-v9-eyebrow { font-size: .85rem !important; }
    .pi-v9-eyebrow::before { width: 26px !important; }
}

/* ============================================================
   Mobile header menu — open as an absolute overlay so it doesn't
   push the hero down or cause the browser to scroll back up when
   the burger is tapped while the user is mid-page.
   ============================================================ */
@media (max-width: 991.98px) {
    .pi-nav3 { position: relative !important; }
    .pi-nav3 .pi-nav3-row { flex-wrap: nowrap !important; }

    .pi-nav3 .pi-nav3-collapse {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: min(280px, 88vw) !important;
        background: #fff !important;
        box-shadow: 0 14px 32px rgba(20, 33, 61, 0.16) !important;
        border-top: 3px solid var(--pi-yellow, #FDB913) !important;
        border-radius: 0 0 12px 12px !important;
        padding: 0.4rem 0.65rem 0.75rem !important;
        max-height: calc(100vh - 72px) !important;
        max-height: calc(100svh - 72px) !important;
        overflow-y: auto !important;
        z-index: 1100 !important;
        flex-basis: auto !important;
        display: none !important;
        margin: 0 !important;
    }
    .pi-nav3 .pi-nav3-collapse.show,
    .pi-nav3 .pi-nav3-collapse.collapsing {
        display: block !important;
    }

    /* Tighter link rows inside the overlay */
    .pi-nav3 .pi-nav3-links { padding: 0 !important; margin: 0 !important; }
    .pi-nav3 .pi-nav3-links a {
        padding: 0.55rem 0.35rem !important;
        font-size: 0.88rem !important;
        line-height: 1.2 !important;
    }
    .pi-nav3 .pi-nav3-links .dropdown-menu {
        padding: 0.25rem 0 !important;
        font-size: 0.82rem !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        box-shadow: 0 6px 16px rgba(20,33,61,0.10) !important;
    }
    .pi-nav3 .pi-nav3-links .dropdown-item {
        padding: 0.45rem 0.8rem !important;
        font-size: 0.82rem !important;
    }
    .pi-nav3 .pi-nav3-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
        margin-top: 0.5rem !important;
    }
    .pi-nav3 .pi-nav3-actions .pi-nav3-btn {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.78rem !important;
    }
    .pi-nav3 .pi-nav3-actions .pi-nav3-btn i { font-size: 0.9rem !important; }
}

/* ============================================================
   GLOBAL TEXT-SIZE BUMP — +4px on h2 / h3 / p / button text
   per user request. max() ensures larger responsive headlines
   (e.g. hero clamp() sizes) don't shrink — only smaller text
   gets bumped up.
   ============================================================ */
h2 { font-size: max(calc(1.5rem + 4px), 1em) !important; }
h3 { font-size: max(calc(1.25rem + 4px), 1em) !important; }
p { font-size: calc(1rem + 4px) !important; }

/* Button text — bump the label only, not the button box (padding/height
   stay where they are; only font-size grows). */
button,
input[type="button"],
input[type="submit"],
.btn, .pi-btn, .pi-v9-btn,
.pi-speaker-btn, .kd-subnav-link {
    font-size: calc(0.9rem + 4px) !important;
}

/* Re-allow oversized hero headlines and section-head h2s to keep their
   responsive clamp() — these rules add 4px to the minimum but preserve
   the upper bound. */
.pi-v9-hero h1,
.pi-v9-hero h2 { font-size: clamp(calc(2.8rem + 4px), 9vw, 7.2rem) !important; }
.pi-v9-about-head h2,
.pi-v9-why-head h2,
.pi-v9-gallery-head h2,
.pi-v9-testi-head h2,
.kd-archive-hero h1,
.kd-about-head .kd-about-headline,
.kd-promise-head h2,
.kd-bento-head h2,
.kd-agenda-head h2 {
    font-size: clamp(calc(1.8rem + 4px), 4vw, 3.2rem) !important;
}

/* About heading — keep "World's Largest Poultry Exhibition" on a single
   line from tablet up (it fits the viewport; the 880px head box was what
   forced the wrap). Mobile (<=767.98px) keeps its natural wrapping. */
@media (min-width: 768px) {
    .pi-v9-about-head h2 { white-space: nowrap !important; }
}

/* Ribbon row — keep content on a single line; horizontal scroll on small screens */
.pi-v9-ribbon { overflow-x: auto !important; }
.pi-v9-ribbon::-webkit-scrollbar { display: none; }
.pi-v9-ribbon { scrollbar-width: none; }
.pi-v9-ribbon-row {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 1rem 1.5rem !important;
    font-size: 1rem !important;
    width: max-content;
    margin-inline: auto;
    padding-inline: 1rem;
}
.pi-v9-ribbon-row > span { flex-shrink: 0; }

/* ============================================================
   MOBILE TIGHTEN — undo the +4px text bump on small viewports
   and shrink padding/sizes across KD sections so the page reads
   appropriately on phones. Wins over the desktop !important rules
   above because it's later in the cascade AND inside a tighter
   media query (same specificity, source-order wins).
   ============================================================ */
@media (max-width: 767.98px) {
    /* Body text — back to a comfortable mobile size */
    p { font-size: .92rem !important; line-height: 1.55 !important; }
    h2 { font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important; }
    h3 { font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important; }

    /* Buttons — labels & padding both reduced */
    button, input[type="button"], input[type="submit"],
    .btn, .pi-btn, .pi-v9-btn, .pi-speaker-btn, .kd-subnav-link {
        font-size: .82rem !important;
    }
    .pi-v9-btn { padding: .6rem 1.2rem !important; }
    .pi-v9-btn--lg { padding: .65rem 1.3rem !important; font-size: .88rem !important; }
    .pi-v9-btn i { font-size: .9rem !important; }

    /* Hero — was clamp(2.8rem+4px, 9vw, 7.2rem); pull down on mobile */
    .pi-v9-hero h1,
    .pi-v9-hero h2 {
        font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important;
        line-height: 1.15 !important;
    }
    .pi-v9-hero h1 .year { display: inline-block; margin-top: .15rem; }
    .pi-v9-hero-lead {
        font-size: .9rem !important;
        line-height: 1.5 !important;
        color: #ffffff !important;
    }
    .pi-v9-hero-tag { font-size: .65rem !important; padding: .3rem .8rem !important; }

    /* All v9 section heads — was clamp(1.8rem+4px, 4vw, 3.2rem) */
    .pi-v9-about-head h2,
    .pi-v9-why-head h2,
    .pi-v9-gallery-head h2,
    .pi-v9-testi-head h2,
    .kd-archive-hero h1,
    .kd-about-head .kd-about-headline,
    .kd-promise-head h2,
    .kd-bento-head h2,
    .kd-agenda-head h2,
    .pi-v9-sectors-head h2 {
        font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    }
    .pi-v9-about-head p,
    .pi-v9-why-head p,
    .kd-promise-head p,
    .kd-bento-head p,
    .kd-agenda-head p { font-size: .88rem !important; }

    /* Sub-nav — already mostly mobile-friendly, tighten chips a hair */
    .kd-subnav-link {
        padding: .42rem .8rem !important;
        font-size: .72rem !important;
        letter-spacing: 0.03em !important;
    }
    .kd-subnav-dropdown a { font-size: .8rem !important; }

    /* About — editorial column, info cards */
    .kd-about { padding: 2.5rem 0 2rem !important; }
    .kd-about-lead { font-size: 1rem !important; }
    .kd-about-body-left p { font-size: .92rem !important; line-height: 1.6 !important; }
    .kd-about-pullquote p { font-size: .95rem !important; }
    .kd-about-info-card { padding: .8rem .9rem !important; gap: .7rem !important; }
    .kd-about-info-card .icon { width: 38px !important; height: 38px !important; font-size: 1.05rem !important; }
    .kd-about-info-card .val { font-size: .92rem !important; }
    .kd-about-register-lead { font-size: .92rem !important; }

    /* Speakers — card photo + body shrink */
    .pi-kd-speaker-card { padding: 1.2rem 1rem 1.3rem !important; }
    .pi-kd-speaker-photo { width: 200px !important; height: 230px !important; margin-bottom: 1rem !important; }
    .pi-kd-speaker-name { font-size: 1.02rem !important; }
    .pi-kd-speaker-role { font-size: .82rem !important; }
    .pi-kd-speaker-org  { font-size: .78rem !important; }
    .pi-kd-speaker-topic { font-size: .75rem !important; padding: .35rem .8rem !important; }

    /* Speaker presentation archive cards (different class set) */
    .pi-speaker-card .pi-speaker-name { font-size: 1rem !important; }
    .pi-speaker-card .pi-speaker-affil { font-size: .76rem !important; }
    .pi-speaker-card .pi-speaker-talk { font-size: .85rem !important; }
    .pi-speaker-btn { font-size: .72rem !important; padding: .48rem .85rem !important; }

    /* Agenda timeline */
    .kd-agenda { padding: 2.5rem 0 !important; }
    .kd-agenda-session-title { font-size: .82rem !important; }
    .kd-agenda-list li { padding: .7rem .9rem !important; }
    .kd-agenda-list .time { font-size: .72rem !important; min-width: 7rem !important; }
    .kd-agenda-list .body { font-size: .85rem !important; line-height: 1.45 !important; }

    /* KD Promise — image + 3 stacked items */
    .kd-promise { padding: 2.5rem 0 !important; }
    .kd-promise-item { padding: 1rem 1.05rem !important; gap: .75rem .85rem !important; }
    .kd-promise-item h3 { font-size: 1.05rem !important; }
    .kd-promise-item p  { font-size: .86rem !important; line-height: 1.5 !important; }
    .kd-promise-item-num { width: 38px !important; height: 38px !important; font-size: .82rem !important; }

    /* Bento timeline rows */
    .kd-bento { padding: 2.5rem 0 !important; }
    .kd-bento-step h3 { font-size: 1rem !important; }
    .kd-bento-step p  { font-size: .85rem !important; line-height: 1.5 !important; }
    .kd-bento-step-badge { font-size: .6rem !important; padding: .15rem .45rem !important; }

    /* What Happens prose */
    .kd-prose p { font-size: .92rem !important; line-height: 1.6 !important; }
    .kd-prose .kd-support-line { font-size: .78rem !important; }

    /* Testimonials — video & stat cards */
    .kd-video-card-label { font-size: .8rem !important; }
    .kd-video-card-quote { font-size: 1.1rem !important; }
    .kd-stat-card { padding: 1.1rem .9rem !important; }
    .kd-stat-card .stat-num { font-size: 2rem !important; }
    .kd-stat-card p { font-size: .82rem !important; }

    /* Gallery — tighten cards */
    .pi-v9-gallery-card { min-width: 220px !important; }
    .pi-v9-gallery-card .img { aspect-ratio: 16/11 !important; }

    /* Archive year tabs — phone-sized */
    .kd-archive-year-tabs a { padding: .3rem .7rem !important; font-size: .72rem !important; }

    /* Ribbon strip — stack vertically and center on mobile so the
       "Organised by IPEMA" / "Flagship Conference by IPEMA" item
       (always the first child) sits horizontally centered on its
       own line, with the rest of the facts stacked below it. */
    .pi-v9-ribbon { overflow-x: visible !important; }
    .pi-v9-ribbon-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        width: 100% !important;
        text-align: center !important;
        font-size: .85rem !important;
        gap: .5rem !important;
        padding-inline: 0 !important;
    }
    .pi-v9-ribbon-row > span { justify-content: center; }
    .pi-v9-ribbon-row .sep { display: none !important; }
    .pi-v9-ribbon-row i { font-size: 1.05rem !important; }
}

/* ============================================================
   CTA BANNER — light gradient sourced from the logo palette
   (warm cream → pale yellow → soft gold). No dark colours used.
   Text + buttons re-coloured so they remain readable on the
   lighter background.
   ============================================================ */
.pi-cta-banner {
    background: linear-gradient(135deg,
        #fffdf6 0%,
        #fff8e3 30%,
        #ffe88a 65%,
        #ffd86b 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 14s ease infinite !important;
    border-top: 4px solid #c49400 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
}
.pi-cta-banner::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 60%),
        radial-gradient(circle at 85% 80%, rgba(255, 216, 107, 0.5) 0%, transparent 55%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.pi-cta-banner > .container { position: relative; z-index: 1; }
.pi-cta-banner h2 {
    color: #1a1a1a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pi-cta-banner p {
    color: #3a2f00 !important;
}
.pi-cta-banner .pi-card-tag {
    background: rgba(196, 148, 0, 0.18) !important;
    color: #6e4f00 !important;
    border: 1px solid rgba(196, 148, 0, 0.32);
}
.pi-cta-banner .pi-btn-primary {
    background: #1a1a1a !important;
    color: #ffd86b !important;
    border-color: #1a1a1a !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.pi-cta-banner .pi-btn-primary:hover {
    background: #000000 !important;
    color: #ffe88a !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.pi-cta-banner .pi-btn-outline-light {
    border-color: #1a1a1a !important;
    color: #1a1a1a !important;
    background: rgba(255, 255, 255, 0.35) !important;
}
.pi-cta-banner .pi-btn-outline-light:hover {
    background: #1a1a1a !important;
    color: #ffd86b !important;
    border-color: #1a1a1a !important;
}

/* ============================================================
   SITE-WIDE TYPOGRAPHY LOCK — uniform h2/h3/p/button sizes
   across every page (+3px bump from previous uniform values).
   Hero h1 + button size modifiers are explicitly preserved.
   ============================================================ */
body h2 {
    font-size: clamp(calc(1.7rem + 3px), calc(3vw + 3px), calc(2.4rem + 3px)) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    font-weight: 800 !important;
}
body h3 {
    font-size: clamp(calc(1.15rem + 3px), calc(2vw + 3px), calc(1.4rem + 3px)) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
    font-weight: 800 !important;
}
body p {
    font-size: calc(1.05rem + 3px) !important;
    line-height: 1.7 !important;
}

/* Buttons — uniform default. --lg and --sm modifiers keep their relative sizing. */
body button,
body input[type="button"],
body input[type="submit"],
body .btn,
body .pi-btn,
body .pi-v9-btn,
body .pi-speaker-btn,
body .kd-subnav-link {
    font-size: calc(0.92rem + 3px) !important;
}
body .pi-v9-btn--lg { font-size: calc(1.05rem + 3px) !important; }
body .pi-v9-btn--sm,
body .pi-btn-sm { font-size: calc(0.82rem + 3px) !important; }

/* Hero headlines stay large — keep responsive clamp() floors */
body .pi-v9-hero h1,
body .pi-v9-hero h2 {
    font-size: clamp(calc(2rem + 3px), 5.5vw, calc(3.6rem + 3px)) !important;
}

/* ICONS — bump generic Bootstrap icons + section icon tiles +3px equivalent.
   Inline icons in buttons/text inherit from their parent font-size so they
   already grow with the text bump above. These rules cover the standalone
   icon tiles and small accent icons. */
body .bi { font-size: 1.15em; }
body .pi-v9-btn .bi { font-size: 1.05em; }
body .kd-subnav-link i { font-size: 1.15rem !important; }
body .pi-v9-eyebrow i { font-size: 1em; }

/* Specific icon tiles used in section cards — bump their inner glyph */
body .pi-ipema-focus-icon,
body .pi-about-mv-icon,
body .pi-ipema-fact-icon,
body .pi-about-fact > i,
body .pi-about-ipema-icon,
body .pi-about-ipema-list-icon,
body .pi-visitor-info-card .icon,
body .kd-bento-step-icon,
body .kd-promise-item-icon,
body .pi-about-step-marker i,
body .kd-about-info-card .icon {
    font-size: calc(1.2rem + 3px) !important;
}

/* ============================================================
   BUTTON SIZE TRIM — reduce by ~5px from the bumped sizes,
   and SPACING — section gaps, button breathing room, content
   padding throughout.
   ============================================================ */
/* Buttons: shrink down (reduce by ~5px from current +3 bump) */
body button,
body input[type="button"],
body input[type="submit"],
body .btn,
body .pi-btn,
body .pi-v9-btn,
body .pi-speaker-btn,
body .kd-subnav-link {
    font-size: 0.85rem !important;
}
body .pi-v9-btn--lg { font-size: 0.95rem !important; }
body .pi-v9-btn--sm,
body .pi-btn-sm { font-size: 0.75rem !important; }

/* Button breathing room — top + bottom margin on standalone button rows */
body .pi-v9-hero-actions,
body .kd-about-cta,
body .pi-about-story-cta,
body .pi-about-ipema-cta,
body .pi-exhibitors-why-actions,
body .pi-discover-card .pi-v9-btn,
body .text-center > .pi-v9-btn {
    margin-top: 0.6rem !important;
    margin-bottom: 0.6rem !important;
}

/* Section spacing — add vertical breathing room between sections */
body .pi-v9-about,
body .pi-v9-why,
body .pi-v9-gallery,
body .pi-v9-testi,
body .kd-about,
body .kd-promise,
body .kd-bento,
body .kd-agenda,
body .kd-testimonials,F
body .pi-ipema-about,
body .pi-ipema-focus-section,
body .pi-ipema-global,
body .pi-ipema-past,
body .pi-about-story,
body .pi-about-ipema,
body .pi-about-journey,
body .pi-exhibitors-why,
body .pi-exhibitors-layout,
body .pi-visitor-discover,
body .pi-section,
body .pi-section-sm {
    padding-top: clamp(3.5rem, 6vw, 5.5rem) !important;
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem) !important;
}

/* Mobile — moderate section padding */
@media (max-width: 767.98px) {
    body .pi-v9-about,
    body .pi-v9-why,
    body .pi-v9-gallery,
    body .pi-v9-testi,
    body .kd-about,
    body .kd-promise,
    body .kd-bento,
    body .kd-agenda,
    body .kd-testimonials,
    body .pi-ipema-about,
    body .pi-ipema-focus-section,
    body .pi-ipema-global,
    body .pi-ipema-past,
    body .pi-about-story,
    body .pi-about-ipema,
    body .pi-about-journey,
    body .pi-exhibitors-why,
    body .pi-exhibitors-layout,
    body .pi-visitor-discover,
    body .pi-section,
    body .pi-section-sm {
        padding-top: clamp(2.25rem, 7vw, 3rem) !important;
        padding-bottom: clamp(2.25rem, 7vw, 3rem) !important;
    }
}

/* Content padding — bump padding inside common cards so text has more
   breathing room. */
body .pi-about-mv-card,
body .pi-ipema-focus-card,
body .pi-ipema-about-fact,
body .pi-about-fact,
body .kd-about-info-card,
body .pi-visitor-info-card,
body .pi-about-aside-row,
body .pi-ipema-bearer-card,
body .pi-ipema-bearer-card--dark,
body .kd-promise-item,
body .kd-bento-step,
body .pi-discover-body,
body .pi-visitor-tips-card,
body .pi-exhibitors-layout-placeholder,
body .pi-about-ipema-list li {
    padding-top: calc(1.25rem + 4px) !important;
    padding-bottom: calc(1.25rem + 4px) !important;
}

/* Slightly more vertical rhythm between paragraphs */
body p { margin-bottom: 1.1rem; }
body p:last-child { margin-bottom: 0; }

/* Mobile — shrink the locked sizes proportionally so they still read on phones */
@media (max-width: 767.98px) {
    body h2 { font-size: clamp(calc(1.35rem + 3px), 5.5vw, calc(1.75rem + 3px)) !important; }
    body h3 { font-size: clamp(calc(1.05rem + 3px), 4.5vw, calc(1.2rem + 3px)) !important; }
    body p { font-size: calc(.94rem + 3px) !important; line-height: 1.6 !important; }
    body button, body .btn, body .pi-btn, body .pi-v9-btn { font-size: calc(.85rem + 3px) !important; }
    body .pi-v9-btn--lg { font-size: calc(.95rem + 3px) !important; }
    body .pi-v9-hero h1, body .pi-v9-hero h2 {
        font-size: clamp(calc(1.85rem + 3px), 7.5vw, calc(2.4rem + 3px)) !important;
    }
}

/* ============================================================
   NEWS DETAIL PAGES — v9 styling, typography & structure
   Applies site-wide to every /news/* page (78+ pages) that uses
   the .pi-news-hero shell. Scoped via :has() to body pages that
   contain a .pi-news-hero so it doesn't bleed into the index.
   ============================================================ */

/* ---- HERO: image fully visible, no crop ---- */
body:has(.pi-news-hero) .pi-news-hero {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%) !important;
    overflow: hidden;
}
body:has(.pi-news-hero) .pi-news-hero-bg {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: clamp(320px, 48vw, 560px) !important;
    max-height: 560px !important;
    background: #14161c;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
body:has(.pi-news-hero) .pi-news-hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;      /* full image, no crop */
    object-position: center center !important;
    background: #14161c;
    display: block;
}
body:has(.pi-news-hero) .pi-news-hero-overlay { display: none !important; }

body:has(.pi-news-hero) .pi-news-hero-content {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%) !important;
    border-top: 4px solid var(--v9-gold, #c49400) !important;
    color: #111 !important;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.25rem, 2vw, 1.75rem) !important;
    text-align: left !important;
    position: relative;
}

/* DESKTOP (>=768) — side-by-side layout:
   LEFT  = .pi-news-hero-content (inside .container)
   RIGHT = .pi-news-hero-bg (image)
   Mobile keeps the natural stacked order (image on top, content below). */
@media (min-width: 768px) {
    body:has(.pi-news-hero) .pi-news-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0 !important;
        min-height: 420px;
    }
    /* Bootstrap .container is the wrapper around the content — make it
       fill its grid cell, drop the Bootstrap centered max-width. */
    body:has(.pi-news-hero) .pi-news-hero > .container {
        order: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem) !important;
        display: flex !important;
        align-items: center !important;
    }
    body:has(.pi-news-hero) .pi-news-hero > .container > .pi-news-hero-content {
        background: transparent !important;
        border-top: 0 !important;
        padding: 0 !important;
        max-width: 560px !important;
        width: 100% !important;
    }
    body:has(.pi-news-hero) .pi-news-hero-bg {
        order: 2 !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        align-self: stretch !important;
    }
    body:has(.pi-news-hero) .pi-news-hero-bg img {
        height: 100% !important;
        min-height: 420px;
    }
}

body:has(.pi-news-hero) .pi-news-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    background: var(--v9-gold, #c49400) !important;
    color: #ffffff !important;
    padding: .35rem .9rem !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 8px 18px rgba(196, 148, 0, 0.30) !important;
    line-height: 1 !important;
}
body:has(.pi-news-hero) .pi-news-hero-badge i {
    font-size: .85em !important;
}

body:has(.pi-news-hero) .pi-news-hero-title {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem) !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 .65rem !important;
    text-shadow: none !important;
    text-align: left !important;
}
body:has(.pi-news-hero) .pi-news-hero-title .pi-text-highlight {
    color: var(--v9-red, #d72631) !important;
    background: none !important;
}

body:has(.pi-news-hero) .pi-news-hero-subtitle {
    font-size: clamp(.95rem, 1.4vw, 1.15rem) !important;
    line-height: 1.55 !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    margin: 0 0 1rem !important;
    text-align: left !important;
}

body:has(.pi-news-hero) .pi-news-hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .6rem 1.2rem !important;
    align-items: center !important;
    text-align: left !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    margin: 0 !important;
}
body:has(.pi-news-hero) .pi-news-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}
body:has(.pi-news-hero) .pi-news-hero-meta i {
    color: var(--v9-gold, #c49400) !important;
    font-size: .92rem !important;
}

/* ---- BREADCRUMB ---- */
body:has(.pi-news-hero) .pi-breadcrumb {
    background: #fafaf6 !important;
    padding: .85rem 0 !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
}
body:has(.pi-news-hero) .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .85rem !important; }
body:has(.pi-news-hero) .pi-breadcrumb .breadcrumb-item a {
    color: var(--v9-gold-deep, #6e4f00) !important;
    text-decoration: none !important;
}
body:has(.pi-news-hero) .pi-breadcrumb .breadcrumb-item.active {
    color: var(--v9-ink-soft, #5a5a5a) !important;
}

/* ---- QUICK FACTS STRIP (legacy, hidden — markup moved inside hero) ---- */
body:has(.pi-news-hero) .pi-news-facts-strip {
    display: none !important;
}

/* ---- FACTS GRID — now inside .pi-news-hero-content, below .pi-news-hero-meta ---- */
body:has(.pi-news-hero) .pi-news-hero-content .pi-news-facts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem .85rem !important;
    margin-top: 1.25rem !important;
    max-width: 100% !important;
}
@media (max-width: 991.98px) {
    body:has(.pi-news-hero) .pi-news-hero-content .pi-news-facts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 479.98px) {
    body:has(.pi-news-hero) .pi-news-hero-content .pi-news-facts-grid {
        grid-template-columns: 1fr !important;
    }
}
body:has(.pi-news-hero) .pi-news-hero-content .pi-news-fact-item {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(196, 148, 0, 0.25) !important;
    border-radius: 10px !important;
    padding: .55rem .7rem !important;
    box-shadow: 0 4px 12px rgba(20, 33, 61, 0.04);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    backdrop-filter: blur(4px);
}
body:has(.pi-news-hero) .pi-news-hero-content .pi-news-fact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 33, 61, 0.10);
    border-color: rgba(196, 148, 0, 0.50) !important;
    background: #ffffff !important;
}
body:has(.pi-news-hero) .pi-news-hero-content .pi-news-fact-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    font-size: .92rem !important;
}
body:has(.pi-news-hero) .pi-news-hero-content .pi-news-fact-label {
    font-size: .55rem !important;
}
body:has(.pi-news-hero) .pi-news-hero-content .pi-news-fact-text strong {
    font-size: .8rem !important;
}
body:has(.pi-news-hero) .pi-news-fact-text {
    display: flex !important;
    flex-direction: column !important;
    gap: .15rem !important;
    min-width: 0 !important;
}
body:has(.pi-news-hero) .pi-news-fact-label {
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    line-height: 1.2 !important;
}
body:has(.pi-news-hero) .pi-news-fact-text strong {
    font-size: .92rem !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    line-height: 1.3 !important;
}

/* ---- ARTICLE BODY ---- */
body:has(.pi-news-hero) .pi-news-detail {
    color: var(--v9-ink, #111);
}
body:has(.pi-news-hero) .pi-news-lead p {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 2rem !important;
    padding: 1.25rem 1.4rem !important;
    background: linear-gradient(180deg, #fffdf6 0%, #fff8e3 100%);
    border-left: 4px solid var(--v9-gold, #c49400);
    border-radius: 0 12px 12px 0;
}
body:has(.pi-news-hero) .pi-news-lead strong {
    color: var(--v9-ink, #111);
    font-weight: 800;
}

/* Content blocks with numbered headers */
body:has(.pi-news-hero) .pi-news-block {
    margin: 0 0 2.25rem !important;
}
body:has(.pi-news-hero) .pi-news-block-header {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 0 1rem !important;
}
body:has(.pi-news-hero) .pi-news-block-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%) !important;
    color: #1a1a1a !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    letter-spacing: -.02em !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 14px rgba(196, 148, 0, 0.32);
}
body:has(.pi-news-hero) .pi-news-block-header h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem) !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em !important;
}
body:has(.pi-news-hero) .pi-news-block p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    margin: 0 0 1rem !important;
}
body:has(.pi-news-hero) .pi-news-block strong {
    color: var(--v9-ink, #111);
    font-weight: 800;
}

/* Quote */
body:has(.pi-news-hero) .pi-news-quote {
    position: relative;
    margin: 1.5rem 0 !important;
    padding: 1.5rem 1.65rem 1.5rem 3.25rem !important;
    background: linear-gradient(180deg, #fffaea 0%, #fff3c4 100%) !important;
    border: 1px solid rgba(196, 148, 0, 0.25) !important;
    border-radius: 14px !important;
    color: var(--v9-ink, #111) !important;
}
body:has(.pi-news-hero) .pi-news-quote > i.bi-quote {
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 1.85rem;
    color: var(--v9-gold, #c49400);
    line-height: 1;
}
body:has(.pi-news-hero) .pi-news-quote p {
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
    font-style: italic;
    font-weight: 500;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 .65rem !important;
}
body:has(.pi-news-hero) .pi-news-quote cite {
    font-size: .82rem !important;
    font-weight: 800;
    font-style: normal;
    color: var(--v9-gold-deep, #6e4f00) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Featured image (inside article body) */
body:has(.pi-news-hero) .pi-news-featured-img {
    position: relative;
    margin: 1.75rem 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(20, 33, 61, 0.10);
    background: #14161c;
}
body:has(.pi-news-hero) .pi-news-featured-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}
body:has(.pi-news-hero) .pi-news-img-caption {
    display: block !important;
    background: rgba(0, 0, 0, 0.78) !important;
    color: #fff !important;
    padding: .65rem 1rem !important;
    font-size: .8rem !important;
    line-height: 1.4 !important;
    font-style: italic;
}
body:has(.pi-news-hero) .pi-news-img-caption i { color: var(--v9-gold, #ffd86b) !important; }

/* ---- SIDEBAR — more breathing room inside cards ---- */
body:has(.pi-news-hero) .pi-news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 100px;
}
body:has(.pi-news-hero) .pi-news-sidebar-card {
    border-radius: 14px !important;
    border: 1px solid rgba(20, 33, 61, 0.08) !important;
    box-shadow: 0 8px 22px rgba(20, 33, 61, 0.06) !important;
    overflow: hidden !important;
    height: auto !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-card-header {
    background: linear-gradient(135deg, #fffaea 0%, #fff3c4 100%) !important;
    color: var(--v9-ink, #111) !important;
    padding: 1rem 1.35rem !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(196, 148, 0, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-card-header i {
    color: var(--v9-gold, #c49400) !important;
    font-size: 1rem !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-card-body {
    padding: 1.4rem 1.35rem !important;
}

/* Sidebar rows — more vertical space between each row */
body:has(.pi-news-hero) .pi-news-sidebar-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: .85rem !important;
    padding: .85rem 0 !important;
    border-bottom: 1px dashed rgba(196, 148, 0, 0.25) !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-row:first-child {
    padding-top: 0 !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-row > i {
    color: var(--v9-gold, #c49400) !important;
    flex-shrink: 0 !important;
    margin-top: .15rem !important;
    font-size: 1.05rem !important;
    width: 28px;
    text-align: center;
}
body:has(.pi-news-hero) .pi-news-sidebar-row > div {
    display: flex !important;
    flex-direction: column !important;
    gap: .2rem !important;
    min-width: 0 !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-label {
    font-size: .65rem !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-row strong {
    color: var(--v9-ink, #111) !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
}

/* Highlight checklist — more vertical breathing room */
body:has(.pi-news-hero) .pi-news-sidebar-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: .7rem !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    padding: .75rem 0 !important;
    border-bottom: 1px dashed rgba(196, 148, 0, 0.25) !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-list li:first-child { padding-top: 0 !important; }
body:has(.pi-news-hero) .pi-news-sidebar-list li:last-child { padding-bottom: 0 !important; border-bottom: none !important; }
body:has(.pi-news-hero) .pi-news-sidebar-list li i {
    color: var(--v9-gold, #c49400) !important;
    flex-shrink: 0 !important;
    margin-top: .2rem !important;
    font-size: 1rem !important;
}

/* Sidebar CTA card — more breathing room */
body:has(.pi-news-hero) .pi-news-sidebar-cta {
    padding: 1.65rem 1.4rem !important;
    text-align: center !important;
    background: linear-gradient(180deg, #fffaea 0%, #fff3c4 100%) !important;
    border: 2px solid var(--v9-gold, #c49400) !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-cta-icon {
    font-size: 2rem !important;
    color: var(--v9-gold-deep, #6e4f00) !important;
    margin-bottom: .65rem !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-cta h4 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 .25rem !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-cta p {
    font-size: .82rem !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    margin: 0 0 .9rem !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-cta-date {
    margin: 0 0 1.1rem !important;
    padding: .5rem .75rem !important;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
body:has(.pi-news-hero) .pi-news-sidebar-cta-date strong {
    font-size: .92rem !important;
    color: var(--v9-ink, #111) !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-cta-date span {
    font-size: .75rem !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
}
body:has(.pi-news-hero) .pi-news-sidebar-cta .pi-btn { margin-bottom: .5rem !important; }
body:has(.pi-news-hero) .pi-news-sidebar-cta .pi-btn:last-of-type { margin-bottom: 0 !important; }

/* ---- ARTICLE CONTENT — more spacing between blocks, paragraphs ---- */
body:has(.pi-news-hero) .pi-news-detail {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 3.5vw, 3rem);
}
body:has(.pi-news-hero) .pi-news-lead p {
    margin: 0 !important;
}
body:has(.pi-news-hero) .pi-news-block {
    margin: 0 !important;
}
body:has(.pi-news-hero) .pi-news-block > * + * {
    margin-top: 1.15rem !important;
}
body:has(.pi-news-hero) .pi-news-block p + p {
    margin-top: 1rem !important;
}
body:has(.pi-news-hero) .pi-news-featured-img {
    margin: 0 !important;
}
body:has(.pi-news-hero) .pi-news-quote {
    margin: 0 !important;
}

/* Push sidebar sticky position below the navbar */
@media (max-width: 991.98px) {
    body:has(.pi-news-hero) .pi-news-sidebar {
        position: static;
        top: auto;
    }
}

/* ---- NEWS CTA BANNER — light gold gradient, dark readable text.
       Fixes invisible-text bug caused by the site-wide
       p { color: var(--k-ink) !important } lock at line 6839. ---- */
body:has(.pi-news-hero) .pi-news-cta-banner {
    background: linear-gradient(135deg, #fffdf6 0%, #fff8e3 35%, #ffe88a 75%, #ffd86b 100%) !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(196, 148, 0, 0.32) !important;
    box-shadow: 0 14px 32px rgba(196, 148, 0, 0.18) !important;
    padding: 1.85rem 2rem !important;
    border-radius: 16px !important;
}
body:has(.pi-news-hero) .pi-news-cta-banner::before {
    background: radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 60%) !important;
}
body:has(.pi-news-hero) .pi-news-cta-content h3 {
    color: var(--v9-ink, #1a1a1a) !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    margin: 0 0 .35rem !important;
    line-height: 1.25 !important;
}
body:has(.pi-news-hero) .pi-news-cta-content p {
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn-primary {
    background: #1a1a1a !important;
    color: #ffd86b !important;
    border: 1px solid #1a1a1a !important;
}
body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn-primary:hover {
    background: #000 !important;
    color: #ffe88a !important;
}
body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn-dark {
    background: transparent !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
}
body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn-dark:hover {
    background: #1a1a1a !important;
    color: #ffd86b !important;
}

/* ---- Mobile: reduce banner size ---- */
@media (max-width: 767.98px) {
    body:has(.pi-news-hero) .pi-news-cta-banner {
        padding: 1.1rem 1.15rem !important;
        gap: .85rem 1rem !important;
        border-radius: 12px !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-content h3 {
        font-size: 1rem !important;
        margin: 0 0 .25rem !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-content p {
        font-size: .8rem !important;
        line-height: 1.4 !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: .5rem !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn {
        width: 100% !important;
        font-size: .78rem !important;
        padding: .5rem 1rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Mobile polish */
@media (max-width: 767.98px) {
    body:has(.pi-news-hero) .pi-news-hero-bg {
        height: clamp(220px, 60vw, 320px) !important;
    }
    body:has(.pi-news-hero) .pi-news-hero-title {
        font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important;
        line-height: 1.2 !important;
    }
    body:has(.pi-news-hero) .pi-news-hero-subtitle {
        font-size: .9rem !important;
    }
    body:has(.pi-news-hero) .pi-news-hero-meta span {
        font-size: .68rem !important;
        letter-spacing: .04em !important;
    }
    body:has(.pi-news-hero) .pi-news-hero-badge {
        font-size: .62rem !important;
        padding: .3rem .75rem !important;
        letter-spacing: .08em !important;
    }
    body:has(.pi-news-hero) .pi-news-fact-item {
        padding: .75rem .85rem !important;
        gap: .65rem !important;
    }
    body:has(.pi-news-hero) .pi-news-fact-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.05rem !important;
    }
    body:has(.pi-news-hero) .pi-news-fact-text strong {
        font-size: .85rem !important;
    }
    body:has(.pi-news-hero) .pi-news-lead p {
        font-size: 1rem !important;
        padding: 1rem 1.1rem !important;
    }
    body:has(.pi-news-hero) .pi-news-block-number {
        width: 38px !important;
        height: 38px !important;
        font-size: .92rem !important;
    }
    body:has(.pi-news-hero) .pi-news-block-header h2 {
        font-size: 1.15rem !important;
    }
    body:has(.pi-news-hero) .pi-news-quote {
        padding: 1.25rem 1.25rem 1.25rem 2.85rem !important;
    }
    body:has(.pi-news-hero) .pi-news-quote p {
        font-size: .95rem !important;
    }

    /* ---- Mobile: extra spacing INSIDE article content ---- */
    body:has(.pi-news-hero) .pi-news-detail {
        gap: 1.5rem !important;
    }
    body:has(.pi-news-hero) .pi-news-detail .pi-section,
    body:has(.pi-news-hero) .pi-news-detail .container,
    body:has(.pi-news-hero) .pi-news-detail .row {
        --bs-gutter-x: 0;
    }
    body:has(.pi-news-hero) .pi-news-block {
        padding: 1.1rem 1.15rem !important;
        background: #ffffff;
        border: 1px solid rgba(20, 33, 61, 0.06);
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(20, 33, 61, 0.04);
    }
    body:has(.pi-news-hero) .pi-news-block > * + * {
        margin-top: 1rem !important;
    }
    body:has(.pi-news-hero) .pi-news-block-header {
        gap: .75rem !important;
        margin: 0 0 .85rem !important;
    }
    body:has(.pi-news-hero) .pi-news-block-number {
        width: 34px !important;
        height: 34px !important;
        font-size: .82rem !important;
        border-radius: 10px !important;
    }
    body:has(.pi-news-hero) .pi-news-block-header h2 {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
    }
    body:has(.pi-news-hero) .pi-news-block p {
        font-size: .92rem !important;
        line-height: 1.65 !important;
    }
    body:has(.pi-news-hero) .pi-news-block p + p {
        margin-top: .85rem !important;
    }
    body:has(.pi-news-hero) .pi-news-lead p {
        font-size: .95rem !important;
        line-height: 1.6 !important;
        padding: 1rem 1.1rem !important;
        border-radius: 0 10px 10px 0;
    }
    body:has(.pi-news-hero) .pi-news-featured-img {
        margin: 0 !important;
        border-radius: 12px !important;
    }
    body:has(.pi-news-hero) .pi-news-img-caption {
        font-size: .72rem !important;
        padding: .5rem .75rem !important;
    }
    body:has(.pi-news-hero) .pi-news-quote {
        padding: 1.1rem 1.1rem 1.1rem 2.5rem !important;
        border-radius: 10px !important;
    }
    body:has(.pi-news-hero) .pi-news-quote > i.bi-quote {
        font-size: 1.4rem !important;
        left: .85rem !important;
        top: .85rem !important;
    }
    body:has(.pi-news-hero) .pi-news-quote p {
        font-size: .9rem !important;
        line-height: 1.55 !important;
    }
    body:has(.pi-news-hero) .pi-news-quote cite {
        font-size: .72rem !important;
    }

    /* ---- Mobile: shrink CTA banner + buttons further ---- */
    body:has(.pi-news-hero) .pi-news-cta-banner {
        padding: .9rem 1rem !important;
        gap: .65rem !important;
        border-radius: 10px !important;
        flex-direction: column !important;
        text-align: center !important;
        align-items: stretch !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-content {
        flex: 1 1 auto !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-content h3 {
        font-size: .92rem !important;
        margin: 0 0 .2rem !important;
        line-height: 1.25 !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-content p {
        font-size: .72rem !important;
        line-height: 1.35 !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: .4rem !important;
        margin: 0 !important;
    }
    body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn,
    body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn-primary,
    body:has(.pi-news-hero) .pi-news-cta-actions .pi-btn-dark {
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 auto !important;
        font-size: .72rem !important;
        padding: .42rem .85rem !important;
        text-align: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
    }

    /* ---- Mobile: shrink Share section buttons ---- */
    body:has(.pi-news-hero) .pi-news-share {
        flex-wrap: wrap;
        gap: .55rem !important;
        margin-top: 1rem !important;
    }
    body:has(.pi-news-hero) .pi-news-share-label {
        font-size: .72rem !important;
    }
    body:has(.pi-news-hero) .pi-news-share-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: .85rem !important;
    }

    /* ---- Mobile: shrink Sidebar CTA buttons ---- */
    body:has(.pi-news-hero) .pi-news-sidebar-cta .pi-btn {
        font-size: .76rem !important;
        padding: .45rem .85rem !important;
    }
}

/* ============================================================
   ARTICLE DETAIL PAGES — v9 styling, typography & structure
   Applies site-wide to every /articles/* detail page (153+ pages)
   that uses <article class="pi-report">. Scoped via :has().
   ============================================================ */

/* Page background to lift the white article shell */
body:has(.pi-report) {
    background: linear-gradient(180deg, #fffdf6 0%, #fafaf6 100%) !important;
}

/* Rebuild .pi-page-header as a v9 cream banner strip (the dark-bg
   white-text default is overridden by site-wide color locks to dark
   ink — invisible. Switch to LIGHT bg + dark text). */
body:has(.pi-report) .pi-page-header {
    display: block !important;
    background: linear-gradient(135deg, #fffdf6 0%, #fff8e3 35%, #ffe88a 75%, #ffd86b 100%) !important;
    color: var(--v9-ink, #111) !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem) !important;
    text-align: center !important;
    border-top: 4px solid var(--v9-gold, #c49400) !important;
    border-bottom: 4px solid var(--v9-gold, #c49400) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
}
body:has(.pi-report) .pi-page-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
body:has(.pi-report) .pi-page-header > .container {
    position: relative !important;
    z-index: 1 !important;
    max-width: 900px !important;
}
body:has(.pi-report) .pi-page-header h1 {
    color: var(--v9-ink, #111) !important;
    font-size: clamp(1.45rem, 3.2vw, 2.4rem) !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 .65rem !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body:has(.pi-report) .pi-page-header p {
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-size: clamp(.95rem, 1.4vw, 1.15rem) !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    margin: 0 auto !important;
    max-width: 700px !important;
}

/* Article wrapper — v9 card shell with gold accent */
.pi-report {
    max-width: 900px;
    margin: clamp(2rem, 4vw, 3rem) auto !important;
    background: #ffffff !important;
    border: 1px solid rgba(196, 148, 0, 0.18) !important;
    border-top: 4px solid var(--v9-gold, #c49400) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 48px rgba(20, 33, 61, 0.10), 0 4px 12px rgba(20, 33, 61, 0.04) !important;
    padding: clamp(1.85rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem) !important;
}

/* ---- REPORT HERO — full image visible, no crop ---- */
.pi-report .pi-report-hero {
    position: relative !important;
    width: 100% !important;
    height: clamp(280px, 42vw, 480px) !important;
    background: #14161c !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 0 2rem !important;
    box-shadow: 0 14px 32px rgba(20, 33, 61, 0.10);
}
.pi-report .pi-report-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;        /* full photo, no crop */
    object-position: center !important;
    background: #14161c !important;
    display: block !important;
}
.pi-report .pi-report-hero-overlay {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.92) 100%) !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem) !important;
    color: #fff !important;
}
.pi-report .pi-report-hero-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: var(--v9-gold, #c49400) !important;
    color: #fff !important;
    padding: .3rem .8rem !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    margin-bottom: .75rem !important;
    box-shadow: 0 6px 14px rgba(196, 148, 0, 0.32) !important;
    line-height: 1 !important;
}
.pi-report .pi-report-hero-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ---- BREADCRUMB ---- */
body:has(.pi-report) .pi-breadcrumb {
    background: #fafaf6 !important;
    padding: .85rem 0 !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
}
body:has(.pi-report) .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .85rem !important; }
body:has(.pi-report) .pi-breadcrumb .breadcrumb-item a { color: var(--v9-gold-deep, #6e4f00) !important; text-decoration: none !important; }
body:has(.pi-report) .pi-breadcrumb .breadcrumb-item.active { color: var(--v9-ink-soft, #5a5a5a) !important; }

/* ---- FACTS STRIP ---- */
.pi-report .pi-report-facts {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    margin: 0 0 2rem !important;
}
@media (max-width: 767.98px) {
    .pi-report .pi-report-facts {
        grid-template-columns: 1fr !important;
    }
}
.pi-report .pi-report-fact {
    background: linear-gradient(180deg, #fffdf6 0%, #fff8e3 100%) !important;
    border: 1px solid rgba(196, 148, 0, 0.22) !important;
    border-radius: 14px !important;
    padding: 1rem 1.15rem !important;
    box-shadow: 0 8px 22px rgba(20, 33, 61, 0.05);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pi-report .pi-report-fact:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(20, 33, 61, 0.10);
    border-color: rgba(196, 148, 0, 0.45) !important;
}
.pi-report .pi-report-fact-label {
    display: block !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    margin-bottom: .35rem !important;
    line-height: 1.2 !important;
}
.pi-report .pi-report-fact-value {
    font-size: .95rem !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    line-height: 1.35 !important;
}

/* ---- NUMBERED SECTION BLOCKS with alternating cream/white rhythm ---- */
.pi-report .pi-report-section {
    display: flex !important;
    gap: 1.25rem !important;
    align-items: flex-start !important;
    background: #fafaf6 !important;
    border: 1px solid rgba(20, 33, 61, 0.06) !important;
    border-radius: 14px !important;
    padding: 1.5rem 1.65rem !important;
    margin: 0 0 1.25rem !important;
    box-shadow: 0 6px 18px rgba(20, 33, 61, 0.04);
}
.pi-report .pi-report-section:nth-of-type(even) {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%) !important;
}
.pi-report .pi-report-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%) !important;
    color: #1a1a1a !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    letter-spacing: -.02em !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 14px rgba(196, 148, 0, 0.30);
}
.pi-report .pi-report-section-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.pi-report .pi-report-section-body h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.55rem) !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    margin: .15rem 0 .85rem !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em !important;
}
.pi-report .pi-report-section-body p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    margin: 0 0 .95rem !important;
}
.pi-report .pi-report-section-body p:last-child { margin-bottom: 0 !important; }
.pi-report .pi-report-section-body strong {
    color: var(--v9-ink, #111) !important;
    font-weight: 800 !important;
}
.pi-report .pi-report-section-body ul,
.pi-report .pi-report-section-body ol {
    margin: 0 0 .95rem !important;
    padding-left: 1.25rem !important;
}
.pi-report .pi-report-section-body li {
    font-size: .96rem !important;
    line-height: 1.65 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    margin-bottom: .35rem !important;
}

/* ---- CALLOUT / QUOTE ---- */
.pi-report .pi-report-callout {
    background: linear-gradient(180deg, #fffaea 0%, #fff3c4 100%) !important;
    border: 1px solid rgba(196, 148, 0, 0.32) !important;
    border-left: 4px solid var(--v9-gold, #c49400) !important;
    border-radius: 14px !important;
    padding: 1.4rem 1.6rem !important;
    margin: 0 0 1.5rem !important;
    box-shadow: 0 8px 22px rgba(196, 148, 0, 0.12);
}
.pi-report .pi-report-callout blockquote {
    font-size: 1.05rem !important;
    font-style: italic !important;
    line-height: 1.55 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 .55rem !important;
    padding: 0 !important;
    border: 0 !important;
    font-weight: 500;
}
.pi-report .pi-report-callout cite {
    display: block !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    font-style: normal !important;
    color: var(--v9-gold-deep, #6e4f00) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

/* Sign-off with IPEMA logo at the start of the box */
.pi-report .pi-article-signoff {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
    margin-top: 2rem !important;
    padding: 1.25rem 1.4rem !important;
    border: 1px solid rgba(196, 148, 0, 0.22) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fffdf6 0%, #fff8e3 100%) !important;
}
.pi-report .pi-article-signoff-logo {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    object-fit: contain;
    display: block;
}

/* ---- PARTNERS GRID ---- */
.pi-report .pi-report-partners {
    background: #fafaf6 !important;
    border: 1px solid rgba(20, 33, 61, 0.07) !important;
    border-radius: 14px !important;
    padding: 1.25rem 1.4rem !important;
    margin: 0 0 1.5rem !important;
}
.pi-report .pi-report-partners-label {
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    margin-bottom: .75rem !important;
}
.pi-report .pi-report-partners-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
}
.pi-report .pi-report-partner {
    display: inline-block !important;
    background: #ffffff !important;
    border: 1px solid rgba(196, 148, 0, 0.32) !important;
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    padding: .35rem .75rem !important;
    border-radius: 999px !important;
    line-height: 1.3;
}

/* ---- MOBILE polish for article detail ---- */
@media (max-width: 767.98px) {
    .pi-report .pi-report-hero {
        height: clamp(200px, 55vw, 280px) !important;
        border-radius: 12px !important;
        margin: 0 0 1.5rem !important;
    }
    .pi-report .pi-report-hero-title {
        font-size: clamp(1.05rem, 5.2vw, 1.4rem) !important;
        line-height: 1.25 !important;
    }
    .pi-report .pi-report-hero-kicker {
        font-size: .58rem !important;
        padding: .25rem .65rem !important;
        letter-spacing: .08em !important;
    }
    .pi-report .pi-report-fact { padding: .8rem .95rem !important; }
    .pi-report .pi-report-fact-value { font-size: .88rem !important; }
    .pi-report .pi-report-section {
        padding: 1.1rem 1.15rem !important;
        gap: .85rem !important;
        border-radius: 12px !important;
    }
    .pi-report .pi-report-number {
        width: 38px !important;
        height: 38px !important;
        font-size: .92rem !important;
    }
    .pi-report .pi-report-section-body h2 { font-size: 1.05rem !important; }
    .pi-report .pi-report-section-body p { font-size: .92rem !important; line-height: 1.65 !important; }
    .pi-report .pi-report-section-body li { font-size: .88rem !important; }
    .pi-report .pi-report-callout {
        padding: 1.15rem 1.2rem !important;
        border-radius: 12px !important;
    }
    .pi-report .pi-report-callout blockquote { font-size: .95rem !important; }
}

/* ============================================================
   ARTICLE DETAIL — .pi-article-modern variant (33 pages)
   e.g. AzollaFeeding, MonthlyRoundup*, ShellShocked, etc.
   Visual goal: match the v9 polish of IPEMA / News / Visitors —
   readable hero with title, breadcrumb strip, alternating section
   background, v9 typography, gold accents.
   ============================================================ */

/* Page background — soft cream to lift the white article card */
body:has(.pi-article-modern) {
    background: linear-gradient(180deg, #fffdf6 0%, #fafaf6 100%) !important;
}

/* ---- HERO: rebuild .pi-page-header as a v9 banner strip ---- */
body:has(.pi-article-modern) .pi-page-header {
    display: block !important;
    background: linear-gradient(135deg, #fffdf6 0%, #fff8e3 35%, #ffe88a 75%, #ffd86b 100%) !important;
    color: var(--v9-ink, #111) !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem) !important;
    text-align: center !important;
    border-top: 4px solid var(--v9-gold, #c49400) !important;
    border-bottom: 4px solid var(--v9-gold, #c49400) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
}
body:has(.pi-article-modern) .pi-page-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 60%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
body:has(.pi-article-modern) .pi-page-header > .container {
    position: relative !important;
    z-index: 1 !important;
    max-width: 900px !important;
}
body:has(.pi-article-modern) .pi-page-header h1 {
    color: var(--v9-ink, #111) !important;
    font-size: clamp(1.45rem, 3.2vw, 2.4rem) !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    margin: 0 0 .65rem !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body:has(.pi-article-modern) .pi-page-header p {
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-size: clamp(.95rem, 1.4vw, 1.15rem) !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    margin: 0 auto !important;
    max-width: 700px !important;
}

/* Breadcrumb */
body:has(.pi-article-modern) .pi-breadcrumb {
    background: #fafaf6 !important;
    padding: .85rem 0 !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
}
body:has(.pi-article-modern) .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .85rem !important; }
body:has(.pi-article-modern) .pi-breadcrumb .breadcrumb-item a { color: var(--v9-gold-deep, #6e4f00) !important; text-decoration: none !important; }
body:has(.pi-article-modern) .pi-breadcrumb .breadcrumb-item.active { color: var(--v9-ink-soft, #5a5a5a) !important; }

/* Article wrapper — strong card shell with thicker shadow,
   gold accent border-top to match the v9 system */
.pi-article-modern {
    background: #ffffff !important;
    border: 1px solid rgba(196, 148, 0, 0.18) !important;
    border-top: 4px solid var(--v9-gold, #c49400) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 48px rgba(20, 33, 61, 0.10), 0 4px 12px rgba(20, 33, 61, 0.04) !important;
    padding: clamp(1.85rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem) !important;
    margin-top: clamp(2rem, 4vw, 3rem) !important;
    margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* Meta row */
.pi-article-modern .pi-article-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .55rem .9rem !important;
    margin: 0 0 1.5rem !important;
    padding: 0 0 1rem !important;
    border-bottom: 1px dashed rgba(196, 148, 0, 0.32) !important;
}
.pi-article-modern .pi-article-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    line-height: 1.2 !important;
}
.pi-article-modern .pi-article-meta span i {
    color: var(--v9-gold, #c49400) !important;
    font-size: .9em !important;
}

/* Featured image — full visible, no crop */
.pi-article-modern .pi-article-featured {
    margin: 0 0 1.75rem !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #14161c;
    box-shadow: 0 10px 26px rgba(20, 33, 61, 0.08);
}
.pi-article-modern .pi-article-featured .pi-article-img,
.pi-article-modern .pi-article-featured img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Monthly round-up — keep floated IPEMA logo (override v9 full-bleed featured above) */
.pi-monthly-roundup.pi-article-modern .pi-article-featured {
    float: left !important;
    max-width: 140px !important;
    width: auto !important;
    margin: 0 1.75rem 1rem 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
}
.pi-monthly-roundup.pi-article-modern .pi-article-featured .pi-article-img,
.pi-monthly-roundup.pi-article-modern .pi-article-featured img {
    width: 140px !important;
    max-width: 140px !important;
    height: 140px !important;
    max-height: none !important;
    object-fit: contain !important;
    background: transparent !important;
    margin: 0 !important;
}
.pi-monthly-roundup.pi-article-modern .pi-article-intro {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pi-monthly-roundup.pi-article-modern .pi-article-content .pi-article-section:first-of-type {
    clear: both;
}

/* Article content / intro */
.pi-article-modern .pi-article-content {
    color: var(--v9-ink, #111);
}
.pi-article-modern .pi-article-intro {
    background: linear-gradient(180deg, #fffdf6 0%, #fff8e3 100%) !important;
    border-left: 4px solid var(--v9-gold, #c49400) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 1.25rem 1.4rem !important;
    margin: 0 0 1.85rem !important;
}
.pi-article-modern .pi-article-intro p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 !important;
}
.pi-article-modern .pi-article-intro strong {
    color: var(--v9-ink, #111) !important;
    font-weight: 800 !important;
}

/* Date pill at top of each section — REMOVED per request (both
   desktop + mobile) */
.pi-article-modern .pi-date-pill,
.pi-article-modern .pi-article-section .pi-date-pill {
    display: none !important;
}

/* Section blocks — alternating cream/white background rhythm so
   each section reads as its own panel, matching the v9 system. */
.pi-article-modern .pi-article-section {
    margin: 0 0 1.5rem !important;
    padding: 1.4rem 1.5rem 1.5rem !important;
    background: #fafaf6 !important;
    border: 1px solid rgba(20, 33, 61, 0.06) !important;
    border-radius: 14px !important;
    position: relative;
}
.pi-article-modern .pi-article-section:nth-of-type(even) {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%) !important;
}
.pi-article-modern .pi-article-section h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.55rem) !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em !important;
    margin: .55rem 0 .85rem !important;
    padding-bottom: .55rem !important;
    border-bottom: 1px dashed rgba(196, 148, 0, 0.30) !important;
}
.pi-article-modern .pi-article-section h3 {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    margin: 1.1rem 0 .55rem !important;
    line-height: 1.3 !important;
}
.pi-article-modern .pi-article-section p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    margin: 0 0 .95rem !important;
}
.pi-article-modern .pi-article-section p:last-child { margin-bottom: 0 !important; }
.pi-article-modern .pi-article-section strong {
    color: var(--v9-ink, #111) !important;
    font-weight: 800 !important;
}
.pi-article-modern .pi-article-section ul,
.pi-article-modern .pi-article-section ol {
    margin: 0 0 1rem !important;
    padding-left: 1.25rem !important;
}
.pi-article-modern .pi-article-section li {
    font-size: .96rem !important;
    line-height: 1.65 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    margin-bottom: .35rem !important;
}
.pi-article-modern .pi-article-section li::marker {
    color: var(--v9-gold, #c49400);
}

/* Figures + inline images inside article sections */
.pi-article-modern .pi-article-section .pi-article-figure,
.pi-article-modern .pi-article-section figure {
    margin: 1rem 0 1.25rem !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #14161c;
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.10);
}
.pi-article-modern .pi-article-section figure img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}
/* Inline <img> directly inside a section (no figure wrapper) — e.g.
   in MonthlyRoundup pages each section has an inline image */
.pi-article-modern .pi-article-section > img.pi-article-img,
.pi-article-modern .pi-article-section > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 12px !important;
    margin: .85rem 0 1rem !important;
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.10);
    background: #fafaf6;
}

/* Monthly round-up section photos — full image visible, centered, never cropped/hidden */
.pi-monthly-roundup.pi-article-modern .pi-article-section > img,
.pi-monthly-roundup.pi-article-modern .pi-article-section > img.pi-article-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: min(100%, 620px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767.98px) {
    .pi-monthly-roundup.pi-article-modern .pi-article-featured {
        float: none !important;
        margin: 0 auto 1.25rem !important;
        max-width: 220px !important;
        text-align: center;
    }
    .pi-monthly-roundup.pi-article-modern .pi-article-featured .pi-article-img,
    .pi-monthly-roundup.pi-article-modern .pi-article-featured img {
        width: 130px !important;
        max-width: 130px !important;
        height: 130px !important;
        margin: 0 auto !important;
    }
    .pi-monthly-roundup.pi-article-modern .pi-article-intro {
        min-height: 0;
        display: block;
    }
    .pi-monthly-roundup.pi-article-modern .pi-article-content .pi-article-section:first-of-type {
        clear: none;
    }
}

/* Tables — neat gold-tinted style */
.pi-article-modern .pi-article-section table {
    width: 100% !important;
    margin: 1rem 0 !important;
    border-collapse: collapse !important;
    font-size: .9rem !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 16px rgba(20, 33, 61, 0.05);
}
.pi-article-modern .pi-article-section table thead {
    background: linear-gradient(135deg, #fffaea 0%, #fff3c4 100%) !important;
}
.pi-article-modern .pi-article-section table th {
    text-align: left !important;
    padding: .6rem .85rem !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 1px solid rgba(196, 148, 0, 0.32) !important;
}
.pi-article-modern .pi-article-section table td {
    padding: .55rem .85rem !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    line-height: 1.45 !important;
}
.pi-article-modern .pi-article-section table tr:last-child td {
    border-bottom: 0 !important;
}

/* Mobile polish */
@media (max-width: 767.98px) {
    .pi-article-modern {
        padding: 1.25rem 1.15rem !important;
        border-radius: 14px !important;
    }
    .pi-article-modern .pi-article-meta {
        gap: .35rem .65rem !important;
        margin: 0 0 1rem !important;
        padding: 0 0 .85rem !important;
    }
    .pi-article-modern .pi-article-meta span {
        font-size: .62rem !important;
        letter-spacing: .06em !important;
    }
    .pi-article-modern .pi-article-featured {
        margin: 0 0 1.25rem !important;
        border-radius: 10px !important;
    }
    .pi-article-modern .pi-article-intro {
        padding: 1rem 1.1rem !important;
    }
    .pi-article-modern .pi-article-intro p {
        font-size: .95rem !important;
        line-height: 1.6 !important;
    }
    .pi-article-modern .pi-article-section {
        margin: 0 0 1.35rem !important;
    }
    .pi-article-modern .pi-article-section h2 {
        font-size: 1.1rem !important;
    }
    .pi-article-modern .pi-article-section h3 {
        font-size: 1rem !important;
    }
    .pi-article-modern .pi-article-section p {
        font-size: .94rem !important;
        line-height: 1.65 !important;
    }
    .pi-article-modern .pi-article-section li {
        font-size: .9rem !important;
    }
    .pi-article-modern .pi-date-pill {
        display: none !important;
    }
    /* Mobile: shrink the bottom CTA buttons (Back to Articles, About IPEMA, etc.) */
    .pi-article-modern .pi-btn,
    .pi-article-modern .pi-btn-sm,
    .pi-article-modern .pi-btn-primary,
    .pi-article-modern .pi-btn-outline,
    .pi-article-modern .pi-btn-dark {
        font-size: .72rem !important;
        padding: .4rem .85rem !important;
        line-height: 1.2 !important;
        letter-spacing: .02em !important;
        border-radius: 999px !important;
    }
    .pi-article-modern .pi-btn .bi,
    .pi-article-modern .pi-btn-sm .bi { font-size: .85em !important; }
    /* Stack the action row on narrow viewports */
    .pi-article-modern .d-flex {
        gap: .5rem !important;
    }
}

/* ============================================================
   ARTICLE DETAIL — mobile button shrink for .pi-report pages too
   ============================================================ */
@media (max-width: 767.98px) {
    .pi-report .pi-btn,
    .pi-report .pi-btn-sm,
    .pi-report .pi-btn-primary,
    .pi-report .pi-btn-outline,
    .pi-report .pi-btn-dark {
        font-size: .72rem !important;
        padding: .4rem .85rem !important;
        line-height: 1.2 !important;
        letter-spacing: .02em !important;
        border-radius: 999px !important;
    }
    .pi-report .pi-btn .bi,
    .pi-report .pi-btn-sm .bi { font-size: .85em !important; }
    .pi-report .d-flex {
        gap: .5rem !important;
    }
    .pi-article-modern .pi-article-section table {
        font-size: .82rem !important;
    }
    .pi-article-modern .pi-article-section table th,
    .pi-article-modern .pi-article-section table td {
        padding: .45rem .65rem !important;
    }
}

/* ============================================================
   FORM PAGES — v9 styling (Contact, ExhibitorRegistration,
   VisitorRegistration, KnowledgeDayRegistration)
   Triggered by .pi-form-page wrapper added to each page.
   ============================================================ */

.pi-form-page {
    background: linear-gradient(180deg, #fffdf6 0%, #fafaf6 100%);
}

/* Breadcrumb */
.pi-form-page .pi-breadcrumb {
    background: #fafaf6 !important;
    padding: .85rem 0 !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
}
.pi-form-page .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .88rem !important; }
.pi-form-page .pi-breadcrumb .breadcrumb-item a { color: var(--v9-gold-deep, #6e4f00) !important; text-decoration: none !important; }
.pi-form-page .pi-breadcrumb .breadcrumb-item.active { color: var(--v9-ink-soft, #5a5a5a) !important; }

/* Italic <em> accent */
.pi-form-page h1 em,
.pi-form-page h2 em,
.pi-form-page h3 em {
    font-style: normal !important;
    color: var(--v9-red, #d72631) !important;
}

/* Section padding */
.pi-form-page .pi-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0 !important;
    background: transparent !important;
}

/* Form card shell — refresh the existing .pi-card wrapper */
.pi-form-page .pi-card {
    background: #ffffff !important;
    border: 1px solid rgba(196, 148, 0, 0.22) !important;
    border-top: 4px solid var(--v9-gold, #c49400) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 48px rgba(20, 33, 61, 0.10), 0 4px 12px rgba(20, 33, 61, 0.04) !important;
    overflow: hidden;
}
.pi-form-page .pi-card-body {
    padding: clamp(1.85rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem) !important;
}
.pi-form-page .pi-card .text-center h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem) !important;
    font-weight: 900 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 .65rem !important;
    line-height: 1.2 !important;
    letter-spacing: -.015em !important;
}
.pi-form-page .pi-card-body h2,
.pi-form-page .pi-card-body h3 {
    font-size: clamp(1.2rem, 2.4vw, 1.6rem) !important;
    font-weight: 900 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 1.5rem !important;
    letter-spacing: -.01em !important;
}

/* Form field styling */
.pi-form-page .pi-form .form-label {
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--v9-ink-soft, #4a4a4a) !important;
    margin-bottom: .35rem !important;
    display: block;
}
.pi-form-page .pi-form .form-control,
.pi-form-page .pi-form .form-select {
    font-size: .92rem !important;
    padding: .6rem .85rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(20, 33, 61, 0.12) !important;
    border-radius: 10px !important;
    color: var(--v9-ink, #111) !important;
    box-shadow: none !important;
    height: auto !important;
    transition: border-color .2s, box-shadow .2s;
}
.pi-form-page .pi-form .form-control:focus,
.pi-form-page .pi-form .form-select:focus {
    border-color: var(--v9-gold, #c49400) !important;
    box-shadow: 0 0 0 3px rgba(196, 148, 0, 0.18) !important;
    outline: 0 !important;
}
.pi-form-page .pi-form textarea.form-control {
    line-height: 1.55 !important;
}

/* Submit button — gold pill */
.pi-form-page .pi-form .pi-btn-primary,
.pi-form-page .pi-form button[type="submit"] {
    background: linear-gradient(135deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%) !important;
    color: #1a1a1a !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    padding: .75rem 1.85rem !important;
    letter-spacing: .04em !important;
    box-shadow: 0 10px 24px rgba(196, 148, 0, 0.32) !important;
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.pi-form-page .pi-form .pi-btn-primary:hover,
.pi-form-page .pi-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(196, 148, 0, 0.40) !important;
    filter: brightness(1.04);
}

/* Contact left-rail info blocks */
.pi-contact-page .d-flex.gap-3.mb-4 {
    background: #ffffff;
    border: 1px solid rgba(196, 148, 0, 0.18);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem !important;
    box-shadow: 0 6px 16px rgba(20, 33, 61, 0.05);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pi-contact-page .d-flex.gap-3.mb-4:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 148, 0, 0.45);
    box-shadow: 0 12px 26px rgba(20, 33, 61, 0.10);
}
.pi-contact-page .d-flex.gap-3.mb-4 .pi-icon {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%) !important;
    color: #1a1a1a !important;
    border-radius: 12px !important;
    font-size: 1.15rem !important;
    box-shadow: 0 6px 14px rgba(196, 148, 0, 0.28) !important;
}
.pi-contact-page .d-flex.gap-3.mb-4 h4 {
    font-size: .98rem !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 .25rem !important;
    line-height: 1.25 !important;
}
.pi-contact-page .d-flex.gap-3.mb-4 p {
    font-size: .9rem !important;
    line-height: 1.55 !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    margin: 0 !important;
}
.pi-contact-page .d-flex.gap-3.mb-4 a {
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.pi-contact-page .d-flex.gap-3.mb-4 a:hover {
    color: var(--v9-red, #d72631) !important;
}
.pi-contact-page > section > .container > .row > .col-lg-5 > h3 {
    font-size: clamp(1.3rem, 2.6vw, 1.75rem) !important;
    font-weight: 900 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 1.5rem !important;
    letter-spacing: -.015em !important;
}

/* HERO CONTENT UNIFORMITY for all form pages */
.pi-form-page .pi-v9-hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 1rem clamp(70px, 10vh, 110px) !important;
    height: 100% !important;
}
.pi-form-page .pi-v9-hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .6rem 1.4rem !important;
    font-size: .8rem !important;
    letter-spacing: .25em !important;
    text-transform: uppercase !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--v9-yellow, #ffd86b) !important;
    border-radius: 999px !important;
    margin: 0 auto 1.25rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}
.pi-form-page .pi-v9-hero-tag .dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: var(--v9-yellow, #ffd86b) !important;
    align-self: center !important;
}
.pi-form-page .pi-v9-hero h1 {
    color: #fff !important;
    margin: 0 auto 1.5rem !important;
    max-width: 1100px !important;
    line-height: 1.1 !important;
}
.pi-form-page .pi-v9-hero-lead {
    color: #fff !important;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
    margin: 0 auto 2.5rem !important;
}
.pi-form-page .pi-v9-hero-actions {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
}
.pi-form-page .pi-v9-hero .pi-v9-btn,
.pi-form-page .pi-v9-hero .pi-v9-btn--lg {
    font-size: 1.05rem !important;
    padding: .85rem 1.65rem !important;
}

/* Mobile polish */
@media (max-width: 767.98px) {
    .pi-form-page .pi-section { padding: clamp(2rem, 6vw, 3rem) 0 !important; }

    .pi-form-page .pi-v9-hero-content { padding: 0 1rem clamp(40px, 7vh, 70px) !important; }
    .pi-form-page .pi-v9-hero-tag {
        font-size: .62rem !important;
        padding: .28rem .7rem !important;
        letter-spacing: .08em !important;
        margin: 0 auto .65rem !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.25 !important;
        max-width: calc(100% - 1rem) !important;
    }
    .pi-form-page .pi-v9-hero h1 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        line-height: 1.15 !important;
    }
    .pi-form-page .pi-v9-hero-lead {
        font-size: .9rem !important;
        line-height: 1.45 !important;
        max-width: 340px;
    }
    .pi-form-page .pi-v9-hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: .55rem !important;
    }
    .pi-form-page .pi-v9-hero-actions .pi-v9-btn,
    .pi-form-page .pi-v9-hero-actions .pi-v9-btn--lg {
        min-width: 200px !important;
        font-size: .78rem !important;
        padding: .5rem 1rem !important;
    }

    /* Form card */
    .pi-form-page .pi-card-body { padding: 1.4rem 1.25rem !important; }
    .pi-form-page .pi-form .form-label { font-size: .7rem !important; }
    .pi-form-page .pi-form .form-control,
    .pi-form-page .pi-form .form-select { font-size: .88rem !important; padding: .55rem .75rem !important; }
    .pi-form-page .pi-form .pi-btn-primary,
    .pi-form-page .pi-form button[type="submit"] {
        font-size: .85rem !important;
        padding: .65rem 1.25rem !important;
        width: 100% !important;
    }

    /* Contact info blocks */
    .pi-contact-page .d-flex.gap-3.mb-4 { padding: .85rem 1rem; }
    .pi-contact-page .d-flex.gap-3.mb-4 .pi-icon { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .pi-contact-page .d-flex.gap-3.mb-4 h4 { font-size: .92rem !important; }
    .pi-contact-page .d-flex.gap-3.mb-4 p { font-size: .85rem !important; }
}

/* ============================================================
   STATIC PAGES — v9 styling (Privacy, Terms, Downloads)
   Triggered by .pi-static-page wrapper.
   ============================================================ */

.pi-static-page {
    background: linear-gradient(180deg, #fffdf6 0%, #fafaf6 100%);
}

/* Breadcrumb */
.pi-static-page .pi-breadcrumb {
    background: #fafaf6 !important;
    padding: .85rem 0 !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
}
.pi-static-page .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .88rem !important; }
.pi-static-page .pi-breadcrumb .breadcrumb-item a { color: var(--v9-gold-deep, #6e4f00) !important; text-decoration: none !important; }
.pi-static-page .pi-breadcrumb .breadcrumb-item.active { color: var(--v9-ink-soft, #5a5a5a) !important; }

/* Italic <em> accent */
.pi-static-page h1 em,
.pi-static-page h2 em,
.pi-static-page h3 em {
    font-style: normal !important;
    color: var(--v9-red, #d72631) !important;
}

/* Section padding */
.pi-static-page .pi-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0 !important;
    background: transparent !important;
}

/* Legal article card (Privacy / Terms) */
.pi-static-card {
    background: #ffffff;
    border: 1px solid rgba(196, 148, 0, 0.22);
    border-top: 4px solid var(--v9-gold, #c49400);
    border-radius: 18px;
    box-shadow: 0 22px 48px rgba(20, 33, 61, 0.10), 0 4px 12px rgba(20, 33, 61, 0.04);
    padding: clamp(1.85rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
.pi-static-card .pi-static-updated {
    font-size: .75rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--v9-gold-deep, #6e4f00) !important;
    background: rgba(196, 148, 0, 0.10);
    border: 1px solid rgba(196, 148, 0, 0.28);
    padding: .35rem .85rem;
    border-radius: 999px;
    display: inline-block;
    margin: 0 0 1.5rem !important;
}
.pi-static-card h3 {
    font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
    font-weight: 800 !important;
    color: var(--v9-ink, #111) !important;
    margin: 1.75rem 0 .75rem !important;
    padding-bottom: .5rem !important;
    border-bottom: 1px dashed rgba(196, 148, 0, 0.30) !important;
    line-height: 1.3 !important;
    letter-spacing: -.005em !important;
}
.pi-static-card h3:first-of-type {
    margin-top: 1rem !important;
}
.pi-static-card p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    margin: 0 0 1rem !important;
}
.pi-static-card p:last-child {
    margin-bottom: 0 !important;
}
.pi-static-card a {
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(196, 148, 0, 0.5);
    transition: color .2s, border-color .2s;
}
.pi-static-card a:hover {
    color: var(--v9-red, #d72631) !important;
    border-bottom-color: var(--v9-red, #d72631) !important;
}

/* Downloads — empty-state panel */
.pi-downloads-empty {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(196, 148, 0, 0.22);
    border-top: 4px solid var(--v9-gold, #c49400);
    border-radius: 18px;
    box-shadow: 0 22px 48px rgba(20, 33, 61, 0.10), 0 4px 12px rgba(20, 33, 61, 0.04);
    padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.5rem);
}
.pi-downloads-empty-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%);
    color: #1a1a1a;
    border-radius: 50%;
    font-size: 2.5rem;
    box-shadow: 0 14px 32px rgba(196, 148, 0, 0.32);
}
.pi-downloads-empty h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem) !important;
    font-weight: 900 !important;
    color: var(--v9-ink, #111) !important;
    margin: 0 0 .75rem !important;
    letter-spacing: -.015em !important;
    line-height: 1.2 !important;
}
.pi-downloads-empty p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--v9-ink-soft, #5a5a5a) !important;
    margin: 0 auto 1.85rem !important;
    max-width: 520px;
}

/* HERO CONTENT UNIFORMITY */
.pi-static-page .pi-v9-hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 1rem clamp(70px, 10vh, 110px) !important;
    height: 100% !important;
}
.pi-static-page .pi-v9-hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .6rem 1.4rem !important;
    font-size: .8rem !important;
    letter-spacing: .25em !important;
    text-transform: uppercase !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--v9-yellow, #ffd86b) !important;
    border-radius: 999px !important;
    margin: 0 auto 1.25rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}
.pi-static-page .pi-v9-hero-tag .dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: var(--v9-yellow, #ffd86b) !important;
    align-self: center !important;
}
.pi-static-page .pi-v9-hero h1 {
    color: #fff !important;
    margin: 0 auto 1.5rem !important;
    max-width: 1100px !important;
    line-height: 1.1 !important;
}
.pi-static-page .pi-v9-hero-lead {
    color: #fff !important;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
    margin: 0 auto 2.5rem !important;
}
.pi-static-page .pi-v9-hero-actions {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
}
.pi-static-page .pi-v9-hero .pi-v9-btn,
.pi-static-page .pi-v9-hero .pi-v9-btn--lg {
    font-size: 1.05rem !important;
    padding: .85rem 1.65rem !important;
}

/* Mobile polish */
@media (max-width: 767.98px) {
    .pi-static-page .pi-section { padding: clamp(2rem, 6vw, 3rem) 0 !important; }

    .pi-static-page .pi-v9-hero-content { padding: 0 1rem clamp(40px, 7vh, 70px) !important; }
    .pi-static-page .pi-v9-hero-tag {
        font-size: .62rem !important;
        padding: .28rem .7rem !important;
        letter-spacing: .08em !important;
        margin: 0 auto .65rem !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.25 !important;
        max-width: calc(100% - 1rem) !important;
    }
    .pi-static-page .pi-v9-hero h1 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        line-height: 1.15 !important;
    }
    .pi-static-page .pi-v9-hero-lead {
        font-size: .9rem !important;
        line-height: 1.45 !important;
        max-width: 340px;
    }
    .pi-static-page .pi-v9-hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: .55rem !important;
    }
    .pi-static-page .pi-v9-hero-actions .pi-v9-btn,
    .pi-static-page .pi-v9-hero-actions .pi-v9-btn--lg {
        min-width: 200px !important;
        font-size: .78rem !important;
        padding: .5rem 1rem !important;
    }

    /* Legal article card */
    .pi-static-card {
        padding: 1.5rem 1.25rem !important;
        border-radius: 14px;
    }
    .pi-static-card .pi-static-updated {
        font-size: .68rem !important;
        padding: .3rem .7rem;
    }
    .pi-static-card h3 { font-size: 1.05rem !important; margin: 1.35rem 0 .55rem !important; }
    .pi-static-card p { font-size: .92rem !important; line-height: 1.65 !important; }

    /* Downloads empty */
    .pi-downloads-empty { padding: 2rem 1.25rem !important; border-radius: 14px; }
    .pi-downloads-empty-icon { width: 72px; height: 72px; font-size: 2rem; }
    .pi-downloads-empty h2 { font-size: 1.2rem !important; }
    .pi-downloads-empty p { font-size: .92rem !important; margin-bottom: 1.35rem !important; }
}

/* ============================================================
   FAQ PAGE — v9 styling
   ============================================================ */

.pi-faq-page {
    background: linear-gradient(180deg, #fffdf6 0%, #fafaf6 100%);
}

.pi-faq-page .pi-breadcrumb {
    background: #fafaf6 !important;
    padding: .85rem 0 !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
}
.pi-faq-page .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .88rem !important; }
.pi-faq-page .pi-breadcrumb .breadcrumb-item a { color: var(--v9-gold-deep, #6e4f00) !important; text-decoration: none !important; }
.pi-faq-page .pi-breadcrumb .breadcrumb-item.active { color: var(--v9-ink-soft, #5a5a5a) !important; }

.pi-faq-page h1 em, .pi-faq-page h2 em, .pi-faq-page h3 em {
    font-style: normal !important;
    color: var(--v9-red, #d72631) !important;
}

.pi-faq-section { padding: clamp(2.5rem, 5vw, 4rem) 0 !important; background: transparent !important; }

/* Group title */
.pi-faq-group-title {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important;
    font-weight: 900 !important;
    color: var(--v9-ink, #111) !important;
    margin: 2rem 0 1.1rem !important;
    padding: 0 0 0 1rem !important;
    letter-spacing: -.01em !important;
    position: relative;
    line-height: 1.2 !important;
}
.pi-faq-group-title:first-of-type { margin-top: 0 !important; }
.pi-faq-group-title::before {
    content: '';
    position: absolute;
    left: 0; top: .25em; bottom: .25em;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%);
}

/* Accordion */
.pi-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    background: transparent !important;
    border: 0 !important;
}
.pi-faq-accordion .accordion-item {
    background: #ffffff !important;
    border: 1px solid rgba(196, 148, 0, 0.18) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(20, 33, 61, 0.06);
    transition: border-color .25s, box-shadow .25s;
}
.pi-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(196, 148, 0, 0.50) !important;
    box-shadow: 0 14px 32px rgba(20, 33, 61, 0.10);
}
.pi-faq-accordion .accordion-header { margin: 0 !important; }
.pi-faq-accordion .accordion-button {
    background: #ffffff !important;
    color: var(--v9-ink, #111) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    padding: 1.1rem 1.35rem !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: -.005em;
    transition: background .25s, color .25s;
}
.pi-faq-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #fffaea 0%, #fff3c4 100%) !important;
    color: var(--v9-ink, #111) !important;
    border-radius: 14px 14px 0 0 !important;
}
.pi-faq-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0.4);
}
.pi-faq-accordion .accordion-button::after {
    width: 1.1rem;
    height: 1.1rem;
    background-size: 1.1rem;
}
.pi-faq-accordion .accordion-button:hover {
    color: var(--v9-gold-deep, #6e4f00) !important;
}
.pi-faq-accordion .accordion-body {
    padding: 1.1rem 1.35rem 1.35rem !important;
    font-size: .94rem !important;
    line-height: 1.65 !important;
    color: var(--v9-ink-soft, #3a3a3a) !important;
    background: #fffdf6;
    border-top: 1px dashed rgba(196, 148, 0, 0.30);
}
.pi-faq-accordion .accordion-body a {
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(196, 148, 0, 0.45);
}
.pi-faq-accordion .accordion-body a:hover {
    color: var(--v9-red, #d72631) !important;
    border-bottom-color: var(--v9-red, #d72631) !important;
}

/* Bottom CTA */
.pi-faq-cta {
    text-align: center;
    background: linear-gradient(135deg, #fffdf6 0%, #fff8e3 35%, #ffe88a 75%, #ffd86b 100%);
    border: 1px solid rgba(196, 148, 0, 0.32);
    border-radius: 18px;
    padding: clamp(1.85rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
    margin-top: clamp(2rem, 3vw, 2.5rem);
    box-shadow: 0 14px 32px rgba(196, 148, 0, 0.18);
}
.pi-faq-cta-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #ffd86b;
    border-radius: 16px;
    font-size: 1.6rem;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.pi-faq-cta h4 {
    font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
    font-weight: 900 !important;
    color: var(--v9-ink, #1a1a1a) !important;
    margin: 0 0 .45rem !important;
    line-height: 1.2 !important;
}
.pi-faq-cta p {
    font-size: .95rem !important;
    color: var(--v9-gold-deep, #6e4f00) !important;
    font-weight: 600 !important;
    margin: 0 0 1.15rem !important;
    line-height: 1.5;
}

/* HERO uniformity */
.pi-faq-page .pi-v9-hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 1rem clamp(70px, 10vh, 110px) !important;
    height: 100% !important;
}
.pi-faq-page .pi-v9-hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .6rem 1.4rem !important;
    font-size: .8rem !important;
    letter-spacing: .25em !important;
    text-transform: uppercase !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--v9-yellow, #ffd86b) !important;
    border-radius: 999px !important;
    margin: 0 auto 1.25rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}
.pi-faq-page .pi-v9-hero-tag .dot {
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: var(--v9-yellow, #ffd86b) !important;
    align-self: center !important;
}
.pi-faq-page .pi-v9-hero h1 {
    color: #fff !important;
    margin: 0 auto 1.5rem !important;
    max-width: 1100px !important;
    line-height: 1.1 !important;
}
.pi-faq-page .pi-v9-hero-lead {
    color: #fff !important;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
    margin: 0 auto 2.5rem !important;
}
.pi-faq-page .pi-v9-hero-actions {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
}
.pi-faq-page .pi-v9-hero .pi-v9-btn,
.pi-faq-page .pi-v9-hero .pi-v9-btn--lg {
    font-size: 1.05rem !important;
    padding: .85rem 1.65rem !important;
}

@media (max-width: 767.98px) {
    .pi-faq-section { padding: clamp(2rem, 6vw, 3rem) 0 !important; }
    .pi-faq-page .pi-v9-hero-content { padding: 0 1rem clamp(40px, 7vh, 70px) !important; }
    .pi-faq-page .pi-v9-hero-tag {
        font-size: .62rem !important;
        padding: .28rem .7rem !important;
        letter-spacing: .08em !important;
        margin: 0 auto .65rem !important;
    }
    .pi-faq-page .pi-v9-hero h1 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        line-height: 1.15 !important;
    }
    .pi-faq-page .pi-v9-hero-lead { font-size: .9rem !important; line-height: 1.45 !important; max-width: 340px; }
    .pi-faq-page .pi-v9-hero-actions { flex-direction: column !important; align-items: center !important; gap: .55rem !important; }
    .pi-faq-page .pi-v9-hero-actions .pi-v9-btn,
    .pi-faq-page .pi-v9-hero-actions .pi-v9-btn--lg {
        min-width: 200px !important;
        font-size: .78rem !important;
        padding: .5rem 1rem !important;
    }
    .pi-faq-group-title { font-size: 1.15rem !important; margin: 1.5rem 0 .85rem !important; }
    .pi-faq-accordion .accordion-button { font-size: .92rem !important; padding: .9rem 1.1rem !important; }
    .pi-faq-accordion .accordion-body { font-size: .9rem !important; padding: .95rem 1.1rem 1.15rem !important; }
    .pi-faq-cta { padding: 1.5rem 1.25rem !important; border-radius: 14px; }
    .pi-faq-cta-icon { width: 52px; height: 52px; font-size: 1.3rem; }
    .pi-faq-cta h4 { font-size: 1.05rem !important; }
    .pi-faq-cta p { font-size: .88rem !important; }
}

/* ============================================================
   SPEAKER PRESENTATIONS — v9 hero polish (markup uses shared
   _SpeakerArchiveShell.cshtml partial)
   ============================================================ */

.pi-speakers-page .kd-archive-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2410 100%);
    color: #fff;
    padding: clamp(4rem, 7vw, 6rem) 0 clamp(2rem, 3.5vw, 3rem) !important;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
.pi-speakers-page .kd-archive-hero-inner {
    position: relative;
    z-index: 2;
}
.pi-speakers-page .kd-archive-hero .pi-v9-hero-overlay,
.pi-speakers-page .kd-archive-hero .pi-v9-hero-vignette {
    z-index: 1;
}
.pi-speakers-page .kd-archive-hero .pi-v9-eyebrow {
    justify-content: center !important;
    margin: 0 auto !important;
}
.pi-speakers-page .kd-archive-hero h1 {
    font-size: clamp(2rem, 5vw, 3.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    margin: .85rem 0 .65rem !important;
    color: #fff !important;
    line-height: 1.05 !important;
}
.pi-speakers-page .kd-archive-year {
    background: linear-gradient(110deg, #ffd86b 0%, #c49400 50%, #ffd86b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pi-speakers-page .kd-archive-sub {
    max-width: 640px;
    margin: 0 auto 1.5rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
}
.pi-speakers-page .kd-archive-year-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    padding: .4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 230, 0, 0.22);
    border-radius: 999px;
    margin-top: .5rem;
    backdrop-filter: blur(6px);
}
.pi-speakers-page .kd-archive-year-tabs a {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: 999px;
    transition: background .2s, color .2s, transform .2s;
}
.pi-speakers-page .kd-archive-year-tabs a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}
.pi-speakers-page .kd-archive-year-tabs a.is-active {
    background: var(--v9-gold, #c49400);
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(196, 148, 0, 0.35);
}

/* Breadcrumb in speakers page */
.pi-speakers-page .pi-breadcrumb {
    background: #fafaf6 !important;
    padding: .85rem 0 !important;
    border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important;
}
.pi-speakers-page .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .88rem !important; }
.pi-speakers-page .pi-breadcrumb .breadcrumb-item a { color: var(--v9-gold-deep, #6e4f00) !important; text-decoration: none !important; }
.pi-speakers-page .pi-breadcrumb .breadcrumb-item.active { color: var(--v9-ink-soft, #5a5a5a) !important; }

/* Mobile polish for speakers */
@media (max-width: 767.98px) {
    .pi-speakers-page .kd-archive-hero {
        padding: clamp(2.5rem, 8vw, 3.5rem) 0 clamp(1.5rem, 5vw, 2rem) !important;
    }
    .pi-speakers-page .kd-archive-hero h1 {
        font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    }
    .pi-speakers-page .kd-archive-sub {
        font-size: .9rem !important;
        line-height: 1.5 !important;
    }
    .pi-speakers-page .kd-archive-year-tabs a {
        padding: .35rem .75rem;
        font-size: .72rem;
    }
    .pi-speakers-page .pi-speaker-name { font-size: 1rem !important; }
    .pi-speakers-page .pi-speaker-talk { font-size: .85rem !important; }
}

/* ============================================================
   FOOTER — v9 styling pass
   Restyles the existing .pi-footer structure (markup unchanged).
   Dark cream-tinted bg, gold accents, refined typography, polished
   social pills, and a clean copyright bar.
   ============================================================ */

.pi-footer {
    background: linear-gradient(180deg, #0c0d10 0%, #14161c 100%) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    padding: clamp(3rem, 5vw, 4.5rem) 0 0 !important;
    position: relative;
    border-top: 4px solid var(--v9-gold, #c49400) !important;
}
.pi-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 200px;
    background: radial-gradient(ellipse at 50% 0%, rgba(196, 148, 0, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.pi-footer > .container {
    position: relative;
    z-index: 1;
}

/* Logo + branding column — no tile, bigger logo, bigger right-side text */
.pi-footer .d-flex.align-items-center.gap-3.mb-3 {
    margin-bottom: 1.5rem !important;
    align-items: center !important;
    gap: 1.1rem !important;
}
.pi-footer .d-flex.align-items-center.gap-3.mb-3 img {
    height: 86px !important;
    width: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.pi-footer .d-flex.align-items-center.gap-3.mb-3 .text-white {
    font-size: .85rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--pi-yellow, #ffd86b) !important;
    margin-bottom: .3rem !important;
    line-height: 1.2 !important;
}
.pi-footer .d-flex.align-items-center.gap-3.mb-3 > div > div:last-child {
    font-size: 1rem !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

/* Branding paragraph */
.pi-footer .col-lg-4 > p {
    font-size: .9rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin-bottom: 1.25rem !important;
}

/* Section headings */
.pi-footer h5 {
    font-size: .8rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--pi-yellow, #ffd86b) !important;
    margin: 0 0 1.1rem !important;
    padding-bottom: .55rem !important;
    border-bottom: 2px solid rgba(255, 230, 0, 0.20) !important;
    line-height: 1.2 !important;
}

/* Quick-link lists */
.pi-footer .pi-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .5rem !important;
}
.pi-footer .pi-footer-links li { margin: 0 !important; }
.pi-footer .pi-footer-links a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    transition: color .2s, transform .2s, padding-left .2s;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    position: relative;
    padding-left: 0;
}
.pi-footer .pi-footer-links a::before {
    content: '\F285';                /* bi-chevron-right */
    font-family: 'bootstrap-icons';
    font-size: .75rem;
    color: var(--pi-yellow, #ffd86b);
    opacity: 0;
    margin-right: 0;
    width: 0;
    transition: opacity .2s, width .2s, margin-right .2s;
}
.pi-footer .pi-footer-links a:hover {
    color: var(--pi-yellow, #ffd86b) !important;
    padding-left: .35rem;
}
.pi-footer .pi-footer-links a:hover::before {
    opacity: 1;
    width: auto;
    margin-right: .35rem;
}

/* Contact column rows */
.pi-footer .col-lg-4 > h5 + div { font-size: .88rem !important; }
.pi-footer .col-lg-4 > h5 + div p {
    margin: 0 0 .75rem !important;
    font-size: .88rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}
.pi-footer .col-lg-4 > h5 + div p:last-child { margin-bottom: 0 !important; }
.pi-footer .col-lg-4 > h5 + div p i {
    color: var(--pi-yellow, #ffd86b) !important;
    font-size: 1rem !important;
    flex-shrink: 0;
    margin-top: .15rem;
}
.pi-footer .col-lg-4 > h5 + div p strong {
    color: #ffffff !important;
    font-weight: 800 !important;
}
.pi-footer .col-lg-4 > h5 + div p a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: color .2s;
    font-weight: 500;
}
.pi-footer .col-lg-4 > h5 + div p a:hover {
    color: var(--pi-yellow, #ffd86b) !important;
    text-decoration: underline !important;
}
.pi-footer-map-link {
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.78) !important;
}
.pi-footer-map-link .bi-geo-alt-fill {
    color: var(--pi-yellow, #ffd86b) !important;
    font-size: .85rem;
    opacity: .9;
}

/* Social icons — brand-colored tiles with WHITE glyphs.
   The <i> bootstrap-icon inside each <a> needs `color: #ffffff !important`
   explicitly because the site-wide typography lock + inline page styles
   can override the parent <a>'s color. Setting both ensures every
   icon shape (Facebook f, X, LinkedIn in, IG camera, YT play, Pinterest P)
   renders white on top of the brand-colored tile. */
.pi-footer-social {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    margin-top: 1rem !important;
}
.pi-footer-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: #1a1a1a !important;          /* fallback */
    border: 0 !important;
    border-radius: 4px !important;
    color: #ffffff !important;                /* link inherits white */
    font-size: 1.05rem !important;
    text-decoration: none !important;
    transition: transform .25s, box-shadow .25s, filter .25s !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}
.pi-footer-social a i,
.pi-footer-social a i.bi,
.pi-footer-social a > i[class*="bi-"] {
    color: #ffffff !important;                /* explicit white on the icon glyph */
    line-height: 1 !important;
}
/* Brand colors via aria-label (markup-faithful & reliable) */
.pi-footer-social a[aria-label="Facebook"] { background: #1877F2 !important; }
.pi-footer-social a[aria-label="Twitter"]  { background: #000000 !important; }
.pi-footer-social a[aria-label="LinkedIn"] { background: #0A66C2 !important; }
.pi-footer-social a[aria-label="Instagram"] {
    background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%) !important;
}
.pi-footer-social a[aria-label="YouTube"]  { background: #FF0000 !important; }
.pi-footer-social a[aria-label="Pinterest"] { background: #E60023 !important; }

/* Hover — keep brand color, slight lift + brightness flash */
.pi-footer-social a:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30);
    color: #ffffff !important;
}

/* Supported By strip */
.pi-footer .text-center.mt-4.pt-3 {
    margin-top: clamp(2.5rem, 4vw, 3.5rem) !important;
    padding-top: 1.65rem !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
}
.pi-footer .text-center.mt-4.pt-3 > p {
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: rgba(255, 230, 0, 0.65) !important;
    margin-bottom: 1.1rem !important;
}
.pi-footer-supported-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem 2rem !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.pi-footer-supported-logos img {
    height: 78px !important;
    max-width: 320px !important;
    width: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform .25s, opacity .25s;
}
.pi-footer-supported-logos a:hover img,
.pi-footer-supported-logos img:hover {
    transform: translateY(-2px);
    opacity: .9;
    box-shadow: none !important;
}

/* Copyright bar */
.pi-footer-bottom {
    background: transparent !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.25rem 0 !important;
    margin-top: 2rem !important;
    font-size: .8rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
}
.pi-footer-bottom p {
    font-size: .8rem !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.pi-footer-bottom strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.pi-footer-bottom a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    font-size: .8rem !important;
    transition: color .2s;
    font-weight: 500;
}
.pi-footer-bottom a:hover {
    color: var(--pi-yellow, #ffd86b) !important;
    text-decoration: underline !important;
}

/* Back-to-top button — gold-pill on the bottom-right */
.pi-back-to-top {
    background: linear-gradient(135deg, var(--pi-yellow, #ffd86b) 0%, #c49400 100%) !important;
    color: #1a1a1a !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 24px rgba(196, 148, 0, 0.40) !important;
    width: 46px !important;
    height: 46px !important;
    transition: transform .25s, box-shadow .25s;
}
.pi-back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(196, 148, 0, 0.50) !important;
}

/* Mobile polish */
@media (max-width: 767.98px) {
    .pi-footer { padding-top: clamp(2rem, 6vw, 2.75rem) !important; }
    .pi-footer h5 {
        font-size: .72rem !important;
        margin-bottom: .85rem !important;
        padding-bottom: .45rem !important;
    }
    .pi-footer .pi-footer-links { gap: .4rem !important; }
    .pi-footer .pi-footer-links a { font-size: .85rem !important; }
    .pi-footer .col-lg-4 > h5 + div p { font-size: .85rem !important; gap: .45rem; }
    .pi-footer-social a {
        width: 36px !important;
        height: 36px !important;
        font-size: .95rem !important;
        border-radius: 4px !important;
    }
    .pi-footer-supported-logos img { height: 56px !important; max-width: 240px !important; }
    .pi-footer-bottom { padding: 1rem 0 !important; margin-top: 1.5rem !important; }
    .pi-footer-bottom p, .pi-footer-bottom a { font-size: .72rem !important; }
}

/* ============================================================
   TECHNICAL SEMINAR PAGES — shared v9 magazine layout
   Used by Guwahati 2024, Nashik 2024, Nepal 2024 (and future).
   ============================================================ */

.pi-seminar-page { background: linear-gradient(180deg, #fffdf6 0%, #fafaf6 100%); }
.pi-seminar-page h1 em, .pi-seminar-page h2 em, .pi-seminar-page h3 em {
    font-style: normal !important; color: var(--v9-red, #d72631) !important;
}

.pi-seminar-hero {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(135deg, #0c0d10 0%, #14161c 45%, #2d2410 100%);
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    border-top: 4px solid var(--v9-gold, #c49400);
    border-bottom: 4px solid var(--v9-gold, #c49400);
}
.pi-seminar-hero-pattern {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(196, 148, 0, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(255, 216, 107, 0.14) 0%, transparent 55%);
    pointer-events: none; z-index: 0;
}
.pi-seminar-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 880px; margin: 0 auto; }
.pi-seminar-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--v9-gold, #ffd86b);
    background: rgba(255, 216, 107, 0.10);
    border: 1px solid rgba(255, 216, 107, 0.32);
    padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.pi-seminar-hero h1 {
    font-size: clamp(1.65rem, 4vw, 2.85rem) !important;
    font-weight: 900 !important; line-height: 1.15 !important;
    letter-spacing: -.025em !important; color: #ffffff !important;
    margin: 0 0 .9rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.pi-seminar-hero h1 em {
    background: linear-gradient(110deg, #ffd86b 0%, #c49400 50%, #ffd86b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: transparent !important;
}
.pi-seminar-hero-sub {
    font-size: clamp(.98rem, 1.4vw, 1.15rem) !important; line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 auto 1.25rem !important; max-width: 720px; font-weight: 500;
}
.pi-seminar-hero-meta {
    display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: .6rem .85rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 216, 107, 0.22);
    border-radius: 999px; padding: .55rem 1.25rem; backdrop-filter: blur(4px);
}
.pi-seminar-hero-meta span { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: #ffffff; letter-spacing: .02em; }
.pi-seminar-hero-meta i { color: var(--v9-gold, #ffd86b); font-size: 1rem; }
.pi-seminar-hero-meta-sep { width: 4px; height: 4px; background: rgba(255, 216, 107, 0.5); border-radius: 50%; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .pi-seminar-hero-meta { flex-direction: column; gap: .35rem; padding: .65rem 1rem; }
    .pi-seminar-hero-meta-sep { display: none; }
}

.pi-seminar-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; max-width: 880px; }
@media (max-width: 767.98px) { .pi-seminar-hero-stats { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }
.pi-seminar-hero-stat {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 216, 107, 0.25);
    border-radius: 14px; padding: .85rem .85rem .9rem;
    text-align: center; backdrop-filter: blur(8px);
    transition: transform .25s, border-color .25s, background .25s;
}
.pi-seminar-hero-stat:hover { transform: translateY(-3px); border-color: rgba(255, 216, 107, 0.55); background: rgba(255, 255, 255, 0.10); }
.pi-seminar-hero-stat-num {
    font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 900; line-height: 1;
    background: linear-gradient(110deg, #ffd86b 0%, #fff3c4 50%, #ffd86b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}
.pi-seminar-hero-stat-num span { font-size: .5em; margin-left: .1em; }
.pi-seminar-hero-stat-label { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-top: .4rem; line-height: 1.3; }

.pi-seminar-featured { background: linear-gradient(180deg, #fffdf6 0%, #fafaf6 100%); padding: clamp(2rem, 4vw, 3rem) 0 0; }
.pi-seminar-featured-figure {
    max-width: 720px; margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(196, 148, 0, 0.22);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 36px rgba(20, 33, 61, 0.10), 0 3px 10px rgba(20, 33, 61, 0.06);
}
.pi-seminar-featured-figure img { display: block; width: 100% !important; height: auto !important; max-height: 360px !important; object-fit: contain !important; background: #fafaf6; }
.pi-seminar-featured-figure figcaption {
    display: flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem;
    background: linear-gradient(135deg, #fffaea 0%, #fff3c4 100%);
    border-top: 1px solid rgba(196, 148, 0, 0.22);
    font-size: .74rem; font-weight: 700; color: var(--v9-gold-deep, #6e4f00); text-transform: uppercase; letter-spacing: .06em;
}
.pi-seminar-featured-figure figcaption i { color: var(--v9-gold, #c49400); font-size: .9rem; }

.pi-seminar-page .pi-breadcrumb { background: #fafaf6 !important; padding: .85rem 0 !important; border-bottom: 1px solid rgba(20, 33, 61, 0.06) !important; }
.pi-seminar-page .pi-breadcrumb .breadcrumb { margin: 0 !important; font-size: .85rem !important; }
.pi-seminar-page .pi-breadcrumb .breadcrumb-item a { color: var(--v9-gold-deep, #6e4f00) !important; text-decoration: none !important; }
.pi-seminar-page .pi-breadcrumb .breadcrumb-item.active { color: var(--v9-ink-soft, #5a5a5a) !important; }

.pi-seminar-section { padding: clamp(3rem, 6vw, 5rem) 0; background: #ffffff; }
.pi-seminar-section--alt { background: linear-gradient(180deg, #fffdf6 0%, #fff8e3 100%); }
.pi-seminar-section--dark { background: linear-gradient(135deg, #0c0d10 0%, #14161c 60%, #0c0d10 100%); color: #ffffff; }
.pi-seminar-section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2rem, 3.5vw, 2.75rem); }
.pi-seminar-section-head .pi-v9-eyebrow { justify-content: center; margin: 0 auto .65rem; }
.pi-seminar-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem) !important; font-weight: 900 !important; color: var(--v9-ink, #111) !important; margin: 0 0 .65rem !important; letter-spacing: -.02em !important; line-height: 1.2 !important; }
.pi-seminar-section-head p { font-size: 1rem !important; line-height: 1.55 !important; color: var(--v9-ink-soft, #5a5a5a) !important; margin: 0 !important; }
.pi-seminar-section-head--light h2 { color: #ffffff !important; }
.pi-seminar-section-head--light p { color: rgba(255, 255, 255, 0.78) !important; }

.pi-seminar-story { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
@media (max-width: 991.98px) { .pi-seminar-story { grid-template-columns: 1fr; } }
.pi-seminar-story-text .pi-v9-eyebrow { margin: 0 0 .65rem !important; }
.pi-seminar-story-text h2 { font-size: clamp(1.5rem, 3vw, 2.1rem) !important; font-weight: 900 !important; color: var(--v9-ink, #111) !important; margin: 0 0 1rem !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
.pi-seminar-story-text p { font-size: 1rem !important; line-height: 1.7 !important; color: var(--v9-ink-soft, #3a3a3a) !important; margin: 0 0 1rem !important; }
.pi-seminar-lead-p { font-size: 1.1rem !important; font-weight: 600 !important; color: var(--v9-ink, #111) !important; padding-left: 1rem; border-left: 3px solid var(--v9-gold, #c49400); }
.pi-seminar-story-text strong { color: var(--v9-ink, #111); font-weight: 800; }
.pi-seminar-story-media { display: flex !important; flex-direction: column !important; gap: .85rem !important; align-self: stretch !important; height: 100% !important; min-height: 100% !important; }
.pi-seminar-story-media img { flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; object-position: center !important; background: #fafaf6; border-radius: 14px; box-shadow: 0 12px 26px rgba(20, 33, 61, 0.10); display: block; padding: .35rem; }
@media (max-width: 991.98px) {
    .pi-seminar-story-media { flex-direction: row !important; height: auto !important; min-height: 0 !important; }
    .pi-seminar-story-media img { flex: 1 1 0 !important; aspect-ratio: 4 / 3 !important; }
}

.pi-seminar-speaker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 991.98px) { .pi-seminar-speaker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .pi-seminar-speaker-grid { grid-template-columns: 1fr; } }
.pi-seminar-speaker-card { background: #ffffff; border: 1px solid rgba(20, 33, 61, 0.08); border-radius: 18px; padding: 1.5rem 1.5rem 1.65rem; box-shadow: 0 12px 28px rgba(20, 33, 61, 0.07); transition: transform .35s, box-shadow .35s, border-color .35s; position: relative; height: 100%; display: flex; flex-direction: column; }
.pi-seminar-speaker-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(20, 33, 61, 0.14); border-color: rgba(196, 148, 0, 0.40); }
.pi-seminar-speaker-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffffff; background: var(--v9-gold, #c49400); padding: .3rem .75rem; border-radius: 999px; margin-bottom: 1rem; align-self: flex-start; box-shadow: 0 4px 12px rgba(196, 148, 0, 0.32); }
.pi-seminar-speaker-card h3 { font-size: 1.15rem !important; font-weight: 900 !important; color: var(--v9-ink, #111) !important; margin: 0 0 .35rem !important; line-height: 1.25 !important; letter-spacing: -.005em; }
.pi-seminar-speaker-affil { font-size: .82rem !important; font-weight: 700 !important; color: var(--v9-gold-deep, #6e4f00) !important; line-height: 1.4 !important; margin: 0 0 .85rem !important; padding: 0 0 .75rem !important; border-bottom: 1px dashed rgba(196, 148, 0, 0.30); }
.pi-seminar-speaker-card > p:not(.pi-seminar-speaker-affil) { font-size: .92rem !important; line-height: 1.6 !important; color: var(--v9-ink-soft, #3a3a3a) !important; margin: 0 !important; }
.pi-seminar-speaker-card em { font-style: italic; color: var(--v9-ink, #111); font-weight: 500; }

.pi-seminar-sessions { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
@media (max-width: 991.98px) { .pi-seminar-sessions { grid-template-columns: 1fr; } }
.pi-seminar-sessions-list { display: flex; flex-direction: column; gap: .65rem; }
.pi-seminar-session { display: flex; gap: 1rem; align-items: flex-start; background: #ffffff; border: 1px solid rgba(196, 148, 0, 0.18); border-radius: 12px; padding: 1rem 1.15rem; box-shadow: 0 6px 16px rgba(20, 33, 61, 0.05); }
.pi-seminar-session-num { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%); color: #1a1a1a; border-radius: 10px; font-size: .85rem; font-weight: 900; letter-spacing: -.01em; box-shadow: 0 4px 10px rgba(196, 148, 0, 0.32); }
.pi-seminar-session > div { min-width: 0; }
.pi-seminar-session strong { display: inline; font-size: .98rem; color: var(--v9-ink, #111); font-weight: 800; }
.pi-seminar-session > div > span { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v9-gold-deep, #6e4f00); background: rgba(196, 148, 0, 0.10); border: 1px solid rgba(196, 148, 0, 0.28); padding: .15rem .55rem; border-radius: 999px; margin-left: .35rem; vertical-align: 2px; }
.pi-seminar-session p { font-size: .9rem !important; line-height: 1.55 !important; color: var(--v9-ink-soft, #3a3a3a) !important; margin: .35rem 0 0 !important; }
.pi-seminar-sessions-media { display: flex !important; flex-direction: column !important; gap: 1rem !important; align-self: stretch !important; height: 100% !important; min-height: 100% !important; }
.pi-seminar-sessions-media img { flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; object-position: center !important; background: #fafaf6; border-radius: 14px; box-shadow: 0 12px 28px rgba(20, 33, 61, 0.10); display: block; padding: .35rem; }
.pi-seminar-sessions-note { flex: 0 0 auto !important; display: flex; gap: .8rem; background: #fff; border: 1px dashed rgba(196, 148, 0, 0.40); border-radius: 12px; padding: .95rem 1.05rem; align-items: flex-start; }
.pi-seminar-sessions-note i { font-size: 1.15rem; color: var(--v9-gold-deep, #6e4f00); margin-top: .15rem; flex-shrink: 0; }
.pi-seminar-sessions-note p { font-size: .88rem !important; line-height: 1.55 !important; color: var(--v9-ink-soft, #3a3a3a) !important; margin: 0 !important; }
.pi-seminar-sessions-note strong { color: var(--v9-ink, #111); font-weight: 800; }
@media (max-width: 991.98px) {
    .pi-seminar-sessions-media { height: auto !important; min-height: 0 !important; }
    .pi-seminar-sessions-media img { flex: 0 0 auto !important; aspect-ratio: 16 / 10 !important; }
}

.pi-seminar-pullquote { position: relative; max-width: 820px; margin: 0 auto clamp(2rem, 3.5vw, 3rem); padding: 2rem 2rem 2rem 4rem; background: linear-gradient(135deg, #fffaea 0%, #fff3c4 100%); border: 1px solid rgba(196, 148, 0, 0.32); border-left: 4px solid var(--v9-gold, #c49400); border-radius: 16px; box-shadow: 0 14px 32px rgba(196, 148, 0, 0.18); }
.pi-seminar-pullquote > i.bi-quote { position: absolute; left: 1.25rem; top: 1.25rem; font-size: 2rem; color: var(--v9-gold, #c49400); line-height: 1; }
.pi-seminar-pullquote p { font-size: 1.1rem !important; line-height: 1.6 !important; font-style: italic; font-weight: 500; color: var(--v9-ink, #111) !important; margin: 0 !important; }

.pi-seminar-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 991.98px) { .pi-seminar-panel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .pi-seminar-panel-grid { grid-template-columns: 1fr; } }
.pi-seminar-panelist { background: #ffffff; border: 1px solid rgba(196, 148, 0, 0.18); border-left: 3px solid var(--v9-gold, #c49400); border-radius: 12px; padding: 1rem 1.15rem; box-shadow: 0 6px 16px rgba(20, 33, 61, 0.05); }
.pi-seminar-panelist h4 { font-size: 1rem !important; font-weight: 800 !important; color: var(--v9-ink, #111) !important; margin: 0 0 .25rem !important; line-height: 1.25 !important; }
.pi-seminar-panelist p { font-size: .82rem !important; line-height: 1.5 !important; color: var(--v9-ink-soft, #5a5a5a) !important; margin: 0 !important; }

.pi-seminar-paired { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 767.98px) { .pi-seminar-paired { grid-template-columns: 1fr; } }
.pi-seminar-paired-card { background: #ffffff; border: 1px solid rgba(20, 33, 61, 0.08); border-top: 4px solid var(--v9-gold, #c49400); border-radius: 14px; padding: 1.15rem 1.25rem 0; box-shadow: 0 14px 30px rgba(20, 33, 61, 0.07); overflow: hidden; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; }
.pi-seminar-paired-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--v9-gold, #c49400) 0%, #ffd86b 100%); color: #1a1a1a; border-radius: 12px; font-size: 1.1rem; margin-bottom: .75rem; box-shadow: 0 6px 14px rgba(196, 148, 0, 0.32); }
.pi-seminar-paired-card h3 { font-size: 1.1rem !important; font-weight: 900 !important; color: var(--v9-ink, #111) !important; margin: 0 0 .55rem !important; line-height: 1.25 !important; letter-spacing: -.005em; }
.pi-seminar-paired-card p { font-size: .88rem !important; line-height: 1.55 !important; color: var(--v9-ink-soft, #3a3a3a) !important; margin: 0 0 .9rem !important; }
.pi-seminar-paired-card strong { color: var(--v9-ink, #111); font-weight: 800; }
.pi-seminar-paired-card img { width: calc(100% + 2.5rem); margin: auto -1.25rem 0; max-height: 220px; height: 220px; object-fit: contain !important; object-position: center; background: #fafaf6; display: block; padding: .5rem; }

.pi-seminar-summary-banner { background: linear-gradient(135deg, #1a1a1a 0%, #2d2410 100%); color: #ffffff; padding: clamp(3rem, 6vw, 4.5rem) 0; position: relative; overflow: hidden; }
.pi-seminar-summary-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(196, 148, 0, 0.20) 0%, transparent 60%); }
.pi-seminar-summary-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; }
.pi-seminar-summary-inner .pi-v9-eyebrow { justify-content: center; margin: 0 auto .75rem; color: var(--v9-gold, #ffd86b) !important; }
.pi-seminar-summary-inner h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important; font-weight: 900 !important; color: #ffffff !important; margin: 0 0 .85rem !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
.pi-seminar-summary-inner h2 em { color: var(--v9-gold, #ffd86b) !important; }
.pi-seminar-summary-inner p { font-size: 1.05rem !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.88) !important; margin: 0 !important; }

.pi-seminar-credit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 767.98px) { .pi-seminar-credit-grid { grid-template-columns: 1fr; } }
.pi-seminar-credit { background: #ffffff; border: 1px solid rgba(196, 148, 0, 0.22); border-radius: 14px; padding: 1.5rem 1.5rem 1.65rem; text-align: center; box-shadow: 0 10px 24px rgba(20, 33, 61, 0.06); transition: transform .3s, box-shadow .3s, border-color .3s; }
.pi-seminar-credit:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(20, 33, 61, 0.12); border-color: rgba(196, 148, 0, 0.45); }
.pi-seminar-credit-icon { width: 56px; height: 56px; margin: 0 auto 1rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff8e3 0%, #ffd86b 100%); color: var(--v9-gold-deep, #6e4f00); border-radius: 16px; font-size: 1.5rem; box-shadow: 0 8px 18px rgba(196, 148, 0, 0.22); }
.pi-seminar-credit h4 { font-size: 1.1rem !important; font-weight: 900 !important; color: var(--v9-ink, #111) !important; margin: 0 0 .55rem !important; line-height: 1.25 !important; }
.pi-seminar-credit p { font-size: .9rem !important; line-height: 1.55 !important; color: var(--v9-ink-soft, #3a3a3a) !important; margin: 0 !important; }
.pi-seminar-credit p strong { color: var(--v9-ink, #111); font-weight: 800; }
.pi-seminar-credit-foot { margin-top: 1.5rem !important; text-align: center !important; font-size: .9rem !important; color: var(--v9-ink-soft, #5a5a5a) !important; }
.pi-seminar-credit-foot strong { color: var(--v9-ink, #111); }

.pi-seminar-section--dark .pi-v9-eyebrow { color: var(--v9-gold, #ffd86b) !important; background: rgba(255, 216, 107, 0.10) !important; border-color: rgba(255, 216, 107, 0.30) !important; }
.pi-seminar-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
@media (max-width: 991.98px) { .pi-seminar-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .pi-seminar-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; } }
.pi-seminar-gallery-item { display: block; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 230, 0, 0.15); border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; text-decoration: none; transition: transform .3s, box-shadow .3s, border-color .3s; }
.pi-seminar-gallery-item:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35); border-color: rgba(255, 216, 107, 0.50); }
.pi-seminar-gallery-item img { width: 100% !important; height: 100% !important; object-fit: contain !important; background: #0c0d10; display: block !important; transition: transform .5s ease; }
.pi-seminar-gallery-item:hover img { transform: scale(1.05); }

.pi-seminar-back-section { background: #ffffff; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid rgba(20, 33, 61, 0.06); }

@media (max-width: 767.98px) {
    .pi-seminar-hero { padding: clamp(2.5rem, 7vw, 3.5rem) 0 clamp(2rem, 5vw, 2.5rem); }
    .pi-seminar-section { padding: clamp(2rem, 6vw, 3rem) 0; }
    .pi-seminar-section-head h2 { font-size: 1.3rem !important; }
    .pi-seminar-section-head p { font-size: .9rem !important; }
    .pi-seminar-story-text h2 { font-size: 1.3rem !important; }
    .pi-seminar-story-text p { font-size: .92rem !important; }
    .pi-seminar-lead-p { font-size: 1rem !important; }
    .pi-seminar-speaker-card { padding: 1.15rem 1.2rem 1.25rem; border-radius: 14px; }
    .pi-seminar-speaker-card h3 { font-size: 1.02rem !important; }
    .pi-seminar-speaker-affil { font-size: .76rem !important; }
    .pi-seminar-speaker-card > p:not(.pi-seminar-speaker-affil) { font-size: .88rem !important; }
    .pi-seminar-session { padding: .85rem 1rem; gap: .75rem; }
    .pi-seminar-session-num { width: 32px; height: 32px; font-size: .78rem; }
    .pi-seminar-session p { font-size: .85rem !important; }
    .pi-seminar-pullquote { padding: 1.35rem 1.35rem 1.35rem 3rem; }
    .pi-seminar-pullquote > i.bi-quote { font-size: 1.5rem; left: 1rem; top: 1rem; }
    .pi-seminar-pullquote p { font-size: .98rem !important; }
    .pi-seminar-panelist { padding: .85rem 1rem; }
    .pi-seminar-panelist h4 { font-size: .95rem !important; }
    .pi-seminar-panelist p { font-size: .78rem !important; }
    .pi-seminar-paired-card { padding: 1.35rem 1.35rem 0; border-radius: 14px; }
    .pi-seminar-paired-card img { width: calc(100% + 2.7rem); margin: auto -1.35rem 0; max-height: 200px; }
    .pi-seminar-paired-card h3 { font-size: 1.1rem !important; }
    .pi-seminar-paired-card p { font-size: .9rem !important; }
    .pi-seminar-summary-inner h2 { font-size: 1.4rem !important; }
    .pi-seminar-summary-inner p { font-size: .95rem !important; }
    .pi-seminar-credit { padding: 1.2rem 1.2rem 1.35rem; }
    .pi-seminar-credit-icon { width: 48px; height: 48px; font-size: 1.25rem; }
    .pi-seminar-credit h4 { font-size: 1rem !important; }
    .pi-seminar-credit p { font-size: .85rem !important; }
}

/* ============================================================
   KNOWLEDGE DAY PAGE — dark navbar so the kd-logo-26 (white +
   gold artwork) is visible. Only applies when the page has
   .pi-kd-page wrapper. Other pages keep the default white nav.
   ============================================================ */

body:has(.pi-kd-page) .pi-nav3 {
    background: linear-gradient(135deg, #0c0d10 0%, #14161c 45%, #2d2410 100%) !important;
    border-bottom: 4px solid var(--v9-gold, #c49400) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
body:has(.pi-kd-page) .pi-nav3-brand img {
    height: 64px !important;     /* slight bump so the KD mark reads */
    max-width: 220px !important;
}

/* Nav links — white with gold hover/active */
body:has(.pi-kd-page) .pi-nav3-links a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 700;
}
body:has(.pi-kd-page) .pi-nav3-links a:hover,
body:has(.pi-kd-page) .pi-nav3-links a.is-active,
body:has(.pi-kd-page) .pi-nav3-links a.dropdown-toggle.is-active {
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-page) .pi-nav3-links a.dropdown-toggle::after {
    color: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(255, 255, 255, 0.85) !important;
}

/* Dropdown menu — dark with white items + gold hover */
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown {
    background: #14161c !important;
    border: 1px solid rgba(255, 216, 107, 0.22) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.40) !important;
}
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 600 !important;
}
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item i {
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item:hover,
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item:focus {
    background: rgba(255, 216, 107, 0.10) !important;
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item.pi-highlight {
    background: rgba(255, 216, 107, 0.14) !important;
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Mobile burger lines — light on the dark nav */
body:has(.pi-kd-page) .pi-nav3-burger span {
    background: #ffffff !important;
}

/* Mobile collapsed menu panel — keep dark */
@media (max-width: 991.98px) {
    body:has(.pi-kd-page) .pi-nav3 .pi-nav3-collapse {
        background: #14161c !important;
        border-top: 1px solid rgba(255, 216, 107, 0.18);
    }
    body:has(.pi-kd-page) .pi-nav3-links a { color: rgba(255, 255, 255, 0.92) !important; }
    body:has(.pi-kd-page) .pi-nav3-links a:hover { color: var(--v9-gold, #ffd86b) !important; }
}

/* ============================================================
   KNOWLEDGE DAY PAGE — body palette reverted per user request.
   KD logo color plates are kept ONLY on the global navbar above.
   Body sections use the page's own inline styles (previous look).
   ============================================================ */



/* Sticky subnav: smoother border-bottom in stuck state (functional only) */
.pi-kd-page .kd-subnav.is-stuck {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}
.pi-kd-page .kd-subnav.is-stuck .kd-subnav-logo {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* ============================================================
   NAV3 (desktop) — larger logo + guaranteed spacing between
   logo · menu · buttons. Menu links and buttons WRAP instead of
   overlapping when the row gets tight on smaller desktops.
   (Authoritative override — keep at end of file.)
   ============================================================ */
@media (min-width: 992px) {
    /* Flex bar: logo · nav links (centered in flex middle) · actions.
       Uniform row gap = equal space logo↔menu and menu↔buttons. */
    .pi-nav3 .pi-nav3-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(0.65rem, 1.2vw, 1rem) !important;
        min-height: 0 !important;
        min-width: 0 !important;
        padding-top: 0.15rem !important;
        padding-bottom: 0.15rem !important;
    }
    .pi-nav3 .pi-nav3-brand {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    .pi-nav3 .pi-nav3-brand img {
        height: 60px !important;
        max-width: 200px !important;
        width: auto !important;
    }
    .pi-nav3 .pi-nav3-collapse {
        display: contents !important;
    }
    /* Nav items — flex:1 middle column; content centered so side padding is symmetric */
    .pi-nav3 .pi-nav3-links {
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(0.12rem, 0.35vw, 0.4rem) !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .pi-nav3 .pi-nav3-links > li { margin: 0 !important; display: flex !important; align-items: center !important; flex: 0 0 auto !important; }
    .pi-nav3 .pi-nav3-links a {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        font-size: clamp(0.74rem, 0.55vw + 0.6rem, 0.92rem) !important;
        line-height: 1.35 !important;
        padding: 0.18rem 0.06rem !important;
        letter-spacing: 0 !important;
    }
    /* Buttons — Exhibit + Visitor on line 1, Knowledge Day on line 2 */
    /* Buttons — 2-column grid: Exhibit + Visitor on row 1; Knowledge Day spans
       both columns on row 2, so its width = Exhibit + Visitor combined. */
    .pi-nav3 .pi-nav3-actions {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;   /* Exhibit hidden -> single column; Visitor + KD stack & align */
        justify-items: stretch !important;
        justify-content: stretch !important;
        align-content: center !important;
        gap: 0.3rem !important;
        margin: 0 !important;
        max-width: min(210px, 34vw) !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 3 !important;
        background: var(--k7-white, #fff) !important;
        padding-left: 0 !important;
    }
    .pi-nav3 .pi-nav3-btn {
        white-space: nowrap !important;
        font-size: 0.58rem !important;
        padding: 0.32rem 0.5rem !important;
        gap: 0.25rem !important;
        margin: 0 !important;
    }
    .pi-nav3 .pi-nav3-btn i { font-size: 0.68rem !important; }
    .pi-nav3 .pi-nav3-actions .pi-nav3-btn--kd {
        grid-column: 1 / -1 !important;          /* span both columns = Exhibit + Visitor width */
        width: 100% !important;
        justify-content: center !important;
    }
}
@media (min-width: 1200px) {
    /* Container is only 1140px wide here — keep sizes compact so the full menu
       + buttons fit with the equal end gaps and the links box never shrinks
       below its content (which would overlap the buttons). */
    .pi-nav3 .pi-nav3-row { gap: 1.25rem !important; }
    .pi-nav3 .pi-nav3-brand img { height: 60px !important; max-width: 195px !important; }
    .pi-nav3 .pi-nav3-links { gap: 0.45rem !important; }
    .pi-nav3 .pi-nav3-links a {
        font-size: 0.86rem !important;
        line-height: 1.35 !important;
        padding-top: 0.18rem !important;
        padding-bottom: 0.18rem !important;
    }
    .pi-nav3 .pi-nav3-actions { max-width: min(200px, 30vw) !important; }
    .pi-nav3 .pi-nav3-btn { font-size: 0.6rem !important; padding: 0.34rem 0.42rem !important; }
    .pi-nav3 .pi-nav3-btn i { font-size: 0.7rem !important; }
}
@media (min-width: 1400px) {
    .pi-nav3 .pi-nav3-row { gap: 1.5rem !important; }
    .pi-nav3 .pi-nav3-brand img { height: 68px !important; max-width: 220px !important; }
    .pi-nav3 .pi-nav3-links { gap: 0.5rem !important; }
    .pi-nav3 .pi-nav3-links a {
        font-size: clamp(0.86rem, 0.4vw + 0.68rem, 1rem) !important;
        line-height: 1.35 !important;
        padding: 0.2rem 0.12rem !important;
    }
    .pi-nav3 .pi-nav3-actions { max-width: min(230px, 28vw) !important; }
    .pi-nav3 .pi-nav3-btn { font-size: 0.66rem !important; padding: 0.38rem 0.55rem !important; }
}
/* Tight desktop 1024–1199px: full-text buttons are shown here, so the slightly
   larger base nav font overlaps the logo/buttons. Restore the smaller (compact)
   link size for this range only — ≥1200 / ≥1400 keep the larger text. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .pi-nav3 .pi-nav3-links a {
        font-size: clamp(0.64rem, 0.55vw + 0.5rem, 0.78rem) !important;
        line-height: 1.35 !important;
    }
}

/* ============================================================
   UNIFORM VERTICAL RHYTHM — every content section across the v9 pages
   (Home, About, IPEMA, Visitors, Exhibitors, Why, Committee, IPEMA Members,
   Articles, News, …) gets the SAME 40px top/bottom spacing, so the gaps
   above/below each section are consistent.
   Excluded: the full-bleed hero, the thin ribbon strip, the legacy page-header,
   and the bespoke Knowledge Day & form/Contact pages (their own layouts).
   ============================================================ */
.pi-home-redesign:not(.pi-kd-page):not(.pi-form-page) > section:not(.pi-v9-hero):not(.pi-v9-ribbon):not(.pi-page-header) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 0 !important;       /* kill extra section margins (e.g. gallery's margin-top) */
    margin-bottom: 0 !important;    /* so spacing is purely the uniform 40px padding */
}

/* ============================================================
   NAV3 DROPDOWN — force menus to open DOWNWARD, directly below their
   toggle (they were flipping up / off the top of the screen). Overrides
   Popper's inline position/transform on desktop.
   ============================================================ */
@media (min-width: 992px) {
    .pi-nav3-links li.dropdown { position: relative !important; }
    .pi-nav3-links .dropdown-menu.pi-nav3-dropdown {
        position: absolute !important;
        top: 100% !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        margin-top: 0 !important;
    }
    .pi-nav3-links .dropdown-menu.pi-nav3-dropdown.dropdown-menu-end {
        left: auto !important;
        right: 0 !important;
    }
}

/* ============================================================
   HOME "News" marquee — sliding photo cards. Reuses the IPEMA Members
   auto-scroll (.pi-marquee / .pi-marquee-track); only the card size/look
   is tuned for news photos (cover-filled, larger, rounded).
   ============================================================ */
.pi-marquee-section--news .pi-marquee-item {
    width: 300px !important;
    height: 190px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(20, 33, 61, 0.10) !important;
}
.pi-marquee-section--news .pi-marquee-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
@media (max-width: 575.98px) {
    .pi-marquee-section--news .pi-marquee-item {
        width: 220px !important;
        height: 140px !important;
    }
}

/* ============================================================
   NAV3 underline tweaks (desktop) — authoritative, keep at end.
   (1) active link keeps its underline, with a clear gap below the text.
   (2) hover no longer draws an underline.
   ============================================================ */
@media (min-width: 992px) {
    /* (2) remove the underline that appeared on hover */
    .pi-nav3 .pi-nav3-links a:hover::after { display: none !important; content: none !important; }

    /* (1) active underline — sits below the text with added spacing */
    .pi-nav3 .pi-nav3-links a { position: relative !important; }
    .pi-nav3 .pi-nav3-links a.is-active::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -6px !important;          /* gap between the text and the underline */
        height: 2px !important;
        background: currentColor !important;
        border-radius: 2px !important;
        transform: none !important;
        opacity: 1 !important;
    }
    /* Dropdown items render a trailing caret (::before): flex gap 0.35rem +
       caret margin-left 0.3rem + caret width 8px. The underline above uses
       right:0, so it stretches under that caret and looks shifted right of the
       label. Pull its right edge in by the caret region so the bar centres
       under the TEXT only (non-dropdown links have no caret, so they're fine). */
    .pi-nav3 .pi-nav3-links a.dropdown-toggle.is-active::after {
        right: calc(0.65rem + 8px) !important;
    }
}

/* ============================================================
   Section spacing parity — Knowledge Day & Visitors pages
   Normalise every content section's vertical rhythm to the home
   page's standard content padding: clamp(60px, 7vw, 90px).
   Scoped to .pi-kd-page / .pi-visitors-page so the home page
   (.pi-home-page) is unaffected. Hero (and the KD ribbon strip)
   keep their own full-bleed treatment and are excluded.
   ============================================================ */
.pi-visitors-page > section:not(.pi-v9-hero) {
    padding-top: clamp(60px, 7vw, 90px) !important;
    padding-bottom: clamp(60px, 7vw, 90px) !important;
}

/* Knowledge Day — tighter section rhythm. The standard 60–90px applied to
   every section stacked into 120–180px empty gaps between adjacent sections
   (and a tall gap above the Testimonials eyebrow). Halve it for a balanced,
   compact rhythm. Hero + ribbon keep their own treatment. */
.pi-kd-page > section:not(.pi-v9-hero):not(.pi-v9-ribbon) {
    padding-top: clamp(30px, 3.5vw, 46px) !important;
    padding-bottom: clamp(30px, 3.5vw, 46px) !important;
}

/* kd-bento ends with the "Register" CTA button — trim the space beneath it
   (the section's bottom padding) so it sits closer to the next section. */
.pi-kd-page > section.kd-bento:not(.pi-v9-hero):not(.pi-v9-ribbon) {
    padding-bottom: clamp(10px, 1.5vw, 18px) !important;
}

/* ============================================================
   International Media Partners — larger logos (desktop).
   Scoped to the reverse marquee track, which only this section
   uses, so National/Exhibitor marquees are unaffected. Mobile
   keeps the standard marquee item size.
   ============================================================ */
@media (min-width: 768px) {
    .pi-marquee-track.reverse .pi-marquee-item { width: 240px; height: 138px; }
    .pi-marquee-track.reverse .pi-marquee-item img { width: 96%; height: 96%; }
}

/* ============================================================
   NAV3 — tight laptops below 1024px only: icon-only CTAs to avoid overlap.
   From 1024px up, full icon + text buttons are shown (see block below).
   ============================================================ */
@media (min-width: 992px) and (max-width: 1023.98px) {
    .pi-nav3 .pi-nav3-collapse {
        display: contents !important;
    }
    .pi-nav3 .pi-nav3-brand img {
        height: 50px !important;
        max-width: min(160px, 17vw) !important;
    }
    .pi-nav3 .pi-nav3-links a {
        font-size: clamp(0.7rem, 0.45vw + 0.58rem, 0.82rem) !important;
        line-height: 1.35 !important;
        padding: 0.16rem 0.05rem !important;
    }
    .pi-nav3 .pi-nav3-actions {
        max-width: 96px !important;
        gap: 0.22rem !important;
        padding-left: 0 !important;
    }
    .pi-nav3 .pi-nav3-btn {
        position: relative !important;
        font-size: 0 !important;
        padding: 0.38rem !important;
        min-width: 2rem !important;
        justify-content: center !important;
    }
    .pi-nav3 .pi-nav3-btn i {
        font-size: 0.82rem !important;
        margin: 0 !important;
    }
    .pi-nav3 .pi-nav3-btn span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .pi-nav3 .pi-nav3-actions .pi-nav3-btn--kd {
        grid-column: 1 / -1 !important;
    }
}

/* 1024–1299px — full button labels (icon + text), compact sizing */
@media (min-width: 1024px) and (max-width: 1299.98px) {
    .pi-nav3 .pi-nav3-actions {
        max-width: min(210px, 28vw) !important;
        gap: 0.26rem !important;
    }
    .pi-nav3 .pi-nav3-btn {
        font-size: 0.54rem !important;
        line-height: 1.25 !important;
        padding: 0.28rem 0.38rem !important;
        gap: 0.2rem !important;
    }
    .pi-nav3 .pi-nav3-btn i {
        font-size: 0.66rem !important;
    }
    .pi-nav3 .pi-nav3-btn span {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ============================================================
   HOME LOGO MARQUEES — larger logos + tighter spacing.
   Scope: IPEMA Members, Supporting Associations (National &
   International) and Media Partners (National & International).
   Card size is UNCHANGED in every case — only the logo grows
   (less padding) and the space between cards shrinks (smaller gap).
   Appended last so it wins the cascade.
   ============================================================ */
/* tighter spacing between cards */
.pi-marquee-section--ipema .pi-marquee-track,
.pi-marquee-section--assoc-natl .pi-marquee-track,
.pi-marquee-section--assoc-intl .pi-marquee-track,
.pi-marquee-section--media-natl .pi-marquee-track,
.pi-marquee-section--media-intl .pi-marquee-track {
    gap: 1rem !important;
}

/* bigger logo inside the SAME card (minimal padding) */
.pi-marquee-section--ipema .pi-marquee-item,
.pi-marquee-section--assoc-natl .pi-marquee-item,
.pi-marquee-section--media-natl .pi-marquee-item,
.pi-marquee-section--media-intl .pi-marquee-item {
    padding: 0.15rem 0.3rem !important;
}
.pi-marquee-section--assoc-natl .pi-marquee-item img,
.pi-marquee-section--media-natl .pi-marquee-item img,
.pi-marquee-section--media-intl .pi-marquee-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}
/* (International Associations logos already fill the card edge-to-edge,
   so they only get the tighter spacing above — card height is unchanged.) */

/* ============================================================
   HOME LOGO MARQUEES — tighter heading rhythm.
   Reduce (a) the space inside the heading (subtitle -> accent bar)
   and (b) the space between the heading and the logo row, for:
   IPEMA Members, Supporting Associations (National & International),
   Media Partners (National & International) and Our Exhibitors.
   Card/logo sizes are untouched. Appended last to win the cascade.
   ============================================================ */
.pi-marquee-section--ipema .pi-marquee-heading,
.pi-marquee-section--assoc-natl .pi-marquee-heading,
.pi-marquee-section--assoc-intl .pi-marquee-heading,
.pi-marquee-section--media-natl .pi-marquee-heading,
.pi-marquee-section--media-intl .pi-marquee-heading,
.pi-marquee-section--exhibitors .pi-marquee-heading {
    margin-bottom: 0.9rem !important;     /* heading -> logo row */
}
.pi-marquee-section--ipema .pi-marquee-heading h2,
.pi-marquee-section--assoc-natl .pi-marquee-heading h2,
.pi-marquee-section--assoc-intl .pi-marquee-heading h2,
.pi-marquee-section--media-natl .pi-marquee-heading h2,
.pi-marquee-section--media-intl .pi-marquee-heading h2,
.pi-marquee-section--exhibitors .pi-marquee-heading h2 {
    margin-bottom: 0.3rem !important;     /* title -> subtitle */
}
.pi-marquee-section--ipema .pi-marquee-heading-bar,
.pi-marquee-section--assoc-natl .pi-marquee-heading-bar,
.pi-marquee-section--assoc-intl .pi-marquee-heading-bar,
.pi-marquee-section--media-natl .pi-marquee-heading-bar,
.pi-marquee-section--media-intl .pi-marquee-heading-bar,
.pi-marquee-section--exhibitors .pi-marquee-heading-bar {
    margin-top: 0.3rem !important;        /* subtitle -> accent bar */
}

/* ============================================================
   Home testimonial cards — show the FULL quote. The text was clamped
   to 4 lines (-webkit-line-clamp) with an oversized line-height, which
   cut off the longer testimonials. The flex track stretches all cards
   to equal height, so removing the clamp just lets the longest quote
   set the card height. Appended last to win the cascade.
   ============================================================ */
.pi-v9-testi-card p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    line-height: 1.7 !important;
}

/* =====================================================================
   PRIMARY CTA EMPHASIS  (Book a Stall / Free Visitor Registration /
   Knowledge Day Registration / Register Now)
   Targets ONLY the action buttons that link to the registration routes.
   Navbar (pi-nav3-btn / pi-brandstrip-cta / dropdown-item), sub-nav
   (kd-subnav-link) and plain text links use other classes and are NOT
   matched. Hero buttons (.pi-v9-hero-actions) get the animation but are
   pinned back to their original size. No markup/layout/gap changes.
   ===================================================================== */

@keyframes pi-cta-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 199, 44, 0)); }
    50%      { filter: drop-shadow(0 0 11px rgba(255, 199, 44, .9)); }
}
@keyframes pi-cta-shine {
    0%   { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
    8%   { opacity: 1; }
    45%  { transform: translateX(240%)  skewX(-18deg); opacity: 1; }
    46%, 100% { transform: translateX(240%) skewX(-18deg); opacity: 0; }
}

/* --- Attention animation: glow pulse + shine sweep (ALL CTAs, incl. hero) --- */
.pi-btn[href^="/ExhibitorRegistration"],
.pi-btn[href^="/VisitorRegistration"],
.pi-btn[href^="/KnowledgeDayRegistration"],
.pi-v9-btn[href^="/ExhibitorRegistration"],
.pi-v9-btn[href^="/VisitorRegistration"],
.pi-v9-btn[href^="/KnowledgeDayRegistration"],
.pi-magnet[href^="/ExhibitorRegistration"],
.pi-magnet[href^="/VisitorRegistration"],
.pi-magnet[href^="/KnowledgeDayRegistration"] {
    position: relative;
    overflow: hidden;
    animation: pi-cta-glow 2.4s ease-in-out infinite;
}
.pi-btn[href^="/ExhibitorRegistration"]::after,
.pi-btn[href^="/VisitorRegistration"]::after,
.pi-btn[href^="/KnowledgeDayRegistration"]::after,
.pi-v9-btn[href^="/ExhibitorRegistration"]::after,
.pi-v9-btn[href^="/VisitorRegistration"]::after,
.pi-v9-btn[href^="/KnowledgeDayRegistration"]::after,
.pi-magnet[href^="/ExhibitorRegistration"]::after,
.pi-magnet[href^="/VisitorRegistration"]::after,
.pi-magnet[href^="/KnowledgeDayRegistration"]::after {
    content: "";
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    z-index: 3;
    animation: pi-cta-shine 3.6s ease-in-out infinite;
}

/* --- Size boost: bigger button + text (everywhere EXCEPT hero & navbar) --- */
.pi-v9-btn[href^="/ExhibitorRegistration"]:not(.pi-v9-btn--lg),
.pi-v9-btn[href^="/VisitorRegistration"]:not(.pi-v9-btn--lg),
.pi-v9-btn[href^="/KnowledgeDayRegistration"]:not(.pi-v9-btn--lg) {
    font-size: 1.08rem !important;
    padding: 1.05rem 2rem !important;
}
.pi-v9-btn--lg[href^="/ExhibitorRegistration"],
.pi-v9-btn--lg[href^="/VisitorRegistration"],
.pi-v9-btn--lg[href^="/KnowledgeDayRegistration"] {
    font-size: 1.3rem !important;
    padding: 1.3rem 2.5rem !important;
}
.pi-btn[href^="/ExhibitorRegistration"]:not(.pi-btn-sm),
.pi-btn[href^="/VisitorRegistration"]:not(.pi-btn-sm),
.pi-btn[href^="/KnowledgeDayRegistration"]:not(.pi-btn-sm) {
    font-size: 1.04rem !important;
    padding: .95rem 2.15rem !important;
}

/* --- Hero: keep original size (animation already applied above) --- */
.pi-v9-hero-actions .pi-v9-btn[href^="/ExhibitorRegistration"],
.pi-v9-hero-actions .pi-v9-btn[href^="/VisitorRegistration"] {
    font-size: calc(1.05rem + 3px) !important;
    padding: 1.15rem 2rem !important;
}

/* --- Mobile: tame the boost so layouts/gaps don't break --- */
@media (max-width: 767.98px) {
    .pi-v9-btn[href^="/ExhibitorRegistration"]:not(.pi-v9-btn--lg),
    .pi-v9-btn[href^="/VisitorRegistration"]:not(.pi-v9-btn--lg),
    .pi-v9-btn[href^="/KnowledgeDayRegistration"]:not(.pi-v9-btn--lg) {
        font-size: calc(.9rem + 2px) !important;
        padding: .7rem 1.4rem !important;
    }
    .pi-v9-btn--lg[href^="/ExhibitorRegistration"],
    .pi-v9-btn--lg[href^="/VisitorRegistration"],
    .pi-v9-btn--lg[href^="/KnowledgeDayRegistration"] {
        font-size: calc(1rem + 2px) !important;
        padding: .85rem 1.6rem !important;
    }
    .pi-btn[href^="/ExhibitorRegistration"]:not(.pi-btn-sm),
    .pi-btn[href^="/VisitorRegistration"]:not(.pi-btn-sm),
    .pi-btn[href^="/KnowledgeDayRegistration"]:not(.pi-btn-sm) {
        font-size: calc(.85rem + 2px) !important;
        padding: .65rem 1.5rem !important;
    }
    /* hero stays at its phone size */
    .pi-v9-hero-actions .pi-v9-btn[href^="/ExhibitorRegistration"],
    .pi-v9-hero-actions .pi-v9-btn[href^="/VisitorRegistration"] {
        font-size: .7rem !important;
        padding: .45rem .7rem !important;
    }
}

/* --- Respect reduced-motion: keep emphasis, drop the motion --- */
@media (prefers-reduced-motion: reduce) {
    .pi-btn[href^="/ExhibitorRegistration"],
    .pi-btn[href^="/VisitorRegistration"],
    .pi-btn[href^="/KnowledgeDayRegistration"],
    .pi-v9-btn[href^="/ExhibitorRegistration"],
    .pi-v9-btn[href^="/VisitorRegistration"],
    .pi-v9-btn[href^="/KnowledgeDayRegistration"],
    .pi-magnet[href^="/ExhibitorRegistration"],
    .pi-magnet[href^="/VisitorRegistration"],
    .pi-magnet[href^="/KnowledgeDayRegistration"] {
        animation: none !important;
        filter: drop-shadow(0 0 8px rgba(255, 199, 44, .75));
    }
    .pi-btn[href^="/ExhibitorRegistration"]::after,
    .pi-btn[href^="/VisitorRegistration"]::after,
    .pi-btn[href^="/KnowledgeDayRegistration"]::after,
    .pi-v9-btn[href^="/ExhibitorRegistration"]::after,
    .pi-v9-btn[href^="/VisitorRegistration"]::after,
    .pi-v9-btn[href^="/KnowledgeDayRegistration"]::after,
    .pi-magnet[href^="/ExhibitorRegistration"]::after,
    .pi-magnet[href^="/VisitorRegistration"]::after,
    .pi-magnet[href^="/KnowledgeDayRegistration"]::after {
        animation: none !important;
        display: none !important;
    }
}

/* =====================================================================
   HOME logo marquees — clearer hover zoom for IPEMA Members, Supporting
   Associations (National & International), Media Partners (National &
   International) and Exhibitors. The logo grows on hover and is NOT
   clipped by the card; the marquee gets a little vertical breathing room
   so the enlarged logo shows fully, and the hovered card lifts above its
   neighbours. The auto-scroll already pauses on hover (.pi-marquee:hover).
   Touch devices keep the zoom disabled via the existing @media (hover:none).
   ===================================================================== */
.pi-home-page .pi-marquee { padding-block: 16px; }
.pi-home-page .pi-marquee-item:hover {
    overflow: visible;
    z-index: 5;
}
.pi-home-page .pi-marquee-item:hover img {
    transform: scale(1.2);
}

/* =====================================================================
   HOME advertisement banners — auto-rotating sponsor banners (1170x170),
   shown below the hero. Crossfade, one banner at a time. Timing is set
   for the current 8 banners (8 x 4s = 32s loop; each visible ~1/8 = 12.5%).
   If the number of banners changes, update the 32s duration and the 12.5%
   "hold" keyframe to keep one-at-a-time timing clean.
   ===================================================================== */
.pi-home-page .pi-ad-banners {
    background: #ffffff;
    padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}
.pi-home-page .pi-ad-carousel {
    position: relative;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    aspect-ratio: 1170 / 170;
    border-radius: 14px;
    overflow: hidden;
    background: #f4f4f4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.pi-home-page .pi-ad-carousel .pi-ad-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: pi-ad-rotate 32s infinite;
    animation-delay: calc(var(--i) * 4s);
}
@keyframes pi-ad-rotate {
    0%    { opacity: 0; }
    1.5%  { opacity: 1; }
    12.5% { opacity: 1; }
    14%   { opacity: 0; }
    100%  { opacity: 0; }
}
/* Older browsers without aspect-ratio: fall back to a fixed-ish height */
@supports not (aspect-ratio: 1 / 1) {
    .pi-home-page .pi-ad-carousel { height: clamp(52px, 14.5vw, 170px); }
}
@media (prefers-reduced-motion: reduce) {
    .pi-home-page .pi-ad-carousel .pi-ad-slide { animation: none; }
    .pi-home-page .pi-ad-carousel .pi-ad-slide:first-child { opacity: 1; }
}

/* =====================================================================
   HOME — National Media Partners: on DESKTOP the logos are a static
   (non-scrolling) centered row; on MOBILE they keep auto-scrolling.
   ===================================================================== */
@media (min-width: 768px) {
    /* turn the marquee into a static centered, wrapping row (no scroll) */
    .pi-home-page .pi-marquee-section--media-natl .pi-marquee {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .pi-home-page .pi-marquee-section--media-natl .pi-marquee-track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    /* the marquee duplicates logos x2 for the loop; hide the dupes when static */
    .pi-home-page .pi-marquee-section--media-natl .pi-marquee-dup { display: none; }
}

/* =====================================================================
   HOME — Media Partners + Venue Partner: two static columns (no scroll),
   each with an IPEMA-Members-style heading. Stacks on mobile.
   ===================================================================== */
.pi-home-page .pi-mp-vp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.pi-home-page .pi-mp-vp-col { text-align: center; }
.pi-home-page .pi-mp-vp-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 2rem;
}
@media (max-width: 767.98px) {
    .pi-home-page .pi-mp-vp-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Visitor Registration — fallback card shown when the Tickets99 widget
   cannot be embedded on the current host (non-whitelisted domain).
   ===================================================================== */
.pi-vr-fallback {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--pi-gray-50, #fafafa);
    border: 1px dashed var(--pi-gray-200, #e5e5e5);
    border-radius: 16px;
}
.pi-vr-fallback > i {
    display: block;
    font-size: 2.4rem;
    color: var(--v9-gold, #c49400);
    margin-bottom: .6rem;
}
.pi-vr-fallback h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 .5rem;
    color: var(--v9-ink, #111);
}
.pi-vr-fallback p {
    color: var(--pi-gray-600, #555);
    margin: 0 0 1.25rem;
}

/* =====================================================================
   HOME — "Supported By" tile: four separate government logos in a row
   (replaces the old single combined image). Footer uses the existing
   .pi-footer-supported-logos flex row.
   ===================================================================== */
/* tighten the gold tile's label/logos gap so all four logos fit on one line */
.pi-home-page .pi-v9-org-tile--gold { gap: 1.1rem; }
.pi-home-page .pi-v9-org-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.65rem;
    flex: 1;
    min-width: 0;
}
.pi-home-page .pi-v9-org-logos img {
    height: 70px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 575.98px) {
    .pi-home-page .pi-v9-org-logos img { height: 46px; }
}

/* =====================================================================
   FOOTER — "Supported By" + "Subsidiary By" as two white boxes.
   ===================================================================== */
.pi-footer-partners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 767.98px) {
    .pi-footer-partners { grid-template-columns: 1fr; }
}
.pi-footer-partner-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem 1rem 1.4rem;
    text-align: center;
}
/* High specificity + !important to beat the global ".pi-footer p { color/font-weight !important }" override */
.pi-footer p.pi-footer-partner-title {
    font-size: 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-weight: 800 !important;
    color: #000000 !important;
    margin: 0 0 1rem;
}

/* Subsidiary By — enlarge the first logo (Chicken India) so it reads at the
   same visual weight as the others. */
.pi-footer-supported-logos img.pi-footer-sub-first {
    height: 68px;
}

/* Footer copyright — keep on one line on desktop (override the global .pi-footer p 1rem) */
.pi-footer-bottom .pi-footer-copy {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}
@media (min-width: 992px) {
    .pi-footer-bottom .pi-footer-copy { white-space: nowrap; }
}

/* =====================================================================
   Tablet (768–991px): fix home About "watch" buttons overflowing their
   pills — the desktop 40%-wide actions box squeezed the buttons. Give the
   actions full width and let button text wrap instead of overflowing.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pi-v9-about-watch-actions {
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }
    .pi-v9-about-watch-actions .pi-v9-btn {
        flex: 1 1 auto;
        white-space: normal;
    }
}

/* =====================================================================
   Hide all Exhibitor CTA buttons site-wide (Book a Stall / Book Your
   Stall / Exhibit / Become Exhibitor). They all link to
   /ExhibitorRegistration; this hides the button/nav variants only
   (the page itself is untouched). Reversible — remove this block to restore.
   ===================================================================== */
a.pi-btn[href^="/ExhibitorRegistration"],
a.pi-v9-btn[href^="/ExhibitorRegistration"],
a.pi-magnet[href^="/ExhibitorRegistration"],
a.pi-btn-exhibit[href^="/ExhibitorRegistration"],
a.pi-nav3-btn[href^="/ExhibitorRegistration"],
a.pi-brandstrip-cta[href^="/ExhibitorRegistration"],
a.dropdown-item[href^="/ExhibitorRegistration"],
a.kd-subnav-link[href^="/ExhibitorRegistration"] {
    display: none !important;
}

/* =====================================================================
   MOBILE NAV — Visitor + Knowledge Day quick-reg pills placed to the
   LEFT of the burger icon (≤991.98px). Hidden on desktop; the in-menu
   .pi-nav3-actions continues to handle desktop. The in-menu actions are
   removed from the mobile dropdown so the buttons only appear on the bar.
   ===================================================================== */
.pi-nav3-mactions { display: none; }   /* desktop: hidden */

@media (max-width: 991.98px) {
    /* brand takes the free space so the pills + burger sit together at the right */
    .pi-nav3 .pi-nav3-brand { margin-right: auto !important; }
    .pi-nav3-mactions {
        display: flex !important;
        flex-direction: column;
        gap: 0.3rem !important;
        margin-left: 0 !important;
        align-items: stretch;
        flex: 0 0 auto;
    }
    .pi-nav3-mbtn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        white-space: nowrap;
        font-size: 0.62rem !important;
        font-weight: 700;
        line-height: 1;
        padding: 0.4rem 0.6rem;
        border-radius: 999px;
        text-decoration: none !important;
        letter-spacing: 0.01em;
    }
    .pi-nav3-mbtn i { font-size: 0.8rem; }
    .pi-nav3-mbtn--visitor {
        background: var(--pi-yellow, #ffd400);
        color: #1a1a1a !important;
        border: 1px solid var(--pi-yellow, #ffd400);
    }
    .pi-nav3-mbtn--kd {
        background: #fff;
        color: #1a1a1a !important;
        border: 1px solid rgba(0,0,0,0.45);
    }
    /* burger sits immediately to the right of the pills */
    .pi-nav3 .pi-nav3-burger { margin-left: 0.5rem !important; }
    /* remove the registration buttons from the dropdown menu on mobile */
    .pi-nav3 .pi-nav3-collapse .pi-nav3-actions { display: none !important; }
}

/* =====================================================================
   KNOWLEDGE DAY REGISTRATION PAGE — same dark navbar as the Knowledge
   Day page so the kd-logo-26 (white + gold artwork) is visible. Scoped
   to .pi-kd-reg-page only; this brings the nav colour across WITHOUT the
   full .pi-kd-page layout behaviour (sticky subnav, section padding, etc).
   ===================================================================== */
body:has(.pi-kd-reg-page) .pi-nav3 {
    background: linear-gradient(135deg, #0c0d10 0%, #14161c 45%, #2d2410 100%) !important;
    border-bottom: 4px solid var(--v9-gold, #c49400) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
body:has(.pi-kd-reg-page) .pi-nav3-brand img {
    height: 64px !important;
    max-width: 220px !important;
}
body:has(.pi-kd-reg-page) .pi-nav3-links a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 700;
}
body:has(.pi-kd-reg-page) .pi-nav3-links a:hover,
body:has(.pi-kd-reg-page) .pi-nav3-links a.is-active,
body:has(.pi-kd-reg-page) .pi-nav3-links a.dropdown-toggle.is-active {
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3-links a.dropdown-toggle::after {
    color: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(255, 255, 255, 0.85) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown {
    background: #14161c !important;
    border: 1px solid rgba(255, 216, 107, 0.22) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.40) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 600 !important;
}
body:has(.pi-kd-reg-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item i {
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item:hover,
body:has(.pi-kd-reg-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item:focus {
    background: rgba(255, 216, 107, 0.10) !important;
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-item.pi-highlight {
    background: rgba(255, 216, 107, 0.14) !important;
    color: var(--v9-gold, #ffd86b) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3 .dropdown-menu.pi-nav3-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.10) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3-burger span {
    background: #ffffff !important;
}
/* Desktop quick-reg buttons on the dark nav: the Knowledge Day button
   defaults to a WHITE background (fine on the normal white nav, wrong here).
   Make it a dark/outline button so it reads on the dark KD-reg navbar. */
body:has(.pi-kd-reg-page) .pi-nav3-btn--kd {
    background: #14213D !important;
    color: #ffffff !important;
    border-color: var(--v9-gold, #c49400) !important;
}
body:has(.pi-kd-reg-page) .pi-nav3-btn--kd:hover {
    background: var(--v9-gold, #c49400) !important;
    color: #14213D !important;
    border-color: var(--v9-gold, #c49400) !important;
}
/* The desktop actions container has a WHITE background (fine on the white nav,
   shows as a white box on the dark KD-reg nav). Make it transparent so the
   dark navbar shows through behind the buttons. */
body:has(.pi-kd-reg-page) .pi-nav3 .pi-nav3-actions {
    background: transparent !important;
}
@media (max-width: 991.98px) {
    body:has(.pi-kd-reg-page) .pi-nav3 .pi-nav3-collapse {
        background: #14161c !important;
        border-top: 1px solid rgba(255, 216, 107, 0.18);
    }
    body:has(.pi-kd-reg-page) .pi-nav3-links a { color: rgba(255, 255, 255, 0.92) !important; }
    body:has(.pi-kd-reg-page) .pi-nav3-links a:hover { color: var(--v9-gold, #ffd86b) !important; }
    /* keep the mobile quick-reg pills readable on the dark nav */
    body:has(.pi-kd-reg-page) .pi-nav3-mbtn--kd {
        background: transparent;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.55);
    }
}

/* =====================================================================
   HOME — International Media Partners: enlarge the logos so they don't
   read as small inside the card. object-fit:contain already maxes each
   logo to the card, so we scale up (cropping the logos' white margins)
   to make them visually bigger within the SAME card. Three logos already
   read at a good size and are excluded: AA, ZOO, GAM.
   ===================================================================== */
.pi-marquee-section--media-intl .pi-marquee-item img:not([src$="AA%404x-100.jpg"]):not([src$="ZOO%404x-100.jpg"]):not([src$="GAM%404x-100.jpg"]) {
    transform: scale(1.6) !important;
}
/* International Media Partners — NO hover zoom: keep every logo at its resting
   size on hover (excluded three stay at natural size; the rest stay at 1.6). */
.pi-marquee-section--media-intl .pi-marquee-item:hover img {
    transform: none !important;
}
.pi-marquee-section--media-intl .pi-marquee-item:hover img:not([src$="AA%404x-100.jpg"]):not([src$="ZOO%404x-100.jpg"]):not([src$="GAM%404x-100.jpg"]) {
    transform: scale(1.6) !important;
}

/* =====================================================================
   NO on-hover zoom / image-big effect on the home logo sections — each
   logo stays at its resting size when hovered: IPEMA Members, Exhibitors,
   Supporting Associations (National & International), National Media
   Partners, Media Partners & Venue Partner. (International Media Partners
   is handled above — its enlarged logos keep their resting size too.)
   ===================================================================== */
.pi-marquee-section--ipema .pi-marquee-item:hover img,
.pi-marquee-section--exhibitors .pi-marquee-item:hover img,
.pi-marquee-section--assoc-natl .pi-marquee-item:hover img,
.pi-marquee-section--assoc-intl .pi-marquee-item:hover img,
.pi-marquee-section--media-natl .pi-marquee-item:hover img,
.pi-mp-vp-section .pi-marquee-item:hover img {
    transform: none !important;
}