/* Hero Features */
 .hero-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 2.5rem; }
 .hero-feature-item { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; text-align: center; transition: all .3s ease; }
 .hero-feature-item:hover { background: rgba(255,255,255,0.15); transform: translateY(-4px); }
 .hero-feature-item i { font-size: 2rem; color: var(--accent-gold); margin-bottom: 12px; }
 .hero-feature-item h4 { color: var(--white); font-size: 1rem; margin-bottom: 4px; }
 .hero-feature-item p { color: rgba(255,255,255,0.7); font-size: .875rem; margin: 0; }

 /* Service Cards */
 .service-card { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 14px; transition: all .3s ease; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
 .service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--primary-blue); }
 .service-card h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; color: var(--primary-navy); font-size: 1.25rem;}
 .service-card h3 i { color: var(--primary-blue); font-size: 1.5rem; }
 .service-card p { color: var(--text-medium); line-height: 1.7; margin-bottom: 0.75rem; flex-grow: 1; }
 .service-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; }
 .service-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--text-medium); border-bottom: 1px solid var(--border-gray); font-size: .9rem; }
 .service-list li:last-child { border-bottom: none; }
 .service-list li i { color: var(--success-green); font-size: .875rem; }

 /* Challenge / Solution Table */
 .challenge-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem; }
 .challenge-table th { background: var(--primary-navy); color: var(--white); padding: .875rem 1rem; text-align: left; font-weight: 600; }
 .challenge-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--border-gray); vertical-align: top; }
 .challenge-table tr:nth-child(even) { background: var(--light-gray); }
 .challenge-table td:first-child { font-weight: 600; color: var(--primary-navy); }

 /* Engagement Table */
 .engagement-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem; }
 .engagement-table th { background: var(--primary-navy); color: var(--white); padding: .875rem 1rem; text-align: left; font-weight: 600; }
 .engagement-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--border-gray); vertical-align: top; }
 .engagement-table tr:nth-child(even) { background: var(--light-gray); }
 .engagement-table td:first-child { font-weight: 600; color: var(--primary-navy); white-space: nowrap; }

 /* Benefit Highlights */
 .benefit-highlight { background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%); border-left: 4px solid var(--primary-blue); padding: 1.25rem; border-radius: 0 8px 8px 0; margin-bottom: 1rem; }
 .benefit-highlight h4 { color: var(--primary-navy); margin-bottom: .5rem; display: flex; align-items: center; gap: 10px;}
 .benefit-highlight h4 i { color: var(--primary-blue); }
 .benefit-highlight p { color: var(--text-medium); font-size: .9375rem; margin: 0; }

 /* Process Steps */
 .process-step { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 1rem; text-align: center; transition: all .3s ease; }
 .process-step:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
 .process-step .step-number { width: 48px; height: 48px; background: var(--primary-blue); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; margin: 0 auto 1rem; }
 .process-step h4 { color: var(--primary-navy); margin-bottom: .5rem; }
 .process-step p { color: var(--text-medium); font-size: .9375rem; }

 
 .process-step { transition: all 0.35s ease; cursor: default; }
 .process-step:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); border-color: var(--primary-blue); }
 .process-step .step-number { border-radius: 14px !important; background: linear-gradient(135deg, var(--primary-blue) 0%, #0068b8 100%) !important; font-size: 1.3rem !important; box-shadow: 0 4px 16px rgba(0,82,155,0.25) !important; animation: stepPulse 3s ease-in-out infinite; }
 .process-step:hover .step-number { background: linear-gradient(135deg, var(--accent-gold) 0%, #d4a83a 100%) !important; color: var(--primary-navy) !important; transform: scale(1.12) rotate(-3deg); box-shadow: 0 8px 24px rgba(201,162,39,0.35) !important; }
 .process-step h3 { transition: color 0.3s ease; }
 .process-step:hover h3 { color: var(--primary-blue); }
 .process-step::after { content: ''; position: absolute; top: 28px; left: 50%; transform: translateX(-50%) scale(0); width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); z-index: 3; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
 .process-step:hover::after { transform: translateX(-50%) scale(1); }
 @keyframes stepPulse { 0%,100% { box-shadow: 0 4px 16px rgba(0,82,155,0.25); } 50% { box-shadow: 0 4px 24px rgba(0,82,155,0.45), 0 0 0 6px rgba(0,82,155,0.08); } }
 .process-steps:hover .step-number { animation-play-state: paused; }
/* Bundle Cards */
 .bundle-card { background: var(--white); border: 2px solid var(--border-gray); border-radius: 16px; padding: 1rem; transition: all .3s ease; }
 .bundle-card:hover { border-color: var(--primary-blue); box-shadow: var(--shadow-md); }
 .bundle-card h4 { color: var(--primary-navy); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem;}
 .bundle-card h4 i { color: var(--primary-blue); }
 .bundle-card ul { list-style: none; padding: 0; margin: 0; }
 .bundle-card ul li { padding: .4rem 0; color: var(--text-medium); font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
 .bundle-card ul li i { color: var(--success-green); font-size: .75rem; }

 /* Location Cards */
 .location-card { background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 1rem; text-align: center; transition: all .3s ease; }
 .location-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
 .location-card i { font-size: 2rem; color: var(--primary-blue); margin-bottom: .75rem; }
 .location-card h4 { color: var(--primary-navy); margin-bottom: .25rem; }
 .location-card p { color: var(--text-medium); font-size: .875rem; margin: 0; }

 /* Subpage Link */
 .subpage-link { display: flex; align-items: center; gap: 1rem; background: var(--white); border: 1px solid var(--border-gray); border-radius: 12px; padding: 1rem; text-decoration: none; color: inherit; transition: all .3s ease; margin-top: auto; }
 .subpage-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary-blue); }
 .subpage-link .icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
 .subpage-link .icon i { font-size: 1.25rem; color: var(--primary-blue); }
 .subpage-link .content { flex: 1; }
 .subpage-link .content h4 { color: var(--primary-navy); margin-bottom: .25rem; font-size: 1rem; }
 .subpage-link .content p { color: var(--text-medium); font-size: .875rem; margin: 0; }
 .subpage-link .arrow { color: var(--primary-blue); font-size: 1.125rem; }

 /* Integration Banner */
 .integration-banner { background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%); color: var(--white); border-radius: 16px; padding: 3rem; margin: 2rem 0; }
 .integration-banner h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 1rem; }
 .integration-banner p { color: rgba(255,255,255,.85); line-height: 1.8; max-width: 900px; }
 .integration-banner .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
 .integration-banner .stat { text-align: center; }
 .integration-banner .stat .num { font-size: 2rem; font-weight: 700; color: var(--accent-gold); }
 .integration-banner .stat .lbl { font-size: .85rem; color: rgba(255,255,255,.7); }

 /* -- Challenge / Solution Accordion Cards -- */
 .challenge-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 1.5rem; }
 .challenge-card {
 background: var(--white); border: 1px solid var(--border-gray); border-radius: 10px;
 overflow: hidden; transition: all .3s ease; cursor: pointer;
 }
 .challenge-card:hover { border-color: var(--primary-blue); box-shadow: var(--shadow-md); }
 .challenge-card-header {
 display: grid; grid-template-columns: 1fr 1.2fr 140px; gap: 1rem; align-items: center;
 padding: 1rem 1.25rem; position: relative;
 }
 .challenge-card-header::before {
 content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
 background: var(--accent-gold); border-radius: 10px 0 0 10px;
 }
 .challenge-card-header.challenge-green::before { background: var(--success-green); }
 .challenge-card-header.challenge-amber::before { background: var(--accent-gold); }
 .challenge-card-header > div { font-size: .9rem; }
 .challenge-card-header .cc-challenge { font-weight: 600; color: var(--primary-navy); }
 .challenge-card-header .cc-solution { color: var(--text-medium); }
 .challenge-card-header .cc-delivered { font-weight: 600; color: var(--primary-blue); text-align: right; }
 .challenge-card-body {
 max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
 background: #f8fafc; border-top: 1px solid var(--border-gray);
 }
 .challenge-card.open .challenge-card-body { max-height: 400px; padding: 1rem 1.25rem; }
 .challenge-card-toggle {
 position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
 color: var(--text-light); font-size: .875rem; transition: transform .3s ease;
 display: none;
 }
 .challenge-card.open .challenge-card-toggle { transform: translateY(-50%) rotate(180deg); }

 /* -- Engagement Tabs -- */
 .engagement-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.75rem; border-bottom: 2px solid var(--border-gray); padding-bottom: .5rem; }
 .engagement-tab {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: .625rem 1.25rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
 cursor: pointer; border: none; background: transparent; color: var(--text-medium);
 transition: all .2s; white-space: nowrap;
 }
 .engagement-tab i {
 width: 28px;
 height: 28px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(0,102,204,0.08);
 border-radius: 8px;
 font-size: 0.85rem;
 transition: all 0.3s ease;
    overflow: hidden; }
 .engagement-tab:hover i {
 background: rgba(0,102,204,0.15);
 transform: scale(1.1);
    overflow: hidden; }
 .engagement-tab.active i {
 background: rgba(255,255,255,0.2);
    overflow: hidden; }
 .engagement-tab:hover { background: var(--light-gray); color: var(--primary-navy); }
 .engagement-tab.active { background: var(--primary-blue); color: var(--white); }
 .engagement-panel { display: none; opacity: 0; }
 .engagement-panel.active { display: block; animation: fadeIn .3s ease forwards; }
 
 @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 .engagement-panel-inner {
 background: var(--white); border: 1px solid var(--border-gray); border-radius: 16px;
 padding: 1.75rem; display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem 2rem;
 box-shadow: 0 8px 26px rgba(10,37,64,.06);
 }
 /* Lead description spans the top, larger and clearly the headline */
 .engagement-panel-inner .ep-desc {
 grid-column: 1 / -1;
 color: var(--text-dark); line-height: 1.7; font-size: 1.05rem;
 padding-left: 1rem; border-left: 4px solid var(--primary-blue);
 }
 /* Meta becomes a compact 3-up stat strip, not a tall sparse column */
 .engagement-panel-inner .ep-meta {
 grid-column: 1 / -1;
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
 }
 .engagement-panel-inner .ep-meta-item {
 background: linear-gradient(160deg,#ffffff 0%,#f1f7fd 100%);
 border: 1px solid #dce8f3; border-radius: 12px; padding: 1.1rem 1.2rem;
 }
 .engagement-panel-inner .ep-meta-item label {
 font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
 color: var(--primary-blue); font-weight: 700; display: block; margin-bottom: .35rem;
 }
 .engagement-panel-inner .ep-meta-item span { color: var(--primary-navy); font-weight: 700; font-size: 1.02rem; }
 .engagement-panel-inner .ep-visual { grid-column: 1 / -1; }
 @media (max-width: 768px) {
 .engagement-panel-inner { padding: 1.25rem; grid-template-columns: 1fr; }
 .engagement-panel-inner .ep-meta { grid-template-columns: 1fr; }
 }

 /* -- Process Timeline -- */
 .process-timeline {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0.85rem;
 padding: 1rem 0;
 }
 .process-timeline::before { display: none; }
 .timeline-step {
 text-align: center;
 padding: 1.5rem 1.25rem;
 background: var(--white);
 border: 1px solid var(--border-gray);
 border-radius: 12px;
 transition: box-shadow .25s ease, transform .25s ease;
 }
 .timeline-step:hover { box-shadow: 0 8px 24px rgba(10,37,64,.08); transform: translateY(-3px); }
 .timeline-step .tl-icon {
 width: 62px; height: 62px; border-radius: 50%; background: var(--primary-light);
 border: 2px solid var(--primary-blue); display: flex; align-items: center; justify-content: center;
 margin: 0 auto .85rem; font-size: 1.4rem; color: var(--primary-blue);
 transition: all .3s ease;
 }
 .timeline-step:hover .tl-icon { background: var(--primary-blue); color: var(--white); }
 .timeline-step .tl-title { font-weight: 700; color: var(--primary-navy); font-size: 1.02rem; margin-bottom: .4rem; }
 .timeline-step .tl-desc {
 font-size: .85rem; color: var(--text-medium); line-height: 1.55;
 opacity: 1; margin: 0;
 }

 /* -- Material Swatches -- */
 .material-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
 .material-swatch {
 display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
 background: var(--white); border: 1px solid var(--border-gray); border-radius: 8px;
 transition: all .2s;
 }
 .material-swatch:hover { border-color: var(--primary-blue); box-shadow: var(--shadow-sm); }
 .material-swatch .swatch-color {
 width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
 border: 2px solid var(--border-gray);
 }
 .swatch-silver { background: linear-gradient(135deg, #c0c0c0, #e8e8e8); }
 .swatch-gold { background: linear-gradient(135deg, #d4af37, #f0d878); }
 .swatch-green { background: linear-gradient(135deg, #2e8b57, #5cb85c); }
 .swatch-dark { background: linear-gradient(135deg, #4a4a4a, #6a6a6a); }
 .material-swatch .swatch-info { flex: 1; }
 .material-swatch .swatch-info strong { font-size: .85rem; color: var(--primary-navy); display: block; }
 .material-swatch .swatch-info span { font-size: .75rem; color: var(--text-light); }

 /* -- Location Cards Enhanced -- */
 .location-card .flag { font-size: 2.5rem; margin-bottom: .5rem; }
 .location-card .tz { font-size: .75rem; color: var(--text-light); margin-top: .25rem; }

 /* -- Hero Trust Badges -- */
 .hero-trust-badges { display: flex; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
 .trust-badge { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.7); }
 .trust-badge i { color: var(--accent-gold); }

 /* -- Enhanced CTA Block -- */
 .cta-visual {
 background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%);
 border-radius: 16px; padding: 3rem; color: var(--white); text-align: center;
 position: relative; overflow: hidden;
 }
 .cta-visual::before {
 content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px;
 background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
 border-radius: 50%;
 }
 .cta-visual .cta-icon { font-size: 2.5rem; color: var(--accent-gold); margin-bottom: 1rem; }
 .cta-visual h2 { color: var(--white); font-size: 2rem; margin-bottom: .75rem; }
 .cta-visual p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 1.5rem; }
 .cta-visual .cta-btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
 .cta-visual .cta-tools { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; font-size: .875rem; }
 .cta-visual .cta-tools a { color: var(--accent-gold); text-decoration: none; }
 .cta-visual .cta-tools a:hover { text-decoration: underline; }

 /* -- Section Watermark Headers -- */
 .section-watermark { position: relative; }
 .section-watermark .watermark-num {
 position: absolute; top: -1rem; left: 0; font-size: 6rem; font-weight: 700;
 color: var(--light-gray); line-height: 1; z-index: 0; user-select: none;
 }
 .section-watermark .section-header { position: relative; z-index: 1; }

 /* -- Sticky Mobile CTA -- */
 .sticky-mobile-cta {
 display: none; position: fixed; bottom: 0; left: 0; right: 0;
 background: var(--white); border-top: 1px solid var(--border-gray);
 padding: .75rem 1rem; z-index: 100; box-shadow: 0 -4px 12px rgba(0,0,0,.1);
 justify-content: center; gap: .75rem;
 }
 .sticky-mobile-cta a { flex: 1; text-align: center; }



 /* ====== INTERACTIVE ICON UPGRADES ====== */

 /* -- Hero Feature Items -- */
 .hero-feature-item i {
 width: 64px;
 height: 64px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(201,162,39,0.15);
 border-radius: 50%;
 margin-bottom: 12px;
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 animation: iconFloat 3s ease-in-out infinite;
    overflow: hidden; }
 .hero-feature-item:nth-child(2) i { animation-delay: 0.5s; }
 .hero-feature-item:nth-child(3) i { animation-delay: 1s; }
 .hero-feature-item:nth-child(4) i { animation-delay: 1.5s; }
 .hero-feature-item:hover i {
 background: rgba(201,162,39,0.3);
 transform: scale(1.15) rotate(-5deg);
 box-shadow: 0 8px 24px rgba(201,162,39,0.25);
    overflow: hidden; }
 @keyframes iconFloat {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-6px); }
 }

 /* -- Trust Badges -- */
 .trust-badge i {
 width: 28px;
 height: 28px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(201,162,39,0.15);
 border-radius: 50%;
 font-size: 0.75rem;
 margin-right: 4px;
 transition: all 0.3s ease;
    overflow: hidden; }
 .trust-badge:hover i {
 background: rgba(201,162,39,0.3);
 transform: scale(1.2);
    overflow: hidden; }

 /* -- Service Card h3 Icons -- */
 .service-card h3 {
 display: flex;
 align-items: center;
 gap: 12px;
 }
 .service-card h3 i {
 width: 48px;
 height: 48px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, rgba(0,102,204,0.08) 0%, rgba(0,102,204,0.03) 100%);
 border-radius: 12px;
 font-size: 1.25rem;
 flex-shrink: 0;
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; }
 .service-card:hover h3 i {
 background: linear-gradient(135deg, rgba(0,102,204,0.15) 0%, rgba(0,102,204,0.06) 100%);
 transform: scale(1.12) rotate(-5deg);
 box-shadow: 0 6px 18px rgba(0,102,204,0.12);
    overflow: hidden; }

 /* -- Benefit Highlight Icons -- */
 .benefit-highlight h4 i {
 width: 36px;
 height: 36px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(0,102,204,0.08);
 border-radius: 10px;
 font-size: 1rem;
 transition: all 0.3s ease;
    overflow: hidden; }
 .benefit-highlight:hover h4 i {
 background: rgba(0,102,204,0.15);
 transform: scale(1.1) rotate(-3deg);
    overflow: hidden; }

 /* -- Bundle Card Icons -- */
 .bundle-card h4 i {
 width: 40px;
 height: 40px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, rgba(0,102,204,0.08) 0%, rgba(0,102,204,0.03) 100%);
 border-radius: 10px;
 font-size: 1.15rem;
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; }
 .bundle-card:hover h4 i {
 transform: scale(1.12) rotate(-5deg);
 box-shadow: 0 6px 18px rgba(0,102,204,0.12);
 }

 /* -- Location Card Icons -- */
 .location-card i:first-child,
 .location-card .flag:first-child {
 width: 64px;
 height: 64px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, rgba(0,102,204,0.08) 0%, rgba(0,102,204,0.03) 100%);
 border-radius: 50%;
 font-size: 1.75rem;
 margin-bottom: 0.75rem;
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; }
 .location-card:hover i:first-child,
 .location-card:hover .flag:first-child {
 transform: scale(1.1) rotate(-5deg);
 background: linear-gradient(135deg, rgba(0,102,204,0.15) 0%, rgba(0,102,204,0.06) 100%);
 box-shadow: 0 6px 18px rgba(0,102,204,0.12);
    overflow: hidden; }
 .location-card .tz i {
 width: auto;
 height: auto;
 display: inline;
 background: none;
 border-radius: 0;
 font-size: 0.75rem;
    overflow: hidden; }

 /* -- Integration Banner Stat Icons -- */
 .integration-banner .stat .num {
 background: linear-gradient(135deg, #c9a227 0%, #e8c94d 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 transition: transform 0.3s ease;
 }
 .integration-banner .stat:hover .num {
 transform: scale(1.08);
 }

 /* -- Process Timeline Icons -- */
 .timeline-step .tl-icon {
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 .timeline-step:hover .tl-icon {
 transform: scale(1.15);
 box-shadow: 0 6px 20px rgba(0,102,204,0.25);
 }

 /* -- Challenge Card Header Icons -- */
 .challenge-card-header .cc-delivered i {
 transition: transform 0.3s ease;
 }
 .challenge-card:hover .challenge-card-header .cc-delivered i {
 transform: translateY(2px);
 }

 /* -- CTA Visual Icon -- */
 .cta-visual .cta-icon {
 transition: all 0.4s ease;
 animation: ctaPulse 3s ease-in-out infinite;
 }
 .cta-visual:hover .cta-icon {
 transform: scale(1.1);
 }
 @keyframes ctaPulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.05); }
 }

 /* -- Scroll Reveal -- */
 [data-animate] {
 opacity: 0;
 transform: translateY(24px);
 transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }
 [data-animate].visible {
 opacity: 1;
 transform: translateY(0);
 }

 /* -- Section Header Animation -- */
 .section-header {
 transition: all 0.5s ease;
 }

 /* -- Card Hover Enhancements -- */
 .service-card {
 transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 .service-card:hover {
 transform: translateY(-6px);
 }
 .service-card:hover h3 {
 color: var(--primary-blue);
 transition: color 0.3s ease;
 }

 /* -- Subpage Link Arrow -- */
 .subpage-link .arrow {
 transition: transform 0.2s ease;
 }
 .subpage-link:hover .arrow {
 transform: translateX(4px);
 }

 /* -- Engagement Panel Visual Steps -- */
 .ep-visual {
 margin-top: 1.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid var(--border-gray);
 }
 .ep-visual-label {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.78rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--primary-blue);
 margin-bottom: 1.1rem;
 }
 .ep-visual-label::before {
 font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f46c"; /* clipboard-check */
 }
 .ep-steps {
 display: flex;
 align-items: stretch;
 gap: 10px;
 }
 .ep-step {
 flex: 1 1 0;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 1.35rem 0.85rem;
 border-radius: 14px;
 background: linear-gradient(160deg,#ffffff 0%,#eef5fc 100%);
 border: 1px solid #dce8f3;
 transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 position: relative;
 }
 .ep-step:hover {
 transform: translateY(-4px);
 background: #e8f0f8;
 box-shadow: 0 6px 18px rgba(0,102,204,0.1);
 }
 .ep-step-icon {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: var(--white);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
 color: var(--primary-blue);
 margin-bottom: 0.5rem;
 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 transition: all 0.3s ease;
 }
 .ep-step:hover .ep-step-icon {
 background: var(--primary-blue);
 color: var(--white);
 transform: scale(1.1);
 }
 .ep-step-title {
 font-size: 0.8rem;
 font-weight: 600;
 color: var(--primary-navy);
 margin-bottom: 0.25rem;
 line-height: 1.3;
 }
 .ep-step-desc {
 font-size: 0.7rem;
 color: var(--text-light);
 line-height: 1.3;
 }
 .ep-step-arrow {
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--primary-blue);
 opacity: .5;
 font-size: 0.85rem;
 flex-shrink: 0;
 }
 @media (max-width: 768px) {
 .ep-steps { gap: 4px; }
 .ep-step { padding: 0.75rem 0.25rem; }
 .ep-step-icon { width: 36px; height: 36px; font-size: 0.9rem; }
 .ep-step-title { font-size: 0.7rem; }
 .ep-step-desc { font-size: 0.65rem; }
 .ep-step-arrow { display: none; }
 }

 /* -- Material Swatch Hover -- */
 .material-swatch:hover .swatch-color {
 transform: scale(1.15);
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 .material-swatch .swatch-color {
 transition: all 0.3s ease;
 }
 /* Responsive */
 @media (max-width: 992px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 .engagement-panel-inner { grid-template-columns: 1fr; }
 .challenge-card-header { grid-template-columns: 1fr; gap: .5rem; }
 .challenge-card-header .cc-delivered { text-align: left; }
 }
 @media (max-width: 768px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
 .hero-feature-item { padding: 14px; }
 .challenge-table, .engagement-table { font-size: .8rem; }
 .challenge-table th, .challenge-table td, .engagement-table th, .engagement-table td { padding: .5rem; } .engagement-table td:first-child { white-space: normal; }
 .integration-banner { padding: 1rem; }
 .process-timeline { grid-template-columns: 1fr; gap: 1rem; padding: 1rem 0; }
 .process-timeline::before { display: none; }
 .timeline-step { display: flex; align-items: center; text-align: left; gap: 1rem; padding: 1.1rem 1.25rem; }
 .timeline-step .tl-icon { margin: 0; flex-shrink: 0; }
 .timeline-step .tl-desc { opacity: 1; margin-top: .25rem; }
 .engagement-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
 .sticky-mobile-cta { display: flex; }
 .cta-visual { padding: 1rem 1.5rem; }
 .challenge-card-toggle { display: block; }
 .challenge-card-header { padding: .875rem 1rem; }
 .challenge-card.open .challenge-card-body { padding: .875rem 1rem; }
 }
 h3 span { flex: 1; text-align: center; }
 h4 span { flex: 1; text-align: center; }
.hero-features a.hero-feature-item { transition: all 0.3s ease; }
.hero-features a.hero-feature-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.15); }
.hero-features a.hero-feature-item:hover h4 { color: #8a6d1c; }

/* -- Services Grid Enhancements -- */
.grid-3 .service-card { height: 100%; }
.grid-3 .service-card .subpage-link { margin-top: auto; }

/* -- Section dividers -- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gray), transparent);
  margin: 0 auto;
  max-width: 200px;
}

/* -- Stats row enhancement -- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.stat-box {
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all .3s ease;
}
.stat-box:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--primary-blue);
}
.stat-box .num {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-box .lbl {
  font-size: .875rem;
  color: var(--text-medium);
}

/* -- Service card image placeholder -- */
.service-card-visual {
  height: 160px;
  background: linear-gradient(135deg, var(--primary-light) 0%, #e8f0f8 100%);
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--primary-blue);
  opacity: 0.9;
}

@media (max-width: 992px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* Engagement note-box — full-width callout under the step flow */
.engagement-panel-inner .ep-visual .note-box {
 margin-top: 1.25rem !important;
}