/* A property folio connects the opening to the work Bunkfox holds. */
.folio-hero { min-height: 100svh; position: relative; padding: 140px 0 0; overflow: clip; background: #fff; isolation: isolate; display: flex; flex-direction: column; align-items: center; }
.folio-hero:before { content: ''; position: absolute; inset: 32% 0 0; pointer-events: none; z-index: -2; background: radial-gradient(ellipse at 25% 66%,#e7f0e680,transparent 34%),radial-gradient(ellipse at 75% 70%,#e8e3f275,transparent 36%); }
.folio-horizon { position: absolute; z-index: -1; top: 190px; left: 50%; width: 1420px; height: 810px; transform: translateX(-50%); border: 1px solid #e9e5ef80; border-radius: 50%; pointer-events: none; }
.folio-horizon:before,.folio-horizon:after { content: ''; position: absolute; inset: 35px; border: 1px solid #e9e5ef60; border-radius: 50%; }
.folio-horizon:after { inset: 75px; border-style: dashed; }
.folio-hero-copy { text-align: center; position: relative; z-index: 1; }
.folio-hero-copy .eyebrow { justify-content: center; margin: 0 0 20px; font-size: 9px; }
.folio-hero h1 { font: 550 clamp(60px,6.3vw,94px)/1.05 Manrope,sans-serif; letter-spacing: -.065em; color: #0e0e12; margin: 0; }
.folio-hero h1 span { position: relative; }
.folio-hero h1 span:after { content:''; position: absolute; height: 6px; background: #d5debb; left: 28%; right: 1%; bottom: -9px; transform: rotate(-1deg); border-radius: 50%; }
.folio-hero-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.8; color: #504b56; margin: 26px 0 0; }
.folio-hero .actions { justify-content: center; display: flex; align-items: center; gap: 30px; margin-top: 26px; }
.folio-hero .btn { padding: 15px 21px; font-size: 12px; }
.folio-hero .text-link { font-size: 12px; }
.folio-trial-note { display: block; font-size: 9px; color: #6b6571; margin-top: 15px; }
.property-folio { max-width: 1020px; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 24px; position: relative; margin-top: 52px; padding: 35px 0 20px; align-items: start; }
.folio-spine { position: absolute; left: 25px; right: 25px; top: 0; display: flex; align-items: center; gap: 16px; color: #6e6678; font: 8px/1.5 Space,monospace; letter-spacing: 1.3px; }
.folio-spine i { height: 1px; background: #ded9e5; flex: 1; }
.property-folio > a { display: block; position: relative; text-align: left; color: #19151f; box-shadow: 0 24px 38px -24px #2b21313d,0 4px 10px #30263706; transition: transform .35s,box-shadow .35s; }
.property-folio > a:hover { transform: translateY(-8px); box-shadow: 0 30px 40px -22px #2b213149; }
.folio-paper-label { display: flex; align-items: center; justify-content: space-between; font: 8px/1.5 Space,monospace; letter-spacing: 1px; gap: 10px; color: #625a6b; }
.folio-paper-label > span { display: inline-flex; align-items: center; gap: 7px; }
.folio-paper-label .icon { width: 14px; height: 14px; }
.folio-room { background: #f5f6f1; border: 1px solid #e1e5d9; border-radius: 10px; padding: 21px; transform: rotate(-5deg); margin-top: 25px; }
.folio-room-plan { display: flex; gap: 20px; border: 1px solid #cfd7c5; border-bottom: 0; padding: 22px 19px 18px; margin-top: 20px; position: relative; }
.folio-room-plan:after { content: ''; position: absolute; height: 1px; background: #cfd7c5; bottom: 0; left: 0; right: 34%; }
.folio-plan-divider { flex: 1; border-left: 1px dashed #d3daca; }
.folio-bed { width: 57px; font-size: 8px; text-align: center; color: #536046; }
.folio-bed > i { display: block; height: 72px; border: 1px solid #90a47d; border-radius: 5px; background: #d9e4cc; box-shadow: inset 0 -4px #bccfa9; position: relative; margin-bottom: 8px; }
.folio-bed > i:before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 17px; background: #fbfcf9; border: 1px solid #c1ceaf; border-radius: 3px; }
.folio-bed.vacant > i { background: transparent; border-style: dashed; box-shadow: none; }
.folio-bed.vacant > i:before { background: #fff8; }
.folio-room-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 10px; }
.folio-room-bottom strong { font-size: 24px; display: inline-block; margin-left: 3px; font-weight: 550; letter-spacing: -1px; }
.folio-chip { border: 1px solid #d4ddc9; border-radius: 5px; padding: 5px 7px; color: #4c603e; font-size: 8px; background: #fff8; }
.folio-rent { background: #fffefb; border: 1px solid #e6e1d6; padding: 22px 25px 19px; transform: rotate(1deg); }
.folio-rent:after { content: ''; height: 9px; position: absolute; top: 100%; left: -1px; right: -1px; background: linear-gradient(135deg,#fffefb 50%,transparent 50%) 0 0/12px 12px; filter: drop-shadow(0 1px #ded9d0); }
.folio-rent-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 20px 0 19px; }
.folio-rent-total > div > span { display: block; font-size: 9px; color: #615b68; }
.folio-rent-total strong { display: block; font-size: 42px; font-weight: 550; line-height: 1.3; letter-spacing: -2px; margin-top: 3px; }
.folio-rent-stamp { font-size: 9px; color: #70588c; border: 1px solid #cfc1df; padding: 5px 10px; border-radius: 4px; transform: rotate(-8deg); background: #f6f2fb; white-space: nowrap; }
.folio-rent-line { display: flex; justify-content: space-between; gap: 14px; font-size: 9px; padding: 7px 0; border-top: 1px dashed #ded7cb; }
.folio-rent-line b { font-weight: 550; }
.folio-rent > small { font-size: 7px; color: #6b635c; display: block; margin: 7px 0 0; }
.folio-rent-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 7px; color: #5f574d; }
.folio-barcode { display: block; width: 69px; height: 19px; background: repeating-linear-gradient(90deg,#655f58 0 1px,transparent 1px 3px,#655f58 3px 5px,transparent 5px 6px,#655f58 6px 7px,transparent 7px 10px); opacity: .65; }
.folio-request { border-radius: 10px; border: 1px solid #ded8eb; background: #f4f0f9; padding: 21px; transform: rotate(5deg); margin-top: 25px; }
.folio-request h2 { font-size: 26px; line-height: 1.25; letter-spacing: -1px; font-weight: 550; color: #1f1928; margin: 21px 0 18px; }
.folio-request-person { display: flex; gap: 9px; align-items: center; font-size: 9px; }
.folio-request-person > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e4dcef; color: #65507c; font-size: 9px; }
.folio-request-person strong { font-weight: 550; }
.folio-request-person small { display: block; font-size: 8px; margin-top: 3px; color: #6e617a; }
.folio-request-update { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ded6e8; font-size: 9px; }
.folio-request-update .icon { width: 13px; height: 13px; }
.folio-request-update small { display: block; font-size: 7px; margin-top: 4px; color: #70617d; }
.folio-key { position: absolute; top: 152px; left: -69px; width: 42px; height: 79px; border: 1px solid #d5dcc2; border-radius: 18px 18px 8px 8px; background: #ecf1d9; color: #52643f; transform: rotate(-16deg); padding: 22px 0 0; text-align: center; font-size: 18px; box-shadow: 0 12px 20px -10px #29272440; }
.folio-key:before { content: ''; position: absolute; left: 50%; top: -20px; width: 29px; height: 35px; border-radius: 50%; border: 2px solid #b8bfaa; transform: translateX(-50%); }
.folio-key small { display: block; font: 8px Space,monospace; margin-top: 5px; }
.folio-hero-foot { padding: 28px 0 25px; margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #655e6b; gap: 15px; }
.folio-hero-foot a { display: flex; align-items: center; gap: 15px; color: #26212d; }
.folio-hero-foot .icon { width: 13px; height: 13px; }
/* Phone previews never own a vertical scroll area. The page controls the gallery. */
.resident-screen-content { overflow: clip; min-height: 0; scrollbar-width: none; }
.resident-rail { overflow: hidden; overscroll-behavior: auto; touch-action: pan-y; scroll-snap-type: none; }
.resident-screen { height: 584px; }
@media(min-width: 1051px) and (max-height: 800px) { .resident-screen { height: 584px; } .resident-screen-content { padding: 17px 19px; } .res-notice { padding: 17px; } .res-notice h4 { margin: 14px 0 10px; } }
@media(max-width: 1100px) { .property-folio { width: calc(100% - 140px); gap: 17px; } .folio-key { left: -44px; } .folio-room,.folio-request { padding: 17px; } .folio-rent { padding: 20px; } .folio-bed { width: 45px; } .folio-room-plan { padding: 18px 12px; gap: 12px; } .folio-rent-total strong { font-size: 37px; } .folio-request h2 { font-size: 24px; } }
@media(min-width: 901px) and (max-height: 800px) { .folio-hero { padding-top: 117px; } .folio-hero h1 { font-size: 65px; } .folio-hero-copy .eyebrow { margin-bottom: 13px; } .folio-hero-copy > p:not(.eyebrow) { font-size: 13px; margin-top: 20px; } .folio-hero .actions { margin-top: 19px; } .property-folio { margin-top: 33px; max-width: 910px; } .folio-hero-foot { padding-top: 24px; } .folio-rent-total { margin: 13px 0; } .folio-room-plan { margin-top: 13px; padding-top: 13px; padding-bottom: 13px; } .folio-bed > i { height: 55px; } .folio-request h2 { margin: 15px 0; font-size: 23px; } }
@media(max-width: 900px) { .folio-hero { padding-top: 145px; } .folio-hero h1 { font-size: 66px; } .property-folio { width: calc(100% - 85px); gap: 14px; margin-top: 50px; } .folio-room,.folio-request { padding: 14px; } .folio-rent { padding: 17px; } .folio-paper-label { font-size: 6px; } .folio-paper-label .icon { width: 11px; height: 11px; } .folio-request h2 { font-size: 21px; } .folio-room-plan { gap: 8px; padding: 17px 8px; } .folio-bed { width: 38px; } .folio-chip { font-size: 6px; padding: 4px; } .folio-rent-total strong { font-size: 31px; } .folio-rent-stamp { font-size: 7px; padding: 4px 6px; } .folio-rent-line { font-size: 7px; } .folio-rent-foot { font-size: 6px; } .folio-spine { font-size: 6px; gap: 8px; } .folio-key { display: none; } .folio-hero-foot { margin-top: 25px; } .folio-hero-foot > span:last-child { display: none; } .resident-screen { height: 584px; } }
@media(max-width: 600px) { .folio-hero { padding-top: 122px; } .folio-hero-copy { width: calc(100% - 34px); } .folio-hero h1 { font-size: clamp(42px,9.8vw,59px); letter-spacing: -.058em; line-height: 1.13; } .folio-hero h1 br { display: block; } .folio-hero-copy .eyebrow { font-size: 7px; letter-spacing: 1.1px; margin-bottom: 18px; } .folio-hero h1 span:after { height: 4px; bottom: -6px; left: 15%; } .folio-hero-copy > p:not(.eyebrow) { font-size: 12px; max-width: 300px; margin: 22px auto 0; } .folio-hero-copy > p br { display: none; } .folio-hero .actions { flex-direction: column; gap: 18px; margin-top: 24px; } .folio-hero .btn { font-size: 11px; } .folio-hero .text-link { font-size: 10px; } .folio-trial-note { font-size: 8px; margin-top: 18px; } .property-folio { width: calc(100% - 50px); max-width: 420px; grid-template-columns: 1fr 1fr; margin-top: 39px; gap: 18px; padding-top: 28px; } .folio-spine { left: 0; right: 0; font-size: 5px; letter-spacing: .7px; } .folio-spine > span:last-child,.folio-spine > i:last-of-type { display: none; } .folio-room { grid-column: 1; margin-top: 0; transform: rotate(-4deg); } .folio-request { grid-column: 2; margin-top: 9px; transform: rotate(4deg); } .folio-rent { grid-row: 2; grid-column: 1/-1; margin: -3px 25px 0; transform: rotate(-1deg); padding: 21px; } .folio-rent-total strong { font-size: 40px; } .folio-rent-line { font-size: 9px; } .folio-rent-foot { font-size: 7px; } .folio-rent-total > div > span { font-size: 9px; } .folio-paper-label { font-size: 6px; } .folio-room,.folio-request { padding: 13px; } .folio-request h2 { font-size: 20px; margin: 20px 0 14px; } .folio-request-person { font-size: 8px; } .folio-request-person > span { width: 24px; height: 24px; font-size: 7px; } .folio-request-update { font-size: 7px; gap: 5px; margin-top: 14px; padding-top: 12px; } .folio-request-update small { font-size: 6px; } .folio-room-plan { margin-top: 15px; padding: 18px 8px; gap: 6px; } .folio-bed { width: 36px; font-size: 6px; } .folio-bed > i { height: 63px; } .folio-room-bottom { display: block; margin-top: 10px; } .folio-room-bottom > span { display: inline-block; } .folio-room-bottom > span:first-child { font-size: 8px; margin-right: 8px; } .folio-room-bottom strong { font-size: 20px; } .folio-chip { margin-top: 4px; font-size: 6px; } .folio-hero-foot { width: calc(100% - 42px); margin-top: 10px; font-size: 8px; flex-direction: column; padding: 16px 0 30px; gap: 17px; } .resident-screen { height: 584px; } }
@media(prefers-reduced-motion: reduce) { .property-folio > a { transition: none; } }
.property-ribbon { overflow: clip; padding: 26px 0; margin: 5px 0 35px; border-block: 1px solid #e8e5ed; background: #fbfafc; }
.property-ribbon-track { width: max-content; display: flex; animation: property-ribbon 40s linear infinite; }
.property-ribbon-track > div { display: flex; align-items: center; gap: 50px; padding-right: 50px; }
.property-ribbon span { font-size: 32px; letter-spacing: -1.2px; line-height: 1.3; font-weight: 500; color: #302b38; white-space: nowrap; }
.property-ribbon i { font-size: 24px; font-style: normal; color: #b4a3cf; }
.property-ribbon i:nth-of-type(2) { color: #8cae9c; }
.property-ribbon i:nth-of-type(3) { color: #b0b47d; }
@keyframes property-ribbon { to { transform: translateX(-50%); } }
.property-ribbon:hover .property-ribbon-track, body.motion-off .property-ribbon-track { animation-play-state: paused; }
@media(max-width:600px) { .property-ribbon { padding: 21px 0; margin-block: 0 20px; } .property-ribbon span { font-size: 25px; letter-spacing: -.8px; } .property-ribbon-track > div { gap: 30px; padding-right: 30px; } .property-ribbon i { font-size: 18px; } }
@media(prefers-reduced-motion:reduce) { .property-ribbon-track { animation: none; } }
.resident-screen .res-page-title h3 { margin-bottom: 18px; }
.resident-screen .res-conversation { padding-top: 14px; gap: 10px; }
.resident-screen .res-message { padding: 12px; }
.resident-screen .res-notice { padding: 17px; margin-bottom: 14px; }
.resident-screen .res-notice-icon { margin-bottom: 10px; }
@media(max-width: 350px) { .resident-screen-content { padding-inline: 15px; } .resident-screen .res-page-title h3 { font-size: 22px; } .resident-screen .res-notice { padding: 14px; } }
.property-ribbon { position: relative; }
.property-ribbon.paused .property-ribbon-track { animation-play-state: paused; }
.ribbon-toggle { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); border: 1px solid #e0dbe9; border-radius: 50%; background: #fffffff2; backdrop-filter: blur(12px); width: 34px; height: 34px; display: grid; place-items: center; color: #51465e; box-shadow: 0 0 20px 10px #fbfafc; }
.ribbon-toggle .icon { width: 12px; height: 12px; }
body.motion-off .ribbon-toggle { display: none; }
@media(prefers-reduced-motion: reduce) { .ribbon-toggle { display: none; } }
@media(max-width:350px) { .resident-screen .res-payment { padding-bottom: 16px; } }