/* ==========================================================================
   SUKOON UPGRADES — Safely layered on top of the original CSS
   ========================================================================== */

/* 1. GOLDEN THREAD */
.golden-thread { position: fixed; left: 30px; top: 0; width: 2px; height: 0%; background: #F2B705; z-index: 500; box-shadow: 0 0 10px #F2B705; transition: height 0.1s linear; pointer-events: none; }

/* 2. PULL QUOTE */
.pull-quote-sec { padding: 160px 6%; background: #0A0A0A; text-align: center; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(242,183,5,.1); border-bottom: 1px solid rgba(242,183,5,.1); }
.pull-quote { max-width: 900px; }
.quote-text { font: 600 clamp(2rem, 4.5vw, 3.8rem) 'Playfair Display', serif; color: #F6F1E4; line-height: 1.15; margin-bottom: 24px; }
.quote-text em { color: #F2B705; font-style: italic; }
.quote-author { color: #F2B705; font-size: 0.9rem; letter-spacing: 0.3em; text-transform: uppercase; display: block; }

/* 3. BIG CTA */
.big-cta { padding: 140px 6%; background: radial-gradient(circle at 50% 50%, rgba(242, 183, 5, 0.12), transparent 60%), #0A0A0A; text-align: center; border-top: 1px solid rgba(242, 183, 5, 0.15); }
.big-cta h2 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); color: #F6F1E4; margin-bottom: 40px; }
.big-cta-btn { display: inline-block; padding: 22px 56px; background: #F2B705; color: #111; font-weight: 600; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 50px; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 10px 40px rgba(242, 183, 5, 0.2); }
.big-cta-btn:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 25px 60px rgba(242, 183, 5, 0.5); background: #FFD966; }

/* 4. EXPERTISE UPGRADE */
#services .mcard { position: relative; padding: 40px 36px; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
#services .mcard .mimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(100%); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; transform: scale(1.1); }
#services .mcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #0d0b05 20%, rgba(13, 11, 5, 0.8) 60%, rgba(13, 11, 5, 0.4)); z-index: 1; }
#services .mcard:hover .mimg { opacity: 1; transform: scale(1); }
#services .mcard .mc-content { position: relative; z-index: 2; }
#services .mcard h4 { color: #F6F1E4; }
#services .mcard:hover h4 { color: #F2B705; }
#services .mcard p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
#services .mcard:hover p { max-height: 100px; opacity: 1; margin-top: 8px; }

/* 5. MOBILE */
@media (max-width: 700px) {
    .more-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    #services .mcard { padding: 24px 20px; min-height: 200px; }
    #services .mcard h4 { font-size: 1.1rem; }
    #services .mcard p { display: none; }
    #services .mcard .sic { width: 44px; height: 44px; margin-bottom: 12px; }
    #services .mcard .sic .ic { width: 20px; height: 20px; }
    .golden-thread { left: 12px; }
    .pull-quote-sec { padding: 100px 6%; }
    .big-cta { padding: 100px 6%; }
    .big-cta h2 { font-size: clamp(2rem, 8vw, 3rem); }
    .big-cta-btn { padding: 18px 40px; font-size: 0.9rem; }
}