/* District Frame - Service Detail landing pages (v3 editorial)
   Scoped to .page-template-template-service-detail.
   Reuses global tokens, .df-page-hero, .df-link-arrow, .df-btn,
   .df-reveal and the global .df-project-play / icon-swap states. */

/* ============================================================
   SHOWCASE - real project video, photo grid, or service art
   ============================================================ */
.page-template-template-service-detail .df-sd-showcase {
    padding: clamp(32px, 5vw, 64px) 0 clamp(8px, 2vw, 24px);
}
.page-template-template-service-detail .df-sd-media {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    line-height: 0;
    overflow: hidden;
    background: var(--df-bg-card);
}
.page-template-template-service-detail .df-sd-media video,
.page-template-template-service-detail .df-sd-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 30%;
    display: block;
}
.page-template-template-service-detail .df-sd-media--art {
    background: #e9e2d4;
}
.page-template-template-service-detail .df-sd-media--art .df-sv-art {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

/* Inline play + fullscreen controls (base styles are global). */
.page-template-template-service-detail .df-sd-media .df-project-play {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--df-hairline-dark);
    border-radius: 50%;
    background: rgba(14, 14, 14, 0.55);
    color: var(--df-paper);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.25s ease;
}
.page-template-template-service-detail .df-sd-media .df-project-play:hover {
    background: rgba(14, 14, 14, 0.85);
}
.page-template-template-service-detail .df-sd-media .df-project-play .df-icon {
    width: 20px;
    height: 20px;
}
.page-template-template-service-detail .df-sd-media .df-media-fullscreen {
    left: auto;
    right: 16px;
}

/* Photography grid */
.page-template-template-service-detail .df-sd-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.4vw, 16px);
}
.page-template-template-service-detail .df-sd-photo {
    margin: 0;
    line-height: 0;
    overflow: hidden;
    background: var(--df-bg-card);
}
.page-template-template-service-detail .df-sd-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Showcase caption / link under the media */
.page-template-template-service-detail .df-sd-showcase-cap {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    max-width: 1040px;
    margin: 22px auto 0;
    color: var(--df-ink-muted);
}

/* ============================================================
   CODE EDITOR ANIMATION (Website Design showcase)
   A self-contained editor "window" that types + retypes the
   site's own front-end code. Palette matches the service
   illustrations (warm paper / espresso / maroon / gold); the
   typing loop is initCodeAnimation() in js/df-effects.js.
   ============================================================ */
/* The hero media slot sets line-height:0 for photos, so reset it here for the
   text UI. The editor is capped so it never crowds the title, and the copy
   column is given the larger share of the row (see the grid override below). */
.page-template-template-service-detail .df-page-hero-media--custom {
    line-height: normal;
}
.page-template-template-service-detail .df-page-hero-media--custom .df-sd-code-wrap {
    max-width: 560px;
    margin: 0 auto;
}
/* Desktop: give the editor a bigger share of the row, but pin a hard min-width
   floor on the copy column (400px) so the title can NEVER be squeezed or
   rewrapped - its size, left edge and 2-line wrap stay exactly as they are.
   Gated to >=861px so the base 1-column stacking still wins on mobile. */
@media (min-width: 861px) {
    .page-template-template-service-detail .df-page-hero-grid--code {
        grid-template-columns: minmax(400px, 1.3fr) minmax(320px, 1fr);
    }
}
.page-template-template-service-detail .df-page-hero-grid--code .df-page-hero-copy h1 {
    font-size: clamp(40px, 5.4vw, 80px);
}
/* The animated code-editor COMPONENT styles (.df-sd-code / .df-code-* /
   .df-c-* / .df-sd-steps + keyframes) are global and live in
   css/df-effects.css, so the same editor also renders on the main Services
   page (Website Design row). Only its hero-LAYOUT rules remain above. */

/* ============================================================
   WHAT WE DELIVER - copy + included checklist
   ============================================================ */
.page-template-template-service-detail .df-sd-deliver {
    padding: clamp(48px, 7vw, 96px) 0;
    margin-top: clamp(32px, 5vw, 64px);
}
.page-template-template-service-detail .df-sd-deliver-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}
.page-template-template-service-detail .df-sd-deliver-copy h2 {
    margin: 0 0 24px;
}
.page-template-template-service-detail .df-sd-deliver-copy p {
    margin: 0 0 18px;
    max-width: 56ch;
    color: var(--df-ink-muted);
    font-size: 16px;
    line-height: 1.8;
}
.page-template-template-service-detail .df-sd-area {
    margin-top: 24px !important;
    color: var(--df-ink) !important;
    font-weight: 600;
}

.page-template-template-service-detail .df-sd-includes-kicker {
    display: block;
    margin-bottom: 18px;
    color: var(--df-ink-muted);
}
.page-template-template-service-detail .df-sd-includes ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-template-template-service-detail .df-sd-includes li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--df-hairline);
    font-size: 15px;
    line-height: 1.5;
}
.page-template-template-service-detail .df-sd-includes li:first-child {
    border-top: 0;
}
.page-template-template-service-detail .df-sd-check {
    line-height: 0;
    color: var(--df-ink);
    flex: 0 0 auto;
    margin-top: 1px;
}
.page-template-template-service-detail .df-sd-check .df-icon {
    width: 20px;
    height: 20px;
}

/* ============================================================
   OTHER SERVICES - internal cross-links
   ============================================================ */
.page-template-template-service-detail .df-sd-others {
    padding: clamp(48px, 7vw, 88px) 0;
}
.page-template-template-service-detail .df-sd-others-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: clamp(20px, 3vw, 36px);
}
.page-template-template-service-detail .df-sd-others-kicker {
    margin: 0;
    color: var(--df-ink-muted);
}
.page-template-template-service-detail .df-sd-others-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--df-hairline);
    border: 1px solid var(--df-hairline);
}
.page-template-template-service-detail .df-sd-others-grid li {
    background: var(--df-bg-light);
}
.page-template-template-service-detail .df-sd-others-grid a {
    position: relative;
    display: block;
    height: 100%;
    padding: clamp(24px, 3vw, 36px);
    color: inherit;
    text-decoration: none;
    transition: background 0.25s ease;
}
.page-template-template-service-detail .df-sd-others-grid a:hover {
    background: #e8e4db;
}
.page-template-template-service-detail .df-sd-others-grid h3 {
    margin: 0 0 10px;
    font-size: clamp(20px, 2.4vw, 26px);
    padding-right: 28px;
}
.page-template-template-service-detail .df-sd-others-grid p {
    margin: 0;
    max-width: 46ch;
    color: var(--df-ink-muted);
    font-size: 14px;
    line-height: 1.7;
}
.page-template-template-service-detail .df-sd-others-go {
    position: absolute;
    top: clamp(24px, 3vw, 36px);
    right: clamp(24px, 3vw, 36px);
    color: var(--df-ink-muted);
    transition: transform 0.3s var(--df-ease);
}
.page-template-template-service-detail .df-sd-others-grid a:hover .df-sd-others-go {
    transform: translateX(4px);
}

/* ============================================================
   CLOSING CTA - dark band
   ============================================================ */
.page-template-template-service-detail .df-sd-cta {
    padding: clamp(56px, 9vw, 120px) 0;
}
.page-template-template-service-detail .df-sd-cta-inner {
    text-align: center;
    max-width: 640px;
}
.page-template-template-service-detail .df-sd-cta-inner {
    margin-left: auto;
    margin-right: auto;
}
.page-template-template-service-detail .df-sd-cta-inner h2 {
    margin: 0 0 16px;
}
.page-template-template-service-detail .df-sd-cta-inner p {
    margin: 0 0 32px;
    color: var(--df-paper-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .page-template-template-service-detail .df-sd-deliver-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .page-template-template-service-detail .df-sd-others-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .page-template-template-service-detail .df-sd-photos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   PHOTOGRAPHY hero (page 294): the Blen portrait fills a tall 4/5
   frame (its native ratio) so it shows large and uncropped instead
   of the wide 4/3 crop. Scoped by page id; the other service heroes
   keep the default landscape crop.
   ============================================================ */
.page-id-294 .df-page-hero-media img {
    aspect-ratio: 4 / 5;
    object-position: center;
}
@media (max-width: 860px) {
    .page-id-294 .df-page-hero-media img {
        aspect-ratio: 4 / 3;
    }
}

/* ============================================================
   AREAS WE SERVE - DMV region band (local relevance)
   ============================================================ */
.page-template-template-service-detail .df-sd-areas {
    padding: clamp(48px, 7vw, 88px) 0;
}
.page-template-template-service-detail .df-sd-areas-head {
    max-width: 640px;
}
.page-template-template-service-detail .df-sd-areas-head .df-label {
    display: block;
    margin-bottom: 12px;
    color: var(--df-ink-muted);
}
.page-template-template-service-detail .df-sd-areas-head h2 {
    margin: 0 0 16px;
}
.page-template-template-service-detail .df-sd-areas-head p {
    margin: 0 0 clamp(24px, 4vw, 44px);
    max-width: 60ch;
    color: var(--df-ink-muted);
    font-size: 16px;
    line-height: 1.8;
}
.page-template-template-service-detail .df-sd-areas-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--df-hairline);
    border: 1px solid var(--df-hairline);
}
.page-template-template-service-detail .df-sd-areas-grid li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(22px, 3vw, 32px);
    background: var(--df-bg-light);
}
.page-template-template-service-detail .df-sd-areas-grid strong {
    font-family: var(--df-serif);
    font-weight: 500;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.2;
}
.page-template-template-service-detail .df-sd-areas-grid span {
    color: var(--df-ink-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================================
   FAQ - accordion (native <details>, crawlable + no JS needed)
   ============================================================ */
.page-template-template-service-detail .df-sd-faq {
    padding: clamp(48px, 7vw, 88px) 0;
}
.page-template-template-service-detail .df-sd-faq-inner {
    max-width: 820px;
}
.page-template-template-service-detail .df-sd-faq-inner > h2 {
    margin: 0 0 clamp(18px, 3vw, 32px);
}
.page-template-template-service-detail .df-faq-item {
    border-top: 1px solid var(--df-hairline);
}
.page-template-template-service-detail .df-faq-item:last-child {
    border-bottom: 1px solid var(--df-hairline);
}
.page-template-template-service-detail .df-faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(18px, 2.4vw, 26px) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--df-serif);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.35;
    color: var(--df-ink);
    transition: color 0.25s ease;
}
.page-template-template-service-detail .df-faq-item summary::-webkit-details-marker {
    display: none;
}
.page-template-template-service-detail .df-faq-item summary:hover {
    color: var(--df-ink-muted);
}
.page-template-template-service-detail .df-faq-mark {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 6px;
}
.page-template-template-service-detail .df-faq-mark::before,
.page-template-template-service-detail .df-faq-mark::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform 0.3s var(--df-ease);
}
.page-template-template-service-detail .df-faq-mark::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}
.page-template-template-service-detail .df-faq-mark::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 16px;
}
.page-template-template-service-detail .df-faq-item[open] .df-faq-mark::after {
    transform: scaleY(0);
}
.page-template-template-service-detail .df-faq-a {
    padding: 0 0 clamp(18px, 2.4vw, 26px);
}
.page-template-template-service-detail .df-faq-a p {
    margin: 0;
    max-width: 70ch;
    color: var(--df-ink-muted);
    font-size: 16px;
    line-height: 1.8;
}

@media (max-width: 720px) {
    .page-template-template-service-detail .df-sd-areas-grid {
        grid-template-columns: 1fr;
    }
}