img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --main-bg: #fff; --light: #f5f5f5; --light-comp: #4d4d4d; --dark: #333; --dark-comp: #fff; --primary: #00294f; --primary-comp: #fff; --secondary: #14497A; --secondary-comp: #fff; } *:focus{outline-offset:4px}body, textarea { font-family: 'Rubik', Arial, Helvetica, sans-serif; }body { font-size: 20px; font-weight: 300; line-height: 1.5; text-align: center; }body, footer a, .about h3 span { color: var(--light-comp, #4d4d4d); }body, header ul, .intro h2 { padding: 0; margin: 0; }h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; }h1, h2, h3, h4, h5, h6, nav, form input[type=submit], .btn { text-transform: uppercase; }h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.3; }img, iframe { max-width: 100%; height: auto; margin: 0 auto }iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; margin: 1em auto; }a img, iframe { border: none; }a, nav li { transition: ease-in-out .3s; }a, header a:hover, form input[type=submit]:hover, .btn:hover, footer a:hover, .featured a:hover { text-decoration: none; }a, footer a:hover, main h2 span, .featured a:hover h3, footer h2 span, .benefits h2, .escrow h2, .services h2 { color: var(--secondary); }main a:hover { text-decoration: underline; }hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; }.imgLeft, .imgRight { max-width: 45%; }.imgLeft { float: left; margin: 10px 4% 2% 0; }.imgCenter { display: block; margin: 0 auto; }.imgRight { float: right; margin: 10px 0 2% 4%; }.clear { clear: both; }.nowrap, a[href^=tel] { white-space: nowrap; }sup { line-height: 0; }.hide { display: none !important; }.center, .hero h1, .hero p, .intro h2, .intro p, .featured h2, .featured h3, .featured p, .collab h2, .comment blockquote, .escrow h2, footer h3 { text-align: center; }.wrap { display: block; max-width: 1080px; margin: 0 auto; position: relative; }.bg-dark, .bg-primary { color: var(--dark-comp, #fff); }.bg-dark { background-color: var(--dark, #333); }.bg-primary { background-color: var(--primary, #448ccb); }.bg-light { background-color: var(--light, #f5f5f5); }.mid { align-items: center; align-self: center; }.grid { display: grid; grid-gap: 10px 20px; }.grid.half { grid-template-columns: repeat(2,1fr); }.grid.third { grid-template-columns: repeat(3,1fr); }.grid.fourth { grid-template-columns: repeat(4,1fr); }.bgimg { position: relative }.bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; }.bgimg > .wrap { z-index: 2 }img[src*="rancho-bernardo"]{object-position:50% 90%}img[src*="palm-desert"]{object-position:50% 90%} header, .hero { position: relative; }header, footer, .services .grid { font-size: 18px }header { background-image: linear-gradient(rgba(0,0,0,.5),transparent); z-index: 999; }header .wrap, footer .wrap { padding: 20px 10px; }header .grid { grid-template-columns: 200px 1fr; }nav, footer, .small, .about h3 span { font-size: 18px; }nav ul { text-align: right }nav li { display: inline-block; }nav li { font-weight: 400; text-transform: capitalize; }nav a { display: block; margin: 4px 8px; padding: 4px; border-width: 3px; border-color: transparent; border-style: none none solid }nav li a:is(:hover,:focus) { border-color: var(--main-bg) }nav .btn { margin-left: 10px; padding: 5px 20px; background-color: transparent; border: 1px solid var(--dark-comp) }nav .btn:is(:hover,:focus) { background-color: var(--secondary); border: 1px solid var(--secondary) }header a, .hero h1, .hero p, .collab h2 span { color: var(--dark-comp, #fff); } .hero { position: relative; display: grid }.hero:before { content: ""; position: absolute; }.hero:before { width: 100%; height: 100%; background-color: rgba(0,0,0,.3); inset: 0; z-index: 1 }.hero { width: 100%; height: 400px; }.hero h1, .hero p { max-width: 700px; padding: 0 15px; margin: 0 auto; text-shadow: 0 0 5px rgba(0,0,0,.8); }.hero h1 { font-size: 36px; }.hero h1 span, main h2 span, footer h2 span { display: block; padding-bottom: 5px; }.hero h1 span { font-size: 24px; display: block; text-transform: none; text-wrap: balance; }.hero p { font-size: 24px; font-weight: 400; }.hero > .wrap .btn, .about .grid, .contact .grid { margin-top: 40px; text-shadow: none; } .intro .wrap { padding: 80px 10px 40px; }.intro p { max-width: 950px; margin: 20px auto; }.video { margin-bottom: 80px; }.video img { border-radius: 10px }.featured { margin: 60px 0 100px; }.featured .grid div { padding: 10px 10px 40px; display: flex; flex-direction: column; align-items: center; }.featured h3 { max-width: 250px; margin: 0 auto; min-height: 60px; display: flex; align-items: flex-end; justify-content: center; margin-top: 20px; }.featured p { margin-top: 0; flex-grow: 1; text-wrap: balance; max-width: 450px }.featured svg { width: 100px; height: 100px; stroke-width: 1.5; flex-shrink: 0; }.collab .wrap { padding: 40px 10px 80px; }.comment .wrap { max-width: 950px; background-color: var(--main-bg, #fff); padding: 40px clamp(10px, 3vw, 40px); margin: -80px auto 50px; border-radius: 10px; border: 1px solid #eee; }.comment { font-size: 24px; }figure { margin: 0 }blockquote:before { content: open-quote; }blockquote:after { content: close-quote; }blockquote:before, blockquote:after { font-size: 200%; line-height: 0; font-family: serif; top: 10px; position: relative }.comment blockquote { padding: 20px 0; margin: 0 auto }.comment figcaption { font-style: normal; padding-bottom: 20px }figcaption { display: block; } form { margin: 20px 0; }form .grid { grid-gap: 0 10px; }form label { text-align: left; text-indent: 10px }form :is(input,label,textarea) { display: block; font-size: 18px }form :is(input,textarea) { width: 100%; padding: 10px; box-sizing: border-box; background-color: var(--main-bg, #fff); margin-bottom: 10px; border: 1px solid #f5f5f5; }form :is(input,textarea)::placeholder { font-style: italic; font-size: 16px; }form input[type=submit], .btn { display: inline-block; min-width: 110px; font-size: 16px; font-weight: 400; text-align: center; line-height: 1.6; background-color: var(--primary, #448ccb); color: var(--primary-comp, #fff); padding: 10px 40px; margin: 10px 0; border: none; border-radius: 50px; transition: ease-in-out .3s; }form input[type=submit] { width: auto; min-width: 250px; margin: 10px auto; }:is(form input[type=submit],.btn):is(:hover,:focus) { cursor: pointer; background-color: var(--secondary, #01cdea); color: var(--primary-comp, #fff); }form textarea { height: 150px } footer > .wrap { padding: 20px 10px }footer .cta { padding: 30px 0; }footer .grid { grid-template-columns: 150px 1fr 150px }footer .grid li { text-align: center }.ccpaNotice { text-align: center !important; } main, .contact .bg-light, .escrow .wrap { padding: 40px 10px 50px }main h1, footer h2, .home h2 { font-size: 30px; }main h2 { font-size: 24px; }main h3 { font-size: 22px; }main h4, footer h2 span, .home h2 span, .intro p, figcaption, .contact h2, footer h2 span { font-size: 20px; }main h2 span { font-size: 18px; }main ul, main ol { padding-left: 25px; }main li { margin: 5px 0; }.nolist, footer ul, .contact ul { list-style: none; padding-left: 0; }.benefits h1 { padding-bottom: 10px }:is(.benefits, .escrow, .services, .contact) h2 { text-transform: unset }.benefits h2 { margin: 40px 0 0 0 }.benefits h2 span { display: inline; font-size: 56px; font-weight: 800; line-height: .5; vertical-align: middle; margin-right: -25px; opacity: .1 }.benefits :is(h2, p):nth-of-type(even) { text-align: right }.benefits p { text-wrap: balance }.benefits p:nth-of-type(odd) { margin-right: clamp(50px, 10vw, 150px) }.benefits p:nth-of-type(even) { margin-left: clamp(50px, 10vw, 150px) }.escrow h2 { font-size: 30px }.services .grid p{ padding-right: 30px }.contact .grid { text-align: left }.contact img { object-fit: cover; width: 100%; height: 200px; border-radius: 10px }.contact .grid h2 { margin: 0; text-align: unset }.contact .grid li:is(:nth-of-type(3),:last-child) { margin-top: 20px } @media(max-width:999px) { .contact .grid.third { grid-template-columns: 1fr 1fr } .contact .grid.third > div:first-child { grid-column: 1 / -1 } .contact .grid.third li { text-align: center } .contact img[src*="rancho-bernardo"]{height:clamp(200px, 35vw, 350px)}} @media (max-width: 767px) { header .grid, footer .grid, .featured .grid.third, main .grid.half { grid-template-columns: 1fr } nav ul { text-align: center } .featured h3 { margin: 0 auto; min-height: unset } .services .grid p { padding-right: 0 } } @media(max-width:600px) { .grid.grid.third { grid-template-columns: 1fr } .grid.third.addr { grid-template-columns: 1fr 1fr } .grid.third.addr > label:first-child { grid-column: 1 / -1 } .benefits.benefits p { margin: 1em 0 } .benefits.benefits :is(h2, p) { text-align: center }} @media(max-width:500px) { nav ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr } nav li:has(.btn) { grid-column: 1 / -1 } nav li { text-align: center } nav .btn { margin: 10px }} @media(max-width:400px) { main h1, footer h2, .home h2 { font-size: 26px } main h2 { font-size: 22px } nav ul { grid-template-columns: 1fr 1fr } footer .grid.half { grid-template-columns: 1fr } .hero { height: 350px }}