:root { --canvas: #fffaf1; --paper: #ffffff; --ink: #172033; --muted: #667085; --yellow: #ffd600; --yellow-soft: #fff4bd; --blue-soft: #e9efff; --peach-soft: #fff0df; --line: #e8dfd1; }
body { background: var(--canvas); color: var(--ink); }
header { background: rgba(255,250,241,.82) !important; border-bottom: 1px solid rgba(23,32,51,.08) !important; box-shadow: 0 8px 30px rgba(23,32,51,.04); }
section { border-color: var(--line) !important; }
section.bg-white, section.bg-gray-50, .bg-white, .bg-gray-50, .bg-brand-gray { background-color: transparent; }
#home { background: linear-gradient(135deg, #fff8dc 0%, #fffdf6 48%, #eaf0ff 100%) !important; }
#about, #why-us, #faqs { background: var(--canvas) !important; }
#services { background: linear-gradient(180deg, #fff 0%, #fff7dc 100%) !important; }
#packages { background: linear-gradient(135deg, #f0f4ff 0%, #fffaf1 53%, #fff0df 100%) !important; }
#featured-work { background: #fff !important; }
#contact { background: linear-gradient(135deg, #fff4bd 0%, #fffaf1 55%, #e9efff 100%) !important; }

/* Editorial cards and bento panels */
article, .section-shell, .premium-service-card, .home-colour-card, #why-us .grid > div, .legal-content, .policy-content { background: rgba(255,255,255,.88) !important; border: 1px solid var(--line) !important; box-shadow: 0 12px 32px rgba(23,32,51,.06); }
article:hover, .home-colour-card:hover, #why-us .home-colour-card:hover { background: #fff !important; border-color: #ffd600 !important; box-shadow: 0 20px 44px rgba(23,32,51,.12) !important; }
#services .home-colour-card:nth-child(1), #why-us .home-colour-card:nth-child(1) { background: #fff8d8 !important; }
#services .home-colour-card:nth-child(2), #why-us .home-colour-card:nth-child(2) { background: #edf2ff !important; }
#services .home-colour-card:nth-child(3), #why-us .home-colour-card:nth-child(3) { background: #fff0e5 !important; }
#services .home-colour-card:nth-child(4), #why-us .home-colour-card:nth-child(4) { background: #e8f7f1 !important; }
#services .home-colour-card:hover { background: #172033 !important; }
#services .home-colour-card:hover h3, #services .home-colour-card:hover p { color: #fff !important; }
#packages .pricing-card { background: rgba(255,255,255,.92) !important; border-top-width: 6px !important; }
#packages .pricing-card:hover { background: #fff !important; }
.work-card { background: #fff !important; border-color: var(--line) !important; }
.work-card:hover { background: var(--yellow) !important; }

/* Typography, controls and forms */
.text-brand-dark, .text-slate-900, .text-black { color: var(--ink) !important; }
.text-gray-400, .text-gray-500, .text-gray-600, .text-slate-600 { color: var(--muted) !important; }
.text-brand-yellow, .text-\[\#fecf04\] { color: #bc8f00 !important; }
.bg-brand-dark, button.bg-brand-dark, a.bg-brand-dark { background: var(--ink) !important; color: #fff !important; }
.bg-brand-dark:hover, button.bg-brand-dark:hover, a.bg-brand-dark:hover { background: #2b3855 !important; }
.bg-brand-yellow { background: var(--yellow) !important; }
.border-gray-100, .border-gray-200, .border-gray-300, .border-brand-border { border-color: var(--line) !important; }
input, textarea, select { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; }
#projectModal > div { background: #fffdf8 !important; border-color: var(--line) !important; }

/* Detail and motion treatment */
.dot-pattern { background-image: radial-gradient(rgba(23,32,51,.13) 1px, transparent 1px) !important; }
#pageScrollProgress { background: linear-gradient(90deg, #ffd600, #ffb300, #405585) !important; }
.scroll-section::after { background: #ffd600 !important; }
.parallax-orb--one { background: radial-gradient(circle at 35% 35%, rgba(255,214,0,.34), transparent 65%) !important; }
.parallax-orb--two { background: radial-gradient(circle at 50% 50%, rgba(126,153,255,.22), transparent 65%) !important; }
.package-price { color: var(--ink) !important; }
.package-price i { background: var(--yellow) !important; color: var(--ink) !important; }

@media (max-width: 767px) { header { background: rgba(255,250,241,.96) !important; } }