/* Presentation layer: keep the original application and integrations intact. */
:root { --premium-navy: #10283f; --premium-blue: #a9cde4; --premium-copper: #ad4e25; }
body { font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
header { background: rgba(253,252,249,.98) !important; border-bottom: 1px solid #10283f14; box-shadow: 0 5px 24px #10283f0a !important; padding-block: 16px !important; }
header > .container { padding-inline: 32px; }
header nav { gap: 28px; }
header nav a, [data-testid="link-header-phone"] { color: #34495a !important; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
header nav a:hover { color: #ad4e25 !important; }
header nav a span { background: #ad4e25 !important; bottom: -8px; }
[data-testid="link-header-logo"] > div { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
[data-testid="link-header-logo"] img { height: 54px; }
[data-testid="link-header-phone"] { border-left: 1px solid #dbe1e5; padding-left: 20px; margin-right: 5px; }
[data-testid="link-header-phone"] svg { color: #ad4e25; }
[data-testid="button-header-quote"], [data-testid="button-hero-quote"] { background: #ad4e25 !important; border: 1px solid #ffffff12; border-radius: 7px; box-shadow: 0 5px 14px #10283f15; font-weight: 600; letter-spacing: .01em; }
[data-testid="button-header-quote"] { padding: 14px 20px; }
[data-testid="button-header-quote"]:hover, [data-testid="button-hero-quote"]:hover { background: #903d1b !important; opacity: 1; }
[data-testid="button-mobile-menu-toggle"] { color: #10283f; padding: 10px; border: 1px solid #dbe1e5; border-radius: 6px; }
div:has(> div > [data-testid="link-topbar-reviews"]) { background: #10283f !important; padding-block: 9px; padding-inline: 32px; }
[data-testid="link-topbar-reviews"] { border: 0; background: transparent; padding-block: 0; }
section:has(h1) > div > .absolute:not(img) { background: linear-gradient(90deg, rgba(9,28,45,.94) 0%, rgba(12,34,53,.83) 45%, rgba(12,34,53,.22) 100%) !important; }
section:has(h1) > div > .container { padding-inline: 32px; }
h1 { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 500 !important; letter-spacing: -.045em !important; line-height: 1.08 !important; }
h1 > span { color: #a9cde4 !important; }
section:has(h1) .max-w-xl > .inline-flex { background: #ffffff08; border-color: #ffffff26; font-size: 12px; font-weight: 500; letter-spacing: .025em; }
section:has(h1) .max-w-xl > p { color: #d5dfe6; font-size: 16px; line-height: 1.8; }
section:has(h1) .lucide-circle-check-big { color: #a9cde4 !important; }
[data-testid="button-hero-call"] { border: 1px solid #ffffff55; background: #ffffff06; border-radius: 7px; font-weight: 500; }
#quote { border-radius: 12px; box-shadow: 0 24px 60px #071c3650; scroll-margin-top: 112px; }
#quote > div:first-child { background: #10283f; border-bottom: 1px solid #ffffff1a; }
#quote h2 { font-family: Inter, Arial, sans-serif; font-weight: 600; letter-spacing: -.035em; }
#quote > div:first-child p { color: #c1ced8; }
#quote > div:first-child span, #quote > div:first-child .h-full { background: #ad4e25 !important; }
#quote > div:first-child span { font-weight: 500; }
#quote button[data-testid^="button-service-select-"] { border-width: 1px; border-radius: 7px; }
#quote button[data-testid^="button-service-select-"]:hover { box-shadow: 0 0 0 1px #7895aa; }
header a:focus-visible, header button:focus-visible, section:has(h1) a:focus-visible { outline: 3px solid #73a5c9; outline-offset: 4px; }
@media (min-width: 1024px) { section:has(h1) h1 { font-size: clamp(44px,4.2vw,58px); } }
@media (max-width: 1100px) and (min-width: 1024px) { header nav { gap: 16px; } [data-testid="link-header-phone"] { padding-left: 10px; } header > .container { padding-inline: 20px; } }
@media (max-width: 1023px) { header { padding-block: 12px !important; } header > div:not(:first-child) { background: #10283f; } }
@media (max-width: 639px) { header > .container, section:has(h1) > div > .container { padding-inline: 20px; } [data-testid="link-header-logo"] img { height: 44px; } div:has(> div > [data-testid="link-topbar-reviews"]) { padding-inline: 20px; } h1 { font-size: 39px !important; } section:has(h1) > div > .container { padding-block: 44px; } }
[data-testid="button-mobile-header-quote"] { background: #ad4e25 !important; border-radius: 7px; }
@media (max-width: 639px) { section:has(h1) > div > .absolute:not(img) { background: linear-gradient(90deg, #091c2df2, #0c2235c9) !important; } }
/* Services: one accessible, touch-friendly carousel across all screen sizes. */
.premium-services { background: #f5f3ee; color: #10283f; padding: 88px max(32px, calc((100vw - 1216px) / 2)); scroll-margin-top: 90px; overflow: hidden; }
.services-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 38px; }
.services-eyebrow { display: flex; align-items: center; gap: 12px; color: #99502f; font-size: 10px; letter-spacing: .2em; font-weight: 700; margin-bottom: 20px; }
.services-eyebrow::before { content: ''; width: 30px; height: 1px; background: #99502f; }
.services-intro h2 { font: 400 clamp(36px,4vw,54px)/1.09 Georgia,serif; letter-spacing: -.045em; }
.services-intro h2 em { color: #637e8b; font-weight: 400; }
.services-intro-right { max-width: 355px; }
.services-intro-right > p { font-size: 14px; line-height: 1.8; color: #617079; margin-bottom: 22px; }
.services-controls { display: flex; gap: 10px; align-items: center; }
.services-controls > span { margin-right: auto; font-size: 9px; letter-spacing: .13em; font-weight: 600; }
.services-controls button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #bfc8ca; background: transparent; cursor: pointer; transition: background .2s,color .2s; }
.services-controls button:not(:disabled):hover { background: #10283f; border-color: #10283f; color: white; }
.services-controls button:disabled { opacity: .3; cursor: default; }
.services-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 12px; }
.services-rail::-webkit-scrollbar { display: none; }
.service-card { flex: 0 0 calc((100% - 48px)/3); min-width: 0; scroll-snap-align: start; background: #fffefa; border: 1px solid #e1e3dd; border-radius: 10px; overflow: hidden; }
.service-photo { height: 275px; position: relative; overflow: hidden; background: #dbe0de; }
.service-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,#071c3620,transparent 45%); }
.service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.service-card:hover .service-photo img { transform: scale(1.04); }
.service-number { position: absolute; z-index: 1; top: 16px; left: 16px; background: #fffefaeF; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.service-badge { position: absolute; right: 14px; top: 19px; padding: 7px 10px; border-radius: 3px; background: #10283f; color: white; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.service-content { padding: 25px 25px 0; }
.service-category { font-size: 8px; letter-spacing: .16em; font-weight: 600; color: #927557; margin-bottom: 10px; }
.service-content h3 { font: 400 29px/1.2 Georgia,serif; letter-spacing: -.035em; margin-bottom: 10px; }
.service-description { font-size: 13px; line-height: 1.7; color: #637079; min-height: 45px; }
.service-content a { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5e5de; padding: 18px 0; margin-top: 20px; font-size: 11px; font-weight: 600; color: #10283f; }
.service-content a svg { color: #ad4e25; transition: transform .2s; }
.service-content a:hover { color: #ad4e25; }
.service-content a:hover svg { transform: translateX(3px); }
.services-footer { display: flex; align-items: center; gap: 25px; margin-top: 23px; }
.services-count { font-size: 11px; color: #637079; white-space: nowrap; font-variant-numeric: tabular-nums; }
.services-count strong { color: #10283f; font-weight: 600; }
.services-count > span { margin-left: 8px; font-size: 9px; letter-spacing: .1em; }
.services-progress { flex: 1; height: 2px; background: #dddcd5; }
.services-progress span { display: block; height: 100%; background: #ad4e25; transition: width .3s; }
.services-hint { font-size: 9px; letter-spacing: .13em; color: #78848a; }
.premium-services :focus-visible { outline: 2px solid #ad4e25; outline-offset: -3px; }
@media(max-width: 1023px) { .service-card { flex-basis: calc((100% - 24px)/2); } .services-intro { gap: 28px; } .services-intro-right { max-width: 290px; } }
@media(max-width: 639px) { .premium-services { padding: 56px 20px; } .services-intro { display: block; margin-bottom: 26px; } .services-intro-right { max-width: none; margin-top: 22px; } .services-intro-right > p { font-size: 13px; } .services-rail { margin-right: -20px; padding-right: 20px; gap: 24px; } .service-card { flex-basis: 86%; } .service-photo { height: 240px; } .service-content { padding: 22px 20px 0; } .service-content h3 { font-size: 27px; } .services-hint { display: none; } .services-footer { gap: 16px; } }
@media(prefers-reduced-motion: reduce) { .premium-services *, .premium-services *::after { transition: none !important; scroll-behavior: auto !important; } }
/* Why us: real team photography and a calm, editorial trust section. */
.premium-why { padding: 65px max(32px, calc((100vw - 1216px)/2)) 52px; background: #10283f; color: #f8f6f0; scroll-margin-top: 90px; }
.why-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #a9c4d1; font-size: 9px; letter-spacing: .18em; font-weight: 600; padding-bottom: 25px; border-bottom: 1px solid #ffffff22; }
.why-topline > span:first-child { display: flex; gap: 12px; align-items: center; }
.why-topline > span:first-child::before { content: ''; width: 28px; height: 1px; background: #bf9873; }
.why-topline > span:last-child { color: #a3b3c1; font-size: 8px; }
.why-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; padding: 35px 0 34px; }
.why-heading-row h2 { font: 400 clamp(38px,4.3vw,58px)/1.06 Georgia,serif; letter-spacing: -.045em; }
.why-heading-row h2 em { color: #abc8d5; font-weight: 400; }
.why-heading-row > p { max-width: 350px; color: #becbd5; font-size: 14px; line-height: 1.85; padding-bottom: 4px; }
.why-main { display: grid; grid-template-columns: .95fr 1.15fr; gap: 42px; }
.why-photo { position: relative; margin: 0; min-height: 370px; border-radius: 8px; overflow: hidden; }
.why-photo img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 52% center; }
.why-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#061726e8,transparent 55%); }
.why-photo figcaption { position: absolute; left: 27px; right: 24px; bottom: 25px; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.why-photo-label { font-size: 8px; letter-spacing: .18em; color: #d7e2e8; }
.why-photo figcaption > span:last-child { font: 400 27px/1.15 Georgia,serif; letter-spacing: -.025em; }
.why-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.why-reason { padding: 2px 0 20px; border-bottom: 1px solid #ffffff24; }
.why-reason-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.why-reason-top svg { color: #b9d1db; stroke-width: 1.3; }
.why-reason-top > span { color: #a0b3c0; font-size: 9px; font-variant-numeric: tabular-nums; }
.why-reason h3 { font: 400 23px/1.18 Georgia,serif; letter-spacing: -.025em; margin-bottom: 10px; }
.why-reason > p { color: #bbc9d4; font-size: 12px; line-height: 1.8; }
.why-proof { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 38px; padding: 28px 0; border-bottom: 1px solid #ffffff24; border-top: 1px solid #ffffff24; }
.why-proof > div { padding: 0 28px; border-left: 1px solid #ffffff24; }
.why-proof > div:first-child { border-left: 0; padding-left: 0; }
.why-proof > div > p { font: 400 39px/1.15 Georgia,serif; letter-spacing: -.04em; margin-bottom: 7px; }
.why-proof > div > span { color: #b9c8d3; font-size: 11px; }
.why-stars { font: 10px/1 sans-serif; color: #dab893; letter-spacing: .12em; margin-left: 10px; vertical-align: middle; }
.why-bottom { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.why-senior { display: flex; gap: 16px; align-items: center; }
.why-senior > svg { color: #d3ad86; flex-shrink: 0; stroke-width: 1.25; }
.why-senior p { display: flex; flex-direction: column; gap: 6px; }
.why-senior strong { font-size: 13px; font-weight: 500; }
.why-senior p > span { color: #b9c8d3; font-size: 11px; }
.why-action { text-align: center; }
.why-action a { display: inline-flex; align-items: center; justify-content: center; padding: 15px 25px; background: #f2e6d6; color: #10283f; border-radius: 5px; font-size: 12px; font-weight: 600; transition: background .2s; }
.why-action a:hover { background: #fffaf2; }
.why-action a:focus-visible { outline: 3px solid #a9cde4; outline-offset: 4px; }
.why-action p { margin-top: 8px; font-size: 9px; color: #b9c8d3; }
@media(max-width: 1023px) { .why-main { gap: 26px; grid-template-columns: .9fr 1.1fr; } .why-reasons { gap: 20px; } .why-reason h3 { font-size: 21px; } .why-proof > div { padding-inline: 18px; } .why-proof > div > p { font-size: 32px; } }
@media(max-width: 767px) { .premium-why { padding: 45px 20px; } .why-topline > span:last-child { display: none; } .why-heading-row { display: block; padding: 28px 0; } .why-heading-row > p { margin-top: 22px; font-size: 13px; max-width: 440px; } .why-main { grid-template-columns: 1fr; gap: 28px; } .why-photo { min-height: 340px; } .why-reasons { gap: 24px 22px; } .why-reason h3 { font-size: 23px; } .why-proof { grid-template-columns: 1fr 1fr; row-gap: 25px; padding-block: 24px; margin-top: 28px; } .why-proof > div:nth-child(3) { border: 0; padding-left: 0; } .why-proof > div > p { font-size: 32px; } .why-proof > div > span { font-size: 10px; } .why-bottom { flex-direction: column; align-items: stretch; gap: 24px; } .why-action a { width: 100%; } }
@media(max-width: 370px) { .why-reasons { grid-template-columns: 1fr; } }
/* Shared finish for the remaining landing-page sections. */
#reviews,#about,#how-it-works,#areas,#final-cta { padding: 80px 32px; scroll-margin-top: 100px; }
#reviews h2,#about h2,#how-it-works h2,#areas h2,#final-cta h2,.premium-faq h2,.premium-included h2,.premium-gallery h2 { font-family: Georgia,serif; font-weight: 400; font-size: clamp(34px,3.7vw,48px); line-height: 1.12; letter-spacing: -.04em; }
#reviews { background: #faf9f5; }
#reviews [class*="rounded-2xl"] { border-radius: 8px; box-shadow: none; border-color: #e0e3df; }
#reviews a { border-radius: 5px; }
#about { background: #fffefa; }
#about .shadow-2xl { box-shadow: none; border-radius: 8px; }
#about .text-lg { font-size: 14px; line-height: 1.9; }
#about li { font-size: 12px; font-weight: 500; }
#about li svg { width: 18px; color: #647e8b; }
#about h2::before { content: 'YOUR LOCAL MOVING TEAM'; display: block; margin-bottom: 20px; font: 600 9px/1.5 Inter,Arial,sans-serif; letter-spacing: .18em; color: #99502f; }
#about img { aspect-ratio: 1.15; object-fit: cover; }
#how-it-works { background: #f5f3ee; border-top: 1px solid #e3e3da; }
#how-it-works h2::before { content: 'SIMPLE FROM START TO FINISH'; display: block; margin-bottom: 18px; font: 600 9px/1.5 Inter,Arial,sans-serif; letter-spacing: .18em; color: #99502f; }
#how-it-works .w-24 { width: 70px; height: 70px; border-radius: 12px; background: #10283f; box-shadow: none; }
#how-it-works .w-8.h-8.rounded-full { background: #ad4e25; }
#how-it-works h3 { font: 400 25px/1.2 Georgia,serif; color: #10283f; }
#how-it-works p { font-size: 13px; line-height: 1.8; color: #637079; }
#areas { background: #10283f; }
#areas > div > div:first-child > p:first-child { font-size: 9px; letter-spacing: .18em; color: #b8cdd7 !important; }
#areas .text-lg { font-size: 14px; line-height: 1.8; }
#areas button { min-height: 70px; }
#areas button .font-bold { font: 400 23px/1.2 Georgia,serif; }
#areas button .text-xl { display: none; }
#areas .rounded-xl { border-radius: 5px; }
#areas .bg-white\/5 { background: #ffffff03; }
#final-cta { background: #18364a; padding-block: 85px; border-top: 1px solid #ffffff20; }
#final-cta h2::before { content: 'LET’S GET YOU MOVING'; display: block; margin-bottom: 23px; font: 500 9px/1.5 Inter,Arial,sans-serif; letter-spacing: .2em; color: #b9ccd6; }
#final-cta p { font-size: 14px; line-height: 1.85; color: #c4d1d8; }
#about a[href="#quote"],#areas a[href="#quote"],#final-cta a[href="#quote"],footer a[href="#quote"] { background: #ad4e25 !important; color: white; border-radius: 5px; font-size: 13px; font-weight: 600; box-shadow: none; }
#final-cta a[href^="tel:"] { border-radius: 5px; font-size: 13px; font-weight: 500; border-width: 1px; }
footer { background: #0b2031 !important; padding-inline: 20px; }
footer h4 { font-size: 10px !important; letter-spacing: .15em; color: #bdd0db !important; }
footer p,footer li { font-size: 12px; line-height: 1.9; }
footer a:focus-visible,main a:focus-visible,summary:focus-visible { outline: 2px solid #a67450; outline-offset: 4px; }
.premium-gallery { background: #fffefa; padding: 78px max(32px,calc((100vw - 1216px)/2)); color: #10283f; scroll-margin-top: 100px; }
.gallery-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 34px; }
.premium-gallery h2 em { color: #637e8b; font-weight: 400; }
.gallery-heading h2 + p { margin-top: 18px; font-size: 13px; color: #637079; line-height: 1.8; }
.gallery-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 calc((100% - 24px)/2); position: relative; border-radius: 8px; overflow: hidden; scroll-snap-align: start; text-align: left; background: #10283f; cursor: zoom-in; }
.gallery-slide img { height: 355px; width: 100%; object-fit: cover; transition: transform .5s; }
.gallery-slide:hover img { transform: scale(1.025); }
.gallery-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; color: #f7f5ef; font-size: 12px; }
.gallery-caption svg { flex-shrink: 0; color: #b8ccd6; }
.gallery-index { position: absolute; top: 16px; left: 16px; background: #fffefae8; border-radius: 50%; display: grid; place-items: center; width: 32px; height: 32px; font-size: 10px; }
.gallery-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #dedfd7; margin-top: 27px; padding-top: 23px; font-size: 9px; letter-spacing: .1em; color: #647580; }
.gallery-foot a { font-size: 12px; letter-spacing: 0; color: #99502f; }
.gallery-dialog { border: 1px solid #ffffff33; border-radius: 8px; padding: 15px; background: #10283f; color: white; margin: auto; width: min(1000px,94vw); max-height: 94vh; }
.gallery-dialog::backdrop { background: #061626ed; }
.gallery-dialog img { max-height: 75vh; width: 100%; object-fit: contain; }
.gallery-dialog figcaption { padding: 16px 40px 4px; text-align: center; font-size: 13px; }
.gallery-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; background: #10283fee; border: 1px solid #ffffff55; border-radius: 50%; font-size: 28px; cursor: pointer; }
.premium-gallery :focus-visible { outline: 3px solid #ad4e25; outline-offset: -3px; }
.premium-faq { padding: 80px max(32px,calc((100vw - 1216px)/2)); background: #fffefa; display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; color: #10283f; scroll-margin-top: 100px; }
.faq-intro > p:not(.services-eyebrow) { color: #637079; font-size: 14px; line-height: 1.8; margin: 22px 0; }
.faq-intro a { color: #99502f; font-size: 12px; }
.faq-list { border-top: 1px solid #d7dedb; }
.faq-list details { border-bottom: 1px solid #d7dedb; }
.faq-list summary { cursor: pointer; list-style: none; padding: 23px 32px 23px 0; font-size: 14px; font-weight: 500; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 3px; font-size: 22px; top: 17px; color: #99502f; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details > p { color: #637079; font-size: 13px; line-height: 1.85; padding: 0 20px 22px 0; }
.premium-included { padding: 70px max(32px,calc((100vw - 1216px)/2)); background: #f5f3ee; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; color: #10283f; }
.premium-included p:not(.services-eyebrow) { font-size: 13px; line-height: 1.8; color: #637079; margin: 20px 0; }
.premium-included a { color: #99502f; font-size: 12px; }
.premium-included ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.premium-included li { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid #d8dfd9; font-size: 12px; }
.premium-included li svg { color: #697d71; flex-shrink: 0; }
@media(max-width:767px) { #reviews,#about,#how-it-works,#areas,#final-cta,.premium-gallery,.premium-faq,.premium-included { padding: 55px 20px; } .premium-faq,.premium-included { grid-template-columns: 1fr; gap: 30px; } .gallery-slide { flex-basis: 88%; } .gallery-slide img { height: 280px; } .gallery-rail { margin-right: -20px; padding-right: 20px; } .gallery-heading { display: block; } .gallery-heading .services-controls { justify-content: flex-end; margin-top: 20px; } .gallery-foot { flex-wrap: wrap; } .gallery-foot > span:nth-child(2) { display: none; } #areas button { padding-inline: 18px; } #areas button .font-bold { font-size: 21px; } .premium-included ul { gap: 0 20px; } .gallery-caption { min-height: 76px; line-height: 1.7; } }
@media(prefers-reduced-motion:reduce) { .gallery-slide img { transition:none; } }
[data-testid="button-step1-next"],[data-testid="button-step2-next"],[data-testid="button-step3-submit"] { background: #ad4e25 !important; border-radius: 6px; }
[data-testid="link-mobile-sticky-call"] { background: #10283f; font-size: 14px; font-weight: 500; }
[data-testid="link-mobile-sticky-quote"] { background: #ad4e25; font-size: 14px; font-weight: 600; }
[data-testid="link-mobile-sticky-call"] svg { fill: none; width: 17px; }
@media(max-width:767px) { footer { padding-bottom: 88px !important; } div:has(> [data-testid="link-mobile-sticky-call"]) { padding-bottom: env(safe-area-inset-bottom); background: #10283f; } }