/*
Theme Name: Loan by Razia
Description: Editable mortgage landing page for Razia Sultana.
Version: 1.1.0
Text Domain: loan-by-razia
*/

*{box-sizing:border-box}body{margin:0;background:#f6f6f6;color:#161a1d;font:14px/1.45 Arial,sans-serif}button,a{font:inherit}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #467fe3;outline-offset:3px}.wrap{width:min(800px,92%);margin:auto}header{position:sticky;top:0;z-index:2;background:#181918;color:white}nav{width:min(978px,94%);margin:auto;min-height:60px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}nav strong{margin-right:auto}nav a{text-decoration:none;font-weight:bold;font-size:13px}h1,h2{line-height:1.12;letter-spacing:-.035em;margin:12px 0}h1{font-size:42px}h2{font-size:34px}em{font-style:normal;color:#ce2d35}.hero{color:white;background:radial-gradient(ellipse at 0 100%,#700a09,transparent 51%),radial-gradient(ellipse at 43% 20%,#172718,transparent 60%),#222}.hero .wrap{height:444px;position:relative;display:grid;grid-template-columns:365px 1fr;align-items:center;gap:54px}.hero img{height:410px;align-self:end}.hero .intro{z-index:1}.play{position:absolute;bottom:38px;left:51%;border:0;border-radius:50%;width:80px;height:80px;background:white;color:#ce2d35;font-size:30px}.panel{background:#fff;border-radius:14px;padding:26px;box-shadow:0 5px 24px #0001}.hero .panel{background:#10130fee;padding:17px}.tag{display:inline-block;background:#f4e2e3;color:#202124;border-radius:20px;padding:5px 12px;font-size:9px;font-weight:bold;text-transform:uppercase}.red{display:inline-block;background:#cb2b34;color:#fff;padding:10px 15px;border:0;border-radius:28px;font-size:11px;font-weight:bold;text-decoration:none}.row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:80px auto}.photo{position:relative;overflow:hidden;border-radius:14px;box-shadow:0 5px 22px #0001}.photo img{position:absolute;max-width:none}.portrait{background:#202223;width:100%;height:388px;object-fit:contain;object-position:bottom;border-radius:14px}.banner{margin:80px auto;position:relative;background:#222;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center}.banner .panel{margin:25px;z-index:1}.banner h2{font-size:25px}.banner .photo{border-radius:0}.dark,footer{background:#222627;color:white;padding:70px 0}.dark{text-align:center}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:24px}.grid button{display:flex;align-items:center;gap:12px;background:#343637;color:white;border:1px solid transparent;border-radius:12px;min-height:67px;text-align:left;font-weight:800;padding:12px;text-transform:uppercase}.grid button:hover{border-color:#e44950;background:#414344}.grid svg{width:28px;flex:none;color:#ff646b}dialog{border:0;border-radius:16px;padding:30px;width:min(500px,92%);box-shadow:0 10px 60px #0006}dialog::backdrop{background:#111b}dialog button.close{float:right;border:0;background:#eee;border-radius:50%;width:32px;height:32px}hr{border:0;border-top:1px solid #ddd}section[id]{scroll-margin-top:90px}.resources a{display:block;margin:22px 0;text-decoration:none}.resources b{display:inline-grid;place-items:center;margin-right:12px;background:#c92d36;color:white;border-radius:50%;width:35px;height:35px}@media(max-width:720px){nav{gap:10px;padding:10px 0}h1{font-size:36px}h2{font-size:29px}.hero .wrap,.row,.banner{grid-template-columns:1fr;gap:22px}.hero .wrap{height:auto;padding-top:35px}.hero img{height:290px;justify-self:center}.play{left:10%;width:58px;height:58px;bottom:24px}.row,.banner{margin:45px auto}.grid{grid-template-columns:repeat(2,1fr)}}

.grid svg{color:#f4f4f4;width:29px}.grid svg .accent,.feature .accent{stroke:#e7343e}.grid button{line-height:1.12}.resources b svg{width:22px}.feature{display:grid;grid-template-columns:43px 1fr;gap:14px;align-items:start}.feature>svg{width:43px}.feature h3,.feature p{margin:0 0 5px}.review-feature{margin:12px 0;grid-template-columns:36px 1fr}.review-feature>svg{background:#f8dfe0;border-radius:50%;padding:7px;width:36px}

.razia-footer{background:#222627;color:#fff;padding:53px 0 42px}
.footer-wrap{width:min(960px,92%);margin:auto}
.footer-brand{display:flex;align-items:center;gap:15px;margin-bottom:27px;line-height:1.06}
.footer-brand strong{font-size:25px;letter-spacing:-.06em}
.footer-brand span{border-left:2px solid #fff;padding:2px 0 2px 14px;font-size:22px;font-weight:700}
.footer-main{display:grid;grid-template-columns:390px minmax(0,1fr);gap:26px}
.footer-main h2{font-size:clamp(38px,4.25vw,56px);font-weight:900;line-height:1.16;letter-spacing:-.045em;margin:0}
.footer-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 13px}
.footer-cards>*{min-height:100px;background:#323435;border-radius:16px;display:flex;flex-direction:column;justify-content:center;padding:14px 18px;text-decoration:none;line-height:1.16}
.footer-cards a:hover{background:#414445}
.footer-cards strong{font-size:clamp(16px,1.7vw,23px);letter-spacing:-.045em;font-weight:900}
.footer-cards span{font-size:12px;font-weight:700}
.footer-details{margin-top:70px;font-size:11px;color:#e4e4e4}
.footer-details p{margin:10px 0}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 14px}
@media(max-width:900px){.footer-main{grid-template-columns:1fr 1.35fr}.footer-cards>*{padding:12px}}
@media(max-width:650px){.razia-footer{padding-top:34px}.footer-main{grid-template-columns:1fr}.footer-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-details{margin-top:38px}}

nav a[data-buy]:is(:hover,:focus-visible,.active){text-decoration:underline;text-underline-offset:4px}
#purchase{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border-radius:0;color:white;background:#171919}
.buy-head{height:74px;background:#fff;color:#171919;display:flex;align-items:center;justify-content:center;gap:10px;font-size:24px;font-weight:900;position:relative}
.buy-head img{width:50px;height:50px;border-radius:50%;background:#26292b;object-fit:cover;object-position:top}
#purchase .buy-close{position:absolute;right:24px;border:0;border-radius:50%;background:#111;color:white;width:34px;height:34px}
.buy-progress{height:3px;background:#bbb}.buy-progress span{display:block;background:#367ecf;height:100%}
.buy-surface{position:relative;min-height:calc(100dvh - 125px);padding:72px 20px 55px;background:url(assets/photo-12c17c4a14af.png) center/cover,radial-gradient(ellipse at left bottom,#650906,transparent 60%),radial-gradient(ellipse at 40% 10%,#192719,transparent 45%),#212121}
.buy-content{max-width:625px;margin:auto;text-align:center}
.buy-content h2{font-size:24px;max-width:560px;margin:0 auto 15px}
.buy-hint{color:#ff6067;margin:0 0 18px}.buy-note{margin:42px 0 0;color:#ccc;font-size:12px}
.buy-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.buy-choices button{position:relative;flex:0 0 calc(50% - 4px);min-height:53px;background:#050505;color:#fff;border:1px solid transparent;border-radius:2px;padding:10px 25px;font-size:15px}
.buy-choices.single{flex-direction:column;align-items:center}.buy-choices.single button{width:min(305px,100%)}
.buy-choices button:hover,.buy-choices button[aria-pressed=true]{background:white;color:#111}.buy-choices button[aria-pressed=true]::after{content:'✓';position:absolute;right:10px}
.buy-back{position:absolute;left:max(20px,calc(50% - 470px));top:50%;border:1px solid #ddd;color:#ff6067;border-radius:3px;background:transparent;width:36px;height:36px;font-size:24px}
.buy-foot{text-align:center;padding:15px;font-size:11px;color:#ddd}
.buy-review{text-align:left;background:#080909;padding:18px;border-radius:8px}.buy-review dt{color:#bbb}.buy-review dd{margin:0 0 9px}
@media(max-width:960px){.buy-back{position:static;display:block;margin:0 auto 18px}.buy-surface{padding-top:24px}}
@media(max-width:530px){.buy-choices button{flex-basis:100%}.buy-head{font-size:20px}}

.buy-input-panel{width:min(100%,530px);margin:0 auto}
.buy-input-panel label{display:block;width:min(100%,305px);margin:0 auto;background:white;color:#2465b8;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.06em;border-radius:4px;padding:9px}
.buy-input-panel label.buy-zip{width:140px}
.buy-input-panel input{display:block;width:100%;border:0;background:white;color:#151515;text-align:center;font:16px Arial;padding:5px}
.buy-choices .buy-continue{display:block;width:183px;min-height:57px;margin:15px auto 0;border:0;border-radius:40px;background:#c72830;color:white}
.buy-choices .buy-continue:hover{background:#a91c24;color:white}
.buy-suggestions{width:min(305px,100%);margin:8px auto 0;max-height:180px;overflow:auto}
.buy-suggestions button{display:block;width:100%;min-height:34px;text-align:left}
.buy-arrow{font-size:42px;color:#41b6df}
#purchase.buy-done .buy-surface{background:url(assets/photo-fa789a02d371.png) center/cover;display:grid;place-items:center}
.buy-done .buy-content{background:#fff;color:#262729;width:min(100%,1000px);max-width:none;padding:85px 24px;border-radius:5px;box-shadow:0 14px 40px #0002}
.buy-done .buy-note{color:#555}

.buy-start .buy-head{height:50px;font-size:20px}.buy-start .buy-head img{width:34px;height:34px}
.buy-start .buy-surface{padding-top:56px;min-height:550px}.buy-start .buy-back,.buy-start .buy-progress{display:none}
.buy-start h2{font-size:30px;max-width:380px}.buy-start h2::before{content:"HOME PURCHASE GUIDANCE";display:block;color:#65a4ff;font:11px Arial;margin-bottom:13px}
.buy-start .buy-hint{color:white;font-size:13px}.buy-start .buy-choices{max-width:458px;margin:auto;gap:6px}
.property-question{flex-basis:100%;color:#ff6067;margin:0 0 12px}
.buy-start .buy-choices button{flex:1 1 calc(25% - 6px);padding:0;border:1px solid #111;border-radius:7px;overflow:hidden;color:#fff;background:#050505}
.buy-start .buy-choices button:hover,.buy-start .buy-choices button[aria-pressed=true]{border-color:#ff6067;color:#fff;background:#292929}
.buy-start .buy-choices svg{display:block;width:100%;height:70px;background:#fff;padding:8px}
.buy-start .buy-choices span{display:block;font-size:10px;padding:7px 2px}
.buy-start .buy-note{margin-top:30px}
@media(max-width:520px){.buy-start .buy-choices button{flex-basis:calc(50% - 6px)}}


#purchase .buy-choices > button{isolation:isolate;transition:color .18s,background-color .18s}
#purchase .buy-choices > button::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
@media(hover:hover){
#purchase .buy-choices > button:not(:disabled):hover{z-index:2;background:linear-gradient(110deg,#090909,#3a3a3c);color:white}
#purchase .buy-choices > button:not(:disabled):hover::before{animation:choice-ring 580ms ease-out both}
}
#purchase .buy-choices > button:focus-visible{outline:2px solid #5ab0d1;outline-offset:2px}
#purchase .buy-choices > button.choice-clicked{background:white;color:#111;box-shadow:none;z-index:2}
#purchase .buy-choices > button.choice-clicked::after{content:'✓';position:absolute;right:10px;top:50%;transform:translateY(-50%)}
#purchase .buy-choices > button:disabled{opacity:1}
@keyframes choice-ring{from{box-shadow:0 0 0 0 #326c83b0}45%{box-shadow:0 0 0 9px #326c8370}to{box-shadow:0 0 0 12px #326c8300}}
@keyframes choice-out{to{opacity:0;transform:translateX(-70px)}}
@keyframes choice-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
#purchase .buy-content.exiting h2,#purchase .buy-content.exiting .buy-hint{animation:choice-out 200ms ease both}
#purchase .buy-content.exiting .buy-choices>button{animation:choice-out 230ms ease both;animation-delay:calc(var(--order,0)*22ms)}
#purchase .buy-content.entering h2,#purchase .buy-content.entering .buy-choices>*{animation:choice-in 280ms ease both;animation-delay:calc(var(--order,0)*24ms)}
@media(prefers-reduced-motion:reduce){#purchase *{animation:none!important;transition:none!important}}

#meet-player{width:min(1240px,96%);max-width:none;padding:18px;background:#0d0d0e;color:white;overflow:auto}
#meet-player::backdrop{background:#111d}
.meet-frame{position:relative;background:black}
.meet-frame video{display:block;width:100%;max-height:76vh}
.meet-actions{position:absolute;right:12px;bottom:55px;padding:12px;background:#080808eb;border-radius:9px}
.meet-actions button{margin:6px 2px 0}
.meet-close{display:block;margin:0 0 8px auto;border:0;border-radius:50%;width:32px;height:32px;cursor:pointer}
.meet-options{padding:35px 10px;text-align:center}
.meet-options button{margin:5px;padding:16px}
@media(max-width:720px){.meet-actions{position:static}.meet-frame video{max-height:62vh}}

/* Give the landing page more room on desktop without enlarging the dialogs. */
@media (min-width: 1024px) {
    body { font-size: 16px; }
    .wrap, .footer-wrap { width: min(1040px, 90%); }
    nav { width: min(1180px, 92%); min-height: 64px; gap: 18px; }
    nav a { font-size: 15px; }
    nav strong { font-size: 18px; }
    main h1 { font-size: clamp(48px, 4.1vw, 60px); }
    main h2 { font-size: clamp(37px, 3.2vw, 46px); }
    main .banner h2 { font-size: clamp(29px, 2.5vw, 36px); }
    .hero .wrap {
        height: clamp(510px, 43vw, 590px);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(28px, 4vw, 60px);
    }
    .hero img {
        width: 100%;
        height: calc(100% - 20px);
        min-height: 0;
        object-fit: contain;
        object-position: center bottom;
    }
    .hero .panel { padding: 23px; }
    .hero .panel strong { font-size: 21px; }
    .play { width: 96px; height: 96px; }
    main .tag { font-size: 11px; }
    main .red, nav .red { font-size: 13px; padding: 12px 17px; }
    .row { gap: clamp(44px, 5vw, 70px); }
    .portrait { height: clamp(420px, 38vw, 490px); }
    .grid button { min-height: 74px; }
    .footer-main { grid-template-columns: 40% minmax(0, 1fr); }
    .footer-details { font-size: 12px; }
}