/* nav.css */
/* ─── DL Nav ─────────────────────────────────────────────────────────────── */
.dl-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: var(--color-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition:
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrolled state — add shadow */
.dl-nav.is-scrolled {
    background: var(--color-dark);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.dl-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.375rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-nav.is-scrolled .dl-nav__inner {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Logo */
.dl-nav__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.dl-nav__logo-img {
    width: 145px !important;
    height: auto;
    /* Reserve the logo's height before it loads, so the bar is its final size at
       first paint. Without this the img is 0-tall until the file loads, nav.js
       measures a too-short bar, and the hero reserves too little top space.
       The file was cropped to its artwork (256 x 161), removing about 37 percent
       transparent padding, which shortens the bar without shrinking the logo. */
    aspect-ratio: 256 / 161;
    display: block;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-nav.is-scrolled .dl-nav__logo-img {
    width: 106px !important;
}

.dl-nav__logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-cream);
    line-height: 1.1;
}

.dl-nav__logo-text small {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 400;
    opacity: 0.65;
    display: block;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Desktop links */
.dl-nav__desktop { flex: 1; }

.dl-nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dl-nav__link {
    font-size: var(--fs-small);
    font-weight: var(--fw-med);
    color: var(--color-cream);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.dl-nav__link:hover,
.dl-nav__link.is-active {
    color: var(--color-orange);
}

.dl-nav__link.is-active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Right side */
.dl-nav__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.dl-nav__phone {
    font-size: var(--fs-small);
    font-weight: var(--fw-med);
    color: rgba(245, 240, 227, 0.8);
    text-decoration: none;
    white-space: nowrap;
}
.dl-nav__phone:hover { color: var(--color-orange); }

.dl-nav__cta { font-size: var(--fs-small); padding: 0.625rem 1.25rem; }

/* Hamburger */
.dl-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
}

.dl-nav__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-cream);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Hamburger → X morph */
.dl-nav__hamburger[aria-expanded="true"] .dl-nav__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.dl-nav__hamburger[aria-expanded="true"] .dl-nav__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.dl-nav__hamburger[aria-expanded="true"] .dl-nav__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile overlay — circle expands from hamburger position */
.dl-nav__overlay {
    position: fixed;
    inset: 0;
    background: var(--color-green);
    z-index: 200;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    clip-path: circle(0% at var(--nav-clip-origin, calc(100% - 32px) 32px));
    transition: clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-nav__overlay.is-open {
    clip-path: circle(150% at var(--nav-clip-origin, calc(100% - 32px) 32px));
    pointer-events: auto;
}

/* Link text slide-up */
.dl-nav__link-inner {
    display: block;
    overflow: hidden;
}

.dl-nav__link-text {
    display: block;
    transform: translateY(110%);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.dl-nav__overlay[aria-hidden="false"] .dl-nav__link-text {
    transform: translateY(0);
}

.dl-nav__item:nth-child(1) .dl-nav__link-text { transition-delay: 0.10s, 0s; }
.dl-nav__item:nth-child(2) .dl-nav__link-text { transition-delay: 0.18s, 0s; }
.dl-nav__item:nth-child(3) .dl-nav__link-text { transition-delay: 0.26s, 0s; }
.dl-nav__item:nth-child(4) .dl-nav__link-text { transition-delay: 0.34s, 0s; }
.dl-nav__item:nth-child(5) .dl-nav__link-text { transition-delay: 0.42s, 0s; }

/* Phone + CTA + socials fade in after items */
.dl-nav__mobile-phone,
.dl-nav__overlay-cta,
.dl-nav__socials {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease 0.45s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.dl-nav__overlay.is-open .dl-nav__mobile-phone,
.dl-nav__overlay.is-open .dl-nav__overlay-cta,
.dl-nav__overlay.is-open .dl-nav__socials {
    opacity: 1;
    transform: translateY(0);
}

.dl-nav__overlay-inner {
    display: flex;
    flex-direction: column;
    padding: 5rem 2rem 3rem;
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
}

.dl-nav__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-nav__close-bar {
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--color-cream);
    border-radius: 2px;
}

.dl-nav__close-bar:first-child { transform: rotate(45deg); }
.dl-nav__close-bar:last-child  { transform: rotate(-45deg); }

.dl-nav__mobile-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dl-nav__mobile-link {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-cream);
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(245,240,227,.1);
    text-decoration: none;
}

.dl-nav__mobile-phone {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-orange);
    margin-top: 1.5rem;
    display: block;
}

.dl-nav__overlay-cta { margin-top: 1.5rem; align-self: flex-start; }

/* Social row at the bottom of the mobile menu. Circular cream-outline buttons on
   the green overlay; invert to a filled cream circle on tap/hover. 44px targets. */
.dl-nav__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: auto;
    padding-top: 2rem;
}
.dl-nav__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-cream);
    border: 1px solid rgba(245, 240, 227, 0.28);
    border-radius: 50%;
    text-decoration: none;
    transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.dl-nav__social:hover,
.dl-nav__social:focus-visible {
    color: var(--color-green);
    background: var(--color-cream);
    border-color: var(--color-cream);
}

/* Back to top */
.dl-back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--color-green);
    color: var(--color-cream);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: background var(--duration-fast);
}

.dl-back-to-top:hover { background: var(--color-green-deep); }
.dl-back-to-top[hidden] { display: none; }

@media (max-width: 900px) {
    .dl-nav__desktop { display: none; }
    .dl-nav__phone   { display: none; }
    .dl-nav__hamburger { display: flex; }
    .dl-nav__cta     { display: none; }
    /* Capped smaller on mobile so the fixed header stays a reasonable slice of
       a landscape phone. Desktop keeps its base size, untouched. */
    .dl-nav__logo-img { width: 111px !important; }
    .dl-nav.is-scrolled .dl-nav__logo-img { width: 81px !important; }
}

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dl-nav__li { position: relative; display: flex; align-items: center; gap: 0.15rem; }

.dl-nav__sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: inherit; opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.dl-nav__sub-toggle:hover { opacity: 1; }
.dl-nav__li--has-sub[data-open="true"] .dl-nav__sub-toggle { transform: rotate(180deg); }

.dl-nav__sub {
    position: absolute;
    top: 100%;
    left: -0.75rem;
    min-width: 15rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: var(--color-dark);
    border: 1px solid rgba(245, 240, 227, 0.12);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
}
/* Hover, keyboard focus anywhere inside, or the toggle pressed. */
.dl-nav__li--has-sub:hover .dl-nav__sub,
.dl-nav__li--has-sub:focus-within .dl-nav__sub,
.dl-nav__li--has-sub[data-open="true"] .dl-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Bridges the gap so the menu does not close as the pointer travels to it. */
.dl-nav__li--has-sub::after {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 0.75rem;
}
.dl-nav__sub-link {
    display: block;
    padding: 0.55rem 1.1rem;
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.dl-nav__sub-link:hover,
.dl-nav__sub-link:focus-visible { background: rgba(245, 240, 227, 0.08); color: var(--color-orange); }
.dl-nav__sub-link.is-active { color: var(--color-orange); }

/* ── Mobile accordion ────────────────────────────────────────────────────── */
.dl-nav__mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dl-nav__msub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; flex: none;
    background: none; border: 0; cursor: pointer;
    color: var(--color-cream); opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.dl-nav__msub-toggle[aria-expanded="true"] { transform: rotate(180deg); opacity: 1; }
.dl-nav__msub { list-style: none; margin: 0 0 0.5rem; padding: 0 0 0.25rem 1rem; }
.dl-nav__msub-link {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    text-decoration: none;
    opacity: 0.8;
}
.dl-nav__msub-link:hover, .dl-nav__msub-link:focus-visible { opacity: 1; color: var(--color-orange); }

@media (prefers-reduced-motion: reduce) {
    .dl-nav__sub, .dl-nav__sub-toggle, .dl-nav__msub-toggle { transition: none; }
}

/* hero.css */
/* ─── DL Hero ────────────────────────────────────────────────────────────── */
@keyframes dl-kenburns {
    from { transform: scale(1.0) translate(0, 0); }
    to   { transform: scale(1.1) translate(-1.5%, 1%); }
}

.dl-hero {
    position: relative;
    background-color: var(--color-green);
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Pull the hero up under the fixed nav so the spacer never shows as a bar */
    margin-top: calc(-1 * var(--nav-height, 80px));
}

/* Real <img> background for Ken Burns + GSAP parallax */
.dl-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    will-change: transform;
    animation: dl-kenburns 22s ease-in-out infinite alternate;
}

.dl-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(26, 92, 30, 0.88) 0%,
        rgba(26, 92, 30, 0.60) 55%,
        rgba(26, 92, 30, 0.45) 100%
    );
    z-index: 1;
}

.dl-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex: 1;
    padding: calc(5rem + var(--nav-height, 80px)) 2.5rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Content */
.dl-hero__content { max-width: 540px; }

.dl-hero__eyebrow {
    color: var(--color-cream);
    font-size: var(--fs-label);
    letter-spacing: 0.14em;
    margin-bottom: 1rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.dl-hero__headline {
    color: var(--color-cream);
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.28);
}

.dl-hero__sub {
    color: rgba(245, 240, 227, 0.75);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    margin-bottom: 2rem;
    max-width: 460px;
}

.dl-hero__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Phone badge */
.dl-hero__badge {
    flex-shrink: 0;
}

.dl-hero__badge-inner {
    background: rgba(245, 240, 227, 0.1);
    border: 1px solid rgba(245, 240, 227, 0.2);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    text-align: center;
    backdrop-filter: blur(4px);
}

.dl-hero__badge-lic {
    color: rgba(245, 240, 227, 0.55);
    margin-bottom: 0.5rem;
    font-size: var(--fs-label);
}

.dl-hero__badge-phone {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    color: var(--color-cream);
    text-decoration: none;
    line-height: 1;
}

.dl-hero__badge-phone:hover { color: var(--color-orange); }

.dl-hero__badge-sub {
    font-size: var(--fs-caption);
    color: rgba(245, 240, 227, 0.5);
    margin-top: 0.5rem;
}

/* Trust bar */
.dl-hero__trust {
    position: relative;
    z-index: 2;
    background: var(--color-dark);
    padding: 0.875rem 2.5rem;
    display: flex;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.dl-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-cream);
    font-size: var(--fs-small);
    opacity: 0.8;
}

.dl-hero__trust-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-orange);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .dl-hero__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: calc(4rem + var(--nav-height, 80px)) 1.5rem 2rem;
        gap: 2rem;
    }
    .dl-hero__badge { width: 100%; }
    .dl-hero__badge-inner { text-align: left; padding: 1.25rem 1.5rem; }
    .dl-hero__trust { padding: 0.875rem 1.5rem; gap: 1.25rem; justify-content: flex-start; }
}

@media (max-width: 600px) {
    /* Height follows content instead of a fixed 70vh, so a short city hub
       headline is not marooned in empty green and a long money page headline
       is not cramped. */
    .dl-hero { min-height: auto; }

    /* A vertical overlay keeps every line readable top to bottom. The diagonal
       one faded to 45 percent opacity right under the lower content, which is
       where the sub and phone bar sit on a phone. */
    .dl-hero__overlay {
        background: linear-gradient(180deg,
            rgba(26, 92, 30, 0.88) 0%,
            rgba(26, 92, 30, 0.70) 55%,
            rgba(26, 92, 30, 0.82) 100%);
    }

    .dl-hero__inner {
        padding: calc(1.75rem + var(--nav-height, 80px)) 1.25rem 1.6rem;
        gap: 1.35rem;
    }
    .dl-hero__content { max-width: 100%; }

    /* The headline clamp floor was 2.25rem, far too large for a long "Service
       in City, CA" line. Cap it so it reads as a headline, not a wall of text. */
    .dl-hero__headline {
        font-size: clamp(1.7rem, 8.5vw, 2.15rem);
        line-height: 1.12;
        margin-bottom: 0.8rem;
    }
    .dl-hero__eyebrow { margin-bottom: 0.55rem; }

    /* Brighter and a touch larger so the sub is comfortable to read on a phone
       over the photo. */
    .dl-hero__sub {
        color: rgba(245, 240, 227, 0.94);
        font-size: 1rem;
        line-height: 1.55;
        margin-bottom: 1.35rem;
        max-width: 100%;
    }

    /* Full width, evenly split, properly tappable buttons. */
    .dl-hero__ctas { gap: 0.7rem; width: 100%; }
    .dl-hero__ctas .dl-btn {
        flex: 1 1 46%;
        justify-content: center;
        text-align: center;
        padding: 0.9rem 1rem;
    }

    /* Tighter phone bar, kept stacked, with the number on its own line and
       locked to a single line so it can never be clipped or wrapped. */
    .dl-hero__badge-inner { display: block; padding: 0.9rem 1.1rem; }
    .dl-hero__badge-phone { font-size: 1.5rem; white-space: nowrap; }

    /* Keep only the two strongest trust items on a narrow row. */
    .dl-hero__trust-item:nth-child(n+3) { display: none; }

    /* Ken Burns is subtle enough to keep on mobile; tone down scale slightly. */
    @keyframes dl-kenburns { from { transform: scale(1.0); } to { transform: scale(1.06); } }
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.dl-crumbs {
    margin-bottom: 1rem;
}
.dl-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    letter-spacing: 0.01em;
}
.dl-crumbs__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(245, 240, 227, 0.72);
}
.dl-crumbs__item + .dl-crumbs__item::before {
    content: "";
    width: 5px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    flex: none;
}
.dl-crumbs__item a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.dl-crumbs__item a:hover,
.dl-crumbs__item a:focus-visible {
    color: var(--color-cream);
    border-bottom-color: currentColor;
}
.dl-crumbs__item--current {
    color: var(--color-cream);
}
@media (max-width: 600px) {
    .dl-crumbs__list { font-size: 0.75rem; gap: 0.1rem 0.55rem; }
    .dl-crumbs__item a { display: inline-block; padding: 0.35rem 0; }
}

/* Stop the continuous Ken Burns zoom on phones: it holds a full viewport
   compositor layer and drains battery for an effect few notice on mobile.
   The parallax already only runs at 768px and up. */
@media (max-width: 600px) {
    .dl-hero__bg { animation: none; will-change: auto; }
}

/* The mobile and tablet hero is content-sized (min-height:auto), so height:100%
   on the background image cannot resolve, and the photo collapses to its own
   proportions at the top over bare green. Stretch it to fill the inset box. */
@media (max-width: 900px) {
    .dl-hero__bg { height: auto; min-height: 100%; }
}

/* A phone in landscape (up to 900px wide but very short) would otherwise get
   the desktop hero, which is almost all padding on a 375px tall screen. */
@media (max-width: 900px) and (orientation: landscape) {
    .dl-hero { min-height: auto; }
    .dl-hero__inner { padding: calc(1.5rem + var(--nav-height, 68px)) 1.5rem 1.5rem; }
}

/* intro.css */
/* ─── DL Intro ───────────────────────────────────────────────────────────── */
.dl-intro {
    background: var(--color-cream);
    padding: clamp(2.75rem, 8vw, 5rem) 0;
}

.dl-intro__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dl-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.dl-intro__eyebrow {
    color: var(--color-orange);
    margin-bottom: 0.75rem;
}

.dl-intro__heading {
    color: var(--color-green);
    margin-bottom: 1rem;
}

.dl-intro__body {
    color: var(--color-text);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    margin-bottom: 2rem;
}

.dl-intro__body p { margin-bottom: 0.75rem; }

/* Stats grid */
.dl-intro__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.dl-intro__stat {
    background: white;
    border-radius: 8px;
    padding: 1.125rem 1.25rem;
    border-left: 3px solid var(--color-orange);
}

.dl-intro__stat-num {
    color: var(--color-green);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.dl-intro__stat-label {
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
}

/* Media */
.dl-intro__media {
    overflow: hidden;
    border-radius: 12px;
}

.dl-intro__img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.7s var(--ease-out);
    will-change: transform;
}

.dl-intro__media:hover .dl-intro__img {
    transform: scale(1.04);
}

.dl-intro__img-placeholder {
    width: 100%;
    height: 360px;
    background: var(--color-green-mid);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35;
}

.dl-intro__img-placeholder span {
    color: white;
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .dl-intro__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .dl-intro__media { order: -1; }
    .dl-intro__img,
    .dl-intro__img-placeholder { height: 260px; }
}

/* about.css */
/* ─── DL About ────────────────────────────────────────────────────────────── */
.dl-about {
    background: var(--color-cream);
}

/* ── Hero ── */
.dl-about__hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    background-color: var(--color-green);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dl-about__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(26, 92, 30, 0.9) 0%,
        rgba(26, 92, 30, 0.65) 50%,
        rgba(26, 92, 30, 0.5) 100%
    );
}

.dl-about__hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}

.dl-about__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-med);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin: 0 0 1rem;
}

.dl-about__heading {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-cream);
    margin: 0 0 1.25rem;
    line-height: 1.05;
}

.dl-about__sub {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(245, 240, 227, 0.75);
    max-width: 560px;
    line-height: 1.6;
    margin: 0;
}

/* ── Stats ── */
.dl-about__stats {
    background: var(--color-green);
    padding: clamp(3rem, 5vw, 4rem) 0;
}

.dl-about__stats-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

@media (max-width: 768px) {
    .dl-about__stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }
}

@media (max-width: 400px) {
    .dl-about__stats-inner {
        grid-template-columns: 1fr 1fr;
    }
}

.dl-about__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.dl-about__stat-number {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-orange);
    line-height: 1;
    display: block;
}

.dl-about__stat-label {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-med);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245, 240, 227, 0.65);
    text-align: center;
    line-height: 1.3;
}

/* ── Story ── */
.dl-about__story {
    padding: clamp(5rem, 10vw, 8rem) 0;
}

.dl-about__story-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

@media (max-width: 768px) {
    .dl-about__story-inner {
        grid-template-columns: 1fr;
    }
}

.dl-about__story-heading {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-green);
    margin: 0 0 1.5rem;
    line-height: 1.1;
}

.dl-about__story-body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-stone);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.dl-about__story-body p {
    margin-bottom: 1.25rem;
}

.dl-about__story-body p:last-child {
    margin-bottom: 0;
}

.dl-about__story-img-wrap {
    position: relative;
}

.dl-about__story-img-wrap::before {
    content: '';
    position: absolute;
    inset: -12px -12px 12px 12px;
    border: 2px solid var(--color-orange);
    pointer-events: none;
    z-index: 0;
}

.dl-about__story-img {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

/* services.css */
/* ─── DL Services (Homepage) ─────────────────────────────────────────────── */
.dl-services {
    background: var(--color-cream-dark);
    padding: clamp(2.75rem, 8vw, 5rem) 0;
}

.dl-services__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dl-services__header {
    text-align: center;
    margin-bottom: 3rem;
}

.dl-services__eyebrow {
    color: var(--color-orange);
    margin-bottom: 0.625rem;
}

.dl-services__heading {
    color: var(--color-green);
    margin-bottom: 0.75rem;
}

.dl-services__sub {
    color: var(--color-text-muted);
    font-size: var(--fs-body-lg);
    max-width: 520px;
    margin: 0 auto;
}

/* 4-column grid */
.dl-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dl-services__card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
    border: 0.5px solid var(--color-divider);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}

.dl-services__card:hover {
    box-shadow: 0 4px 16px rgba(26, 92, 30, 0.1);
    transform: translateY(-2px);
}

.dl-services__card-icon {
    width: 44px;
    height: 44px;
    background: rgba(46, 122, 31, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-green-mid);
    flex-shrink: 0;
}

.dl-services__card-name {
    font-size: var(--fs-h3);
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.dl-services__card-desc {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: 1rem;
    flex: 1;
}

.dl-services__card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--color-orange);
    text-decoration: none;
    margin-top: auto;
    transition: gap var(--duration-fast);
}

.dl-services__card-link:hover { gap: 0.625rem; }

.dl-services__cta {
    text-align: center;
    margin-top: 2.5rem;
}

@media (max-width: 1100px) {
    .dl-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .dl-services__grid { grid-template-columns: 1fr; }
}

/* services-hub.css */
/* ─── DL Services Hub (page) ─────────────────────────────────────────────── */
.dl-services-hub__hero {
    background: var(--color-green);
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem;
    position: relative;
}

.dl-services-hub__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(26, 92, 30, 0.90) 0%,
        rgba(26, 92, 30, 0.62) 55%,
        rgba(26, 92, 30, 0.42) 100%
    );
}

.dl-services-hub__hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.dl-services-hub__eyebrow { color: rgba(245, 240, 227, 0.85); margin-bottom: 0.75rem; }
.dl-services-hub__heading { color: var(--color-cream); margin-bottom: 0.875rem; }
.dl-services-hub__sub     { color: rgba(245,240,227,.75); font-size: var(--fs-body-lg); }

/* Body */
.dl-services-hub__body { background: var(--color-cream); padding: clamp(2.75rem, 8vw, 5rem) 0; }

.dl-services-hub__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dl-services-hub__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dl-services-hub__card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    border: 0.5px solid var(--color-divider);
}

.dl-services-hub__name {
    color: var(--color-green);
    margin-bottom: 0.625rem;
}

.dl-services-hub__desc {
    font-size: var(--fs-body);
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: var(--lh-body);
}

.dl-services-hub__sub-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
    padding: 0;
}

.dl-services-hub__sub-list li {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    padding-left: 1rem;
    position: relative;
}

.dl-services-hub__sub-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-orange);
    font-size: 0.75rem;
}

.dl-services-hub__cta-link {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--color-orange);
}

.dl-services-hub__cta-link:hover { text-decoration: underline; }

.dl-services-hub__empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--color-text-muted);
    font-size: var(--fs-body-lg);
    background: var(--color-cream-dark);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.dl-services-hub__quote-cta { text-align: center; margin-top: 3rem; }

@media (max-width: 700px) {
    .dl-services-hub__grid { grid-template-columns: 1fr; }
}

/* service-single.css */
/* ─── DL Service Single ──────────────────────────────────────────────────── */
.dl-service-single__header {
    background: var(--color-green);
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem 4rem;
    position: relative;
}

.dl-service-single__header-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 92, 30, 0.75);
}

.dl-service-single__header-inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.dl-service-single__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(245,240,227,.6);
    font-size: var(--fs-label);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: color var(--duration-fast);
}

.dl-service-single__back:hover { color: var(--color-cream); }

.dl-service-single__title   { color: var(--color-cream); margin-bottom: 0.75rem; }
.dl-service-single__excerpt { color: rgba(245,240,227,.75); font-size: var(--fs-body-lg); }

/* Body */
.dl-service-single__body {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.dl-service-single__content {
    font-size: var(--fs-body-lg);
    color: var(--color-text);
    line-height: var(--lh-body);
    margin-bottom: 3rem;
}

.dl-service-single__content p { margin-bottom: 1rem; }
.dl-service-single__content h2,
.dl-service-single__content h3 { color: var(--color-green); margin-bottom: 0.625rem; margin-top: 1.5rem; }

/* Sub services */
.dl-service-single__sub-services { margin-bottom: 3rem; }

.dl-service-single__sub-heading {
    color: var(--color-green);
    margin-bottom: 1rem;
}

.dl-service-single__sub-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0;
}

.dl-service-single__sub-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-body);
    color: var(--color-text);
}

.dl-service-single__check {
    color: var(--color-green-mid);
    font-size: 0.875rem;
    font-weight: 700;
}

.dl-service-single__cta { margin-top: 1rem; }

.dl-service-single__empty {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    .dl-service-single__sub-list { grid-template-columns: 1fr; }
}

/* before-after.css */
/* ─── DL Before / After ──────────────────────────────────────────────────── */
.dl-ba {
    background: var(--color-green);
    padding: clamp(2.75rem, 8vw, 5rem) 0;
}

.dl-ba__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dl-ba__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.dl-ba__eyebrow { color: rgba(245, 240, 227, 0.85); margin-bottom: 0.625rem; }
.dl-ba__heading { color: var(--color-cream); margin-bottom: 0.625rem; }
.dl-ba__sub     { color: rgba(245, 240, 227, 0.6); font-size: var(--fs-body); }

/* Grid */
.dl-ba__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.dl-ba__card {
    /* Must be a real step darker than the section, or the card edges vanish. */
    background: var(--color-green-deep);
    border-radius: 10px;
    overflow: hidden;
}

/* Showcase (after-only, full-width) */
.dl-ba__showcase {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.dl-ba__showcase .dl-ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    pointer-events: none;
}

/* Slider container */
.dl-ba__slider {
    position: relative;
    height: 220px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    /* Let the browser own vertical scrolling and pinch zoom; JS only scrubs on a
       horizontal drag. pan-y alone would block zoom for low vision users. */
    touch-action: pan-y pinch-zoom;
}

/* Before layer — sits behind, full width */
.dl-ba__before {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.2);
    overflow: hidden;
}

/* After layer — clips from left via --dl-ba-pos CSS var */
.dl-ba__after {
    position: absolute;
    inset: 0;
    background: rgba(46, 122, 31, .3);
    overflow: hidden;
    clip-path: inset(0 0 0 var(--dl-ba-pos, 50%));
}

.dl-ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.dl-ba__img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-ba__img-placeholder span {
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}

/* Pills */
.dl-ba__pill {
    position: absolute;
    top: 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    z-index: 2;
}

.dl-ba__pill--before {
    left: 0.625rem;
    background: rgba(0,0,0,.5);
    color: rgba(255,255,255,.85);
}

.dl-ba__pill--after {
    right: 0.625rem;
    background: var(--color-orange);
    color: white;
}

/* Handle */
.dl-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--dl-ba-pos, 50%);
    transform: translateX(-50%);
    width: 2px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.dl-ba__handle-line {
    flex: 1;
    width: 2px;
    background: white;
}

.dl-ba__handle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green);
    flex-shrink: 0;
    cursor: ew-resize;
    pointer-events: auto;
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
}

/* Invisible 46px hit area for touch, without enlarging the visible 36px circle. */
.dl-ba__handle-btn::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
}

/* Meta */
.dl-ba__meta { padding: 1rem 1.25rem; }

.dl-ba__title {
    font-size: var(--fs-h3);
    color: var(--color-cream);
    margin-bottom: 0.25rem;
}

.dl-ba__city { color: rgba(245, 240, 227, 0.5); }

/* Empty state */
.dl-ba__empty {
    text-align: center;
    padding: 3rem 2rem;
    color: rgba(245, 240, 227, 0.6);
    font-size: var(--fs-body-lg);
    margin-bottom: 2rem;
}

/* CTA */
.dl-ba__cta {
    text-align: center;
    margin-top: 2.5rem;
}

@media (max-width: 900px) {
    .dl-ba__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* gallery.css */
/* ─── DL Gallery ─────────────────────────────────────────────────────────── */

/* Hero */
.dl-gallery__hero {
    background: var(--color-green);
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem 4rem;
    position: relative;
}

.dl-gallery__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(26, 92, 30, 0.88) 0%,
        rgba(26, 92, 30, 0.60) 55%,
        rgba(26, 92, 30, 0.40) 100%
    );
}

.dl-gallery__hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.dl-gallery__eyebrow { color: rgba(245, 240, 227, 0.85); margin-bottom: 0.625rem; }
.dl-gallery__heading { color: var(--color-cream); margin-bottom: 0.75rem; }
.dl-gallery__sub     { color: rgba(245, 240, 227, 0.72); font-size: var(--fs-body-lg); }

/* Body */
.dl-gallery__body { background: var(--color-cream); padding: clamp(2.75rem, 8vw, 5rem) 0; }

.dl-gallery__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Filters ── */
.dl-gallery__filters {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.dl-gallery__filter {
    background: white;
    border: 1.5px solid var(--color-divider);
    border-radius: 4px;
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-med);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.dl-gallery__filter:hover {
    border-color: var(--color-green);
    color: var(--color-green);
}

.dl-gallery__filter.is-active {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-cream);
}

/* ── Grid ── */
.dl-gallery__grid {
    display: grid;
    gap: 1.5rem;
}

.dl-gallery__grid--3col { grid-template-columns: repeat(3, 1fr); }
.dl-gallery__grid--2col { grid-template-columns: repeat(2, 1fr); }

/* Hidden cards during filter */
.dl-gallery__card[hidden] { display: none; }

/* ── Card ── */
.dl-gallery__card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 0.5px solid var(--color-divider);
}

/* ── Showcase (after-only, full-width) ── */
.dl-gallery__showcase {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.dl-gallery__showcase .dl-gallery__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    pointer-events: none;
    transition: transform 0.7s ease;
}

.dl-gallery__showcase:hover .dl-gallery__img {
    transform: scale(1.04);
}

/* ── Slider (same mechanics as before-after widget) ── */
.dl-gallery__slider {
    position: relative;
    height: 260px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    /* Let the browser own vertical scrolling and pinch zoom; JS only scrubs on a
       horizontal drag. pan-y alone would block zoom for low vision users. */
    touch-action: pan-y pinch-zoom;
}

.dl-gallery__before {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .15);
    overflow: hidden;
}

.dl-gallery__after {
    position: absolute;
    inset: 0;
    background: rgba(46, 122, 31, .2);
    overflow: hidden;
    clip-path: inset(0 0 0 var(--dl-ba-pos, 50%));
}

.dl-gallery__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    pointer-events: none;
}

/* Elementor's `.elementor img { height:auto }` (0,0,1,1) outspecifies the single
   class rule above and let short/wide crops size by their aspect ratio, leaving a
   gap below them in the fixed-height slider box. Match it with two classes so the
   before/after images always fill the box and object-fit:cover crops instead. */
.dl-gallery__before .dl-gallery__img,
.dl-gallery__after .dl-gallery__img {
    width: 100%;
    height: 100%;
}

.dl-gallery__img-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-divider);
}

.dl-gallery__img-ph span {
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.dl-gallery__img-ph--after { background: rgba(46, 122, 31, 0.12); }

/* Pills */
.dl-gallery__pill {
    position: absolute;
    top: 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    z-index: 2;
}

.dl-gallery__pill--before {
    left: 0.625rem;
    background: rgba(0, 0, 0, .45);
    color: rgba(255, 255, 255, .85);
}

.dl-gallery__pill--after {
    right: 0.625rem;
    background: var(--color-orange);
    color: white;
}

/* Handle */
.dl-gallery__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--dl-ba-pos, 50%);
    transform: translateX(-50%);
    width: 2px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.dl-gallery__handle-line {
    flex: 1;
    width: 2px;
    background: white;
}

.dl-gallery__handle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green);
    flex-shrink: 0;
    cursor: ew-resize;
    pointer-events: auto;
    position: relative;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

/* Invisible 46px hit area for touch, without enlarging the visible 36px circle. */
.dl-gallery__handle-btn::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
}

/* Meta */
.dl-gallery__meta {
    padding: 1.125rem 1.25rem;
}

.dl-gallery__title {
    color: var(--color-dark);
    margin-bottom: 0.5rem;
}

.dl-gallery__meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dl-gallery__tag {
    display: inline-block;
    background: rgba(46, 122, 31, 0.1);
    color: var(--color-green-mid);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}

.dl-gallery__city { color: var(--color-text-muted); }

/* Empty state */
.dl-gallery__empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text-muted);
    font-size: var(--fs-body-lg);
}

/* CTA */
.dl-gallery__cta {
    text-align: center;
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid var(--color-divider);
}

.dl-gallery__cta-label {
    font-size: var(--fs-body-lg);
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

/* "See more of our work" social row under the gallery. Soft green icon chips on
   the cream body; fill green on tap/hover. Centered, wraps, 46px touch targets. */
.dl-gallery__socials {
    text-align: center;
    margin-top: 2.5rem;
}
.dl-gallery__socials-label {
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.dl-gallery__socials-row {
    display: inline-flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.dl-gallery__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--color-green);
    background: rgba(26, 92, 30, 0.06);
    border-radius: 50%;
    text-decoration: none;
    transition: color var(--duration-fast), background var(--duration-fast);
}
.dl-gallery__social:hover,
.dl-gallery__social:focus-visible {
    color: var(--color-cream);
    background: var(--color-green);
}

/* Responsive */
@media (max-width: 900px) {
    .dl-gallery__grid--3col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .dl-gallery__grid--3col,
    .dl-gallery__grid--2col { grid-template-columns: 1fr; }
    .dl-gallery__slider { height: 220px; }
}

/* quote.css */
/* ─── DL Quote Form ───────────────────────────────────────────────────────── */

/* Hero */
.dl-quote__hero {
    background: var(--color-green);
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem 4rem;
    position: relative;
}

.dl-quote__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(26, 92, 30, 0.88) 0%,
        rgba(26, 92, 30, 0.60) 55%,
        rgba(26, 92, 30, 0.40) 100%
    );
}

.dl-quote__hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.dl-quote__hero-eyebrow { color: var(--color-orange); margin-bottom: 0.625rem; }
.dl-quote__hero-heading { color: var(--color-cream); margin-bottom: 0.75rem; }
.dl-quote__hero-sub     { color: rgba(245, 240, 227, 0.72); font-size: var(--fs-body-lg); }

/* Body */
.dl-quote__body { background: var(--color-cream); padding: clamp(2.75rem, 8vw, 5rem) 0; }

.dl-quote__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dl-quote__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Copy side */
.dl-quote__eyebrow { color: rgba(245, 240, 227, 0.85); margin-bottom: 0.625rem; }
.dl-quote__heading { color: var(--color-green); margin-bottom: 1rem; }

.dl-quote__body-text {
    font-size: var(--fs-body-lg);
    color: var(--color-text);
    line-height: var(--lh-body);
    margin-bottom: 1.75rem;
}

.dl-quote__bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.dl-quote__bullet {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--fs-body);
    color: var(--color-text);
}

.dl-quote__bullet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-orange);
    flex-shrink: 0;
    margin-top: 0.45em;
}

.dl-quote__phone {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-green);
    text-decoration: none;
}

.dl-quote__phone:hover { color: var(--color-orange); }

/* Form side */
.dl-quote__form-wrap {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    border: 0.5px solid var(--color-divider);
}

.dl-quote__form-heading {
    color: var(--color-green);
    margin-bottom: 1.5rem;
}

.dl-quote__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.dl-quote__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.dl-quote__field label {
    font-size: var(--fs-small);
    font-weight: var(--fw-med);
    color: var(--color-text-muted);
}

.dl-quote__field input,
.dl-quote__field select,
.dl-quote__field textarea {
    border: 0.5px solid var(--color-divider);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: var(--fs-small);
    font-family: var(--font-body);
    color: var(--color-text);
    background: #fafaf8;
    transition: border-color var(--duration-fast);
    width: 100%;
}

.dl-quote__field input:focus,
.dl-quote__field select:focus,
.dl-quote__field textarea:focus {
    outline: none;
    border-color: var(--color-green-mid);
    background: white;
    /* Visible focus ring for keyboard and switch users. */
    box-shadow: 0 0 0 3px rgba(26, 92, 30, 0.22);
}

.dl-quote__field textarea { resize: vertical; min-height: 100px; }

/* Honeypot. Off screen rather than display:none or visibility:hidden, both of
   which better bots check for and skip. Screen readers skip it via aria-hidden
   on the wrapper, and tabindex="-1" keeps it out of the keyboard order. */
.dl-quote__hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dl-quote__submit {
    width: 100%;
    background: var(--color-green);
    border-color: var(--color-green);
    font-size: var(--fs-body);
    padding: 0.875rem;
    cursor: pointer;
}

.dl-quote__submit:hover {
    background: var(--color-green-deep);
    border-color: var(--color-green-deep);
}

.dl-quote__success {
    color: var(--color-green-mid);
    font-size: var(--fs-small);
    font-weight: var(--fw-med);
    margin-top: 0.75rem;
    text-align: center;
}

.dl-quote__error {
    color: #c0392b;
    font-size: var(--fs-small);
    margin-top: 0.75rem;
    text-align: center;
}

@media (max-width: 900px) {
    .dl-quote__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .dl-quote__row  { grid-template-columns: 1fr; }
    /* 16px minimum so iOS does not auto-zoom the page when a field is focused.
       Also lifts the control above the 44px touch target. */
    .dl-quote__field input,
    .dl-quote__field select,
    .dl-quote__field textarea {
        font-size: 1rem;
        padding: 0.75rem 0.875rem;
    }
}

/* faq.css */
/* ─── DL FAQ ─────────────────────────────────────────────────────────────── */

/* Hero */
.dl-faq__hero {
    background: var(--color-green);
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem 4rem;
    position: relative;
}

.dl-faq__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(26, 92, 30, 0.88) 0%,
        rgba(26, 92, 30, 0.60) 55%,
        rgba(26, 92, 30, 0.40) 100%
    );
}

.dl-faq__hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.dl-faq__eyebrow { color: rgba(245, 240, 227, 0.85); margin-bottom: 0.625rem; }
.dl-faq__heading { color: var(--color-cream); margin-bottom: 0.75rem; }
.dl-faq__sub     { color: rgba(245, 240, 227, 0.72); font-size: var(--fs-body-lg); }

/* Body */
.dl-faq__body {
    background: var(--color-cream-dark);
    padding: clamp(2.75rem, 8vw, 5rem) 0;
}

.dl-faq__inner {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Accordion */
.dl-faq__list { display: flex; flex-direction: column; }

.dl-faq__item {
    border-bottom: 1px solid var(--color-divider);
}

.dl-faq__item:first-child { border-top: 1px solid var(--color-divider); }

.dl-faq__question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: color var(--duration-fast);
    /* Elementor's reset.css sets white-space: nowrap on every button, so a long
       question ran off the right edge on a phone instead of wrapping. */
    white-space: normal;
}

/* The question text is the flex item that must give way, not the icon. Without
   min-width the flex default floor keeps it at its full single-line width. */
.dl-faq__question > span:first-child {
    min-width: 0;
    overflow-wrap: break-word;
}

.dl-faq__question:hover { color: var(--color-green); }

.dl-faq__question[aria-expanded="true"] { color: var(--color-green); }

/* Keep the button transparent in every state so no browser or extension focus style can paint it */
.dl-faq__question,
.dl-faq__question:focus,
.dl-faq__question:active,
.dl-faq__question[aria-expanded="true"] {
    background: none !important;
    box-shadow: none !important;
}
.dl-faq__question:focus { outline: none; }
.dl-faq__question:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 3px;
    border-radius: 4px;
}

.dl-faq__icon {
    flex-shrink: 0;
    color: var(--color-orange);
}

/* Hide minus by default */
.dl-faq__icon-minus { display: none; }

.dl-faq__question[aria-expanded="true"] .dl-faq__icon-plus  { display: none; }
.dl-faq__question[aria-expanded="true"] .dl-faq__icon-minus { display: block; }

.dl-faq__answer {
    padding-bottom: 1.25rem;
    font-size: var(--fs-body-lg);
    color: var(--color-text);
    line-height: var(--lh-body);
}

.dl-faq__answer[hidden] { display: none; }

.dl-faq__cta { text-align: center; margin-top: 3rem; }

/* The question is wrapped in a heading so it lands in the document outline.
   It must not inherit heading typography, the button already carries all of it. */
.dl-faq__q-heading {
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: none;
}

/* contact.css */
.dl-contact { background: var(--color-cream); padding: clamp(3.5rem, 9vw, 6rem) 1.5rem; }
.dl-contact__inner {
    max-width: 75rem; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.dl-contact__heading { color: var(--color-green); margin: 0 0 1rem; }
.dl-contact__lead { font-size: var(--fs-body-lg); color: var(--color-text); margin: 0 0 2rem; }
.dl-contact__lead a { color: var(--color-green); font-weight: var(--fw-bold); text-decoration: none; }
.dl-contact__lead a:hover { color: var(--color-orange); }

.dl-contact__nap {
    display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem;
    margin: 0 0 2.5rem; padding: 1.5rem 0;
    border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
}
.dl-contact__nap dt {
    font-family: var(--font-body); font-size: var(--fs-label);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted);
    padding-top: 0.15rem;
}
.dl-contact__nap dd { margin: 0; color: var(--color-text); font-size: var(--fs-body); }
.dl-contact__nap dd a { color: var(--color-green); text-decoration: none; font-weight: var(--fw-med); }
.dl-contact__nap dd a:hover { color: var(--color-orange); text-decoration: underline; }
.dl-contact__biz { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: 0.02em; color: var(--color-green); }

.dl-contact__sub { color: var(--color-green); margin: 0 0 0.6rem; }
.dl-contact__area { color: var(--color-text-muted); margin: 0 0 2rem; }
.dl-contact__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.dl-contact__map { position: relative; }
.dl-contact__map iframe {
    display: block; width: 100%; height: 100%; min-height: 26rem;
    border-radius: 4px; box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}
@media (max-width: 900px) {
    .dl-contact__inner { grid-template-columns: 1fr; }
    .dl-contact__map iframe { min-height: 20rem; }
}

/* article.css */
.dl-article { background: var(--color-cream); padding: clamp(3rem, 8vw, 5.5rem) 1.5rem; }
.dl-article__inner { max-width: 44rem; margin: 0 auto; }

.dl-article__lead p {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 1.1rem;
}
.dl-article__lead p:first-child { font-weight: var(--fw-med); }

.dl-article__meta {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-divider);
    font-size: var(--fs-caption);
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.dl-article__section { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.dl-article__heading { color: var(--color-green); margin: 0 0 1rem; }
.dl-article__section p {
    font-size: var(--fs-body-lg);
    line-height: 1.72;
    color: var(--color-text);
    margin: 0 0 1.15rem;
}
.dl-article__section a { color: var(--color-green); text-decoration: underline; text-underline-offset: 2px; }
.dl-article__section a:hover { color: var(--color-orange); }

/* Key takeaways: the scannable, AI-extractable summary near the top */
.dl-article__takeaways {
    margin: 1.9rem 0 0;
    padding: 1.4rem 1.6rem;
    background: var(--color-cream-dark);
    border: 1px solid var(--color-divider);
    border-radius: 5px;
}
.dl-article__takeaways-label {
    color: var(--color-green);
    margin: 0 0 0.7rem;
    font-size: var(--fs-label);
}
.dl-article__takeaways-list { margin: 0; padding-left: 1.15rem; }
.dl-article__takeaways-list li {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}
.dl-article__takeaways-list li:last-child { margin-bottom: 0; }

/* In-section list, used where a checklist or ordered steps genuinely help */
.dl-article__list { margin: 0.4rem 0 1.15rem; padding-left: 1.2rem; }
.dl-article__list li {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}
.dl-article__list a { color: var(--color-green); text-decoration: underline; text-underline-offset: 2px; }

/* Comparison table: high-value citable block; scrolls sideways on phones */
.dl-article__table-wrap {
    margin: 1.5rem 0 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-divider);
    border-radius: 5px;
}
.dl-article__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
    min-width: 30rem;
}
.dl-article__table th,
.dl-article__table td {
    text-align: left;
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--color-divider);
    line-height: 1.45;
    vertical-align: top;
}
.dl-article__table thead th {
    background: var(--color-green);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-weight: 700;
}
.dl-article__table tbody tr:last-child td { border-bottom: 0; }
.dl-article__table tbody tr:nth-child(even) td { background: var(--color-cream-dark); }
.dl-article__table td:first-child { font-weight: var(--fw-med); }

.dl-article__callout {
    margin: 1.75rem 0 0;
    padding: 1.15rem 1.4rem;
    background: var(--color-cream-dark);
    border-left: 3px solid var(--color-orange);
    border-radius: 0 3px 3px 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--color-text);
}

.dl-article__cta {
    margin-top: clamp(3rem, 7vw, 4.5rem);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: var(--color-green);
    border-radius: 4px;
    text-align: center;
}
.dl-article__cta-heading { color: var(--color-cream); margin: 0 0 0.6rem; }
.dl-article__cta p { color: rgba(245,240,227,0.85); margin: 0 0 1.5rem; font-size: var(--fs-body); }

/* Service-area links: the service page's funnel down to its money pages */
.dl-silo-areas {
    margin-top: clamp(2.5rem, 6vw, 3.75rem);
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid var(--color-divider);
}
.dl-silo-areas__heading { color: var(--color-green); margin: 0 0 0.6rem; }
.dl-silo-areas__lead { color: var(--color-text-muted); margin: 0 0 1.25rem; font-size: var(--fs-body); }
.dl-silo-areas__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.5rem 1.5rem;
}
.dl-silo-areas__list a {
    display: block; padding: 0.5rem 0;
    color: var(--color-green); font-weight: var(--fw-med); text-decoration: none;
    border-bottom: 1px solid transparent;
}
.dl-silo-areas__list a:hover { color: var(--color-orange); border-bottom-color: currentColor; }

/* Hand-built inline SVG diagrams */
.dl-diagram { margin: 1.75rem 0 0; }
.dl-diagram__svg {
    display: block; width: 100%; height: auto; max-width: 40rem;
    border: 1px solid var(--color-divider); border-radius: 4px;
    background: var(--color-cream);
}
.dl-diagram__cap {
    margin: 0.6rem 0 0; font-size: var(--fs-caption); color: var(--color-text-muted); line-height: 1.5;
}

/* On phones the 640-wide diagrams would otherwise shrink until their labels
   land near 5px. Keep them full size and let the figure scroll sideways.
   43rem is the exact switch point: below it the column is narrower than 640. */
@media (max-width: 43rem) {
    .dl-diagram {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .dl-diagram__svg { width: 640px; max-width: none; }
}

/* service-area.css */
/* ─── DL Service Area ────────────────────────────────────────────────────── */

/* Hero */
.dl-area__hero {
    background: var(--color-green);
    background-size: cover;
    background-position: center;
    padding: 6rem 2rem 4rem;
    position: relative;
}

.dl-area__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(26, 92, 30, 0.88) 0%,
        rgba(26, 92, 30, 0.60) 55%,
        rgba(26, 92, 30, 0.40) 100%
    );
}

.dl-area__hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.dl-area__eyebrow { color: rgba(245, 240, 227, 0.85); margin-bottom: 0.625rem; }
.dl-area__heading { color: var(--color-cream); margin-bottom: 0.75rem; }

.dl-area__sub {
    color: rgba(245, 240, 227, 0.72);
    font-size: var(--fs-body-lg);
}

/* Body */
.dl-area__body {
    /* A step darker than the hero band above, so the two do not read as one slab. */
    background: var(--color-green-deep);
    padding: clamp(2.75rem, 8vw, 5rem) 0;
}

.dl-area__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dl-area__intro {
    color: rgba(245, 240, 227, 0.8);
    font-size: var(--fs-body-lg);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    line-height: var(--lh-body);
    text-align: center;
}

/* Three columns */
.dl-area__columns {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.dl-area__col { min-width: 160px; }

.dl-area__col-label {
    color: var(--color-orange);
    margin-bottom: 1rem;
}

.dl-area__city-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}

.dl-area__city-list li {
    font-size: var(--fs-body);
    color: rgba(245, 240, 227, 0.8);
    padding-left: 0.875rem;
    position: relative;
}

.dl-area__city-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-orange);
    opacity: 0.65;
}

.dl-area__cta { text-align: center; margin-top: 3rem; }

/* service-areas.css */
/* ─── DL Service Areas ─────────────────────────────────────────────────────── */
.dl-areas {
    background: var(--color-cream-dark);
    padding: 5rem 0;
}
.dl-areas__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.dl-areas__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.dl-areas__eyebrow { color: var(--color-orange); margin-bottom: 0.75rem; }
.dl-areas__heading { color: var(--color-text); margin-bottom: 0.85rem; }
.dl-areas__sub    { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }

.dl-areas__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.5rem 2rem;
    align-items: start;
}
.dl-areas__region-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--color-green);
    padding-bottom: 0.7rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-divider);
}
.dl-areas__cities { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.dl-areas__city {
    display: inline-block;
    font-size: 0.82rem;
    line-height: 1;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--color-divider);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.5s var(--ease-out),
        transform 0.5s var(--ease-out),
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    transition-delay: calc(var(--i, 0) * 0.02s);
}
.dl-areas.is-visible .dl-areas__city { opacity: 1; transform: translateY(0); }

.dl-areas__city--link {
    color: var(--color-green);
    border-color: rgba(26, 92, 30, 0.35);
    font-weight: 500;
    cursor: pointer;
}
.dl-areas__city--link:hover {
    background: var(--color-green);
    color: var(--color-cream);
    border-color: var(--color-green);
    transform: translateY(-2px);
    transition-delay: 0s;
}

@media (max-width: 600px) {
    .dl-areas { padding: 3.5rem 0; }
    .dl-areas__grid { gap: 2rem; }
    /* Bigger, better spaced tap targets so a mistap does not land on the
       neighbouring city. Reaches about 42px tall. */
    .dl-areas__city { padding: 0.7rem 1rem; line-height: 1.2; }
    .dl-areas__cities { gap: 0.65rem; }
}
@media (prefers-reduced-motion: reduce) {
    .dl-areas__city { opacity: 1; transform: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
}

/* ─── Compact strip (home page) ─────────────────────────────────────────────── */
.dl-areas--compact { padding: 2.75rem 0; }
.dl-areas__compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    flex-wrap: wrap;
}
.dl-areas__compact .dl-areas__heading { margin-bottom: 0.35rem; }
.dl-areas__compact .dl-areas__sub { margin: 0; font-size: var(--fs-small); }
.dl-areas__compact-cta { flex-shrink: 0; }
@media (max-width: 600px) {
    .dl-areas__compact { flex-direction: column; align-items: flex-start; }
}

/* thanks.css */
/* ─── DL Thank You ───────────────────────────────────────────────────────── */
.dl-thanks {
    background: var(--color-green);
    padding: clamp(4rem, 12vw, 8rem) 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    /* Clears the fixed nav, same variable the hero uses. */
    padding-top: calc(clamp(4rem, 12vw, 8rem) + var(--nav-height, 96px));
}

.dl-thanks__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

/* Check mark */
.dl-thanks__mark {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.75rem;
}
.dl-thanks__mark svg { width: 100%; height: 100%; display: block; }

.dl-thanks__mark-circle {
    stroke: var(--color-orange);
    stroke-width: 2;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: dl-thanks-circle 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dl-thanks__mark-check {
    stroke: var(--color-cream);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: dl-thanks-check 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
@keyframes dl-thanks-circle { to { stroke-dashoffset: 0; } }
@keyframes dl-thanks-check  { to { stroke-dashoffset: 0; } }

.dl-thanks__eyebrow {
    color: var(--color-orange);
    margin-bottom: 0.75rem;
}

.dl-thanks__heading {
    color: var(--color-cream);
    margin-bottom: 1rem;
}

.dl-thanks__body {
    color: rgba(245, 240, 227, 0.85);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    margin-bottom: 2rem;
}

/* Phone */
.dl-thanks__phone-block {
    border-top: 1px solid rgba(245, 240, 227, 0.18);
    border-bottom: 1px solid rgba(245, 240, 227, 0.18);
    padding: 1.5rem 0;
    margin-bottom: 2rem;
}
.dl-thanks__phone {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 700;
    color: var(--color-cream);
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    transition: color var(--duration-fast);
}
.dl-thanks__phone:hover { color: var(--color-orange); }
.dl-thanks__phone-note {
    color: rgba(245, 240, 227, 0.7);
    font-size: var(--fs-small);
    margin-top: 0.4rem;
}

/* CTAs */
.dl-thanks__ctas {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.dl-thanks__lic {
    color: rgba(245, 240, 227, 0.5);
}

/* ── Next steps ── */
.dl-thanks__next {
    margin-top: clamp(2.5rem, 7vw, 4rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid rgba(245, 240, 227, 0.18);
}

.dl-thanks__next-heading {
    color: var(--color-cream);
    font-size: var(--fs-h3);
    margin-bottom: 1.5rem;
}

.dl-thanks__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    text-align: left;
}

.dl-thanks__card {
    display: block;
    padding: 1.1rem 1.25rem;
    background: var(--color-green-deep);
    border: 1px solid rgba(245, 240, 227, 0.14);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.dl-thanks__card:hover,
.dl-thanks__card:focus-visible {
    border-color: var(--color-orange);
    transform: translateY(-2px);
}

.dl-thanks__card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-cream);
    margin-bottom: 0.3rem;
}
.dl-thanks__card-arrow {
    color: var(--color-orange);
    flex: none;
    transition: transform var(--duration-fast);
}
.dl-thanks__card:hover .dl-thanks__card-arrow { transform: translateX(3px); }

.dl-thanks__card-text {
    color: rgba(245, 240, 227, 0.72);
    font-size: var(--fs-small);
    line-height: 1.5;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dl-thanks__card,
    .dl-thanks__card-arrow { transition: none; }
    .dl-thanks__card:hover { transform: none; }
}

@media (max-width: 600px) {
    .dl-thanks { min-height: auto; }
    .dl-thanks__ctas .dl-btn { flex: 1 1 100%; justify-content: center; text-align: center; }
    .dl-thanks__mark { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-thanks__mark-circle,
    .dl-thanks__mark-check { animation: none; stroke-dashoffset: 0; }
}

/* footer.css */
/* ─── DL Footer ──────────────────────────────────────────────────────────── */
.dl-footer {
    background: var(--color-dark);
    padding: 4rem 0 0;
}

.dl-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
}

/* Brand column */
/* Plain logo on the footer ground, no panel, per the owner's preference.
   Note the tradeoff: the artwork is dark green on a near black footer, roughly
   2.4:1, so size is what carries it here rather than contrast. */
.dl-footer__logo-link { display: inline-block; margin-bottom: 0.75rem; line-height: 0; }

.dl-footer__logo { width: 172px; height: auto; }

.dl-footer__logo-text {
    color: var(--color-cream);
    display: block;
}

.dl-footer__lic {
    color: rgba(245, 240, 227, 0.35);
    margin-bottom: 0.5rem;
    font-size: var(--fs-label);
}

.dl-footer__phone {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--color-orange);
    text-decoration: none;
    margin-bottom: 0.875rem;
    line-height: 1;
}

.dl-footer__phone:hover { color: #f07030; }

.dl-footer__tagline {
    font-size: var(--fs-small);
    color: rgba(245, 240, 227, 0.5);
    line-height: var(--lh-body);
    margin-bottom: 1.25rem;
    max-width: 280px;
}

/* Socials */
.dl-footer__socials {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    flex-wrap: wrap;
}

.dl-footer__social {
    color: rgba(245, 240, 227, 0.5);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.dl-footer__social:hover { color: var(--color-cream); }

/* Columns */
.dl-footer__col-label {
    color: var(--color-cream);
    margin-bottom: 1rem;
    font-size: var(--fs-label);
}

.dl-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dl-footer__col ul li a {
    font-size: var(--fs-small);
    color: rgba(245, 240, 227, 0.55);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.dl-footer__col ul li a:hover { color: var(--color-cream); }

.dl-footer__cta {
    display: inline-flex;
    margin-top: 1.5rem;
    font-size: var(--fs-small);
    padding: 0.625rem 1.25rem;
}

/* Bottom bar */
.dl-footer__bottom {
    border-top: 0.5px solid rgba(245, 240, 227, 0.1);
    padding: 1.25rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.dl-footer__copyright,
.dl-footer__cats,
.dl-footer__credit {
    font-size: 0.625rem;
    color: rgba(245, 240, 227, 0.3);
    letter-spacing: 0.06em;
}

/* Agency credit — sits with the copyright, links out to kliq.la. Slightly
   brighter link so it reads as clickable without shouting. */
.dl-footer__credit a {
    color: rgba(245, 240, 227, 0.55);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.dl-footer__credit a:hover,
.dl-footer__credit a:focus-visible {
    color: var(--color-orange);
}

.dl-footer__top-btn {
    background: none;
    border: none;
    font-size: 0.625rem;
    color: rgba(245, 240, 227, 0.35);
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--duration-fast);
    flex-shrink: 0;
}

.dl-footer__top-btn:hover { color: var(--color-cream); }

@media (max-width: 1024px) {
    .dl-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
    .dl-footer__grid { grid-template-columns: 1fr; }
    .dl-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

@media (max-width: 900px) {
    /* Give footer touch targets room without doubling the visual spacing. */
    .dl-footer__social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .dl-footer__socials { gap: 0.25rem; }
    .dl-footer__col ul { gap: 0; }
    .dl-footer__col ul li a { display: block; padding: 0.6rem 0; }
    /* The fixed back-to-top button in the nav already covers this on mobile. */
    .dl-footer__top-btn { display: none; }
}