:root{
  --teal: #0B5F68;
  --teal-dark: #084A50;
  --tan: #E4DDBD;
  --paper: #FFFFFF;
  --bg: #F4F1EA;
  --ink: #0D1216;
  --muted: rgba(0,0,0,0.68);
  --line: rgba(0,0,0,0.10);
  --shadow: 0 18px 50px rgba(0,0,0,0.14);
}

html, body{
  margin: 0;
  padding: 0;
}



/* Header black text adjust */
.site-header a, .brand-name{
  color:#0b0f13;
}

/* ===== Service Areas Section ===== */
.sa-section{
  background: var(--bg);
  color: var(--ink);
  padding: 72px 0;
}

.sa-wrap{
  width: min(1120px, 92%);
  margin: 0 auto;
}

.sa-head{
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.sa-title{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.sa-lead{
  margin: 0;
  max-width: 75ch;
  line-height: 1.75;
  color: var(--muted);
}

/* Cards grid */
.sa-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.sa-card{
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  padding: 20px;
  backdrop-filter: blur(10px);
  display: grid;
  gap: 14px;
  min-height: 240px;
}

.sa-card-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sa-county{
  margin: 0;
  font-size: 18px;

  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.sa-region{
  margin: 0;
  font-size: 12px;

  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.55);
}

/* Links list */
.sa-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.sa-links a{
  color: var(--ink);
  text-decoration: none;

  position: relative;
  padding-left: 14px;
  line-height: 1.25;
}

.sa-links a::before{
  content:"";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--teal);
  transform: translateY(-50%);
}

.sa-links a:hover{
  color: var(--teal);
}

/* small summary line */
.sa-tagline{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 12px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

/* Services wide card */
.sa-services{
  margin-top: 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
}

.sa-services-inner{
  padding: 22px;
}

.sa-services-title{
  margin: 0 0 12px;
  font-size: 18px;

  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sa-bullets{
  margin: 0;
  padding-left: 18px;
  line-height: 1.8;
  color: var(--muted);
}

/* CTA */
.sa-cta{
  margin-top: 18px;
  background: rgba(11,95,104,0.10);
  border: 1px solid rgba(11,95,104,0.22);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sa-cta-text h3{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
}

.sa-cta-text p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.sa-cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sa-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;

  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 12px;
}

.sa-btn-primary{
  background: var(--teal);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.10);
}
.sa-btn-primary:hover{ background: var(--teal-dark); }

.sa-btn-ghost{
  background: rgba(255,255,255,0.55);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.18);
}
.sa-btn-ghost:hover{
  border-color: rgba(11,95,104,0.35);
  color: var(--teal);
}

/* FAQ */
.sa-faq{
  margin-top: 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  padding: 18px 22px;
}

.sa-faq-title{
  margin: 0 0 10px;
  font-size: 18px;

  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sa-q{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 12px 0;
}
.sa-q:first-of-type{ border-top: none; }

.sa-q summary{
  cursor: pointer;

}

.sa-q p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.75;
}

/* Responsive */
@media (max-width: 980px){
  .sa-grid{ grid-template-columns: 1fr; }
  .sa-card{ min-height: auto; }
  .sa-cta{ flex-direction: column; align-items: flex-start; }
}