/* Website Development page — reuses theme design tokens (colors, spacing, radius, font) */

.wd-page{
  width:100%;
  overflow:hidden;
}
.wd-container{
  width:var(--clb-container-width-laptop, 86vw);
  max-width:1240px;
  margin:0 auto;
  padding:0 var(--clb-grid-gutter, 1rem);
  box-sizing:border-box;
}
.wd-section{
  padding:clamp(3rem, 6vw, 5.5rem) 0;
}

/* breadcrumb */
.svc-breadcrumb{
  padding:0;
  margin-bottom:1.5rem;
  font-size:0.85rem;
  color:#8a8c92;
}
.svc-breadcrumb a{color:#8a8c92;text-decoration:none;}
.svc-breadcrumb a:hover{color:var(--clb-color-button,#e5652f);}
.svc-breadcrumb .sep{margin:0 0.4rem;}
.svc-breadcrumb .cat{color:#8a8c92;}
.svc-breadcrumb .current{color:#24262B;font-weight:600;}
.wd-section-head{
  max-width:640px;
  margin:0 0 2.75rem;
}
.wd-section-head.-center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.wd-eyebrow{
  color:var(--clb-color-button,#e5652f);
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:0.75rem;
}
.wd-h1{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:clamp(2.4rem, 4.4vw, 3.6rem);
  line-height:1.08;
  color:#24262B;
  margin:0 0 1.25rem;
}
.wd-h1 .accent{color:var(--clb-color-button,#e5652f);}
.wd-h2{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  line-height:1.15;
  color:#24262B;
  margin:0 0 0.9rem;
}
.wd-p{
  font-size:1.05rem;
  line-height:1.7;
  color:#5b5d63;
  margin:0;
}

/* ---------- HERO ---------- */
.wd-hero{
  padding:calc(var(--clb-header-height, 12vh) + 1.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:linear-gradient(135deg,#fff6ee 0%,#fdf1e4 45%,#fbeadb 100%);
}
.wd-hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.wd-hero-actions{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:1.75rem;
}
.wd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--clb-color-button,#e5652f);
  color:#fff !important;
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  padding:0.95rem 1.8rem;
  border-radius:999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.wd-btn:hover{opacity:0.88;}
.wd-btn:hover,.wd-btn:focus,.wd-btn:active,.wd-btn:visited{
  color:#fff !important;
  background:var(--clb-color-button,#e5652f) !important;
}
.wd-btn.-outline{
  background:transparent;
  color:#24262B !important;
  border:1.5px solid rgba(36,38,43,0.25);
}
.wd-btn.-outline:hover{border-color:#24262B;}
.wd-btn.-outline:hover,.wd-btn.-outline:focus,.wd-btn.-outline:active,.wd-btn.-outline:visited{
  color:#24262B !important;
  background:transparent !important;
}
.wd-link{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  color:#24262B;
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
}
.wd-link svg{transition:transform .2s ease;}
.wd-link:hover svg{transform:translateX(3px);}

/* Abstract browser-window mockup graphic (no external image dependency) */
.wd-mockup{
  position:relative;
  background:#ffffff;
  border-radius:var(--clb-border-radius-large,16px);
  box-shadow:0 30px 60px -20px rgba(36,38,43,0.25);
  overflow:hidden;
  border:1px solid rgba(36,38,43,0.06);
}
.wd-mockup-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0.85rem 1rem;
  background:#f4f1ec;
  border-bottom:1px solid rgba(36,38,43,0.06);
}
.wd-mockup-dot{width:9px;height:9px;border-radius:50%;background:#e0dcd3;}
.wd-mockup-dot:nth-child(1){background:#e5652f;}
.wd-mockup-body{padding:1.5rem;}
.wd-mockup-row{
  height:14px;
  border-radius:6px;
  background:#eee9e1;
  margin-bottom:0.7rem;
}
.wd-mockup-row.-short{width:40%;}
.wd-mockup-row.-title{height:20px;width:65%;background:#24262B;opacity:0.85;margin-bottom:1rem;}
.wd-mockup-blocks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.7rem;
  margin-top:1.1rem;
}
.wd-mockup-block{
  height:70px;
  border-radius:10px;
  background:linear-gradient(135deg,#e5652f,#f2a15e);
}
.wd-mockup-block:nth-child(2){background:linear-gradient(135deg,#24262B,#4a4d55);}
.wd-mockup-block:nth-child(3){background:#eee9e1;}

/* ---------- STATS / TRUST BAR ---------- */
.wd-stats-section{
  padding:clamp(2rem, 3.5vw, 2.75rem) 0;
  background:#fff;
  border-bottom:1px solid rgba(36,38,43,0.06);
}
.wd-stats-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.wd-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0.5rem;
}
.wd-stat-icon{
  color:var(--clb-color-button,#e5652f);
  margin-bottom:0.15rem;
}
.wd-stat-number{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:1.9rem;
  color:#24262B;
  line-height:1;
}
.wd-stat-label{
  font-size:0.85rem;
  color:#6b6d73;
}

/* ---------- FEATURE GRID (What's Included) ---------- */
.wd-feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem 1.75rem;
}
.wd-feature{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}
.wd-feature-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#fdece2;
  color:var(--clb-color-button,#e5652f);
  display:flex;
  align-items:center;
  justify-content:center;
}
.wd-feature h3{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:1.1rem;
  color:#24262B;
  margin:0;
}
.wd-feature p{
  font-size:0.95rem;
  line-height:1.6;
  color:#6b6d73;
  margin:0;
}

/* ---------- PROCESS ---------- */
.wd-process{
  background:#faf8f5;
}
.wd-process-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.75rem;
}
.wd-process-step{
  background:#fff;
  border-radius:var(--clb-border-radius-large,16px);
  padding:1.75rem 1.5rem;
  border:1px solid rgba(36,38,43,0.06);
}
.wd-process-num{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:0.85rem;
  color:var(--clb-color-button,#e5652f);
  margin-bottom:0.9rem;
}
.wd-process-step h3{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:#24262B;
  margin:0 0 0.5rem;
}
.wd-process-step p{
  font-size:0.9rem;
  line-height:1.6;
  color:#6b6d73;
  margin:0;
}

/* ---------- TECH STACK ---------- */
.wd-tech-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
}
.wd-tech-pill{
  display:inline-flex;
  align-items:center;
  background:#f4f1ec;
  color:#24262B;
  font-weight:600;
  font-size:0.9rem;
  padding:0.6rem 1.1rem;
  border-radius:999px;
}

/* ---------- PORTFOLIO ---------- */
.wd-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.wd-portfolio-card{
  border-radius:var(--clb-border-radius-large,16px);
  overflow:hidden;
  border:1px solid rgba(36,38,43,0.06);
  background:#fff;
  display:flex;
  flex-direction:column;
}
.wd-portfolio-thumb{
  aspect-ratio:16/9;
  height:auto;
  position:relative;
  overflow:hidden;
}
.wd-portfolio-thumb::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:10px;
  background:rgba(255,255,255,0.18);
}
.wd-portfolio-thumb.-a{background:linear-gradient(135deg,#e5652f,#8a3418);}
.wd-portfolio-thumb.-b{background:linear-gradient(135deg,#24262B,#54575f);}
.wd-portfolio-thumb.-c{background:linear-gradient(135deg,#f2a15e,#e5652f);}
.wd-portfolio-thumb.-d{background:linear-gradient(135deg,#54575f,#24262B);}
.wd-portfolio-body{padding:1.5rem;display:flex;flex-direction:column;gap:0.6rem;flex-grow:1;}
.wd-portfolio-tag{
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--clb-color-button,#e5652f);
}
.wd-portfolio-body h3{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:700;
  font-size:1.1rem;
  color:#24262B;
  margin:0;
}
.wd-portfolio-body p{
  font-size:0.9rem;
  line-height:1.6;
  color:#6b6d73;
  margin:0;
  flex-grow:1;
}

/* ---------- TESTIMONIALS ---------- */
.wd-testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.wd-testimonial-card{
  background:#faf8f5;
  border-radius:var(--clb-border-radius-large,16px);
  padding:2rem;
  border:1px solid rgba(36,38,43,0.06);
}
.wd-testimonial-card .testimonial{text-align:center;}
.wd-testimonial-card .testimonial p{
  font-size:1.02rem;
  line-height:1.65;
  color:#3d3f45;
}

/* ---------- FAQ ---------- */
.wd-faq-wrap{
  max-width:820px;
  margin:0 auto;
}

/* ---------- FINAL CTA ---------- */
.wd-cta{
  background:#24262B;
  border-radius:var(--clb-border-radius-large,16px);
  padding:clamp(2.5rem, 5vw, 4rem);
  text-align:center;
}
.wd-cta .wd-h2{color:#fff;}
.wd-cta .wd-p{color:#c7c9ce;max-width:560px;margin:0 auto 2rem;}
.wd-cta-outer{padding:0 var(--clb-grid-gutter,1rem) clamp(3rem, 6vw, 5.5rem);}

@media (max-width: 980px){
  .wd-hero-grid{grid-template-columns:1fr;}
  .wd-stats-row{grid-template-columns:repeat(2, 1fr);}
  .wd-feature-grid{grid-template-columns:repeat(2, 1fr);}
  .wd-process-grid{grid-template-columns:repeat(2, 1fr);}
  .wd-portfolio-grid{grid-template-columns:repeat(2, 1fr);}
  .wd-testimonial-grid{grid-template-columns:1fr;}
}
@media (max-width: 600px){
  .wd-feature-grid{grid-template-columns:1fr;}
  .wd-process-grid{grid-template-columns:1fr;}
}

/* ============ DARK MODE ============
   All the classes above have fixed light-mode colors with no dark-scheme
   awareness, so toggling dark mode previously did nothing visible on any
   page using this template (About, Contact, all 89 service pages, all
   blog posts, and the 404 page). This block gives every one of those
   elements a dark-mode counterpart. */
.dark-scheme .wd-page{
  background:#1c1e22;
}
.dark-scheme .svc-breadcrumb,
.dark-scheme .svc-breadcrumb a,
.dark-scheme .svc-breadcrumb .cat{color:#9a9ca3;}
.dark-scheme .svc-breadcrumb .current{color:#f3f4f6;}
.dark-scheme .wd-h1,
.dark-scheme .wd-h2,
.dark-scheme .wd-stat-number,
.dark-scheme .wd-feature h3,
.dark-scheme .wd-process-step h3,
.dark-scheme .wd-portfolio-body h3,
.dark-scheme .wd-tech-pill{color:#f3f4f6;}
.dark-scheme .wd-p,
.dark-scheme .wd-stat-label,
.dark-scheme .wd-feature p,
.dark-scheme .wd-process-step p,
.dark-scheme .wd-portfolio-body p{color:#a7a9b0;}
.dark-scheme .wd-hero{
  background:linear-gradient(135deg,#22242a 0%,#1c1e22 45%,#18191d 100%);
}
.dark-scheme .wd-link{color:#f3f4f6;}
.dark-scheme .wd-mockup{
  background:#26282e;
  border-color:rgba(255,255,255,0.08);
}
.dark-scheme .wd-mockup-bar{
  background:#1f2126;
  border-bottom-color:rgba(255,255,255,0.08);
}
.dark-scheme .wd-mockup-dot{background:#3a3d44;}
.dark-scheme .wd-mockup-dot:nth-child(1){background:#e5652f;}
.dark-scheme .wd-mockup-row{background:#33363d;}
.dark-scheme .wd-mockup-row.-title{background:#f3f4f6;opacity:0.85;}
.dark-scheme .wd-mockup-block:nth-child(3){background:#33363d;}
.dark-scheme .wd-stats-section{
  background:#1c1e22;
  border-bottom-color:rgba(255,255,255,0.08);
}
.dark-scheme .wd-feature-icon{background:rgba(229,101,47,0.18);}
.dark-scheme .wd-process{background:#202226;}
.dark-scheme .wd-process-step{
  background:#26282e;
  border-color:rgba(255,255,255,0.08);
}
.dark-scheme .wd-tech-pill{background:#2c2e34;}
.dark-scheme .wd-portfolio-card{
  background:#26282e;
  border-color:rgba(255,255,255,0.08);
}
.dark-scheme .wd-testimonial-card{
  background:#26282e;
  border-color:rgba(255,255,255,0.08);
}
.dark-scheme .wd-testimonial-card .testimonial p{color:#d5d6da;}
.dark-scheme .wd-cta{background:#0e0f11;}