/*!
 * Drain Kingz Service Areas archive
 *
 * Lives inside Mezan's #main > .container, but uses a margin/100vw breakout
 * technique on `.dk-sa-bleed` so dark sections can extend edge to edge of
 * the viewport while their inner content stays aligned to Mezan's container.
 * Color tokens match the live site (yellow #FFC527, ink #434343).
 */

.dk-sa {
    --dk-yellow: #FFC527;
    --dk-yellow-hi: #FFD555;
    --dk-yellow-lo: #C99A1B;
    --dk-ink: #131316;
    --dk-ink-2: #1F1F22;
    --dk-ink-soft: #434343;
    --dk-mute: #6E6E72;
    --dk-mute-on-dark: #B0AFAC;
    --dk-line: #E6E1D5;
    --dk-line-soft: #F0EBDF;
    --dk-line-dark: #2C2C30;
    --dk-card-bg: #FFFFFF;
    --dk-hover-bg: #FFFCEE;
    --dk-pattern: url("/wp-content/uploads/2024/03/Drain-Kingz-Plumbing_branding_Pattern_2.svg");
    color: var(--dk-ink-soft);
    font-family: 'Outfit', system-ui, sans-serif;
}

.dk-sa,
.dk-sa * {
    box-sizing: border-box;
}

.dk-sa a {
    text-decoration: none;
    color: inherit;
}

.dk-sa h2,
.dk-sa h3,
.dk-sa h4 {
    font-family: 'Outfit', system-ui, sans-serif;
    color: inherit;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}

.dk-sa p {
    margin: 0 0 16px;
    line-height: 1.65;
    color: inherit;
}

/* ----- Full-bleed mechanism ----- */

.dk-sa-bleed {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.dk-sa-bleed > .dk-sa-bleed-inner {
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 30px;
}

.dk-sa-bleed.dk-sa-dark {
    background: var(--dk-ink);
    color: #fff;
}

.dk-sa-section {
    padding: 56px 0 64px;
}

.dk-sa-bleed.dk-sa-section {
    padding: 96px 0 100px;
}

.dk-sa-section + .dk-sa-section {
    border-top: 1px solid var(--dk-line-soft);
}

.dk-sa-bleed + .dk-sa-section,
.dk-sa-section + .dk-sa-bleed {
    border-top: none;
}

/* ----- Type ----- */

.dk-sa-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dk-yellow-lo);
    margin-bottom: 12px;
}

.dk-sa-bleed.dk-sa-dark .dk-sa-eyebrow {
    color: var(--dk-yellow);
    opacity: 0.95;
}

.dk-sa-section-head {
    margin-bottom: 36px;
    max-width: 880px;
}

.dk-sa-bleed.dk-sa-dark .dk-sa-section-head {
    max-width: 980px;
}

.dk-sa-section-title {
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.06;
    margin: 0 0 12px;
    color: var(--dk-ink);
    font-weight: 600;
}

.dk-sa-bleed.dk-sa-dark .dk-sa-section-title {
    color: #fff;
}

.dk-sa-section-title em {
    color: var(--dk-yellow-lo);
    font-style: normal;
}

.dk-sa-bleed.dk-sa-dark .dk-sa-section-title em {
    color: var(--dk-yellow);
    font-style: italic;
}

.dk-sa-section-lede {
    color: var(--dk-mute);
    font-size: 16px;
    max-width: 640px;
}

.dk-sa-bleed.dk-sa-dark .dk-sa-section-lede {
    color: var(--dk-mute-on-dark);
}

.dk-sa-rule {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--dk-yellow);
    margin: 0 0 24px;
}

.dk-sa-empty {
    color: var(--dk-mute);
    font-style: italic;
    padding: 16px 0;
}

/* ----- Quick filter ----- */

.dk-sa-quicknav {
    margin: 28px 0 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--dk-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 28px;
}

.dk-sa-quicknav-label {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dk-mute);
    margin-right: 8px;
}

.dk-sa-tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 6px 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--dk-ink-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.dk-sa-tab:hover {
    color: var(--dk-yellow-lo);
}

.dk-sa-tab.is-active {
    color: var(--dk-yellow-lo);
    border-bottom-color: var(--dk-yellow);
}

.dk-sa-tab:focus-visible {
    outline: 2px solid var(--dk-yellow);
    outline-offset: 2px;
}

/* ----- Featured (dark, full-bleed) ----- */

.dk-sa-featured {
    background: var(--dk-ink);
    color: #fff;
}

.dk-sa-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.dk-sa-featured-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 197, 39, 0.16);
    padding: 24px 26px 26px;
    display: block;
    color: #fff;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}

.dk-sa-featured-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--dk-yellow);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s ease;
}

.dk-sa-featured-card:hover,
.dk-sa-featured-card:focus-visible {
    border-color: var(--dk-yellow);
    background: rgba(255, 197, 39, 0.06);
    transform: translateY(-3px);
    box-shadow: 0 22px 50px -28px rgba(255, 197, 39, 0.4);
    outline: none;
}

.dk-sa-featured-card:hover::before,
.dk-sa-featured-card:focus-visible::before {
    transform: scaleY(1);
}

.dk-sa-featured-county {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dk-yellow);
    opacity: 0.9;
    margin-bottom: 10px;
}

.dk-sa-featured-name {
    font-size: 24px;
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.05;
}

.dk-sa-featured-desc {
    font-size: 14px;
    color: var(--dk-mute-on-dark);
    line-height: 1.55;
    margin: 0 0 18px;
    min-height: 50px;
}

.dk-sa-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dk-yellow);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ----- County blocks (light, contained) ----- */

.dk-sa-county[hidden] {
    display: none !important;
}

.dk-sa-county-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--dk-line);
    flex-wrap: wrap;
}

.dk-sa-county-headline {
    flex: 1 1 360px;
}

.dk-sa-county-title {
    font-size: clamp(24px, 2.6vw, 30px);
    margin: 0 0 6px;
    color: var(--dk-ink);
}

.dk-sa-county-tagline {
    margin: 0;
    color: var(--dk-mute);
    font-size: 14px;
}

.dk-sa-county-count {
    text-align: right;
    color: var(--dk-mute);
}

.dk-sa-count-num {
    display: block;
    font-size: 28px;
    font-weight: 600;
    color: var(--dk-ink);
    line-height: 1;
}

.dk-sa-count-lbl {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dk-sa-city-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dk-sa-city-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    background: var(--dk-card-bg);
    border: 1px solid var(--dk-line);
    color: var(--dk-ink);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.dk-sa-city-card:hover,
.dk-sa-city-card:focus-visible {
    border-color: var(--dk-yellow);
    background: var(--dk-hover-bg);
    transform: translateY(-1px);
    outline: none;
}

.dk-sa-city-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dk-sa-city-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--dk-ink);
}

.dk-sa-city-card:hover .dk-sa-city-name,
.dk-sa-city-card:focus-visible .dk-sa-city-name {
    color: var(--dk-yellow-lo);
}

.dk-sa-city-zip {
    font-size: 11.5px;
    color: var(--dk-mute);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.dk-sa-city-arrow {
    color: var(--dk-yellow);
    font-size: 16px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.dk-sa-city-card:hover .dk-sa-city-arrow,
.dk-sa-city-card:focus-visible .dk-sa-city-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ----- Map + CTA (dark, full-bleed) ----- */

.dk-sa-map {
    background: var(--dk-ink);
    color: #fff;
}

.dk-sa-map-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px;
    align-items: stretch;
}

.dk-sa-map-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 2px solid var(--dk-yellow);
    background: #000;
}

.dk-sa-map-frame::before {
    content: '';
    position: absolute;
    inset: 0 -10px -10px 0;
    border: 2px solid var(--dk-yellow);
    transform: translate(10px, 10px);
    z-index: -1;
    opacity: 0.3;
    pointer-events: none;
}

.dk-sa-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.dk-sa-map-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dk-sa-cta-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.dk-sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.dk-sa-btn-yellow {
    background: var(--dk-yellow);
    color: var(--dk-ink);
    border-color: var(--dk-yellow);
}

.dk-sa-btn-yellow:hover,
.dk-sa-btn-yellow:focus-visible {
    background: var(--dk-yellow-hi);
    border-color: var(--dk-yellow-hi);
    transform: translateY(-1px);
    outline: none;
}

.dk-sa-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.dk-sa-btn-ghost:hover,
.dk-sa-btn-ghost:focus-visible {
    border-color: var(--dk-yellow);
    color: var(--dk-yellow);
    outline: none;
}

.dk-sa-callout .dk-sa-btn-ghost {
    color: var(--dk-ink);
    border-color: var(--dk-ink);
}

.dk-sa-callout .dk-sa-btn-ghost:hover,
.dk-sa-callout .dk-sa-btn-ghost:focus-visible {
    background: var(--dk-ink);
    color: #fff;
}

.dk-sa-btn-large {
    padding: 16px 34px;
    font-size: 16px;
}

.dk-sa-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 32px;
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--dk-line-dark);
}

.dk-sa-stat dt {
    font-size: 28px;
    font-weight: 700;
    color: var(--dk-yellow);
    line-height: 1;
}

.dk-sa-stat dd {
    margin: 6px 0 0;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dk-mute-on-dark);
}

/* ----- Callout (light) ----- */

.dk-sa-callout {
    text-align: center;
    padding: 64px 0 72px;
    border-top: 1px solid var(--dk-line-soft);
}

.dk-sa-callout-title {
    font-size: clamp(26px, 3vw, 36px);
    margin: 0 0 12px;
    color: var(--dk-ink);
    font-weight: 600;
}

.dk-sa-callout-title em {
    color: var(--dk-mute);
    font-style: normal;
    font-weight: 500;
    font-size: 0.6em;
    display: inline-block;
    margin-top: 4px;
}

.dk-sa-callout p {
    max-width: 540px;
    margin: 0 auto 24px;
    color: var(--dk-mute);
}

/* ----- CPT archive hero overrides ----- */

body.post-type-archive-service-area .main-title-section-container {
    padding: 110px 0 130px;
}

body.post-type-archive-service-area .main-title-section h1 {
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0;
    color: #fff;
}

body.post-type-archive-service-area .main-title-section::before {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    background: var(--dk-yellow, #FFC527);
    margin-bottom: 20px;
}

body.post-type-archive-service-area .dk-sa-hero-subtitle {
    margin: 18px 0 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    line-height: 1.6;
}

body.post-type-archive-service-area .dk-sa-hero-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--dk-yellow, #FFC527);
    margin-bottom: 16px;
}

/* ----- Responsive ----- */

@media (max-width: 1080px) {
    .dk-sa-featured-grid,
    .dk-sa-city-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .dk-sa-section {
        padding: 44px 0 48px;
    }

    .dk-sa-bleed.dk-sa-section {
        padding: 64px 0 72px;
    }

    .dk-sa-callout {
        padding: 52px 0 60px;
    }

    .dk-sa-featured-grid,
    .dk-sa-city-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dk-sa-map-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dk-sa-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .dk-sa-stat dt {
        font-size: 22px;
    }

    .dk-sa-quicknav {
        gap: 6px 20px;
    }

    .dk-sa-county-head {
        align-items: flex-start;
    }

    .dk-sa-county-count {
        text-align: left;
    }

    body.post-type-archive-service-area .main-title-section-container {
        padding: 70px 0 90px;
    }

    /* Maps fill the full screen width on mobile (cancel the .dk-sa-bleed-inner
       side padding so the embed runs edge to edge). */
    .dk-sa-map .dk-sa-map-frame,
    .dk-sa-coverage-map {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .dk-sa-map .dk-sa-map-frame::before {
        display: none; /* decorative offset border would overflow a full-width map */
    }

    .dk-sa-coverage-map {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

@media (max-width: 520px) {
    /* Featured cards carry a description, so they drop to 1 col on phones.
       City cards are just name + ZIP — keep them 2-up so the list isn't
       a mile long on mobile. */
    .dk-sa-featured-grid {
        grid-template-columns: 1fr;
    }

    .dk-sa-city-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .dk-sa-featured-desc {
        min-height: 0;
    }
}

/* =====================================================
   Single service-area page additions
   ===================================================== */

.dk-sa-prose {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--dk-ink-soft);
}

.dk-sa-prose p {
    margin: 0 0 1em;
}

.dk-sa-prose a {
    color: var(--dk-yellow-lo);
    text-decoration: underline;
}

/* ----- Services grid (3-col) ----- */

.dk-sa-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dk-sa-service-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 26px 26px;
    background: var(--dk-card-bg);
    border: 1px solid var(--dk-line);
    color: var(--dk-ink);
    transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}

.dk-sa-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--dk-yellow);
    color: var(--dk-ink);
    margin-bottom: 4px;
    transition: background .2s ease;
}

.dk-sa-service-icon svg {
    width: 22px;
    height: 22px;
}

.dk-sa-service-card:hover .dk-sa-service-icon,
.dk-sa-service-card:focus-visible .dk-sa-service-icon {
    background: var(--dk-yellow-hi);
}

.dk-sa-service-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--dk-yellow);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s ease;
}

.dk-sa-service-card:hover,
.dk-sa-service-card:focus-visible {
    border-color: var(--dk-yellow);
    background: var(--dk-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -28px rgba(0,0,0,0.18);
    outline: none;
}

.dk-sa-service-card:hover::before,
.dk-sa-service-card:focus-visible::before {
    transform: scaleY(1);
}

.dk-sa-service-name {
    font-size: 20px;
    margin: 0;
    color: var(--dk-ink);
    line-height: 1.2;
}

.dk-sa-service-desc {
    font-size: 14px;
    color: var(--dk-mute);
    margin: 0;
    line-height: 1.55;
    flex: 1;
}

.dk-sa-service-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--dk-yellow-lo);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ----- Neighborhoods list (sits inside dk-sa-map-content) ----- */

.dk-sa-neighborhoods {
    list-style: none;
    margin: 8px 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 18px;
}

.dk-sa-neighborhoods li {
    color: var(--dk-mute-on-dark);
    font-size: 14px;
    padding-left: 14px;
    position: relative;
}

.dk-sa-neighborhoods li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background: var(--dk-yellow);
    border-radius: 50%;
}

/* ----- Photos ----- */

.dk-sa-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.dk-sa-photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dk-line-soft);
    border: 1px solid var(--dk-line);
}

.dk-sa-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.dk-sa-photo:hover img {
    transform: scale(1.04);
}

/* ----- Testimonials ----- */

.dk-sa-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dk-sa-testimonial {
    margin: 0;
    padding: 26px 28px 24px;
    background: var(--dk-card-bg);
    border: 1px solid var(--dk-line);
    border-left: 3px solid var(--dk-yellow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dk-sa-testimonial-quote {
    font-size: 16px;
    line-height: 1.6;
    color: var(--dk-ink);
    margin: 0;
    font-style: italic;
}

.dk-sa-testimonial-quote::before { content: '\201C'; }
.dk-sa-testimonial-quote::after { content: '\201D'; }

.dk-sa-testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.dk-sa-testimonial-author {
    font-weight: 600;
    font-style: normal;
    color: var(--dk-ink);
}

.dk-sa-testimonial-area {
    color: var(--dk-mute);
}

/* ----- Why Drain Kingz (dark section) ----- */

.dk-sa-why-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.dk-sa-why-item {
    padding: 22px 24px;
    background: rgba(255, 197, 39, 0.05);
    border: 1px solid rgba(255, 197, 39, 0.16);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.dk-sa-why-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--dk-yellow);
    color: var(--dk-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dk-sa-why-icon svg {
    width: 22px;
    height: 22px;
}

.dk-sa-why-text {
    flex: 1;
    min-width: 0;
}

.dk-sa-why-title-item {
    font-size: 17px;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.2;
    font-weight: 600;
}

.dk-sa-why-desc {
    margin: 0;
    color: var(--dk-mute-on-dark);
    font-size: 13.5px;
    line-height: 1.55;
}

/* ----- FAQ accordion ----- */

.dk-sa-faq-list {
    border-top: 1px solid var(--dk-line);
}

.dk-sa-faq-item {
    border-bottom: 1px solid var(--dk-line);
}

.dk-sa-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 22px 28px 22px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--dk-ink);
    position: relative;
    transition: color .2s ease;
}

.dk-sa-faq-q::-webkit-details-marker { display: none; }

.dk-sa-faq-q::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    color: var(--dk-yellow-lo);
    transition: transform .25s ease, color .2s ease;
}

.dk-sa-faq-item[open] .dk-sa-faq-q::after {
    transform: translateY(-50%) rotate(45deg);
}

.dk-sa-faq-q:hover {
    color: var(--dk-yellow-lo);
}

.dk-sa-faq-a {
    padding: 0 36px 22px 0;
    color: var(--dk-mute);
    font-size: 15.5px;
    line-height: 1.65;
}

.dk-sa-faq-a p {
    margin: 0;
}

/* ----- Also-serve (sibling cities) ----- */

.dk-sa-also-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dk-sa-also-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    background: var(--dk-card-bg);
    border: 1px solid var(--dk-line);
    color: var(--dk-ink);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
    font-weight: 600;
    font-size: 15px;
}

.dk-sa-also-card:hover,
.dk-sa-also-card:focus-visible {
    border-color: var(--dk-yellow);
    background: var(--dk-hover-bg);
    color: var(--dk-yellow-lo);
    transform: translateY(-1px);
    outline: none;
}

.dk-sa-also-card-all {
    background: var(--dk-ink);
    color: #fff;
    border-color: var(--dk-ink);
}

.dk-sa-also-card-all:hover,
.dk-sa-also-card-all:focus-visible {
    background: var(--dk-yellow);
    color: var(--dk-ink);
    border-color: var(--dk-yellow);
}

.dk-sa-also-arrow {
    color: var(--dk-yellow);
    font-size: 16px;
    transition: transform .2s ease;
}

.dk-sa-also-card:hover .dk-sa-also-arrow,
.dk-sa-also-card:focus-visible .dk-sa-also-arrow {
    transform: translateX(3px);
}

.dk-sa-also-card-all .dk-sa-also-arrow {
    color: var(--dk-yellow);
}

.dk-sa-also-card-all:hover .dk-sa-also-arrow,
.dk-sa-also-card-all:focus-visible .dk-sa-also-arrow {
    color: var(--dk-ink);
}

/* ----- CTA + form (dark section, 2-col) ----- */

.dk-sa-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: stretch;
}

.dk-sa-cta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dk-sa-inline-tel {
    color: var(--dk-yellow);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dk-sa-inline-tel:hover {
    color: var(--dk-yellow-hi);
}

.dk-sa-cta-form-wrap {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 197, 39, 0.2);
    padding: 26px 28px;
}

/* CF7 form override — make it readable on dark bg */

.dk-sa-cta-form-wrap .wpcf7,
.dk-sa-cta-form-wrap .wpcf7-form,
.dk-sa-cta-form-wrap .wpcf7-form p,
.dk-sa-cta-form-wrap .wpcf7-form .wpcf7-form-control-wrap {
    color: #fff;
}

.dk-sa-cta-form-wrap .wpcf7-form p {
    margin: 0 0 6px;
}

.dk-sa-cta-form-wrap .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.dk-sa-cta-form-wrap .wpcf7-form input[type="text"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="email"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="tel"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="url"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="number"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="date"],
.dk-sa-cta-form-wrap .wpcf7-form textarea,
.dk-sa-cta-form-wrap .wpcf7-form select {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    border-radius: 0;
    margin-bottom: 12px;
    transition: border-color .2s ease, background .2s ease;
    box-sizing: border-box;
}

.dk-sa-cta-form-wrap .wpcf7-form textarea {
    min-height: 110px;
    resize: vertical;
}

.dk-sa-cta-form-wrap .wpcf7-form .wpcf7-list-item {
    display: block;
    margin: 8px 0;
}

.dk-sa-cta-form-wrap .wpcf7-form .wpcf7-list-item-label {
    color: var(--dk-mute-on-dark);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.dk-sa-cta-form-wrap .wpcf7-form input[type="checkbox"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="radio"] {
    width: auto;
    margin-right: 8px;
    accent-color: var(--dk-yellow);
}

.dk-sa-cta-form-wrap .wpcf7-form input::placeholder,
.dk-sa-cta-form-wrap .wpcf7-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.dk-sa-cta-form-wrap .wpcf7-form input:focus,
.dk-sa-cta-form-wrap .wpcf7-form textarea:focus,
.dk-sa-cta-form-wrap .wpcf7-form select:focus {
    outline: none;
    border-color: var(--dk-yellow);
    background: rgba(255, 255, 255, 0.08);
}

.dk-sa-cta-form-wrap .wpcf7-form label {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.dk-sa-cta-form-wrap .wpcf7-form input.wpcf7-submit,
.dk-sa-cta-form-wrap .wpcf7-form input[type="submit"],
.dk-sa-cta-form-wrap .wpcf7-form button[type="submit"],
.dk-sa-cta-form-wrap .wpcf7 input[type="submit"] {
    background: var(--dk-yellow) !important;
    color: var(--dk-ink) !important;
    border: 2px solid var(--dk-yellow) !important;
    padding: 14px 28px !important;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
    width: auto !important;
    margin-top: 4px;
}

.dk-sa-cta-form-wrap .wpcf7-form input[type="submit"]:hover,
.dk-sa-cta-form-wrap .wpcf7-form button[type="submit"]:hover {
    background: var(--dk-yellow-hi) !important;
    border-color: var(--dk-yellow-hi) !important;
    transform: translateY(-1px);
}

.dk-sa-cta-form-wrap .wpcf7 form .wpcf7-response-output {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    margin: 16px 0 0;
    padding: 10px 12px;
    font-size: 14px;
}

/* ----- Responsive ----- */

@media (max-width: 1080px) {
    .dk-sa-services-grid,
    .dk-sa-photos-grid,
    .dk-sa-testimonials-grid,
    .dk-sa-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dk-sa-also-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .dk-sa-cta-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 720px) {
    .dk-sa-services-grid,
    .dk-sa-photos-grid,
    .dk-sa-testimonials-grid,
    .dk-sa-why-grid,
    .dk-sa-also-grid {
        grid-template-columns: 1fr;
    }
    .dk-sa-neighborhoods {
        grid-template-columns: 1fr;
    }
}

/* ----- Nearby cities (pills) ----- */

.dk-sa-also-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dk-sa-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: rgba(255, 197, 39, 0.08);
    border: 1px solid rgba(255, 197, 39, 0.22);
    color: var(--dk-yellow-lo);
    font-weight: 600;
    font-size: 14px;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.dk-sa-pill:hover,
.dk-sa-pill:focus-visible {
    background: rgba(255, 197, 39, 0.18);
    border-color: var(--dk-yellow);
    color: var(--dk-yellow-lo);
    transform: translateY(-1px);
    outline: none;
}

.dk-sa-pill-all {
    background: var(--dk-ink);
    border-color: var(--dk-ink);
    color: #fff;
    margin-left: 6px;
}

.dk-sa-pill-all:hover,
.dk-sa-pill-all:focus-visible {
    background: var(--dk-yellow);
    border-color: var(--dk-yellow);
    color: var(--dk-ink);
}

@media (max-width: 720px) {
    .dk-sa-why-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Site-matching tokens + yellow section + intro/coverage
   (these override earlier rules where appropriate)
   ===================================================== */

.dk-sa {
    --dk-ink: #222222;          /* match site H2 color */
    --dk-ink-soft: #434343;     /* match site body color */
    --dk-line: #ECE6D6;         /* softer border */
    --dk-line-soft: #F4F0E5;
}

/* Yellow full-bleed sections (matches site brand pattern) */

.dk-sa-bleed.dk-sa-yellow {
    background: var(--dk-yellow);
    color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-eyebrow {
    color: var(--dk-ink);
    opacity: 0.7;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-section-title {
    color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-section-title em {
    color: #fff;
    font-style: italic;
    text-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-rule {
    background: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-section-lede {
    color: rgba(34, 34, 34, 0.78);
}

/* ----- Intro section (2-col with sidebar list) ----- */

.dk-sa-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.dk-sa-intro-prose {
    color: var(--dk-ink-soft);
    font-size: 16px;
    line-height: 1.75;
}

.dk-sa-intro-prose p {
    margin: 0 0 18px;
}

.dk-sa-intro-aside {
    background: #FBF8EE;
    border: 1px solid var(--dk-line);
    border-left: 4px solid var(--dk-yellow);
    padding: 28px 30px;
}

.dk-sa-intro-aside-title {
    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--dk-ink);
}

.dk-sa-intro-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dk-sa-intro-list li {
    position: relative;
    padding-left: 22px;
    color: var(--dk-ink-soft);
    font-size: 14.5px;
    line-height: 1.5;
}

.dk-sa-intro-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    background: var(--dk-yellow);
    transform: rotate(45deg);
}

.dk-sa-aside-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dk-ink);
    border-bottom: 2px solid var(--dk-yellow);
    padding-bottom: 4px;
}

.dk-sa-aside-cta:hover {
    color: var(--dk-yellow-lo);
}

/* ----- Coverage section (2-col with map) ----- */

.dk-sa-coverage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
}

.dk-sa-coverage-text {
    padding-top: 4px;
}

.dk-sa-coverage-text .dk-sa-section-head {
    margin-bottom: 18px;
}

.dk-sa-coverage-lede,
.dk-sa-coverage-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--dk-ink-soft);
    margin: 0 0 18px;
}

.dk-sa-coverage-text .dk-sa-neighborhoods {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 18px;
}

.dk-sa-coverage-text .dk-sa-neighborhoods li {
    color: var(--dk-ink-soft);
    font-size: 14.5px;
    padding-left: 18px;
    position: relative;
}

.dk-sa-coverage-text .dk-sa-neighborhoods li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--dk-yellow);
}

.dk-sa-coverage-map {
    aspect-ratio: 4 / 3;
    background: #f5f5f4;
    border: 1px solid var(--dk-line);
    overflow: hidden;
}

.dk-sa-coverage-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ----- Service cards: soften borders, brand-match ----- */

.dk-sa-service-card {
    border: none;
    background: #fff;
    box-shadow: 0 1px 0 var(--dk-line);
    padding: 32px 28px 30px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.dk-sa-service-card::before {
    display: none;
}

.dk-sa-service-card:hover,
.dk-sa-service-card:focus-visible {
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, 0.18), 0 1px 0 var(--dk-yellow);
    transform: translateY(-3px);
    background: #fff;
}

.dk-sa-service-name {
    font-size: 19px;
    color: var(--dk-ink);
    margin-bottom: 6px;
}

.dk-sa-service-desc {
    font-size: 14.5px;
    color: var(--dk-ink-soft);
    line-height: 1.65;
}

/* ----- Why grid on yellow bg: invert items ----- */

.dk-sa-bleed.dk-sa-yellow .dk-sa-why-item {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-why-icon {
    background: var(--dk-ink);
    color: var(--dk-yellow);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-why-title-item {
    color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-why-desc {
    color: rgba(34, 34, 34, 0.72);
}

/* ----- CTA list (yellow bg) ----- */

.dk-sa-cta-list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dk-sa-cta-list li {
    position: relative;
    padding-left: 28px;
    color: var(--dk-ink);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
}

.dk-sa-cta-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: -1px;
    width: 20px;
    height: 20px;
    background: var(--dk-ink);
    color: var(--dk-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

/* ----- CTA form on yellow ----- */

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap {
    background: #fff;
    border: 1px solid var(--dk-line);
    padding: 32px 32px;
    box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 0.18);
}

.dk-sa-cta-form-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 18px;
    color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="text"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="email"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="tel"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form select {
    background: #FBF8EE;
    border: 1px solid var(--dk-line);
    color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input::placeholder,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea::placeholder {
    color: rgba(34, 34, 34, 0.45);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input:focus,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea:focus {
    border-color: var(--dk-ink);
    background: #fff;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form .wpcf7-list-item-label {
    color: var(--dk-ink-soft);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form button[type="submit"] {
    background: var(--dk-ink) !important;
    color: var(--dk-yellow) !important;
    border-color: var(--dk-ink) !important;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"]:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* ----- Section title color match ----- */

.dk-sa-section-title {
    color: var(--dk-ink);
}

.dk-sa-county-title,
.dk-sa-callout-title,
.dk-sa-service-name {
    color: var(--dk-ink);
}

/* ----- Inline tel on yellow ----- */

.dk-sa-bleed.dk-sa-yellow .dk-sa-inline-tel {
    color: var(--dk-ink);
    text-decoration-thickness: 2px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-inline-tel:hover {
    color: #000;
}

/* ----- Responsive ----- */

@media (max-width: 1080px) {
    .dk-sa-intro-grid,
    .dk-sa-coverage-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .dk-sa-coverage-text .dk-sa-neighborhoods {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .dk-sa-coverage-text .dk-sa-neighborhoods {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   Real site tokens — override everything above
   Pulled from getComputedStyle on homepage + contact-us
   ===================================================== */

.dk-sa {
    --dk-yellow: #FFC403;            /* real homepage yellow */
    --dk-yellow-hi: #FFD23E;
    --dk-yellow-lo: #C99A00;
    --dk-ink: #222222;               /* real H2 + dark section */
    --dk-ink-soft: #434343;          /* real body text */
    --dk-mute: #666666;
    --dk-line: #E6E6E6;              /* very subtle */
    --dk-light: #F9F9F9;             /* real alt section bg */
    --dk-input-border: #ADADAD;
    --dk-card-bg: #FFFFFF;
    --dk-radius-card: 20px;
    --dk-radius-medium: 15px;
    --dk-radius-input: 10px;
    --dk-radius-pill: 38px;
    color: var(--dk-ink-soft);
}

.dk-sa-bleed.dk-sa-yellow {
    background: var(--dk-yellow);
}

/* Cards: 20px rounded, no borders, no shadows */
.dk-sa-service-card,
.dk-sa-featured-card,
.dk-sa-city-card,
.dk-sa-also-card,
.dk-sa-testimonial,
.dk-sa-photo,
.dk-sa-intro-aside,
.dk-sa-faq-item,
.dk-sa-why-item {
    border-radius: var(--dk-radius-card);
    border: none;
}

.dk-sa-service-card {
    background: var(--dk-light);
    box-shadow: none;
    padding: 32px 30px 30px;
}

.dk-sa-service-card:hover,
.dk-sa-service-card:focus-visible {
    background: #fff;
    box-shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.18);
    transform: translateY(-3px);
}

/* Service icons: rounded square */
.dk-sa-service-icon {
    border-radius: 12px;
}

/* Why items on yellow: 20px radius, no border, subtle bg */
.dk-sa-bleed.dk-sa-yellow .dk-sa-why-item {
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: var(--dk-radius-card);
    padding: 24px 26px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-why-icon {
    border-radius: 12px;
    background: var(--dk-ink);
    color: var(--dk-yellow);
}

/* Intro aside: 20px radius, no left border, light bg */
.dk-sa-intro-aside {
    background: var(--dk-light);
    border: none;
    border-left: none;
    border-radius: var(--dk-radius-card);
    padding: 30px 32px;
}

/* Coverage map: 15px radius (matches site map widget) */
.dk-sa-coverage-map {
    border-radius: var(--dk-radius-medium);
    border: none;
}

/* Buttons: pill-shaped (38px radius like wdt-button) */
.dk-sa-btn,
.dk-sa-btn-yellow,
.dk-sa-btn-ghost,
.dk-sa-btn-large {
    border-radius: var(--dk-radius-pill);
    padding: 15px 32px;
    border-width: 1px;
    border-style: solid;
    font-weight: 700;
}

.dk-sa-btn-yellow {
    background: var(--dk-yellow);
    color: var(--dk-ink);
    border-color: var(--dk-yellow);
}

.dk-sa-btn-yellow:hover,
.dk-sa-btn-yellow:focus-visible {
    background: var(--dk-yellow-hi);
    border-color: var(--dk-yellow-hi);
}

.dk-sa-btn-ghost {
    background: var(--dk-ink);
    color: #fff;
    border-color: var(--dk-ink);
}

.dk-sa-btn-ghost:hover,
.dk-sa-btn-ghost:focus-visible {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Pills (nearby cities): also pill-shaped — already pills, just match radius */
.dk-sa-pill {
    border-radius: var(--dk-radius-pill);
    padding: 11px 20px;
    border: 1px solid rgba(34, 34, 34, 0.12);
    background: #fff;
    color: var(--dk-ink);
}

.dk-sa-pill:hover,
.dk-sa-pill:focus-visible {
    background: var(--dk-yellow);
    border-color: var(--dk-yellow);
    color: var(--dk-ink);
}

.dk-sa-pill-all {
    background: var(--dk-ink);
    color: #fff;
    border-color: var(--dk-ink);
}

.dk-sa-pill-all:hover,
.dk-sa-pill-all:focus-visible {
    background: var(--dk-yellow);
    color: var(--dk-ink);
    border-color: var(--dk-yellow);
}

/* Form inputs: 10px radius, white bg, grey 1px border (matches contact-us) */
.dk-sa-cta-form-wrap .wpcf7-form input[type="text"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="email"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="tel"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="url"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="number"],
.dk-sa-cta-form-wrap .wpcf7-form textarea,
.dk-sa-cta-form-wrap .wpcf7-form select,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="text"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="email"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="tel"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea {
    background: #fff;
    border: 1px solid var(--dk-input-border);
    border-radius: var(--dk-radius-input);
    color: var(--dk-ink);
    padding: 14px 22px;
}

.dk-sa-cta-form-wrap .wpcf7-form input::placeholder,
.dk-sa-cta-form-wrap .wpcf7-form textarea::placeholder,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input::placeholder,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea::placeholder {
    color: rgba(34, 34, 34, 0.45);
}

.dk-sa-cta-form-wrap .wpcf7-form input:focus,
.dk-sa-cta-form-wrap .wpcf7-form textarea:focus {
    border-color: var(--dk-ink);
    background: #fff;
    outline: none;
}

/* Submit button: pill, dark, yellow text */
.dk-sa-cta-form-wrap .wpcf7-form input[type="submit"],
.dk-sa-cta-form-wrap .wpcf7-form button[type="submit"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"] {
    background: var(--dk-ink) !important;
    color: var(--dk-yellow) !important;
    border-radius: var(--dk-radius-pill) !important;
    border: 1px solid var(--dk-ink) !important;
    padding: 15px 36px !important;
    text-transform: uppercase;
    font-weight: 700;
}

.dk-sa-cta-form-wrap .wpcf7-form input[type="submit"]:hover,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"]:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: var(--dk-yellow) !important;
}

/* CTA form wrapper itself: 20px radius, white card */
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap,
.dk-sa-cta-form-wrap {
    background: #fff;
    border: none;
    border-radius: var(--dk-radius-card);
    padding: 36px 36px 32px;
    box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.18);
}

/* FAQ items: 20px radius (like site accordion) */
.dk-sa-faq-list {
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dk-sa-faq-item {
    background: var(--dk-light);
    border: none;
    border-radius: var(--dk-radius-card);
    padding: 4px 24px;
    transition: background .2s ease;
}

.dk-sa-faq-item[open] {
    background: var(--dk-yellow);
}

.dk-sa-faq-q {
    padding: 18px 24px 18px 0;
    font-size: 16px;
    color: var(--dk-ink);
}

.dk-sa-faq-item[open] .dk-sa-faq-q {
    color: var(--dk-ink);
}

.dk-sa-faq-q::after {
    color: var(--dk-ink);
}

.dk-sa-faq-item[open] .dk-sa-faq-q::after {
    color: var(--dk-ink);
}

.dk-sa-faq-a {
    padding: 0 24px 18px 0;
    color: var(--dk-ink-soft);
}

.dk-sa-faq-item[open] .dk-sa-faq-a {
    color: rgba(34, 34, 34, 0.78);
}

/* Featured cards (archive) — keep dark style, just round it */
.dk-sa-featured-card {
    border-radius: var(--dk-radius-card);
    border: 1px solid rgba(255, 196, 3, 0.18);
}

/* City cards (archive grid) — round + cleaner border */
.dk-sa-city-card {
    border-radius: var(--dk-radius-card);
    border: 1px solid var(--dk-line);
}

.dk-sa-city-card:hover,
.dk-sa-city-card:focus-visible {
    border-color: var(--dk-yellow);
    background: #FFFEF6;
}

/* Photos (single template gallery) — round corners */
.dk-sa-photo {
    border-radius: var(--dk-radius-card);
    overflow: hidden;
}

/* Testimonials — round + soften */
.dk-sa-testimonial {
    border-radius: var(--dk-radius-card);
    border: none;
    border-left: 4px solid var(--dk-yellow);
    background: var(--dk-light);
}

/* Section title em — match brand: yellow (light) or white (yellow bg) */
.dk-sa-section-title em {
    color: var(--dk-yellow-lo);
    font-style: normal;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-section-title em {
    color: #fff;
    font-style: italic;
}

/* Tighten section padding to feel like the site (which uses 76px / 96px) */
.dk-sa-section {
    padding: 72px 0 76px;
}

.dk-sa-bleed.dk-sa-section {
    padding: 88px 0 92px;
}

/* Make hero subtitle text nicely visible */
.dk-sa-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* =====================================================
   Final pass — section recolor, tighter spacing, em fix
   ===================================================== */

/* H2 em is brand yellow on light bgs (was gold variant) */
.dk-sa-section-title em {
    color: var(--dk-yellow) !important;
    font-style: normal;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-section-title em {
    color: #fff !important;
    font-style: italic;
}

.dk-sa-bleed.dk-sa-grey .dk-sa-section-title em {
    color: var(--dk-yellow) !important;
}

/* Tighter section padding (site uses ~76 max; we drop further for density) */
.dk-sa-section {
    padding: 56px 0 60px;
}

.dk-sa-bleed.dk-sa-section {
    padding: 64px 0 72px;
}

.dk-sa-section-head {
    margin-bottom: 28px;
}

/* Grey full-bleed section variant */
.dk-sa-bleed.dk-sa-grey {
    background: var(--dk-light);
}

.dk-sa-bleed.dk-sa-grey .dk-sa-section-title {
    color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-grey .dk-sa-eyebrow {
    color: var(--dk-yellow-lo);
}

.dk-sa-bleed.dk-sa-grey .dk-sa-rule {
    background: var(--dk-yellow);
}

.dk-sa-bleed.dk-sa-grey .dk-sa-section-lede {
    color: var(--dk-mute);
}

/* Service cards on YELLOW bg */
.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card {
    background: rgba(255, 255, 255, 0.55);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card:hover,
.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card:focus-visible {
    background: #fff;
    box-shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.22);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-service-icon {
    background: var(--dk-ink);
    color: var(--dk-yellow);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-service-cta {
    color: var(--dk-ink);
    font-weight: 700;
}

/* Why on white: items get a soft grey bg + dark icons */
.dk-sa-why .dk-sa-why-item {
    background: var(--dk-light);
    border: none;
    border-radius: var(--dk-radius-card);
    padding: 24px 26px;
}

.dk-sa-why .dk-sa-why-icon {
    background: var(--dk-yellow);
    color: var(--dk-ink);
    border-radius: 12px;
}

.dk-sa-why .dk-sa-why-title-item {
    color: var(--dk-ink);
}

.dk-sa-why .dk-sa-why-desc {
    color: var(--dk-mute);
}

/* Coverage on grey: white card-like map, tighter integration */
.dk-sa-bleed.dk-sa-grey .dk-sa-coverage-grid {
    align-items: stretch;
}

.dk-sa-bleed.dk-sa-grey .dk-sa-coverage-map {
    background: #fff;
    border-radius: var(--dk-radius-card);
}

.dk-sa-bleed.dk-sa-grey .dk-sa-neighborhoods li {
    color: var(--dk-ink-soft);
}

/* Nearby pills inside coverage section */
.dk-sa-coverage-nearby {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(34, 34, 34, 0.08);
}

.dk-sa-coverage-nearby-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--dk-ink);
    margin: 0 0 16px;
}

/* Intro grid: better balance, prevent aside from looking misplaced */
.dk-sa-intro-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
    gap: 40px;
    align-items: stretch;
}

.dk-sa-intro-aside {
    align-self: start;
    position: sticky;
    top: 20px;
}

@media (max-width: 1080px) {
    .dk-sa-intro-aside {
        position: static;
    }
}

/* Reduce gap between adjacent same-color sections */
.dk-sa-section + .dk-sa-section {
    border-top: none;
    padding-top: 0;
}

.dk-sa-section + .dk-sa-section .dk-sa-section-head {
    margin-top: 64px;
}

/* =====================================================
   Fix padding bug + map-pin bullets + intro alignment
   ===================================================== */

/* Revert: every section gets its own padding (don't strip top from + section) */
.dk-sa-section + .dk-sa-section {
    border-top: none;
    padding-top: 56px;
}

.dk-sa-section + .dk-sa-section .dk-sa-section-head {
    margin-top: 0;
}

.dk-sa-bleed.dk-sa-section {
    padding: 64px 0 72px !important;
}

.dk-sa-section.dk-sa-intro {
    padding-top: 56px;
}

/* Map-pin SVG bullets (matches site's elementor-icon-list teardrop pin) */
.dk-sa-pin-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dk-sa-pin-list li {
    position: relative;
    padding-left: 28px;
    color: var(--dk-ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 10px;
}

.dk-sa-pin-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='%23FFC403' d='M60,119.5c-5-8-9.8-15.5-14.4-23c-8.1-13.4-15.5-27.2-21.2-41.8C16,33,27.2,13.4,41.3,5.4c22.1-12.6,50-0.1,56.1,25.1c2.1,8.5,1,16.6-2,24.6c-6,15.9-14.4,30.6-23.2,45.1C68.4,106.5,64.3,112.6,60,119.5z M38,40.4c-0.1,12.6,9.6,22.8,21.9,23C72,63.6,82.1,53.2,82,40.5c0-12.6-9.9-22.8-22-22.8C47.9,17.7,38,27.9,38,40.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Override the older intro-list bullet rule (yellow rotated square) */
.dk-sa-intro-list li {
    padding-left: 28px;
    color: var(--dk-ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
}

.dk-sa-intro-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='%23FFC403' d='M60,119.5c-5-8-9.8-15.5-14.4-23c-8.1-13.4-15.5-27.2-21.2-41.8C16,33,27.2,13.4,41.3,5.4c22.1-12.6,50-0.1,56.1,25.1c2.1,8.5,1,16.6-2,24.6c-6,15.9-14.4,30.6-23.2,45.1C68.4,106.5,64.3,112.6,60,119.5z M38,40.4c-0.1,12.6,9.6,22.8,21.9,23C72,63.6,82.1,53.2,82,40.5c0-12.6-9.9-22.8-22-22.8C47.9,17.7,38,27.9,38,40.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
}

/* Coverage neighborhoods grid uses pin bullets too */
.dk-sa-coverage-text .dk-sa-neighborhoods li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='%23FFC403' d='M60,119.5c-5-8-9.8-15.5-14.4-23c-8.1-13.4-15.5-27.2-21.2-41.8C16,33,27.2,13.4,41.3,5.4c22.1-12.6,50-0.1,56.1,25.1c2.1,8.5,1,16.6-2,24.6c-6,15.9-14.4,30.6-23.2,45.1C68.4,106.5,64.3,112.6,60,119.5z M38,40.4c-0.1,12.6,9.6,22.8,21.9,23C72,63.6,82.1,53.2,82,40.5c0-12.6-9.9-22.8-22-22.8C47.9,17.7,38,27.9,38,40.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 12px;
    height: 14px;
    top: 4px;
}

/* Intro grid: restructured. Section-head now lives in prose column,
   so prose+aside align at the same vertical start. */
.dk-sa-intro-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 48px;
    align-items: start;
}

.dk-sa-intro-prose .dk-sa-section-head {
    margin-bottom: 22px;
    max-width: 100%;
}

.dk-sa-intro-aside {
    align-self: start;
    position: static;
    margin-top: 4px; /* aligns visually with the eyebrow line */
}

@media (max-width: 1080px) {
    .dk-sa-intro-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Final-final pass: standardize colors/italic, fix form,
   fix FAQ accordion, center pills, hero gap, more padding
   ===================================================== */

/* 1. Hero-to-first-section gap: Mezan's #header-wrapper has margin-bottom:100px
      site-wide. On service-area pages we tighten that. */
body.single-service-area #header-wrapper,
body.post-type-archive-service-area #header-wrapper {
    margin-bottom: 30px !important;
}

/* 2. More section padding (was 56/60, now 70/76 — closer to site's 76) */
.dk-sa-section {
    padding: 70px 0 76px;
}

.dk-sa-section + .dk-sa-section {
    padding-top: 70px;
}

.dk-sa-bleed.dk-sa-section {
    padding: 80px 0 88px !important;
}

.dk-sa-section.dk-sa-intro {
    padding-top: 60px;
}

/* 3. Standardize ALL heading <em>: brand yellow #FFC403, italic, consistent.
      White on yellow bg, brand yellow everywhere else. */
.dk-sa-section-title em,
.dk-sa-intro-aside-title em,
.dk-sa-coverage-nearby-title em {
    color: var(--dk-yellow) !important;
    font-style: italic !important;
    font-weight: inherit;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-section-title em {
    color: #fff !important;
    font-style: italic !important;
}

.dk-sa-bleed.dk-sa-grey .dk-sa-section-title em {
    color: var(--dk-yellow) !important;
}

/* 4. "We also serve" pills: center horizontally */
.dk-sa-coverage-nearby ul.dk-sa-also-pills,
.dk-sa-also-pills {
    justify-content: center;
}

.dk-sa-coverage-nearby-title {
    text-align: center;
}

/* 5. Grey button (request a quote) on grey section: ensure visibility.
      Use white pill with dark text instead of dark on grey. */
.dk-sa-bleed.dk-sa-grey .dk-sa-btn-ghost {
    background: #fff;
    color: var(--dk-ink);
    border-color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-grey .dk-sa-btn-ghost:hover,
.dk-sa-bleed.dk-sa-grey .dk-sa-btn-ghost:focus-visible {
    background: var(--dk-ink);
    color: #fff;
    border-color: var(--dk-ink);
}

/* 6. CTA form: match homepage style — underline-only inputs, no card wrapper.
      Drop the white card box and let inputs sit directly on yellow. */
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.dk-sa-cta-form-title {
    color: var(--dk-ink);
    font-size: 24px;
    margin-bottom: 22px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="text"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="email"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="tel"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="url"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form select {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--dk-ink) !important;
    border-radius: 0 !important;
    color: var(--dk-ink) !important;
    padding: 14px 0 !important;
    font-size: 16px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input::placeholder,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea::placeholder {
    color: rgba(34, 34, 34, 0.55) !important;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input:focus,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea:focus {
    border-bottom-color: #000 !important;
    background: transparent !important;
}

/* Checkbox: 16px box, dark border, dark accent */
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    appearance: none;
    background: transparent;
    border: 1px solid var(--dk-ink);
    border-radius: 2px;
    margin: 0 8px 0 0;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
    accent-color: var(--dk-ink);
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="checkbox"]:checked {
    background: var(--dk-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFC403' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form .wpcf7-list-item {
    margin: 14px 0 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form .wpcf7-list-item-label {
    color: var(--dk-ink) !important;
    font-size: 14px;
}

/* Submit button still pill, dark, yellow text */
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"] {
    background: var(--dk-ink) !important;
    color: var(--dk-yellow) !important;
    border-radius: var(--dk-radius-pill) !important;
    border: 1px solid var(--dk-ink) !important;
    padding: 15px 36px !important;
    margin-top: 16px;
    width: auto !important;
}

/* 7. FAQ accordion: match homepage's bigger style. Closed = light grey rounded
      card with dark text. Open = brand yellow rounded card with white text. */
.dk-sa-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dk-sa-faq-item {
    background: var(--dk-light);
    border-radius: var(--dk-radius-card);
    padding: 0;
    overflow: hidden;
    transition: background .25s ease;
}

.dk-sa-faq-item[open] {
    background: var(--dk-yellow);
}

.dk-sa-faq-q {
    padding: 28px 32px;
    font-size: 19px;
    font-weight: 600;
    color: var(--dk-ink);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 64px;
    transition: color .25s ease;
}

.dk-sa-faq-q::-webkit-details-marker { display: none; }

.dk-sa-faq-item[open] .dk-sa-faq-q {
    color: #fff;
}

.dk-sa-faq-q::after {
    content: '+';
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dk-ink);
    color: var(--dk-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.dk-sa-faq-item[open] .dk-sa-faq-q::after {
    transform: translateY(-50%) rotate(45deg);
    background: #fff;
    color: var(--dk-yellow);
}

.dk-sa-faq-a {
    padding: 0 32px 28px;
    color: var(--dk-ink-soft);
    font-size: 15.5px;
    line-height: 1.7;
}

.dk-sa-faq-item[open] .dk-sa-faq-a {
    color: rgba(34, 34, 34, 0.85);
}

.dk-sa-faq-a p {
    margin: 0;
}

/* =====================================================
   Form needs visible card. View-all pill color. Service
   cards white with hover. All sections full-bleed for
   rhythm. FAQ check.
   ===================================================== */

/* 1. CTA form: WHITE CARD wrapper restored, boxed inputs inside (matches
      contact-us page style, NOT the bottom-border-only homepage hero box). */
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap,
.dk-sa-cta-form-wrap {
    background: #fff !important;
    border-radius: var(--dk-radius-card) !important;
    padding: 36px 36px 32px !important;
    box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.22) !important;
}

.dk-sa-cta-form-title {
    color: var(--dk-ink);
    font-size: 22px;
    margin: 0 0 22px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="text"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="email"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="tel"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="url"],
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form select {
    background: #fff !important;
    border: 1px solid var(--dk-input-border) !important;
    border-bottom: 1px solid var(--dk-input-border) !important;
    border-radius: var(--dk-radius-input) !important;
    color: var(--dk-ink) !important;
    padding: 14px 22px !important;
    font-size: 15px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input::placeholder,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea::placeholder {
    color: rgba(34, 34, 34, 0.45) !important;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input:focus,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form textarea:focus {
    border-color: var(--dk-ink) !important;
    background: #fff !important;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form .wpcf7-list-item-label {
    color: var(--dk-ink-soft) !important;
}

/* 2. View all 78 cities pill — yellow with dark text (matches site primary CTA) */
.dk-sa-pill-all {
    background: var(--dk-yellow) !important;
    color: var(--dk-ink) !important;
    border-color: var(--dk-yellow) !important;
}

.dk-sa-pill-all:hover,
.dk-sa-pill-all:focus-visible {
    background: var(--dk-yellow-hi) !important;
    border-color: var(--dk-yellow-hi) !important;
    color: var(--dk-ink) !important;
}

/* 3. Service cards on yellow: WHITE bg with hover lift (matching the
      featured cards style on /service-areas/ archive). */
.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card {
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    position: relative;
    overflow: hidden;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--dk-ink);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s ease;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card:hover,
.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card:focus-visible {
    background: #fff;
    transform: translateY(-4px);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.32);
    outline: none;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card:hover::before,
.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card:focus-visible::before {
    transform: scaleY(1);
}

/* 4. ALL sections full-bleed (consistent rhythm). White sections get full-width
      bg even though it matches page bg. Adds visual section consistency. */
.dk-sa-section.dk-sa-intro,
.dk-sa-section.dk-sa-why,
.dk-sa-section.dk-sa-faq {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
    background: #fff;
}

.dk-sa-section.dk-sa-intro > *,
.dk-sa-section.dk-sa-why > *,
.dk-sa-section.dk-sa-faq > * {
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* 5. Make sure the FAQ open state's question row is also yellow (in case
      Mezan or another rule sets summary bg). Force-yellow when [open]. */
.dk-sa-faq-item[open] .dk-sa-faq-q,
.dk-sa-faq-item[open] summary.dk-sa-faq-q {
    background: var(--dk-yellow) !important;
    color: #222 !important;
}

.dk-sa-faq-item[open] .dk-sa-faq-a {
    background: var(--dk-yellow) !important;
    color: rgba(34, 34, 34, 0.85) !important;
}

/* Ensure entire details element fills consistently */
.dk-sa-faq-item {
    background: var(--dk-light) !important;
}

.dk-sa-faq-item[open] {
    background: var(--dk-yellow) !important;
}

/* Kill the gold variant — every use of --dk-yellow-lo now resolves to brand yellow */
.dk-sa {
    --dk-yellow-lo: #FFC403 !important;
}

/* Explicitly override the FAQ hover (and any other --dk-yellow-lo refs) */
.dk-sa-faq-q:hover,
.dk-sa-tab:hover,
.dk-sa-tab.is-active,
.dk-sa .dk-sa-also-card:hover,
.dk-sa .dk-sa-also-card:focus-visible,
.dk-sa-bleed.dk-sa-yellow .dk-sa-inline-tel:hover,
.dk-sa-aside-cta:hover,
.dk-sa-eyebrow,
.dk-sa-bleed.dk-sa-grey .dk-sa-eyebrow,
.dk-sa-pill,
.dk-sa-pill:hover,
.dk-sa-pill:focus-visible {
    color: #FFC403 !important;
}

/* =====================================================
   ENFORCE: ONE button system + WIDER content area
   ===================================================== */

/* Wider content + 30px side padding so full-bleed sections line their content
   up with the container-bound sections (county grids, quicknav, archive intro). */
.dk-sa-bleed > .dk-sa-bleed-inner {
    max-width: 1640px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.dk-sa-section.dk-sa-intro > *,
.dk-sa-section.dk-sa-why > *,
.dk-sa-section.dk-sa-faq > * {
    max-width: 1640px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* ======= UNIFIED BUTTON SYSTEM =======
   Three variants. Every clickable element on the page uses one of these.
   All same shape (pill 38px), same font (Outfit 700 14px uppercase 0.04em),
   same hover behavior. */

.dk-sa-btn,
.dk-sa-btn-yellow,
.dk-sa-btn-ghost,
.dk-sa-btn-dark,
.dk-sa-btn-large,
.dk-sa-pill-all,
.dk-sa-aside-cta,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 38px !important;
    padding: 14px 30px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
    width: auto !important;
    line-height: 1.2 !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}

/* PRIMARY (yellow, dark text) — main CTAs */
.dk-sa-btn-yellow,
.dk-sa-pill-all,
.dk-sa-aside-cta,
.dk-sa-btn-large {
    background: #FFC403 !important;
    color: #222 !important;
    border-color: #FFC403 !important;
}

.dk-sa-btn-yellow:hover,
.dk-sa-btn-yellow:focus-visible,
.dk-sa-pill-all:hover,
.dk-sa-pill-all:focus-visible,
.dk-sa-aside-cta:hover,
.dk-sa-btn-large:hover {
    background: #222 !important;
    color: #FFC403 !important;
    border-color: #222 !important;
    transform: translateY(-1px);
}

/* SECONDARY (dark, yellow text) — secondary CTAs + form submit */
.dk-sa-btn-ghost,
.dk-sa-btn-dark,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"],
.dk-sa-cta-form-wrap .wpcf7-form input[type="submit"],
.dk-sa-bleed.dk-sa-grey .dk-sa-btn-ghost {
    background: #222 !important;
    color: #FFC403 !important;
    border-color: #222 !important;
}

.dk-sa-btn-ghost:hover,
.dk-sa-btn-ghost:focus-visible,
.dk-sa-btn-dark:hover,
.dk-sa-bleed.dk-sa-yellow .dk-sa-cta-form-wrap .wpcf7-form input[type="submit"]:hover,
.dk-sa-bleed.dk-sa-grey .dk-sa-btn-ghost:hover {
    background: #FFC403 !important;
    color: #222 !important;
    border-color: #FFC403 !important;
    transform: translateY(-1px);
}

/* TERTIARY (small pills for sibling city links — "tag" style, smaller padding) */
.dk-sa-pill {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 38px !important;
    padding: 10px 20px !important;
    background: #fff !important;
    color: #222 !important;
    border: 1px solid rgba(34, 34, 34, 0.15) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}

.dk-sa-pill:hover,
.dk-sa-pill:focus-visible {
    background: #FFC403 !important;
    color: #222 !important;
    border-color: #FFC403 !important;
    transform: translateY(-1px);
}

/* "View all 78 cities" — already matches primary because of dk-sa-pill-all
   above. The earlier !important rules with text-color: yellow are now
   superseded. */
.dk-sa-pill.dk-sa-pill-all {
    background: #FFC403 !important;
    color: #222 !important;
    border-color: #FFC403 !important;
    padding: 14px 30px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

.dk-sa-pill.dk-sa-pill-all:hover,
.dk-sa-pill.dk-sa-pill-all:focus-visible {
    background: #222 !important;
    color: #FFC403 !important;
    border-color: #222 !important;
}

/* "Call (801) 335-9197" yellow Call button — make sure text is dark not gold-grey */
.dk-sa-btn-yellow,
.dk-sa-btn-yellow:visited {
    color: #222 !important;
}

/* =====================================================
   Breadcrumb above title + centered CTA layout
   ===================================================== */

/* Breadcrumb above the H1 in Mezan's hero section (service-area pages only) */
body.single-service-area .main-title-section-container .container,
body.post-type-archive-service-area .main-title-section-container .container {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

body.single-service-area .main-title-section-container .breadcrumb,
body.post-type-archive-service-area .main-title-section-container .breadcrumb {
    margin-bottom: 14px;
    margin-top: 0;
    font-size: 13px;
}

/* CTA section: centered, no form */
.dk-sa-cta-centered {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.dk-sa-cta-centered .dk-sa-eyebrow,
.dk-sa-cta-centered .dk-sa-rule {
    margin-left: auto;
    margin-right: auto;
}

.dk-sa-cta-centered .dk-sa-section-title {
    margin-left: auto;
    margin-right: auto;
}

.dk-sa-cta-centered .dk-sa-section-lede {
    color: rgba(34, 34, 34, 0.85);
    margin: 0 auto 28px;
    max-width: 620px;
}

.dk-sa-cta-centered .dk-sa-cta-list {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    margin: 0 auto 32px;
}

.dk-sa-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =====================================================
   TYPOGRAPHY (matches user's site customizer specs)
   H1 56 / H2 50 / H3 44 / H4 30 / H5 26 / H6 18
   Body 16/1.62. Outfit 600 headings, 400 body. #222
   ===================================================== */

.dk-sa h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}
.dk-sa h2,
.dk-sa .dk-sa-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 50px !important;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}
.dk-sa-bleed.dk-sa-yellow .dk-sa-section-title {
    color: #222 !important;
}
.dk-sa h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 30px; /* H4 spec used here for in-card titles — H3-styled-as-H4 */
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}
.dk-sa h4,
.dk-sa-cta-form-title,
.dk-sa-intro-aside-title,
.dk-sa-coverage-nearby-title,
.dk-sa-why-title-item,
.dk-sa-service-name,
.dk-sa-faq-q {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}
.dk-sa-faq-q { font-size: 18px; }      /* H6 size — matches site FAQ */
.dk-sa-why-title-item { font-size: 18px; }
.dk-sa-service-name { font-size: 22px; }
.dk-sa-intro-aside-title { font-size: 22px; }
.dk-sa-coverage-nearby-title { font-size: 22px; }

.dk-sa,
.dk-sa p,
.dk-sa li,
.dk-sa-prose,
.dk-sa-intro-prose,
.dk-sa-coverage-lede,
.dk-sa-coverage-body,
.dk-sa-section-lede {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    line-height: 1.62;
    color: #222;
    font-weight: 400;
}

/* =====================================================
   Why-card alignment: icon + text centered vertically
   ===================================================== */
.dk-sa-why-item {
    align-items: center !important;
}

/* =====================================================
   "We also serve" — center heading + pills
   ===================================================== */
.dk-sa-coverage-nearby {
    text-align: center;
}
.dk-sa-coverage-nearby-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.dk-sa-also-pills {
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* =====================================================
   FAQ — match the homepage style EXACTLY:
   Closed = white outlined card + chevron-down circle.
   Open = yellow filled card (question only) + separate
          light-grey card below with answer + chevron-right
   ===================================================== */

.dk-sa-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Reset wrapper to a transparent host (the visual cards are summary + answer) */
.dk-sa-faq-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible;
    transition: none;
}

/* Closed question card: white with grey border */
.dk-sa-faq-q {
    display: block !important;
    background: #fff !important;
    border: 1px solid #ADADAD !important;
    border-radius: 20px !important;
    padding: 24px 30px !important;
    padding-right: 88px !important;
    color: #222 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.dk-sa-faq-q::-webkit-details-marker { display: none; }

/* Open: question card turns yellow */
.dk-sa-faq-item[open] .dk-sa-faq-q {
    background: #FFC403 !important;
    border-color: #FFC403 !important;
    color: #222 !important;
    margin-bottom: 14px;
}

/* Chevron circle icon — closed = down chevron, open = rotated 180 (up) */
.dk-sa-faq-q::after {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #222;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform .25s ease;
}

.dk-sa-faq-item[open] .dk-sa-faq-q::after {
    transform: translateY(-50%) rotate(-90deg);
}

/* Answer card: separate grey rounded card BELOW question (only when open) */
.dk-sa-faq-a {
    background: #F4F4F4 !important;
    border-radius: 20px !important;
    padding: 26px 30px !important;
    color: #222 !important;
    font-size: 16px !important;
    line-height: 1.62 !important;
}

.dk-sa-faq-a p {
    margin: 0;
    color: #222 !important;
}

/* Override earlier rules that forced both pieces to be yellow */
.dk-sa-faq-item[open] .dk-sa-faq-a {
    background: #F4F4F4 !important;
    color: #222 !important;
}

/* =====================================================
   CTA section: 2-col layout with dark phone-card on right
   ===================================================== */

/* Reset the centered layout — go back to 2-col grid */
.dk-sa-cta-centered { display: none !important; }

.dk-sa-cta .dk-sa-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
    gap: 56px;
    align-items: center;
}

.dk-sa-cta .dk-sa-cta-content .dk-sa-section-lede {
    color: #222;
    margin-bottom: 22px;
}

.dk-sa-cta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dk-sa-cta-list li {
    position: relative;
    padding-left: 32px;
    color: #222;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
}

.dk-sa-cta-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    background: #222;
    color: #FFC403;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* Dark phone-card on right */
.dk-sa-cta-card {
    background: #222;
    color: #fff;
    border-radius: 20px;
    padding: 44px 36px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.45);
}

.dk-sa-cta-card-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FFC403;
}

.dk-sa-cta-phone {
    display: block;
    color: #FFC403 !important;
    font-family: 'Outfit', sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-decoration: none;
    margin: 8px 0 4px;
    transition: color .2s ease;
}

.dk-sa-cta-phone:hover {
    color: #fff !important;
}

.dk-sa-cta-card-tag {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    margin: 0 0 22px !important;
    line-height: 1.5;
}

/* Force the Request-a-Quote button inside the card to stay yellow even though
   ALL my unified-button rules above would also work — adding one specific rule
   so dropping into the dark card doesn't get touched by other variants. */
.dk-sa-cta-card .dk-sa-btn,
.dk-sa-cta-card-btn {
    background: #FFC403 !important;
    color: #222 !important;
    border-color: #FFC403 !important;
    width: 100%;
    max-width: 280px;
}

.dk-sa-cta-card .dk-sa-btn:hover,
.dk-sa-cta-card-btn:hover {
    background: #fff !important;
    color: #222 !important;
    border-color: #fff !important;
}

@media (max-width: 1080px) {
    .dk-sa-cta .dk-sa-cta-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =====================================================
   Targeted fixes: eyebrow size/color, aside centering,
   equal-height why cards, view-all pill matches others
   ===================================================== */

/* 1. Eyebrows ("Plumbing in Salt Lake City" etc.): 16px and NOT yellow.
      Site uses small-caps eyebrows but user wants larger + dark. */
.dk-sa-eyebrow,
.dk-sa-bleed.dk-sa-yellow .dk-sa-eyebrow,
.dk-sa-bleed.dk-sa-grey .dk-sa-eyebrow,
.dk-sa-bleed.dk-sa-dark .dk-sa-eyebrow {
    color: #222 !important;
    font-size: 16px !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* On yellow bg, eyebrow stays dark (already #222 above — explicit) */
.dk-sa-bleed.dk-sa-yellow .dk-sa-eyebrow {
    color: #222 !important;
    opacity: 0.7;
}

/* 2. Center the "Call (801) 335-9197" button in the Common Calls aside */
.dk-sa-intro-aside {
    text-align: center;
}

.dk-sa-intro-aside-title {
    text-align: center;
}

.dk-sa-intro-list {
    text-align: left; /* keep list items readable left-aligned */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.dk-sa-aside-cta {
    margin-top: 8px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Why-cards: equal height across rows. Set min-height so single-line
      titles align vertically with multi-line ones in another row. */
.dk-sa-why-grid {
    align-items: stretch;
}

.dk-sa-why-item {
    min-height: 130px;
    align-items: center !important;
}

.dk-sa-why-text {
    flex: 1 1 auto;
}

.dk-sa-why-desc {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #555 !important;
}

/* 4. "View all 78 cities" pill — same size/visual weight as other pills,
      just yellow bg to highlight it as the primary cross-link */
.dk-sa-pill.dk-sa-pill-all {
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: #FFC403 !important;
    color: #222 !important;
    border: 1px solid #FFC403 !important;
}

.dk-sa-pill.dk-sa-pill-all:hover,
.dk-sa-pill.dk-sa-pill-all:focus-visible {
    background: #222 !important;
    color: #FFC403 !important;
    border-color: #222 !important;
}

/* Ensure all pills align on baseline / center vertically */
.dk-sa-also-pills {
    align-items: center;
}

.dk-sa-also-pills li {
    display: inline-flex;
    align-items: center;
}

/* Why-cards: ensure ALL rows match the tallest (which is ~164px due to 2-line text) */
.dk-sa-why-item {
    min-height: 164px !important;
}

/* View-all pill: match regular pill height (45px). The arrow span needed
   line-height adjustment. */
.dk-sa-pill,
.dk-sa-pill.dk-sa-pill-all {
    line-height: 1.5 !important;
    height: 45px !important;
    padding: 0 22px !important;
    min-width: 0;
}

.dk-sa-pill span {
    line-height: 1;
}

/* Revert breadcrumb-above-title — match the rest of the site (heading first,
   breadcrumb below) */
body.single-service-area .main-title-section-container .container,
body.post-type-archive-service-area .main-title-section-container .container {
    display: block !important;
    flex-direction: row !important;
}

/* Kill the leftover yellow wrapper bg on open FAQ items — the question card
   and answer card own their own backgrounds. The wrapper must stay transparent. */
.dk-sa-faq-item,
.dk-sa-faq-item[open] {
    background: transparent !important;
    background-color: transparent !important;
}

/* =====================================================
   FAQ rebuild: ONE grey card per item. No borders.
   When open, only the top portion (question) turns yellow.
   Answer stays grey, all in the same continuous container.
   ===================================================== */

.dk-sa-faq-item,
.dk-sa-faq-item[open] {
    background: #F4F4F4 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;  /* keeps yellow top within rounded corners */
    margin: 0;
}

/* Closed question = transparent (shows grey container through) */
.dk-sa-faq-q {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 24px 30px !important;
    padding-right: 88px !important;
    margin: 0 !important;
    color: #222 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer;
    list-style: none;
    position: relative;
}

/* Open: ONLY the top (question) turns yellow */
.dk-sa-faq-item[open] .dk-sa-faq-q {
    background: #FFC403 !important;
    border-color: transparent !important;
    color: #222 !important;
    margin: 0 !important;
}

/* Answer stays grey (inherits from container — explicit transparent) */
.dk-sa-faq-a,
.dk-sa-faq-item[open] .dk-sa-faq-a {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 24px 30px !important;
    color: #222 !important;
    font-size: 16px !important;
    line-height: 1.62 !important;
}

/* FAQ hover state: question turns yellow on hover (matches click behavior) */
.dk-sa-faq-q:hover,
.dk-sa-faq-q:focus-visible {
    background: #FFC403 !important;
    color: #222 !important;
    transition: background .25s ease;
}

/* When hovered AND closed, the bottom of the item still shows grey container.
   When the cursor leaves, transition back smoothly. */
.dk-sa-faq-q {
    transition: background .25s ease, color .25s ease !important;
}

/* On hover, also rotate the chevron a bit for visual feedback */
.dk-sa-faq-q:hover::after {
    background-color: rgba(34, 34, 34, 0.06);
}

/* =====================================================
   Archive callout YELLOW + borders on cards
   ===================================================== */

/* Archive "Don't see your city" — yellow full-bleed callout, centered */
.dk-sa-bleed.dk-sa-yellow.dk-sa-callout {
    text-align: center;
}

.dk-sa-bleed.dk-sa-yellow.dk-sa-callout .dk-sa-bleed-inner {
    text-align: center;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-callout-title {
    color: #222 !important;
    font-size: 50px !important;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 14px;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-callout-title em {
    color: #fff !important;
    font-style: italic;
    font-size: 0.7em;
    display: inline-block;
    margin-top: 6px;
    font-weight: 500;
}

.dk-sa-bleed.dk-sa-yellow.dk-sa-callout p {
    color: #222 !important;
    max-width: 560px;
    margin: 0 auto 26px;
}

/* Borders on all major card-style elements */
.dk-sa-service-card {
    border: 1px solid #ADADAD !important;
    box-shadow: none !important;
}

.dk-sa-service-card:hover,
.dk-sa-service-card:focus-visible {
    border-color: #222 !important;
    box-shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.18) !important;
}

.dk-sa-bleed.dk-sa-yellow .dk-sa-services-grid .dk-sa-service-card {
    border: 1px solid rgba(34, 34, 34, 0.18) !important;
}

.dk-sa-why-item {
    border: 1px solid #ADADAD !important;
}

.dk-sa-city-card {
    border: 1px solid #ADADAD !important;
}

.dk-sa-featured-card {
    border: 1px solid rgba(255, 196, 3, 0.35) !important;
}

.dk-sa-intro-aside {
    border: 1px solid #ADADAD !important;
}

.dk-sa-cta-card {
    border: 1px solid #ADADAD !important;
}

.dk-sa-coverage-map {
    border: 1px solid #ADADAD !important;
}

.dk-sa-photo {
    border: 1px solid #ADADAD !important;
}

.dk-sa-testimonial {
    border: 1px solid #ADADAD !important;
    border-left: 4px solid #FFC403 !important;
}

/* =====================================================
   Featured cards: WHITE text on dark bg
   ===================================================== */
.dk-sa-featured-card,
.dk-sa-featured-card .dk-sa-featured-name,
.dk-sa-featured-card .dk-sa-featured-desc,
.dk-sa-featured-card .dk-sa-featured-cta {
    color: #fff !important;
}

.dk-sa-featured-card .dk-sa-featured-name {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.dk-sa-featured-card .dk-sa-featured-desc {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.dk-sa-featured-card .dk-sa-featured-county {
    color: #FFC403 !important;
}

.dk-sa-featured-card .dk-sa-featured-cta {
    color: #FFC403 !important;
}

/* Tighter top spacing on the first bleed section after the Mezan hero */
body.post-type-archive-service-area .dk-sa > .dk-sa-bleed.dk-sa-section:first-child,
body.single-service-area .dk-sa > .dk-sa-bleed.dk-sa-section:first-child,
body.post-type-archive-service-area .dk-sa > .dk-sa-section:first-child,
body.single-service-area .dk-sa > .dk-sa-section:first-child {
    padding-top: 40px !important;
}

/* =====================================================
   Dark map section: border on map + readable Request a Quote button
   ===================================================== */

/* Map frame border in dark sections */
.dk-sa-bleed.dk-sa-dark .dk-sa-map-frame,
.dk-sa-map .dk-sa-map-frame {
    border: 2px solid #FFC403 !important;
    border-radius: 15px !important;
    overflow: hidden;
}

/* Ghost (Request a Quote) button on dark sections — outline yellow so it's
   visible against dark bg */
.dk-sa-bleed.dk-sa-dark .dk-sa-btn-ghost,
.dk-sa-map .dk-sa-btn-ghost {
    background: transparent !important;
    color: #FFC403 !important;
    border: 1px solid #FFC403 !important;
}

.dk-sa-bleed.dk-sa-dark .dk-sa-btn-ghost:hover,
.dk-sa-bleed.dk-sa-dark .dk-sa-btn-ghost:focus-visible,
.dk-sa-map .dk-sa-btn-ghost:hover {
    background: #FFC403 !important;
    color: #222 !important;
    border-color: #FFC403 !important;
}

/* Eliminate ALL gap between Mezan hero and the first content section
   on service-area archive + singles. Mezan defaults to 100px header
   margin; we already overrode to 30. Now zero it AND zero the first
   section's padding-top so the dark featured section butts directly
   against the dark Mezan hero. */
body.single-service-area #header-wrapper,
body.post-type-archive-service-area #header-wrapper {
    margin-bottom: 0 !important;
}

body.post-type-archive-service-area .dk-sa > .dk-sa-bleed.dk-sa-section:first-child,
body.single-service-area .dk-sa > .dk-sa-bleed.dk-sa-section:first-child,
body.post-type-archive-service-area .dk-sa > .dk-sa-section:first-child,
body.single-service-area .dk-sa > .dk-sa-section:first-child {
    padding-top: 0 !important;
}

/* Re-introduce a small breathing space on the FIRST section's content head
   so the title doesn't sit jammed against the hero. Use top padding on the
   inner header instead. */
body.post-type-archive-service-area .dk-sa > .dk-sa-bleed.dk-sa-section:first-child .dk-sa-bleed-inner > .dk-sa-section-head,
body.single-service-area .dk-sa > .dk-sa-section:first-child > .dk-sa-section-head,
body.single-service-area .dk-sa > .dk-sa-section:first-child .dk-sa-intro-grid {
    padding-top: 64px;
}

/* The archive's white "Where We Work" intro is a plain (non-bleed) .dk-sa-section,
   so the rule above doesn't reach it. Give it a real top margin so it isn't
   jammed against the dark Mezan hero. */
body.post-type-archive-service-area .dk-sa > .dk-sa-archive-intro {
    margin-top: 64px;
}

/* ============================================================
   v1.1.0 — slug restructure / county landing pages
   ============================================================ */

/* Make the county-count block in the archive a proper link target. */
a.dk-sa-county-count {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    text-decoration: none;
    color: inherit;
    padding: 12px 18px;
    border-radius: 20px;
    border: 1px solid var(--dk-input-border, #ADADAD);
    background: #fff;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

a.dk-sa-county-count:hover,
a.dk-sa-county-count:focus-visible {
    background: var(--dk-yellow, #FFC403);
    border-color: var(--dk-yellow, #FFC403);
    color: #222;
    transform: translateY(-1px);
    text-decoration: none;
}

a.dk-sa-county-count .dk-sa-count-num,
a.dk-sa-county-count .dk-sa-count-lbl {
    color: inherit;
}

/* Make the county heading clickable inside the h3 without repainting it */
.dk-sa-county-title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .25s ease;
    padding-bottom: 2px;
}

.dk-sa-county-title a:hover,
.dk-sa-county-title a:focus-visible {
    color: inherit;
    background-size: 100% 1px;
    text-decoration: none;
}

/* "View all X cities ->" CTA below each county's city grid.
   Selector includes `p` to outrank the generic `.dk-sa p` margin rule —
   this row is a <p> and would otherwise inherit `margin: 0 0 16px`. */
.dk-sa p.dk-sa-county-cta-row {
    margin: 56px 0 12px;
    text-align: right;
}

.dk-sa-county-cta {
    display: inline-block;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid var(--dk-input-border, #ADADAD);
    border-radius: 38px;
    background: #fff;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.dk-sa-county-cta:hover,
.dk-sa-county-cta:focus-visible {
    background: var(--dk-yellow, #FFC403);
    border-color: var(--dk-yellow, #FFC403);
    color: #222;
    transform: translateY(-1px);
    text-decoration: none;
}

/* "Drain Kingz also serves" cross-county block on county landing pages */
.dk-sa-other-counties {
    background: var(--dk-light, #F9F9F9);
    padding-top: 80px;
    padding-bottom: 80px;
    /* Full-bleed grey band so the background spans the whole screen instead
       of sitting as a rounded box inside the container. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.dk-sa-other-counties > * {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

.dk-sa-other-counties .dk-sa-section-head {
    text-align: center;
    margin: 0 auto 36px;
    max-width: 720px;
}

.dk-sa-other-counties-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 900px) {
    .dk-sa-other-counties-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .dk-sa-other-counties-grid {
        grid-template-columns: 1fr;
    }
}

.dk-sa-other-county-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--dk-input-border, #ADADAD);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.dk-sa-other-county-card:hover,
.dk-sa-other-county-card:focus-visible {
    background: var(--dk-yellow, #FFC403);
    border-color: var(--dk-yellow, #FFC403);
    color: #222;
    transform: translateY(-2px);
    text-decoration: none;
}

.dk-sa-other-county-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
}

.dk-sa-other-county-card:hover .dk-sa-other-county-eyebrow,
.dk-sa-other-county-card:focus-visible .dk-sa-other-county-eyebrow {
    color: #222;
}

.dk-sa-other-county-name {
    font-size: 26px;
    margin: 4px 0 6px;
    color: inherit;
}

.dk-sa-other-county-desc {
    margin: 0;
    color: inherit;
    font-size: 16px;
    line-height: 1.5;
}

.dk-sa-other-county-cities {
    margin: 8px 0 0;
    font-size: 14px;
    color: #555;
    line-height: 1.45;
}

.dk-sa-other-county-card:hover .dk-sa-other-county-cities,
.dk-sa-other-county-card:focus-visible .dk-sa-other-county-cities {
    color: #222;
}

.dk-sa-other-county-cta {
    margin-top: auto;
    padding-top: 12px;
    font-weight: 600;
    color: inherit;
}

/* Nearby-cities pills: regular pill <li>s carried a 10px bottom padding (so
   they sat 5px higher than the yellow "View all" pill, whose <li> had none).
   Zero it on every <li> — the ul's `gap` already handles wrap spacing — so
   all pills, yellow one included, sit on the same line. */
.dk-sa-also-pills li {
    padding: 0 !important;
    align-items: center;
}

/* Apply the same hero-gap-zero rule to county taxonomy pages */
body.tax-service-area-county #header-wrapper {
    margin-bottom: 0 !important;
}

body.tax-service-area-county .dk-sa > .dk-sa-section:first-child {
    padding-top: 0 !important;
}

body.tax-service-area-county .dk-sa > .dk-sa-section:first-child .dk-sa-intro-grid {
    padding-top: 64px;
}

/* ============================================================
   Headings: capitalize every word automatically (Title Case via
   CSS, so copy can stay sentence-case in the templates).
   ============================================================ */
.dk-sa-section-title,
.dk-sa-callout-title,
.dk-sa-county-title,
.dk-sa-intro-aside-title {
    text-transform: capitalize;
}