/* ============================================================
   ARPIT SOFA & CHAIR REPAIRING — stylesheet
   Palette: Primary (Deep Navy) #0D2440 / Secondary #1B3A5C / Accent (Gold) #C9973F / Background #F8FAFC / White
   Type: Manrope (display) · Inter (body) · Poppins (buttons/labels)
   ============================================================ */

:root{
  --espresso: #1B3A5C;
  --espresso-deep: #0D2440;
  --camel: #C9973F;
  --camel-light: #E0BD7A;
  --linen: #F8FAFC;
  --charcoal: #2A3D52;
  --white: #FFFFFF;

  --shadow-soft: 0 20px 60px -20px rgba(13, 36, 64, 0.35);
  --shadow-lift: 0 30px 80px -25px rgba(13, 36, 64, 0.5);
  --radius-lg: 28px;
  --radius-md: 16px;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--linen);
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.font-display{ font-family: 'Manrope', sans-serif; }
.font-btn{ font-family: 'Poppins', sans-serif; letter-spacing: 0.04em; }

a{ text-decoration:none; color:inherit; }
button{ font-family: inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: 3px solid var(--espresso); outline-offset: 3px; }

.container{ max-width: 1280px; margin: 0 auto; padding-inline: 24px; }

/* ---------- Texture / background wash ---------- */
.bg-linen-wash{
  background:
    radial-gradient(circle at 15% 10%, rgba(201,151,63,0.16), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(27,58,92,0.10), transparent 40%),
    var(--linen);
}

/* ---------- Stitch divider — signature motif ---------- */
.stitch-divider{
  position: relative;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--camel) 0 10px, transparent 10px 20px);
  opacity: 0.6;
}
.stitch-line-v{
  background-image: repeating-linear-gradient(180deg, var(--camel) 0 8px, transparent 8px 16px);
  width: 2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 32px;
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium), background 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--espresso-deep), var(--espresso) 55%, var(--camel));
  color: var(--white);
  box-shadow: 0 14px 40px -12px rgba(13,36,64,0.55);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 22px 50px -14px rgba(201,151,63,0.55); }
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.btn-primary:hover::after{ transform: translateX(120%); }

.btn-outline{
  background: transparent;
  color: var(--espresso);
  border: 1.5px solid var(--espresso);
}
.btn-outline:hover{ background: var(--espresso); color: var(--white); transform: translateY(-3px); }

.btn-whatsapp{
  background: #1F8A3B;
  color: var(--white);
  box-shadow: 0 14px 40px -14px rgba(31,138,59,0.6);
}
.btn-whatsapp:hover{ transform: translateY(-3px); }

.btn-glow{
  box-shadow: 0 0 0 0 rgba(201,151,63,0.6);
  animation: pulse-glow 2.6s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(201,151,63,0.45); }
  50%{ box-shadow: 0 0 0 14px rgba(201,151,63,0); }
}

/* ---------- Nav ---------- */
.nav-wrap{
  position: fixed; top:0; left:0; right:0; z-index:50;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  padding-block: 20px;
}
.nav-wrap.scrolled, .nav-wrap.menu-open{
  background: rgba(247,243,238,0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -18px rgba(13,36,64,0.35);
  padding-block: 12px;
}
#mobileMenu{
  background: var(--white);
  border-radius: 0 0 20px 20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(201,151,63,0.15);
  border-top: none;
}
#mobileMenu a{ color: var(--charcoal); }
.logo-mark{
  width: 56px; height:56px; border-radius: 16px;
  background: var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
  flex-shrink:0;
  padding: 7px;
}
.logo-mark img{ width:100%; height:100%; object-fit:contain; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: auto;
  padding-top: 128px;
  padding-bottom: 90px;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px){
  .hero{ min-height: 88svh; display:flex; align-items:center; }
  .hero .container{ width:100%; }
}
.hero-bg-canvas{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(201,151,63,0.28), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 20%, rgba(27,58,92,0.18), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, var(--linen) 55%, #EEF2F6 100%);
}
.grain-texture{
  position:absolute; inset:0; z-index:-1; opacity:0.05; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wood-grain-strip{
  position:absolute; left:0; right:0; height:220px; z-index:-1; opacity:0.5; pointer-events:none;
  background: repeating-linear-gradient(90deg, rgba(27,58,92,0.05) 0 3px, transparent 3px 40px, rgba(27,58,92,0.03) 40px 43px, transparent 43px 90px);
  animation: grain-drift 40s linear infinite;
}
@keyframes grain-drift{ from{ background-position-x:0; } to{ background-position-x: 800px; } }

.particle{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle, rgba(201,151,63,0.55), transparent 70%);
  pointer-events:none;
  animation: float-particle linear infinite;
}
@keyframes float-particle{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform: translateY(-140px) translateX(20px); opacity:0; }
}

.eyebrow{
  font-family:'Poppins',sans-serif; text-transform:uppercase; letter-spacing:0.22em;
  font-size:12px; font-weight:600; color: var(--espresso);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:28px; height:1.5px; background: var(--espresso); display:inline-block; }

.hero-heading{
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.04;
  font-weight: 700;
  color: var(--espresso-deep);
}
.hero-heading em{ font-style: italic; color: var(--camel); }

/* ---------- Floating 3D hero object stage ---------- */
.hero-stage{
  position: relative;
  perspective: 1600px;
  height: 560px;
}
.float-object{
  position:absolute;
  will-change: transform;
  transform-style: preserve-3d;
  filter: drop-shadow(0 35px 45px rgba(13,36,64,0.35));
  transition: filter 0.4s ease;
}
.float-object img{ width:100%; height:auto; border-radius: 18px; }
.float-object .obj-shadow{
  position:absolute; left:8%; right:8%; bottom:-26px; height:34px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(13,36,64,0.4), transparent 72%);
  filter: blur(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.obj-primary{ width: 62%; top: 4%; left: 16%; }
.obj-secondary{ width: 34%; top: 46%; left: -2%; }
.obj-tertiary{ width: 30%; top: 8%; right: -4%; }

.hero-sheen{
  position:absolute; inset:0; border-radius: 18px; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, transparent 30%);
  mix-blend-mode: overlay;
}

.hero-stats{
  display:flex; gap:40px; flex-wrap:wrap;
}
.stat-num{ font-family:'Manrope', sans-serif; font-size: 34px; color: var(--espresso-deep); font-weight:700; }
.stat-label{ font-size:12.5px; color: var(--charcoal); opacity:0.75; font-family:'Poppins',sans-serif; letter-spacing:0.03em;}

/* ---------- Lead form ---------- */
.lead-form-card{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(201,151,63,0.35);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 28px;
  position: relative;
  z-index: 5;
}
.hero-stage{ z-index: 1; }
.field{
  width:100%; padding: 14px 16px; border-radius: 12px;
  border: 1.4px solid #E2E8F0; background: #FFFFFF;
  font-family:'Inter',sans-serif; font-size:14.5px; color: var(--charcoal);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.field:focus{ border-color: var(--espresso); box-shadow: 0 0 0 4px rgba(27,58,92,0.12); }
.field-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color: var(--espresso); font-family:'Poppins',sans-serif; font-weight:600; }

/* ---------- Section headers ---------- */
.section-pad{ padding-block: 110px; }
@media (max-width: 768px){ .section-pad{ padding-block: 72px; } }
.section-title{ font-size: clamp(30px, 4vw, 48px); font-weight:700; color: var(--espresso-deep); line-height:1.12; }
.section-kicker{ font-family:'Poppins',sans-serif; text-transform:uppercase; letter-spacing:0.2em; font-size:12px; font-weight:600; color: var(--camel); }

/* ---------- Glass / 3D cards ---------- */
.glass-card{
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -30px rgba(13,36,64,0.35);
}

.tilt-card{
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s ease;
  will-change: transform;
}

.service-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: 0 18px 45px -25px rgba(13,36,64,0.3);
  border: 1px solid rgba(201,151,63,0.18);
}
.service-card .icon-wrap{
  width:54px; height:54px; border-radius:14px;
  background: linear-gradient(135deg, var(--camel-light), var(--camel));
  display:flex; align-items:center; justify-content:center;
  color: var(--espresso-deep);
}

/* ---------- Counters reveal ---------- */
.reveal-up{ opacity:0; transform: translateY(46px); }
.reveal-scale{ opacity:0; transform: scale(0.92); }
.reveal-blur{ opacity:0; filter: blur(10px); transform: translateY(20px); }

/* ---------- Gallery ---------- */
.gallery-item{
  position:relative; overflow:hidden; border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -24px rgba(13,36,64,0.35);
}
.gallery-item img{ transition: transform 0.7s var(--ease-premium); width:100%; height:100%; object-fit:cover; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-tag{
  position:absolute; top:14px; left:14px;
  padding: 6px 14px; border-radius:100px;
  font-family:'Poppins',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  backdrop-filter: blur(6px);
}
.tag-before{ background: rgba(13,36,64,0.75); color:#fff; }
.tag-after{ background: rgba(27,58,92,0.85); color:#fff; }

/* ---------- Process ---------- */
.process-line{
  position:absolute; left:27px; top:0; bottom:0; width:2px;
  background: repeating-linear-gradient(180deg, var(--camel) 0 8px, transparent 8px 16px);
}
.process-num{
  width:56px; height:56px; border-radius:50%;
  background: var(--white); border:1.5px solid var(--camel);
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:700; color: var(--espresso);
  flex-shrink:0; position:relative; z-index:1;
}

/* ---------- Video section ---------- */
.video-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-lift);
}
.play-btn{
  width:88px; height:88px; border-radius:50%;
  background: rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 20px 45px -18px rgba(0,0,0,0.5);
  transition: transform 0.35s var(--ease-premium);
}
.play-btn:hover{ transform: scale(1.08); }

/* ---------- Testimonials ---------- */
.testi-card{
  background: var(--white); border-radius: var(--radius-md);
  padding: 32px; box-shadow: 0 18px 45px -28px rgba(13,36,64,0.35);
  border: 1px solid rgba(201,151,63,0.18);
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s ease;
  position: relative;
}
.testi-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 55px -24px rgba(13,36,64,0.4);
}
.testi-quote-icon{
  color: var(--camel); opacity:0.35; margin-bottom: 6px;
}
.stars{ color: var(--camel); letter-spacing:2px; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--camel-light), var(--camel));
  color: var(--espresso-deep); font-family:'Manrope',sans-serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- FAQ ---------- */
.faq-item{ border-bottom: 1px solid rgba(201,151,63,0.35); }
.faq-question{ display:flex; align-items:center; justify-content:space-between; padding: 22px 4px; font-weight:600; }
.faq-icon{ transition: transform 0.35s var(--ease-premium); flex-shrink:0; }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height 0.45s var(--ease-premium), padding 0.45s ease; }
.faq-item.open .faq-answer{ max-height: 300px; padding-bottom: 22px; }

/* ---------- Counters / marquee for service areas ---------- */
.area-chip{
  padding: 10px 18px; border-radius:100px; border:1px solid rgba(27,58,92,0.25);
  background: rgba(255,255,255,0.6); font-size:13.5px; white-space:nowrap;
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(14px);
  box-shadow: 0 -10px 30px -18px rgba(13,36,64,0.4);
  padding: 12px 16px;
  display:flex; gap:10px;
}

/* ---------- Utility reveal for JS/GSAP hooks ---------- */
.parallax-slow{ will-change: transform; }

::selection{ background: var(--camel); color: var(--white); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--linen); }
::-webkit-scrollbar-thumb{ background: var(--camel); border-radius:10px; }