:root{
      --ca-orange: #f7941d;
      --ca-brown: #6b3017;
      --ca-light: #fff9f2;
      --ca-dark: #1f130f;
    }
    html,body{height:100%;}
    body{
      /* font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; */
      font-family: "Nunito Sans", sans-serif;
      margin:0;
      background:#ffffff;
      color:#3b2b24;
      scroll-behavior:smooth;
    }

    /* NAVBAR */
    .navbar{
      background:#fff;
      box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    }
    .navbar-brand img{height:42px; margin-right:10px;}
    .navbar-brand span{color:var(--ca-brown); font-weight:700;}
    .nav-link{color:#444 !important; font-weight:600;}
    .nav-link:hover{color:var(--ca-orange) !important;}

    .btn-ca-primary{
      background:var(--ca-orange);
      border-color:var(--ca-orange);
      color:#fff;
      font-weight:700;
      border-radius:999px;
      padding:10px 16px;
    }
    .btn-ca-primary:hover{background:#e27e05; border-color:#e27e05;}

    .btn-ca-outline{
      border-radius:999px;
      border:1px solid var(--ca-brown);
      color:var(--ca-brown);
      font-weight:700;
      background:transparent;
    }
    .btn-ca-outline:hover{background:var(--ca-brown); color:#fff;}

    /* HERO */
    #home{padding-top:6rem; padding-bottom:3.5rem; background: linear-gradient(135deg, #fff9f2 0%, #ffffff 60%);}
    .hero-badge{display:inline-flex; align-items:center; gap:8px; background:rgba(247,148,29,0.12); color:var(--ca-brown); padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.86rem;}
    .hero-title{font-size:clamp(2rem,3vw,3rem); font-weight:800; color:var(--ca-dark); margin-top:12px;}
    .hero-subtitle{color:#5c4a42; max-width:620px;}
    .hero-taglist{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
    .hero-taglist .badge-tag{background:rgba(107,48,23,0.06); color:var(--ca-brown); padding:6px 8px; border-radius:999px; font-weight:700; font-size:0.82rem;}

    /* Sections */
    section{padding-block:3.5rem;}
    .section-title{font-size:1.6rem; font-weight:800; color:var(--ca-dark);}
    .section-subtitle{color:#6a5a52; max-width:760px; margin:auto;}

    .card{border-radius:12px; border:1px solid rgba(0,0,0,0.06);}
    .card-icon{width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(247,148,29,0.12); color:var(--ca-brown);}

    /* .product-card img{border-top-left-radius:12px; border-top-right-radius:12px; object-fit:cover; height:220px; width:100%;} */
    /* PRODUCT IMAGE: show entire product (contain) centered */
.product-card .img-wrap{
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 220px;              /* desktop height for cards */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf7f4;        /* light neutral bg while image loads */
  padding: 8px;               /* gives breathing room so chair doesn't touch edges */
}

/* use contain so the whole chair is visible and centered */
.product-card .img-wrap img{
  width: auto;                /* allow natural aspect */
  height: 100%;
  object-fit: contain;        /* important — shows whole object */
  object-position: center;
  display: block;
  max-width: 100%;
}

/* Responsive: slightly shorter images on mobile */
@media (max-width:767px){
  .product-card .img-wrap{ height:180px; padding:6px; }
  .product-card .img-wrap img{ height:100%; }
}


    .badge-tag{background:rgba(107,48,23,0.06); color:var(--ca-brown); font-size:0.78rem; border-radius:999px; padding:4px 8px;}

    /* Process */
    .process-number{width:38px; height:38px; border-radius:999px; background:rgba(247,148,29,0.12); color:var(--ca-brown); display:flex; align-items:center; justify-content:center; font-weight:800;}

    /* Testimonial card */
    .testimonial-card{background: #fff9f2; border-radius:12px; padding:18px; border:1px solid rgba(0,0,0,0.04);}

    /* Contact form */
    #contact{background:linear-gradient(180deg,#fff9f2, #ffffff);}
    .form-control:focus, .form-select:focus{border-color:var(--ca-orange); box-shadow:0 6px 20px rgba(247,148,29,0.12);}

    /* Review slider styles - improved to prevent overflow */
    .review-slider-wrapper{position:relative; overflow:hidden; background:#fff; border-radius:12px; padding:16px 6px; box-shadow:0 8px 24px rgba(0,0,0,0.06); margin-bottom:2rem;}
    .review-track{display:flex; gap:18px; align-items:center; will-change:transform;}
    .review-wrap{display:inline-flex; align-items:center; gap:18px;} /* wrapper that will be duplicated */
    .review-card{min-width:260px; max-width:260px; background:#fff4e8; color:var(--ca-brown); border-radius:10px; padding:14px; border:1px solid rgba(255,211,166,0.6); box-shadow:0 6px 16px rgba(0,0,0,0.06); font-size:14px;}
    .review-company{font-weight:800; margin-top:8px; color:#7a3f00;}

    /* We'll apply animation via JS based on track width to avoid overflow issues */

    /* Floating CTA styles */
    .floating-cta{position:fixed; z-index:99999; padding:12px 14px; border-radius:999px; box-shadow:0 12px 28px rgba(0,0,0,0.18); color:#fff; font-weight:800; display:flex; align-items:center; gap:8px; text-decoration:none;}
    #whatsappFloating{right:18px; bottom:18px; background:linear-gradient(180deg,var(--ca-orange), #e36b00);}
    #callFloating{left:18px; bottom:18px; background:linear-gradient(180deg,var(--ca-brown), #4a1e12);}

    /* Responsive tweaks */
    @media (max-width: 767.98px){
      .product-card img{height:180px;}
      .review-card{min-width:220px; max-width:220px;}
      .hero-title{font-size:1.8rem;}
    }

    @media (prefers-reduced-motion: reduce){
      /* stop animation */
    }
    /* Tighter primary and outline buttons */
.btn-ca-primary{
  background:var(--ca-orange);
  border-color:var(--ca-orange);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:8px 14px;        /* reduced from 10px 16px */
  font-size:0.95rem;       /* slightly smaller */
  line-height:1;
}

.btn-ca-primary:hover{
  background:#e27e05;
  border-color:#e27e05;
}

/* Tighter outline */
.btn-ca-outline{
  border-radius:999px;
  border:1px solid var(--ca-brown);
  color:var(--ca-brown);
  font-weight:700;
  background:transparent;
  padding:7px 12px;        /* reduced */
  font-size:0.92rem;
  line-height:1;
}
.btn-ca-outline:hover{ background:var(--ca-brown); color:#fff; }

/* Floating CTAs slightly smaller on desktop and touch-friendly */
.floating-cta{
  padding:10px 12px;       /* reduced horizontal padding */
  border-radius:999px;
  font-size:0.95rem;
  min-height:44px;         /* keep touch target >=44px */
  gap:8px;
}

/* On very small screens, keep them compact but tappable */
@media (max-width:420px){
  .floating-cta{ padding:10px 10px; font-size:0.92rem; min-height:44px; }
  .btn-ca-primary, .btn-ca-outline{ padding:8px 12px; font-size:0.9rem; }
}
/* Make the bottom contact (custom quote) stand out with gradient background */
#contact-bottom{
  background: linear-gradient(180deg, #fff9f2 0%, #fffefc 60%);
  padding-block: 3.5rem;
}

/* Add a card-like container inside contact-bottom so form boxes stay white */
#contact-bottom .card, #contact-bottom .form-wrap{
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11,8,6,0.06);
  padding: 18px;
}

/* Footer: soft warm background to separate from content */
footer{
  background: #26140e; /* gentle warm tone to match brand */
  border-top: 1px solid rgba(0,0,0,0.04);
  padding-top: 22px;
  padding-bottom: 22px;
  color:#fff;
}
/* Repair section small styling */
#repair .card { border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.04); }
#repair .section-subtitle { margin-bottom: 1rem; color:#6a5a52; }