/*
 * pages-misc.css
 * Styles for miscellaneous content pages:
 *   template-solutions.php, template-careers.php, template-how-we-work.php,
 *   template-hww-build-methodology.php, template-hww-remote-lab.php,
 *   template-hww-tech-stack.php, template-asset-care.php, template-outcomes.php,
 *   template-resources.php, template-sectors.php, template-sector-uhnw.php,
 *   template-why-retrofit.php
 *
 * @package Prysmedge
 */

/* === From: template-solutions.php === */
/* Body is light by default; dark sections carry their own bg */
body.template-solutions { background: #f5f4f2; color: #111; }

/* ── HERO ── */
.hero-grid {
    background-image:
        linear-gradient(rgba(249,115,22,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249,115,22,0.04) 1px, transparent 1px);
    background-size: 44px 44px;
}

@keyframes fade-up {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:none; }
}
.hf  { animation: fade-up 0.7s ease-out forwards; opacity:0; }
.hf1 { animation-delay: 0.05s; }
.hf2 { animation-delay: 0.18s; }
.hf3 { animation-delay: 0.32s; }
.hf4 { animation-delay: 0.46s; }
.hf5 { animation-delay: 0.6s;  }

/* ── SOLUTION CARDS ── */
.sol-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e2dc;
    border-radius: 1.5rem;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}
@media (min-width: 640px) {
    .sol-card { flex-direction: row; min-height: 400px; }
}

.sol-card:hover {
    transform: translateY(-5px);
}
.sol-card-orange:hover {
    border-color: rgba(249,115,22,0.35);
    box-shadow: 0 20px 56px rgba(0,0,0,0.08), 0 0 0 1px rgba(249,115,22,0.2);
}
.sol-card-gold:hover {
    border-color: rgba(212,175,55,0.35);
    box-shadow: 0 20px 56px rgba(0,0,0,0.08), 0 0 0 1px rgba(212,175,55,0.2);
}

/* ── LEFT TEXT PANEL ── */
.sol-left {
    flex: 0 0 58%;
    padding: 2.25rem 2rem 2.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    background: #ffffff;
}

/* ── RIGHT IMAGE PANEL ── */
.sol-right {
    flex: 0 0 42%;
    position: relative;
    overflow: hidden;
    min-height: 220px;
}
.sol-right img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) brightness(0.65) saturate(0.7);
    transition: filter 0.65s ease, transform 0.65s ease;
}
.sol-card:hover .sol-right img {
    filter: grayscale(0) brightness(0.82) saturate(1.1);
    transform: scale(1.05);
}
/* Seamless left edge fade into text panel */
.sol-right::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 60%;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}
/* Subtle vignette top/bottom */
.sol-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, transparent 25%),
        linear-gradient(to top, rgba(255,255,255,0.35) 0%, transparent 25%);
    z-index: 1;
    pointer-events: none;
}

/* ── LUXURY CSS PANEL (no photo) ── */
.sol-right-gold {
    flex: 0 0 42%;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    background: linear-gradient(145deg, #110e08 0%, #1c1609 50%, #110e08 100%);
}
.sol-right-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(212,175,55,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
}
/* Gold orb */
.sol-right-gold::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 70%);
    border-radius: 50%;
}
/* Left fade for gold panel */
.sol-right-gold-fade {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
    z-index: 2;
}
.gold-gem {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-30%, -50%);
    z-index: 3;
    opacity: 0.3;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.sol-card:hover .gold-gem {
    opacity: 0.55;
    transform: translate(-30%, -52%) scale(1.06);
}

/* ── CARD TYPOGRAPHY ── */
.sol-seq {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    color: rgba(0,0,0,0.28);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sol-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.chip-orange { background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.28); color: #fb923c; }
.chip-gold   { background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.28); color: #d4af37; }

.sol-title {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 800;
    color: #111;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.sol-desc {
    font-size: 0.85rem;
    color: #5a5a5a;
    line-height: 1.7;
}

.sol-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    font-size: 0.67rem;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.45);
    background: rgba(0,0,0,0.03);
}
.sol-pill-gold {
    border-color: rgba(212,175,55,0.3);
    color: rgba(180,140,20,0.85);
    background: rgba(212,175,55,0.06);
}

.sol-cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: gap 0.3s ease;
}
.sol-card:hover .sol-cta { gap: 0.7rem; }

/* Accent bar left edge */
.sol-left::after {
    content: '';
    position: absolute;
    left: 0; top: 2.5rem; bottom: 2.5rem;
    width: 2px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.sol-card-orange .sol-left::after { background: #ea580c; }
.sol-card-gold   .sol-left::after { background: #d4af37; }
.sol-card:hover .sol-left::after  { opacity: 1; }

/* ── STATS BAR ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
@media (max-width: 640px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-cell {
    padding: 1.75rem 2rem;
    border-right: 1px solid rgba(255,255,255,0.07);
}
.stat-cell:last-child { border-right: none; }
@media (max-width: 640px) {
    .stat-cell:nth-child(2n) { border-right: none; }
    .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.07); }
}

/* === From: template-careers.php === */
/* Note: html{scroll-behavior:smooth} and body{font-family} covered by design-system.css */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* ── Careers Hero Image Hover Effect ── */
@property --k {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

.careers-hero-img {
    --k: 0;
    --j: calc(1 - var(--k));
    display: block;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2rem;
    filter: grayscale(var(--j));
    cursor: crosshair;
    mask:
        radial-gradient(closest-side, red calc(50% - 1px), transparent 50%),
        radial-gradient(closest-side,
            transparent calc(25% + var(--k)*50% - 1px),
            red calc(25% + var(--k)*50%) calc(50% + var(--k)*50% - 1px),
            transparent calc(50% + var(--k)*50%)),
        linear-gradient(transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0),
        linear-gradient(90deg, transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0),
        linear-gradient(45deg, transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0),
        linear-gradient(-45deg, transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0);
    mask-composite: add, intersect, add, add;
    -webkit-mask:
        radial-gradient(closest-side, red calc(50% - 1px), transparent 50%),
        radial-gradient(closest-side,
            transparent calc(25% + var(--k)*50% - 1px),
            red calc(25% + var(--k)*50%) calc(50% + var(--k)*50% - 1px),
            transparent calc(50% + var(--k)*50%)),
        linear-gradient(transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0),
        linear-gradient(90deg, transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0),
        linear-gradient(45deg, transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0),
        linear-gradient(-45deg, transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0);
    -webkit-mask-composite: source-over, source-in, source-over, source-over;
    transition: --k 0.4s ease-out;
}

.careers-hero-img:hover {
    --k: 1;
}

/* ── Open Positions Sidebar Animations ── */
@keyframes tag-reveal {
    from { opacity: 0; transform: scale(0.75) translateY(5px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.tech-tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    color: #525252;
    font-family: 'JetBrains Mono', monospace;
    opacity: 0;
    animation: tag-reveal 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-play-state: paused;
}
#open-positions.in-view .tech-tag { animation-play-state: running; }

@keyframes bar-grow {
    from { width: 0; }
    to   { width: var(--w, 50%); }
}
.sidebar-bar {
    animation: bar-grow 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-play-state: paused;
    width: 0;
}
#open-positions.in-view .sidebar-bar { animation-play-state: running; }

@keyframes count-up-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
#open-positions.in-view .sidebar-count {
    animation: count-up-pulse 2s ease-in-out 0.6s 2;
}

/* === From: template-how-we-work.php === */
/* Note: html{scroll-behavior} and body{font-family} covered by design-system.css */
/* Note: body{background-color:#171717 !important} is page-specific — applied via template inline style */

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.group:hover .hover-glow {
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.15);
}

/* Grid Background Pattern */
.grid-bg {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

.pulse-slow {
    animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* === From: template-hww-build-methodology.php === */
/* Note: :root font vars, html{scroll-behavior}, body{font-family} covered by design-system.css */
/* Note: body{background-color:#171717 !important} is page-specific — applied via template */

/* .fade-in-up and .fade-in-up.visible already defined above */

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
}

/* Custom Scrollbar for Phases */
.phase-connector {
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #ea580c 50%, #404040 50%);
    background-size: 100% 200%;
    background-position: bottom;
    transition: background-position 0.5s ease;
    z-index: 0;
}

.group:hover .phase-connector {
    background-position: top;
}

.pulse-icon {
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
    }
}

/* .grid-bg already defined above */

/* Hero Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animate-float-slow {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out infinite;
    animation-delay: 3s;
}

.animate-pulse-slow {
    animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin-slow {
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-spin-slow-reverse {
    animation: spin-slow 25s linear infinite reverse;
}

.hover-lift-lg:hover {
    transform: translateY(-8px) scale(1.02);
}

/* === From: template-hww-remote-lab.php === */
/* Note: :root vars, html{scroll-behavior}, body{font-family} covered by design-system.css */
/* Note: body{background-color:#171717 !important} is page-specific — applied via template */

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* .animate-fade-in-up already defined above (uses same fade-in-up keyframe) */
/* .hover-lift and .hover-lift:hover already defined above */

/* Grid Background pattern */
.grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(#e5e5e5 1px, transparent 1px), linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

/* Terminal Cursor Blink */
.cursor-blink {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* === From: template-hww-tech-stack.php === */
/* Note: :root vars, html{scroll-behavior}, body{font-family} covered by design-system.css */
.tech-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 3px solid rgba(249, 115, 22, 0.25);
}
.tech-card:hover {
    transform: translateY(-4px);
    border-color: #fb923c;
    border-top-color: #f97316;
    border-top-width: 3px;
    box-shadow: 0 20px 40px -10px rgba(249, 115, 22, 0.15);
}

/* === From: template-asset-care.php === */
/* ── SVG Dashboard animations ── */
@keyframes heartbeat {
    0%,100% { transform: scaleY(1); }
    10% { transform: scaleY(1.4); }
    20% { transform: scaleY(0.6); }
    30% { transform: scaleY(1.2); }
    40% { transform: scaleY(0.8); }
    50% { transform: scaleY(1); }
}
@keyframes gaugeSweep {
    0%   { stroke-dashoffset: 345; }
    50%  { stroke-dashoffset: 18; }
    100% { stroke-dashoffset: 345; }
}
@keyframes alertPulse {
    0%,100% { opacity:.25; }
    50%     { opacity:1; }
}
@keyframes dataStream {
    0%   { stroke-dashoffset: 24; }
    100% { stroke-dashoffset: 0; }
}
@keyframes statusBlink {
    0%,100% { fill:#22c55e; }
    50%     { fill:#86efac; }
}
.heartbeat-line { animation: heartbeat 2s ease-in-out infinite; transform-origin: center bottom; }
.gauge-sweep    { animation: gaugeSweep 5s ease-in-out infinite; }
.alert-pulse    { animation: alertPulse 2s ease-in-out infinite; }
.data-stream    { animation: dataStream 1.5s linear infinite; }
.status-blink   { animation: statusBlink 2s ease-in-out infinite; }

/* ── Float for SVG card ── */
@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
}
.animate-float { animation: floatY 6s ease-in-out infinite; }

/* ── Pulse ring for live badge ── */
@keyframes pulseRing {
    0%   { transform: scale(1); opacity:.7; }
    100% { transform: scale(2.4); opacity:0; }
}
.live-ring::after {
    content:'';
    position:absolute; inset:-4px;
    border-radius:50%;
    background:#22c55e;
    animation: pulseRing 2s ease-out infinite;
}

/* ── Tier card shine sweep ── */
@keyframes tierShine {
    0%   { transform: translateX(-140%) skewX(-18deg); }
    100% { transform: translateX(340%)  skewX(-18deg); }
}
/* overflow:hidden only on the inner overflow wrapper, not the outer card */
.tier-shine-inner { position:relative; overflow:hidden; border-radius: inherit; }
.tier-shine-inner::after {
    content:'';
    position:absolute; top:0; left:0; bottom:0; width:40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: tierShine 4s ease-in-out infinite;
    animation-delay: 2s;
    pointer-events: none;
}

/* ── Service card hover ── */
.service-card {
    transition: transform .25s, box-shadow .25s, border-color .25s;
    border: 1px solid #e5e5e5;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(249,115,22,0.12);
    border-color: rgba(234,88,12,0.35);
}
.service-card:hover .svc-icon { background: #ea580c; }
.service-card:hover .svc-icon i,
.service-card:hover .svc-icon svg,
.service-card:hover .svc-icon svg * { color: #fff !important; stroke: #fff !important; }
.service-card:hover .svc-title { color: #ea580c; }

/* ── Featured service cards ── */
.featured-service-card {
    transition: transform .25s, box-shadow .25s, border-color .25s;
    border: 1px solid rgba(234,88,12,0.20);
    background: linear-gradient(135deg, #fff 0%, #fff7ed 100%);
}
.featured-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(249,115,22,0.15);
    border-color: rgba(234,88,12,0.45);
}
.featured-service-card:hover .svc-icon { background: #ea580c; }
.featured-service-card:hover .svc-icon i,
.featured-service-card:hover .svc-icon svg,
.featured-service-card:hover .svc-icon svg * { color: #fff !important; stroke: #fff !important; }
.featured-service-card:hover .svc-title { color: #ea580c; }

/* ── System category card (on light bg) ── */
.sys-card {
    background: #0f0f0f;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    transition: border-color .25s, background .25s, box-shadow .25s;
}
.sys-card:hover {
    background: #1a1a1a;
    border-color: rgba(234,88,12,0.55) !important;
    box-shadow: 0 0 0 1px rgba(234,88,12,0.30), 0 8px 40px rgba(249,115,22,0.18);
}

/* ── Premium CTA button ── */
.premium-cta-btn {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    transition: background .2s, border-color .2s;
}
.premium-cta-btn:hover {
    background: rgba(249,115,22,0.20);
    border-color: rgba(249,115,22,0.40);
}

/* ── Hero grid ── */
.hero-grid {
    background-image: linear-gradient(rgba(229,229,229,0.6) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(229,229,229,0.6) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ── Mobile dashboard card ── */
.mobile-dash-item {
    padding: 1rem 1.25rem;
}

/* === From: template-outcomes.php === */
/* ── 4×4 grid animation (hero right) ── */
@keyframes pe-node-breathe {
    0%, 100% { transform: scale(0.82); opacity: 0.65; }
    50%       { transform: scale(1);   opacity: 1; }
}
@keyframes pe-dot-blink {
    0%, 100% { opacity: 0.22; }
    50%       { opacity: 1; }
}
@keyframes pe-line-travel {
    0%   { stroke-dashoffset:  308; }
    100% { stroke-dashoffset: -308; }
}
@keyframes pe-ring-out {
    0%   { transform: scale(1);   opacity: 0.45; }
    100% { transform: scale(1.75); opacity: 0; }
}
.pe-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: pe-node-breathe 2.8s ease-in-out infinite;
    animation-delay: var(--d);
}
.pe-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: pe-ring-out 2.8s ease-out infinite;
    animation-delay: var(--d);
}
.pe-dot {
    animation: pe-dot-blink 2.8s ease-in-out infinite;
    animation-delay: var(--d);
}
.pe-travel {
    stroke-dasharray: 8 300;
    animation: pe-line-travel 3s linear infinite;
    animation-delay: var(--d);
}

/* ── Sector filter tabs ── */
.pe-filter-bar { display: flex; align-items: flex-end; }
.pe-sect-tab {
    position: relative;
    padding: 0 0 14px;
    margin-right: 28px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Manrope', sans-serif;
    color: #a3a3a3;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    top: 1px;
}
.pe-sect-tab::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 2.5px;
    background: #ea580c;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.pe-sect-tab:hover { color: #262626; }
.pe-sect-tab.active { color: #171717; }
.pe-sect-tab.active::after { transform: scaleX(1); }

/* ── Project card ── */
.pe-proj-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #efefef;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.pe-proj-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-color: #e0ddd9;
}
.pe-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #1a1a1a;
}
.pe-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.pe-proj-card:hover .pe-card-img { transform: scale(1.04); }
.pe-card-vignette {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.22) 100%);
    pointer-events: none;
}
.pe-card-sector-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
}
.pe-card-info { padding: 20px 22px 22px; }
.pe-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.pe-card-chip {
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; font-family: 'Manrope', sans-serif;
    padding: 3px 9px; border-radius: 6px;
    background: #fafafa; border: 1px solid #e5e5e5; color: #737373;
}
.pe-card-title {
    font-family: 'Barlow', sans-serif;
    font-size: 1.05rem; font-weight: 700; color: #171717;
    line-height: 1.35; margin: 0 0 10px;
}
.pe-card-meta {
    display: flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: #a3a3a3; margin-bottom: 14px;
}
.pe-card-cta {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em; color: #ea580c;
    border-top: 1px solid #f5f5f5; padding-top: 14px;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.pe-proj-card:hover .pe-card-cta { opacity: 1; transform: translateY(0); }
.pe-proj-card.hidden-card { display: none; }
#no-results { display: none; }
#no-results.visible { display: block; }

/* === From: template-resources.php === */
/* No inline styles were present — covered by design-system.css */

/* === From: template-sectors.php === */
@keyframes buildingRise { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes windowGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes signalPulse { 0% { r: 3; opacity: 0.8; } 100% { r: 12; opacity: 0; } }
.building-rise { animation: buildingRise 0.8s ease-out forwards; opacity: 0; }
.building-rise-d1 { animation-delay: 0.2s; }
.building-rise-d2 { animation-delay: 0.4s; }
.building-rise-d3 { animation-delay: 0.6s; }
.building-rise-d4 { animation-delay: 0.8s; }
.building-rise-d5 { animation-delay: 1.0s; }
.window-glow { animation: windowGlow 3s ease-in-out infinite; }
.signal-pulse { animation: signalPulse 2.5s ease-out infinite; }

/* === From: template-sector-uhnw.php === */
/* Note: .text-gradient-gold already in pages-luxury.css and page-theme.css */
/* Note: .card-pe:hover and .card-gold already in pages-luxury.css */
/* Included here as this template may not load pages-luxury.css */
.card-pe:hover {
    border-color: rgba(212,175,55,0.45) !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
}
.card-gold {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.card-gold:hover {
    border-color: rgba(212,175,55,0.45);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
    transform: translateY(-4px);
}

/* === From: template-why-retrofit.php === */
/* No inline styles were present — covered by design-system.css */

/* === From: template-brownfield-integration.php === */
@keyframes scan-reveal {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.scan-line {
    opacity: 0;
    animation: scan-reveal 0.4s ease-out forwards;
}
.stat-num {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    letter-spacing: -0.025em;
}

/* === From: template-solutions.php (orb + logo mark animations) === */
@keyframes orb-drift-1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(60px,-40px) scale(1.08); }
    66%      { transform: translate(-30px,50px) scale(0.95); }
}
@keyframes orb-drift-2 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%      { transform: translate(-70px,30px) scale(1.1); }
    75%      { transform: translate(40px,-60px) scale(0.92); }
}
@keyframes orb-drift-3 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(50px,40px) scale(1.06); }
}
.sol-orb-1 { animation: orb-drift-1 14s ease-in-out infinite; }
.sol-orb-2 { animation: orb-drift-2 18s ease-in-out infinite; }
.sol-orb-3 { animation: orb-drift-3 11s ease-in-out infinite; }

@keyframes seg-draw  { to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes dot-pop   { to { r: 4; opacity: 1; } }
@keyframes logo-glow {
    0%,100% { filter: drop-shadow(0 0 6px  rgba(249,115,22,0.25)); }
    50%      { filter: drop-shadow(0 0 22px rgba(249,115,22,0.60)); }
}
@keyframes center-pulse {
    0%,100% { r: 4; fill: #f97316; }
    50%      { r: 7; fill: #fbbf24; }
}
.sol-seg {
    stroke-dashoffset: 35;
    opacity: 0;
    animation: seg-draw 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}
.sol-dot {
    r: 0;
    opacity: 0;
    animation: dot-pop 0.3s ease forwards;
}
.sol-logo-svg { animation: logo-glow 3.5s ease-in-out 1.6s infinite; }
.sol-dot-center { animation: dot-pop 0.3s ease 0.9s forwards, center-pulse 2.2s ease-in-out 1.8s infinite; }

/* === From: template-case-studies.php (Resource Hub) === */
@keyframes rh-pulse {
    0%,100% { opacity:1;  transform:scale(1);    }
    50%      { opacity:0.6; transform:scale(0.85); }
}
@keyframes rh-float {
    0%   { transform:translateY(8px);  }
    50%  { transform:translateY(-8px); }
    100% { transform:translateY(8px);  }
}
@keyframes rh-slide-left {
    from { opacity:0; transform:translateX(-32px); }
    to   { opacity:1; transform:translateX(0);     }
}
@keyframes rh-slide-right {
    from { opacity:0; transform:translateX(32px); }
    to   { opacity:1; transform:translateX(0);    }
}
@keyframes rh-modal-in {
    from { opacity:0; transform:scale(0.95) translateY(16px); }
    to   { opacity:1; transform:scale(1)    translateY(0);    }
}
.rh-slide-left  { animation:rh-slide-left  0.7s ease both; }
.rh-slide-right { animation:rh-slide-right 0.7s ease 0.15s both; }
.rh-float-1 { animation:rh-float 4.0s ease-in-out 0.0s infinite; }
.rh-float-2 { animation:rh-float 4.0s ease-in-out 0.8s infinite; }
.rh-float-3 { animation:rh-float 4.0s ease-in-out 1.6s infinite; }
.rh-float-4 { animation:rh-float 4.0s ease-in-out 2.4s infinite; }
.rh-tab {
    position: relative;
    padding: 16px 20px 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px; font-weight: 600; color: #737373;
    background: none; border: none; cursor: pointer;
    white-space: nowrap; transition: color 0.2s ease; flex-shrink: 0;
}
.rh-tab::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0; height: 2px;
    background: #ea580c; transform: scaleX(0);
    transition: transform 0.25s ease; border-radius: 2px 2px 0 0;
}
.rh-tab:hover              { color: #0a0a0a; }
.rh-tab.rh-tab-active      { color: #ea580c; }
.rh-tab.rh-tab-active::after { transform: scaleX(1); }
.rh-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.rh-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.10);
    transform: translateY(-4px);
}
.rh-download-btn:hover  { background:#c2410c !important; transform:translateY(-1px); }
.rh-download-btn:active { transform:translateY(0); }
#rh-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.75);
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 16px;
}
#rh-modal.open { display: flex; }
.rh-modal-panel {
    background: #ffffff; border-radius: 20px; padding: 40px;
    max-width: 480px; width: 90vw; position: relative;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    animation: rh-modal-in 0.25s ease both;
}
#rh-tab-bar::-webkit-scrollbar { display: none; }
#rh-tab-bar { -ms-overflow-style: none; scrollbar-width: none; }