/* ================= Brand tokens ================= */
:root{
  --primary-dark:#1C2833;
  --primary-gray:#2E2E2E;
  --secondary:#708090;
  --accent:#F1C40F;
  --accent-dark:#d4a90d; /* for hover/active */
  --light:#e5e5e5;

  --radius-xl:28px;
  --radius-card:24px;

  --shadow-soft:0 10px 25px rgba(0,0,0,.08);
}

/* ================= Base ================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ margin:0; padding:0; }
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--primary-gray);
  line-height:1.6;
  background:
    radial-gradient(#00000006 1px, transparent 1px) 0 0/14px 14px,
    #fafafa; /* subtle dotted texture */
  overflow-x:hidden; /* guard against horizontal scroll */
}

h1,h2,h3{ font-family:'Roboto Condensed',sans-serif; color:var(--primary-dark); }

/* Utility accent button */
.btn-accent{
  background:var(--accent) !important;
  color:#fff !important;
  border:1px solid var(--accent) !important;
}
.btn-accent:hover,
.btn-accent:focus{ background:var(--accent-dark) !important; border-color:var(--accent-dark) !important; color:#fff !important; }

/* ================= Navbar (centered pill) ================= */
.hero-nav{
  position:fixed;
  top:14px; left:50%;
  transform:translateX(-50%);
  z-index:30;

  background:#ffffffcc;
  backdrop-filter:saturate(120%) blur(6px);
  border:1px solid #eee;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:.35rem .75rem;
  max-width:min(1100px, 94vw);
  width:clamp(320px, 90vw, 1100px);
}
.hero-nav-inner{ flex-wrap:wrap; gap:.25rem .75rem; justify-content:center; }
.brand-icon{ color:#1c1c1c; }
.brand-text{
  font-family:'Roboto Condensed',sans-serif; font-weight:800;
  color:var(--primary-dark); white-space:nowrap;
}
.nav-link{
  font-weight:600; color:#1f1f1f; padding:.45rem .8rem; border-radius:999px;
}
.nav-link:hover{ background:#f2f2f2; }
.dropdown-menu .dropdown-item{ padding:.55rem .9rem; }

/* ================= Offcanvas (mobile/medium menu) ================= */
.mobile-menu{
  --bs-offcanvas-height: 75vh;
  background:#ffffffee;
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom:1px solid #eee;
}
.mobile-menu .offcanvas-header{ padding:.9rem 1rem .5rem 1rem; }
.mobile-nav{ max-width:560px; margin:0 auto; }
.mobile-link{
  display:block; text-align:center; padding:.8rem 1rem;
  font-weight:700; color:#1c1c1c; text-decoration:none; border-radius:12px;
}
.mobile-link:hover{ background:#f5f5f5; }
.mobile-accordion{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.9rem 1rem;
  background:#fff; border:1px solid #eee;
  border-radius:12px; font-weight:800; color:#1c1c1c;
}
.mobile-accordion.open i{ transform:rotate(180deg); }
.mobile-sub{
  display:block; padding:.5rem .25rem; color:#1f1f1f; text-decoration:none; border-radius:8px;
}
.mobile-sub:hover{ background:#f7f7f7; }
.mobile-cta{ font-weight:800; padding:.8rem 1rem; }

/* ===== Reviews (simple + clean) ===== */
.container-thin{
  max-width: 1080px;     /* keeps it NOT full width on laptop */
  margin: 0 auto;
  padding: 0 16px;
}

.reviews-section{
  padding: clamp(36px, 6vw, 84px) 0;
}

.reviews-head .eyebrow{
  font-weight:700; color:#6b7078;
}
.reviews-score{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800;
  font-size: clamp(2.6rem, 2.2rem + 2vw, 3.6rem);
  color:var(--primary-dark);
  line-height:1;
}
.reviews-sub{
  margin:.35rem 0 0;
  color:#43484e;
}

.reviews-metrics .metric{
  text-align:center; min-width:120px;
}
.metric-v{
  font-weight:800; color:var(--primary-dark);
}
.metric-k{
  color:#6b7078; font-size:.95rem;
}

/* Cards */
.r-card{
  border:1px solid #eaeaea;
  border-radius: var(--radius-card);
  background:#fff;
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 1.6vw, 22px);
  background-image: radial-gradient(#00000008 1px, transparent 1px);
  background-size: 14px 14px;
  height:100%;
}
.r-top{ display:flex; align-items:center; gap:.75rem; }
.r-name{ font-weight:700; color:#1e2126; }
.r-rate{ font-weight:700; color:#1e2126; }
.r-rate .bi-star-fill{ color: var(--accent); }
.r-body{ color:#3a3f47; margin:.6rem 0 .5rem; }
.r-foot{ margin-top:auto; }

/* Equal height columns */
.reviews-grid .row > [class*="col-"]{ display:flex; }

/* Carousel tweaks for small devices */
#reviewsCarousel .carousel-control-prev,
#reviewsCarousel .carousel-control-next{
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

.reviews-score{
  color: #F1C40F;
}

/* ===== FAQ section wrapper: yellow background + spacing ===== */
.faq-section{
  background: var(--accent);                 /* full yellow section */
  padding: clamp(44px, 6vw, 110px) 0;       /* generous vertical padding */
}

/* contain cards on large screens so section isn’t full-width */
.faq-wrap{
  max-width: 1100px;                         /* nice readable width */
  margin: 0 auto;
  padding: 0 clamp(16px, 2vw, 24px);
}

/* Head area centered + more bottom gap before the accordion */
.faq-head{
  text-align:center;
  color:#1C2833;
  margin-bottom: clamp(32px, 6vw, 72px);     /* <<< extra bottom space */
}
.faq-head .eyebrow{
  font-weight:800;
  letter-spacing:.02em;
  opacity:.95;
  margin:0 0 .25rem 0;
}
.faq-head .intro-title{
  font-family:'Roboto Condensed', sans-serif;
  font-weight:800;
  line-height:1.05;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  margin:0;
}

/* ===== Masonry 2-column layout (independent columns) ===== */
.faq-grid{
  column-count: 2;
  column-gap: clamp(12px, 1.6vw, 18px);
}
@media (max-width: 991.98px){
  .faq-grid{ column-count: 1; }
}

/* keep each accordion intact in its column */
.faq-item{
  break-inside: avoid;
  display:block;
  margin-bottom: clamp(12px, 1.6vw, 18px);

  background:#fff;
  border:1px solid #eee;
  border-radius:28px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}

.faq-item summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding: clamp(14px, 1.6vw, 18px) clamp(18px, 2vw, 24px);
  cursor:pointer; user-select:none;
  font-weight:800; color:#1f1f1f;
}
.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary i{
  font-size:1rem; line-height:1; transition:transform .25s ease; color:#7a7f86;
}
.faq-item[open] summary i{ transform:rotate(180deg); color:#4b4f55; }

.faq-item:hover summary{ background:#fafafa; }

/* smooth body reveal */
.faq-body{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease;
  border-top:1px solid #f2f2f2; background:#fff;
}
.faq-item[open] .faq-body{ grid-template-rows:1fr; }
.faq-body > div{
  overflow:hidden;
  padding:10px clamp(18px, 2vw, 24px) clamp(16px, 2.2vw, 20px);
  color:#464b50;
}

/* ===== Final CTA ===== */
.final-cta-section{
  padding: clamp(36px, 5vw, 80px) 0;
}

.cta-title{
  color: #fff;
}
.final-cta-card{
  position: relative;
  border-radius: var(--radius-xl, 28px);
  overflow: hidden;
  min-height: clamp(420px, 48vw, 560px);
  box-shadow: var(--shadow-soft, 0 10px 25px rgba(0,0,0,.08));
}

/* background image */
.final-cta-card .cta-bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.02);
}

/* dark overlay for readability */
.final-cta-card .cta-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.5));
}

/* content layout */
.final-cta-card .cta-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(18px, 3vw, 32px);
  align-items:center;
  height:100%;
  padding: clamp(18px, 4vw, 56px);
  color:#fff;
}

@media (max-width: 991.98px){
  .final-cta-card .cta-inner{
    grid-template-columns: 1fr;
    align-items:start;
  }
}

/* copy block */
.final-cta-card .eyebrow{
  font-weight:800;
  opacity:.95;
  margin:0 0 .4rem;
}
.final-cta-card .cta-title{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800; line-height:1.05;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  margin:0 0 .6rem;
}
.final-cta-card .cta-sub{
  max-width: 54ch;
  font-size: clamp(.98rem, .2vw + .96rem, 1.05rem);
  margin:0;
}

/* form panel */
.cta-form-panel{
  background:#ffffffee;
  border:1px solid #eee;
  border-radius: 22px;
  padding: clamp(14px, 2.6vw, 22px);
  color:#1C2833;
  backdrop-filter: blur(4px);
}

.cta-form-panel .grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 16px);
}
.cta-form-panel .grid-2 .span-2{ grid-column: span 2; }

@media (max-width: 575.98px){
  .cta-form-panel .grid-2{
    grid-template-columns: 1fr;
  }
  .cta-form-panel .grid-2 .span-2{ grid-column: span 1; }
}

.cta-form-panel .field label{
  display:block; font-weight:700; font-size:.95rem;
  margin-bottom:.35rem;
}
.cta-form-panel .field input,
.cta-form-panel .field select,
.cta-form-panel .field textarea{
  width:100%;
  border:1px solid #e6e6e6;
  border-radius:12px;
  height: 44px;
  padding: 10px 12px;
  font-size:1rem;
  background:#fff;
}
.cta-form-panel .field textarea{ height:auto; resize:vertical; min-height:110px; }

.cta-form-panel .field input:focus,
.cta-form-panel .field select:focus,
.cta-form-panel .field textarea:focus{
  outline:none;
  border-color:#ddd;
  box-shadow:0 0 0 3px rgba(241,196,15,.18); /* accent glow */
}

/* button + note */
.cta-submit{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; margin-top:10px;
  padding:.9rem 1.2rem; font-weight:800; color:#fff;
  border:1px solid var(--accent); background:var(--accent);
}
.cta-submit:hover{ background:var(--accent-dark,#d4a90d); border-color:var(--accent-dark,#d4a90d); }

.cta-note{
  margin:8px 0 0; font-size:.9rem; color:#61656a;
}

/* ========== Footer ========== */
.site-footer{
  background:#fff;
  border-top:1px solid #eee;
  padding: clamp(28px, 4vw, 56px) 0 0;
  color: var(--primary-gray, #2E2E2E);
  --footer-heading-size: clamp(1.2rem, 0.6vw + 1rem, 1.6rem);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr .8fr .6fr;
  gap: clamp(18px, 3vw, 38px);
  align-items:flex-start;
}

@media (max-width: 991.98px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575.98px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
}

/* Brand area */
.footer-brand .brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none;
}
.brand-icon-round{
  width:40px; height:40px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:#f4f4f4; border:1px solid #e9e9e9; color:#333;
}
.brand-icon-round i{ font-size:1.1rem; }
.brand-text{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800; color:var(--primary-dark, #1C2833);
}

.footer-about{ margin:.75rem 0 1rem; max-width:46ch; }
.footer-contact{ margin:0; padding:0; list-style:none; }
.footer-contact li{ margin-bottom:.15rem; }

/* Brand name size */
.site-footer .brand-text{
  font-size: var(--footer-heading-size);
}

/* Columns */
.footer-col .footer-title{
  font-weight:500; margin: .25rem 0 .75rem;
  color: var(--primary-dark, #1C2833);
}
.footer-list{ margin:0; padding:0; list-style:none; }
.footer-list li{ margin:.35rem 0; }

/* Links */
.footer-link{
  color:#555;
  text-decoration:none;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.footer-link:hover{
  color: var(--accent, #F1C40F);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Socials */
.footer-socials{ display:flex; gap:.6rem; }
.social-btn{
  width:38px; height:38px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:#f3f3f3; border:1px solid #eaeaea;
  color:#333; text-decoration:none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.social-btn:hover{
  background: var(--accent, #F1C40F);
  border-color: var(--accent, #F1C40F);
  color:#fff;
  transform: translateY(-1px);
}

/* Bottom bar */
.footer-bottom{
  margin-top: clamp(22px, 3vw, 40px);
  border-top:1px solid #eee;
  padding: clamp(12px, 2vw, 18px) 0;
  background:#fff;
}
.footer-bottom-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; flex-wrap:wrap;
}
.copy{ color:#666; font-size:.95rem; }
.by{ color:#666; font-size:.95rem; }

/* Center footer content and add side padding */
.site-footer .container-xxl {
  max-width: 1100px;                    /* pick your preferred width */
  margin-inline: auto;                  /* center it */
  padding-inline: clamp(16px, 3vw, 36px); /* comfy side padding on all screens */
}

/* (optional) keep the bottom bar matching the same width/padding */
.site-footer .footer-bottom .container-xxl {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 36px);
}