/* Continental Door Services - Coverage Directory */
.cds-service-areas {
  --cds-navy: #071a2f;
  --cds-navy-2: #0c2948;
  --cds-blue: #1261a6;
  --cds-blue-light: #eaf4fc;
  --cds-red: #d92d2d;
  --cds-red-dark: #b91f25;
  --cds-text: #172033;
  --cds-muted: #667085;
  --cds-border: #e3e9ef;
  --cds-bg: #f5f8fb;
  background: var(--cds-bg);
  padding: 82px 0 90px;
  color: var(--cds-text);
}

.cds-service-areas *, .cds-service-areas *::before, .cds-service-areas *::after { box-sizing: border-box; }

.cds-areas-intro {
  position: relative;
  overflow: hidden;
  padding: 58px 60px;
  margin-bottom: 46px;
  border-radius: 24px;
  background: linear-gradient(125deg, var(--cds-navy) 0%, var(--cds-navy-2) 72%, #123b63 100%);
  box-shadow: 0 22px 60px rgba(7, 26, 47, .16);
  color: #fff;
}
.cds-areas-intro::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  right: -110px; top: -155px;
  border: 55px solid rgba(255,255,255,.045);
  border-radius: 50%;
}
.cds-eyebrow, .cds-state-kicker {
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 12px;
  font-weight: 800;
}
.cds-eyebrow { color: #9fd2ff; margin-bottom: 13px; }
.cds-eyebrow i { color: var(--cds-red); margin-right: 7px; }
.cds-areas-intro h1 { position: relative; z-index: 1; max-width: 790px; margin: 0 0 17px; color: #fff; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; }
.cds-areas-intro p { position: relative; z-index: 1; max-width: 850px; margin: 0; color: #d4dfeb; font-size: 17px; line-height: 1.75; }
.cds-intro-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.cds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 21px; border-radius: 9px; text-decoration: none !important; font-weight: 800; font-size: 14px; transition: .2s ease; }
.cds-btn-primary { background: var(--cds-red); color: #fff !important; }
.cds-btn-primary:hover, .cds-btn-red:hover { background: var(--cds-red-dark); transform: translateY(-2px); }
.cds-btn-outline { border: 1px solid rgba(255,255,255,.25); color: #fff !important; background: rgba(255,255,255,.06); }
.cds-btn-outline:hover { background: #fff; color: var(--cds-navy) !important; }
.cds-trust-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 24px; padding-top: 26px; margin-top: 28px; border-top: 1px solid rgba(255,255,255,.12); color: #d8e3ee; font-size: 13px; font-weight: 700; }
.cds-trust-row i { color: #75c5ff; margin-right: 6px; }

.cds-state-group { background: #fff; border: 1px solid var(--cds-border); border-radius: 22px; padding: 34px; margin-bottom: 30px; box-shadow: 0 10px 35px rgba(16, 38, 63, .055); }
.cds-state-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 25px; margin-bottom: 27px; border-bottom: 1px solid var(--cds-border); }
.cds-state-title-wrap { display: flex; align-items: center; gap: 15px; }
.cds-state-icon { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 14px; background: var(--cds-blue-light); color: var(--cds-blue); font-size: 22px; }
.cds-state-kicker { display: block; margin-bottom: 3px; color: var(--cds-blue); }
.cds-state-header h2 { margin: 0; color: var(--cds-navy); font-size: 29px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.cds-location-count { min-width: 92px; padding: 9px 15px; text-align: center; border-radius: 12px; background: #f3f6f9; border: 1px solid var(--cds-border); }
.cds-location-count strong { display: block; color: var(--cds-navy); font-size: 19px; line-height: 1.1; }
.cds-location-count span { color: var(--cds-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

.cds-town-card { height: 100%; min-height: 178px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--cds-border); border-radius: 16px; background: #fff; color: inherit; text-decoration: none !important; box-shadow: 0 5px 18px rgba(12, 41, 72, .04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.cds-town-card:hover { transform: translateY(-5px); border-color: #b8d4ea; box-shadow: 0 16px 32px rgba(12, 41, 72, .11); }
.cds-town-card-top { display: flex; align-items: center; justify-content: space-between; }
.cds-town-pin { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--cds-blue-light); color: var(--cds-blue); transition: .22s ease; }
.cds-town-card:hover .cds-town-pin { background: var(--cds-blue); color: #fff; }
.cds-state-badge { padding: 5px 8px; border-radius: 7px; background: #f5f7fa; color: #667085; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.cds-town-card-body { margin-top: 16px; }
.cds-town-label { display: block; color: var(--cds-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.cds-town-card h3 { margin: 2px 0 13px; color: var(--cds-navy); font-size: 20px; line-height: 1.25; font-weight: 800; }
.cds-town-link { display: inline-flex; align-items: center; gap: 7px; color: var(--cds-blue); font-size: 12px; font-weight: 800; }
.cds-town-link i { transition: transform .2s ease; }
.cds-town-card:hover .cds-town-link i { transform: translateX(4px); }

.cds-bottom-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-top: 42px; padding: 30px 34px; border-radius: 20px; background: var(--cds-navy); color: #fff; box-shadow: 0 18px 42px rgba(7,26,47,.14); }
.cds-bottom-cta-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.09); color: #8ccfff; font-size: 25px; }
.cds-bottom-cta-copy > span { color: #8ccfff; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.cds-bottom-cta h2 { margin: 2px 0 3px; color: #fff; font-size: 24px; font-weight: 800; }
.cds-bottom-cta p { margin: 0; color: #c8d5e2; font-size: 14px; }
.cds-bottom-cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.cds-btn-light { background: #fff; color: var(--cds-navy) !important; }
.cds-btn-light:hover { transform: translateY(-2px); background: #edf5fb; }
.cds-btn-red { background: var(--cds-red); color: #fff !important; }

@media (max-width: 991.98px) {
  .cds-service-areas { padding: 58px 0 65px; }
  .cds-areas-intro { padding: 42px 36px; }
  .cds-bottom-cta { grid-template-columns: auto 1fr; }
  .cds-bottom-cta-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .cds-service-areas { padding: 36px 0 48px; }
  .cds-areas-intro { padding: 34px 23px; border-radius: 18px; margin-bottom: 25px; }
  .cds-areas-intro h1 { font-size: 34px; }
  .cds-areas-intro p { font-size: 15px; line-height: 1.65; }
  .cds-intro-actions .cds-btn { width: 100%; }
  .cds-trust-row { display: grid; gap: 10px; }
  .cds-state-group { padding: 22px 16px; border-radius: 17px; }
  .cds-state-header { align-items: flex-start; }
  .cds-state-icon { width: 46px; height: 46px; flex-basis: 46px; }
  .cds-state-header h2 { font-size: 23px; }
  .cds-location-count { min-width: 76px; padding: 8px 9px; }
  .cds-town-card { min-height: 160px; }
  .cds-bottom-cta { grid-template-columns: 1fr; padding: 27px 23px; }
  .cds-bottom-cta-icon { display: none; }
  .cds-bottom-cta-actions { grid-column: auto; }
  .cds-bottom-cta-actions .cds-btn { width: 100%; }
}