/* ===========================================================
   HOMEPAGE HERO + QUICK PROPERTY SEARCH (index.html only)
   Loaded only by index.html. All selectors use the page-unique
   .hh-* prefix, so nothing here reaches other pages, and the old
   .hero / .hero-search rules in style.css no longer match anything
   on this page (they are left in place, untouched).
   Brand tokens only: emerald #0F3B2E, gold #D4AF37, ink #111827,
   body #4b5563, hairline rgba(17,24,39,.1).
=========================================================== */

.hh-hero{
    position:relative;
    overflow:hidden;
    min-height:clamp(640px, calc(100vh - 72px), 860px);
    display:flex;
    align-items:flex-end;
    background:#0F3B2E url("../images/hero-poster.jpg") center/cover no-repeat;
    color:#ffffff;
}
.hh-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}
/* Left-weighted shade for text legibility, plus a deeper floor
   under the search panel; the top-right keeps the image visible. */
.hh-shade{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg, rgba(6,22,17,.78) 0%, rgba(6,22,17,.5) 42%, rgba(6,22,17,.12) 75%),
        linear-gradient(180deg, rgba(6,22,17,0) 45%, rgba(6,22,17,.55) 100%);
}
.hh-hero .home-app-hero-post-btn{
    z-index:4;
}

.hh-inner{
    position:relative;
    z-index:2;
    width:90%;
    max-width:1200px;
    margin:0 auto;
    padding:96px 0 56px;
}

/* ---------- Copy ---------- */
.hh-copy{
    max-width:700px;
    margin-bottom:34px;
}
.hh-eyebrow{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 18px;
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#D4AF37;
}
.hh-eyebrow::after{
    content:"";
    width:64px;
    height:1px;
    background:currentColor;
    opacity:.7;
}
.hh-title{
    font-family:'Montserrat',sans-serif;
    font-size:clamp(40px, 4.6vw, 60px);
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.3px;
    color:#ffffff;
    margin:0 0 18px;
    text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hh-subtitle{
    font-size:18px;
    line-height:1.7;
    font-weight:400;
    color:rgba(255,255,255,.88);
    max-width:600px;
    margin:0;
}

/* ---------- Search panel ---------- */
.hh-search{
    position:relative;
}
.hh-tabs{
    display:inline-flex;
    gap:4px;
    padding:5px;
    border-radius:12px 12px 0 0;
    background:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.22);
    border-bottom:none;
}
.hh-tab{
    border:none;
    background:transparent;
    color:#ffffff;
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:600;
    padding:10px 20px;
    border-radius:8px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}
.hh-tab:hover{
    background:rgba(255,255,255,.12);
}
.hh-tab.is-active{
    background:#ffffff;
    color:#0F3B2E;
}
.hh-tab:focus-visible{
    outline:2px solid #D4AF37;
    outline-offset:2px;
}

.hh-form{
    background:#ffffff;
    color:#111827;
    border-radius:0 16px 16px 16px;
    padding:22px 24px 16px;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.hh-row{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,.9fr) auto;
    gap:14px;
    align-items:end;
}
.hh-field{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.hh-field label{
    font-family:'Montserrat',sans-serif;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#0F3B2E;
    margin-bottom:8px;
}
.hh-control{
    position:relative;
    display:flex;
    align-items:center;
    height:50px;
    border:1px solid rgba(17,24,39,.14);
    border-radius:10px;
    background:#ffffff;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.hh-control:focus-within{
    border-color:#0F3B2E;
    box-shadow:0 0 0 3px rgba(15,59,46,.12);
}
.hh-ico{
    flex:0 0 auto;
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.hh-control > .hh-ico{
    margin-left:14px;
    color:#0F3B2E;
    opacity:.8;
    pointer-events:none;
}
.hh-control input,
.hh-control select{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    height:100%;
    border:none;
    background:transparent;
    font-family:inherit;
    font-size:15px;
    color:#111827;
    padding:0 14px 0 10px;
    outline:none;
    border-radius:10px;
}
.hh-control > input:first-child,
.hh-control > select:first-child{
    padding-left:14px;
}
.hh-control select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:34px;
    cursor:pointer;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/14px no-repeat;
}
.hh-control select:disabled{
    cursor:not-allowed;
    color:#9ca3af;
    opacity:1;
}
.hh-control input::placeholder{
    color:#9ca3af;
}
.hh-control-split{
    padding:0 4px;
}
.hh-control-split select,
.hh-control-split input{
    padding-left:10px !important;
}
.hh-control-split select{
    padding-right:28px;
    background-position:right 8px center;
}
.hh-split-dash{
    color:#9ca3af;
    flex:0 0 auto;
    padding:0 2px;
}
/* Hide number spinners in the compact fields */
.hh-control input[type="number"]::-webkit-outer-spin-button,
.hh-control input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.hh-control input[type="number"]{
    -moz-appearance:textfield;
}

.hh-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:50px;
    padding:0 26px;
    border:none;
    border-radius:10px;
    background:#D4AF37;
    color:#111111;
    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}
.hh-submit:hover{
    background:#c89a2d;
}
.hh-submit:focus-visible{
    outline:2px solid #0F3B2E;
    outline-offset:3px;
}
.hh-submit .hh-ico{
    stroke-width:2.2;
}

/* ---------- Footer row: popular areas + advanced toggle ---------- */
.hh-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(17,24,39,.08);
}
.hh-popular{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 14px;
    font-size:13.5px;
    min-width:0;
}
.hh-popular-label{
    color:#6b7280;
}
.hh-popular a{
    color:#0F3B2E;
    font-weight:500;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
}
.hh-popular a:hover{
    border-bottom-color:#D4AF37;
}
.hh-adv-toggle{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:none;
    background:none;
    padding:6px 2px;
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:600;
    color:#0F3B2E;
    cursor:pointer;
}
.hh-adv-toggle:hover span:first-of-type{
    text-decoration:underline;
    text-underline-offset:3px;
}
.hh-adv-toggle:focus-visible{
    outline:2px solid #D4AF37;
    outline-offset:2px;
    border-radius:4px;
}
.hh-chev{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .2s ease;
}
.hh-adv-toggle.is-open .hh-chev{
    transform:rotate(180deg);
}
.hh-adv-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:#0F3B2E;
    color:#ffffff;
    font-size:11.5px;
    font-weight:700;
}
.hh-adv-count[hidden]{
    display:none;
}

/* ---------- Advanced panel ---------- */
.hh-advanced{
    margin-top:18px;
    padding-top:18px;
    border-top:1px dashed rgba(17,24,39,.14);
}
.hh-advanced[hidden]{
    display:none;
}
.hh-adv-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    align-items:end;
}
.hh-adv-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:50px;
}
.hh-link-btn{
    border:none;
    background:none;
    padding:6px 2px;
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    color:#6b7280;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
}
.hh-link-btn:hover{
    color:#0F3B2E;
}
.hh-adv-submit{
    display:none;
}

/* ---------- Narrow desktop / tablet landscape ---------- */
@media (max-width:1180px){
    html:not(.is-mobile) .hh-row{
        grid-template-columns:repeat(4,minmax(0,1fr));
        grid-auto-flow:row dense;
    }
    html:not(.is-mobile) .hh-field-location,
    html:not(.is-mobile) .hh-field-price,
    html:not(.is-mobile) .hh-submit{
        grid-column:span 2;
    }
}

/* ---------- Mobile / tablet touch ----------
   Kept in sync for the JS is-mobile path and the JS-disabled
   narrow-window fallback, per style.css convention. */
html.is-mobile .hh-hero{ min-height:0; align-items:stretch; }
html.is-mobile .hh-shade{
    background:
        linear-gradient(180deg, rgba(6,22,17,.45) 0%, rgba(6,22,17,.55) 40%, rgba(6,22,17,.82) 100%);
}
html.is-mobile .hh-inner{ width:100%; padding:64px 16px 26px; }
html.is-mobile .hh-copy{ margin-bottom:22px; padding:0 4px; }
html.is-mobile .hh-eyebrow{ font-size:11.5px; letter-spacing:3px; margin-bottom:12px; }
html.is-mobile .hh-eyebrow::after{ width:40px; }
html.is-mobile .hh-title{ font-size:31px; line-height:1.18; margin-bottom:12px; }
html.is-mobile .hh-subtitle{ font-size:15px; line-height:1.65; }
html.is-mobile .hh-tabs{ display:flex; width:100%; border-radius:12px 12px 0 0; }
html.is-mobile .hh-tab{ flex:1 1 0; padding:10px 6px; font-size:13.5px; }
html.is-mobile .hh-form{ border-radius:0 0 16px 16px; padding:18px 16px 14px; }
html.is-mobile .hh-row{ grid-template-columns:1fr 1fr; gap:12px; grid-auto-flow:row dense; }
html.is-mobile .hh-field-location,
html.is-mobile .hh-field-price,
html.is-mobile .hh-submit{ grid-column:1 / -1; }
html.is-mobile .hh-field label{ font-size:10.5px; margin-bottom:6px; }
html.is-mobile .hh-control{ height:48px; }
html.is-mobile .hh-control input,
html.is-mobile .hh-control select{ font-size:16px; }
html.is-mobile .hh-submit{ width:100%; height:50px; margin-top:2px; }
html.is-mobile .hh-foot{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
html.is-mobile .hh-adv-toggle{ justify-content:center; padding:8px 2px; }
html.is-mobile .hh-popular{ justify-content:center; font-size:13px; gap:4px 12px; }
html.is-mobile .hh-adv-grid{ grid-template-columns:1fr 1fr; gap:12px; grid-auto-flow:row dense; }
html.is-mobile .hh-adv-grid > .hh-field:first-child,
html.is-mobile .hh-adv-grid > .hh-field:nth-child(3){ grid-column:1 / -1; }
html.is-mobile .hh-adv-actions{ grid-column:1 / -1; flex-direction:column-reverse; align-items:stretch; gap:6px; height:auto; }
html.is-mobile .hh-adv-submit{ display:inline-flex; width:100%; }
html.is-mobile .hh-hero .home-app-hero-post-btn{ top:14px; right:14px; }

@media (max-width:768px){
    html:not(.is-mobile) .hh-hero{ min-height:0; align-items:stretch; }
    html:not(.is-mobile) .hh-shade{
        background:linear-gradient(180deg, rgba(6,22,17,.45) 0%, rgba(6,22,17,.55) 40%, rgba(6,22,17,.82) 100%);
    }
    html:not(.is-mobile) .hh-inner{ width:100%; padding:64px 16px 26px; }
    html:not(.is-mobile) .hh-copy{ margin-bottom:22px; padding:0 4px; }
    html:not(.is-mobile) .hh-eyebrow{ font-size:11.5px; letter-spacing:3px; margin-bottom:12px; }
    html:not(.is-mobile) .hh-title{ font-size:31px; line-height:1.18; margin-bottom:12px; }
    html:not(.is-mobile) .hh-subtitle{ font-size:15px; line-height:1.65; }
    html:not(.is-mobile) .hh-tabs{ display:flex; width:100%; }
    html:not(.is-mobile) .hh-tab{ flex:1 1 0; padding:10px 6px; font-size:13.5px; }
    html:not(.is-mobile) .hh-form{ border-radius:0 0 16px 16px; padding:18px 16px 14px; }
    html:not(.is-mobile) .hh-row{ grid-template-columns:1fr 1fr; gap:12px; grid-auto-flow:row dense; }
    html:not(.is-mobile) .hh-field-location,
    html:not(.is-mobile) .hh-field-price,
    html:not(.is-mobile) .hh-submit{ grid-column:1 / -1; }
    html:not(.is-mobile) .hh-submit{ width:100%; }
    html:not(.is-mobile) .hh-foot{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
    html:not(.is-mobile) .hh-adv-toggle{ justify-content:center; }
    html:not(.is-mobile) .hh-popular{ justify-content:center; }
    html:not(.is-mobile) .hh-adv-grid{ grid-template-columns:1fr 1fr; gap:12px; grid-auto-flow:row dense; }
    html:not(.is-mobile) .hh-adv-grid > .hh-field:first-child,
    html:not(.is-mobile) .hh-adv-grid > .hh-field:nth-child(3){ grid-column:1 / -1; }
    html:not(.is-mobile) .hh-adv-actions{ grid-column:1 / -1; flex-direction:column-reverse; align-items:stretch; gap:6px; height:auto; }
    html:not(.is-mobile) .hh-adv-submit{ display:inline-flex; width:100%; }
}

/* Tablet touch devices (is-mobile, 700px+): give the fields more room. */
@media (min-width:700px){
    html.is-mobile .hh-inner{ width:88%; padding:80px 0 34px; }
    html.is-mobile .hh-title{ font-size:40px; }
    html.is-mobile .hh-subtitle{ font-size:16.5px; }
    html.is-mobile .hh-tabs{ display:inline-flex; width:auto; }
    html.is-mobile .hh-tab{ flex:0 0 auto; padding:10px 18px; }
    html.is-mobile .hh-form{ border-radius:0 16px 16px 16px; }
    html.is-mobile .hh-row{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:row dense; }
    html.is-mobile .hh-field-location{ grid-column:span 2; }
    html.is-mobile .hh-field-price{ grid-column:span 2; }
    html.is-mobile .hh-submit{ grid-column:span 2; }
    html.is-mobile .hh-foot{ flex-direction:row; align-items:center; }
    html.is-mobile .hh-popular{ justify-content:flex-start; }
    html.is-mobile .hh-adv-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
    html.is-mobile .hh-adv-grid > .hh-field:first-child{ grid-column:span 2; }
    html.is-mobile .hh-adv-grid > .hh-field:nth-child(3){ grid-column:span 2; }
    html.is-mobile .hh-adv-actions{ grid-column:span 2; flex-direction:row; align-items:center; justify-content:flex-end; height:48px; }
    html.is-mobile .hh-adv-submit{ display:none; }
}

/* ===========================================================
   GLASS TREATMENT (search panel only)
   Architectural frosted glass: a light white/emerald tint with a
   moderate blur, so the hero image stays visible through the panel.
   Labels and links switch to light tones for contrast on the glass;
   the input fields themselves stay near-white so typed values and
   dropdowns remain easy to read. Layout, fields and behaviour are
   unchanged.
=========================================================== */
.hh-tabs,
.hh-form{
    background:linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(15,59,46,.18) 100%);
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    backdrop-filter:blur(16px) saturate(135%);
    border:1px solid rgba(255,255,255,.28);
}
.hh-tabs{
    border-bottom:none;
}
.hh-form{
    color:#ffffff;
    box-shadow:
        0 18px 48px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.22);
}
/* The tab strip and the panel read as one sheet of glass */
.hh-tab.is-active{
    background:rgba(255,255,255,.92);
    color:#0F3B2E;
}
.hh-field label{
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.hh-control{
    background:rgba(255,255,255,.9);
    border-color:rgba(255,255,255,.55);
}
.hh-control:focus-within{
    background:#ffffff;
    border-color:#D4AF37;
    box-shadow:0 0 0 3px rgba(212,175,55,.28);
}
.hh-submit{
    box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.hh-foot{
    border-top-color:rgba(255,255,255,.2);
}
.hh-popular-label{
    color:rgba(255,255,255,.72);
}
.hh-popular a,
.hh-adv-toggle{
    color:#ffffff;
}
.hh-popular a:hover{
    border-bottom-color:#D4AF37;
}
.hh-adv-count{
    background:#D4AF37;
    color:#0F3B2E;
}
.hh-advanced{
    border-top-color:rgba(255,255,255,.24);
}
.hh-link-btn{
    color:rgba(255,255,255,.8);
}
.hh-link-btn:hover{
    color:#ffffff;
}

/* Browsers without backdrop-filter: a slightly deeper emerald tint so
   the white text keeps its contrast without the blur. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .hh-tabs,
    .hh-form{
        background:rgba(15,59,46,.72);
    }
}

/* ===========================================================
   ACCOUNT UTILITY — My Listings / My Searches (homepage only)
   Now placed after Meet Our Leadership as a secondary, compact
   band: small label, smaller segmented control, and an inline
   sign-in / empty state so it never leaves a large blank area.
   Only visual scale and spacing change here; the IDs, tabs and
   js/home-app-experience.js behaviour are untouched.
=========================================================== */
.home-app-segment-section{
    background:#faf9f7;
    padding:34px 0 36px;
}
.home-app-segment-section .container{
    width:90%;
    max-width:900px;
    margin:0 auto;
}
.home-app-segment-label{
    margin:0 0 12px;
    text-align:center;
    font-family:'Montserrat',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#6b7280;
}
.home-app-segment-section .home-app-segment-control{
    max-width:360px;
    margin:0 auto 16px;
    padding:4px;
}
.home-app-segment-section .home-app-segment-btn{
    padding:8px 10px;
    font-size:14px;
}
/* Sign-in prompt: one compact row (text + button) instead of a tall
   centred card. */
.home-app-segment-section .home-app-signin-prompt{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    max-width:640px;
    margin:0 auto;
    padding:14px 18px;
    text-align:left;
    border-radius:12px;
    border:1px solid rgba(17,24,39,.08);
}
.home-app-segment-section .home-app-signin-prompt p{
    margin:0;
    font-size:14.5px;
    line-height:1.5;
    color:#4b5563;
}
.home-app-segment-section .home-app-signin-btn{
    flex:0 0 auto;
    padding:9px 18px;
    font-size:14px;
    white-space:nowrap;
}
/* Empty / loading / error states: a single short line. */
.home-app-segment-section .home-app-empty,
.home-app-segment-section .home-app-loading{
    margin:0;
    padding:6px 0 0;
    font-size:14.5px;
}
.home-app-segment-section .home-app-recent-chips{
    justify-content:center;
}
.home-app-segment-section .home-app-recent-empty{
    grid-column:1 / -1;
    display:block;
    text-align:center;
    color:#6b7280;
    font-size:14.5px;
    padding:6px 0 0;
}

html.is-mobile .home-app-segment-section{ padding:26px 0 28px; }
html.is-mobile .home-app-segment-section .container{ width:100%; padding:0 16px; }
html.is-mobile .home-app-segment-section .home-app-signin-prompt{
    flex-direction:column;
    text-align:center;
    gap:10px;
    padding:14px 16px;
}
@media (max-width:768px){
    html:not(.is-mobile) .home-app-segment-section{ padding:26px 0 28px; }
    html:not(.is-mobile) .home-app-segment-section .home-app-signin-prompt{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }
}

/* ===========================================================
   MASTER CONTENT GRID — Explore Properties / Recent Searches /
   Future Properties (homepage only)
   These three sections now share ONE container: exactly the same
   width rules as the hero search panel above (.hh-inner: 90% /
   1200px on desktop, 88% on touch tablets, 16px page padding on
   phones), so every heading, link, chip row and card sits on the
   same left and right lines as the search panel. This replaces
   the three sections' previously different container paddings
   (style.css rules left in place; overridden here, index only).
   Layout uses grid/flex only -- no absolute positioning.
=========================================================== */
.home-app-shortcuts-section .container,
.home-app-recent-section .container,
.home-app-future-section .container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
    padding:0;
}

/* One continuous band, even vertical rhythm */
.home-app-shortcuts-section{ padding:44px 0 26px; }
.home-app-recent-section{ padding:20px 0; }
.home-app-future-section{ padding:30px 0 52px; }

/* Shared section heading style (matches "Future Properties") */
.home-explore-title,
.home-app-future-heading h2{
    font-family:'Montserrat',sans-serif;
    font-size:26px;
    font-weight:600;
    line-height:1.25;
    color:#0F3B2E;
    margin:0;
}
.home-explore-title{
    margin-bottom:18px;
}

/* ---------- Explore Properties: equal-width tiles ---------- */
.home-app-shortcuts-section .home-app-shortcuts-row{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    padding:0;
    overflow:visible;
    justify-content:stretch;
}
.home-app-shortcuts-section .home-app-shortcut{
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:12px;
    min-width:0;
    height:64px;
    padding:0 16px;
    background:#ffffff;
    border:1px solid #e5e3da;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    color:#111827;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.home-app-shortcuts-section .home-app-shortcut-icon{
    flex:0 0 auto;
    width:40px;
    height:40px;
    background:#f7f6f2;
    border-color:#eceae2;
    font-size:15px;
}
.home-app-shortcuts-section .home-app-shortcut:hover{
    border-color:#0F3B2E;
    box-shadow:0 4px 14px rgba(15,59,46,.08);
}
.home-app-shortcuts-section .home-app-shortcut:hover .home-app-shortcut-icon{
    background:#0F3B2E;
    border-color:#0F3B2E;
    color:#D4AF37;
}
.home-app-shortcuts-section .home-app-shortcut:focus-visible{
    outline:2px solid #D4AF37;
    outline-offset:2px;
}

/* ---------- Recent Searches: label | chips | link ---------- */
.home-app-recent-section .home-app-recent-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:18px;
    row-gap:10px;
}
.home-app-recent-section .home-app-recent-label{
    font-size:14px;
    color:#111827;
}
.home-app-recent-section .home-app-recent-label i{
    color:#0F3B2E;
}
.home-app-recent-section .home-app-recent-empty{
    font-size:14px;
    color:#6b7280;
}
/* The chip strip shares a max-width/auto-margin rule with the account
   panel's chip grid in style.css; reset it here so chips (and the
   "No recent searches yet." line) start right after the label. */
.home-app-recent-section .home-app-recent-chips{
    max-width:none;
    margin:0;
    justify-content:flex-start;
}
.home-app-recent-all,
.home-app-see-all{
    justify-self:end;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    color:#0F3B2E;
    text-decoration:underline;
    text-underline-offset:3px;
    padding:0;
}
.home-app-recent-all:focus-visible,
.home-app-see-all:focus-visible{
    outline:2px solid #D4AF37;
    outline-offset:3px;
    border-radius:3px;
}

/* ---------- Future Properties heading ---------- */
.home-app-future-section .home-app-future-heading{
    align-items:flex-end;
    gap:16px;
    margin-bottom:20px;
}
.home-app-future-section .home-app-future-heading p{
    margin-top:4px;
}

/* ---------- Tablet (non-touch 769-1024) ---------- */
@media (max-width:1024px){
    html:not(.is-mobile) .home-app-shortcuts-section .home-app-shortcut{
        flex-direction:column;
        justify-content:center;
        gap:6px;
        height:92px;
        padding:0 8px;
        font-size:14px;
    }
}

/* ---------- Touch devices (phones + tablets) ---------- */
html.is-mobile .home-app-shortcuts-section .container,
html.is-mobile .home-app-recent-section .container,
html.is-mobile .home-app-future-section .container{
    width:100%;
    padding:0 16px;
}
html.is-mobile .home-app-shortcuts-section{ padding:30px 0 18px; }
html.is-mobile .home-app-recent-section{ padding:16px 0; }
html.is-mobile .home-app-future-section{ padding:24px 0 40px; }
html.is-mobile .home-explore-title,
html.is-mobile .home-app-future-heading h2{ font-size:21px; }
html.is-mobile .home-explore-title{ margin-bottom:14px; }
/* Phones: 3 equal columns (3 + 2), never a cramped single row */
html.is-mobile .home-app-shortcuts-section .home-app-shortcuts-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    justify-content:stretch;
}
html.is-mobile .home-app-shortcuts-section .home-app-shortcut{
    flex-direction:column;
    justify-content:center;
    gap:6px;
    height:84px;
    padding:0 6px;
    font-size:13px;
}
html.is-mobile .home-app-shortcuts-section .home-app-shortcut-icon{
    width:36px;
    height:36px;
    font-size:14px;
}
/* Phones: label and link on one line, chips on the full row below */
html.is-mobile .home-app-recent-section .home-app-recent-row{
    grid-template-columns:minmax(0,1fr) auto;
}
html.is-mobile .home-app-recent-section .home-app-recent-chips{
    grid-column:1 / -1;
    grid-row:2;
}
html.is-mobile .home-app-recent-section .home-app-recent-all{
    grid-column:2;
    grid-row:1;
}
html.is-mobile .home-app-recent-section .home-app-recent-empty{ font-size:13px; }
html.is-mobile .home-app-recent-all,
html.is-mobile .home-app-see-all{ font-size:13.5px; }

/* Touch tablets (700px+): same 88% edges as the hero, 5 tiles in a row */
@media (min-width:700px){
    html.is-mobile .home-app-shortcuts-section .container,
    html.is-mobile .home-app-recent-section .container,
    html.is-mobile .home-app-future-section .container{
        width:88%;
        padding:0;
    }
    html.is-mobile .home-app-shortcuts-section .home-app-shortcuts-row{
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:12px;
    }
    html.is-mobile .home-app-recent-section .home-app-recent-row{
        grid-template-columns:auto minmax(0,1fr) auto;
    }
    html.is-mobile .home-app-recent-section .home-app-recent-chips{
        grid-column:auto;
        grid-row:auto;
    }
    html.is-mobile .home-app-recent-section .home-app-recent-all{
        grid-column:auto;
        grid-row:auto;
    }
}

/* JS-disabled narrow window fallback, kept in sync */
@media (max-width:768px){
    html:not(.is-mobile) .home-app-shortcuts-section .container,
    html:not(.is-mobile) .home-app-recent-section .container,
    html:not(.is-mobile) .home-app-future-section .container{
        width:100%;
        padding:0 16px;
    }
    html:not(.is-mobile) .home-app-shortcuts-section .home-app-shortcuts-row{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:10px;
    }
    html:not(.is-mobile) .home-app-recent-section .home-app-recent-row{
        grid-template-columns:minmax(0,1fr) auto;
    }
    html:not(.is-mobile) .home-app-recent-section .home-app-recent-chips{
        grid-column:1 / -1;
        grid-row:2;
    }
}