/* Desktop composition. The existing small-screen layouts remain unchanged. */
@media (min-width: 1024px) {
    :root {
        --container: min(1280px, calc(100% - 80px));
    }

    .header-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: clamp(24px, 3vw, 48px);
    }

    .nav-main {
        justify-self: center;
    }

    .nav-menu,
    .nav-menu.is-open {
        gap: 8px;
    }

    .nav-menu a {
        padding-right: 16px;
        padding-left: 16px;
        white-space: nowrap;
    }

    .theme-toggle {
        min-height: 44px;
    }

    /* The property photograph has breathing room beside the main introduction. */
    .hero-section {
        min-height: min(760px, calc(100svh - var(--header-height)));
        align-items: center;
    }

    .hero-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(240px, 20vw, 280px);
        column-gap: clamp(48px, 5vw, 80px);
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hero-content > .eyebrow,
    .hero-content > h1,
    .hero-content > .hero-copy,
    .hero-content > .hero-actions {
        grid-column: 1;
    }

    .hero-content h1 {
        max-width: 16ch;
        font-size: clamp(3.75rem, 5.25vw, 5.25rem);
        letter-spacing: -0.035em;
        line-height: 1.04;
    }

    .hero-copy {
        max-width: 57ch;
        margin-top: 24px;
        font-size: 1.15rem;
        line-height: 1.7;
    }

    .hero-actions {
        gap: 12px;
        margin-top: 28px;
    }

    .quick-facts {
        grid-column: 2;
        grid-row: 2 / 5;
        grid-template-columns: 1fr;
        align-self: end;
        gap: 0;
        margin: 0;
        padding: 12px 28px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: var(--radius);
        background: rgba(7, 17, 7, 0.7);
    }

    .quick-facts div {
        padding: 18px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .quick-facts div + div {
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    .quick-facts dd {
        margin-top: 4px;
        font-size: 1.4rem;
    }

    /* Inner-page introductions use the width for readable parallel content. */
    .page-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
        gap: 20px clamp(40px, 5vw, 80px);
        padding: 80px 0;
    }

    .page-hero-inner > .eyebrow {
        grid-column: 1;
        grid-row: 1;
    }

    .page-hero h1 {
        grid-column: 1;
        grid-row: 2 / 4;
        max-width: 20ch;
        margin-top: 0;
        font-size: clamp(3.1rem, 4.2vw, 4.5rem);
        letter-spacing: -0.035em;
        line-height: 1.08;
    }

    .page-hero-inner > p:not(.eyebrow) {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        max-width: 44ch;
        margin: 0;
        font-size: 1.15rem;
        line-height: 1.7;
    }

    .page-hero-inner > .hero-actions {
        grid-column: 2;
        grid-row: 3;
        margin-top: 4px;
    }

    .work-intro .page-hero-inner {
        padding: 64px 0;
    }

    .page-hero.work-intro h1 {
        grid-row: 1;
        max-width: 18ch;
        font-size: clamp(3.1rem, 4.2vw, 4.5rem);
    }

    .work-intro .page-hero-inner > p {
        grid-row: 1;
    }

    .work-jump-links {
        grid-column: 2;
        grid-row: 2;
        gap: 12px;
        margin-top: 0;
    }

    .section-block {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .section-heading {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr);
        column-gap: clamp(40px, 5vw, 80px);
        max-width: none;
        margin-bottom: 40px;
    }

    .section-heading > .eyebrow,
    .section-heading > h2 {
        grid-column: 1;
    }

    .section-heading > h2 {
        max-width: 26ch;
    }

    .section-heading > p:not(.eyebrow) {
        grid-column: 2;
        align-self: end;
        max-width: 48ch;
        margin: 0;
        padding-bottom: 3px;
    }

    .card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .card-grid-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-card {
        display: flex;
        flex-direction: column;
        padding: 22px;
        box-shadow: none;
    }

    .service-card__image {
        flex: none;
        height: auto;
        aspect-ratio: 4 / 3;
        margin-bottom: 24px;
    }

    .service-card h3 {
        font-size: 1.4rem;
    }

    .service-card p {
        margin-top: 12px;
        font-size: 0.95rem;
    }

    .additional-services-intro {
        margin-top: 48px;
        padding-top: 32px;
        border-top: 1px solid var(--border);
    }

    .additional-service-grid {
        gap: 24px;
    }

    .additional-service-card {
        padding: 28px;
    }

    /* The four service categories become two comfortably readable rows. */
    .service-detail-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .service-detail {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 20px;
        padding: 28px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .service-detail__number {
        width: 3rem;
        height: 3rem;
        font-size: 0.9rem;
    }

    .service-detail h3 {
        padding-top: 6px;
        font-size: 1.55rem;
    }

    .service-detail p {
        min-height: 6.5rem;
        margin-top: 16px;
    }

    .check-list {
        margin-top: 20px;
        gap: 0;
    }

    .check-list li {
        padding: 9px 0 9px 22px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-weight: 600;
    }

    .check-list li::before {
        top: 18px;
        left: 0;
        width: 6px;
        height: 6px;
    }

    /* Keep both comparison photographs equally square; introduce each pair beside it. */
    #before-after {
        padding-top: 72px;
    }

    .work-project {
        display: grid;
        grid-template-columns: minmax(200px, 0.29fr) minmax(0, 1fr);
        gap: clamp(32px, 3.5vw, 56px);
        align-items: start;
    }

    .work-project + .work-project {
        margin-top: 64px;
        padding-top: 64px;
    }

    .work-project__heading {
        margin-bottom: 0;
    }

    .work-project__heading h3 {
        max-width: 13ch;
        font-size: clamp(1.55rem, 2vw, 1.9rem);
        line-height: 1.15;
    }

    .work-project__heading p:last-child {
        margin-top: 18px;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .work-project .comparison-grid {
        min-width: 0;
    }

    .testimonial-grid {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
        gap: 32px;
    }

    .testimonial-card {
        gap: 28px;
        padding: 36px;
    }

    .testimonial-card blockquote {
        max-width: 62ch;
        font-size: 1.15rem;
        line-height: 1.75;
    }

    .testimonial-card:first-child blockquote {
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .split-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(48px, 6vw, 96px);
    }

    .value-grid {
        gap: 0;
    }

    .value-grid article {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 20px;
        padding: 26px 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .value-grid article:first-child {
        padding-top: 0;
    }

    .value-grid article:last-child {
        border-bottom: 0;
    }

    .value-grid p {
        max-width: 40ch;
        margin-top: 0;
    }

    .area-list,
    .feature-list {
        gap: 12px;
    }

    .area-list li,
    .feature-list li {
        padding: 18px 20px;
    }

    .contact-grid {
        gap: 32px;
    }

    .contact-card {
        grid-template-rows: auto auto 1fr auto;
        gap: 18px;
        padding: 40px;
        box-shadow: none;
    }

    .contact-card:first-child {
        border-color: var(--brand);
    }

    .contact-card h2 {
        font-size: clamp(1.8rem, 2.5vw, 2.5rem);
        font-variant-numeric: tabular-nums;
    }

    .contact-card p:not(.eyebrow) {
        max-width: 40ch;
        margin-top: 0;
    }

    .contact-card .button {
        justify-self: start;
        margin-top: 8px;
    }

    .compact-section {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
        gap: 16px clamp(40px, 5vw, 80px);
        max-width: none;
    }

    .compact-section > .eyebrow,
    .compact-section > h2 {
        grid-column: 1;
    }

    .compact-section h2 {
        max-width: 24ch;
        font-size: 2.5rem;
    }

    .compact-section > p:not(.eyebrow) {
        grid-column: 2;
        align-self: end;
        max-width: 42ch;
    }

    .promo-grid {
        gap: 48px;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .promo-grid h2 {
        max-width: 32ch;
        margin-top: 6px;
    }

    .cta-section {
        padding-top: 0;
    }

    .cta-panel {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 64px;
        padding: 44px 52px;
        margin-top: 24px;
    }

    .cta-panel h2 {
        max-width: 26ch;
        font-size: clamp(2rem, 3vw, 2.75rem);
    }

    .cta-panel .contact-actions {
        flex-direction: column;
        margin-top: 0;
    }

    .footer-inner {
        column-gap: 48px;
        row-gap: 16px;
        padding-top: 32px;
        padding-bottom: 32px;
    }
}