/* Ashraf Interiors - final reliability and layout fixes */

/* Prevent animation libraries from leaving content invisible */
[data-reveal], [data-stagger] > *, .fade-up, .fade-left, .fade-right, .zoom-in {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Header and logo */
.site-header { padding: 12px 18px; }
.site-header .nav-wrapper {
  min-height: 88px;
  padding: 10px 22px;
  border-radius: 0 0 22px 22px;
  background: rgba(8,18,36,.95);
  box-shadow: 0 18px 45px rgba(5,12,30,.18);
}
.site-header.sticky { padding: 8px 18px; background: transparent; box-shadow: none; backdrop-filter: none; }
.site-header.sticky .nav-wrapper { min-height: 76px; background: rgba(8,18,36,.96); backdrop-filter: blur(18px); }
.logo img { width: 185px; height: 78px; object-fit: contain; border-radius: 14px; background: #fff; padding: 6px 10px; }
.footer-logo img { width: 190px; height: auto; border-radius: 16px; background:#fff; padding: 8px 12px; }

/* Keep all image frames controlled */
.image-hover, .service-image, .project-card, .portfolio-item, .portfolio-category-card,
.story-image-primary, .story-image-secondary, .service-detail-image, .featured-case-visual,
.contact-side-image, .client-promise-image, .testimonial-image, .about-image-main, .about-image-secondary {
  overflow: hidden;
}
.image-hover img, .service-image img, .project-card img, .portfolio-item img,
.portfolio-category-card img, .story-image-primary img, .story-image-secondary img,
.service-detail-image img, .featured-case-visual img, .contact-side-image img,
.client-promise-image img, .testimonial-image img, .about-image-main img, .about-image-secondary img {
  width: 100%; height: 100%; object-fit: cover;
}

/* HOME: brand strip */
.brand-strip { padding: 24px 0; background: var(--gold); }
.brand-strip-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px; color:#fff; }
.brand-strip-inner span { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.brand-strip-inner i { font-size:.65rem; }

/* HOME: about */
.about-preview { background: var(--cream); }
.about-preview-grid { display:grid; grid-template-columns:1fr .92fr; gap:72px; align-items:center; }
.about-visual { position:relative; min-height:610px; }
.about-image-main { width:78%; height:540px; border-radius:30px; box-shadow:var(--shadow-md); }
.about-image-secondary { position:absolute; right:0; bottom:0; width:46%; height:285px; border:10px solid var(--cream); border-radius:22px; box-shadow:var(--shadow-sm); }
.experience-badge { position:absolute; left:4%; bottom:18px; width:170px; aspect-ratio:1; display:grid; place-content:center; text-align:center; border-radius:50%; color:#fff; background:var(--primary); box-shadow:var(--shadow-md); padding:18px; }
.experience-badge strong { font-family:"Cormorant Garamond",serif; font-size:2.7rem; line-height:1; }
.experience-badge span { font-size:.7rem; margin-top:7px; }
.about-content .section-heading h2 span { color:var(--gold); }
.about-lead { margin-top:26px; font-size:1.05rem; color:var(--text); }
.about-content > p + p { margin-top:14px; }
.about-points { display:grid; gap:15px; margin:28px 0; }
.about-point { display:grid; grid-template-columns:50px 1fr; gap:15px; align-items:start; padding:17px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.72); }
.about-point i { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:var(--gold); background:rgba(184,135,70,.12); }
.about-point h3 { font-size:1.35rem; margin-bottom:3px; }

/* HOME: services */
.services-preview { background:#fff; }
.services-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:52px; }
.service-card { display:grid; grid-template-columns:.94fr 1.06fr; min-height:340px; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--cream); box-shadow:0 10px 30px rgba(10,20,45,.05); }
.service-image { min-height:340px; }
.service-content { position:relative; display:flex; flex-direction:column; justify-content:center; padding:32px; }
.service-number { position:absolute; top:20px; right:23px; font-family:"Cormorant Garamond",serif; font-size:1.6rem; color:rgba(14,26,54,.24); }
.service-content h3 { margin-bottom:12px; }
.service-content p { margin-bottom:20px; }
.service-content a { display:inline-flex; align-items:center; gap:9px; margin-top:auto; color:var(--gold); font-weight:600; }

/* HOME: projects */
.projects-preview { background:var(--primary); }
.projects-heading-row { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:46px; }
.projects-preview h2, .projects-preview .text-link { color:#fff; }
.projects-magazine { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; }
.projects-stack { display:grid; gap:22px; }
.project-card { position:relative; min-height:310px; border-radius:22px; box-shadow:var(--shadow-md); }
.project-card-large { min-height:642px; }
.project-card img { position:absolute; inset:0; }
.project-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(5,12,30,.9)); }
.project-info { position:absolute; left:26px; bottom:25px; z-index:2; color:#fff; }
.project-info span { color:var(--gold-light); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.project-info h3 { color:#fff; margin-top:5px; }
.project-arrow { position:absolute; top:22px; right:22px; z-index:2; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(255,255,255,.15); backdrop-filter:blur(10px); }

/* HOME: why us */
.why-us { background:var(--cream-deep); }
.why-us-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:68px; align-items:start; }
.why-us-content { position:sticky; top:130px; }
.why-us-content > p { margin:24px 0 28px; }
.why-us-list { display:grid; gap:16px; }
.why-card { display:grid; grid-template-columns:68px 1fr; gap:18px; padding:26px; border-radius:20px; background:rgba(255,255,255,.78); border:1px solid rgba(14,26,54,.08); }
.why-card > span { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(184,135,70,.35); color:var(--gold); font-family:"Cormorant Garamond",serif; font-size:1.25rem; }
.why-card h3 { font-size:1.55rem; margin-bottom:5px; }

/* HOME: process */
.process-preview { background:#fff; }
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:48px; }
.process-card { position:relative; min-height:285px; padding:28px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--cream)); }
.process-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; color:var(--gold); background:rgba(184,135,70,.11); }
.process-number { position:absolute; top:22px; right:22px; color:rgba(14,26,54,.2); font-family:"Cormorant Garamond",serif; font-size:1.8rem; }
.process-card h3 { margin:38px 0 10px; }

/* HOME: testimonial */
.testimonial-feature { background:var(--primary-deep); }
.testimonial-grid { display:grid; grid-template-columns:.9fr 1.1fr; min-height:520px; border-radius:30px; overflow:hidden; background:var(--primary); box-shadow:var(--shadow-lg); }
.testimonial-image { min-height:520px; }
.testimonial-content { display:flex; flex-direction:column; justify-content:center; padding:60px; }
.testimonial-quote { color:var(--gold); font-size:2.5rem; margin-bottom:20px; }
.testimonial-content blockquote { color:#fff; font-family:"Cormorant Garamond",serif; font-size:clamp(2rem,3vw,3.2rem); line-height:1.16; }
.testimonial-author { margin-top:25px; }
.testimonial-author strong { color:#fff; }
.testimonial-author span { color:rgba(255,255,255,.58); margin-left:6px; }
.testimonial-rating { color:var(--gold-light); margin-top:14px; display:flex; gap:5px; }

/* HOME: CTA */
.home-cta { min-height:620px; display:grid; place-items:center; text-align:center; overflow:hidden; }
.home-cta-background { position:absolute; inset:0; }
.home-cta-background img { width:100%; height:110%; object-fit:cover; }
.home-cta-background span { position:absolute; inset:0; background:linear-gradient(rgba(8,18,36,.74),rgba(8,18,36,.86)); }
.home-cta-content { position:relative; z-index:2; max-width:860px; }
.home-cta-content h2 { color:#fff; }
.home-cta-content > p:not(.section-eyebrow) { max-width:680px; margin:20px auto 28px; color:rgba(255,255,255,.74); }

/* Secondary page blank-section protection */
.service-overview-grid, .additional-services-grid, .portfolio-masonry, .portfolio-category-grid,
.contact-card-grid, .achievement-grid, .approach-timeline, .mission-vision-grid {
  min-height: 0 !important;
}

/* Footer */
.site-footer { margin: 26px 18px 18px; border-radius: 28px; overflow:hidden; }

/* Better image proportions on secondary pages */
.service-detail-image img { height:520px !important; }
.featured-case-visual img { height:560px !important; min-height:0 !important; }
.contact-side-image img { height:470px !important; }
.portfolio-item { min-height:330px; }
.portfolio-item-tall { min-height:682px; }
.portfolio-category-card { min-height:340px; }

/* Disable laggy pointer visuals */
#cursor, #cursor-blur { display:none !important; }

@media (max-width:1200px) {
  .services-grid { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-preview-grid, .why-us-grid { gap:48px; }
  .logo img { width:165px; height:72px; }
}

@media (max-width:992px) {
  .site-header { padding:10px 12px; }
  .site-header .nav-wrapper { min-height:76px; padding:8px 16px; border-radius:0 0 18px 18px; }
  .about-preview-grid, .why-us-grid, .testimonial-grid { grid-template-columns:1fr; }
  .about-visual { max-width:720px; width:100%; margin:auto; }
  .why-us-content { position:static; }
  .projects-magazine { grid-template-columns:1fr; }
  .projects-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-card-large { min-height:520px; }
  .testimonial-grid { max-width:760px; margin:auto; }
  .testimonial-image { min-height:400px; }
  .testimonial-content { padding:44px; }
  .site-footer { margin:18px 12px 12px; }
}

@media (max-width:768px) {
  .logo img { width:145px; height:64px; }
  .about-visual { min-height:500px; }
  .about-image-main { width:88%; height:430px; }
  .about-image-secondary { width:52%; height:210px; }
  .experience-badge { width:142px; }
  .service-card { grid-template-columns:1fr; }
  .service-image { min-height:250px; height:250px; }
  .projects-heading-row { flex-direction:column; align-items:flex-start; }
  .projects-stack { grid-template-columns:1fr; }
  .project-card, .project-card-large { min-height:360px; }
  .process-grid { grid-template-columns:1fr; }
  .testimonial-image { min-height:300px; }
  .testimonial-content { padding:34px 24px; }
  .service-detail-image img { height:390px !important; }
  .featured-case-visual img { height:430px !important; }
  .contact-side-image img { height:350px !important; }
  .portfolio-item, .portfolio-item-tall { min-height:350px; }
}

@media (max-width:480px) {
  .site-header { padding:8px; }
  .site-header .nav-wrapper { min-height:68px; padding:6px 12px; border-radius:0 0 16px 16px; }
  .logo img { width:126px; height:58px; border-radius:11px; }
  .about-visual { min-height:435px; }
  .about-image-main { width:100%; height:360px; }
  .about-image-secondary { width:58%; height:170px; border-width:7px; }
  .experience-badge { width:120px; left:0; }
  .service-content { padding:26px 22px; }
  .project-card, .project-card-large { min-height:320px; }
  .site-footer { margin:12px 8px 8px; border-radius:20px; }
  .footer-logo img { width:160px; }
}


/* ===== FINAL UX PATCH v4 ===== */
#preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo img{width:170px!important;height:170px!important;object-fit:contain!important;border-radius:26px!important;background:#fff;padding:14px!important;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.mobile-brand-text{display:none}

/* FAQ answers are closed by default and only open after + click */
.faq-answer{max-height:0!important;overflow:hidden!important;opacity:0!important;padding:0 24px!important;transition:max-height .42s ease,opacity .28s ease,padding .32s ease!important}
.faq-item.active .faq-answer{max-height:420px!important;opacity:1!important;padding:0 24px 24px!important}
.faq-question i{transition:transform .3s ease}
.faq-item.active .faq-question i{transform:rotate(45deg)}

.footer-hours{display:flex;align-items:flex-start;gap:12px;color:#cfd6e4}
.footer-hours i{margin-top:5px}
.footer-hours strong,.footer-contact strong{color:#fff;font-weight:600}
.footer-bottom-inner{position:relative;justify-content:center!important;text-align:center!important;min-height:68px}
.footer-bottom-inner>p{margin:0 auto!important;text-align:center!important}
.footer-legal{position:absolute;right:0}

@media(max-width:992px){
  .site-header{padding:0!important;background:#f7f3ec!important}
  .site-header .nav-wrapper,.site-header.sticky .nav-wrapper{width:100%!important;min-height:72px!important;padding:0 20px!important;border-radius:0!important;background:#f7f3ec!important;box-shadow:0 8px 24px rgba(8,18,36,.08)!important;backdrop-filter:none!important}
  .logo img{display:none!important}
  .mobile-brand-text{display:inline-block;color:#21170f;font-family:"Cormorant Garamond",serif;font-size:clamp(1.65rem,7vw,2.15rem);font-weight:700;letter-spacing:-.02em}
  .menu-toggle{display:flex!important;flex-direction:column;justify-content:center;gap:6px;width:46px;height:46px;border-radius:50%;transition:background .3s ease,transform .3s ease}
  .menu-toggle:hover{background:rgba(184,135,70,.1)}
  .menu-toggle span{width:24px;height:2px;background:#21170f!important;border-radius:10px;transition:transform .38s cubic-bezier(.77,0,.18,1),opacity .25s ease,width .3s ease;margin:0 auto!important}
  .menu-toggle span:nth-child(2){width:18px;margin-left:13px!important}
  .menu-toggle.active{transform:rotate(90deg)}
  .menu-toggle.active span{background:#fff!important}
  .menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
  .menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .mobile-menu{left:auto!important;width:min(88vw,390px)!important;transform:translateX(105%)!important;background:linear-gradient(145deg,#081224,#111d38)!important;box-shadow:-25px 0 80px rgba(0,0,0,.35)!important}
  .mobile-menu.active{transform:translateX(0)!important}
  .mobile-menu-inner{align-items:flex-start!important;padding:105px 38px 45px!important;gap:0!important}
  .mobile-menu-inner>a:not(.btn){width:100%;padding:14px 0;color:#fff!important;font-size:clamp(2.15rem,9vw,3.35rem)!important;border-bottom:1px solid rgba(255,255,255,.1);transform:translateX(30px);opacity:0;transition:transform .45s ease,opacity .45s ease,color .25s ease}
  .mobile-menu.active .mobile-menu-inner>a{transform:translateX(0);opacity:1}
  .mobile-menu.active .mobile-menu-inner>a:nth-child(1){transition-delay:.08s}.mobile-menu.active .mobile-menu-inner>a:nth-child(2){transition-delay:.13s}.mobile-menu.active .mobile-menu-inner>a:nth-child(3){transition-delay:.18s}.mobile-menu.active .mobile-menu-inner>a:nth-child(4){transition-delay:.23s}.mobile-menu.active .mobile-menu-inner>a:nth-child(5){transition-delay:.28s}.mobile-menu.active .mobile-menu-inner>a:nth-child(6){transition-delay:.33s}
  .mobile-menu-inner .btn{margin-top:30px;width:100%;border-radius:16px!important}
  .footer-legal{position:static;margin-top:10px}
  .footer-bottom-inner{flex-direction:column!important}
}

@media(max-width:600px){
  .mobile-menu{width:100vw!important}
  .mobile-menu-inner{padding-left:28px!important;padding-right:28px!important}
  .site-footer{margin:10px 6px 6px!important}
  .footer-top{padding:55px 0 35px!important}
  .footer-grid{gap:34px!important}
  .footer-logo img{width:190px!important;border-radius:20px!important}
  .footer-contact>a,.footer-hours{line-height:1.65}
  .whatsapp-float{bottom:20px!important}
  .back-to-top{display:none!important}
}