/* Home page header and hero (mock of 10 Oct 2026). Shared by the live homepage (apps/web) and the local design reference.
   The header sits over the photo and turns white once the page scrolls; three banners cross-fade behind one city search.
   Noto Sans (headings and text) and Roboto (card words) load from Google Fonts: link tags in apps/web shell.tsx. */
.home-page{--ec-hero-font:'Noto Sans',var(--ec-font-body);--ec-home-card-font:'Roboto',var(--ec-font-body);--ec-home-x:80px;--ec-home-max:1332px;--ec-home-header:80px}
body.marketplace-page.home-page{background:#fff;color:#000;font-family:var(--ec-hero-font)}
:root:has(body.home-page){scroll-padding-top:calc(var(--ec-home-header,80px) + 8px)}

/* Header: see-through on the hero, solid white with dark content as soon as scrolling starts (.is-solid from
   components/marketplace/home-header-scroll.tsx). */
.home-page .site-header.ec-header-hero{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--ec-home-header);padding:0;background:#fff0;border:0;box-shadow:0 1px 0 #e6dee300;backdrop-filter:none;transition:background-color .35s ease,box-shadow .35s ease}
.home-page .site-header.ec-header-hero.is-solid{background:#fff;box-shadow:0 1px 0 var(--ec-line)}
.home-page .site-header.ec-header-hero .nav-wrap{display:flex;align-items:center;gap:0;width:calc(100% - 2 * var(--ec-home-x));max-width:var(--ec-home-max);height:var(--ec-home-header);min-height:0;margin:0 auto;padding:0;color:#fff;font-family:var(--ec-hero-font)}
.home-page .ec-header-hero .brand{position:relative;flex:none;width:143px;height:31.32px}
.home-page .ec-header-hero .brand img,.home-page .ec-header-hero .brand svg{position:absolute;left:0;top:0;width:143px;height:auto;max-width:none;transition:opacity .35s ease}
.home-page .ec-header-hero .brand .ec-brand-dark{opacity:0}
.home-page .ec-header-hero.is-solid .brand .ec-brand-light{opacity:0}
.home-page .ec-header-hero.is-solid .brand .ec-brand-dark{opacity:1}
.home-page .ec-header-hero .desktop-nav{display:flex;align-items:center;gap:24px;margin:0;padding:0 40px}
.home-page .ec-header-hero .desktop-nav a{display:inline-flex;align-items:center;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font:700 14px/21px var(--ec-hero-font);text-decoration:none;transition:color .35s ease,opacity .2s ease,background-color .25s ease,border-color .35s ease}
.home-page .ec-header-hero .desktop-nav a::after{display:none}
.home-page .ec-header-hero .desktop-nav a:hover{opacity:.75;background:transparent;text-decoration:none}
.home-page .ec-header-hero.is-solid .desktop-nav a{color:#000}
/* "List your space" as an outline pill (direction A of the mock, user choice 10 Oct 2026). */
.home-page .ec-header-hero .desktop-nav a.ec-nav-list{height:36px;padding:0 16px;border:1px solid #ffffffbf;border-radius:999px}
.home-page .ec-header-hero .desktop-nav a.ec-nav-list:hover{background:#fff;color:#000;opacity:1}
.home-page .ec-header-hero.is-solid .desktop-nav a.ec-nav-list{border-color:var(--ec-plum);color:var(--ec-plum)}
.home-page .ec-header-hero.is-solid .desktop-nav a.ec-nav-list:hover{background:var(--ec-plum);color:#fff}
.home-page .ec-header-hero :is(.header-actions,.ec-header-tools){flex:1;display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-left:auto}
.home-page .ec-header-hero .ec-header-actions{gap:20px}
.home-page .ec-header-hero :is(.ec-header-login,.header-login){margin:0;padding:0;border:0;background:transparent;color:#fff;font:700 14px/21px var(--ec-hero-font);transition:color .35s ease,opacity .2s ease}
.home-page .ec-header-hero.is-solid :is(.ec-header-login,.header-login){color:#000}
.home-page .ec-header-hero :is(.ec-header-login,.header-login):hover{opacity:.75;background:transparent;text-decoration:none}
/* The mock's header holds Login and the menu only; the worldwide link stays in the menu and the footer. */
.home-page .ec-header-hero .ec-header-actions>a.ec-header-icon{display:none}
.home-page .ec-header-hero .ec-header-actions>button.ec-header-icon:not(.ec-header-avatar){width:40px;height:40px;margin-right:-8px;border:0;border-radius:999px;background:transparent;color:#fff;transition:color .35s ease,background-color .2s ease}
.home-page .ec-header-hero .ec-header-actions>button.ec-header-icon:not(.ec-header-avatar):is(:hover,[aria-expanded='true']){background:#ffffff24}
.home-page .ec-header-hero.is-solid .ec-header-actions>button.ec-header-icon:not(.ec-header-avatar){color:#000}
.home-page .ec-header-hero.is-solid .ec-header-actions>button.ec-header-icon:not(.ec-header-avatar):is(:hover,[aria-expanded='true']){background:#0000000d}
.home-page .ec-header-hero .live-bell-trigger{color:#fff;background:transparent}
.home-page .ec-header-hero.is-solid .live-bell-trigger{color:var(--ec-plum)}
.home-page .ec-header-hero .ec-header-menu{color:var(--ec-ink)}
.home-page .ec-header-hero .menu-toggle{display:none}

/* Hero: three banners cross-fading behind the title and the city search. */
.home-page .ec-home-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:min(883px,100svh);margin:0;padding:0;background:#302c27;color:#fff}
.ec-home-hero-banners{overflow:hidden}
.ec-home-hero-banners{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ec-home-hero-banners img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;opacity:0;animation:ec-banner-b 15.6s ease infinite}
.ec-home-hero-banners img:nth-child(1){opacity:1;animation-name:ec-banner-a}
.ec-home-hero-banners img:nth-child(3){animation-name:ec-banner-c}
@keyframes ec-banner-a{0%,27%{opacity:1}37%,90%{opacity:0}100%{opacity:1}}
@keyframes ec-banner-b{0%,27%{opacity:0}37%,60%{opacity:1}70%,100%{opacity:0}}
@keyframes ec-banner-c{0%,60%{opacity:0}70%,93%{opacity:1}100%{opacity:0}}
.ec-home-hero-body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;width:100%;max-width:none;margin:0;padding:calc(var(--ec-home-header) + 8px) 8px 8px;text-align:center}
.ec-home-hero-copy{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:960px}
.home-page .ec-home-hero-copy h1{margin:0;color:#fff;font:600 64px/69.12px var(--ec-hero-font);letter-spacing:-2.56px;text-wrap:balance}
.home-page .ec-home-hero-copy h1 span{display:block}
.ec-home-hero-copy p{margin:0;color:#fff;font:400 18px/24px var(--ec-hero-font)}

/* The city search pill: a button that opens the "Find your next home" dialog (hero-search-modal.css); it opens from
   the centre on the first landing. */
.home-page .ec-city-search{--search-r:999px;position:relative;display:flex;align-items:center;gap:8px;width:100%;max-width:850px;margin:0;padding:12px 12px 12px 32px;border:0;border-radius:var(--search-r);background:#fff;color:var(--ec-ink);box-shadow:none;font-family:var(--ec-hero-font);text-align:left;cursor:pointer;transition:box-shadow .2s ease;animation:ec-search-fade .45s ease-out .25s both,ec-search-open 1.1s cubic-bezier(.76,0,.24,1) .5s backwards}
@keyframes ec-search-fade{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes ec-search-open{from{clip-path:inset(0 calc(50% - 40px) round var(--search-r))}to{clip-path:inset(0 0 round var(--search-r))}}
.home-page .ec-city-search:hover{box-shadow:0 10px 32px #25142133}
.home-page .ec-city-search:focus-visible{outline:3px solid #fff;outline-offset:5px}
.ec-city-search-text{flex:1;min-width:0;overflow:hidden;color:var(--ec-ink);font:400 16px/24px var(--ec-hero-font);text-overflow:ellipsis;white-space:nowrap}
.ec-city-search-text.is-placeholder{color:#7d7d7d}
.ec-city-search-btn{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border-radius:999px;background:var(--ec-plum);color:#fff;transition:background-color .2s ease}
.home-page .ec-city-search:hover .ec-city-search-btn{background:#5a2a4f}
.ec-city-search-btn svg{width:24px;height:24px}

@media(max-width:1200px){.home-page{--ec-home-x:48px}}
@media(max-width:960px){.home-page .ec-header-hero .desktop-nav{display:none}}
@media(max-width:640px){
  .home-page{--ec-home-x:20px;--ec-home-header:68px}
  .home-page .ec-header-hero .ec-header-actions{gap:12px}
  .home-page .ec-home-hero-copy h1{font-size:40px;line-height:44px;letter-spacing:-1.6px}
  .ec-home-hero-copy p{font-size:16px}
  .home-page .ec-city-search{padding:8px 8px 8px 24px}
  .ec-city-search-btn{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
  .home-page .ec-city-search{animation:none}
  .ec-home-hero-banners img{animation:none}
  .ec-home-hero-banners img:nth-child(1){opacity:1}
}