/* =========================================================
   home.css  (light + dark theme)
   Home page only: hero, filter bar, offer / featured cards,
   statement block, tagline.
   ========================================================= */

:root{
  color-scheme:light;

  /* ---- legacy tokens (kept so common.css keeps working) ---- */
  --header:#000;
  --ink:#D4C9B8;
  --panel:#ffffff;
  --panel-2:#f5f1e9;
  --brick:#c06a3f;
  --brick-soft:#e39868;
  --sand:#f2ece1;
  --sand-dim:#6b6155;
  --stone:#efeae0;
  --gold:#e8c15a;
  --gold-soft:rgba(232,193,90,.16);
  --line:rgba(20,16,13,.14);
  --radius:10px;
  --font-display:'Georgia','Times New Roman',serif;
  --ease:cubic-bezier(.22,.85,.32,1);

  /* ---- page tokens ---- */
  --bg-page:#f3eee4;
  --bg-alt:#e7e0d2;                 /* Featured section band */
  --text-page:#1c1712;
  --text-muted-page:#5f5647;
  --border-soft:rgba(20,16,13,.20);
  --card-bg:#ffffff;
  --card-line:rgba(20,16,13,.08);
  --card-shadow:0 24px 40px -24px rgba(20,16,13,.45);

  /* ---- hero filter bar (light: frosted white glass) ---- */
  --filter-bg:linear-gradient(135deg, rgba(255,255,255,.84), rgba(250,244,232,.68));
  --filter-border:rgba(176,126,28,.55);
  --filter-shadow:
      0 0 0 1px rgba(255,255,255,.55),
      0 18px 45px rgba(20,16,13,.28),
      0 0 30px rgba(232,193,90,.18),
      inset 0 1px 0 rgba(255,255,255,.95);
  --filter-sheen:.45;
  --filter-label:#7a6a52;
  --filter-text:#1c1712;
  --filter-icon-bg:rgba(176,126,28,.12);
  --filter-icon-border:rgba(176,126,28,.45);
  --filter-icon-color:#9a6b12;
  --filter-divider:rgba(176,126,28,.6);
  --filter-option-bg:#ffffff;
  --filter-option-text:#222222;
}

/* =========================
   DARK THEME
   ========================= */
[data-theme="dark"]{
  color-scheme:dark;

  --header:#fff;
  --ink:#12110F;
  --panel:#1c1713;
  --panel-2:#241d17;
  --sand-dim:#b9ad9a;
  --stone:#121110;
  --line:rgba(242,236,225,.14);

  --bg-page:#121110;
  --bg-alt:#0d0c0b;
  --text-page:#f2ece1;
  --text-muted-page:#b9ad9a;
  --border-soft:rgba(242,236,225,.22);
  --card-bg:#1c1713;
  --card-line:rgba(242,236,225,.10);
  --card-shadow:0 24px 40px -24px rgba(0,0,0,.8);

  --filter-bg:linear-gradient(135deg, rgba(84,85,87,.612), rgba(30,32,34,.482));
  --filter-border:rgba(232,193,90,.75);
  --filter-shadow:
      0 0 0 1px rgba(232,193,90,.12),
      0 10px 35px rgba(0,0,0,.25),
      0 0 35px rgba(232,193,90,.18),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(232,193,90,.18);
  --filter-sheen:.7;
  --filter-label:rgba(255,255,255,.70);
  --filter-text:#ffffff;
  --filter-icon-bg:rgba(232,193,90,.12);
  --filter-icon-border:rgba(232,193,90,.45);
  --filter-icon-color:#e8c15a;
  --filter-divider:rgba(232,193,90,.75);
  --filter-option-bg:#1c1713;
  --filter-option-text:#f2ece1;
}

/* Visitors on a dark OS who haven't picked a theme yet */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme:dark;

    --header:#fff;
    --ink:#12110F;
    --panel:#1c1713;
    --panel-2:#241d17;
    --sand-dim:#b9ad9a;
    --stone:#121110;
    --line:rgba(242,236,225,.14);

    --bg-page:#121110;
    --bg-alt:#0d0c0b;
    --text-page:#f2ece1;
    --text-muted-page:#b9ad9a;
    --border-soft:rgba(242,236,225,.22);
    --card-bg:#1c1713;
    --card-line:rgba(242,236,225,.10);
    --card-shadow:0 24px 40px -24px rgba(0,0,0,.8);

    --filter-bg:linear-gradient(135deg, rgba(84,85,87,.612), rgba(30,32,34,.482));
    --filter-border:rgba(232,193,90,.75);
    --filter-shadow:
        0 0 0 1px rgba(232,193,90,.12),
        0 10px 35px rgba(0,0,0,.25),
        0 0 35px rgba(232,193,90,.18),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(232,193,90,.18);
    --filter-sheen:.7;
    --filter-label:rgba(255,255,255,.70);
    --filter-text:#ffffff;
    --filter-icon-bg:rgba(232,193,90,.12);
    --filter-icon-border:rgba(232,193,90,.45);
    --filter-icon-color:#e8c15a;
    --filter-divider:rgba(232,193,90,.75);
    --filter-option-bg:#1c1713;
    --filter-option-text:#f2ece1;
  }
}

/* ============ BASE ============ */
body{
  background:var(--bg-page);
  color:var(--text-page);
  transition:background-color .35s ease, color .35s ease;
}
.text-page{color:var(--text-page);}

/* Section headings, subtext, pill buttons follow the theme */
.sec-head h2{color:var(--text-page);}
.sec-head p{color:var(--text-muted-page);}
.pill-btn:not(:hover){
  color:var(--text-page);
  border-color:var(--border-soft);
}

/* ============ HERO ============ */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; margin-top:0;}

.hero-bg{
  position:absolute; inset:0; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,8,6,.15) 0%, rgba(8,6,5,.55) 65%, rgba(6,5,4,.92) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(90,170,210,.25), transparent 55%),
    linear-gradient(200deg,#4a3a2c,#2c2219 45%, #201a14);
  background-size:cover; background-position:center;
  animation:kenburns 22s ease-in-out infinite alternate;
}
.hero-bg video{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
}
@keyframes kenburns{
  from{transform:scale(1.08) translate(0,0);}
  to{transform:scale(1.16) translate(-1%,-1%);}
}

/* soft fade from the video into the page colour (delete if you don't want it) */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:140px;
  /* background:linear-gradient(to bottom, transparent, var(--bg-page)); */
  pointer-events:none; z-index:2;
  transition:background .35s ease;
}
.hero-content{position:relative; z-index:3; width:100%; padding-bottom:110px;}

/* ============ SECTIONS ============ */
.offer-section{
  background-color:var(--bg-page);
  color:var(--text-page);
  padding:130px 0 100px;
  transition:background-color .35s ease, color .35s ease;
}
.featured-section{
  background:var(--bg-alt);
  color:var(--text-page);
  padding:110px 0 120px;
  transition:background-color .35s ease, color .35s ease;
}
.grid-section{padding:60px 0 20px;}

@media (max-width:575.98px){
  .offer-section,.featured-section{padding:80px 0 70px;}
}

/* ============ PROPERTY CARDS ============ */
.prop-card{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:4/5.1; cursor:pointer; display:block;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  box-shadow:var(--card-shadow);
}
.prop-card .img{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s var(--ease);}
.prop-card:hover .img{transform:scale(1.08);}
.prop-card .shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.15) 46%, transparent 65%);}
.prop-card .arrow{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .4s var(--ease);
}
.prop-card:hover .arrow{background:var(--gold); transform:rotate(45deg);}
.prop-card .arrow svg{width:14px; height:14px; stroke:#1c1712; transition:stroke .3s;}
.prop-card .info{position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2;}
.prop-card .info h3{color:#fff; font-size:19px; margin-bottom:6px;}
.prop-card .info .loc{display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.78); font-size:12.5px;}
.prop-card .info .loc svg{width:11px; height:11px; flex-shrink:0;}

.img.t1{background-image:linear-gradient(165deg,#87b6d6,#3d5a72 55%,#26313c),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 8px, transparent 8px 26px);}
.img.t2{background-image:linear-gradient(165deg,#9cc3dd,#4d6b83 55%,#2a343d),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 20px, transparent 20px 40px);}
.img.t3{background-image:linear-gradient(165deg,#b9d4e6,#587a91 55%,#2c3742),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 10px, transparent 10px 30px);}
.img.t4{background-image:linear-gradient(165deg,#d7c3a4,#8a6a4c 55%,#3a2c20),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 14px, transparent 14px 32px);}
.img.t5{background-image:linear-gradient(165deg,#a9c9dd,#4a6a80 55%,#232c34),repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 24px, transparent 24px 46px);}
.img.t6{background-image:linear-gradient(165deg,#cdb896,#7c5c3f 55%,#31251a),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 12px, transparent 12px 28px);}
.img.t7{background-image:linear-gradient(165deg,#9fbfd0,#476175 55%,#232c34),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 16px, transparent 16px 34px);}
.img.t8{background-image:linear-gradient(165deg,#bcd2df,#5a7c8e 55%,#28323a),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 18px, transparent 18px 40px);}
.img.t9{background-image:linear-gradient(165deg,#d8c2a0,#93714f 55%,#3a2c1e),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 10px, transparent 10px 24px);}
.img img{width:100%; height:100%; object-fit:cover;}

.property-card{
  position:relative;
  border:1px solid transparent;
  overflow:hidden;
  transition:all .4s ease;
}
.property-card:hover{
  border-color:#f2d074;
  box-shadow:
    0 0 10px rgba(232,193,90,.35),
    0 0 30px rgba(232,193,90,.25),
    0 15px 30px rgba(232,193,90,.20);
}
.property-card:hover::before{
  content:"";
  position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.15), rgba(232,193,90,.65), rgba(255,255,255,.15), transparent);
  transform:skewX(-20deg);
  animation:cardGoldShine 1.5s ease-in-out;
  pointer-events:none; z-index:5;
}
@keyframes cardGoldShine{
  0%{left:-150%;}
  50%{left:100%;}
  100%{left:100%;}
}

.offer-badge{
  position:absolute; top:14px; right:14px;
  background:rgba(30,38,48,.85); color:#fff;
  font-weight:bold; font-size:12px;
  padding:6px 14px; border-radius:20px; letter-spacing:.2px;
  transition:background .3s ease, color .3s ease;
  z-index:2;
}
.prop-card:hover .offer-badge{
  color:#111;
  background:linear-gradient(120deg, var(--gold), #fff2a8, var(--gold), #d4af37, var(--gold));
  background-size:300% 100%;
  animation:goldShine 4.5s linear infinite;
}
@keyframes goldShine{
  0%{background-position:0% center;}
  100%{background-position:220% center;}
}

/* ============ VIDEO / STATEMENT (photo + overlay, same in both themes) ============ */
.statement{position:relative; min-height:76vh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.statement-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(6,5,4,.96) 0%, rgba(8,6,5,.35) 55%, rgba(20,14,8,.55) 100%),
    radial-gradient(ellipse at 60% 70%, rgba(255,170,110,.25), transparent 60%),
    linear-gradient(200deg,#372a20,#1c1712 55%,#100d0a);
  transition:transform .6s var(--ease);
}
.statement:hover .statement-bg{transform:scale(1.04);}
.statement-content{position:relative; z-index:2; text-align:center; color:#fff;}
.statement-play{
  width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  margin:0 auto 34px; cursor:pointer; backdrop-filter:blur(6px); position:relative;
}
.statement-play::after{
  content:''; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  animation:pulse-ring 2.6s ease-out infinite;
}
@keyframes pulse-ring{0%{transform:scale(.8);opacity:.8;}100%{transform:scale(1.5);opacity:0;}}
.statement-play svg{width:20px; height:20px; fill:#fff; margin-left:3px; position:relative; z-index:2;}
.statement-play:hover{border-color:var(--gold);}
.statement h2{font-size:clamp(28px,4vw,46px); font-weight:400;}

/* ============ TAGLINE STRIP ============ */
.tagline-strip{
  background:var(--bg-page);
  padding:70px 0 90px; text-align:center;
  transition:background-color .35s ease;
}
.tagline-strip p{
  max-width:760px; margin:0 auto;
  color:var(--text-muted-page);
  font-size:clamp(16px,1.8vw,21px);
  font-family:'Fraunces',serif; font-weight:300; font-style:italic; line-height:1.6;
}
.tagline-strip .rule{
  width:1px; height:44px;
  background:linear-gradient(var(--brick), transparent);
  margin:0 auto 30px;
}

/* =========================================
   HERO FILTER BAR  (frosted white in light, smoked glass in dark)
   ========================================= */
.filter-bar{
  position:relative;
  flex-wrap: wrap;
  width:min(1050px,100%);
  display:flex; align-items:center; gap:8px;
  padding:14px;
  background:var(--filter-bg);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--filter-border);
  border-radius:22px;
  box-shadow:var(--filter-shadow);
  overflow:hidden;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.filter-bar::before{
  content:""; position:absolute; top:-100%; left:-30%; width:70%; height:300%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), rgba(255,255,255,.30), rgba(255,255,255,.08), transparent);
  transform:rotate(20deg);
  pointer-events:none; opacity:var(--filter-sheen);
}
.filter-bar::after{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, #fff3bd, #e8c15a, #fff3bd, transparent);
  box-shadow:0 0 12px rgba(232,193,90,.8);
  pointer-events:none;
}
.filter-item{
  position:relative; z-index:2; flex:1; min-width:240px;
  display:flex; align-items:center; gap:13px;
  padding:10px 18px;
}
.filter-icon{
  width:46px; height:46px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  background:var(--filter-icon-bg);
  border:1px solid var(--filter-icon-border);
  color:var(--filter-icon-color);
  font-size:20px;
  box-shadow:0 0 15px rgba(232,193,90,.15), inset 0 1px 0 rgba(255,255,255,.25);
  transition:all .3s ease;
}
.filter-item:hover .filter-icon{
  background:rgba(232,193,90,.24);
  border-color:var(--gold);
  box-shadow:0 0 20px rgba(232,193,90,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateY(-2px);
}
.filter-content{flex:1; min-width:0;}
.filter-content label{
  display:block; margin-bottom:3px;
  color:var(--filter-label);
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
}
.filter-content select{
  width:100%; padding:0 20px 0 0;
  border:0; outline:0; background:transparent;
  color:var(--filter-text);
  font-size:15px; font-weight:600; cursor:pointer;
}
.filter-content select option{
  background:var(--filter-option-bg);
  color:var(--filter-option-text);
}
.filter-divider{
  position:relative; z-index:2; width:1px; height:45px;
  background:linear-gradient(to bottom, transparent, var(--filter-divider), transparent);
  box-shadow:0 0 8px rgba(232,193,90,.2);
}
.btn-search{
  position:relative; z-index:2;
  min-height:62px; padding:0 27px;
  border:1px solid #e8c15a; border-radius:15px;
  background:linear-gradient(135deg, rgba(232,193,90,.96), rgba(190,145,45,.92));
  color:#171717;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer;
  box-shadow:0 8px 25px rgba(232,193,90,.25), inset 0 1px 0 rgba(255,255,255,.55);
  transition:all .3s ease;
}
.btn-search i{font-size:18px;}
.btn-search:hover{
  color:#111;
  transform:translateY(-3px);
  box-shadow:
    0 12px 35px rgba(232,193,90,.40),
    0 0 20px rgba(232,193,90,.25),
    inset 0 1px 0 rgba(255,255,255,.65);
}

@media (max-width:767px){
  .filter-bar{width:100%; flex-direction:column; align-items:stretch; padding:14px; border-radius:20px;}
  .filter-item{width:100%; min-width:0; padding:10px 5px;}
  .filter-divider{width:100%; height:1px;}
  .btn-search{width:100%; min-height:56px; margin-top:8px;}
}
@media (max-width:480px){
  .filter-bar{padding:12px; border-radius:18px;}
  .filter-item{gap:10px;}
  .filter-icon{width:42px; height:42px; flex-basis:42px; font-size:18px;}
  .filter-content select{font-size:14px;}
  .btn-search{font-size:13px;}
}