/* ==========================================================================
   Belfort design system — Deep Mortgages
   Tokens extracted from the source site's belfort-child theme:
     navy #0D2A4D · gold #ca9d75 · Marcellus (headings) · Muli (body)
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted so the page makes no request to fonts.googleapis.com.
   font-display:swap keeps text visible during load. */

@font-face {
    font-family: 'Marcellus';
    src: url('../fonts/marcellus-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/muli-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/muli-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/muli-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('../fonts/muli-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
    /* Brand */
    --dm-navy: #0D2A4D;
    --dm-navy-deep: #081E38;
    --dm-navy-soft: #17395F;
    --dm-gold: #ca9d75;
    --dm-gold-dark: #b3855d;
    --dm-gold-soft: rgba(202, 157, 117, .10);
    --dm-gold-line: rgba(202, 157, 117, .35);

    /* Neutrals */
    --dm-white: #ffffff;
    --dm-off: #f7f5f2;
    --dm-border: #e8e4de;
    --dm-body: #7a7a7a;
    --dm-heading: #0D2A4D;
    --dm-muted: #9a9a9a;

    /* Type */
    --dm-font-heading: 'Marcellus', Georgia, 'Times New Roman', serif;
    --dm-font-body: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Metrics */
    --dm-container: 1300px;
    --dm-container-narrow: 1000px;
    --dm-gutter: 30px;
    --dm-radius: 4px;
    --dm-radius-pill: 999px;
    --dm-topbar-h: 44px;
    --dm-header-h: 100px;
    --dm-header-h-stuck: 76px;
    --dm-logo-h: 56px;
    --dm-logo-h-stuck: 44px;

    /* Effects */
    --dm-shadow: 0 10px 40px rgba(13, 42, 77, .08);
    --dm-shadow-lg: 0 20px 60px rgba(13, 42, 77, .14);
    --dm-transition: .3s cubic-bezier(.4, 0, .2, 1);

    /*
     * Section rhythm. Fluid rather than a flat 100px: two stacked sections each
     * contributed 100px, so every seam on the page was a 200px void. This scales
     * the gap with the viewport and tops out at 88px on very wide screens.
     */
    --dm-section-y: clamp(54px, 5.4vw, 88px);
}

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--dm-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--dm-body);
    background: var(--dm-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
picture,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Preserve intrinsic sizing on decorative logos so the marquee stays even. */
.dm-lenders img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: none;
}

a {
    color: var(--dm-gold);
    text-decoration: none;
    transition: color var(--dm-transition);
}

a:hover {
    color: var(--dm-gold-dark);
}

ul,
ol {
    padding-left: 1.25em;
}

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5 {
    font-family: var(--dm-font-heading);
    font-weight: 400;
    color: var(--dm-heading);
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}

h6 {
    font-family: var(--dm-font-body);
    font-weight: 600;
    color: var(--dm-heading);
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.375rem); line-height: 1.15; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.625rem); line-height: 1.2; }
h3 { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); line-height: 1.3; }
h4 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.35; }
h5 { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.25rem); line-height: 1.4; }
h6 { font-size: 1.0625rem; line-height: 1.5; }

p {
    margin: 0 0 1.4em;
}

p:last-child {
    margin-bottom: 0;
}

strong, b { font-weight: 700; color: var(--dm-heading); }

blockquote {
    margin: 2em 0;
    padding: 1.6em 2em;
    border-left: 3px solid var(--dm-gold);
    background: var(--dm-off);
    font-family: var(--dm-font-heading);
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--dm-heading);
}

hr {
    border: 0;
    border-top: 1px solid var(--dm-border);
    margin: 2.5em 0;
}

::selection {
    background: var(--dm-gold);
    color: var(--dm-white);
}

/* --- Layout primitives --------------------------------------------------- */

.dm-container {
    width: 100%;
    max-width: var(--dm-container);
    margin-inline: auto;
    padding-inline: var(--dm-gutter);
}

.dm-container--narrow {
    max-width: var(--dm-container-narrow);
}

.dm-section {
    padding-block: var(--dm-section-y);
}

.dm-section--tight { padding-block: calc(var(--dm-section-y) * .72); }
.dm-section--flush-top { padding-top: 0; }
.dm-section--flush-bottom { padding-bottom: 0; }
.dm-section--off { background: var(--dm-off); }
.dm-section--navy { background: var(--dm-navy); color: rgba(255, 255, 255, .8); }
.dm-section--navy h1,
.dm-section--navy h2,
.dm-section--navy h3,
.dm-section--navy h4,
.dm-section--navy h5,
.dm-section--navy h6 { color: var(--dm-white); }

.dm-grid {
    display: grid;
    gap: var(--dm-gutter);
}

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

/* --- Buttons ------------------------------------------------------------- */

.dm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    font-family: var(--dm-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: var(--dm-radius);
    border: 1px solid transparent;
    transition: all var(--dm-transition);
    white-space: nowrap;
}

.dm-btn--gold {
    background: var(--dm-gold);
    border-color: var(--dm-gold);
    color: var(--dm-white);
}

.dm-btn--gold:hover {
    background: var(--dm-gold-dark);
    border-color: var(--dm-gold-dark);
    color: var(--dm-white);
    transform: translateY(-2px);
}

.dm-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .5);
    color: var(--dm-white);
}

.dm-btn--ghost:hover {
    background: var(--dm-white);
    border-color: var(--dm-white);
    color: var(--dm-navy);
    transform: translateY(-2px);
}

.dm-btn--navy {
    background: var(--dm-navy);
    border-color: var(--dm-navy);
    color: var(--dm-white);
}

.dm-btn--navy:hover {
    background: var(--dm-navy-soft);
    border-color: var(--dm-navy-soft);
    color: var(--dm-white);
    transform: translateY(-2px);
}

.dm-btn--outline {
    background: transparent;
    border-color: var(--dm-navy);
    color: var(--dm-navy);
}

.dm-btn--outline:hover {
    background: var(--dm-navy);
    color: var(--dm-white);
}

.dm-btn--sm { padding: 11px 24px; font-size: 12px; }
.dm-btn--block { display: flex; width: 100%; }

/* Gold arrow link — the theme's "Read More" affordance. */
.dm-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dm-gold);
}

.dm-link-arrow svg {
    transition: transform var(--dm-transition);
}

.dm-link-arrow:hover svg {
    transform: translateX(5px);
}

/* --- Scroll reveal --------------------------------------------------------
   Opt in with data-dm-reveal, order with --d (0, 1, 2 …).

   The hidden state is scoped to .dm-anim, which main.js sets on <html> before
   anything else runs. Without JS the class never lands, so content is never
   left invisible waiting for an observer that will not arrive. */

.dm-anim [data-dm-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .85s cubic-bezier(.16, .84, .44, 1),
        transform .85s cubic-bezier(.16, .84, .44, 1);
    transition-delay: calc(var(--d, 0) * 110ms);
}

.dm-anim [data-dm-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* --- Accessibility ------------------------------------------------------- */

.dm-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dm-skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    z-index: 9999;
    padding: 12px 22px;
    background: var(--dm-gold);
    color: var(--dm-white);
    font-weight: 700;
    border-radius: var(--dm-radius);
    transition: top var(--dm-transition);
}

.dm-skip-link:focus {
    top: 10px;
    color: var(--dm-white);
}

:focus-visible {
    outline: 2px solid var(--dm-gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Revealed content must not depend on a transition that no longer runs. */
    .dm-anim [data-dm-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}