/* MortgagePros theme: front-end rules theme.json cannot express. Keep short. */
:root {
--mtg-shadow: 0 8px 24px rgba(6, 66, 127, 0.08);
--mtg-radius: 10px;
--mtg-tick: url("data:image/svg+xml;utf8,");
--mtg-dash: url("data:image/svg+xml;utf8,");
}
.wp-block-site-logo img {
height: auto;
max-height: 56px;
width: auto;
}
.wp-block-navigation a:where(:not(.wp-element-button)) {
font-weight: 600;
}
.wp-block-navigation .wp-block-navigation__submenu-container {
border-radius: var(--mtg-radius);
box-shadow: var(--mtg-shadow);
}
/* Card treatment for column groups tagged with the "mtg-card" class in the editor. */
.mtg-card {
background: var(--wp--preset--color--base);
border: 1px solid #e3eaf3;
border-radius: var(--mtg-radius);
box-shadow: var(--mtg-shadow);
height: 100%;
padding: var(--wp--preset--spacing--30);
}
.mtg-card > * + * {
margin-top: var(--wp--preset--spacing--20);
}
.mtg-card .wp-block-heading {
font-size: var(--wp--preset--font-size--large);
}
/* White line-art icons (state outlines on the Licensing page) sit on a navy disc so they stay visible. */
.mtg-icon-dark {
background: var(--wp--preset--color--primary);
border-radius: 50%;
padding: 14px;
width: max-content;
}
.mtg-card .mtg-icon-dark,
.has-text-align-left .mtg-icon-dark {
margin-left: 0;
}
.mtg-icon-dark img {
display: block;
filter: brightness(0) invert(1);
height: auto;
}
/* Converted pages: keep headings in the first ("intro") band tight and centered content readable. */
.mtg-page-intro .wp-block-heading:first-child {
margin-top: 0;
}
.wp-block-columns.are-vertically-aligned-center .wp-block-image {
margin: 0;
}
.wp-block-columns .wp-block-image img {
border-radius: var(--mtg-radius);
}
/* Big-number stat, used by the stats band pattern and converted counters. */
.mtg-stat strong {
display: block;
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 700;
line-height: 1.1;
}
/* FAQ items converted from Elementor accordions. */
.wp-block-details {
border-bottom: 1px solid var(--wp--preset--color--surface);
padding: var(--wp--preset--spacing--20) 0;
}
.wp-block-details summary {
cursor: pointer;
font-weight: 600;
color: var(--wp--preset--color--primary);
}
/* Reviewer marker for content the converter could not carry over (Elementor Pro forms). */
.mtg-todo {
background: #fff4d6;
border-left: 4px solid #e0a800;
padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}
/* Live mortgage-rate ticker (rate comes from the [fha_rate] / [va_rate] / [conventional_rate] shortcodes). */
.mtg-rate-ticker {
font-size: var(--wp--preset--font-size--large);
font-weight: 600;
}
.mtg-rate-ticker strong {
color: var(--wp--preset--color--primary);
}
.mtg-live-rate {
background: none;
color: inherit;
padding-right: 0.5em;
position: relative;
}
.mtg-live-rate::after {
animation: mtg-blink 1s step-end infinite;
background: #f59e0b;
content: "";
height: 80%;
position: absolute;
right: 0;
top: 10%;
width: 3px;
}
@keyframes mtg-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Default tables (blog posts, legal pages). */
.wp-block-table table {
border-collapse: collapse;
width: 100%;
}
.wp-block-table th,
.wp-block-table td {
border: 1px solid #dfe6ee;
padding: 0.6rem 0.9rem;
text-align: left;
vertical-align: top;
}
.wp-block-table thead th,
.wp-block-table tr:first-child th {
background: var(--wp--preset--color--surface);
color: var(--wp--preset--color--primary);
}
/* Comparison table used on the refinance landing pages. */
.wp-block-table.mtg-compare-table table {
border-collapse: collapse;
border-radius: var(--mtg-radius);
box-shadow: var(--mtg-shadow);
overflow: hidden;
width: 100%;
}
.wp-block-table.mtg-compare-table thead tr {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
text-align: left;
}
.wp-block-table.mtg-compare-table th,
.wp-block-table.mtg-compare-table td {
border: 0;
border-bottom: 1px solid #dddddd;
padding: 0.9rem 1.25rem;
}
.wp-block-table.mtg-compare-table tbody tr:nth-of-type(even) {
background: var(--wp--preset--color--surface);
}
.wp-block-table.mtg-compare-table td:first-child {
font-weight: 600;
}
@media (max-width: 600px) {
.wp-block-table.mtg-compare-table table {
font-size: var(--wp--preset--font-size--small);
table-layout: fixed;
}
.wp-block-table.mtg-compare-table th,
.wp-block-table.mtg-compare-table td {
overflow-wrap: anywhere;
padding: 0.6rem 0.5rem;
}
}
/* Thank-you page checkmark. */
.mtg-checkmark {
background: #ecfdf5;
border-radius: 50%;
color: #2ecc71;
font-size: 2.5rem;
height: 80px;
line-height: 80px;
margin: 0 auto;
width: 80px;
}
/* Header */
.mtg-header {
border-bottom: 1px solid var(--wp--preset--color--line);
position: sticky;
top: 0;
z-index: 50;
}
.mtg-header .wp-block-navigation a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--ink);
font-weight: 500;
transition: color 200ms ease;
}
.mtg-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
color: var(--wp--preset--color--primary);
}
.mtg-header-phone {
align-items: center;
color: var(--wp--preset--color--ink);
display: inline-flex;
font-weight: 500;
gap: 0.5rem;
min-height: 44px;
min-width: 44px;
justify-content: center;
text-decoration: none;
white-space: nowrap;
}
/* 44px touch targets for the mobile menu toggle and inline phone links. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
min-height: 44px;
min-width: 44px;
}
p a[href^="tel:"] {
display: inline-block;
padding: 0.25rem 0;
}
.mtg-header-phone:hover {
color: var(--wp--preset--color--primary);
}
.mtg-header-actions {
align-items: center;
}
.mtg-header .wp-block-button__link {
padding: 0.75rem 1.4rem;
white-space: nowrap;
}
@media (max-width: 1100px) {
.mtg-header-phone span {
display: none;
}
}
@media (max-width: 600px) {
.mtg-header .wp-block-button__link {
font-size: var(--wp--preset--font-size--small);
padding: 0.6rem 1rem;
}
.mtg-header .wp-block-site-logo img {
max-height: 40px;
}
}
/* ---------------------------------------------------------------- Design system: Rocket-style surfaces */
.wp-element-button,
.wp-block-button__link,
a,
button,
summary,
[role="button"] {
cursor: pointer;
}
.wp-block-button__link {
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
/* Rounded panel inset from the page edges, like Rocket's section containers. */
.mtg-panel {
border-radius: 28px;
padding: clamp(1.5rem, 4vw, 4rem);
}
/* Eyebrow pill label. */
.mtg-eyebrow {
background: var(--wp--preset--color--primary);
border-radius: 999px;
color: var(--wp--preset--color--base);
display: inline-block;
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
padding: 0.3rem 0.85rem;
}
/* Quick-start cards: icon square + label + arrow. */
.mtg-quick {
align-items: center;
background: var(--wp--preset--color--base);
border: 1px solid #D7DBE0;
border-radius: 18px;
color: var(--wp--preset--color--ink);
display: flex;
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
gap: 1rem;
min-height: 88px;
padding: 1.1rem 1.4rem;
position: relative;
text-decoration: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* The whole card is clickable: the label link is stretched over the card. */
.mtg-quick__label a {
color: inherit;
text-decoration: none;
}
.mtg-quick__label a::after {
border-radius: 18px;
content: "";
inset: 0;
position: absolute;
}
/* Trailing arrow drawn with a mask so it follows the text colour. */
.mtg-quick::after {
background: currentColor;
content: "";
flex: 0 0 22px;
height: 22px;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
width: 22px;
}
.mtg-quick:hover {
border-color: var(--wp--preset--color--ink);
box-shadow: 0 6px 20px rgba(17, 17, 17, 0.06);
color: var(--wp--preset--color--ink);
}
.mtg-quick__icon,
.mtg-quick .mtg-quick__icon {
align-items: center;
background: var(--wp--preset--color--panel-blue);
border-radius: 10px;
display: inline-flex;
flex: 0 0 44px;
height: 44px;
justify-content: center;
margin: 0;
width: 44px;
}
.mtg-quick__icon img {
display: block;
height: 22px;
width: 22px;
}
.mtg-quick__label,
.mtg-quick .mtg-quick__label {
flex: 1;
margin: 0;
}
/* Feature cards: grey surface, icon, title, copy, arrow button. */
.mtg-feature {
background: var(--wp--preset--color--panel);
border: 1px solid #E3E5E8;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 0.6rem;
height: 100%;
padding: 1.75rem;
}
.mtg-feature > * {
margin: 0;
}
.mtg-feature .mtg-feature__icon {
margin: 0;
}
.mtg-feature .mtg-feature__icon img {
display: block;
height: 26px;
width: 26px;
}
.mtg-feature .wp-block-buttons {
margin-top: auto;
}
.mtg-feature h3 {
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
}
.mtg-feature p {
color: var(--wp--preset--color--muted);
}
/* Arrow button: a normal Button block with the mtg-arrow class. Its text stays for screen readers;
visually it is a 48px circle with a masked arrow. */
.mtg-arrow .wp-block-button__link {
align-items: center;
background: var(--wp--preset--color--ink);
border: 0;
border-radius: 999px;
color: var(--wp--preset--color--base);
display: inline-flex;
font-size: 0;
height: 48px;
justify-content: center;
line-height: 0;
padding: 0;
transition: background-color 200ms ease;
width: 48px;
}
.mtg-arrow .wp-block-button__link::after {
background: currentColor;
content: "";
height: 22px;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
width: 22px;
}
.mtg-arrow .wp-block-button__link:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
}
/* ---------------------------------------------------------------- Hero: scattered labelled tiles around a centred headline
Ten tilted photo tiles, each with a caption and a link, are placed around the copy. They pop in with a
stagger on load, then float independently. Positions are percentages of a 1440px-wide field. */
/* The copy sits at the bottom of the hero; tiles live in the band above it and along its sides,
never below the trust line. The hero ends 40px under the trust line. */
.mtg-hero {
display: flex;
flex-direction: column;
isolation: isolate;
justify-content: flex-end;
min-height: 500px;
overflow: hidden;
padding-bottom: 32px;
padding-top: 170px;
position: relative;
}
.mtg-scatter {
bottom: 0;
left: 50%;
pointer-events: none;
position: absolute;
top: 0;
transform: translateX(-50%);
width: min(100%, 1440px);
z-index: 1;
}
/* Two sets of decorative tiles alternate on a shared cycle (--T). Each tile enters from its own edge,
holds, then leaves the same way; set B runs half a cycle behind set A in different positions. */
.mtg-scatter {
--T: 18s;
}
/* Tiles are Image blocks; the group layout must not add flow margins to them. */
.mtg-scatter > .mtg-scatter__item {
margin: 0;
}
.mtg-scatter__item {
--r: 0deg;
--ox: 0px;
--oy: 0px;
animation: mtg-cycle var(--T) cubic-bezier(0.25, 0.7, 0.25, 1) infinite both;
color: var(--wp--preset--color--ink);
margin: 0;
opacity: 0;
position: absolute;
user-select: none;
}
/* Replacing a tile from the media library copies that file's caption into the block; the hero never shows them. */
.mtg-scatter__item figcaption {
display: none;
}
.mtg-scatter__item img {
animation: mtg-float var(--d, 7s) ease-in-out var(--fd, 0s) infinite alternate;
border-radius: 18px;
box-shadow: 0 16px 36px rgba(17, 17, 17, 0.14);
display: block;
height: var(--h, 150px);
object-fit: cover;
width: var(--w, 190px);
}
/* Exit directions: tiles leave toward the nearest edge of the screen. */
.mtg-scatter .to-l { --ox: -70vw; }
.mtg-scatter .to-r { --ox: 70vw; }
.mtg-scatter .to-t { --oy: -80vh; }
.mtg-scatter .to-b { --oy: 80vh; }
/* Placement (left/right/top as % of the field), size, tilt, and float timing per tile. */
/* Field is the hero box (~1440 x 620). The copy occupies x 28–72% from y 42% down, so tiles use the
top band (y < 40%) at any x, and the side bands (x < 28% or x > 72%) at any y, ending by y 96%.
Set A (s1–s10) starts immediately with a small stagger; set B (b1–b10) starts half a cycle later. */
.mtg-scatter .s1 { left: 7%; top: 6%; --w: 200px; --h: 150px; --r: -8deg; --d: 7.5s; --fd: -1s; animation-delay: 0.05s; }
.mtg-scatter .s2 { left: 19%; top: 46%; --w: 96px; --h: 118px; --r: 4deg; --d: 6.5s; --fd: -3s; animation-delay: 0.15s; }
.mtg-scatter .s3 { left: 44%; top: 2%; --w: 100px; --h: 124px; --r: 3deg; --d: 8s; --fd: -2s; animation-delay: 0.25s; }
.mtg-scatter .s4 { right: 7%; top: 4%; --w: 230px; --h: 170px; --r: 9deg; --d: 7s; --fd: -4s; animation-delay: 0.35s; }
.mtg-scatter .s5 { left: 4%; top: 44%; --w: 130px; --h: 160px; --r: -4deg; --d: 9s; --fd: -1.5s; animation-delay: 0.45s; }
.mtg-scatter .s6 { right: 6%; top: 42%; --w: 118px; --h: 150px; --r: 6deg; --d: 6.8s; --fd: -2.5s; animation-delay: 0.55s; }
.mtg-scatter .s7 { left: 11%; top: 68%; --w: 190px; --h: 130px; --r: -7deg; --d: 8.5s; --fd: -0.5s; animation-delay: 0.65s; }
.mtg-scatter .s8 { left: 30%; top: 3%; --w: 140px; --h: 108px; --r: 5deg; --d: 7.2s; --fd: -3.5s; animation-delay: 0.75s; }
.mtg-scatter .s9 { right: 30%; top: 6%; --w: 84px; --h: 96px; --r: -6deg; --d: 6.2s; --fd: -1.8s; animation-delay: 0.85s; }
.mtg-scatter .s10 { right: 11%; top: 60%; --w: 150px; --h: 170px; --r: 8deg; --d: 7.8s; --fd: -2.2s; animation-delay: 0.95s; }
.mtg-scatter .b1 { left: 12%; top: 4%; --w: 180px; --h: 135px; --r: 6deg; --d: 7.1s; --fd: -2s; animation-delay: calc(var(--T) / 2 + 0.05s); }
.mtg-scatter .b2 { left: 31%; top: 1%; --w: 100px; --h: 124px; --r: -5deg; --d: 6.4s; --fd: -1s; animation-delay: calc(var(--T) / 2 + 0.15s); }
.mtg-scatter .b3 { right: 12%; top: 8%; --w: 200px; --h: 150px; --r: -8deg; --d: 8.2s; --fd: -3s; animation-delay: calc(var(--T) / 2 + 0.25s); }
.mtg-scatter .b4 { left: 4%; top: 38%; --w: 120px; --h: 150px; --r: 5deg; --d: 7.7s; --fd: -0.5s; animation-delay: calc(var(--T) / 2 + 0.35s); }
.mtg-scatter .b5 { right: 5%; top: 40%; --w: 150px; --h: 110px; --r: -6deg; --d: 6.9s; --fd: -2.5s; animation-delay: calc(var(--T) / 2 + 0.45s); }
.mtg-scatter .b6 { left: 19%; top: 62%; --w: 120px; --h: 150px; --r: 8deg; --d: 8.6s; --fd: -1.5s; animation-delay: calc(var(--T) / 2 + 0.55s); }
.mtg-scatter .b7 { right: 16%; top: 60%; --w: 120px; --h: 150px; --r: -7deg; --d: 7.3s; --fd: -3.5s; animation-delay: calc(var(--T) / 2 + 0.65s); }
.mtg-scatter .b8 { right: 28%; top: 3%; --w: 100px; --h: 118px; --r: 4deg; --d: 6.6s; --fd: -1.8s; animation-delay: calc(var(--T) / 2 + 0.75s); }
.mtg-scatter .b9 { left: 46%; top: 5%; --w: 92px; --h: 92px; --r: -5deg; --d: 7.9s; --fd: -2.2s; animation-delay: calc(var(--T) / 2 + 0.85s); }
.mtg-scatter .b10 { left: 2%; top: 70%; --w: 150px; --h: 110px; --r: -4deg; --d: 7.4s; --fd: -0.8s; animation-delay: calc(var(--T) / 2 + 0.95s); }
@keyframes mtg-cycle {
0% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(calc(var(--r) * 2)) scale(0.9); }
5% { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1); }
40% { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1); }
46% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(calc(var(--r) * 2)) scale(0.9); }
100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(calc(var(--r) * 2)) scale(0.9); }
}
@keyframes mtg-float {
from { transform: translateY(0); }
to { transform: translateY(-10px); }
}
.mtg-hero > .mtg-hero__copy {
margin: 0 auto;
max-width: 620px;
position: relative;
text-align: center;
z-index: 5;
}
.mtg-hero h1 {
margin: 0 0 1.5rem;
}
.mtg-hero__eyebrow {
color: var(--wp--preset--color--muted);
display: block;
font-size: var(--wp--preset--font-size--x-large);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 0.15em;
}
/* Rotating callouts share one grid cell; each fades/slides in on a 12 second loop. */
.mtg-callouts {
--cycle: 12s;
display: grid;
}
.mtg-callout {
animation: mtg-callout var(--cycle) ease-in-out infinite both;
grid-area: 1 / 1;
opacity: 0;
}
.mtg-callout:nth-child(1) { animation-delay: 0s; }
.mtg-callout:nth-child(2) { animation-delay: calc(var(--cycle) * 0.25); }
.mtg-callout:nth-child(3) { animation-delay: calc(var(--cycle) * 0.5); }
.mtg-callout:nth-child(4) { animation-delay: calc(var(--cycle) * 0.75); }
@keyframes mtg-callout {
0% { opacity: 0; transform: translateY(0.5em); }
4% { opacity: 1; transform: translateY(0); }
22% { opacity: 1; transform: translateY(0); }
26% { opacity: 0; transform: translateY(-0.5em); }
100% { opacity: 0; transform: translateY(-0.5em); }
}
.mtg-hero__rates {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin-bottom: 0;
margin-top: 1rem;
}
@media (max-width: 1100px) {
.mtg-hero { min-height: 470px; padding-top: 150px; }
.mtg-scatter .s2, .mtg-scatter .s3, .mtg-scatter .s8, .mtg-scatter .s9,
.mtg-scatter .b2, .mtg-scatter .b8, .mtg-scatter .b9, .mtg-scatter .b10 { display: none; }
.mtg-scatter .b1 { left: 3%; top: 6%; --w: 150px; --h: 112px; }
.mtg-scatter .b3 { right: 3%; top: 8%; --w: 160px; --h: 120px; }
.mtg-scatter .b4 { left: 2%; top: 44%; --w: 100px; --h: 124px; }
.mtg-scatter .b5 { right: 3%; top: 42%; --w: 120px; --h: 90px; }
.mtg-scatter .b6 { left: 6%; top: 68%; --w: 100px; --h: 120px; }
.mtg-scatter .b7 { right: 6%; top: 66%; --w: 100px; --h: 120px; }
.mtg-scatter .s1 { --w: 160px; --h: 120px; left: 3%; top: 6%; }
.mtg-scatter .s4 { --w: 180px; --h: 134px; right: 3%; top: 5%; }
.mtg-scatter .s5 { left: 2%; top: 44%; --w: 100px; --h: 124px; }
.mtg-scatter .s6 { right: 3%; top: 42%; --w: 100px; --h: 124px; }
.mtg-scatter .s7 { left: 5%; top: 70%; --w: 130px; --h: 96px; }
.mtg-scatter .s10 { right: 6%; top: 66%; --w: 100px; --h: 124px; }
.mtg-hero > .mtg-hero__copy { max-width: 520px; }
.mtg-header .wp-block-navigation a:where(:not(.wp-element-button)) {
font-size: var(--wp--preset--font-size--small);
white-space: nowrap;
}
.mtg-header .mtg-nav {
gap: var(--wp--preset--spacing--20);
}
}
@media (max-width: 782px) {
.mtg-hero {
display: flex;
flex-direction: column;
min-height: 0;
padding-top: var(--wp--preset--spacing--30);
}
.mtg-scatter {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.25rem;
justify-content: center;
left: auto;
margin: 0 auto 1.75rem;
max-width: 420px;
position: relative;
transform: none;
width: 100%;
}
/* Phones: a static 2x2 grid from set A, no cycling. */
.mtg-scatter__item { animation: none; opacity: 1; position: static; transform: rotate(var(--r)); }
.mtg-scatter .s2, .mtg-scatter .s3, .mtg-scatter .s5, .mtg-scatter .s8, .mtg-scatter .s9, .mtg-scatter .s10,
.mtg-scatter .b1, .mtg-scatter .b2, .mtg-scatter .b3, .mtg-scatter .b4, .mtg-scatter .b5,
.mtg-scatter .b6, .mtg-scatter .b7, .mtg-scatter .b8, .mtg-scatter .b9, .mtg-scatter .b10 { display: none; }
.mtg-scatter .s1, .mtg-scatter .s4, .mtg-scatter .s6, .mtg-scatter .s7 { display: block; --w: 132px; --h: 100px; }
.mtg-scatter .s4 { --r: 5deg; }
.mtg-scatter .s7 { --r: -5deg; }
}
@media (prefers-reduced-motion: reduce) {
.mtg-scatter__item,
.mtg-scatter__item img,
.mtg-callout {
animation: none;
}
.mtg-callout:not(:first-child) { display: none; }
.mtg-callout:first-child { opacity: 1; transform: none; }
.mtg-scatter__item { opacity: 1; transform: rotate(var(--r)); }
.mtg-scatter .b1, .mtg-scatter .b2, .mtg-scatter .b3, .mtg-scatter .b4, .mtg-scatter .b5,
.mtg-scatter .b6, .mtg-scatter .b7, .mtg-scatter .b8, .mtg-scatter .b9, .mtg-scatter .b10 { display: none; }
}
/* Stat tiles inside the rates panel. */
.mtg-rate-tile {
background: var(--wp--preset--color--base);
border-radius: 18px;
padding: 1.25rem 1.5rem;
}
.mtg-rate-tile p {
margin: 0;
}
.mtg-rate-tile .mtg-rate-tile__label {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
}
.mtg-rate-tile .mtg-rate-tile__value {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
}
/* Testimonial pair. */
.mtg-quote-block {
border-radius: 28px;
min-height: 360px;
padding: clamp(1.5rem, 4vw, 3.5rem);
}
.mtg-quote-card {
background: var(--wp--preset--color--panel);
border-radius: 28px;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
min-height: 360px;
padding: clamp(1.5rem, 4vw, 3.5rem);
}
.mtg-quote-card blockquote {
border: 0;
margin: 0;
padding: 0;
}
.mtg-quote-card blockquote p {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--large);
line-height: 1.45;
}
.mtg-quote-card cite {
color: var(--wp--preset--color--muted);
font-style: normal;
}
.mtg-stars {
color: #F5A623;
letter-spacing: 0.1em;
}
/* FAQ: an intro column on the left, disclosure rows on the right. Each row is separated by a
hairline rule with generous padding, and carries a circled plus that becomes a minus when open. */
.mtg-faq__aside {
padding-right: var(--wp--preset--spacing--30);
}
.mtg-faq__aside h2 {
margin-top: 0;
}
.mtg-faq__lead {
margin-bottom: 1.5rem;
max-width: 34ch;
}
.mtg-faq__list > .wp-block-details {
border-top: 1px solid var(--wp--preset--color--line);
padding: 1.5rem 0;
}
.mtg-faq__list > .wp-block-details:last-child {
border-bottom: 1px solid var(--wp--preset--color--line);
}
.mtg-faq .wp-block-details summary {
align-items: flex-start;
color: var(--wp--preset--color--ink);
cursor: pointer;
display: flex;
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
gap: 1.5rem;
justify-content: space-between;
line-height: 1.45;
list-style: none;
}
.mtg-faq .wp-block-details summary::-webkit-details-marker {
display: none;
}
.mtg-faq .wp-block-details summary::after {
background: url("data:image/svg+xml;utf8,") center / 14px 14px no-repeat;
border: 1px solid var(--wp--preset--color--line);
border-radius: 50%;
content: "";
flex: 0 0 30px;
height: 30px;
margin-top: 0.1em;
transition: border-color 200ms ease, background-color 200ms ease;
width: 30px;
}
.mtg-faq .wp-block-details summary:hover::after,
.mtg-faq .wp-block-details[open] summary::after {
border-color: var(--wp--preset--color--ink);
}
.mtg-faq .wp-block-details[open] summary::after {
background-image: url("data:image/svg+xml;utf8,");
}
.mtg-faq .wp-block-details p {
color: var(--wp--preset--color--muted);
margin-bottom: 0;
margin-top: 0.9rem;
max-width: 62ch;
padding-right: 3.4rem;
}
/* Stacked on phones: the intro sits above the list, and the answers use the full width. */
@media (max-width: 781px) {
.mtg-faq__aside {
padding-right: 0;
}
.mtg-faq__lead {
max-width: none;
}
.mtg-faq .wp-block-details p {
padding-right: 0;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------------------------------------------------------------- Interior page sections
Used by the About page and reusable on any interior page: a centred page hero, a stat band,
and leadership portraits. They follow the homepage language: light surfaces, thin rules,
generous spacing, no heavy colour slabs. */
.mtg-pagehero {
text-align: center;
}
.mtg-pagehero h1 {
margin: 0 0 1rem;
}
.mtg-pagehero__lead {
line-height: 1.55;
}
.mtg-pagehero__lead {
margin-left: auto;
margin-right: auto;
max-width: 48ch;
}
/* Contact page: the FlowForm sits in a white panel and takes the theme field styling; the map
embed gets a rounded frame; small contact cards reuse .mtg-feature with a link line. */
.mtg-form-panel {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
border-radius: 24px;
padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
.mtg-form-panel .flowform-form {
background: transparent;
border: 0;
box-shadow: none;
margin: 0;
max-width: none;
padding: 0;
}
.mtg-form-panel .flowform-label {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-input,
.wp-block-group.mtg-form-panel .flowform-container .flowform-textarea,
.wp-block-group.mtg-form-panel .flowform-container .flowform-radio-label {
background: var(--wp--preset--color--base);
border: 1px solid #D7DBE0;
border-radius: 12px;
color: var(--wp--preset--color--ink);
font-family: inherit;
font-size: var(--wp--preset--font-size--medium);
}
/* FlowForm sizes fields at 100% plus padding; keep them inside the panel on narrow screens. */
.mtg-form-panel .flowform-input,
.mtg-form-panel .flowform-textarea,
.mtg-form-panel .flowform-radio-label,
.mtg-form-panel .flowform-fields,
.mtg-form-panel .flowform-field {
box-sizing: border-box;
max-width: 100%;
min-width: 0;
}
.mtg-form-panel .flowform-input:focus,
.mtg-form-panel .flowform-textarea:focus {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 3px rgba(6, 66, 127, 0.12);
outline: none;
}
.mtg-form-panel .flowform-field-subtext {
color: var(--wp--preset--color--muted);
}
.mtg-form-panel .flowform-btn-submit {
background: var(--wp--preset--color--primary);
border: 0;
border-radius: 999px;
color: var(--wp--preset--color--base);
font-family: inherit;
font-weight: 600;
flex: 0 0 auto; /* plugin default: Back on the left, a compact submit on the right, as on /get-a-quote/ */
min-width: 0;
padding: 0.9rem 1.6rem;
transition: background-color 200ms ease;
width: auto;
}
.mtg-form-panel .flowform-btn-submit:hover {
background: var(--wp--preset--color--ink);
}
/* FlowForm wraps the form in its own card; inside our panel that becomes a double frame. */
.mtg-form-panel .flowform-container {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
max-width: none;
padding: 0;
}
/* Compact density. FlowForm hard-codes generous spacing in its stylesheet and exposes no setting for
it, so the panel tightens gaps, field padding and the message box, and puts first and last name
on one row. Scoped to the panel so landing-page forms keep the plugin defaults. */
.wp-block-group.mtg-form-panel .flowform-container .flowform-fields {
display: grid;
gap: 0.85rem 0.9rem;
grid-template-columns: 1fr 1fr;
margin-bottom: 1.1rem;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-field {
grid-column: 1 / -1;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-field-text:nth-child(1),
.wp-block-group.mtg-form-panel .flowform-container .flowform-field-text:nth-child(2) {
grid-column: auto;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-label {
font-size: 0.875rem;
margin-bottom: 0.3rem;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-input,
.wp-block-group.mtg-form-panel .flowform-container .flowform-textarea,
.wp-block-group.mtg-form-panel .flowform-container .flowform-radio-label {
font-size: 0.95rem;
padding: 0.65rem 0.85rem;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-textarea {
min-height: 96px;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-field-subtext {
font-size: 0.8rem;
line-height: 1.45;
margin: 0.15rem 0 0.45rem;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-btn-submit {
padding: 0.75rem 1.4rem;
}
.wp-block-group.mtg-form-panel .flowform-container .flowform-navigation {
margin-top: 0;
}
@media (max-width: 600px) {
.wp-block-group.mtg-form-panel .flowform-container .flowform-fields {
grid-template-columns: 1fr;
}
}
/* "What happens next" list beside the form. */
.mtg-next {
border-top: 1px solid var(--wp--preset--color--line);
margin: 1.25rem 0 0;
padding: 1.1rem 0 0;
}
.mtg-next > .mtg-next__step {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.08em;
margin: 0 0 0.15rem;
}
.mtg-next > p:not(.mtg-next__step) {
color: var(--wp--preset--color--muted);
margin: 0 0 1.1rem;
}
/* Map embed: rounded frame, fixed height, no iframe border. */
.mtg-map {
border: 1px solid var(--wp--preset--color--line);
border-radius: 24px;
height: clamp(280px, 38vw, 440px);
overflow: hidden;
}
.mtg-map iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
/* Contact cards: the link line under the heading. */
.mtg-feature .mtg-feature__link {
color: var(--wp--preset--color--ink);
}
.mtg-feature .mtg-feature__link a {
color: var(--wp--preset--color--ink);
font-weight: 500;
text-decoration: none;
}
.mtg-feature .mtg-feature__link a:hover {
color: var(--wp--preset--color--primary);
text-decoration: underline;
}
/* Contact block: one navy panel that holds the contact details as icon rows on the left and the
white form card on the right. The only dark slab on the site, used deliberately as the page's
focal point. A faint house outline sits in the corner as a watermark. */
.mtg-contact-block {
color: var(--wp--preset--color--base);
overflow: hidden;
position: relative;
}
.mtg-contact-block::after {
background: var(--wp--preset--color--base);
bottom: -140px;
content: "";
height: 460px;
left: -70px;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: 0.07;
pointer-events: none;
position: absolute;
transform: rotate(-8deg);
width: 460px;
}
.mtg-contact-block > * {
position: relative;
z-index: 1;
}
.mtg-contact-block h2,
.mtg-contact-block h3 {
color: inherit;
}
.mtg-contact-block .mtg-contact-block__lead {
color: rgba(255, 255, 255, 0.82);
max-width: 40ch;
}
/* Icon rows. */
.mtg-contact-row {
align-items: flex-start;
}
.mtg-contact-row > .mtg-contact-row__icon {
align-items: center;
background: var(--wp--preset--color--accent);
border-radius: 50%;
display: flex;
flex: 0 0 44px;
height: 44px;
justify-content: center;
margin: 0;
width: 44px;
}
.mtg-contact-row > .mtg-contact-row__icon img {
display: block;
filter: brightness(0) invert(1);
height: 20px;
width: 20px;
}
.mtg-contact-row p {
color: rgba(255, 255, 255, 0.92);
line-height: 1.5;
margin: 0;
}
.mtg-contact-row .mtg-contact-row__label {
color: rgba(255, 255, 255, 0.62);
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.04em;
margin: 0 0 0.1rem;
text-transform: uppercase;
}
.mtg-contact-row a {
color: var(--wp--preset--color--base);
text-decoration: none;
}
.mtg-contact-row a:hover {
text-decoration: underline;
}
/* The form card needs no border on a dark ground. */
.mtg-contact-block .mtg-form-panel {
border: 0;
color: var(--wp--preset--color--ink);
}
@media (max-width: 781px) {
.mtg-contact-block::after {
display: none;
}
}
/* Licensing map: SVG map beside a detail panel. Licensed states are tinted and interactive; the
panel shows the selected state's license lines exactly as published. The full list below the map
(.mtg-lic-list) is the canonical record and needs no JavaScript. */
.mtg-licmap {
align-items: start;
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
}
.mtg-licmap__map svg {
display: block;
height: auto;
overflow: visible;
width: 100%;
}
.mtg-licmap__state {
fill: #E6E9EE;
stroke: var(--wp--preset--color--base);
stroke-linejoin: round;
stroke-width: 1.1;
transition: fill 160ms ease;
}
.mtg-licmap__state.is-licensed {
cursor: pointer;
fill: var(--wp--preset--color--accent);
}
.mtg-licmap__state.is-licensed:hover,
.mtg-licmap__state.is-licensed:focus-visible,
.mtg-licmap__state.is-active {
fill: var(--wp--preset--color--primary);
outline: none;
}
.mtg-licmap__label.is-small {
display: none;
}
.mtg-licmap__label {
fill: var(--wp--preset--color--base);
font-family: inherit;
font-size: 11px;
font-weight: 600;
pointer-events: none;
}
.mtg-licmap__legend {
align-items: center;
color: var(--wp--preset--color--muted);
display: flex;
font-size: var(--wp--preset--font-size--small);
gap: 0.5rem 0.6rem;
justify-content: center;
margin-top: 0.75rem;
}
.mtg-licmap__swatch {
background: #E6E9EE;
border-radius: 4px;
display: inline-block;
height: 14px;
width: 14px;
}
.mtg-licmap__swatch + span,
.mtg-licmap__swatch.is-licensed {
margin-left: 0.6rem;
}
.mtg-licmap__swatch.is-licensed {
background: var(--wp--preset--color--accent);
margin-left: 0;
}
/* Detail panel. */
.mtg-licmap__panel {
background: var(--wp--preset--color--panel-blue);
border-radius: 24px;
padding: clamp(1.25rem, 2.4vw, 2rem);
position: sticky;
top: 110px;
}
.mtg-licmap__kicker {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin: 0 0 0.9rem;
text-transform: uppercase;
}
.mtg-licmap__select-label {
color: var(--wp--preset--color--muted);
display: block;
font-size: var(--wp--preset--font-size--small);
margin-bottom: 0.3rem;
}
.mtg-licmap__select {
appearance: none;
background: var(--wp--preset--color--base) url("data:image/svg+xml;utf8,") right 0.9rem center / 16px no-repeat;
border: 1px solid #D7DBE0;
border-radius: 12px;
color: var(--wp--preset--color--ink);
font: inherit;
padding: 0.7rem 2.4rem 0.7rem 0.9rem;
width: 100%;
}
.mtg-licmap__select:focus {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 3px rgba(6, 66, 127, 0.12);
outline: none;
}
.mtg-licmap__detail {
border-top: 1px solid rgba(17, 17, 17, 0.1);
margin-top: 1.1rem;
min-height: 150px;
padding-top: 1.1rem;
}
.mtg-licmap__hint {
color: var(--wp--preset--color--muted);
margin: 0;
}
.mtg-licmap__title {
font-size: var(--wp--preset--font-size--x-large);
font-weight: 500;
margin: 0 0 0.6rem;
}
.mtg-licmap__lines,
.mtg-lic__lines {
margin: 0;
}
.mtg-lic__line {
display: block;
line-height: 1.55;
}
/* Every other line is an NMLS number: weight it so pairs read as pairs. */
.mtg-lic__line:nth-child(even) {
color: var(--wp--preset--color--muted);
margin-bottom: 0.45rem;
}
.mtg-licmap__more {
color: var(--wp--preset--color--primary);
display: inline-block;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
margin-top: 0.9rem;
}
.mtg-licmap__company {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 1.25rem 0 0;
}
/* The full list: the compliance record, one card per state. */
.mtg-lic-list {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.mtg-lic {
--mx: 50%;
--my: 50%;
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
border-radius: 18px;
overflow: hidden;
padding: 1.25rem 1.35rem;
position: relative;
scroll-margin-top: 120px;
transition: background-color 250ms ease, border-color 250ms ease;
}
/* Spotlight hover (Martin, 2026-10-08): the card floods brand navy and a soft light follows the cursor
(motion.js sets --mx/--my; without JavaScript the glow rests at the centre). No lift, nothing clickable. */
.mtg-lic::before {
background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 45%, transparent 70%);
border-radius: inherit;
content: "";
inset: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 250ms ease;
}
.mtg-lic:hover {
background: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
}
.mtg-lic:hover::before {
opacity: 1;
}
.mtg-lic > * {
position: relative;
z-index: 1;
}
.mtg-lic:hover .mtg-lic__abbr {
color: #AECBE8;
}
.mtg-lic:hover .mtg-lic__name,
.mtg-lic:hover .mtg-lic__lines {
color: #FFFFFF;
}
.mtg-lic:hover .mtg-lic__lines .mtg-lic__line {
color: rgba(255, 255, 255, 0.86);
}
@media (prefers-reduced-motion: reduce) {
.mtg-lic,
.mtg-lic::before {
transition: none;
}
}
.mtg-lic:target {
border-color: var(--wp--preset--color--primary);
box-shadow: 0 0 0 3px rgba(6, 66, 127, 0.12);
}
.mtg-lic__abbr {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
letter-spacing: 0.08em;
margin: 0;
}
.mtg-lic__name {
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
margin: 0.1rem 0 0.6rem;
}
.mtg-lic__lines .mtg-lic__line {
font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 1000px) {
.mtg-licmap {
grid-template-columns: 1fr;
}
.mtg-licmap__panel {
position: static;
}
.mtg-lic-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.mtg-licmap__label {
display: none;
}
.mtg-lic-list {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.mtg-licmap__state {
transition: none;
}
}
/* Scroll-in motion. Only active when assets/js/motion.js has added html.mtg-motion, so without
the script, or with reduced motion, everything below is simply visible. Each group reveals once;
children stagger by their --i index set by the script. */
html.mtg-motion .mtg-statband > .wp-block-column,
html.mtg-motion .mtg-reasons > .mtg-reason,
html.mtg-motion .mtg-steps > .mtg-step {
opacity: 0;
transform: translateY(14px);
transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
transition-delay: calc(var(--i, 0) * 90ms);
}
html.mtg-motion .mtg-steps > .mtg-step {
transition-delay: calc(var(--i, 0) * 220ms);
}
html.mtg-motion .mtg-statband.is-inview > .wp-block-column,
html.mtg-motion .mtg-reasons.is-inview > .mtg-reason,
html.mtg-motion .mtg-steps.is-inview > .mtg-step {
opacity: 1;
transform: none;
}
/* Step discs pop in after their column arrives. */
html.mtg-motion .mtg-steps > .mtg-step > .mtg-step__num {
opacity: 0;
transform: scale(0.6);
transition: opacity 320ms ease, transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
transition-delay: calc(var(--i, 0) * 220ms + 160ms);
}
html.mtg-motion .mtg-steps.is-inview > .mtg-step > .mtg-step__num {
opacity: 1;
transform: scale(1);
}
/* The connecting line draws left to right underneath the discs. */
html.mtg-motion .mtg-steps::before {
transform: scaleX(0);
transform-origin: left center;
transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms;
}
html.mtg-motion .mtg-steps.is-inview::before {
transform: scaleX(1);
}
/* Reason index numbers tint in a beat after the row. */
html.mtg-motion .mtg-reasons > .mtg-reason .mtg-reason__num {
opacity: 0;
transition: opacity 500ms ease;
transition-delay: calc(var(--i, 0) * 90ms + 200ms);
}
html.mtg-motion .mtg-reasons.is-inview > .mtg-reason .mtg-reason__num {
opacity: 1;
}
/* Loan catalog: a filterable grid of .mtg-feature cards. The filter chips and the count line are
inserted by assets/js/catalog.js; without it the grid is simply all cards. */
.mtg-catalog {
display: grid;
gap: clamp(0.9rem, 1.4vw, 1.4rem);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mtg-catalog > * {
margin: 0;
}
.mtg-catalog > .is-hidden {
display: none;
}
.mtg-catalog .mtg-feature {
height: 100%;
}
/* Small tag above the card title. */
.mtg-feature .mtg-feature__tag {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin: 0;
text-transform: uppercase;
}
.mtg-feature .mtg-feature__tag + h3 {
margin-top: -0.2rem;
}
/* Filter chips. */
.mtg-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin: 0 0 0.75rem;
}
.mtg-filter__chip {
background: var(--wp--preset--color--base);
border: 1px solid #D7DBE0;
border-radius: 999px;
color: var(--wp--preset--color--ink);
cursor: pointer;
font: inherit;
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1;
padding: 0.65rem 1.05rem;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.mtg-filter__chip:hover {
border-color: var(--wp--preset--color--ink);
}
.mtg-filter__chip[aria-pressed="true"] {
background: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base);
}
.mtg-filter__chip:focus-visible {
box-shadow: 0 0 0 3px rgba(6, 66, 127, 0.2);
outline: none;
}
.mtg-filter__count {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0 0 1.5rem;
text-align: center;
}
@media (max-width: 1100px) {
.mtg-catalog {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.mtg-catalog {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.mtg-catalog {
grid-template-columns: 1fr;
}
.mtg-filter {
justify-content: flex-start;
}
}
/* Word wall: a mosaic of team headshots clipped to the word PROS. The letters come from an inline
SVG clipPath whose text is sized in container units, so the word scales with the box. The grid is
plain Image blocks, generated from the same roster as the team grid below. */
.mtg-wordwall {
aspect-ratio: 100 / 29;
container-type: inline-size;
position: relative;
}
/* The SVG holds the clipPath and, on top of the mosaic, a copy of the word carrying an inner
shadow so the letters read as cut into the page. It must be the full size of the wall so that
x="50%" resolves to the centre of the box rather than to a zero-size viewport. */
.mtg-wordwall__svg {
height: 100%;
left: 0;
overflow: visible;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
.mtg-wordwall__inset {
fill: #000;
}
/* Both layers, the clipped mosaic and the word that paints the edge band, must occupy exactly the
same box. The grid is pinned absolutely so the flow layout can never offset it (WordPress adds a
block gap above a second child, which showed up as a drop shadow). */
.mtg-wordwall > .mtg-wordwall__grid {
inset: 0;
margin: 0;
position: absolute;
z-index: 1;
}
.mtg-wordwall__text {
font-family: var(--wp--preset--font-family--albert-sans, "Albert Sans", sans-serif);
font-size: 37.5cqw;
font-weight: 800;
letter-spacing: -0.03em;
}
.mtg-wordwall__grid {
clip-path: url(#mtg-wordwall-clip);
display: grid;
gap: 3px;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(4, minmax(0, 1fr));
height: 100%;
width: 100%;
}
.mtg-wordwall__grid > * {
margin: 0;
min-height: 0;
min-width: 0;
}
.mtg-wordwall__grid > .wp-block-image {
height: 100%;
}
.mtg-wordwall__grid > .wp-block-image img {
border-radius: 0;
display: block;
height: 100%;
object-fit: cover;
object-position: center top;
width: 100%;
}
/* Fallback when clip-path to an SVG clipPath is unsupported: show a soft-edged mosaic strip. */
@supports not (clip-path: url(#x)) {
.mtg-wordwall {
aspect-ratio: 100 / 18;
}
.mtg-wordwall__grid {
border-radius: 24px;
overflow: hidden;
}
}
/* Numbered reasons: editorial rows with a small index, a title column and the full copy. Used where
the argument deserves more than a card. Rows are Columns blocks separated by hairlines. */
.mtg-reasons > .wp-block-columns {
border-top: 1px solid var(--wp--preset--color--line);
margin: 0;
padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
}
.mtg-reasons > .wp-block-columns:last-child {
border-bottom: 1px solid var(--wp--preset--color--line);
}
.mtg-reason__num {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.7;
margin: 0;
}
.mtg-reason h3 {
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0;
}
.mtg-reason p {
color: var(--wp--preset--color--muted);
margin: 0;
}
/* Process steps: numbered discs joined by a hairline, one column per step. */
.mtg-steps {
position: relative;
}
.mtg-steps::before {
background: var(--wp--preset--color--line);
content: "";
height: 1px;
left: 22px;
position: absolute;
right: 22px;
top: 22px;
}
.mtg-step > .mtg-step__num {
align-items: center;
background: var(--wp--preset--color--primary);
border-radius: 50%;
box-shadow: 0 0 0 8px var(--wp--preset--color--base);
color: var(--wp--preset--color--base);
display: flex;
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
height: 44px;
justify-content: center;
margin: 0 0 1rem;
position: relative;
width: 44px;
}
.mtg-step > h3 {
font-weight: 500;
margin: 1.1rem 0 0.4rem;
}
.mtg-step p {
color: var(--wp--preset--color--muted);
margin: 0;
}
/* Comparison table in the current design language: thin rules, rounded frame, our column tinted. */
.wp-block-table.mtg-compare {
border: 1px solid var(--wp--preset--color--line);
border-radius: 20px;
margin: 0;
overflow: auto;
}
.wp-block-table.mtg-compare table {
border: 0;
border-collapse: collapse;
min-width: 640px;
width: 100%;
}
.wp-block-table.mtg-compare th,
.wp-block-table.mtg-compare td {
border: 0;
border-bottom: 1px solid var(--wp--preset--color--line);
padding: 1rem 1.15rem;
text-align: left;
vertical-align: top;
}
.wp-block-table.mtg-compare thead th {
background: var(--wp--preset--color--panel);
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.02em;
}
.wp-block-table.mtg-compare tbody tr:last-child td {
border-bottom: 0;
}
.wp-block-table.mtg-compare td {
color: var(--wp--preset--color--muted);
}
.wp-block-table.mtg-compare td:first-child {
color: var(--wp--preset--color--ink);
font-weight: 600;
width: 22%;
}
.wp-block-table.mtg-compare th:nth-child(2),
.wp-block-table.mtg-compare td:nth-child(2) {
background: var(--wp--preset--color--panel-blue);
color: var(--wp--preset--color--ink);
}
.wp-block-table.mtg-compare thead th:nth-child(2) {
color: var(--wp--preset--color--primary);
}
/* Neutral variant: no column is ours, so no column is tinted. */
.wp-block-table.mtg-compare.mtg-compare--neutral th:nth-child(2),
.wp-block-table.mtg-compare.mtg-compare--neutral td:nth-child(2) {
background: transparent;
}
.wp-block-table.mtg-compare.mtg-compare--neutral thead th:nth-child(2) {
background: var(--wp--preset--color--panel);
color: var(--wp--preset--color--ink);
}
.wp-block-table.mtg-compare.mtg-compare--neutral td:nth-child(2) {
color: var(--wp--preset--color--muted);
}
@media (max-width: 781px) {
.mtg-reasons > .wp-block-columns {
padding: 1.25rem 0;
}
.mtg-reason.wp-block-columns {
gap: 0.55rem;
}
.mtg-steps::before {
display: none;
}
.wp-block-table.mtg-compare th,
.wp-block-table.mtg-compare td {
font-size: var(--wp--preset--font-size--small);
padding: 0.75rem 0.7rem;
}
}
/* Team grid: portrait cards laid out with flex rather than grid, so that an incomplete final row
hugs the same edge the section is aligned to. Column count comes from --cols. Each section sits in
a tinted panel and the sections alternate left, right, left down the page. */
.mtg-team {
--cols: 6;
--gap: clamp(0.85rem, 1.3vw, 1.35rem);
}
.mtg-team-grid {
display: flex;
flex-wrap: wrap;
gap: calc(var(--gap) * 1.5) var(--gap);
justify-content: flex-start;
}
.mtg-team-grid > * {
margin: 0;
}
.mtg-person {
flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
margin: 0;
min-width: 0;
}
.mtg-person > .wp-block-image {
border-radius: 14px;
margin: 0 0 0.6rem;
overflow: hidden;
}
.mtg-person > .wp-block-image img {
aspect-ratio: 3 / 4;
border-radius: 0;
display: block;
object-fit: cover;
object-position: center top;
transition: transform 320ms ease;
width: 100%;
}
.mtg-person:hover > .wp-block-image img {
transform: scale(1.045);
}
.mtg-person__name {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.mtg-person__meta {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
line-height: 1.4;
margin: 0.1rem 0 0;
}
/* Section label above each group of people. */
.mtg-team-label {
align-items: baseline;
border-bottom: 1px solid rgba(17, 17, 17, 0.1);
display: flex;
gap: 0.85rem;
margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem);
padding-bottom: 0.85rem;
}
.mtg-team-label h2 {
margin: 0;
}
.mtg-team-label__count {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0;
}
/* Right-aligned sections mirror the label and let the last row finish on the right. */
.mtg-team--right .mtg-team-label {
justify-content: flex-end;
}
.mtg-team--right .mtg-team-grid {
justify-content: flex-end;
}
.mtg-team--right .mtg-person__name,
.mtg-team--right .mtg-person__meta {
text-align: right;
}
@media (max-width: 1200px) {
.mtg-team { --cols: 5; }
}
@media (max-width: 1000px) {
.mtg-team { --cols: 4; }
}
@media (max-width: 782px) {
.mtg-team { --cols: 3; }
}
@media (max-width: 560px) {
.mtg-team { --cols: 2; }
.mtg-team--right .mtg-team-label {
justify-content: flex-start;
}
.mtg-team--right .mtg-team-grid {
justify-content: flex-start;
}
.mtg-team--right .mtg-person__name,
.mtg-team--right .mtg-person__meta {
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
.mtg-person:hover > .wp-block-image img {
transform: none;
}
}
/* Bento photo grid: five tiles of mixed size. Each tile holds two images that cross-fade on a
shared cycle, with the tile easing down a fraction at the swap so the grid reads as alive.
Staggered by a negative delay per tile so they never change together. CSS only, no JavaScript. */
.mtg-bento {
--bT: 15s;
display: grid;
gap: clamp(10px, 1.1vw, 16px);
grid-auto-rows: clamp(120px, 15.5vw, 205px);
grid-template-columns: repeat(4, 1fr);
}
.mtg-bento > * {
margin: 0;
}
.mtg-bento__tile {
animation: mtg-bento-breathe var(--bT) ease-in-out var(--bd, 0s) infinite both;
border-radius: 20px;
margin: 0;
overflow: hidden;
position: relative;
}
.mtg-bento__tile > .wp-block-image {
animation-duration: var(--bT);
animation-delay: var(--bd, 0s);
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
inset: 0;
margin: 0;
position: absolute;
}
.mtg-bento__tile > .wp-block-image:nth-of-type(1) {
animation-name: mtg-bento-a;
}
.mtg-bento__tile > .wp-block-image:nth-of-type(2) {
animation-name: mtg-bento-b;
}
.mtg-bento__tile > .wp-block-image img {
border-radius: 0;
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.mtg-bento .t1 { grid-column: 1; grid-row: 1 / span 2; --bd: 0s; }
.mtg-bento .t2 { grid-column: 2; grid-row: 1; --bd: -3s; }
.mtg-bento .t3 { grid-column: 3; grid-row: 1; --bd: -6s; }
.mtg-bento .t4 { grid-column: 4; grid-row: 1 / span 2; --bd: -9s; }
.mtg-bento .t5 { grid-column: 2 / span 2; grid-row: 2; --bd: -12s; }
@keyframes mtg-bento-a {
0%, 44% { opacity: 1; transform: scale(1); }
50%, 94% { opacity: 0; transform: scale(1.07); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes mtg-bento-b {
0%, 44% { opacity: 0; transform: scale(1.07); }
50%, 94% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.07); }
}
@keyframes mtg-bento-breathe {
0%, 38%, 100% { transform: scale(1); }
47% { transform: scale(0.975); }
56% { transform: scale(1); }
}
@media (max-width: 781px) {
.mtg-bento {
grid-auto-rows: clamp(104px, 27vw, 150px);
grid-template-columns: repeat(2, 1fr);
}
.mtg-bento .t1 { grid-column: 1; grid-row: 1 / span 2; }
.mtg-bento .t2 { grid-column: 2; grid-row: 1; }
.mtg-bento .t3 { grid-column: 2; grid-row: 2; }
.mtg-bento .t4 { grid-column: 1; grid-row: 3; }
.mtg-bento .t5 { grid-column: 2; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
.mtg-bento__tile,
.mtg-bento__tile > .wp-block-image {
animation: none;
}
.mtg-bento__tile > .wp-block-image:nth-of-type(1) { opacity: 1; }
.mtg-bento__tile > .wp-block-image:nth-of-type(2) { opacity: 0; }
}
/* Stat band: values on one rule-bounded row, divided by hairlines on desktop. */
.mtg-statband {
border-bottom: 1px solid var(--wp--preset--color--line);
border-top: 1px solid var(--wp--preset--color--line);
padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.mtg-statband .wp-block-column {
text-align: center;
}
.mtg-statband .wp-block-column + .wp-block-column {
border-left: 1px solid var(--wp--preset--color--line);
}
.mtg-statband__value {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0;
}
.mtg-statband__label {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0.45rem auto 0;
max-width: 22ch;
}
/* Leadership: portrait tiles in the same rounded language as the hero photos. */
.mtg-leader img {
aspect-ratio: 3 / 4;
border-radius: 18px;
display: block;
object-fit: cover;
object-position: center top;
width: 100%;
}
.mtg-leader .wp-block-image {
margin: 0 0 1rem;
max-width: 200px;
}
.mtg-leader__name {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--large);
font-weight: 600;
margin: 0 0 0.15rem;
}
.mtg-leader__role {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0;
}
@media (max-width: 781px) {
.mtg-statband .wp-block-column + .wp-block-column {
border-left: 0;
border-top: 1px solid var(--wp--preset--color--line);
padding-top: 1.5rem;
}
.mtg-leader .wp-block-image {
max-width: 180px;
}
}
/* Footer: compact link grid, licensing row, slim legal bar. Small type, thin dividers, light surface. */
.mtg-footer {
border-top: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
}
.mtg-footer .wp-block-site-logo img {
max-height: 40px;
width: auto;
}
.mtg-footer__tagline {
color: var(--wp--preset--color--muted);
margin: 0.75rem 0 0;
max-width: 30ch;
}
.mtg-footer__social {
margin-top: 1rem;
}
.mtg-footer__social .wp-social-link a:hover {
color: var(--wp--preset--color--primary) !important;
}
.mtg-footer__cta {
margin-top: 1.75rem;
max-width: 32ch;
}
.mtg-footer__cta p {
margin: 0.25rem 0 0.75rem;
}
.mtg-footer__button .wp-block-button__link {
font-size: var(--wp--preset--font-size--small);
padding: 0.55rem 1.1rem;
}
.mtg-footer__heading {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
letter-spacing: 0;
margin: 0 0 0.9rem;
text-transform: none;
}
.mtg-footer__links {
list-style: none;
margin: 0;
padding: 0;
}
.mtg-footer__links li {
margin: 0 0 0.6rem;
}
.mtg-footer a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--muted);
text-decoration: none;
transition: color 200ms ease;
}
.mtg-footer a:where(:not(.wp-element-button)):hover {
color: var(--wp--preset--color--primary);
}
.mtg-footer__grid {
gap: var(--wp--preset--spacing--30);
}
/* Licensing row (replaces the reference's "Backed by" strip). */
.mtg-footer__licensing {
border-bottom: 1px solid var(--wp--preset--color--line);
border-top: 1px solid var(--wp--preset--color--line);
margin-top: var(--wp--preset--spacing--40);
padding: var(--wp--preset--spacing--30) 0;
}
.mtg-footer__licensing p {
margin: 0;
}
.mtg-footer__licensing-label {
color: var(--wp--preset--color--ink);
font-weight: 600;
margin-bottom: 0.6rem !important;
}
.mtg-states {
color: var(--wp--preset--color--ink);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 2;
}
.mtg-states a {
color: var(--wp--preset--color--primary) !important;
font-weight: 700;
}
.mtg-footer__nmls {
margin-top: 0.75rem !important;
}
.mtg-footer__nmls a {
color: var(--wp--preset--color--primary) !important;
}
/* Bottom bar. */
.mtg-footer__bottom {
align-items: center;
padding-top: var(--wp--preset--spacing--20);
}
.mtg-footer__bottom p {
margin: 0;
}
.mtg-footer__legal {
align-items: center;
gap: 1.25rem;
}
.mtg-footer__legal .mtg-eho {
margin: 0;
}
@media (max-width: 782px) {
.mtg-footer__grid {
gap: var(--wp--preset--spacing--20);
}
.mtg-footer__bottom {
justify-content: flex-start;
}
}
/* Accessible focus outline on every interactive element. */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 2px;
}
/* ------------------------------------------------------------------------------------------------
Service (loan product) pages. Built by tools/build-service-page.js from content/services/.js.
------------------------------------------------------------------------------------------------ */
/* Hero: copy on the left, a quick-facts card on the right. No eyebrow pill. */
.mtg-servicehero h1 {
margin: 0 0 1rem;
}
.mtg-servicehero .mtg-servicehero__lead {
line-height: 1.55;
max-width: 52ch;
}
.mtg-servicehero .mtg-servicehero__trust {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin-top: 1.25rem;
}
.mtg-facts {
background: var(--wp--preset--color--panel-blue);
border-radius: 24px;
padding: 1.75rem 2rem;
}
.mtg-facts .mtg-facts__title {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin: 0 0 0.75rem;
text-transform: uppercase;
}
.mtg-facts .mtg-facts__row {
border-top: 1px solid rgba(6, 66, 127, 0.12);
display: flex;
gap: 1rem;
justify-content: space-between;
margin: 0;
padding: 0.85rem 0;
}
.mtg-facts .mtg-facts__row > p {
margin: 0;
}
.mtg-facts .mtg-facts__label {
color: var(--wp--preset--color--muted);
flex: 0 0 42%;
}
.mtg-facts .mtg-facts__value {
color: var(--wp--preset--color--ink);
font-weight: 600;
text-align: right;
}
/* Who it fits: two checklists on a warm panel. */
.mtg-fit .mtg-fit__list {
list-style: none;
margin: 0;
padding: 0;
}
.mtg-fit .mtg-fit__list li {
margin: 0 0 0.85rem;
padding-left: 2.1rem;
position: relative;
}
.mtg-fit .mtg-fit__list li::before {
background-color: var(--wp--preset--color--primary);
border-radius: 50%;
content: "";
height: 1.4rem;
left: 0;
position: absolute;
top: 0.1rem;
width: 1.4rem;
}
.mtg-fit .mtg-fit__list li::after {
background-color: #fff;
content: "";
height: 1.4rem;
left: 0;
-webkit-mask: var(--mtg-tick) center / 0.9rem 0.9rem no-repeat;
mask: var(--mtg-tick) center / 0.9rem 0.9rem no-repeat;
position: absolute;
top: 0.1rem;
width: 1.4rem;
}
.mtg-fit .mtg-fit__list.is-no li::before {
background-color: #9CA3AF;
}
.mtg-fit .mtg-fit__list.is-no li::after {
-webkit-mask-image: var(--mtg-dash);
mask-image: var(--mtg-dash);
}
.mtg-fit h3 {
font-size: var(--wp--preset--font-size--large);
margin-bottom: 1rem;
}
/* Requirements table: same table styling as the comparison, no tinted column. */
.wp-block-table.mtg-compare.mtg-compare--plain td {
background: transparent;
}
.wp-block-table.mtg-compare.mtg-compare--plain td:first-child {
color: var(--wp--preset--color--ink);
font-weight: 600;
}
/* Calculator (shortcode [mtg_refi_calc], assets/js/calc.js). */
.mtg-calc {
display: grid;
gap: 1.5rem;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
margin: 0;
}
.mtg-calc .mtg-calc__inputs {
display: grid;
gap: 1rem;
}
.mtg-calc .mtg-calc__group {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
border-radius: 18px;
margin: 0;
min-width: 0;
padding: 1.1rem 1.25rem 1.25rem;
}
.mtg-calc .mtg-calc__group legend {
color: var(--wp--preset--color--primary);
float: left;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 0.9rem;
padding: 0;
text-transform: uppercase;
width: 100%;
}
.mtg-calc .mtg-calc__inputs {
align-content: start;
}
.mtg-calc .mtg-calc__fields {
clear: both;
display: grid;
gap: 0.9rem 1rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mtg-calc .mtg-calc__field {
display: block;
min-width: 0;
}
.mtg-calc .mtg-calc__label {
color: var(--wp--preset--color--muted);
display: block;
font-size: var(--wp--preset--font-size--small);
margin-bottom: 0.35rem;
}
.mtg-calc .mtg-calc__input {
align-items: center;
background: var(--wp--preset--color--panel);
border: 1px solid var(--wp--preset--color--line);
border-radius: 10px;
display: flex;
gap: 0.3rem;
min-width: 0;
padding: 0 0.75rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mtg-calc .mtg-calc__input:focus-within {
border-color: var(--wp--preset--color--accent);
box-shadow: 0 0 0 3px rgba(57, 122, 188, 0.18);
}
.mtg-calc .mtg-calc__affix {
color: var(--wp--preset--color--muted);
flex: 0 0 auto;
font-size: var(--wp--preset--font-size--small);
white-space: nowrap;
}
.mtg-calc .mtg-calc__input input {
appearance: textfield;
-moz-appearance: textfield;
background: transparent;
border: 0;
box-shadow: none;
color: var(--wp--preset--color--ink);
font: inherit;
font-variant-numeric: tabular-nums;
font-weight: 500;
min-width: 0;
outline: 0;
padding: 0.65rem 0;
width: 100%;
}
.mtg-calc .mtg-calc__input--select {
padding-right: 0;
}
.mtg-calc .mtg-calc__input select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: transparent url("data:image/svg+xml;utf8,") right 0.6rem center / 1.1rem no-repeat;
border: 0;
border-radius: 10px;
color: var(--wp--preset--color--ink);
cursor: pointer;
font: inherit;
font-weight: 500;
min-width: 0;
outline: 0;
padding: 0.65rem 2.2rem 0.65rem 0;
text-overflow: ellipsis;
width: 100%;
}
.mtg-calc .mtg-calc__input input::-webkit-outer-spin-button,
.mtg-calc .mtg-calc__input input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
.mtg-calc .mtg-calc__results {
background: var(--wp--preset--color--primary);
border-radius: 18px;
color: #fff;
display: grid;
gap: 1rem 1.25rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 1.5rem 1.75rem;
}
.mtg-calc .mtg-calc__result {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.mtg-calc .mtg-calc__result--lead {
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
grid-column: 1 / -1;
padding-bottom: 1rem;
}
.mtg-calc .mtg-calc__result-label {
color: rgba(255, 255, 255, 0.72);
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.02em;
}
.mtg-calc .mtg-calc__value {
font-size: var(--wp--preset--font-size--x-large);
font-variant-numeric: tabular-nums;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
transition: color 0.3s ease;
}
.mtg-calc .mtg-calc__result--lead .mtg-calc__value {
color: #FCA5A5;
font-size: var(--wp--preset--font-size--huge);
}
.mtg-calc.is-saving .mtg-calc__result--lead .mtg-calc__value {
color: #86EFAC;
}
/* The purchase calculator's headline is a payment, not a saving, so it stays neutral. */
.mtg-calc[data-mtg-calc="purchase"] .mtg-calc__result--lead .mtg-calc__value {
color: #fff;
}
.mtg-calc .mtg-calc__note {
color: rgba(255, 255, 255, 0.72);
font-size: var(--wp--preset--font-size--small);
}
.mtg-calc .mtg-calc__disclaimer {
color: rgba(255, 255, 255, 0.72);
font-size: var(--wp--preset--font-size--small);
grid-column: 1 / -1;
margin: 0.5rem 0 0;
}
@media (max-width: 1024px) {
.mtg-calc {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
.mtg-calc .mtg-calc__fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mtg-calc .mtg-calc__results {
grid-template-columns: minmax(0, 1fr);
}
.mtg-facts .mtg-facts__row {
flex-direction: column;
gap: 0.15rem;
}
.mtg-facts .mtg-facts__value {
text-align: left;
}
}
/* States panel: the licensed-state list from the Licensing data screen as one wrapped line. */
.mtg-states-panel .mtg-states {
font-size: var(--wp--preset--font-size--medium);
line-height: 2.2;
margin-top: var(--wp--preset--spacing--20);
}
/* Motion: any .mtg-stagger group lifts its direct children in one after another; the hero facts
card slides in from the right on load. Only when motion.js has added html.mtg-motion. */
html.mtg-motion .mtg-stagger > * {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: calc(var(--i, 0) * 90ms);
}
html.mtg-motion .mtg-stagger.is-inview > * {
opacity: 1;
transform: none;
}
@keyframes mtg-slide-in {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: none; }
}
@keyframes mtg-rise-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
html.mtg-motion .mtg-servicehero .mtg-facts {
animation: mtg-slide-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
html.mtg-motion .mtg-servicehero .mtg-facts .mtg-facts__row {
animation: mtg-rise-in 0.5s ease both;
}
html.mtg-motion .mtg-servicehero .mtg-facts .mtg-facts__row:nth-of-type(1) { animation-delay: 0.45s; }
html.mtg-motion .mtg-servicehero .mtg-facts .mtg-facts__row:nth-of-type(2) { animation-delay: 0.55s; }
html.mtg-motion .mtg-servicehero .mtg-facts .mtg-facts__row:nth-of-type(3) { animation-delay: 0.65s; }
html.mtg-motion .mtg-servicehero .mtg-facts .mtg-facts__row:nth-of-type(4) { animation-delay: 0.75s; }
html.mtg-motion .mtg-servicehero .mtg-facts .mtg-facts__row:nth-of-type(5) { animation-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
html.mtg-motion .mtg-stagger > *,
html.mtg-motion .mtg-servicehero .mtg-facts,
html.mtg-motion .mtg-servicehero .mtg-facts .mtg-facts__row {
animation: none;
opacity: 1;
transform: none;
transition: none;
}
}
/* ------------------------------------------------------------------------------------------------
Service-page variants. Each product page uses a different hero aside and one signature section so
the pages read as a family without looking like copies of one another.
------------------------------------------------------------------------------------------------ */
/* Hero variant: photograph with a floating badge (purchase). */
.mtg-heromedia {
position: relative;
}
.mtg-heromedia .mtg-heromedia__img {
margin: 0;
}
.mtg-heromedia .mtg-heromedia__img img {
aspect-ratio: 4 / 3;
border-radius: 28px;
display: block;
object-fit: cover;
width: 100%;
}
.mtg-heromedia .mtg-heromedia__badge {
background: var(--wp--preset--color--base);
border-radius: 20px;
bottom: -1.5rem;
box-shadow: 0 18px 40px rgba(6, 66, 127, 0.18);
left: -1.5rem;
padding: 1.1rem 1.5rem;
position: absolute;
text-align: center;
}
.mtg-heromedia .mtg-heromedia__badge-value {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--x-large);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
}
.mtg-heromedia .mtg-heromedia__badge-label {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0.25rem 0 0;
max-width: 15ch;
}
/* Hero variant: calculator in the hero (refinance). */
.mtg-herocalc {
background: var(--wp--preset--color--panel);
border: 1px solid var(--wp--preset--color--line);
border-radius: 28px;
padding: 1.5rem 1.75rem 1.75rem;
}
.mtg-herocalc .mtg-facts__title {
margin-bottom: 1rem;
}
.mtg-servicehero.is-calc .mtg-calc {
gap: 1rem;
grid-template-columns: minmax(0, 1fr);
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__inputs {
gap: 0.75rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__group {
background: var(--wp--preset--color--base);
padding: 0.9rem 1rem 1rem;
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__fields {
gap: 0.6rem;
grid-template-columns: minmax(0, 1fr);
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__input input {
padding: 0.5rem 0;
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__results {
gap: 0.75rem 1.25rem;
padding: 1.25rem 1.5rem;
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__result--lead {
padding-bottom: 0.75rem;
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__result--lead .mtg-calc__value {
font-size: var(--wp--preset--font-size--xx-large);
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__value {
font-size: var(--wp--preset--font-size--large);
}
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__disclaimer {
display: none;
}
/* Hero variant: equity bar (cash-out). */
.mtg-equity {
background: var(--wp--preset--color--panel-blue);
border-radius: 28px;
padding: 1.75rem 2rem 1.5rem;
}
.mtg-equity .mtg-equity__bar {
flex-wrap: nowrap;
height: 84px;
margin: 0 0 1.25rem;
}
.mtg-equity .mtg-equity__bar > .mtg-equity__seg {
align-items: center;
border-radius: 10px;
display: flex;
flex-grow: 0;
justify-content: center;
min-width: 0;
overflow: hidden;
padding: 0;
transform-origin: left center;
}
.mtg-equity .mtg-equity__seg.is-owed {
background: var(--wp--preset--color--primary);
}
.mtg-equity .mtg-equity__seg.is-available {
background: #2E9E63;
}
.mtg-equity .mtg-equity__seg.is-kept {
background: #C9D8E8;
}
.mtg-equity .mtg-equity__seg-value {
color: #fff;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
margin: 0;
white-space: nowrap;
}
.mtg-equity .mtg-equity__seg.is-kept .mtg-equity__seg-value {
color: var(--wp--preset--color--primary);
}
.mtg-equity .mtg-equity__key {
align-items: baseline;
display: flex;
gap: 1rem;
justify-content: space-between;
padding: 0.5rem 0;
position: relative;
}
.mtg-equity .mtg-equity__key + .mtg-equity__key {
border-top: 1px solid rgba(6, 66, 127, 0.12);
}
.mtg-equity .mtg-equity__key-label {
color: var(--wp--preset--color--muted);
margin: 0;
padding-left: 1.35rem;
position: relative;
}
.mtg-equity .mtg-equity__key-label::before {
border-radius: 4px;
content: "";
height: 0.85rem;
left: 0;
position: absolute;
top: 0.35rem;
width: 0.85rem;
}
.mtg-equity .mtg-equity__key.is-owed .mtg-equity__key-label::before {
background: var(--wp--preset--color--primary);
}
.mtg-equity .mtg-equity__key.is-available .mtg-equity__key-label::before {
background: #2E9E63;
}
.mtg-equity .mtg-equity__key.is-kept .mtg-equity__key-label::before {
background: #C9D8E8;
}
.mtg-equity .mtg-equity__key-value {
color: var(--wp--preset--color--ink);
font-weight: 600;
margin: 0;
white-space: nowrap;
}
.mtg-equity .mtg-equity__key.is-available .mtg-equity__key-value {
color: #1F7A4A;
}
.mtg-equity .mtg-equity__note {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 1rem 0 0;
}
/* Signature section: verdict cards (refinance). */
.mtg-verdict {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 0.75rem;
height: 100%;
padding: 1.75rem;
}
.mtg-verdict > * {
margin: 0;
}
.mtg-verdict .mtg-verdict__badge {
align-self: flex-start;
border-radius: 999px;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.3rem 0.85rem;
text-transform: uppercase;
}
.mtg-verdict .mtg-verdict__badge.is-yes {
background: #E3F5EB;
color: #1F7A4A;
}
.mtg-verdict .mtg-verdict__badge.is-maybe {
background: #FEF3C7;
color: #92600E;
}
.mtg-verdict .mtg-verdict__badge.is-no {
background: #F1F3F5;
color: var(--wp--preset--color--muted);
}
.mtg-verdict h3 {
font-weight: 500;
}
.mtg-verdict .mtg-verdict__outcome {
border-top: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--ink);
font-weight: 600;
margin-top: auto;
padding-top: 0.9rem;
}
/* Signature section: large numbered uses (cash-out). */
.mtg-uses .mtg-use {
align-items: baseline;
border-top: 1px solid var(--wp--preset--color--line);
margin: 0;
padding: 1.75rem 0;
}
.mtg-uses .mtg-use:last-child {
border-bottom: 1px solid var(--wp--preset--color--line);
}
.mtg-uses .mtg-use__num {
color: var(--wp--preset--color--accent);
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 300;
letter-spacing: -0.03em;
line-height: 1;
margin: 0;
}
.mtg-uses .mtg-use h3 {
margin: 0 0 0.5rem;
}
.mtg-uses .mtg-use p {
color: var(--wp--preset--color--muted);
margin: 0;
}
/* Signature section: vertical timeline (purchase). */
.mtg-tl .mtg-tl__item {
align-items: flex-start;
padding-bottom: 2rem;
position: relative;
}
.mtg-tl .mtg-tl__item:last-child {
padding-bottom: 0;
}
.mtg-tl .mtg-tl__item::before {
background: rgba(6, 66, 127, 0.18);
bottom: 0;
content: "";
left: 23px;
position: absolute;
top: 48px;
width: 2px;
}
.mtg-tl .mtg-tl__item:last-child::before {
display: none;
}
.mtg-tl .mtg-tl__num {
background: var(--wp--preset--color--primary);
border-radius: 50%;
color: #fff;
flex: 0 0 48px;
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
height: 48px;
line-height: 48px;
margin: 0;
position: relative;
text-align: center;
width: 48px;
z-index: 1;
}
.mtg-tl .mtg-tl__body {
padding-top: 0.5rem;
}
.mtg-tl .mtg-tl__body h3 {
margin: 0;
}
.mtg-tl .mtg-tl__body p {
margin: 0;
}
.mtg-tl .mtg-tl__meta {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
}
/* Motion for the new pieces. The equity bar grows from nothing when the hero loads. */
@keyframes mtg-grow {
from { transform: scaleX(0); }
to { transform: none; }
}
html.mtg-motion .mtg-equity .mtg-equity__seg {
animation: mtg-grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
html.mtg-motion .mtg-equity .mtg-equity__seg.is-owed { animation-delay: 0.25s; }
html.mtg-motion .mtg-equity .mtg-equity__seg.is-available { animation-delay: 0.45s; }
html.mtg-motion .mtg-equity .mtg-equity__seg.is-kept { animation-delay: 0.6s; }
html.mtg-motion .mtg-equity .mtg-equity__seg-value {
animation: mtg-rise-in 0.4s ease both;
animation-delay: 0.9s;
}
html.mtg-motion .mtg-servicehero .mtg-heromedia__badge {
animation: mtg-rise-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}
html.mtg-motion .mtg-servicehero.is-media .mtg-heromedia__img,
html.mtg-motion .mtg-servicehero.is-calc .mtg-herocalc {
animation: mtg-slide-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
html.mtg-motion .mtg-equity .mtg-equity__seg,
html.mtg-motion .mtg-equity .mtg-equity__seg-value,
html.mtg-motion .mtg-servicehero .mtg-heromedia__badge,
html.mtg-motion .mtg-servicehero.is-media .mtg-heromedia__img,
html.mtg-motion .mtg-servicehero.is-calc .mtg-herocalc {
animation: none;
}
}
@media (max-width: 1024px) {
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__fields {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 781px) {
.mtg-heromedia .mtg-heromedia__badge {
bottom: -1rem;
left: 0;
}
.mtg-uses .mtg-use {
padding: 1.25rem 0;
}
.mtg-uses .mtg-use__num {
font-size: var(--wp--preset--font-size--x-large);
}
.mtg-equity .mtg-equity__bar {
height: 64px;
}
.mtg-equity .mtg-equity__seg-value {
font-size: 0.75rem;
}
}
@media (max-width: 781px) {
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__inputs {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.mtg-servicehero.is-calc .mtg-calc .mtg-calc__fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Hero variant: two products side by side (conventional). Ours is tinted, the comparison is plain. */
.mtg-versus {
background: var(--wp--preset--color--panel);
border: 1px solid var(--wp--preset--color--line);
border-radius: 28px;
padding: 1.5rem 1.5rem 1.25rem;
}
.mtg-versus .mtg-facts__title {
margin-bottom: 1rem;
}
.mtg-versus .mtg-versus__cols {
flex-wrap: nowrap;
margin: 0;
}
.mtg-versus .mtg-versus__side {
border-radius: 18px;
padding: 1.1rem 1.25rem 1.25rem;
}
.mtg-versus .mtg-versus__side.is-ours {
background: var(--wp--preset--color--primary);
color: #fff;
}
.mtg-versus .mtg-versus__side.is-theirs {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
}
.mtg-versus .mtg-versus__title {
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 0.85rem;
}
.mtg-versus .mtg-versus__side.is-theirs .mtg-versus__title {
color: var(--wp--preset--color--muted);
}
.mtg-versus .mtg-versus__row {
padding: 0.6rem 0;
}
.mtg-versus .mtg-versus__row + .mtg-versus__row {
border-top: 1px solid var(--wp--preset--color--line);
}
.mtg-versus .mtg-versus__side.is-ours .mtg-versus__row + .mtg-versus__row {
border-top-color: rgba(255, 255, 255, 0.18);
}
.mtg-versus .mtg-versus__label {
font-size: var(--wp--preset--font-size--small);
margin: 0;
opacity: 0.72;
}
.mtg-versus .mtg-versus__value {
font-weight: 600;
margin: 0.1rem 0 0;
}
.mtg-versus .mtg-versus__note {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 1rem 0 0;
}
/* Signature section: the down-payment ladder (conventional). */
.mtg-tiers .mtg-tier {
border-top: 1px solid var(--wp--preset--color--line);
margin: 0;
padding: 1.4rem 0;
}
.mtg-tiers .mtg-tier:last-child {
border-bottom: 1px solid var(--wp--preset--color--line);
}
.mtg-tiers .mtg-tier__pct {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--xx-large);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1;
margin: 0;
}
.mtg-tiers .mtg-tier__amount {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0.3rem 0 0;
}
.mtg-tiers .mtg-tier__track {
background: var(--wp--preset--color--line);
border-radius: 999px;
flex-wrap: nowrap;
height: 10px;
margin: 0;
overflow: hidden;
}
.mtg-tiers .mtg-tier__track > .wp-block-column {
flex-grow: 0;
min-width: 0;
padding: 0;
}
.mtg-tiers .mtg-tier__fill {
background: var(--wp--preset--color--accent);
border-radius: 999px;
transform-origin: left center;
}
.mtg-tiers .mtg-tier h3 {
margin: 0 0 0.35rem;
}
.mtg-tiers .mtg-tier p {
margin: 0;
}
.mtg-tiers .mtg-tier > .mtg-tier__figure p,
.mtg-tiers .mtg-tier > .wp-block-column > p {
color: var(--wp--preset--color--muted);
}
.mtg-tiers .mtg-tier > .wp-block-column > h3 + p {
color: var(--wp--preset--color--muted);
}
html.mtg-motion .mtg-tiers .mtg-tier__fill {
transform: scaleX(0);
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
transition-delay: calc(var(--i, 0) * 120ms + 150ms);
}
html.mtg-motion .mtg-tiers.is-inview .mtg-tier__fill {
transform: none;
}
html.mtg-motion .mtg-servicehero.is-versus .mtg-versus {
animation: mtg-slide-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
html.mtg-motion .mtg-tiers .mtg-tier__fill,
html.mtg-motion .mtg-servicehero.is-versus .mtg-versus {
animation: none;
transform: none;
transition: none;
}
}
@media (max-width: 781px) {
.mtg-versus .mtg-versus__cols {
gap: 0.5rem;
}
.mtg-versus .mtg-versus__side {
padding: 0.9rem 0.9rem 1rem;
}
.mtg-versus .mtg-versus__value {
font-size: var(--wp--preset--font-size--small);
}
.mtg-tiers .mtg-tier__pct {
font-size: var(--wp--preset--font-size--x-large);
}
.mtg-tiers .mtg-tier__bar {
display: none;
}
}
/* Hero variant: ticked eligibility rows (VA). */
.mtg-check {
background: var(--wp--preset--color--panel-blue);
border-radius: 28px;
padding: 1.75rem 2rem 1.5rem;
}
.mtg-check .mtg-check__row {
padding: 0.8rem 0 0.8rem 2.35rem;
position: relative;
}
.mtg-check .mtg-check__row + .mtg-check__row {
border-top: 1px solid rgba(6, 66, 127, 0.12);
}
.mtg-check .mtg-check__row::before {
background-color: #1F7A4A;
border-radius: 50%;
content: "";
height: 1.5rem;
left: 0;
position: absolute;
top: 0.85rem;
width: 1.5rem;
}
.mtg-check .mtg-check__row::after {
background-color: #fff;
content: "";
height: 1.5rem;
left: 0;
-webkit-mask: var(--mtg-tick) center / 0.95rem 0.95rem no-repeat;
mask: var(--mtg-tick) center / 0.95rem 0.95rem no-repeat;
position: absolute;
top: 0.85rem;
width: 1.5rem;
}
.mtg-check .mtg-check__title {
color: var(--wp--preset--color--ink);
font-weight: 600;
margin: 0;
}
.mtg-check .mtg-check__text {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0.15rem 0 0;
}
.mtg-check .mtg-check__note {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 1.1rem 0 0;
}
/* Signature section: what the benefit is worth, in money (VA). */
.mtg-worth .wp-block-heading {
color: inherit;
}
.mtg-worth .mtg-worth__lead {
margin-left: auto;
margin-right: auto;
max-width: 62ch;
opacity: 0.82;
}
.mtg-worth .mtg-worth__cols {
margin-left: auto;
margin-right: auto;
}
.mtg-worth .mtg-worth__item {
border-left: 1px solid rgba(255, 255, 255, 0.18);
padding: 0.25rem 1rem;
}
.mtg-worth .mtg-worth__item:first-child {
border-left: 0;
}
.mtg-worth .mtg-worth__value {
color: #86EFAC;
font-size: var(--wp--preset--font-size--huge);
font-variant-numeric: tabular-nums;
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0;
}
.mtg-worth .mtg-worth__label {
font-weight: 600;
margin: 0.5rem 0 0;
}
.mtg-worth .mtg-worth__compare {
font-size: var(--wp--preset--font-size--small);
margin: 0.3rem 0 0;
opacity: 0.72;
}
.mtg-worth .mtg-worth__note {
font-size: var(--wp--preset--font-size--small);
margin: var(--wp--preset--spacing--30) 0 0;
opacity: 0.72;
}
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check {
animation: mtg-slide-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check__row {
animation: mtg-rise-in 0.5s ease both;
}
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check__row:nth-of-type(1) { animation-delay: 0.45s; }
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check__row:nth-of-type(2) { animation-delay: 0.55s; }
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check__row:nth-of-type(3) { animation-delay: 0.65s; }
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check__row:nth-of-type(4) { animation-delay: 0.75s; }
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check__row:nth-of-type(5) { animation-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check,
html.mtg-motion .mtg-servicehero.is-checklist .mtg-check__row {
animation: none;
}
}
@media (max-width: 781px) {
.mtg-check {
padding: 1.25rem 1.25rem 1.1rem;
}
.mtg-worth .mtg-worth__item {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding: 1rem 0 0;
}
.mtg-worth .mtg-worth__item:first-child {
border-top: 0;
padding-top: 0;
}
.mtg-worth .mtg-worth__value {
font-size: var(--wp--preset--font-size--xx-large);
}
}
/* Hero variant: a credit-score scale with a caption under each band (FHA). */
.mtg-gauge {
background: var(--wp--preset--color--panel);
border: 1px solid var(--wp--preset--color--line);
border-radius: 28px;
padding: 1.75rem 1.75rem 1.5rem;
}
.mtg-gauge .mtg-facts__title {
margin-bottom: 1rem;
}
.mtg-gauge .mtg-gauge__track {
flex-wrap: nowrap;
margin: 0;
}
.mtg-gauge .mtg-gauge__track > .mtg-gauge__band {
align-items: center;
border-radius: 8px;
display: flex;
flex-grow: 0;
justify-content: center;
min-width: 0;
padding: 0.7rem 0.4rem;
}
.mtg-gauge .mtg-gauge__band.is-low {
background: #B9762B;
}
.mtg-gauge .mtg-gauge__band.is-mid {
background: var(--wp--preset--color--accent);
}
.mtg-gauge .mtg-gauge__band.is-high {
background: var(--wp--preset--color--primary);
}
.mtg-gauge .mtg-gauge__range {
color: #fff;
font-size: var(--wp--preset--font-size--small);
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: 0.01em;
margin: 0;
white-space: nowrap;
}
.mtg-gauge .mtg-gauge__caps {
flex-wrap: nowrap;
margin: 0.85rem 0 0;
}
.mtg-gauge .mtg-gauge__caps > .mtg-gauge__cap {
flex-grow: 0;
min-width: 0;
padding: 0 0.4rem;
}
.mtg-gauge .mtg-gauge__cap-title {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
margin: 0;
}
.mtg-gauge .mtg-gauge__cap-text {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0.2rem 0 0;
}
.mtg-gauge .mtg-gauge__note {
border-top: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 1.1rem 0 0;
padding-top: 1rem;
}
/* Signature section: myth struck through, correction beside it (FHA). */
.mtg-myths .mtg-myth {
border-top: 1px solid var(--wp--preset--color--line);
margin: 0;
padding: 1.5rem 0;
}
.mtg-myths .mtg-myth:last-child {
border-bottom: 1px solid var(--wp--preset--color--line);
}
.mtg-myths .mtg-myth__tag {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin: 0 0 0.4rem;
text-transform: uppercase;
}
.mtg-myths .mtg-myth__tag.is-fact {
color: #1F7A4A;
}
.mtg-myths .mtg-myth__claim {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--large);
margin: 0;
text-decoration: line-through;
text-decoration-color: rgba(75, 85, 99, 0.45);
text-decoration-thickness: 2px;
}
.mtg-myths .mtg-myth__fact {
color: var(--wp--preset--color--ink);
margin: 0;
}
@media (max-width: 781px) {
.mtg-gauge {
padding: 1.25rem 1.1rem 1.1rem;
}
.mtg-gauge .mtg-gauge__range {
font-size: 0.7rem;
}
.mtg-gauge .mtg-gauge__cap-title,
.mtg-gauge .mtg-gauge__cap-text {
font-size: 0.75rem;
}
.mtg-myths .mtg-myth__claim {
font-size: var(--wp--preset--font-size--medium);
}
}
/* Hero variant: one dominant number (jumbo). */
.mtg-figure {
background: var(--wp--preset--color--primary);
border-radius: 28px;
color: #fff;
padding: 2rem 2.25rem 1.75rem;
text-align: center;
}
.mtg-figure .mtg-figure__eyebrow {
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin: 0;
opacity: 0.72;
text-transform: uppercase;
}
.mtg-figure .mtg-figure__value {
font-size: clamp(2.75rem, 6vw, 4rem);
font-variant-numeric: tabular-nums;
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.05;
margin: 0.6rem 0 0;
}
.mtg-figure .mtg-figure__caption {
margin: 0.75rem auto 0;
max-width: 32ch;
opacity: 0.86;
}
.mtg-figure .mtg-figure__rows {
margin-top: 1.5rem;
text-align: left;
}
.mtg-figure .mtg-figure__row {
border-top: 1px solid rgba(255, 255, 255, 0.18);
gap: 1rem;
padding: 0.7rem 0;
}
.mtg-figure .mtg-figure__row-label {
font-size: var(--wp--preset--font-size--small);
margin: 0;
opacity: 0.72;
}
.mtg-figure .mtg-figure__row-value {
font-variant-numeric: tabular-nums;
font-weight: 600;
margin: 0;
text-align: right;
white-space: nowrap;
}
.mtg-figure .mtg-figure__note {
font-size: var(--wp--preset--font-size--small);
margin: 1.1rem 0 0;
opacity: 0.72;
}
/* Signature section: conforming value, arrow, jumbo value (jumbo). */
.mtg-shifts .mtg-shift {
border-top: 1px solid rgba(6, 66, 127, 0.14);
flex-wrap: nowrap;
margin: 0;
padding: 0.9rem 0;
}
.mtg-shifts .mtg-shift:last-child {
border-bottom: 1px solid rgba(6, 66, 127, 0.14);
}
.mtg-shifts .mtg-shift > .wp-block-column {
min-width: 0;
}
.mtg-shifts .mtg-shift__label {
color: var(--wp--preset--color--ink);
font-weight: 600;
margin: 0;
}
.mtg-shifts .mtg-shift__cell {
position: relative;
}
.mtg-shifts .mtg-shift__from,
.mtg-shifts .mtg-shift__to {
margin: 0;
}
.mtg-shifts .mtg-shift__from {
color: var(--wp--preset--color--muted);
}
.mtg-shifts .mtg-shift__cell.is-to {
padding-left: 1.9rem;
}
/* The arrow sits on the jumbo cell so it never wraps away from the value it points at. */
.mtg-shifts .mtg-shift__cell.is-to::before {
background-color: var(--wp--preset--color--accent);
content: "";
height: 0.85rem;
left: 0.3rem;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
position: absolute;
top: 0.4rem;
width: 1.2rem;
}
.mtg-shifts .mtg-shift__to {
color: var(--wp--preset--color--ink);
font-weight: 600;
}
html.mtg-motion .mtg-servicehero.is-figure .mtg-figure {
animation: mtg-slide-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
html.mtg-motion .mtg-servicehero.is-figure .mtg-figure {
animation: none;
}
}
@media (max-width: 781px) {
.mtg-figure {
padding: 1.5rem 1.25rem 1.25rem;
}
.mtg-shifts .mtg-shift {
flex-wrap: wrap;
}
.mtg-shifts .mtg-shift > .wp-block-column {
flex-basis: 100% !important;
}
.mtg-shifts .mtg-shift__cell {
padding-top: 0.25rem;
}
.mtg-shifts .mtg-shift__cell.is-to {
padding-left: 1.9rem;
}
.mtg-shifts .mtg-shift__cell.is-to::before {
top: 0.55rem;
}
}
/* ------------------------------------------------------------------------------------------------
Local (city) pages. Built from content/local/.js.
------------------------------------------------------------------------------------------------ */
/* Communities served: grouped chips of place names. */
.mtg-areas .mtg-areas__group-title {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin: 0;
text-transform: uppercase;
}
.mtg-areas .mtg-areas__chips {
margin: 0;
}
.mtg-areas .mtg-areas__chip {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
border-radius: 999px;
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--small);
margin: 0;
padding: 0.4rem 0.9rem;
white-space: nowrap;
}
html.mtg-motion .mtg-areas.mtg-stagger > .mtg-areas__group {
transition-delay: calc(var(--i, 0) * 140ms);
}
/* Preserved copy on rebuilt pages: a readable column with the site's list styling. */
.mtg-prose > * + * {
margin-top: 1rem;
}
.mtg-prose > h2 {
margin-top: 2.25rem;
}
.mtg-prose > h3,
.mtg-prose > h4 {
margin-top: 1.75rem;
}
.mtg-prose > p {
color: var(--wp--preset--color--muted);
}
.mtg-prose .mtg-prose__list {
color: var(--wp--preset--color--muted);
padding-left: 1.4rem;
}
.mtg-prose .mtg-prose__list li {
margin-bottom: 0.5rem;
}
.mtg-prose .mtg-prose__list li strong,
.mtg-prose > p strong {
color: var(--wp--preset--color--ink);
}
.mtg-prose .wp-block-details {
margin-top: 0.75rem;
}
/* Landing pages: the FlowForm sits beside the headline; consent text under it stays small. */
.mtg-heroform .mtg-form-panel {
box-shadow: 0 18px 40px rgba(6, 66, 127, 0.12);
}
.mtg-heroform .mtg-heroform__consent {
color: var(--wp--preset--color--muted);
font-size: 0.75rem;
line-height: 1.5;
margin: 0;
}
.mtg-servicehero .mtg-servicehero__bullets {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
}
.mtg-servicehero .mtg-servicehero__bullets li {
color: var(--wp--preset--color--ink);
margin: 0 0 0.55rem;
padding-left: 2rem;
position: relative;
}
.mtg-servicehero .mtg-servicehero__bullets li::before {
background-color: var(--wp--preset--color--primary);
border-radius: 50%;
content: "";
height: 1.3rem;
left: 0;
position: absolute;
top: 0.15rem;
width: 1.3rem;
}
.mtg-servicehero .mtg-servicehero__bullets li::after {
background-color: #fff;
content: "";
height: 1.3rem;
left: 0;
-webkit-mask: var(--mtg-tick) center / 0.8rem 0.8rem no-repeat;
mask: var(--mtg-tick) center / 0.8rem 0.8rem no-repeat;
position: absolute;
top: 0.15rem;
width: 1.3rem;
}
.mtg-cta .wp-block-buttons {
margin-top: var(--wp--preset--spacing--20);
}
.mtg-cta .is-style-outline .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.6);
color: #fff;
}
.mtg-feature .mtg-feature__icon img[src*="/uploads/"] {
height: 44px;
width: 44px;
object-fit: contain;
}
/* Laid-out prose: chapters as split rows or centred headings, topics as cards with tick lists. */
.mtg-chapters .mtg-chapter {
align-items: flex-start;
}
.mtg-chapters .mtg-chapter > .wp-block-column > .wp-block-heading {
margin-top: 0;
}
.mtg-chapters .mtg-chapter > .mtg-prose > * + * {
margin-top: 1rem;
}
.mtg-chapters .mtg-chapter > .mtg-prose > p {
color: var(--wp--preset--color--muted);
}
.mtg-chapters > .wp-block-heading.has-text-align-center {
margin-bottom: 0.5rem;
}
.mtg-chapters .mtg-topic__label {
color: var(--wp--preset--color--primary);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.06em;
margin: 0.5rem 0 0;
text-transform: uppercase;
}
.mtg-topic {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--line);
border-radius: 20px;
height: 100%;
padding: 1.75rem;
}
.mtg-topic > * {
margin: 0;
}
.mtg-topic > * + * {
margin-top: 0.75rem;
}
.mtg-topic .mtg-topic__title {
font-weight: 500;
}
.mtg-topic > p {
color: var(--wp--preset--color--muted);
}
/* An h5/h6 inside a card is the card's opening line, kept as a heading tag but set like body copy. */
.mtg-topic .mtg-topic__lead {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--medium);
font-weight: 500;
letter-spacing: 0;
line-height: 1.5;
text-transform: none;
}
/* Two classes outrank the card's `> * + *` gap rule, so the gap is repeated here. */
.mtg-topic .mtg-topic__list {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
}
.mtg-topic .mtg-topic__list li {
color: var(--wp--preset--color--ink);
margin: 0 0 0.6rem;
padding-left: 2rem;
position: relative;
}
.mtg-topic .mtg-topic__list li::before {
background-color: var(--wp--preset--color--primary);
border-radius: 50%;
content: "";
height: 1.3rem;
left: 0;
position: absolute;
top: 0.1rem;
width: 1.3rem;
}
.mtg-topic .mtg-topic__list li::after {
background-color: #fff;
content: "";
height: 1.3rem;
left: 0;
-webkit-mask: var(--mtg-tick) center / 0.8rem 0.8rem no-repeat;
mask: var(--mtg-tick) center / 0.8rem 0.8rem no-repeat;
position: absolute;
top: 0.1rem;
width: 1.3rem;
}
.has-panel-background-color .mtg-topic,
.has-panel-warm-background-color .mtg-topic,
.has-panel-blue-background-color .mtg-topic {
border-color: transparent;
box-shadow: var(--mtg-shadow);
}
/* ---------- Photographs: split, band, photo call-to-action ---------- */
.mtg-split .mtg-split__img {
margin: 0;
}
.mtg-split .mtg-split__img img {
aspect-ratio: 4 / 3;
border-radius: 28px;
box-shadow: var(--mtg-shadow);
display: block;
height: auto;
object-fit: cover;
width: 100%;
}
.mtg-split .wp-block-heading {
margin-top: 0;
}
.mtg-split .mtg-split__list {
margin-top: 1.25rem;
}
.mtg-band {
position: relative;
}
.mtg-band .mtg-band__img {
margin: 0;
}
.mtg-band .mtg-band__img img {
aspect-ratio: 21 / 9;
border-radius: 28px;
display: block;
height: auto;
min-height: 240px;
object-fit: cover;
width: 100%;
}
.mtg-band .mtg-band__caption {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.92);
border-radius: 16px;
bottom: 1.5rem;
box-shadow: var(--mtg-shadow);
left: 1.5rem;
max-width: 400px;
padding: 1rem 1.25rem;
position: absolute;
}
.mtg-band .mtg-band__title {
font-weight: 600;
margin: 0;
}
.mtg-band .mtg-band__text {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0;
}
@media (max-width: 781px) {
.mtg-band .mtg-band__img img {
aspect-ratio: 4 / 3;
border-radius: 20px;
}
.mtg-band .mtg-band__caption {
margin-top: 1rem;
max-width: none;
position: static;
}
}
/* The photo sits on the group as a background image (block support); the navy tint is drawn over it. */
.mtg-cta--photo {
isolation: isolate;
overflow: hidden;
position: relative;
}
.mtg-cta--photo::before {
background: linear-gradient(135deg, rgba(6, 66, 127, 0.92), rgba(6, 66, 127, 0.74));
content: "";
inset: 0;
position: absolute;
z-index: -1;
}
.mtg-cta--photo > * {
max-width: 900px;
}
/* Photographer credit under a Creative Commons photograph (the figure carries the class, the caption is plain). */
.mtg-photo-credit .wp-element-caption {
color: var(--wp--preset--color--muted);
font-size: 0.75rem;
margin: 0.5rem 0 0;
text-align: right;
}
.mtg-heromedia .mtg-photo-credit .wp-element-caption {
padding-left: 45%; /* clears the floating badge in the hero's lower-left corner */
padding-right: 0.5rem;
}
/* Photographs dropped into the hand-built pages beside the quote form and the office map. */
.mtg-quote__img img,
.mtg-contact__photo img {
aspect-ratio: 4 / 3;
border-radius: 20px;
display: block;
height: auto;
object-fit: cover;
width: 100%;
}
.mtg-quote__img,
.mtg-contact__photo {
margin: 0 0 1.5rem;
}
/* County chips carry long "A - B - C" lines; on phones they wrap inside the viewport instead of widening the page. */
@media (max-width: 781px) {
.mtg-areas .mtg-areas__chip {
max-width: 100%;
white-space: normal;
}
}
/* Hand-built panels converted to photo call-to-actions keep their own copy; everything reads white on the tint. */
.mtg-cta--photo h2,
.mtg-cta--photo p {
color: inherit;
}
.mtg-cta--photo p a:not(.wp-block-button__link) {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.mtg-cta--photo .is-style-outline .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.7);
color: #fff;
}
/* Home hero tiles and bento tiles now hold landscape photographs of mixed shapes; keep them filling their frames. */
.mtg-scatter__item img,
.mtg-bento__tile > .wp-block-image img {
object-fit: cover;
}
/* One state's licence block on a state hub: the compliance card, sized to sit beside copy in a panel. */
.mtg-lic-single .mtg-lic {
border: 0;
box-shadow: var(--mtg-shadow);
margin: 0;
padding: 1.75rem 2rem;
}
.mtg-lic-single .mtg-lic__lines .mtg-lic__line {
font-size: var(--wp--preset--font-size--medium);
}
/* HELOC hero: the line's life as a draw period and a repayment period on one track (hero variant "phases"). */
.mtg-phases {
background: var(--wp--preset--color--panel);
border: 1px solid var(--wp--preset--color--line);
border-radius: 28px;
padding: 1.75rem 1.75rem 1.5rem;
}
.mtg-phases .mtg-facts__title {
margin-bottom: 1rem;
}
.mtg-phases .mtg-phases__track {
flex-wrap: nowrap;
margin: 0;
}
.mtg-phases .mtg-phases__track > .mtg-phases__seg {
align-items: center;
border-radius: 8px;
display: flex;
flex-grow: 0;
justify-content: center;
min-width: 0;
padding: 0.7rem 0.4rem;
}
.mtg-phases .mtg-phases__seg.is-draw {
background: #2E9E63;
}
.mtg-phases .mtg-phases__seg.is-repay {
background: var(--wp--preset--color--primary);
}
.mtg-phases .mtg-phases__years {
color: #fff;
font-size: var(--wp--preset--font-size--small);
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: 0.01em;
margin: 0;
white-space: nowrap;
}
.mtg-phases .mtg-phases__caps {
flex-wrap: nowrap;
margin: 0.85rem 0 0;
}
.mtg-phases .mtg-phases__caps > .mtg-phases__cap {
flex-grow: 0;
min-width: 0;
padding: 0 0.4rem;
}
.mtg-phases .mtg-phases__cap-title {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
margin: 0;
}
.mtg-phases .mtg-phases__cap-text {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 0.2rem 0 0;
}
.mtg-phases .mtg-phases__note {
border-top: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: 1.1rem 0 0;
padding-top: 1rem;
}
@media (max-width: 781px) {
.mtg-phases {
padding: 1.25rem 1.1rem 1.1rem;
}
.mtg-phases .mtg-phases__years {
font-size: 0.8rem;
}
}
html.mtg-motion .mtg-phases .mtg-phases__seg {
animation: mtg-grow-x 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
transform-origin: left center;
}
html.mtg-motion .mtg-phases .mtg-phases__seg.is-repay { animation-delay: 0.25s; }
/* The landing pages' icons are white PNGs from the old site; on the grey feature cards they disappear.
Uploaded icons get a navy disc; the theme's own SVG icons are untouched (2026-10-08, Martin). */
.mtg-feature .mtg-feature__icon img[src*="/wp-content/uploads/"] {
background: var(--wp--preset--color--primary);
border-radius: 50%;
box-sizing: border-box;
height: 52px;
padding: 13px;
width: 52px;
}
/* Reassurance line under the hero form's title on the landing pages. */
.mtg-heroform .mtg-heroform__trustline {
color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--small);
margin: -0.35rem 0 0;
}
/* Sticky mobile action bar on the paid landing pages: hidden on desktop, fixed to the bottom on phones. */
.mtg-lpbar {
display: none;
}
@media (max-width: 781px) {
.mtg-lpbar {
background: var(--wp--preset--color--base);
border-top: 1px solid var(--wp--preset--color--line);
bottom: 0;
box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.1);
display: block;
left: 0;
padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom));
position: fixed;
right: 0;
z-index: 80;
}
.mtg-lpbar .wp-block-buttons {
display: flex;
flex-wrap: nowrap;
gap: 0.6rem;
}
.mtg-lpbar .wp-block-button {
flex: 1 1 0;
margin: 0;
}
.mtg-lpbar .wp-block-button__link {
border-radius: 999px;
display: block;
font-weight: 600;
padding: 0.75rem 0.5rem;
text-align: center;
width: 100%;
}
/* Keep the page's end clear of the fixed bar. */
body:has(.mtg-lpbar) {
padding-bottom: 4.2rem;
}
}
/* Landing-page header: logo, phone and one button; no menu to leak ad clicks (2026-10-08, Martin). */
.mtg-header--landing .mtg-header-phone {
font-weight: 600;
}
@media (max-width: 599px) {
.mtg-header--landing .mtg-header-phone span {
display: none;
}
}