/* ============================================================
   MR CONSTRUCTIONS — ANIMATION SYSTEM v5.0
   ============================================================ */

/* ── 1. CUSTOM CURSOR ───────────────────────────────────────── */
@media (pointer: fine) and (hover: hover) {
  body { cursor: none; }
  a, button, [role="button"] { cursor: none; }
}

#mr-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-300px,-300px);
  will-change: transform;
  transition: width .2s, height .2s, background .2s, opacity .2s;
}
#mr-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(33,146,91,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-300px,-300px);
  will-change: transform;
  transition: width .35s ease, height .35s ease, border-color .3s, opacity .3s;
}

/* ── 2. SCROLL PROGRESS BAR ─────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 9999;
  box-shadow: 0 0 6px rgba(33,146,91,.5);
  pointer-events: none;
}

/* ── 3. NAV SCROLL STATE ────────────────────────────────────── */
nav {
  transition: padding .35s ease, background .35s ease, box-shadow .35s ease;
}
nav.scrolled {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: rgba(14,14,14,.97) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.4), 0 1px 0 rgba(33,146,91,.12);
}

/* ── 4. GLOBAL BACKGROUND TEXTURE ───────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(33,146,91,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,146,91,0.022) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Noise texture overlay for depth */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── 5. HERO SLIDE ───────────────────────────────────────────── */
.slide {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s ease, transform 7s ease;
  background-attachment: scroll;
}
.slide.active {
  opacity: 1;
  transform: scale(1.0);
}

/* Hero text staggered reveal */
.hero-eyebrow,
.hero-title,
.hero-sub,
.hero-actions {
  opacity: 0;
  transform: translateY(36px);
}
.hero-content.animate-in .hero-eyebrow {
  animation: heroUp .8s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.hero-content.animate-in .hero-title {
  animation: heroUp .95s cubic-bezier(.22,1,.36,1) .26s forwards;
}
.hero-content.animate-in .hero-sub {
  animation: heroUp .85s cubic-bezier(.22,1,.36,1) .46s forwards;
}
.hero-content.animate-in .hero-actions {
  animation: heroUp .85s cubic-bezier(.22,1,.36,1) .62s forwards;
}
@keyframes heroUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero title line split */
.hero-line-wrap {
  display: block;
  overflow: hidden;
}
.hero-line-inner {
  display: block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.hero-content.animate-in .hero-line-inner:nth-child(1) { transform: translateY(0); transition-delay:.3s; }
.hero-content.animate-in .hero-line-inner:nth-child(2) { transform: translateY(0); transition-delay:.44s; }
.hero-content.animate-in .hero-line-inner:nth-child(3) { transform: translateY(0); transition-delay:.57s; }

/* Hero stats stagger */
.hero-stats .stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.hero-stats.stats-visible .stat:nth-child(1) { opacity:1; transform:none; transition-delay:.08s; }
.hero-stats.stats-visible .stat:nth-child(2) { opacity:1; transform:none; transition-delay:.2s; }
.hero-stats.stats-visible .stat:nth-child(3) { opacity:1; transform:none; transition-delay:.32s; }

/* Gold shimmer on primary buttons */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28) 50%, transparent);
  transform: skewX(-20deg);
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%,40%  { left: -80%; opacity: 0; }
  45%     { opacity: 1; }
  70%,100%{ left: 130%; opacity: 0; }
}

/* ── 6. FLOATING PARTICLES ──────────────────────────────────── */
.mr-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.mr-particle {
  position: absolute;
  background: var(--gold);
  border-radius: 50%;
  animation: particleUp var(--dur,8s) var(--delay,0s) linear infinite;
  will-change: transform, opacity;
}
@keyframes particleUp {
  0%   { transform: translateY(100vh) translateX(0);             opacity: 0; }
  8%   { opacity: .5; }
  92%  { opacity: .25; }
  100% { transform: translateY(-5vh) translateX(var(--drift,0)); opacity: 0; }
}

/* ── 7. MARQUEE ─────────────────────────────────────────────── */
.marquee-bar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.marquee-bar.in-view { opacity:1; transform:none; }

/* ── 8. ABOUT — clip reveal + parallax ─────────────────────── */
.about-image-wrap {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.about-image-wrap.in-view { 
  opacity: 1; 
  transform: translateY(0); 
}

/* Image reveal wipe + parallax transition integration */
.about-image-wrap img {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.77,0,.3,1) .1s, 
              transform .1s linear; /* keeping parallax smoothness */
  will-change: transform, clip-path;
}
.about-image-wrap.in-view img { 
  clip-path: inset(0 0 0 0); 
}

.about-image-wrap:hover img {
  transform: scale(1.04) !important;
  transition: transform .8s cubic-bezier(.22,1,.36,1) !important;
}

.about-badge {
  opacity: 0;
  transform: scale(.75) rotate(-6deg);
  transition: opacity .55s ease .85s, transform .7s cubic-bezier(.34,1.5,.64,1) .85s;
}
.about-image-wrap.in-view .about-badge { opacity:1; transform:scale(1) rotate(0); }

/* Floating ring decoration */
.about-image-wrap::after {
  content: '';
  position: absolute;
  bottom: -36px; right: -36px;
  width: 100px; height: 100px;
  border: 1px solid rgba(33,146,91,.3);
  border-radius: 50%;
  pointer-events: none;
  animation: floatRing 7s ease-in-out infinite;
}
@keyframes floatRing {
  0%,100% { transform: translate(0,0);       opacity: .3; }
  50%      { transform: translate(-6px,-10px); opacity: .55; }
}

/* About text — children slide from right */
.about-text > * {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
.about-text.in-view > *:nth-child(1) { opacity:1; transform:none; transition-delay:.12s; }
.about-text.in-view > *:nth-child(2) { opacity:1; transform:none; transition-delay:.23s; }
.about-text.in-view > *:nth-child(3) { opacity:1; transform:none; transition-delay:.32s; }
.about-text.in-view > *:nth-child(4) { opacity:1; transform:none; transition-delay:.42s; }
.about-text.in-view > *:nth-child(5) { opacity:1; transform:none; transition-delay:.51s; }
.about-text.in-view > *:nth-child(6) { opacity:1; transform:none; transition-delay:.59s; }
.about-text.in-view > *:nth-child(7) { opacity:1; transform:none; transition-delay:.66s; }

/* Divider line grows */
.divider {
  width: 0 !important;
  transition: width .9s cubic-bezier(.22,1,.36,1) .45s !important;
}
.about-text.in-view .divider { width: 60px !important; }

/* ── 9. SERVICES ────────────────────────────────────────────── */
.services .section-tag,
.services .section-title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.services .section-header.in-view .section-tag  { opacity:1; transform:none; transition-delay:.04s; }
.services .section-header.in-view .section-title { opacity:1; transform:none; transition-delay:.16s; }

/* Service cards — 3D rise */
.service-card {
  opacity: 0;
  transform: translateY(50px) rotateX(10deg);
  transform-origin: top center;
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1),
              background .35s, box-shadow .35s;
  will-change: transform, opacity;
}
.service-card.in-view {
  opacity:1; transform:none;
}
.service-card:hover {
  background: var(--dark-4) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(33,146,91,.2);
  transform: translateY(-6px) !important;
}
.service-card:hover .service-arrow {
  letter-spacing: 3px;
  color: var(--gold-light);
}

/* ── 10. DESIGN PANELS ──────────────────────────────────────── */
.design-services .section-header {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease .08s, transform .8s cubic-bezier(.22,1,.36,1) .08s;
}
.design-services .section-header.in-view { opacity:1; transform:none; }

.design-panel {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1),
              flex .8s cubic-bezier(.25,1,.5,1);
}
.design-panel.in-view { opacity:1; transform:none; }

/* Panel image hover zoom */
.panel-img {
  transition: filter 0.8s, transform 1s cubic-bezier(.22,1,.36,1) !important;
}
.design-panel:hover .panel-img {
  transform: scale(1.08) !important;
}

/* ── 11. PROJECTS ───────────────────────────────────────────── */
.projects .section-tag {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.projects .section-tag.in-view { opacity:1; transform:none; transition-delay:.04s; }

.projects .section-title {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease .14s, transform .7s cubic-bezier(.22,1,.36,1) .14s;
}
.projects .section-title.in-view { opacity:1; transform:none; }

/* Each project card unique entry */
.project-card {
  opacity: 0;
  transition: opacity .85s ease, transform .95s cubic-bezier(.22,1,.36,1),
              box-shadow .35s;
  will-change: transform, opacity;
}
.project-card:nth-child(1) { transform: scale(.93) translateY(24px); }
.project-card:nth-child(2) { transform: translateX(40px) rotate(1deg); }
.project-card:nth-child(3) { transform: translateX(40px) rotate(-1deg); }
.project-card.in-view      { opacity:1; transform:none; }
.project-card:hover        { box-shadow: 0 24px 64px rgba(0,0,0,.55); }

.project-img {
  transition: filter .55s ease, transform .65s cubic-bezier(.22,1,.36,1) !important;
}
.project-info {
  transform: translateY(10px);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.project-card:hover .project-info { transform: translateY(0); }

/* Gallery image animations (projects page) */
.gallery-img {
  transition: filter .6s ease, transform .7s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform, filter;
}

/* ── 12. REVEAL UTILITIES ────────────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
.reveal-up.in-view { opacity:1; transform:none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
.reveal-left.in-view { opacity:1; transform:none; }

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
.reveal-right.in-view { opacity:1; transform:none; }

.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
.reveal-scale.in-view { opacity:1; transform:none; }

.reveal-fade {
  opacity: 0;
  transition: opacity .9s ease;
}
.reveal-fade.in-view { opacity:1; }

/* ── 13. STORY IMAGE (about page) ───────────────────────────── */
.story-image-wrap {
  overflow: hidden;
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.story-image-wrap.in-view { opacity:1; transform:none; }
.story-image-wrap img {
  transition: transform .9s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform;
}
.story-image-wrap:hover img {
  transform: scale(1.05) !important;
}

/* Story text reveal */
.story-text-wrap {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .9s ease .15s, transform 1s cubic-bezier(.22,1,.36,1) .15s;
}
.story-text-wrap.in-view { opacity:1; transform:none; }

/* Team cards */
.team-img {
  transition: filter .5s ease, transform .6s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform, filter;
}

/* Service detail images */
.service-detail-img {
  transition: transform .9s cubic-bezier(.22,1,.36,1), filter .5s ease !important;
  will-change: transform;
}
.service-detail-img-wrap:hover .service-detail-img {
  transform: scale(1.04) !important;
}

/* Service detail sections scroll reveal */
.service-detail-img-wrap {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.service-detail-img-wrap.in-view { opacity:1; transform:none; }

.service-detail.reverse .service-detail-img-wrap {
  transform: translateX(40px);
}

.service-text-wrap {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .9s ease .12s, transform 1s cubic-bezier(.22,1,.36,1) .12s;
}
.service-detail.reverse .service-text-wrap {
  transform: translateX(-40px);
}
.service-text-wrap.in-view { opacity:1; transform:none; }

/* Service features list items */
.service-features li {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.service-features.in-view li:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.service-features.in-view li:nth-child(2) { opacity:1; transform:none; transition-delay:.12s; }
.service-features.in-view li:nth-child(3) { opacity:1; transform:none; transition-delay:.19s; }
.service-features.in-view li:nth-child(4) { opacity:1; transform:none; transition-delay:.26s; }
.service-features.in-view li:nth-child(5) { opacity:1; transform:none; transition-delay:.33s; }
.service-features.in-view li:nth-child(6) { opacity:1; transform:none; transition-delay:.40s; }

/* Featured project image */
.featured-img-wrap {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .85s ease, transform .95s cubic-bezier(.22,1,.36,1);
}
.featured-img-wrap.in-view { opacity:1; transform:none; }
.featured-img-wrap img {
  transition: transform .9s cubic-bezier(.22,1,.36,1), filter .5s ease !important;
  will-change: transform;
}
.featured-img-wrap:hover img {
  transform: scale(1.03) !important;
}

/* ── 14. PAGE HERO ──────────────────────────────────────────── */
.page-hero-content {
  opacity: 0;
  transform: translateY(32px);
  animation: heroUp .95s cubic-bezier(.22,1,.36,1) .2s forwards;
}
.page-hero-bg {
  transform: scale(1.08);
  animation: heroZoomOut 8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes heroZoomOut {
  to { transform: scale(1); }
}

/* ── 15. TESTIMONIALS ───────────────────────────────────────── */
.testimonials .section-header {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.testimonials .section-header.in-view { opacity:1; transform:none; }

.testi-card {
  opacity: 0;
  transform: translateY(44px) scale(.975);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1),
              box-shadow .3s, background .3s;
}
.testi-card.in-view { opacity:1; transform:none; }
.testi-card:hover {
  background: var(--dark-4);
  box-shadow: 0 20px 56px rgba(0,0,0,.4), 0 0 0 1px rgba(33,146,91,.3);
  transform: translateY(-5px) !important;
}

.testi-stars {
  opacity: 0;
  letter-spacing: -3px;
  transition: opacity .5s ease .22s, letter-spacing .65s cubic-bezier(.22,1,.36,1) .22s;
}
.testi-card.in-view .testi-stars { opacity:1; letter-spacing:2px; }

.testi-quote {
  opacity: 0;
  transform: translateX(-8px) rotate(-4deg);
  transition: opacity .5s ease .1s, transform .55s cubic-bezier(.34,1.4,.64,1) .1s;
}
.testi-card.in-view .testi-quote { opacity:1; transform:none; }

/* ── 16. CTA SECTION ────────────────────────────────────────── */
.cta-section .section-title {
  opacity: 0; transform: translateY(28px);
  transition: opacity .85s ease, transform .95s cubic-bezier(.22,1,.36,1);
}
.cta-section .section-title.in-view { opacity:1; transform:none; }

.cta-section .cta-body {
  opacity: 0; transform: translateY(3px);
  transition: opacity .75s ease .3s, transform .85s cubic-bezier(.22,1,.36,1) .3s;
}
.cta-section .cta-body.in-view { opacity:1; transform:none; }

.cta-section .cta-actions {
  opacity: 0; transform: translateY(3px);
  transition: opacity .75s ease .34s, transform .85s cubic-bezier(.22,1,.36,1) .34s;
}
.cta-section .cta-actions.in-view { opacity:1; transform:none; }

/* Expanding radial ring */
.cta-section::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 500px; height: 500px;
  border: 1px solid rgba(33,146,91,.06);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.15);
  opacity: 0;
  transition: transform 1.5s cubic-bezier(.22,1,.36,1), opacity .9s ease;
  pointer-events: none;
}
.cta-section.in-view::after {
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}

/* ── 17. FOOTER ─────────────────────────────────────────────── */
.footer-grid > div {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.footer-grid.in-view > div:nth-child(1) { opacity:1; transform:none; transition-delay:.04s; }
.footer-grid.in-view > div:nth-child(2) { opacity:1; transform:none; transition-delay:.13s; }
.footer-grid.in-view > div:nth-child(3) { opacity:1; transform:none; transition-delay:.22s; }
.footer-grid.in-view > div:nth-child(4) { opacity:1; transform:none; transition-delay:.31s; }

.footer-bottom {
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease .45s, transform .65s ease .45s;
}
.footer-bottom.in-view { opacity:1; transform:none; }

/* Footer link underline */
.footer-links a { position: relative; }
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.footer-links a:hover::after { width: 100%; }

/* ── 3. SECTION TAG DECORATIVE LINE ────────────────────────── */
.section-tag:not([style*="center"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-tag:not([style*="center"])::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .6s cubic-bezier(.22,1,.36,1) .08s;
}
.in-view > .section-tag:not([style*="center"])::before,
.section-tag.in-view:not([style*="center"])::before {
  width: 26px;
}

/* ── 19. MILESTONE / VALUE / CERT CARDS ─────────────────────── */
.milestone-card,
.value-card,
.cert-card,
.why-card,
.process-step {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.milestone-card.in-view,
.value-card.in-view,
.cert-card.in-view,
.why-card.in-view,
.process-step.in-view { opacity:1; transform:none; }

/* Stats strip numbers */
.strip-stat {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.strip-stat.in-view { opacity:1; transform:none; }

/* Contact cards */
.contact-card {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1),
              border-color .3s, background .3s;
}
.contact-card.in-view { opacity:1; transform:none; }

/* Hours section */
.hours-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease .2s, transform .75s cubic-bezier(.22,1,.36,1) .2s;
}
.hours-section.in-view { opacity:1; transform:none; }

/* Map */
.map-wrap {
  opacity: 0;
  transform: scale(.97);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.map-wrap.in-view { opacity:1; transform:none; }

/* Form wrap */
.contact-form-wrap {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.contact-form-wrap.in-view { opacity:1; transform:none; }

/* Contact info */
.contact-info-wrap {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .8s ease .15s, transform .9s cubic-bezier(.22,1,.36,1) .15s;
}
.contact-info-wrap.in-view { opacity:1; transform:none; }

/* Gallery cards */
.gallery-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.gallery-card.in-view { opacity:1; transform:none; }

/* ── 20. BACKGROUND GLOW EFFECTS ─────────────────────────────── */
.about,
.story-section {
  position: relative;
}
.about::before,
.story-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: radial-gradient(ellipse at top right, rgba(33,146,91,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.about > *,
.story-section > * {
  position: relative;
  z-index: 1;
}

.services,
.values-section,
.process-section,
.certifications-section {
  position: relative;
}
.services::before,
.values-section::before,
.process-section::before,
.certifications-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(33,146,91,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(33,146,91,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.services > *,
.values-section > *,
.process-section > *,
.certifications-section > * {
  position: relative;
  z-index: 1;
}

/* Background effects for all page sections */
.team-section,
.milestones-section,
.featured-project,
.gallery-section,
.filter-section,
.why-section,
.contact-section {
  position: relative;
}
.team-section::after,
.milestones-section::after,
.why-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(33,146,91,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.team-section > *,
.milestones-section > *,
.why-section > * {
  position: relative;
  z-index: 1;
}

/* Diagonal shimmer lines background for page hero sections */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 120px,
    rgba(33,146,91,0.015) 120px,
    rgba(33,146,91,0.015) 121px
  );
  pointer-events: none;
  z-index: 1;
}

/* Gold orb float for hero bg supplement */
.hero::after {
  content: '';
  position: absolute;
  bottom: 10%; right: 8%;
  width: 300px; height: 300px;
  background: radial-gradient(ellipse, rgba(33,146,91,0.12) 0%, transparent 70%);
  border-radius: 50%;
  animation: orbPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes orbPulse {
  0%,100% { transform: scale(1); opacity: .6; }
  50%     { transform: scale(1.15); opacity: 1; }
}

/* Gold orb accent — bottom left of page heroes */
.page-hero::before {
  content: '';
  position: absolute;
  bottom: 5%; left: 3%;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(33,146,91,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: orbPulse 8s ease-in-out 2s infinite;
}

/* ── 21. IMAGE SCROLL REVEAL ────────────────────────────────── */

/* Cert card icon pulse on hover */
.cert-icon,
.value-icon,
.why-icon {
  transition: transform .4s cubic-bezier(.34,1.5,.64,1), background .3s;
}
.cert-card:hover .cert-icon,
.value-card:hover .value-icon,
.why-card:hover .why-icon {
  transform: scale(1.12) rotate(5deg);
  background: rgba(33,146,91,0.3);
}

/* Team card image reveal */
.team-card {
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.team-card.in-view { opacity:1; transform:none; }

/* Page hero diagonal lines */
.page-hero-content .page-breadcrumb {
  opacity: 0;
  transform: translateY(12px);
  animation: heroUp .6s cubic-bezier(.22,1,.36,1) .35s forwards;
}
.page-hero-content .page-hero-title {
  opacity: 0;
  transform: translateY(24px);
  animation: heroUp .8s cubic-bezier(.22,1,.36,1) .5s forwards;
}
.page-hero-content .page-hero-sub {
  opacity: 0;
  transform: translateY(20px);
  animation: heroUp .75s cubic-bezier(.22,1,.36,1) .7s forwards;
}

/* Stats strip image reveal */
.stats-strip {
  position: relative;
  overflow: hidden;
}
.stats-strip::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(33,146,91,0.08) 0%, transparent 60%);
  pointer-events: none;
  animation: orbPulse 5s ease-in-out infinite;
}

/* ── 22. SMOOTH IMAGE LOADING ────────────────────────────────── */
img {
  transition: opacity .4s ease;
}
img.lazy-hidden { opacity: 0; }
img.lazy-loaded { opacity: 1; }

/* ── 23. PROCESS TIMELINE CONNECTOR ─────────────────────────── */
.process-steps::before {
  transition: opacity 1s ease 0.5s;
  opacity: 0;
}
.process-steps.in-view::before {
  opacity: 1;
}

/* ── 24. GALLERY HOVER POLISH ────────────────────────────────── */
.gallery-card {
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.gallery-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* ── 25. BACKGROUND PATTERN FOR DARK-2 SECTIONS ─────────────── */
.milestones-section,
.values-section,
.process-section,
.certifications-section,
.gallery-section,
.filter-section {
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 100px,
    rgba(33,146,91,0.008) 100px,
    rgba(33,146,91,0.008) 101px
  );
}

/* ── 26. REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation: none !important;
    transition: none !important;
  }
  .about-image-wrap,
  .about-text > *,
  .service-card,
  .design-panel,
  .project-card,
  .testi-card,
  .footer-grid > div,
  .footer-bottom,
  .cta-section .section-title,
  .cta-section .cta-body,
  .cta-section .cta-actions,
  .marquee-bar,
  .services .section-tag, .services .section-title,
  .projects .section-tag, .projects .section-title,
  .testimonials .section-header,
  .design-services .section-header,
  .hero-eyebrow, .hero-title, .hero-sub, .hero-actions,
  .testi-stars, .testi-quote, .about-badge,
  .hero-stats .stat,
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade,
  .milestone-card, .value-card, .cert-card, .why-card, .process-step,
  .strip-stat, .contact-card, .hours-section, .map-wrap,
  .contact-form-wrap, .contact-info-wrap, .gallery-card, .featured-img-wrap,
  .page-hero-content, .page-hero-bg, .page-hero-content .page-breadcrumb,
  .page-hero-content .page-hero-title, .page-hero-content .page-hero-sub,
  .story-image-wrap, .story-text-wrap, .service-detail-img-wrap,
  .service-text-wrap, .service-features li, .team-card,
  .values-section .section-header, .team-section .section-header,
  .milestones-section .section-header, .certifications-section .section-header,
  .process-section .section-header, .why-section .section-header,
  .story-text-wrap > *, .service-text-wrap,
  .gallery-card .gallery-img, .team-card .team-img,
  .featured-img-wrap img, .story-image-wrap img, .service-detail-img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .slide { opacity: 0; }
  .slide.active { opacity: 1; }
  #mr-cursor, #mr-cursor-ring { display: none !important; }
  .btn-primary::after { display: none; }
  body::before, body::after { display: none; }
}

/* ── 27. SECTION HEADERS — all pages ────────────────────────── */
.values-section .section-header,
.team-section .section-header,
.milestones-section .section-header,
.certifications-section .section-header,
.process-section .section-header,
.why-section .section-header {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.values-section .section-header.in-view,
.team-section .section-header.in-view,
.milestones-section .section-header.in-view,
.certifications-section .section-header.in-view,
.process-section .section-header.in-view,
.why-section .section-header.in-view {
  opacity: 1;
  transform: none;
}

/* ── 28. SERVICE FEATURES REVEAL ────────────────────────────── */
.service-features.reveal-up.in-view li:nth-child(1) { opacity:1; transform:none; transition-delay:.08s; }
.service-features.reveal-up.in-view li:nth-child(2) { opacity:1; transform:none; transition-delay:.16s; }
.service-features.reveal-up.in-view li:nth-child(3) { opacity:1; transform:none; transition-delay:.24s; }
.service-features.reveal-up.in-view li:nth-child(4) { opacity:1; transform:none; transition-delay:.32s; }
.service-features.reveal-up.in-view li:nth-child(5) { opacity:1; transform:none; transition-delay:.40s; }
.service-features.reveal-up.in-view li:nth-child(6) { opacity:1; transform:none; transition-delay:.48s; }

/* ── 29. STORY TEXT WRAP REVEAL ─────────────────────────────── */
.story-text-wrap.in-view .divider { width: 60px !important; }

/* ── 30. SERVICE TEXT WRAP REVEAL — see line ~440 above ── */

/* ── 31. NAV LINK ACTIVE UNDERLINE ──────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active { color: var(--gold-light) !important; }

/* ── 32. IMAGE HOVER EFFECTS THROUGHOUT ─────────────────────── */

/* Team images extra polish */
.team-card:hover .team-img {
  filter: grayscale(0) saturate(1.1);
  transform: scale(1.04);
}

/* Gallery card extra depth on hover */
.gallery-card:hover .gallery-img {
  filter: brightness(0.85) saturate(1.05);
}

/* ── 33. SECTION BACKGROUND — FEATURED PROJECT ───────────────── */
.featured-project {
  background-image: radial-gradient(ellipse at 80% 50%, rgba(33,146,91,0.04) 0%, transparent 60%);
}

/* ── 34. CONTACT SECTION BG ─────────────────────────────────── */
.contact-section {
  background-image: radial-gradient(ellipse at 20% 30%, rgba(33,146,91,0.04) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 70%, rgba(33,146,91,0.03) 0%, transparent 50%);
}

/* ── 35. FOOTER BG PATTERN ─────────────────────────────────── */
footer {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 80px,
    rgba(33,146,91,0.012) 80px,
    rgba(33,146,91,0.012) 81px
  );
}

/* ── 36. CTA SECTION BG ENHANCEMENT ─────────────────────────── */
.cta-section {
  background-image: radial-gradient(ellipse at center top, rgba(33,146,91,0.07) 0%, transparent 60%),
                    radial-gradient(ellipse at center bottom, rgba(33,146,91,0.04) 0%, transparent 50%);
}

/* ── 37. SMOOTH IMG REVEAL ON SCROLL ────────────────────────── */
.gallery-card .gallery-img,
.team-card .team-img,
.featured-img-wrap img,
.story-image-wrap img,
.service-detail-img {
  opacity: 0;
  transition: opacity .6s ease .15s, transform .9s cubic-bezier(.22,1,.36,1) !important;
}
.gallery-card.in-view .gallery-img,
.team-card.in-view .team-img,
.featured-img-wrap.in-view img,
.story-image-wrap.in-view img,
.service-detail-img-wrap.in-view .service-detail-img {
  opacity: 1;
}

/* ── 38. STATS STRIP GOLD LINE ───────────────────────────────── */
.stats-strip {
  background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 100% 100%;
}

/* ── 39. SECTION TRANSITIONS — process connector ────────────── */
.process-steps.in-view::before {
  opacity: 1;
}

/* ── 40. BACK TO TOP BUTTON ─────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 36px;
  right: 36px;
  width: 48px;
  height: 48px;
  background: var(--dark-2);
  border: 1px solid rgba(33,146,91,0.4);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 400;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1),
              background .3s, border-color .3s;
  pointer-events: none;
}
#back-to-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

@media (max-width: 560px) {
  #back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

/* ── 41. SMOOTH FOCUS STYLES ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── 42. PROJECT PAGE NEW SECTIONS ──────────────────────────── */

/* Category tiles */
.category-tile {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.category-tile.in-view { opacity: 1; transform: none; }

/* Delivery cards */
.delivery-card {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.delivery-card.in-view { opacity: 1; transform: none; }
.delivery-card:hover {
  background: var(--dark-3) !important;
}

/* Project testimonial cards */
.proj-testi-card {
  opacity: 0;
  transform: translateY(44px) scale(.975);
  transition: opacity .75s ease, transform .85s cubic-bezier(.22,1,.36,1);
}
.proj-testi-card.in-view { opacity: 1; transform: none; }

/* Category overview section header */
.category-overview .section-header,
.delivery-section .section-header,
.project-testimonials .section-header {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.category-overview .section-header.in-view,
.delivery-section .section-header.in-view,
.project-testimonials .section-header.in-view {
  opacity: 1;
  transform: none;
}

/* Reduced motion additions */
@media (prefers-reduced-motion: reduce) {
  .category-tile,
  .delivery-card,
  .proj-testi-card {
    opacity: 1 !important;
    transform: none !important;
  }
}