/* ==========================================================================
Components — section titles, cards, sliders, marquee, forms, calculators
========================================================================== */
/* --- Section title --------------------------------------------------------- */
.dm-section-title {
margin-bottom: 56px;
}
.dm-section-title--center {
text-align: center;
max-width: 760px;
margin-inline: auto;
}
.dm-section-title__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dm-gold);
}
.dm-section-title__eyebrow::before,
.dm-section-title--center .dm-section-title__eyebrow::after {
content: "";
width: 34px;
height: 1px;
background: var(--dm-gold);
}
/* Balanced so a title never drops a single orphan word onto the last line. */
.dm-section-title h2,
.dm-section-title h3 {
text-wrap: balance;
margin-bottom: .35em;
}
.dm-section-title__lead {
font-size: 1.0625rem;
margin-bottom: 0;
}
/* --- Service card ---------------------------------------------------------- */
/*
* The photograph is inset rather than bled to the card edge. On the 3D variant
* that matters structurally: a raised image flush with the edge overhangs the
* card and reads as a rendering fault, where an inset one reads as lifting off
* the surface. Applied to the base card too, so every grid on the site matches.
*/
.dm-service-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: 18px;
overflow: hidden;
transition: all var(--dm-transition);
}
.dm-service-card:hover,
.dm-service-card:focus-within {
border-color: var(--dm-gold);
box-shadow: var(--dm-shadow);
transform: translateY(-6px);
}
/* ===========================================================================
* Uncropped media frames
* ---------------------------------------------------------------------------
* A large share of this site's artwork is branded graphics with the title and
* the Deepinder Sidhu logo set INTO the picture: the service banners, the 21
* location social cards, the blog title cards. Filling a fixed frame with
* object-fit:cover cut 15-44% off them — B Lending lost the "B" off its own
* title, and the location cards lost the strap line along the bottom.
*
* So every frame that shows authored artwork contains its image rather than
* cropping it, and a blurred over-scaled copy of the same picture fills the
* frame behind. Cards keep a uniform height, no dead letterbox bars appear,
* and nothing is lost on any side.
*
* Deliberately NOT applied to .dm-hero__media / .dm-pagehead__media: those are
* full-bleed decorative bands with no text, where cropping is the whole point.
* ======================================================================== */
.dm-service-card__media,
.dm-post-card__media,
.dm-post-feature__media {
position: relative;
overflow: hidden;
border-radius: 12px;
background: var(--dm-off);
}
/* 4:3 suits the service set: near enough the 1:1 graphics and 0.85 portraits
that the wings stay narrow, shallow enough that the one 16:9 banner reads. */
.dm-service-card__media { aspect-ratio: 4 / 3; }
.dm-service-card__media > img,
.dm-post-card__media > img,
.dm-post-feature__media > img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
/*
* The frame-filler. A real ![]()
rather than a CSS background so it inherits
* loading="lazy" — as a background the browser would fetch every one of these
* on first paint. Same src/srcset/sizes as the foreground copy, so it resolves
* to the same candidate and costs no extra request.
*
* Over-scaled because blur samples beyond the element box and would otherwise
* leave a pale rim inside the rounded corners.
*/
img.dm-media-blur {
position: absolute;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.25);
filter: blur(22px) saturate(1.25) brightness(.85);
}
/* Zoom the foreground only — scaling the backdrop would expose its blurred edge. */
.dm-service-card:hover .dm-service-card__media > img:not(.dm-media-blur),
.dm-service-card:focus-within .dm-service-card__media > img:not(.dm-media-blur),
.dm-post-card:hover .dm-post-card__media > img:not(.dm-media-blur),
.dm-post-card:focus-within .dm-post-card__media > img:not(.dm-media-blur) {
transform: scale(1.07);
}
/* Wash under the index chip, so it reads on any photograph.
z-index matches the ![]()
— being later in tree order it still paints above,
while the chip's z-index 2 keeps the number clear of it. */
.dm-service-card__media::after {
content: "";
position: absolute;
z-index: 1;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(180deg, transparent, rgba(8, 30, 56, .55));
opacity: 0;
transition: opacity var(--dm-transition);
pointer-events: none;
}
.dm-service-card__index {
position: absolute;
z-index: 2;
left: 18px;
bottom: 16px;
font-family: var(--dm-font-heading);
font-size: 1.5rem;
line-height: 1;
color: var(--dm-white);
text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
opacity: 0;
transform: translateY(10px);
transition: opacity var(--dm-transition), transform var(--dm-transition);
}
.dm-service-card__index::before {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 26px;
height: 2px;
background: var(--dm-gold);
}
.dm-service-card:hover .dm-service-card__media::after,
.dm-service-card:focus-within .dm-service-card__media::after,
.dm-service-card:hover .dm-service-card__index,
.dm-service-card:focus-within .dm-service-card__index {
opacity: 1;
transform: none;
}
.dm-service-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 26px 18px 22px;
}
.dm-service-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin-bottom: 20px;
border-radius: 50%;
background: var(--dm-gold-soft);
color: var(--dm-gold);
}
/* Level-agnostic for the same reason as the post card — this component also
takes a $level, so naming a single tag leaves the others unstyled. */
.dm-service-card :is(h2, h3, h4) {
font-size: 1.375rem;
line-height: 1.35;
margin-bottom: .5em;
}
.dm-service-card :is(h2, h3, h4) a {
color: var(--dm-heading);
}
.dm-service-card:hover :is(h2, h3, h4) a,
.dm-service-card:focus-within :is(h2, h3, h4) a {
color: var(--dm-gold);
}
/* Same reasoning as the About copy: #7a7a7a is 4.0:1 on white. */
.dm-service-card p {
flex: 1 1 auto;
font-size: 15px;
margin-bottom: 22px;
color: rgba(13, 42, 77, .72);
}
/* --- Services scene --------------------------------------------------------
Wireframe solids tumbling behind the card grid. Pure CSS 3D: no canvas, no
library, three composited elements driving the whole thing.
Kept faint on purpose — this should read as texture in the negative space
between cards, never as an object competing with them for attention. */
.dm-services {
position: relative;
overflow: hidden;
}
/* Content rides above the scene. */
.dm-services > .dm-container {
position: relative;
z-index: 1;
}
/*
* No `perspective` here on purpose. A single vanishing point at the centre of
* a full-width scene shears anything sitting near the edges into a flat
* parallelogram; each solid carries its own perspective() instead, so every
* one is viewed head-on from its own position.
*/
.dm-services__scene {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/*
* Each item positions and gently bobs; the house inside it turns. Two elements
* rather than one because a single node cannot carry two independent transform
* animations.
*
* Geometry, all driven off --w so a house is resized by changing one value:
* --w width and depth of the walls
* --h wall height
* --r roof rise above the walls
* --rl length of a roof slope, hypotenuse of (--w / 2) and --r
* --ra slope pitch, atan((--w / 2) / --r) — constant while proportions hold
*
* Proportions are a 3-4-5 triangle (run 32, rise 24, slope 40 at --w: 64), so
* every derived value stays exact at any size instead of accumulating rounding.
*/
.dm-scene__item {
--w: 80px;
--h: 57.5px;
--r: 30px;
--rl: 50px;
--ra: 53.13deg;
position: absolute;
animation: dm-scene-float 9s ease-in-out infinite alternate;
}
@keyframes dm-scene-float {
from { transform: translateY(-5px); }
to { transform: translateY(5px); }
}
/* A turntable spin, not a tumble — one axis reads as considered, three reads
as a screensaver. The fixed tilt keeps the roof in view throughout. */
.dm-house {
position: relative;
display: block;
width: var(--w);
height: var(--h);
transform-style: preserve-3d;
color: rgba(202, 157, 117, .6);
will-change: transform;
animation: dm-house-turn var(--dur, 34s) linear infinite;
}
@keyframes dm-house-turn {
from { transform: perspective(600px) rotateX(14deg) rotateY(0deg); }
to { transform: perspective(600px) rotateX(14deg) rotateY(360deg); }
}
.dm-house__wall {
position: absolute;
inset: 0;
border: 1px solid currentColor;
background: rgba(202, 157, 117, .04);
}
.dm-house__wall--f { transform: translateZ(calc(var(--w) / 2)); }
.dm-house__wall--b { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.dm-house__wall--l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.dm-house__wall--r { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
/* Slopes are lifted to sit between eave and ridge, then pitched about X. */
.dm-house__roof {
position: absolute;
left: 0;
top: 0;
width: var(--w);
height: var(--rl);
border: 1px solid currentColor;
background: rgba(202, 157, 117, .06);
}
.dm-house__roof--f {
transform: translate3d(0, calc(-1 * (var(--r) / 2 + var(--rl) / 2)), calc(var(--w) / 4))
rotateX(var(--ra));
}
.dm-house__roof--b {
transform: translate3d(0, calc(-1 * (var(--r) / 2 + var(--rl) / 2)), calc(-1 * var(--w) / 4))
rotateX(calc(-1 * var(--ra)));
}
/* Gable ends close the roof off, so the house still reads side-on. */
.dm-house__gable {
position: absolute;
left: 0;
top: 0;
width: var(--w);
height: var(--r);
}
.dm-house__gable polygon {
fill: rgba(202, 157, 117, .04);
stroke: currentColor;
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.dm-house__gable--l {
transform: translateY(calc(-1 * var(--r))) rotateY(-90deg) translateZ(calc(var(--w) / 2));
}
.dm-house__gable--r {
transform: translateY(calc(-1 * var(--r))) rotateY(90deg) translateZ(calc(var(--w) / 2));
}
/* Placement: the margins either side of the container, never behind the cards. */
.dm-scene__item--a {
top: 14%;
left: 40px;
--dur: 34s;
}
.dm-scene__item--b {
--w: 56px; --h: 40px; --r: 21px; --rl: 35px;
--dur: 44s;
top: 44%;
right: 44px;
animation-delay: -3s;
}
.dm-scene__item--c {
--w: 46px; --h: 33px; --r: 17.25px; --rl: 28.75px;
--dur: 39s;
bottom: 13%;
left: 62px;
animation-delay: -6s;
opacity: .8;
}
/* Offset phases, so the three are never caught facing the same way. */
.dm-scene__item--b .dm-house { animation-delay: -14s; }
.dm-scene__item--c .dm-house { animation-delay: -27s; }
@media (prefers-reduced-motion: reduce) {
.dm-scene__item,
.dm-house {
animation: none;
}
}
/* --- 3D service cards ------------------------------------------------------
The wrapper holds the perspective, the card is the thing that rotates, and
its children ride at different depths so the tilt reads as real parallax
rather than a flat image being skewed.
Depth needs transform-style: preserve-3d, and any overflow other than
visible forces that back to flat — so the clipping moves to the media. */
.dm-card3d {
perspective: 1150px;
}
.dm-service-card--3d {
overflow: visible;
transform-style: preserve-3d;
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition:
transform .5s cubic-bezier(.16, .84, .44, 1),
box-shadow .5s cubic-bezier(.16, .84, .44, 1),
border-color var(--dm-transition);
}
/* Pointer is over the card: follow it directly, no easing to lag behind. */
.dm-card3d.is-tilting .dm-service-card--3d {
transition:
box-shadow .5s cubic-bezier(.16, .84, .44, 1),
border-color var(--dm-transition);
}
.dm-service-card--3d:hover,
.dm-service-card--3d:focus-within {
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
box-shadow:
0 34px 60px -28px rgba(8, 30, 56, .45),
0 0 0 1px var(--dm-gold-line);
}
/* Depth layers. Larger translateZ = closer to the viewer. */
.dm-service-card--3d .dm-service-card__media,
.dm-service-card--3d :is(h2, h3, h4),
.dm-service-card--3d .dm-link-arrow,
.dm-service-card--3d .dm-service-card__index {
transition: transform .5s cubic-bezier(.16, .84, .44, 1), opacity var(--dm-transition), color var(--dm-transition);
}
.dm-card3d.is-tilting .dm-service-card__media { transform: translateZ(28px); }
.dm-card3d.is-tilting .dm-service-card__index { transform: translateZ(46px); opacity: 1; }
.dm-card3d.is-tilting :is(h2, h3, h4) { transform: translateZ(38px); }
.dm-card3d.is-tilting .dm-link-arrow { transform: translateZ(30px); }
/* Specular highlight tracking the pointer. Gold, because a white glare is
invisible on a white card. */
.dm-service-card--3d::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
background: radial-gradient(
260px circle at var(--mx, 50%) var(--my, 50%),
rgba(202, 157, 117, .20),
transparent 58%);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.dm-card3d.is-tilting .dm-service-card--3d::after {
opacity: 1;
}
/* Entrance: the card swings up out of the page rather than sliding. Overrides
the generic reveal transform, which is a plain translate. */
.dm-anim .dm-card3d[data-dm-reveal] {
transform: perspective(1200px) rotateX(14deg) translateY(40px) scale(.95);
transform-origin: 50% 100%;
}
.dm-anim .dm-card3d[data-dm-reveal].is-visible {
transform: perspective(1200px) rotateX(0) translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.dm-service-card--3d,
.dm-card3d.is-tilting .dm-service-card__media,
.dm-card3d.is-tilting .dm-service-card__index,
.dm-card3d.is-tilting :is(h2, h3, h4),
.dm-card3d.is-tilting .dm-link-arrow {
transform: none;
}
.dm-service-card--3d::after {
display: none;
}
}
/* --- Icon with text -------------------------------------------------------- */
.dm-icon-text {
display: flex;
gap: 20px;
align-items: flex-start;
}
.dm-icon-text__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 1px solid var(--dm-gold-line);
border-radius: 50%;
color: var(--dm-gold);
background: var(--dm-gold-soft);
}
.dm-icon-text h3,
.dm-icon-text h4 {
font-size: 1.25rem;
margin-bottom: .4em;
}
.dm-icon-text p {
font-size: 15px;
margin-bottom: 0;
}
/* Image-icon variant — the live "Why Choose Us" uses illustrated PNG icons. */
.dm-icon-text__img {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
}
.dm-icon-text__img img {
max-width: 100%;
max-height: 64px;
width: auto;
height: auto;
}
/* Dropcap on the opening paragraph of the about block. */
.dm-dropcap::first-letter {
float: left;
font-family: var(--dm-font-heading);
font-size: 3.4rem;
line-height: .84;
padding: 6px 12px 0 0;
color: var(--dm-gold);
}
/* Numbered variant used by "Why Choose Us" */
.dm-icon-text__number {
flex: 0 0 auto;
font-family: var(--dm-font-heading);
font-size: 2.25rem;
line-height: 1;
color: var(--dm-gold);
opacity: .5;
min-width: 56px;
}
/* --- Split feature --------------------------------------------------------- */
.dm-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.dm-split--reverse .dm-split__media {
order: 2;
}
.dm-split__media {
position: relative;
}
.dm-split__media img {
width: 100%;
border-radius: var(--dm-radius);
}
/* Gold frame offset behind the image — a Belfort signature. */
.dm-split__media::before {
content: "";
position: absolute;
inset: -18px -18px 18px 18px;
border: 1px solid var(--dm-gold-line);
border-radius: var(--dm-radius);
z-index: -1;
}
/* Dropcaps are opt-in via .dm-dropcap — applying them to every first paragraph in a
split body also hit the contact form and flash messages. */
/* --- About feature (homepage) ----------------------------------------------
Kept separate from .dm-split because the About page still uses that layout
with a different photograph and no credentials strip.
The portrait is a transparent PNG cutout, so it was previously standing on
page white inside a hairline frame — reading as an empty box. Here it gets a
navy stage to stand in, which is what the cutout was made for. */
.dm-about {
position: relative;
overflow: hidden;
}
/* Warm haze behind the portrait column, tying the section to the hero. */
.dm-about__wash {
position: absolute;
z-index: 0;
top: -14%;
right: -12%;
width: 48%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(202, 157, 117, .16) 0%, transparent 66%);
pointer-events: none;
}
.dm-about__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.06fr .94fr;
gap: clamp(48px, 5vw, 88px);
align-items: center;
}
/* -- Portrait -------------------------------------------------------------- */
/*
* Copy comes first in the source, so reading order matches visual order and
* the grid needs no `order` reshuffling at any breakpoint.
*
* Stretched, not centred: at its natural ratio the panel was 628px inside an
* 863px row, leaving 117px of dead white above and below it. Filling the row
* squares the two columns off against each other instead.
*/
.dm-about__media {
position: relative;
align-self: stretch;
}
/* The Belfort offset frame, thrown to the opposite corner from the card. */
.dm-about__media::before {
content: "";
position: absolute;
z-index: 0;
inset: 28px -28px -28px 28px;
border: 1px solid var(--dm-gold-line);
border-radius: 18px;
}
.dm-about__stage {
position: relative;
z-index: 1;
height: 100%;
min-height: 520px;
overflow: hidden;
border-radius: 18px;
background: linear-gradient(165deg, var(--dm-navy-soft) 0%, var(--dm-navy) 46%, var(--dm-navy-deep) 100%);
box-shadow: var(--dm-shadow-lg);
}
/* Halo behind the subject so she separates from the panel. */
.dm-about__stage::before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 4%;
width: 82%;
aspect-ratio: 1;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(202, 157, 117, .32) 0%, rgba(202, 157, 117, .08) 45%, transparent 66%);
}
/* Grounds the figure in the panel instead of cutting her off at the edge. */
.dm-about__stage::after {
content: "";
position: absolute;
z-index: 2;
inset: auto 0 0 0;
height: 22%;
background: linear-gradient(180deg, transparent 0%, rgba(8, 30, 56, .72) 70%, var(--dm-navy-deep) 100%);
pointer-events: none;
}
/* The panel's height comes from the row, so the cutout crops to fit it. */
.dm-about__stage img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* Identity card riding the bottom-left corner. */
.dm-about__card {
position: absolute;
z-index: 3;
left: -26px;
bottom: 40px;
display: flex;
align-items: center;
gap: 14px;
padding: 15px 22px 15px 16px;
background: var(--dm-white);
border-radius: 14px;
box-shadow:
0 26px 50px -22px rgba(8, 30, 56, .48),
0 0 0 1px rgba(13, 42, 77, .05);
}
.dm-about__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--dm-gold-soft);
color: var(--dm-gold);
}
.dm-about__card-text {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1.25;
}
.dm-about__card-text strong {
font-family: var(--dm-font-heading);
font-weight: 400;
font-size: 1.125rem;
color: var(--dm-heading);
}
.dm-about__card-text span {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--dm-gold-dark);
}
/* -- Copy ------------------------------------------------------------------ */
.dm-about__body {
min-width: 0;
}
/*
* Navy-tinted body grey rather than the site's neutral #7a7a7a, which sits at
* 4.0:1 on white — under the 4.5:1 floor. This reads ~6.7:1 and warms the
* column toward the brand at the same time.
*/
.dm-about__prose {
max-width: 34em;
color: rgba(13, 42, 77, .76);
font-size: 16.5px;
line-height: 1.9;
}
.dm-about__prose p {
margin-bottom: 1.5em;
}
.dm-about__prose p:last-child {
margin-bottom: 0;
}
/* Sized in em so it tracks the paragraph, and cropped to two lines exactly. */
.dm-about__prose .dm-dropcap::first-letter {
float: left;
font-family: var(--dm-font-heading);
font-size: 3.85em;
line-height: .82;
padding: .04em .12em 0 0;
color: var(--dm-gold);
}
.dm-about__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
max-width: 34em;
margin: 42px 0 0;
padding-top: 34px;
border-top: 1px solid var(--dm-border);
}
.dm-about__stat-value {
display: block;
margin-bottom: 8px;
font-family: var(--dm-font-heading);
font-size: clamp(1.55rem, 1.2rem + .9vw, 2rem);
line-height: 1;
color: var(--dm-gold);
}
/* --dm-muted (#9a9a9a) is only 2.8:1 on white — too thin for a 12.5px label. */
.dm-about__stat-label {
display: block;
margin: 0;
font-size: 12.5px;
letter-spacing: 1.2px;
line-height: 1.45;
text-transform: uppercase;
color: rgba(13, 42, 77, .68);
}
.dm-about__cta {
margin-top: 42px;
}
/* Navy pill with a sliding arrow — gold stays reserved for the primary CTAs. */
.dm-about__cta .dm-btn {
padding: 16px 34px;
border-radius: var(--dm-radius-pill);
}
.dm-about__cta svg {
transition: transform var(--dm-transition);
}
.dm-about__cta .dm-btn:hover svg {
transform: translateX(4px);
}
/* --- Quick enquiry card (page header) --------------------------------------
Sits on the photograph, so it needs to read as an object above the page
rather than a panel painted on it. The depth comes from a real perspective
tilt plus stacked shadows — one tight and dark for contact, one wide and soft
for the drop, and a gold rim light along the top edge. */
/*
* Compact by design — this is a three-field lead grab beside a headline, not a
* full contact form.
*
* It carried a rotateY(-4deg) tilt for "3D". A rotated card foreshortens: the
* left edge sits taller than the right, and every row's left edge lands on a
* different x — the eyebrow at 218px, the button at 207px. That reads as broken
* alignment rather than depth, on the one element where a visitor is trying to
* hit input boxes. Depth now comes from stacked shadows and a gold rim light,
* with a straight lift on hover; every row shares one left edge.
*/
.dm-inquiry {
width: 100%;
max-width: 400px;
/* Sits to the outer edge of its column rather than floating mid-gap. */
margin-left: auto;
}
.dm-inquiry__card {
position: relative;
padding: clamp(20px, 1.7vw, 26px);
border-radius: 16px;
background: linear-gradient(165deg, rgba(23, 57, 95, .97) 0%, rgba(13, 42, 77, .97) 45%, rgba(8, 30, 56, .98) 100%);
border: 1px solid rgba(255, 255, 255, .12);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow:
0 1px 0 rgba(202, 157, 117, .38) inset,
0 14px 28px -14px rgba(0, 0, 0, .68),
0 38px 70px -36px rgba(0, 0, 0, .82);
transition: transform .45s cubic-bezier(.16, .84, .44, 1), box-shadow .45s cubic-bezier(.16, .84, .44, 1);
}
.dm-inquiry__card:hover,
.dm-inquiry__card:focus-within {
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(202, 157, 117, .55) inset,
0 20px 36px -14px rgba(0, 0, 0, .7),
0 48px 88px -38px rgba(0, 0, 0, .88);
}
.dm-inquiry__eyebrow {
display: block;
margin-bottom: 6px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--dm-gold);
}
.dm-inquiry__title {
margin-bottom: 16px;
font-size: 1.15rem;
line-height: 1.3;
color: var(--dm-white);
}
.dm-inquiry__field {
margin-bottom: 10px;
}
.dm-inquiry__field label {
display: block;
margin-bottom: 4px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .3px;
color: rgba(255, 255, 255, .78);
}
.dm-inquiry__optional {
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, .5);
}
.dm-inquiry__field input,
.dm-inquiry__field textarea {
display: block;
width: 100%;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 9px;
background: rgba(255, 255, 255, .07);
color: var(--dm-white);
font-family: inherit;
font-size: 14px;
line-height: 1.4;
transition: border-color var(--dm-transition), background var(--dm-transition), box-shadow var(--dm-transition);
}
/* Vertical only — a horizontally resizable textarea can be dragged wider than
the card it sits in. */
.dm-inquiry__field textarea {
resize: vertical;
min-height: 74px;
max-height: 200px;
}
.dm-inquiry__field input::placeholder,
.dm-inquiry__field textarea::placeholder {
color: rgba(255, 255, 255, .42);
}
.dm-inquiry__field input:focus,
.dm-inquiry__field textarea:focus {
outline: none;
border-color: var(--dm-gold);
background: rgba(255, 255, 255, .11);
box-shadow: 0 0 0 3px rgba(202, 157, 117, .18);
}
.dm-inquiry__submit {
margin-top: 14px;
padding: 13px 22px;
font-size: 12px;
letter-spacing: 1.2px;
border-radius: var(--dm-radius-pill);
}
.dm-inquiry__submit svg { transition: transform var(--dm-transition); }
.dm-inquiry__submit:hover svg { transform: translateX(4px); }
.dm-inquiry__note {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 10px 0 0;
font-size: 11.5px;
line-height: 1.45;
color: rgba(255, 255, 255, .58);
}
.dm-inquiry__note svg { flex: 0 0 auto; color: var(--dm-gold); }
.dm-inquiry__flash {
margin-bottom: 16px;
padding: 12px 15px;
border-radius: 10px;
border-left: 3px solid;
font-size: 13.5px;
line-height: 1.55;
}
.dm-inquiry__flash--ok {
background: rgba(63, 159, 95, .18);
border-color: #6fcf8f;
color: #d7f3e0;
}
.dm-inquiry__flash--bad {
background: rgba(200, 68, 60, .18);
border-color: #e08a84;
color: #ffdedb;
}
@media (prefers-reduced-motion: reduce) {
.dm-inquiry__card,
.dm-inquiry__card:hover,
.dm-inquiry__card:focus-within {
transform: none;
transition: none;
}
}
/* --- Service page layout ---------------------------------------------------
Body beside a sticky rail. These bodies run to 5-8KB, so a single narrow
column left the call to action stranded at the bottom of a long scroll. */
.dm-service-layout {
display: grid;
grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
gap: clamp(36px, 4vw, 68px);
align-items: start;
}
.dm-service-aside {
position: sticky;
top: calc(var(--dm-header-h-stuck) + 24px);
display: flex;
flex-direction: column;
gap: 22px;
}
.dm-service-cta {
position: relative;
overflow: hidden;
padding: clamp(26px, 2.4vw, 34px);
border-radius: 18px;
background: linear-gradient(165deg, var(--dm-navy-soft) 0%, var(--dm-navy) 48%, var(--dm-navy-deep) 100%);
color: rgba(255, 255, 255, .78);
box-shadow: var(--dm-shadow-lg);
}
.dm-service-cta::before {
content: "";
position: absolute;
top: -40%;
right: -30%;
width: 260px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(202, 157, 117, .3) 0%, transparent 66%);
pointer-events: none;
}
.dm-service-cta > * {
position: relative;
z-index: 1;
}
.dm-service-cta__eyebrow {
display: block;
margin-bottom: 10px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--dm-gold);
}
.dm-service-cta__title {
margin-bottom: 10px;
font-size: 1.3rem;
line-height: 1.3;
color: var(--dm-white);
}
.dm-service-cta__text {
margin-bottom: 22px;
font-size: 14.5px;
line-height: 1.7;
}
.dm-service-cta__phone {
display: inline-flex;
align-items: center;
gap: 11px;
margin-bottom: 20px;
font-family: var(--dm-font-heading);
font-size: 1.3rem;
color: var(--dm-white);
}
.dm-service-cta__phone svg { flex: 0 0 auto; color: var(--dm-gold); }
.dm-service-cta__phone:hover { color: var(--dm-gold); }
.dm-service-cta__btn {
border-radius: var(--dm-radius-pill);
padding: 15px 26px;
}
.dm-service-cta__btn svg { transition: transform var(--dm-transition); }
.dm-service-cta__btn:hover svg { transform: translateX(4px); }
.dm-service-points {
margin: 0;
padding: clamp(22px, 2vw, 28px);
list-style: none;
background: var(--dm-off);
border: 1px solid var(--dm-border);
border-radius: 16px;
}
.dm-service-points li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14.5px;
line-height: 1.65;
color: rgba(13, 42, 77, .72);
}
.dm-service-points li + li {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--dm-border);
}
.dm-service-points strong {
display: block;
margin-bottom: 3px;
color: var(--dm-heading);
font-weight: 600;
}
.dm-service-points__tick {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 2px;
border-radius: 50%;
background: var(--dm-gold);
color: var(--dm-white);
}
/* --- Calculator tools ------------------------------------------------------
These cards carry no photograph, so they use their own block rather than the
image-shaped service card — which left an inset gap where a picture would be
and a lonely icon floating above it. */
.dm-tools {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 2.2vw, 30px);
}
.dm-tool {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
padding: clamp(28px, 2.6vw, 40px);
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: 18px;
transition: border-color var(--dm-transition), box-shadow var(--dm-transition), transform var(--dm-transition);
}
/* Gold wash that sweeps in from the corner on hover. */
.dm-tool::before {
content: "";
position: absolute;
top: -60%;
right: -30%;
width: 300px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(202, 157, 117, .16) 0%, transparent 66%);
opacity: 0;
transition: opacity var(--dm-transition);
pointer-events: none;
}
.dm-tool:hover,
.dm-tool:focus-within {
border-color: var(--dm-gold);
box-shadow: 0 26px 52px -30px rgba(8, 30, 56, .42);
transform: translateY(-5px);
}
.dm-tool:hover::before,
.dm-tool:focus-within::before {
opacity: 1;
}
.dm-tool > * {
position: relative;
z-index: 1;
}
.dm-tool__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 22px;
border: 1px solid var(--dm-gold-line);
border-radius: 50%;
background: var(--dm-gold-soft);
color: var(--dm-gold);
transition: background var(--dm-transition), color var(--dm-transition), transform var(--dm-transition);
}
.dm-tool:hover .dm-tool__icon,
.dm-tool:focus-within .dm-tool__icon {
background: var(--dm-gold);
border-color: var(--dm-gold);
color: var(--dm-white);
transform: translateY(-2px);
}
.dm-tool__title {
margin-bottom: .5em;
font-size: 1.375rem;
line-height: 1.3;
}
.dm-tool__title a { color: var(--dm-heading); }
.dm-tool:hover .dm-tool__title a,
.dm-tool:focus-within .dm-tool__title a { color: var(--dm-gold); }
/* Pushes the link to the bottom so every card's CTA sits on one line. */
.dm-tool__lead {
flex: 1 1 auto;
margin-bottom: 24px;
font-size: 15px;
line-height: 1.75;
color: rgba(13, 42, 77, .72);
}
.dm-tools--3 {
grid-template-columns: repeat(3, 1fr);
}
/* --- Assurances ------------------------------------------------------------- */
.dm-assurances {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 44px);
}
.dm-assurance__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 20px;
border-radius: 50%;
background: var(--dm-white);
border: 1px solid var(--dm-border);
color: var(--dm-gold);
}
/* Level-agnostic: the calculators index renders these as h3 under a section
title, a tool page renders them as h2 with none above. Naming one tag left
the other falling back to the global heading size. */
.dm-assurance :is(h2, h3, h4) {
margin-bottom: .5em;
font-size: 1.2rem;
line-height: 1.35;
}
.dm-assurance p {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: rgba(13, 42, 77, .72);
}
/* --- Disclaimer ------------------------------------------------------------- */
.dm-disclaimer {
position: relative;
margin-top: clamp(36px, 4vw, 56px);
padding: clamp(26px, 2.6vw, 36px) clamp(26px, 2.6vw, 40px);
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-left: 3px solid var(--dm-gold);
border-radius: 14px;
}
.dm-disclaimer__title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
font-size: 1.125rem;
}
.dm-disclaimer__title svg {
flex: 0 0 auto;
color: var(--dm-gold);
}
.dm-disclaimer ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 34px;
margin: 0;
padding: 0;
list-style: none;
}
.dm-disclaimer li {
position: relative;
padding-left: 20px;
font-size: 14.5px;
line-height: 1.7;
color: rgba(13, 42, 77, .72);
}
.dm-disclaimer li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dm-gold-line);
}
/* --- Contact ---------------------------------------------------------------
Details on the left, form on the right. The form is the action this page
exists for, so it takes the wider column and sits on white against the navy
panel beside it. */
/*
* The panel holds far less than the form — roughly 600px against 1150px.
* Stretching it would just paint a tall well of empty navy, and top-aligning it
* left the same hole in the page. It sticks instead, so the phone number stays
* beside the reader the whole way down the form.
*/
.dm-contact {
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: clamp(28px, 3vw, 52px);
align-items: start;
}
/* -- Details panel -- */
.dm-contact__aside {
position: sticky;
top: calc(var(--dm-header-h-stuck) + 24px);
display: flex;
flex-direction: column;
overflow: hidden;
padding: clamp(30px, 3vw, 46px);
border-radius: 18px;
background: linear-gradient(165deg, var(--dm-navy-soft) 0%, var(--dm-navy) 48%, var(--dm-navy-deep) 100%);
color: rgba(255, 255, 255, .78);
box-shadow: var(--dm-shadow-lg);
}
.dm-contact__aside::before {
content: "";
position: absolute;
top: -30%;
right: -25%;
width: 320px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(202, 157, 117, .28) 0%, transparent 66%);
pointer-events: none;
}
.dm-contact__aside > * {
position: relative;
z-index: 1;
}
.dm-contact__eyebrow {
display: block;
margin-bottom: 12px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dm-gold);
}
.dm-contact__heading {
margin-bottom: 28px;
font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
color: var(--dm-white);
}
/* The number is the fastest route to a human — sized accordingly. */
.dm-contact__phone {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
font-family: var(--dm-font-heading);
font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
color: var(--dm-white);
}
.dm-contact__email {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 26px;
font-size: 15px;
color: rgba(255, 255, 255, .82);
word-break: break-word;
}
.dm-contact__phone svg,
.dm-contact__email svg {
flex: 0 0 auto;
color: var(--dm-gold);
}
.dm-contact__phone:hover,
.dm-contact__email:hover {
color: var(--dm-gold);
}
.dm-contact__hours {
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .12);
font-size: 14.5px;
line-height: 1.75;
}
.dm-contact__hours strong {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 8px;
color: var(--dm-white);
font-weight: 600;
}
.dm-contact__hours strong svg { color: var(--dm-gold); }
.dm-contact__hours span { display: block; }
.dm-contact__offices {
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .12);
}
.dm-contact__office + .dm-contact__office {
margin-top: 18px;
}
.dm-contact__office strong {
display: block;
margin-bottom: 6px;
color: var(--dm-white);
font-weight: 600;
font-size: 14px;
letter-spacing: .4px;
}
.dm-contact__office > span {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14.5px;
line-height: 1.6;
}
.dm-contact__office svg {
flex: 0 0 auto;
margin-top: 4px;
color: var(--dm-gold);
}
.dm-contact__licence {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 24px 0 0;
padding: 7px 14px;
border: 1px solid rgba(202, 157, 117, .4);
border-radius: var(--dm-radius-pill);
background: var(--dm-gold-soft);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.2;
color: rgba(255, 255, 255, .9);
}
.dm-contact__licence svg { flex: 0 0 auto; color: var(--dm-gold); }
.dm-contact__social {
display: flex;
gap: 12px;
margin-top: 26px;
}
.dm-contact__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 50%;
color: rgba(255, 255, 255, .8);
transition: all var(--dm-transition);
}
.dm-contact__social a:hover {
background: var(--dm-gold);
border-color: var(--dm-gold);
color: var(--dm-white);
transform: translateY(-3px);
}
/* -- Form card -- */
.dm-contact__form {
padding: clamp(28px, 3vw, 46px);
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: 18px;
box-shadow: 0 22px 48px -30px rgba(8, 30, 56, .35);
/* Anchor target for the post-submit redirect — keep the id in the markup. */
scroll-margin-top: calc(var(--dm-header-h-stuck) + 20px);
}
.dm-contact__form-title {
margin-bottom: 6px;
font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
}
.dm-contact__form-note {
margin-bottom: 26px;
font-size: 14px;
color: var(--dm-muted);
}
.dm-contact__submit {
width: 100%;
padding: 17px 34px;
border-radius: var(--dm-radius-pill);
}
.dm-contact__submit svg { transition: transform var(--dm-transition); }
.dm-contact__submit:hover svg { transform: translateX(4px); }
/* -- Offices -- */
.dm-offices {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(24px, 3vw, 40px);
}
.dm-office-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: 18px;
transition: border-color var(--dm-transition), box-shadow var(--dm-transition), transform var(--dm-transition);
}
.dm-office-card:hover,
.dm-office-card:focus-within {
border-color: var(--dm-gold);
box-shadow: var(--dm-shadow);
transform: translateY(-5px);
}
.dm-office-card__map {
display: block;
aspect-ratio: 16 / 10;
background: var(--dm-off);
}
.dm-office-card__map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Stand-in when no embeddable map URL exists — deliberate, not a dead frame. */
.dm-office-card__map--static {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background:
radial-gradient(circle at 50% 45%, rgba(202, 157, 117, .16) 0%, transparent 62%),
linear-gradient(165deg, var(--dm-navy-soft) 0%, var(--dm-navy) 55%, var(--dm-navy-deep) 100%);
color: rgba(255, 255, 255, .84);
transition: color var(--dm-transition);
}
.dm-office-card__pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border: 1px solid var(--dm-gold-line);
border-radius: 50%;
background: var(--dm-gold-soft);
color: var(--dm-gold);
}
.dm-office-card__static-label {
font-size: 12.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.dm-office-card__map--static:hover {
color: var(--dm-gold);
}
.dm-office-card__body {
flex: 1 1 auto;
padding: 26px 26px 28px;
}
.dm-office-card h3 {
margin-bottom: 14px;
font-size: 1.25rem;
}
.dm-office-card__address {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
font-size: 15px;
line-height: 1.65;
color: rgba(13, 42, 77, .74);
}
.dm-office-card__address svg {
flex: 0 0 auto;
margin-top: 4px;
color: var(--dm-gold);
}
/* --- Awards ----------------------------------------------------------------
The certificates are the content, so they are presented as framed pieces
rather than as illustrations beside text. Ratio matches the source files
(1600x2000), so `cover` crops nothing. */
.dm-awards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(34px, 4vw, 68px);
align-items: start;
}
.dm-award__frame {
position: relative;
overflow: hidden;
border-radius: 18px;
background: var(--dm-navy-deep);
box-shadow: 0 26px 54px -28px rgba(8, 30, 56, .5);
transition: transform var(--dm-transition), box-shadow var(--dm-transition);
}
.dm-award:hover .dm-award__frame {
transform: translateY(-6px);
box-shadow: 0 34px 64px -26px rgba(8, 30, 56, .58);
}
.dm-award__frame img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* Gold hairline inset into the frame — a mount, not a border. */
.dm-award__frame::after {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(202, 157, 117, .45);
border-radius: 10px;
pointer-events: none;
}
.dm-award__year {
position: absolute;
z-index: 2;
top: 20px;
left: 20px;
padding: 7px 16px;
border-radius: var(--dm-radius-pill);
background: var(--dm-gold);
color: var(--dm-white);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.6px;
line-height: 1.2;
box-shadow: 0 8px 20px -8px rgba(202, 157, 117, .9);
}
.dm-award__body {
padding-top: 28px;
}
.dm-award__title {
margin-bottom: 12px;
font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem);
}
.dm-award__issuer {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 14px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--dm-gold-dark);
}
.dm-award__issuer svg {
flex: 0 0 auto;
color: var(--dm-gold);
}
.dm-award__detail {
margin: 0;
max-width: 46ch;
color: rgba(13, 42, 77, .74);
}
.dm-awards__note {
margin-top: clamp(40px, 4vw, 64px);
}
/* --- Section intro (editable heading + lead from page body) ----------------
Gives CMS-authored intro copy the same weight as a section-title component,
without forcing the heading and lead into template fields. */
.dm-intro {
text-align: center;
}
.dm-intro h2 {
position: relative;
margin-top: 0;
padding-bottom: 20px;
margin-bottom: 22px;
}
.dm-intro h2::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 54px;
height: 2px;
transform: translateX(-50%);
background: var(--dm-gold);
}
.dm-intro p {
max-width: 62ch;
margin-inline: auto;
font-size: 1.0625rem;
color: rgba(13, 42, 77, .74);
}
/* --- Bio (About page) ------------------------------------------------------
The body copy on this page runs to roughly 1,400px. Centring an image
against it left the entire left half of the page empty, so the card is
sticky instead — it follows the reader the whole way down. */
.dm-bio__grid {
display: grid;
grid-template-columns: .82fr 1.18fr;
gap: clamp(40px, 4.5vw, 78px);
align-items: start;
}
.dm-bio__aside {
position: sticky;
/* Clears the condensed sticky header rather than tucking under it. */
top: calc(var(--dm-header-h-stuck) + 24px);
}
/* -- Portrait -- */
/* Clears the offset frame, which extends 24px below the photograph. */
.dm-bio__portrait {
position: relative;
margin-bottom: 38px;
}
/* Belfort's offset frame, thrown behind and down-left. */
.dm-bio__portrait::before {
content: "";
position: absolute;
z-index: 0;
inset: 24px -24px -24px 24px;
border: 1px solid var(--dm-gold-line);
border-radius: 16px;
}
.dm-bio__portrait img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top;
border-radius: 16px;
box-shadow: var(--dm-shadow-lg);
}
/* -- Card -- */
.dm-bio__card {
position: relative;
z-index: 2;
padding: 26px 24px;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: 16px;
box-shadow: 0 18px 40px -26px rgba(8, 30, 56, .35);
}
.dm-bio__name {
margin: 0 0 12px;
font-family: var(--dm-font-heading);
font-size: 1.375rem;
line-height: 1.2;
color: var(--dm-heading);
}
.dm-bio__licence {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 20px;
padding: 6px 13px;
border: 1px solid var(--dm-gold-line);
border-radius: var(--dm-radius-pill);
background: var(--dm-gold-soft);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.2;
color: var(--dm-gold-dark);
}
.dm-bio__licence svg {
flex: 0 0 auto;
color: var(--dm-gold);
}
.dm-bio__contact {
margin: 0 0 22px;
padding: 0;
list-style: none;
border-top: 1px solid var(--dm-border);
padding-top: 18px;
}
.dm-bio__contact li {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 11px;
font-size: 14.5px;
word-break: break-word;
}
.dm-bio__contact li:last-child {
margin-bottom: 0;
}
.dm-bio__contact svg {
flex: 0 0 auto;
color: var(--dm-gold);
}
.dm-bio__contact a {
color: rgba(13, 42, 77, .78);
}
.dm-bio__contact a:hover {
color: var(--dm-gold);
}
.dm-bio__card .dm-btn {
border-radius: var(--dm-radius-pill);
}
.dm-bio__card .dm-btn svg {
transition: transform var(--dm-transition);
}
.dm-bio__card .dm-btn:hover svg {
transform: translateX(4px);
}
/* -- Copy -- */
.dm-bio__body {
min-width: 0;
}
/* Same contrast reasoning as the homepage: #7a7a7a is 4.0:1 on white. */
.dm-bio__body .dm-prose {
color: rgba(13, 42, 77, .76);
font-size: 16.5px;
line-height: 1.9;
}
.dm-bio__body .dm-prose h2 {
font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
}
.dm-bio__body .dm-prose h3 {
font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
}
/* --- Coverage columns ------------------------------------------------------- */
/*
* Weighted to the city counts rather than split evenly: BC carries roughly
* twice as many towns as AB, so an even split left one side six rows deep and
* the other three, with a void beneath it. At these widths auto-fill settles on
* four columns for the wide side and two for the narrow one — both land at
* about five rows, and the block reads as one balanced unit.
*/
.dm-coverage {
display: grid;
grid-template-columns: 1.5fr 1fr;
}
.dm-coverage__col:first-child {
padding-right: 54px;
}
/* Hairline between the provinces instead of a plain gap. */
.dm-coverage__col + .dm-coverage__col {
padding-left: 54px;
border-left: 1px solid var(--dm-border);
}
.dm-coverage__col h3 {
position: relative;
padding-bottom: 14px;
margin-bottom: 26px;
}
.dm-coverage__col h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 2px;
background: var(--dm-gold);
}
.dm-coverage__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 13px 20px;
margin: 0;
padding: 0;
list-style: none;
}
/*
* Both the anchor and the span are styled here. Only cities with a landing
* page render as links; when the bullet lived on the anchor alone, the rest
* lost their marker and shifted left out of the column. Every city now carries
* the same marker and sits on the same left edge — only the hover differs.
*/
.dm-coverage__list a,
.dm-coverage__list span {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 15px;
line-height: 1.4;
color: rgba(13, 42, 77, .72);
}
.dm-coverage__list a::before,
.dm-coverage__list span::before {
content: "";
flex: 0 0 auto;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--dm-gold-line);
transition: background var(--dm-transition), transform var(--dm-transition);
}
.dm-coverage__list a:hover {
color: var(--dm-gold);
}
.dm-coverage__list a:hover::before {
background: var(--dm-gold);
transform: scale(1.5);
}
/* --- Lender marquee --------------------------------------------------------- */
/* A logo strip needs less air under its heading than a content section does. */
.dm-lenders-band .dm-section-title {
margin-bottom: 38px;
}
/* Full-bleed band. Rules top and bottom rather than a boxed panel, so the
logos run the width of the viewport while the strip still reads as a
deliberate band and not as marks floating in open white. */
.dm-lenders {
position: relative;
padding-block: 34px;
background: var(--dm-off);
border-block: 1px solid var(--dm-border);
}
/* The mask lives here, not on the band, so the rules stay intact end to end. */
.dm-lenders__viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.dm-lenders__track {
display: flex;
align-items: center;
gap: 72px;
width: max-content;
animation: dm-marquee 45s linear infinite;
}
.dm-lenders:hover .dm-lenders__track {
animation-play-state: paused;
}
.dm-lenders__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 46px;
}
/*
* These marks arrive at wildly different weights — some near-black, some pale
* grey — so greyscale alone left the light ones invisible. Pulling brightness
* down and contrast up lands them all in a similar range before the opacity is
* applied, which is what makes the row read as one set.
*/
.dm-lenders__item img {
max-width: 100%;
max-height: 46px;
width: auto;
object-fit: contain;
filter: grayscale(1) brightness(.72) contrast(1.15);
opacity: .8;
transition: filter var(--dm-transition), opacity var(--dm-transition);
}
.dm-lenders__item:hover img {
filter: none;
opacity: 1;
}
@keyframes dm-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* The global reduced-motion rule collapses the duration, which would leave the
track parked at -50%. Hold it at the start instead. */
@media (prefers-reduced-motion: reduce) {
.dm-lenders__track {
animation: none;
transform: translateX(0);
}
}
/* --- Testimonials ----------------------------------------------------------- */
.dm-testimonials {
position: relative;
}
.dm-testimonials__viewport {
overflow: hidden;
}
.dm-testimonials__track {
display: flex;
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.dm-testimonials__slide {
flex: 0 0 100%;
padding-inline: 10px;
}
.dm-testimonial {
max-width: 860px;
margin-inline: auto;
text-align: center;
}
.dm-testimonial__mark {
font-family: var(--dm-font-heading);
font-size: 5rem;
line-height: .6;
color: var(--dm-gold);
opacity: .35;
margin-bottom: 24px;
}
.dm-testimonial__quote {
font-family: var(--dm-font-heading);
font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
line-height: 1.65;
color: var(--dm-heading);
margin-bottom: 28px;
}
.dm-testimonial__stars {
display: inline-flex;
gap: 4px;
color: var(--dm-gold);
margin-bottom: 14px;
}
.dm-testimonial__author {
font-weight: 700;
color: var(--dm-heading);
font-size: 15px;
letter-spacing: .5px;
}
.dm-testimonial__role {
font-size: 14px;
color: var(--dm-muted);
}
.dm-slider__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 36px;
}
.dm-slider__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--dm-border);
border-radius: 50%;
color: var(--dm-heading);
transition: all var(--dm-transition);
}
.dm-slider__btn:hover {
background: var(--dm-gold);
border-color: var(--dm-gold);
color: var(--dm-white);
}
.dm-slider__dots {
display: inline-flex;
align-items: center;
/* Buttons carry their own padding for the hit area, so the visible gap
comes from that rather than from a gap here. */
gap: 0;
}
/*
* The dot itself stays 9px, but the button was only 9px tall — far under the
* 44px touch guidance, and close to unhittable on a phone. The hit area is
* grown with padding and the dot painted into the content box, so the target
* measures 45x25 while the dot looks exactly as it did.
*/
.dm-slider__dot {
box-sizing: content-box;
width: 9px;
height: 9px;
padding: 18px 8px;
border: 0;
border-radius: 50%;
background: var(--dm-border);
background-clip: content-box;
transition: width var(--dm-transition), background-color var(--dm-transition), border-radius var(--dm-transition);
}
.dm-slider__dot.is-active {
background: var(--dm-gold);
background-clip: content-box;
width: 26px;
border-radius: var(--dm-radius-pill);
}
/* --- Google reviews (mirrors the live Trustindex widget) --------------------- */
.dm-reviews__header {
display: flex;
justify-content: center;
margin-bottom: 44px;
}
.dm-reviews__rating {
text-align: center;
}
.dm-reviews__label {
display: block;
font-family: var(--dm-font-heading);
font-size: 1.75rem;
letter-spacing: .5px;
color: var(--dm-heading);
margin-bottom: 6px;
}
.dm-reviews__stars {
display: inline-flex;
gap: 3px;
color: #fbbc05;
margin-bottom: 8px;
}
.dm-reviews__count {
font-size: 15px;
color: var(--dm-body);
margin: 0 0 12px;
}
.dm-reviews__count strong {
color: var(--dm-heading);
}
.dm-reviews__brand svg {
display: inline-block;
}
.dm-reviews__viewport {
overflow: hidden;
padding-block: 4px;
}
.dm-reviews__track {
display: flex;
gap: var(--dm-gutter);
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.dm-review {
flex: 0 0 calc((100% - var(--dm-gutter) * 2) / 3);
display: flex;
flex-direction: column;
padding: 26px 24px;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: var(--dm-radius);
transition: all var(--dm-transition);
}
.dm-review:hover {
border-color: var(--dm-gold);
box-shadow: var(--dm-shadow);
}
.dm-review__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.dm-review__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.dm-review__avatar--initial {
display: flex;
align-items: center;
justify-content: center;
color: var(--dm-white);
font-family: var(--dm-font-heading);
font-size: 1.125rem;
line-height: 1;
}
.dm-review__meta {
flex: 1 1 auto;
min-width: 0;
}
.dm-review__name {
display: block;
font-weight: 700;
font-size: 15px;
color: var(--dm-heading);
text-transform: capitalize;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dm-review__source {
font-size: 12.5px;
color: var(--dm-muted);
}
.dm-review__platform {
flex: 0 0 auto;
}
.dm-review__stars {
display: flex;
gap: 2px;
color: #fbbc05;
margin-bottom: 12px;
}
.dm-review__body {
flex: 1 1 auto;
font-size: 14.5px;
line-height: 1.75;
}
/* Long reviews clamp so the cards stay level; the full text is still in the DOM. */
.dm-review__body p {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dm-reviews__cta {
text-align: center;
margin: 34px 0 0;
}
/* --- Blog card -------------------------------------------------------------- */
/* Matches the service card, so the two grids on the homepage read as one
family rather than two card designs. */
.dm-post-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: 18px;
overflow: hidden;
transition: all var(--dm-transition);
}
.dm-post-card:hover,
.dm-post-card:focus-within {
box-shadow: var(--dm-shadow);
transform: translateY(-6px);
border-color: var(--dm-gold);
}
/* Frame, contain and hover-zoom all come from the shared uncropped-media block
near the top of this file. Only the ratio is specific to this card. */
.dm-post-card__media { aspect-ratio: 16 / 10; }
.dm-post-card__date {
position: absolute;
left: 16px;
bottom: 16px;
padding: 7px 14px;
background: var(--dm-gold);
color: var(--dm-white);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: var(--dm-radius);
}
.dm-post-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 24px 16px 20px;
}
/*
* Matched on any heading level, not just h3. The component takes a $level so
* the document outline never skips — the blog index passes 2 — and when these
* rules named h3 alone an h2 card fell back to the global heading size (~2.6rem)
* and the global `a { color: gold }`. Titles rendered huge and gold.
*/
.dm-post-card :is(h2, h3, h4) {
font-size: 1.25rem;
line-height: 1.35;
margin-bottom: .5em;
}
.dm-post-card :is(h2, h3, h4) a { color: var(--dm-heading); }
.dm-post-card:hover :is(h2, h3, h4) a,
.dm-post-card:focus-within :is(h2, h3, h4) a { color: var(--dm-gold); }
.dm-post-card p {
flex: 1 1 auto;
font-size: 15px;
margin-bottom: 20px;
}
/* --- Featured post (blog index lead) ---------------------------------------
The newest article at full width, so the index opens editorially instead of
as six equal tiles. Same card language as the grid — 10px inset, 18px radius
— just turned on its side. */
.dm-post-feature {
display: grid;
grid-template-columns: 1.08fr 1fr;
align-items: stretch;
gap: 0;
margin-bottom: clamp(34px, 3.6vw, 52px);
padding: 10px;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: 18px;
transition: border-color var(--dm-transition), box-shadow var(--dm-transition), transform var(--dm-transition);
}
.dm-post-feature:hover,
.dm-post-feature:focus-within {
border-color: var(--dm-gold);
box-shadow: var(--dm-shadow);
transform: translateY(-5px);
}
/*
* Frame and contain come from the shared uncropped-media block near the top of
* this file.
*
* Unlike the other cards, this frame is a grid item under `align-items: stretch`.
* Putting an aspect-ratio on the frame itself made the browser resolve its WIDTH
* from the stretched row height, so the picture spilled sideways over the
* headline. Keeping the ratio on the image and letting the frame size to it
* avoids the conflict entirely.
*/
.dm-post-feature__media { align-self: start; }
.dm-post-feature__media > img:not(.dm-media-blur) {
height: auto;
aspect-ratio: 16 / 11;
}
.dm-post-feature:hover .dm-post-feature__media > img:not(.dm-media-blur),
.dm-post-feature:focus-within .dm-post-feature__media > img:not(.dm-media-blur) {
transform: scale(1.05);
}
.dm-post-feature__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(26px, 2.6vw, 46px);
}
.dm-post-feature__meta {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 16px;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--dm-muted);
}
.dm-post-feature__flag {
padding: 5px 12px;
border-radius: var(--dm-radius-pill);
background: var(--dm-gold-soft);
border: 1px solid var(--dm-gold-line);
color: var(--dm-gold-dark);
font-weight: 700;
letter-spacing: 1.4px;
}
.dm-post-feature h2 {
font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
line-height: 1.25;
margin-bottom: .5em;
text-wrap: balance;
}
.dm-post-feature h2 a {
color: var(--dm-heading);
}
.dm-post-feature:hover h2 a,
.dm-post-feature:focus-within h2 a {
color: var(--dm-gold);
}
.dm-post-feature__excerpt {
margin-bottom: 26px;
font-size: 1rem;
line-height: 1.8;
color: rgba(13, 42, 77, .74);
}
/* --- Article body ----------------------------------------------------------- */
.dm-prose {
font-size: 16px;
line-height: 1.85;
}
.dm-prose > *:first-child { margin-top: 0; }
.dm-prose > *:last-child { margin-bottom: 0; }
.dm-prose h2 { margin-top: 1.8em; }
.dm-prose h3 { margin-top: 1.6em; }
.dm-prose h4,
.dm-prose h5,
.dm-prose h6 { margin-top: 1.4em; }
/*
* Editor images are capped so a tall portrait cannot push the copy below it off
* screen — that was the original reason for a height limit here.
*
* But the limit used to be `max-height + object-fit: cover`, which CROPS. That
* silently cut 31 in-body images: the service banners lost the top of their
* titles, and every one of the 21 location cards lost the "MORTGAGE BROKER IN
* " strap line and the logo along the bottom.
*
* Capping both axes with `width:auto; height:auto` instead scales the image down
* proportionally to fit inside the box. Same protection against a runaway
* portrait, nothing cropped on any side. `margin-inline:auto` centres anything
* that ends up narrower than the column.
*/
.dm-prose img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 620px;
margin-block: 1.8em;
margin-inline: auto;
border-radius: 14px;
}
.dm-prose ul,
.dm-prose ol {
margin-block: 1.2em;
padding-left: 1.4em;
}
.dm-prose li {
margin-bottom: .6em;
}
.dm-prose ul {
list-style: none;
padding-left: 0;
}
.dm-prose ul > li {
position: relative;
padding-left: 28px;
}
.dm-prose ul > li::before {
content: "";
position: absolute;
left: 4px;
top: .72em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dm-gold);
}
.dm-prose a {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Demoted keyword phrase — was a stray lowercase heading in the source content.
Reads as an intro line without competing with the real H1. */
.dm-prose .dm-lede {
font-family: var(--dm-font-heading);
font-size: 1.1875rem;
line-height: 1.5;
color: var(--dm-heading);
text-transform: capitalize;
padding-left: 16px;
border-left: 2px solid var(--dm-gold);
margin-block: 1.4em;
}
.dm-prose table {
width: 100%;
border-collapse: collapse;
margin-block: 1.8em;
font-size: 15px;
}
.dm-prose th,
.dm-prose td {
padding: 12px 16px;
border: 1px solid var(--dm-border);
text-align: left;
}
.dm-prose th {
background: var(--dm-off);
color: var(--dm-heading);
font-weight: 700;
}
.dm-prose iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--dm-radius);
margin-block: 1.8em;
}
/* Wide content must scroll inside itself, never the page. */
.dm-prose .dm-scroll-x {
overflow-x: auto;
}
/* --- CTA band ---------------------------------------------------------------- */
.dm-cta-band {
position: relative;
padding-block: 80px;
background: var(--dm-navy);
overflow: hidden;
text-align: center;
}
.dm-cta-band::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--dm-gold), transparent);
}
.dm-cta-band h2 {
color: var(--dm-white);
margin-bottom: .4em;
}
.dm-cta-band p {
color: rgba(255, 255, 255, .8);
max-width: 640px;
margin-inline: auto;
margin-bottom: 2em;
}
.dm-cta-band__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
}
/* Pills, matching the header, hero and footer — this band was the last place
on the page still using square buttons. */
.dm-cta-band__actions .dm-btn {
padding: 16px 32px;
border-radius: var(--dm-radius-pill);
}
/* --- Forms -------------------------------------------------------------------- */
.dm-form__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.dm-field {
margin-bottom: 20px;
}
.dm-field label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: var(--dm-heading);
}
.dm-field label .dm-req {
color: #c8443c;
}
.dm-field input,
.dm-field select,
.dm-field textarea {
width: 100%;
padding: 14px 16px;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: var(--dm-radius);
font-size: 15px;
color: var(--dm-heading);
transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}
.dm-field textarea {
min-height: 150px;
resize: vertical;
}
.dm-field input:focus,
.dm-field select:focus,
.dm-field textarea:focus {
outline: none;
border-color: var(--dm-gold);
box-shadow: 0 0 0 3px var(--dm-gold-soft);
}
.dm-field input[aria-invalid="true"],
.dm-field textarea[aria-invalid="true"] {
border-color: #c8443c;
}
.dm-field__error {
display: block;
margin-top: 6px;
font-size: 13px;
color: #c8443c;
}
/* Honeypot — hidden from people, visible to naive bots. */
.dm-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --- Contact info panel -------------------------------------------------------- */
.dm-office {
padding: 32px 30px;
background: var(--dm-off);
border-radius: var(--dm-radius);
border-left: 3px solid var(--dm-gold);
height: 100%;
}
.dm-office h3 {
font-size: 1.25rem;
margin-bottom: 16px;
}
.dm-office__line {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
font-size: 15px;
}
.dm-office__line svg {
flex: 0 0 auto;
margin-top: 5px;
color: var(--dm-gold);
}
.dm-map {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
border: 0;
}
/* Two office maps side by side. */
.dm-maps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--dm-gutter);
margin-bottom: 60px;
}
.dm-map-card {
margin: 0;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: var(--dm-radius);
overflow: hidden;
transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}
.dm-map-card:hover {
border-color: var(--dm-gold);
box-shadow: var(--dm-shadow);
}
.dm-map-card__caption {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 16px 20px;
border-top: 1px solid var(--dm-border);
font-size: 14px;
line-height: 1.55;
background: var(--dm-off);
}
.dm-map-card__caption svg {
flex: 0 0 auto;
margin-top: 3px;
color: var(--dm-gold);
}
.dm-map-card__caption strong {
display: block;
color: var(--dm-heading);
font-weight: 700;
}
/* Contact form sits centred once the maps have their own row. */
.dm-contact-form {
max-width: 820px;
margin-inline: auto;
}
/* --- Calculators ---------------------------------------------------------------- */
.dm-calc {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: start;
}
.dm-calc__inputs {
padding: 34px 32px;
background: var(--dm-white);
border: 1px solid var(--dm-border);
border-radius: var(--dm-radius);
box-shadow: var(--dm-shadow);
}
.dm-calc__results {
position: sticky;
top: 24px;
padding: 34px 32px;
background: var(--dm-navy);
border-radius: var(--dm-radius);
color: rgba(255, 255, 255, .82);
}
.dm-calc__results h3 {
color: var(--dm-white);
padding-bottom: 16px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dm-calc__headline {
text-align: center;
padding-block: 8px 22px;
}
.dm-calc__headline .dm-calc__value {
display: block;
font-family: var(--dm-font-heading);
font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
line-height: 1.1;
color: var(--dm-gold);
}
.dm-calc__headline .dm-calc__label {
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.dm-calc__row {
display: flex;
justify-content: space-between;
gap: 16px;
padding-block: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .09);
font-size: 15px;
}
.dm-calc__row:last-of-type {
border-bottom: 0;
}
.dm-calc__row dt {
color: rgba(255, 255, 255, .7);
}
.dm-calc__row dd {
margin: 0;
font-weight: 700;
color: var(--dm-white);
text-align: right;
}
.dm-calc__row--total {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--dm-gold-line);
border-bottom: 0;
font-size: 1.0625rem;
}
.dm-calc__row--total dd {
color: var(--dm-gold);
}
/* Range + number pairing */
.dm-field__pair {
display: flex;
gap: 12px;
align-items: center;
}
.dm-field__pair input[type="range"] {
flex: 1 1 auto;
padding: 0;
height: 4px;
border: 0;
background: var(--dm-border);
border-radius: var(--dm-radius-pill);
appearance: none;
accent-color: var(--dm-gold);
}
.dm-field__pair input[type="number"],
.dm-field__pair input[type="text"] {
flex: 0 0 140px;
text-align: right;
}
.dm-field__hint {
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--dm-muted);
}
.dm-chip-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dm-chip-group--center {
justify-content: center;
margin-bottom: clamp(38px, 4vw, 54px);
}
.dm-chip {
padding: 9px 16px;
border: 1px solid var(--dm-border);
border-radius: var(--dm-radius-pill);
font-size: 13px;
font-weight: 600;
color: var(--dm-body);
background: var(--dm-white);
transition: all var(--dm-transition);
}
.dm-chip.is-active,
.dm-chip:hover {
border-color: var(--dm-gold);
background: var(--dm-gold);
color: var(--dm-white);
}
.dm-calc__notice {
margin-top: 20px;
padding: 14px 18px;
background: var(--dm-gold-soft);
border-left: 2px solid var(--dm-gold);
font-size: 13px;
line-height: 1.65;
color: rgba(255, 255, 255, .75);
}
/* Amortisation schedule */
.dm-schedule {
margin-top: 40px;
}
.dm-schedule__table-wrap {
overflow-x: auto;
border: 1px solid var(--dm-border);
border-radius: var(--dm-radius);
}
.dm-schedule table {
width: 100%;
min-width: 640px;
border-collapse: collapse;
font-size: 14px;
}
.dm-schedule th,
.dm-schedule td {
padding: 11px 16px;
text-align: right;
border-bottom: 1px solid var(--dm-border);
}
.dm-schedule th:first-child,
.dm-schedule td:first-child {
text-align: left;
}
.dm-schedule thead th {
position: sticky;
top: 0;
background: var(--dm-navy);
color: var(--dm-white);
font-weight: 600;
white-space: nowrap;
}
.dm-schedule tbody tr:nth-child(even) {
background: var(--dm-off);
}
/* --- Pagination ------------------------------------------------------------------ */
.dm-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 60px;
}
.dm-pagination a,
.dm-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding-inline: 12px;
border: 1px solid var(--dm-border);
border-radius: var(--dm-radius);
font-size: 15px;
color: var(--dm-heading);
transition: all var(--dm-transition);
}
.dm-pagination a:hover {
border-color: var(--dm-gold);
background: var(--dm-gold);
color: var(--dm-white);
}
.dm-pagination .is-current {
background: var(--dm-navy);
border-color: var(--dm-navy);
color: var(--dm-white);
}
.dm-pagination .is-gap {
border-color: transparent;
}
/* --- Misc ------------------------------------------------------------------------- */
.dm-stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.dm-stat__value {
display: block;
font-family: var(--dm-font-heading);
font-size: 2.75rem;
line-height: 1;
color: var(--dm-gold);
margin-bottom: 8px;
}
.dm-stat__label {
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--dm-muted);
}
.dm-empty {
padding: 60px 30px;
text-align: center;
border: 1px dashed var(--dm-border);
border-radius: var(--dm-radius);
color: var(--dm-muted);
}