/* Mortgage Bird — navy and gold, based on the approved September 2026 card. */
:root {
  --navy: #051f32;
  --ink: #f6f7f8;
  --muted: #bfced8;
  --cream: #061e30;
  --sand: #17384c;
  --gold: #f0cc83;
  --line: #355062;
  --metal: linear-gradient(115deg, #fcebc0 0%, #e8b75e 46%, #f7d996 70%, #c49342 100%);
}
body { background: var(--cream); color: var(--ink); }
h1, h2, h3 { color: #f9f8f4; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #ffe1a0; }
.skip { color: var(--navy); }
.eyebrow, .hero .eyebrow, .service-detail .eyebrow { color: var(--gold); font-size: 13px; }
.licence-bar { background: #031726; color: #e5edf2; font-size: 14px; padding: 10px 0; border-bottom: 1px solid #b78c4445; }
.licence-bar strong { font-weight: 600; }
.licence-bar b { color: var(--gold); opacity: 1; }
.top-contact { display: flex; gap: 26px; }
.top-contact a:first-child { color: var(--gold); }
header { background: #061f31f5; border-bottom: 1px solid #d7ad6240; backdrop-filter: blur(16px); }
.navigation { min-height: 108px; gap: 25px; }
.brand { gap: 13px; font-family: 'Segoe UI', Arial, sans-serif; letter-spacing: 0; }
.brand-copy { display: block; }
.brand-domain { display: block; color: var(--gold); letter-spacing: 3px; font-size: 12px; font-weight: 650; margin-bottom: 7px; }
.brand-name { display: block; font-size: 23px; font-weight: 650; letter-spacing: 1.2px; white-space: nowrap; }
.brand-name b { color: var(--gold); font-weight: 650; }
.brand small { color: #d5e0e7; font-size: 12px; letter-spacing: 1px; margin-top: 5px; }
/* Display windows reuse the supplied card's original artwork without redrawing it. */
.card-bird { display: block; flex: 0 0 98px; width: 98px; height: 62px; background: url('assets/business-card.png') -191.8px -14px / 464.52px 265.44px no-repeat; mix-blend-mode: lighten; border-radius: 12px; }
.navigation nav { gap: 24px; }
.navigation nav > a:not(.button) { font-size: 15px; }
.navigation nav > a:hover { color: var(--gold); }
.navigation nav > a[aria-current=page] { color: var(--gold); }
.button { background: var(--metal); border: 1px solid #efd092; color: #061f32; box-shadow: 0 5px 16px #0002; border-radius: 6px; padding: 14px 21px; }
.button:hover { background: #ffe7b5; color: #061f32; }
.button.outline { background: #06243899; color: #f9e2b6; border-color: #d6ad64; box-shadow: none; }
.button.outline:hover { background: #15394e; }
.button.light { background: var(--metal); border-color: #efd092; color: #061f32; }
.text-link { border-color: #a98249; color: #f5d698; font-size: 15px; }
.facet { background: radial-gradient(ellipse at 92% 10%, #163c55 0%, transparent 57%), linear-gradient(125deg, #06273d, #021928 70%); }
.facet:before { inset: auto -22% -430px 35%; height: 700px; border-radius: 50%; border: 1px solid #d2a65b66; background: transparent; clip-path: none; transform: rotate(-24deg); }
.facet:after { inset: auto -25% -425px 33%; height: 700px; border-radius: 50%; border: 14px solid #b7883926; background: transparent; clip-path: none; transform: rotate(-24deg); }
.hero { border-bottom: 1px solid #c79d554d; }
.hero-house { background: radial-gradient(ellipse at 90% 30%, #21455a66, transparent 65%); opacity: 1; }
.hero-inner { min-height: 690px; padding-top: 65px; padding-bottom: 65px; }
.hero-copy { max-width: 555px; }
.hero h1 { font-size: clamp(52px, 5.3vw, 74px); letter-spacing: -1.8px; line-height: 1.07; text-transform: none; }
.hero h1 span { color: var(--gold); }
.hero-copy > p:not(.eyebrow) { max-width: 470px; color: #d0dce4; }
.hero .actions { gap: 13px; }
.signature { color: #f8dba0; font-size: 32px; }
.hero .credentials { font-size: 14px; line-height: 1.75; margin-top: 13px; }
.portrait-frame { position: absolute; right: 0; bottom: 0; width: 45%; height: 91%; z-index: 1; padding: 3px; border-radius: 48% 48% 4px 40%; background: var(--metal); box-shadow: 0 0 0 12px #ba914d0b; overflow: hidden; }
.hero-portrait { position: static; width: 100%; height: 100%; margin: 0; max-width: 100%; opacity: 1; object-fit: cover; object-position: 51% 0; mix-blend-mode: normal; mask-image: none; border-radius: inherit; }
.portrait-frame:after { content: ''; position: absolute; left: 3px; bottom: 3px; right: 3px; height: 38%; background: linear-gradient(0deg, #021a2b 15%, #021a2bea 40%, transparent); border-bottom-right-radius: 3px; pointer-events: none; }
.portrait-caption { position: absolute; z-index: 2; bottom: 46px; left: 20%; right: 7%; text-align: right; }
.portrait-caption strong { display: block; font-size: 32px; letter-spacing: 1px; line-height: 1.2; }
.portrait-caption strong span { color: var(--gold); }
.portrait-caption > span { display: block; margin-top: 12px; font-size: 12px; line-height: 1.6; letter-spacing: 2px; color: #ecd5a8; }
.hero-note { display: none; }
.service-band { background: #0c2c41; border: 1px solid #b68d494f; border-top: 2px solid #e8c37c; border-radius: 0 0 9px 9px; box-shadow: 0 16px 32px #0002; padding: 26px 14px; }
.service-band .line-icon { color: var(--gold); }
.service-band a { border-right-color: #d4b37c40; font-size: 14px; }
.home-intro img, .story-teaser img, .service-detail img, .contact-photo img, .faq-section img { border: 1px solid #bb955252; border-radius: 10px; }
.picture-note .handwritten, .contact-photo .handwritten { color: #ffe5ad; background: #042034ed; border: 1px solid #b98e49; border-radius: 5px; box-shadow: 0 5px 15px #0002; }
.why-section { background: linear-gradient(125deg, #0b2b40, #061e30); padding-top: 70px; border-top: 1px solid #385063; }
.round-icon { background: var(--metal); color: #062438; }
.values-grid h3 { font-size: 17px; }
.values-grid p { font-size: 15px; }
.ontario-banner { border-top: 1px solid #ba9358; border-bottom: 1px solid #ba9358; }
.ontario-banner:after { background: linear-gradient(90deg, #031e32f5, #032237a8 65%, #03223722); }
.ontario-banner .eyebrow { color: #f7d799; }
.ontario-banner .handwritten { color: #ffe3a8; }
.quote-section { border-top: 1px solid #d1ac613a; }
.quote-section p, .quote-mark { color: #f5d79f; }
.quote-sign { color: #e9f0f4; font-size: 13px; }
.page-hero { border-bottom: 1px solid #b78d474f; }
.page-hero .prose { padding-bottom: 65px; }
.page-hero .about-portrait img { mix-blend-mode: normal; mask-image: none; border: 2px solid #ebc782; border-bottom: 0; border-radius: 47% 47% 0 0; }
.about-portrait .handwritten { display: none; }
.value-strip { color: #e3c389; }
.value-strip > div { font-size: 15px; }
.timeline div { border-left-color: #d8af65; }
.timeline strong { color: #f4d79d; }
.process-section, .faq-section { background: linear-gradient(120deg, #0d3046, #082337); border-top: 1px solid #b68d493d; border-bottom: 1px solid #b68d493d; }
.steps { background: #062338; border: 1px solid #a982493d; border-radius: 9px; }
.steps h3 { color: #f5dbad; }
.small-cta { border-bottom: 1px solid #b68d4933; }
.services-hero { background: linear-gradient(90deg, #052035f5, #052035cc 55%, #05203561), url('assets/home-finance.webp') center 45% / cover; }
.services-hero .eyebrow, .services-hero .handwritten { color: #f4d499; }
.service-cards > a { background: linear-gradient(140deg, #173c52, #072338); border: 1px solid #c29b565c; border-top: 2px solid #e3bc75; border-radius: 8px; }
.service-cards svg, .card-arrow, .prep-grid svg { color: #f4d18c; }
.service-cards h2 { color: #edf3f5; }
.faq-list { background: #041e3099; border: 1px solid #ab854b4f; }
.faq-list summary { color: #f7f7f3; }
.faq-list summary span { color: #e7bf77; }
.resource-links > a { background: #0c2c41; border-color: #a8824955; }
.resource-links > a:hover { background: #11354b; }
.resource-links span { font-size: 12px; color: #efcd8a; }
.fine { font-size: 14px; }
.contact-detail > svg { background: var(--gold); color: #062238; }
.contact-detail span { font-size: 12px; }
.contact-detail a:hover, footer a:hover { color: #ffde9e; }
.website-detail { padding-left: 60px; }
.contact-identity { font-size: 14px; }
.enquiry { background: #f8f6f0; color: #0c2a3d; border: 1px solid #d8b774; border-top: 4px solid #e2b967; box-shadow: 0 15px 45px #0004; }
.enquiry h2 { color: #0c2a3d; }
.enquiry > p, .enquiry label span, .enquiry .fine { color: #4c606d; }
.enquiry label span, .enquiry .fine, .consent label { font-size: 14px; }
.enquiry input:focus-visible, .enquiry select:focus-visible, .enquiry textarea:focus-visible { outline-color: #90651f; }
.enquiry input:not([type=checkbox]), .enquiry select, .enquiry textarea { border-color: #a9b3b9; }
.enquiry a:hover { color: #294c63; }
.legal .intro { color: #e6d2aa; }
footer { background: radial-gradient(ellipse at 100% 100%, #173b53, transparent 65%), #031a2b; border-top: 2px solid #d6b16d; padding-top: 52px; font-size: 14px; }
.footer-top { padding-bottom: 32px; margin-bottom: 30px; border-color: #c9a16250; }
.footer-middle { grid-template-columns: 1.2fr 1fr 1fr; gap: 38px; padding-bottom: 30px; }
.footer-motto { font-size: 27px; color: #f4d292; line-height: 1.4; margin-top: 0; margin-bottom: 20px; }
.footer-domain { color: #f4d292; font-size: 22px; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 8px; }
.brand-tagline { font-size: 12px; letter-spacing: 1.7px; color: #c4d3dd; margin-top: 12px; }
.footer-contact h2 { font: 600 17px/1.5 'Segoe UI', sans-serif; letter-spacing: 0; margin: 3px 0 19px; color: #f3d390; }
.footer-contact p { font-size: 16px; line-height: 1.9; }
.footer-contact p span { color: #a8bdcb; display: inline-block; width: 57px; font-size: 14px; }
.footer-contact a { text-decoration: none; }
.footer-contact address { font-style: normal; color: #d5dfe6; line-height: 1.7; margin-top: 16px; }
.brokerage { text-align: left; padding-left: 22px; border-left: 1px solid #d8b66c4d; }
.alliance-card-logo { display: block; width: 237px; max-width: 100%; height: 63px; margin: 0 0 19px; background: url('assets/business-card.png') -1362px -773px / 1659px 948px no-repeat; }
.brokerage strong { font-size: 17px; letter-spacing: 1.3px; }
.brokerage .brokerage-licence { color: #f6d99d; font-size: 16px; font-weight: 600; }
.footer-disclosure, .image-disclosure { font-size: 14px; line-height: 1.7; }
.footer-disclosure { max-width: none; color: #bdced9; }
.footer-bottom { border-color: #c9a16250; font-size: 14px; }
.image-disclosure { opacity: 1; color: #a8bdca; }
@media (max-width: 1120px) {
  .card-bird { display: none; }
  .navigation nav { gap: 20px; }
  .brand-name { font-size: 22px; }
  .hero-copy { max-width: 51%; }
  .hero-inner { min-height: 685px; }
  .portrait-frame { width: 46%; height: 87%; }
  .hero .actions { max-width: 350px; }
  .footer-middle { grid-template-columns: 1fr 1fr; }
  .brokerage { grid-column: 1 / -1; display: flex; align-items: center; gap: 25px; flex-wrap: wrap; padding: 25px 0 0; border-left: 0; border-top: 1px solid #c9a16250; }
  .alliance-card-logo { margin: 0; flex-shrink: 0; }
  .brokerage > p:last-child { display: none; }
}
@media (max-width: 800px) {
  .licence-bar { font-size: 13px; }
  .licence-bar .wrap { justify-content: center; }
  .top-contact { display: none; }
  .navigation { min-height: 100px; }
  .menu { background: transparent; color: #f4d89f; border-color: #b98f50; }
  .navigation nav { background: #062238; border-bottom: 1px solid #d9b575; }
  .hero-inner { min-height: 670px; padding-top: 48px; }
  .hero-copy { max-width: 53%; }
  .hero h1 { font-size: 53px; }
  .hero .credentials { font-size: 14px; }
  .portrait-frame { width: 43%; height: 78%; }
  .portrait-caption { left: 8%; right: 8%; bottom: 40px; }
  .portrait-caption strong { font-size: 25px; }
  .portrait-caption > span { font-size: 11px; letter-spacing: 1px; }
  .service-band a { font-size: 14px; }
  .footer-top { align-items: flex-start; }
  .footer-top .brand small { font-size: 12px; }
  .website-detail { padding-left: 45px; }
  .contact-detail a { overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 36px); }
  .licence-bar .wrap { font-size: 12px; width: calc(100% - 20px); }
  .licence-bar b { padding: 0 5px; }
  .brand-name { font-size: 21px; }
  .brand-domain { font-size: 11px; letter-spacing: 2.3px; margin-bottom: 6px; }
  .brand small, footer .brand small { font-size: 11px; letter-spacing: .5px; }
  .navigation { min-height: 97px; gap: 12px; }
  .menu { padding: 10px; }
  .menu span { margin-left: 4px; }
  .hero-inner { padding-top: 40px; padding-bottom: 0; min-height: 0; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(43px, 13.5vw, 53px); max-width: 100%; }
  .hero .eyebrow { font-size: 12px; max-width: 100%; letter-spacing: 1.3px; }
  .hero-copy > p:not(.eyebrow) { max-width: 100%; }
  .hero .actions { max-width: none; flex-direction: column; align-items: stretch; gap: 11px; margin-bottom: 20px; }
  .hero .actions .button { padding: 14px; font-size: 14px; }
  .hero .signature { margin-top: 10px; }
  .portrait-frame { position: relative; width: 100%; height: 430px; margin: 34px 0 0; border-radius: 45% 45% 0 0; }
  .hero-portrait { width: 100%; height: 100%; margin: 0; right: auto; object-position: 50% 0; mask-image: none; }
  .portrait-caption { left: 15%; right: 9%; bottom: 30px; }
  .portrait-caption strong { font-size: 30px; }
  .portrait-caption > span { font-size: 11px; }
  .band-wrap { width: 100%; }
  .service-band { border-radius: 0; padding: 28px 10px; }
  .service-band a { font-size: 14px; }
  .why-section { padding-top: 48px; }
  .why-section .prose h2 br { display: initial; }
  .values-grid p { font-size: 15px; }
  .page-hero .prose { padding-bottom: 35px; }
  .page-hero .about-portrait img { max-height: 430px; margin-bottom: 0; }
  .small-cta { align-items: flex-start; }
  .steps p, .timeline span, .value-strip > div { font-size: 14px; }
  .service-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .service-cards > a { grid-column: auto; padding: 23px 12px 16px; }
  .service-cards > a:nth-child(4) { grid-column: auto; }
  .service-cards > a:last-child { grid-column: 1 / -1; }
  .service-cards h2 { font-size: 15px; }
  .contact-layout { grid-template-columns: 1fr; }
  .website-detail { padding-left: 45px; }
  .footer-top { flex-direction: column; gap: 28px; }
  .footer-middle { grid-template-columns: 1fr; gap: 32px; }
  .footer-domain { font-size: 24px; }
  .brokerage { display: block; grid-column: auto; padding-top: 30px; }
  .alliance-card-logo { margin-bottom: 22px; }
  .footer-bottom { flex-direction: column; gap: 18px; }
  .footer-top .brand { font-size: 16px; }
}