/* ==========================================================================
   Responsive — 1440 / 1200 / 1024 / 880 / 768 / 600 / 480
   Loaded last so these rules win without !important.
   ========================================================================== */

@media (max-width: 1440px) {
    :root {
        --dm-container: 1200px;
    }
}

@media (max-width: 1200px) {
    /* --dm-section-y is fluid in belfort.css and needs no step here. */
    :root {
        --dm-gutter: 24px;
        --dm-header-h: 92px;
        --dm-logo-h: 50px;
    }

    /* The nav's own clamp() handles type and padding; only the gaps tighten. */
    .dm-header__inner {
        gap: 14px;
    }

    /* Brand keeps its own row so the three link columns stay full width. */
    .dm-footer__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 44px 36px;
    }

    .dm-footer__col--brand {
        grid-column: 1 / -1;
    }
}

/* --- Tablet: mobile navigation takes over --------------------------------
   1150px, not 1024px: below this the seven primary items plus the CTA can no
   longer sit on one line without shrinking the type past legibility. */
@media (max-width: 1150px) {
    :root {
        --dm-header-h: 78px;
        --dm-header-h-stuck: 66px;
        --dm-logo-h: 46px;
        --dm-logo-h-stuck: 40px;
    }

    .dm-nav,
    .dm-header__actions {
        display: none;
    }

    .dm-burger {
        display: flex;
        margin-left: auto;
    }
}

@media (max-width: 1024px) {
    /* The quick-contact dock used to be revealed here and hidden above this
       width, which left desktop with no call or WhatsApp button at all. It is
       now always visible — see .dm-contact-dock in layout.css. */

    .dm-hero {
        min-height: clamp(520px, 76svh, 660px);
        padding-block: 90px 110px;
    }

    .dm-hero__glow {
        width: 78%;
        opacity: .8;
    }

    .dm-split {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .dm-split--reverse .dm-split__media {
        order: 0;
    }

    /* Stacked: nothing tall enough beside it for sticky to be worth anything. */
    .dm-bio__grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .dm-bio__aside {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 32px;
        max-width: 760px;
    }

    .dm-bio__portrait {
        margin-bottom: 0;
    }

    .dm-bio__portrait::before {
        inset: 16px -16px -16px 16px;
    }

    .dm-split__media::before {
        inset: -12px -12px 12px 12px;
    }

    /* About: copy first, portrait below, both full width. */
    .dm-about__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .dm-about__media {
        max-width: 520px;
        margin-inline: auto;
    }

    /* Stacked, there is no taller sibling to match — back to its own ratio. */
    .dm-about__stage {
        height: auto;
        min-height: 0;
    }

    .dm-about__stage img {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .dm-about__media::before {
        inset: 20px -20px -20px 20px;
    }

    .dm-about__prose,
    .dm-about__stats {
        max-width: none;
    }

    .dm-about__wash {
        width: 70%;
        top: -6%;
    }

    .dm-calc {
        grid-template-columns: 1fr;
    }

    .dm-calc__results {
        position: static;
    }

    .dm-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .dm-stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 20px;
    }
}

@media (max-width: 1024px) {
    /* Reviews: three per view → two */
    .dm-review {
        flex-basis: calc((100% - var(--dm-gutter)) / 2);
    }
}

@media (max-width: 880px) {
    .dm-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Split hero stacks the same way as the split page header. */
    .dm-hero--split .dm-hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dm-hero--split .dm-hero__lead {
        max-width: none;
    }

    /* Split header stacks: heading above, enquiry card below, both centred.
       The tilt goes with it — it only reads as depth against a wide layout. */
    .dm-pagehead--split .dm-pagehead__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dm-pagehead--split .dm-pagehead__inner {
        text-align: center;
        margin-inline: auto;
    }

    .dm-pagehead--split .dm-hero__eyebrow,
    .dm-pagehead--split .dm-pagehead__actions {
        justify-content: center;
    }

    .dm-pagehead--split .dm-pagehead__lead {
        margin-inline: auto;
    }

    .dm-inquiry {
        max-width: 460px;
        margin-inline: auto;
        width: 100%;
    }

    .dm-inquiry__card,
    .dm-inquiry__card:hover,
    .dm-inquiry__card:focus-within {
        transform: none;
    }

    /* Service page: copy first, then the rail — nothing tall enough beside it
       for sticky to earn its keep. */
    .dm-service-layout {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .dm-service-aside {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    /* Calculators: one tool per row, assurances stacked. */
    .dm-tools,
    .dm-tools--3,
    .dm-assurances,
    .dm-disclaimer ul {
        grid-template-columns: 1fr;
    }

    .dm-assurances {
        max-width: 560px;
        margin-inline: auto;
    }

    /* Contact: details above the form, offices one per row. */
    .dm-contact {
        grid-template-columns: 1fr;
    }

    .dm-offices {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-inline: auto;
    }

    /* The lead post stacks: image over copy. */
    .dm-post-feature {
        grid-template-columns: 1fr;
    }

    /* Foreground copy only — the blurred backdrop is inset-filled and must keep
       matching the frame, not take a ratio of its own. */
    .dm-post-feature__media > img:not(.dm-media-blur) {
        aspect-ratio: 16 / 9;
    }

    /* One certificate at a time, capped so it never fills the whole screen. */
    .dm-awards {
        grid-template-columns: 1fr;
        gap: 48px;
        max-width: 440px;
        margin-inline: auto;
    }

    /* Stacked, the rule turns horizontal — even space on both sides of it. */
    .dm-coverage {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dm-coverage__col:first-child {
        padding-right: 0;
        padding-bottom: 38px;
    }

    .dm-coverage__col + .dm-coverage__col {
        padding-left: 0;
        padding-top: 38px;
        border-left: 0;
        border-top: 1px solid var(--dm-border);
    }

    /* Office maps stack rather than squeezing to unreadable widths. */
    .dm-maps {
        grid-template-columns: 1fr;
        margin-bottom: 46px;
    }

    .dm-map {
        aspect-ratio: 16 / 9;
    }

    .dm-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 36px;
    }

    /* Stacked, the heading and the field want the full width each. */
    .dm-footer__signup-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .dm-footer__newsletter {
        flex: 1 1 auto;
    }

    .dm-topbar__info {
        gap: 14px;
    }

    /* Keep the phone number and badge; drop the address to avoid wrapping. */
    .dm-topbar__item--address {
        display: none;
    }
}

/* --- Touch targets --------------------------------------------------------
   Either condition qualifies: any coarse pointer (covers a large touchscreen
   that a width query would miss), or a phone-width viewport (covers devices
   that misreport pointer type). */
@media (pointer: coarse), (max-width: 768px) {
    /* --sm buttons come out at 38px, just under the 44px guidance. */
    .dm-btn--sm {
        min-height: 44px;
        padding-block: 12px;
    }

    /* Chips are the payment-frequency and blog-category filters. */
    .dm-chip {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }

    /* The enquiry card is deliberately compact on desktop; its fields still
       need a comfortable target once there is a finger on the screen. */
    .dm-inquiry__field input {
        min-height: 44px;
        font-size: 16px;   /* stops iOS zooming the page on focus */
    }

    .dm-inquiry__field textarea {
        font-size: 16px;
    }

    .dm-pagination a,
    .dm-pagination span {
        min-width: 44px;
        min-height: 44px;
    }
}

/* --- Phone ---------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --dm-gutter: 20px;
    }

    body {
        font-size: 15px;
    }

    .dm-grid--2,
    .dm-grid--3,
    .dm-grid--4 {
        grid-template-columns: 1fr;
    }

    .dm-hero {
        min-height: auto;
        padding-block: 74px 84px;
        text-align: center;
    }

    .dm-hero__inner {
        margin-inline: auto;
    }

    .dm-hero__eyebrow {
        justify-content: center;
    }

    /* A single rule reads as a stray dash once the hero centres. Scoped to the
       hero: the page-head eyebrow has a matching rule on both sides, so it
       stays symmetrical and keeps them. */
    .dm-hero .dm-hero__eyebrow::before {
        display: none;
    }

    .dm-hero__lead {
        margin-inline: auto;
    }

    .dm-hero__actions {
        justify-content: center;
    }

    .dm-hero__actions .dm-btn {
        padding: 15px 30px;
    }

    .dm-hero__glow {
        top: -6%;
        right: -22%;
        width: 110%;
    }

    .dm-pagehead {
        padding-block: 70px 56px;
    }

    .dm-section-title {
        margin-bottom: 40px;
    }

    .dm-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dm-footer__top {
        padding-block: 56px 40px;
    }

    .dm-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .dm-testimonial__quote {
        font-size: 1.0625rem;
    }

    /* Narrower cells and tighter gaps, so more than two marks are on screen. */
    .dm-lenders {
        padding-block: 24px;
    }

    .dm-lenders__track {
        gap: 44px;
        animation-duration: 32s;
    }

    .dm-lenders__item {
        width: 116px;
        height: 38px;
    }

    .dm-lenders__item img {
        max-height: 38px;
    }

    .dm-dropcap::first-letter {
        font-size: 2.9rem;
    }

    /* Stays three up — two columns would orphan the third figure on its own
       row. The labels wrap to two lines instead, which keeps the strip even. */
    .dm-about__stats {
        gap: 16px;
        margin-top: 34px;
        padding-top: 28px;
    }

    .dm-about__stat-label {
        font-size: 11px;
        letter-spacing: .8px;
    }

    /* The offset frame and the overhanging card both need the gutter back. */
    .dm-about__media::before {
        inset: 14px -14px -14px 14px;
    }

    .dm-about__card {
        left: 10px;
        right: 10px;
        bottom: 14px;
        padding: 13px 18px 13px 14px;
    }

    .dm-about__prose {
        font-size: 16px;
    }

    /* Portrait over card once two-up would squeeze both. */
    .dm-bio__aside,
    .dm-service-aside {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .dm-bio__body .dm-prose {
        font-size: 16px;
    }

    /* No room in the margins on a phone — the grid runs edge to edge. */
    .dm-services__scene {
        display: none;
    }

    /* Reviews: one card per view */
    .dm-review {
        flex-basis: 100%;
    }

    .dm-reviews__label {
        font-size: 1.5rem;
    }

    .dm-calc__inputs,
    .dm-calc__results {
        padding: 26px 22px;
    }

    .dm-office {
        padding: 26px 22px;
    }
}

@media (max-width: 600px) {
    .dm-topbar__inner {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .dm-topbar__social {
        display: none;
    }

    /* 11px was below comfortable reading even for an uppercase badge. */
    .dm-topbar__badge {
        padding: 4px 10px;
        font-size: 11.5px;
        letter-spacing: .5px;
    }

    .dm-stat-row {
        grid-template-columns: 1fr;
    }

    .dm-field__pair {
        flex-wrap: wrap;
    }

    .dm-field__pair input[type="number"],
    .dm-field__pair input[type="text"] {
        flex: 1 1 100%;
        text-align: left;
    }
}

@media (max-width: 480px) {
    /*
     * The call and WhatsApp buttons are fixed over the content, and on a 320px
     * screen a 52px pair sits squarely on top of the right-hand edge of form
     * inputs. Smaller and tighter into the corner leaves the fields reachable;
     * the buttons stay above the 44px touch minimum.
     */
    /* Tighter to the corner on small screens, and a touch smaller — but still
       above the 44px minimum tap target. Labels stay collapsed here: there is
       no hover on touch, and the icons carry the meaning on their own. */
    .dm-contact-dock {
        left: 12px;
        bottom: 12px;
        gap: 10px;
    }

    .dm-contact-dock__btn {
        --dock-size: 50px;
    }

    .dm-footer__grid {
        grid-template-columns: 1fr;
    }

    .dm-btn {
        width: 100%;
    }

    .dm-hero__actions,
    .dm-cta-band__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dm-footer__newsletter {
        flex-direction: column;
    }

    .dm-prose img {
        margin-block: 1.2em;
    }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
    .dm-topbar,
    .dm-header,
    .dm-mobile-nav,
    .dm-contact-dock,
    .dm-footer,
    .dm-cta-band,
    .dm-breadcrumbs,
    .dm-slider__nav {
        display: none !important;
    }

    body {
        color: #000;
        font-size: 12pt;
    }

    .dm-calc__results {
        background: none;
        color: #000;
        border: 1px solid #000;
    }

    .dm-calc__results h3,
    .dm-calc__row dd,
    .dm-calc__headline .dm-calc__value {
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
    }
}