:root{
  --primary:#8c5a2c;
  --primary-hover:#734419;
  --accent:#cca063;
  --foreground:#241812;   /* dark espresso: dark section bg */
  --deep:#160e09;         /* footer */
  --text:#2b2018;         /* body text on light */
  --muted:#7a6a5b;        /* muted text on light */
  --dark-muted:#b8a894;   /* muted text on dark */
  --cream:#f5efe4;
  --sand:#e9ddc9;
  --pale:#f4e6d5;
  --card:#ffffff;
  --border:#e6dccb;
  --p-fg:#fdf5ec;         /* text on primary */
  --brand-shadow:0 10px 26px rgba(140,90,44,.32);
  --brand-glow:0 14px 34px rgba(140,90,44,.45);
  --warm:0 12px 30px rgba(60,40,20,.08);
}
a{
  text-decoration:none !important;
}

#top{
  background: url('./img/hero-bg.webp') center/cover no-repeat;
}
/* Make entire website use Plus Jakarta Sans */
html,
body,
body * {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

*{ box-sizing:border-box; }
html{ color-scheme:light; scroll-behavior:smooth; }
body{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  color:var(--text);
  background:var(--card);
  overflow-x:hidden;
  padding-bottom:64px; /* mobile sticky bar */
}
@media(min-width:768px){ body{ padding-bottom:0; } }

h1,h2,h3,.font-display{ font-family:'Plus Jakarta Sans',sans-serif; }
.eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.25em;
  text-transform:uppercase; color:var(--primary);
}
.eyebrow.on-dark{ color:white; }
.section{ padding:60px 0; }
@media(min-width:992px){ .section{ padding:60px 0; } }
.bg-fg{ background:var(--foreground); }
.bg-cream{ background:var(--cream); }
.bg-sand{ background:var(--sand); }
.text-accent{ color:var(--accent); }
.lead-muted{ color:var(--muted); }
.lead-dark-muted{ color:var(--dark-muted); }

.section-title{ font-weight:800; line-height:1.1; font-size:clamp(28px,4vw,44px); }

/* ---------- Buttons ---------- */
.btn-brand{
  background:var(--primary); color:var(--p-fg);
  font-weight:700; border:0; border-radius:10px;
  padding:14px 22px; box-shadow:var(--brand-shadow);
  transition:.25s; text-transform:uppercase; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
}
.btn-brand:hover{ background:var(--primary-hover); color:var(--p-fg); box-shadow:var(--brand-glow); transform:translateY(-2px); }
.btn-ghost-light{
  border:1px solid rgba(253,245,236,.55); background:rgba(253,245,236,.06);
  color:var(--p-fg); font-weight:700; border-radius:10px; padding:14px 22px;
  transition:.25s; text-transform:uppercase; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
}
.btn-ghost-light:hover{ background:var(--p-fg); color:var(--foreground); }
.btn-outline-brand{
  border:1px solid var(--primary); color:var(--primary); background:transparent;
  border-radius:10px; font-weight:600; padding:9px 16px; transition:.2s;
  display:inline-flex; align-items:center; gap:8px; justify-content:center; font-size:14px;
}
.btn-outline-brand:hover{ background:var(--pale); color:var(--primary); }
.btn-cream{
  background:var(--p-fg); color:var(--foreground); font-weight:700;
  border-radius:10px; padding:14px 22px; text-transform:uppercase; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px; justify-content:center; transition:.25s;
}
.btn-cream:hover{ background:var(--cream); color:var(--foreground); transform:translateY(-2px); }

/* ---------- Logo mark ---------- */
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark{
  position:relative; width:44px; height:44px; flex:0 0 auto;
  display:grid; place-items:center; background:var(--primary); color:var(--p-fg);
  box-shadow:var(--brand-shadow);
  clip-path:polygon(50% 0,93% 18%,88% 72%,50% 100%,12% 72%,7% 18%);
}
.logo-mark .bi-hammer{ position:absolute; font-size:19px; transform:translateX(-3px) rotate(-12deg); }
.logo-mark .bi-wrench{ position:absolute; font-size:15px; transform:translate(9px,5px) rotate(12deg); }
.logo-name{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:17px; line-height:1; }
.logo-sub{ display:block; margin-top:4px; font-size:10px; letter-spacing:.18em; }

/* ---------- Navbar ---------- */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:1050; height:72px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(140,90,44,.15);
}
.site-nav .logo-name{ color:var(--foreground); }
.site-nav .logo-sub{ color:var(--muted); }
.nav-link-x{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px; color:var(--muted); text-decoration:none; transition:.2s; }
.nav-link-x:hover{ color:var(--primary); }
.nav-phone{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; color:var(--primary); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.nav-toggle{ background:transparent; border:0; font-size:22px; color:var(--foreground); }
.mobile-menu{ background:#fff; border-bottom:1px solid var(--border); }
.mobile-menu a{ display:block; padding:12px 4px; color:var(--foreground); text-decoration:none; font-weight:600; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:72px; overflow:hidden; background:var(--foreground);
}
.hero-bg{
  position:absolute; inset:0;
  background:#1a120c url('https://warm-craft-home.lovable.app/assets/ds-handyman-hero-U9PnxiqX.jpg') center/cover no-repeat;
  background-position:62% center;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(26,19,15,.97) 0%,rgba(26,19,15,.9) 46%,rgba(26,19,15,.55) 100%);
}
.wood-grain{
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 42px);
}
.hero .watermark{
  position:absolute; left:4%; top:10%; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:clamp(140px,20vw,260px); line-height:1;
  color:rgba(253,245,236,.035); pointer-events:none; user-select:none;
}
.badge-pill{
  display:inline-flex; border:1px solid rgba(140,90,44,.5); background:rgba(140,90,44,.22);
  color:var(--p-fg); border-radius:999px; padding:8px 16px;
  font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; backdrop-filter:blur(6px);
}
.hero h1{ color:var(--p-fg); font-weight:800; line-height:1.05; font-size:clamp(40px,6vw,62px); margin-top:24px; }
.hero p.sub{ color:var(--dark-muted); max-width:560px; line-height:1.7; margin-top:18px; }
.feature-pill{
  display:flex; align-items:center; gap:8px; border:1px solid rgba(140,90,44,.45);
  background:rgba(140,90,44,.2); color:var(--p-fg); border-radius:999px;
  padding:11px 14px; font-size:14px; font-weight:500; backdrop-filter:blur(6px);
}
.feature-pill .bi{ color:var(--accent); }

.form-card{
  background:var(--card); border-top:4px solid var(--primary); border-radius:18px;
  padding:26px; box-shadow:0 24px 64px rgba(0,0,0,.30); position:relative;
}
.form-card h3{ font-weight:700; font-size:20px; color:var(--foreground); }
.pill-60{
  background:var(--pale); color:var(--primary); border-radius:999px; padding:4px 10px;
  font-family:'Space Grotesk',sans-serif; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.form-card label{ font-size:12px; font-weight:600; color:var(--foreground); margin-bottom:6px; }
.form-card .form-control,.form-card .form-select{
  border:1px solid var(--border); border-radius:10px; height:44px; font-size:14px;
}
.form-card textarea.form-control{ height:auto; }
.form-card .form-control:focus,.form-card .form-select:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(140,90,44,.15);
}

.float-badge{
  position:absolute; right:-10px; top:-26px; z-index:3;
  border:1px solid rgba(140,90,44,.3); background:rgba(140,90,44,.50);
  color:var(--p-fg); border-radius:12px; padding:12px 16px; backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.35); animation:float 4s ease-in-out infinite;
}
.float-badge strong{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; color:var(--accent); }
.float-badge span{ font-size:12px; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---------- Marquee ---------- */
.marquee{ background:var(--foreground); color:var(--p-fg); padding:16px 0; overflow:hidden; }
.marquee-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee-track span{ font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.marquee-track b{ margin:0 28px; color:var(--primary); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Stats ---------- */
.stats{ background:var(--foreground); }
.stat{ text-align:center; padding:32px 12px; }
.stat .num{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--primary); font-size:clamp(44px,6vw,64px); line-height:1; }
.stat .lbl{ font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dark-muted); margin-top:8px; }
@media(min-width:992px){ .stat{ border-right:1px solid rgba(140,90,44,.35); } .stat.last{ border-right:0; } }

/* ---------- Cards ---------- */
.card-x{
  background:var(--card); border:1px solid transparent; border-radius:14px; padding:26px;
  box-shadow:var(--warm); transition:.25s; height:100%;
}
.card-x:hover{ transform:translateY(-4px); border-color:var(--primary); }
.icon-box{
  width:48px; height:48px; display:grid; place-items:center; border-radius:12px;
  border:1px solid rgba(140,90,44,.22); background:rgba(140,90,44,.1); color:var(--primary); font-size:22px;
}
.icon-box.lg{ width:56px; height:56px; font-size:24px; }
.card-x h3{ font-weight:700; font-size:18px; margin-top:18px; color:var(--foreground); }
.card-x p{ color:var(--muted); font-size:14px; line-height:1.6; margin-top:8px; }

.service-card{ background:var(--cream); }
.service-card:hover{ background:var(--card); }
.book-link{ color:var(--primary); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:5px; margin-top:18px; }
.book-link .bi{ transition:.2s; }


.pricing-bar{ background:var(--primary); color:var(--p-fg); border-radius:14px; padding:28px; }
.pricing-bar .icon-box{ border-color:rgba(253,245,236,.2); background:rgba(253,245,236,.1); color:var(--p-fg); }

/* ---------- Process ---------- */
/* ---------- Process ---------- */
.process-wrap{ position:relative; }

/* circle + dashed line track (desktop only) */
.step-track{
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  padding:0 calc(100%/6 - 28px);
}

.step-num{
  flex:0 0 56px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--primary);
  color:var(--p-fg);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:18px;
  box-shadow:var(--brand-shadow);
  position:relative;
  z-index:2;
}

.step-divider{
  flex:1;
  border-top:2px dashed rgba(140,90,44,.5);
  margin:0 4px;
}

/* equal-height card row */
.process-wrap .row{ display:flex; }
.process-wrap .row > [class*="col-"]{ display:flex; }

.step-card{
  width:100%;
  background:var(--card);
  border-top:3px solid var(--primary);
  border-radius:14px;
  padding:28px;
  box-shadow:var(--warm);
  position:relative;
  overflow:hidden;
}
.step-card .ghost{
  position:absolute;
  right:14px;
  top:-6px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:96px;
  color:rgba(140,90,44,.06);
}
.step-card .bi{ color:var(--primary); font-size:24px; }
.step-card .step-lbl{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--primary);
  margin-top:16px;
}
.step-card h3{ font-weight:700; font-size:18px; margin-top:6px; }
.step-card p{ color:var(--muted); font-size:14px; line-height:1.6; margin-top:12px; }

/* mobile circle (shown above each card instead of track) */
.step-num.d-lg-none{ margin:0 auto; }

@media(prefers-reduced-motion:reduce){
  .step-card{ transition:none; }
}

/* track holding circles + connecting lines */
.step-track{
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  padding:0 calc(100%/6 - 28px); /* aligns circles above card centers */
}

.step-num{
  flex:0 0 56px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--primary);
  color:var(--p-fg);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:18px;
  box-shadow:var(--brand-shadow);
  position:relative;
  z-index:2;
}

.step-divider{
  flex:1;
  border-top:2px dashed rgba(140,90,44,.5);
  margin:0 4px;
}

/* equal-height cards */
.process-wrap .row{ display:flex; }
.process-wrap .row > [class*="col-"]{ display:flex; }
.step-card{
  width:100%;
  background:var(--card);
  border-top:3px solid var(--primary);
  border-radius:14px;
  padding:28px;
  box-shadow:var(--warm);
  position:relative;
  overflow:hidden;
}
.step-card .ghost{ position:absolute; right:14px; top:-6px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:96px; color:rgba(140,90,44,.06); }
.step-card .bi{ color:var(--primary); font-size:24px; }
.step-card .step-lbl{ font-family:'Space Grotesk',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); margin-top:16px; }
.step-card h3{ font-weight:700; font-size:20px; margin-top:6px; }
.step-card p{ color:var(--muted); font-size:14px; line-height:1.6; margin-top:12px; }

/* mobile: circle sits inline above each card, no track/line */
.step-num.d-lg-none{
  margin:0 auto;
}

/* ---------- Who we serve ---------- */
.serve-card{ background:var(--cream); border:1px solid transparent; border-radius:14px; padding:28px; transition:.25s; height:100%; }
.serve-card:hover{ transform:translateY(-4px); border-color:var(--primary); }
.serve-card h3{ font-weight:700; font-size:18px; margin-top:18px; }
.serve-card p{ color:var(--muted); font-size:12px; line-height:1.6; margin-top:12px; }
.tag{ background:var(--sand); color:var(--foreground); border-radius:999px; padding:6px 14px; font-size:12px; }

/* ---------- Testimonials ---------- */
.t-card{ background:var(--card); border-radius:14px; padding:28px; box-shadow:var(--warm); position:relative; overflow:hidden; height:100%; }
.t-card .bi-quote{ position:absolute; right:16px; top:6px; font-size:88px; color:rgba(140,90,44,.08); }
.t-card .stars{ color:var(--primary); font-size:15px; }
.t-card .quote{ color:var(--muted); font-size:15px; line-height:1.7; margin-top:18px; position:relative; }
.t-card .who{ border-top:1px solid var(--border); margin-top:22px; padding-top:16px; }
.t-card .who strong{ font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; }
.t-card .who span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* ---------- Contact ---------- */
.contact{ background:var(--primary); }
.contact h2{ color:var(--p-fg); font-weight:800; line-height:1.1; font-size:clamp(32px,4.5vw,48px); }
.contact p.sub{ color:rgba(253,245,236,.82); line-height:1.7; margin-top:16px; }
.contact-tile{ display:flex; align-items:center; gap:12px; background:var(--deep); border-left:3px solid var(--accent); border-radius:10px; padding:16px 20px; color:var(--p-fg); text-decoration:none; transition:.2s; }
.contact-tile:hover{ transform:translateX(4px); color:var(--p-fg); }
.contact-tile .bi{ color:white; font-size:20px; }
.contact-tile span{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; }
.come-pill{  display:inline-flex; border:1px solid rgba(253,245,236,.25); background:rgba(253,245,236,.1); color:var(--p-fg); border-radius:999px; padding:8px 16px; font-size:14px; font-weight:500; }
.contact-tile{
  border-radius: 8px;
border-left: 3px solid #EDE5D8;
background: #97714C;
}
.come-pill{
  border-radius: 33554400px;
border: 1px solid #EDE5D8;
background: #EDE5D8;
color: #8C6239;
}
/* ---------- FAQ ---------- */
.accordion-item{ border:1px solid var(--border); border-radius:10px !important; margin-bottom:12px; overflow:hidden; background:var(--card); }
.accordion-button{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; color:var(--foreground); padding:18px 20px; }
.accordion-button:not(.collapsed){ color:var(--primary); background:var(--card); box-shadow:none; border-left:3px solid var(--primary); }
.accordion-button:focus{ box-shadow:none; }
.accordion-button::after{ background-size:16px; }
.accordion-body{ color:var(--muted); font-size:14px; line-height:1.65; padding-top:0; }

/* ---------- Final CTA ---------- */
.final-cta{ position:relative; background:var(--foreground); text-align:center; overflow:hidden; }
.final-cta .watermark{ position:absolute; inset:0 0 auto 0; text-align:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(120px,22vw,190px); line-height:1; color:rgba(253,245,236,.03); pointer-events:none; }
.final-cta h2{ color:var(--p-fg); font-weight:800; font-size:clamp(32px,4.5vw,48px); line-height:1.1; margin-top:28px; }
.final-cta p{ color:var(--dark-muted); max-width:560px;  line-height:1.7; }

/* ---------- Footer ---------- */
footer{ background:var(--deep); color:var(--dark-muted); padding:64px 0 28px; }
footer .logo-name{ color:var(--p-fg); }
footer .logo-sub{ color:var(--dark-muted); }
footer h6{ font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--primary); }
footer a{ color:var(--dark-muted); text-decoration:none; font-size:14px; }
footer a:hover{ color:var(--primary); }
.foot-line{ border-top:1px solid rgba(140,90,44,.35); margin-top:48px; padding-top:24px; font-size:12px; }

/* ---------- Floating / mobile bar ---------- */
.wa-float{ position:fixed; right:24px; bottom:24px; z-index:1040; display:none; align-items:center; gap:8px; background:var(--primary); color:var(--p-fg); border-radius:999px; padding:12px 20px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; text-decoration:none; box-shadow:var(--brand-glow); transition:.2s; }
.wa-float:hover{ transform:translateY(-4px); color:var(--p-fg); }
@media(min-width:768px){ .wa-float{ display:inline-flex; } }
.mobile-bar{ position:fixed; inset:auto 0 0 0; z-index:1045; display:grid; grid-template-columns:1fr 1fr; }
@media(min-width:768px){ .mobile-bar{ display:none; } }
.mobile-bar a{ height:64px; display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; color:var(--p-fg); text-decoration:none; }
.mobile-bar a.call{ background:var(--primary); }
.mobile-bar a.wa{ background:var(--foreground); }

@media(prefers-reduced-motion:reduce){
  .marquee-track,.float-badge{ animation:none; }
  *{ scroll-behavior:auto; }
}

/* =========================================================
   SERVICES SECTION
========================================================= */

#services {
  background: var(--foreground);
}


/* ---------- Heading ---------- */

.services-heading {
  max-width: 760px;
}

.services-heading .section-title {
  color: var(--p-fg);
}


/* ---------- Service Grid ---------- */

.service-grid {
 
  margin-left: auto;
  margin-right: auto;
}


/* ---------- Service Card ---------- */

.service-card {
  position: relative;

  background: var(--cream);

  border: 1px solid transparent;
  border-radius: 10px;

  padding: 18px;

  min-height: 218px;
  height: 100%;

  display: flex;
  flex-direction: column;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}


/* ---------- Card Hover ---------- */

.service-card:hover {
  background: var(--card);

  border-color: rgba(140, 90, 44, .25);

  transform: translateY(-3px);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, .18);
}


/* ---------- Service Icon ---------- */

.service-icon {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(140, 90, 44, .09);

  border-radius: 9px;

  color: var(--primary);

  font-size: 17px;

  margin-bottom: 17px;
}


.service-icon i {
  line-height: 1;
}


/* ---------- Service Title ---------- */

.service-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;

  color: #111;

  font-size: 14px;

  font-weight: 700;

  line-height: 1.35;

  margin: 0 0 7px;
}


/* ---------- Service Description ---------- */

.service-card p {
  color: #75685d;

  font-size: 11.5px;

  line-height: 1.55;

  margin: 0;

  max-width: 290px;
}


/* ---------- Book Service ---------- */

.service-card .book-link {
  margin-top: auto;

  padding-top: 14px;

  color: var(--primary);

  font-family: 'Plus Jakarta Sans', sans-serif;

  font-size: 11px;

  font-weight: 700;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  width: fit-content;
}


/* ---------- Arrow ---------- */

.service-card .book-link i {
  font-size: 9px;

  transition: transform .2s ease;
}


.service-card:hover .book-link i {
  transform: translateX(4px);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

  

  .service-card {
    min-height: 218px;
    padding: 18px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

  .service-card {
    min-height: 210px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

  #services {
    padding-left: 10px;
    padding-right: 10px;
  }

  .service-grid {
    width: 100%;
  }

  .service-card {
    min-height: 0;
    padding: 20px;
  }

  .service-card p {
    max-width: none;
  }

}
/* SERVICES - MATCH REFERENCE */
/* =========================================================
   SERVICES SECTION
========================================================= */

#services {
  background: var(--foreground);
}


/* =========================================================
   SERVICE HEADING
========================================================= */

#services .eyebrow.on-dark {
  color: var(--accent);
}

#services .section-title {
  color: var(--p-fg);
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800;
}

#services .lead-dark-muted {
  color: var(--dark-muted);
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* =========================================================
   SERVICE CARD
========================================================= */

#services .service-card {
  background: #261f1b;

  border: 1px solid rgba(253,245,236,.18);

  border-radius: 8px;

  padding: 18px;

  height: 100%;
  min-height: 175px;

  display: flex;
  flex-direction: column;

  box-shadow: none;

  transition: .25s ease;
}


/* Hover */

#services .service-card:hover {
  background: #261f1b;

  border-color: rgba(204,160,99,.55);

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}


/* =========================================================
   SERVICE ICON
========================================================= */

#services .service-icon {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  margin-bottom: 12px;

  background: #b58450;

  color: #ffffff;

  border-radius: 7px;

  font-size: 14px;
}

#services .service-icon i {
  color: #ffffff;
  font-size: 14px;
}


/* =========================================================
   SERVICE TITLE
========================================================= */

#services .service-card h3 {
  color: #ffffff;

  font-family: 'Plus Jakarta Sans', sans-serif !important;

  font-size: 18px;

  font-weight: 700;

  line-height: 1.35;

  margin: 0 0 6px;
}


/* =========================================================
   SERVICE DESCRIPTION
========================================================= */

#services .service-card p {
  color: #a99b90;

  font-family: 'Plus Jakarta Sans', sans-serif !important;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.5;

  margin: 0;
}


/* =========================================================
   BOOK SERVICE
========================================================= */

#services .service-card .book-link {
  color: #b58450;

  font-family: 'Plus Jakarta Sans', sans-serif !important;

  font-size: 12px;

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  width: fit-content;

  margin-top: auto;
  padding-top: 10px;
}

#services .service-card .book-link:hover {
  color: #cca063;
}

#services .service-card .book-link i {
  color: #b58450;

  font-size: 8px;

  transition: transform .2s ease;
}

#services .service-card:hover .book-link i {
  transform: translateX(3px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

  #services .service-card {
    min-height: 175px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

  #services .service-card {
    min-height: 160px;
    padding: 16px;
  }

  #services .service-card h3 {
    font-size: 13px;
  }

  #services .service-card p {
    font-size: 10px;
  }

}

/* =========================================================
   SERVICES — hover reveals photo (fade)
========================================================= */
#services .row > [class*="col-"]{ display:flex; }

#services .service-card{
  position:relative;
  width:100%;
  min-height:200px;
  overflow:hidden;
  padding:0;               /* faces handle their own padding */
  cursor:pointer;
}

#services .service-card .card-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
}

/* front — your existing dark card; defines height */
#services .service-card .service-front{
  position:relative;
  z-index:2;
  padding:30px;
  display:flex;
  flex-direction:column;
}

/* back — photo, hidden, fades in on hover */
#services .service-card .service-back{
  z-index:3;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

#services .service-card:hover .service-back,
#services .service-card:focus-within .service-back{
  opacity:1;
  visibility:visible;
}

#services .service-card .card-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* text sits above photo with a dark wash so white stays readable */
#services .service-card .service-back-content{
  position:relative;
  z-index:2;
  min-height:100%;
  padding:18px;
  display:flex;
  flex-direction:column;
 
}

#services .service-card .service-back-content h3{ color:#fff; }
#services .service-card .service-back-content p{ color:rgba(253,245,236,.9); }
#services .service-card .service-back-content h3,
#services .service-card .service-back-content p{
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

#services .service-card .service-back-content .service-icon{
  background:rgba(255,255,255,.14);
  color:#fff;
}

@media(prefers-reduced-motion:reduce){
  #services .service-card .service-back{ transition:none; }
}

/* equal-height step cards */
.process-wrap > [class*="col-"]{
  display:flex;
  flex-direction:column;
}
.step-card{
  height:100%;
}


/* =========================================================
   WHO WE SERVE — hover reveals photo (fade)
========================================================= */
#serve .row > [class*="col-"]{ display:flex; }

#serve .serve-card{
  position:relative;
  width:100%;
  min-height:260px;
  overflow:hidden;
  padding:0;              /* faces handle their own padding */
  cursor:pointer;
}

#serve .serve-card .card-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
}
/* front — defines the card height, fades out on hover */
#serve .serve-card .serve-front{
  position:relative;
  z-index:2;
  padding:28px;
  display:flex;
  flex-direction:column;
  opacity:1;
  transition:opacity .35s ease;
}

#serve .serve-card:hover .serve-front,
#serve .serve-card:focus-within .serve-front{
  opacity:0;
}

/* back — photo only */
#serve .serve-card .serve-back{
  z-index:3;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

#serve .serve-card:hover .serve-back,
#serve .serve-card:focus-within .serve-back{
  opacity:1;
  visibility:visible;
}

#serve .serve-card .card-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

@media(prefers-reduced-motion:reduce){
  #serve .serve-card .serve-front,
  #serve .serve-card .serve-back{ transition:none; }
}
#herobtn{
  background-color:#b08447;
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
  background-color: transparent;
  border-color: #25D366;
  color: #25D366;
}

.btn-ghost-light:hover i,
.btn-ghost-light:focus-visible i {
  color: #25D366;
}

.final-cta.section{
  padding-top: 40px;
  padding-bottom: 0px !important;
}


#wtbtn:hover,
#wtbtn:focus-visible{
  background-color: transparent;
  border-color: #25D366;
  color: #25D366;
}

#wtbtn i,
#wtbtn:focus i {
  color: #25D366;
}

#wtbtn{
  border: 1px solid transparent;
}

#wtbtn,
#wtbtn:focus-visible{
  border-color: #25D366;
  color: #25D366;
  background-color: transparent;
}

#wtbtn i,
#wtbtn:focus-visible i{
  color: #25D366;
}
#second1 , #third1{
      letter-spacing: 1.5px;
}

.btn-ghost-light{
      letter-spacing: 1.5px;
}

.final-cta{
  background: url('./img/2bg.webp') center/cover no-repeat;
}

#contact{
  background: url('./img/1bg.webp') center/cover no-repeat;
}


#services .service-icon .bi-basket3{
  font-size: 32px; /* was ~14px default from .service-icon i; adjust as needed */
}


#services .service-icon i{
  font-size: 26px; /* adjust this value to whatever size you want */
}