#navbar a[aria-label="Citimedia home"] img { height: 34px !important; width: auto !important; }
.site-nav .brand img { width: 180px !important; height: auto !important; }
.detail-logo { width: 180px !important; height: auto !important; }
.topbar .logo { width: 195px !important; height: auto !important; }
@media (max-width:560px) {
    #navbar a[aria-label="Citimedia home"] img { height: 30px !important; }
    .site-nav .brand img,.detail-logo { width: 150px !important; }
    .topbar .logo { width: 165px !important; }
}

/* Preserve Poppins' natural spacing across all display and component headings. */
h1, h2, h3, h4, h5, h6 { letter-spacing: normal !important; }
html, body { max-width: 100%; overflow-x: clip; }

/* Citimedia tactile surface system: glass, soft UI and physical controls. */
:root {
    --citi-soft-light: rgba(255,255,255,.72);
    --citi-soft-shadow: rgba(31,42,36,.16);
    --citi-dark-highlight: rgba(255,255,255,.055);
    --citi-dark-shadow: rgba(0,0,0,.62);
}

/* Glass is reserved for navigation and floating overlays. */
#navbar.glass-nav,
.site-nav,
.topbar,
.verticals-nav-panel,
.ecosystem-nav-panel,
.mobile-panel,
.citi-chat-panel,
.voice-call-card,
.voice-audio-player {
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 48px rgba(0,0,0,.24);
}

/* Dark neumorphic content surfaces. */
.voice-platform-pillar,
.voice-agent-card,
.citi-testimonial-card,
.contact-demo-card,
.conversation-card {
    border-color: rgba(255,255,255,.055) !important;
    box-shadow: -12px -12px 28px var(--citi-dark-highlight), 14px 14px 34px var(--citi-dark-shadow), inset 1px 1px 0 rgba(255,255,255,.045), inset -1px -1px 0 rgba(0,0,0,.42) !important;
}
.voice-platform-pillar {
    background: linear-gradient(145deg,#1a1718,#100e0f) !important;
}
.voice-platform-pillar:hover,
.voice-agent-card:hover,
.voice-agent-card.active,
.citi-testimonial-card:hover {
    box-shadow: -7px -7px 20px rgba(255,255,255,.04), 9px 9px 24px rgba(0,0,0,.64), inset 4px 4px 10px rgba(0,0,0,.3), inset -3px -3px 8px rgba(255,255,255,.025) !important;
}

/* Light neumorphic content surfaces used throughout supporting pages. */
.option-card,
.action-card,
.campaign-card,
.agent-journey-card,
.location-card,
.metro-data-card,
.metro-price-card,
.pricing-product-card {
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: -10px -10px 24px var(--citi-soft-light), 12px 12px 28px var(--citi-soft-shadow), inset 1px 1px 0 rgba(255,255,255,.88), inset -1px -1px 0 rgba(28,45,35,.08) !important;
}

/* Image-led media inventory cards use a dark, restrained neumorphic frame. */
.pricing-product-card {
    border: 1px solid rgba(255,255,255,.09) !important;
    background: #0c0e0d !important;
    box-shadow: -9px -9px 20px rgba(255,255,255,.035), 13px 13px 28px rgba(0,0,0,.72), inset 1px 1px 0 rgba(255,255,255,.12), inset -2px -2px 6px rgba(0,0,0,.5) !important;
    transition: transform .34s ease, box-shadow .34s ease !important;
}
.pricing-product-card:hover,
.pricing-product-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: -7px -7px 18px rgba(255,255,255,.03), 10px 10px 24px rgba(0,0,0,.66), inset 3px 3px 9px rgba(0,0,0,.3), inset -2px -2px 6px rgba(255,255,255,.035) !important;
}

/* Skeuomorphic controls keep a physical raised and pressed response. */
.citi-btn,
.home-button,
button.voice-primary-control,
button.voice-audio-toggle {
    border: 1px solid rgba(255,255,255,.36) !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.58), inset 0 -4px 0 rgba(0,0,0,.28), 0 9px 18px rgba(0,0,0,.24), 0 2px 0 rgba(0,0,0,.2) !important;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.citi-btn:hover,
.home-button:hover,
button.voice-primary-control:hover,
button.voice-audio-toggle:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.03);
}
.citi-btn:active,
.home-button:active,
button.voice-primary-control:active,
button.voice-audio-toggle:active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 4px 9px rgba(0,0,0,.32), inset 0 -1px 0 rgba(255,255,255,.24), 0 3px 8px rgba(0,0,0,.22) !important;
}

@media (prefers-reduced-motion: reduce) {
    .citi-btn,.home-button,button.voice-primary-control,button.voice-audio-toggle { transition: none !important; }
}