/* ==========================================================
   properties.css
   Extracted from properties.html <style> block.

   NOTE: this file includes styles for elements that appear on
   every page (site-header, side-drawer, action-rail, chat-fab,
   newsletter + footer). If your shared layout (the one used by
   home.blade.php) already ships those rules in a global
   stylesheet, delete the matching blocks here to avoid double
   -loading/overriding them. Everything from "HERO / FILTER BAR"
   down through "PROPERTY CARDS", "SECTION HEADS + PILL BUTTON"
   is page-specific and safe to keep as-is.
   ========================================================== */

  :root{
    --dark:#141414;
    --dark-2:#1c1c1c;
    --ink:#141414;
    --stone:#efeae0;
    --gold:#e8c15a;
    --gold-soft:rgba(232,193,90,.16);
    --sand-dim:#cdbfa8;
    --brick:#7c5c3f;
    --muted:#6c6c6c;
    --radius:10px;
    --font-display:'Georgia','Times New Roman',serif;
    --ease:cubic-bezier(.65,0,.35,1);
    --header-h: 84px;

    /* ---- theme tokens (light = default) ---- */
    --bg-page:#efeae0;          /* was hard-coded var(--stone) on body */
    --bg-surface:#ffffff;       /* cards, panels that sit on the page */
    --text-body:#111111;
    --text-muted:#6b6155;
    --border-soft:rgba(20,16,13,.14);
  }

  /* Dark mode: toggled by adding data-theme="dark" to <html> (see JS below),
     and used automatically for visitors whose OS is set to dark if they
     haven't chosen a theme yet. */
  html[data-theme="dark"]{
    --bg-page:#121110;
    --bg-surface:#1c1a17;
    --text-body:#efeae0;
    --text-muted:#b7ad9c;
    --border-soft:rgba(232,193,90,.18);
    --stone:#121110;   /* offer/featured sections follow the page bg in dark mode */
    --ink:#0c0b0a;
  }
  @media (prefers-color-scheme:dark){
    html:not([data-theme="light"]):not([data-theme="dark"]){
      --bg-page:#121110;
      --bg-surface:#1c1a17;
      --text-body:#efeae0;
      --text-muted:#b7ad9c;
      --border-soft:rgba(232,193,90,.18);
      --stone:#121110;
      --ink:#0c0b0a;
    }
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background: var(--bg-page);
    color: var(--text-body);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    transition: background .3s ease, color .3s ease;
  }
  a{text-decoration:none;color:inherit;}

  /* ==========================================================
     THEME TOGGLE — sun/moon switch, drop the button markup
     anywhere in the header, e.g. next to .burger:
       <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
         <i class="fa-regular fa-sun"></i><i class="fa-regular fa-moon"></i>
       </button>
     ========================================================== */
  .theme-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%;
    border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff;
    cursor:pointer; flex-shrink:0; font-size:15px;
    transition:border-color .3s ease, background .3s ease, color .3s ease;
  }
  .theme-toggle:hover{border-color:var(--gold); background:rgba(232,193,90,.1); color:var(--gold);}
  .theme-toggle .fa-moon{display:none;}
  html[data-theme="dark"] .theme-toggle .fa-sun{display:none;}
  html[data-theme="dark"] .theme-toggle .fa-moon{display:inline;}

  /* ==========================================================
     HEADER — fixed to top, transparent over the hero, gains a
     solid background + shrinks once the page is scrolled.
     ========================================================== */
  .site-header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1030;
    padding:20px 0;
    background:transparent;
    box-shadow:none;
    transition:background .35s var(--ease), padding .35s var(--ease),
               box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
  }
  .site-header.scrolled{
    background:rgba(18,17,15,.92);
    backdrop-filter:blur(10px);
    padding:12px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
  }
  .site-header.scrolled .logo-img{ height:36px; }

  /* page content sits under the fixed header on the hero, so the hero
     itself carries the offset via padding-top (see .hero) */

  .header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px;}
  .logo-link{display:flex; align-items:center; min-width:0;}
  .logo-img{height:44px; width:auto; max-width:220px; object-fit:contain; display:block; transition:height .35s var(--ease);}

  .site-header nav{display:flex; align-items:center; gap:28px; flex-shrink:0;}

  .nav-link-plain{
    font-size:.92rem; position:relative; padding-bottom:2px;
    font-weight:500; letter-spacing:.2px;
    background:linear-gradient(100deg, #a9793a 0%, #f4d998 22%, #c9a15a 45%, #fff2c9 60%, #a9793a 78%, #f0d290 100%);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent;
    animation:goldShine 4.5s linear infinite;
  }
  .nav-link-plain::after{
    content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px;
    background:var(--gold); transition:width .3s ease;
  }
  .nav-link-plain:hover::after{width:100%;}

  @keyframes goldShine{
    0%{background-position:0% center;}
    100%{background-position:220% center;}
  }

  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    cursor:pointer; padding:10px; width:42px; height:42px;
    border:1px solid rgba(255,255,255,.4); border-radius:50%;
    transition:border-color .3s ease, background .3s ease;
    flex-shrink:0;
  }
  .burger:hover{border-color:var(--gold); background:rgba(232,193,90,.1);}
  .burger span{width:18px; height:1.5px; background:#fff; display:block; margin:0 auto; transition:transform .35s var(--ease), opacity .25s ease, background .3s ease;}
  .burger.active span{background:var(--gold);}
  .burger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .burger.active span:nth-child(2){opacity:0;}
  .burger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  /* ==========================================================
     SIDE DRAWER — unchanged
     ========================================================== */
  .drawer-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.6);
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
    z-index:1040;
  }
  .drawer-backdrop.show{opacity:1; visibility:visible;}

  .side-drawer{
    position:fixed; top:0; right:0; height:100%; width:min(400px,88vw);
    background:var(--dark);
    color:#fff;
    border-left:1px solid #2b2b2b;
    z-index:1050;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
    display:flex; flex-direction:column;
    padding:2rem 2.2rem;
  }
  .side-drawer.open{transform:translateX(0);}

  .drawer-close{
    align-self:flex-end;
    width:42px; height:42px; border-radius:50%;
    border:1px solid #3a3a3a; background:transparent; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; cursor:pointer; transition:border-color .3s, transform .3s, color .3s;
  }
  .drawer-close:hover{border-color:var(--gold); color:var(--gold); transform:rotate(90deg);}

  .drawer-menu{list-style:none; padding:0; margin:2.6rem 0 auto;}
  .drawer-menu li{
    border-bottom:1px solid #2a2a2a;
    transform:translateX(24px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .side-drawer.open .drawer-menu li{opacity:1; transform:translateX(0);}
  .side-drawer.open .drawer-menu li:nth-child(1){transition-delay:.10s;}
  .side-drawer.open .drawer-menu li:nth-child(2){transition-delay:.15s;}
  .side-drawer.open .drawer-menu li:nth-child(3){transition-delay:.20s;}
  .side-drawer.open .drawer-menu li:nth-child(4){transition-delay:.25s;}
  .side-drawer.open .drawer-menu li:nth-child(5){transition-delay:.30s;}
  .side-drawer.open .drawer-menu li:nth-child(6){transition-delay:.35s;}
  .side-drawer.open .drawer-menu li:nth-child(7){transition-delay:.40s;}

  .drawer-menu a{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem .1rem; font-family:var(--font-display); font-size:1.2rem; color:#fff;
  }
  .drawer-menu a .arrow{font-size:1rem; opacity:.5; transition:transform .3s ease, opacity .3s ease;}
  .drawer-menu a:hover{color:var(--gold);}
  .drawer-menu a:hover .arrow{transform:translateX(5px); opacity:1;}
  .drawer-menu a.current{color:var(--gold);}

  .drawer-foot{padding-top:1.4rem; color:#999; font-size:.85rem; line-height:1.6;}
  .drawer-foot .social{display:flex; gap:.6rem; margin-top:1rem;}
  .drawer-foot .social a{
    width:36px; height:36px; border:1px solid #3a3a3a; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:border-color .3s, background .3s, color .3s;
  }
  .drawer-foot .social a svg{width:14px; height:14px;}
  .drawer-foot .social a:hover{border-color:var(--gold); background:var(--gold-soft); color:var(--gold);}

  /* ==========================================================
     HERO / FILTER BAR
     ========================================================== */
  .hero{
    position:relative;
    min-height:340px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:calc(var(--header-h) + 40px);
    padding-bottom:40px;
    background:
      linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.65) 100%),
        url('/assets/img/project/Scene%202_1.png') no-repeat center center;

    background-size:cover;
    background-position:center;
  }
  .filter-bar{
    background:rgba(20,18,15,.55);
    backdrop-filter:blur(14px);
    border:1px solid rgba(232,193,90,.25);
    border-radius:20px;
    padding:12px 8px;
    display:flex;
    align-items:center;
    gap:4px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    flex-wrap:wrap;
    animation:dropIn .6s ease both;
  }
  @keyframes dropIn{
    from{opacity:0; transform:translateY(-16px);}
    to{opacity:1; transform:translateY(0);}
  }

  .filter-item{
    display:flex; align-items:center; gap:14px;
    padding:6px 18px;
    min-width:220px;
  }

  .filter-icon{
    width:46px; height:46px; flex:0 0 46px;
    display:flex; align-items:center; justify-content:center;
    border-radius:13px;
    background:rgba(232,193,90,.12);
    border:1px solid rgba(232,193,90,.45);
    color:var(--gold);
    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,.22);
    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:rgba(255,255,255,.70);
    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:#fff; font-size:15px; font-weight:600; cursor:pointer;
  }
  .filter-content select option{ background:#fff; color:#222; }

  .filter-divider{
    width:1px; height:45px;
    background:linear-gradient(to bottom, transparent, rgba(232,193,90,.75), transparent);
    box-shadow:0 0 8px rgba(232,193,90,.2);
  }

  .btn-search{
    min-height:62px;
    padding:0 27px;
    border:1px solid var(--gold);
    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{
    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{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;}
    .logo-img{height:36px;}
  }
  @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;}
  }


  
  /* ==========================================================
     FLOATING ACTION RAIL + CHAT FAB
     ========================================================== */
  .action-rail{
    position:fixed; right:24px; top:130px;
    display:flex; flex-direction:column; gap:10px;
    z-index:1010;
  }
  .action-rail button{
    background:rgba(20,20,20,.75);
    border:1px solid #555; color:#fff; border-radius:8px;
    padding:10px 14px; font-size:12px;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    cursor:pointer; min-width:66px;
    transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
  }
  .action-rail button:hover{background:rgba(45,45,45,.9); border-color:var(--gold); color:var(--gold); transform:translateX(-3px);}
  .action-rail svg{width:16px;height:16px;}
  .chat-fab{
    position:fixed; right:24px; bottom:32px;
    width:52px;height:52px; border-radius:50%;
    background:var(--gold); border:1px solid var(--gold); color:#111;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:1010;
    transition:transform .2s ease, filter .2s ease;
  }
  .chat-fab:hover{transform:scale(1.08); filter:brightness(1.06);}
  @media (max-width:991px){ .action-rail{display:none;} }

  /* ==========================================================
     SECTION HEADS + PILL BUTTON
     ========================================================== */
  .sec-head h2{font-size:clamp(26px,3vw,38px); color:var(--text-body);}
  .sec-head p{color:var(--text-muted); font-size:14.5px; margin-top:8px;}
  .pill-btn{
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid var(--border-soft); border-radius:40px; padding:12px 22px;
    font-size:13px; font-weight:700; white-space:nowrap; background:none; cursor:pointer; color:var(--text-body);
  }
  .pill-btn svg{width:13px; height:13px; transition:transform .3s var(--ease);}
  .pill-btn:hover svg{transform:translateX(3px);}
  .pill-btn.on-dark{border-color:rgba(255,255,255,.25); color:#fff;}

  /* ==========================================================
     PROPERTY CARDS
     ========================================================== */
  .prop-card{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5.1; cursor:pointer; display:block;}
  .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:hover .arrow svg{stroke:#1c1712;}
  .prop-card .arrow svg{width:14px; height:14px; stroke:var(--ink); 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);
  }

  /* Gold shine effect */
  .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-section{background:var(--stone); padding:130px 0 100px;}
  .featured-section{background:var(--stone); padding:110px 0 120px;}
  .featured-section .sec-head h2{color:#fff;}

  /* ==========================================================
     VIDEO / STATEMENT
     ========================================================== */
  .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(--ink); padding:70px 0 90px; text-align:center;}
  .tagline-strip p{
    max-width:760px; margin:0 auto; color:var(--sand-dim); 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;}

  /* ==========================================================
     NEWSLETTER + FOOTER
     ========================================================== */
  .newsletter-section{background:var(--dark); color:#fff; padding:70px 0 0;}
  .newsletter-section h2{font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4vw,42px); margin:0;}
  .newsletter-form{display:flex; gap:12px; max-width:560px; width:100%;}
  .newsletter-form input{
    flex:1; background:transparent; border:1px solid #555; border-radius:30px;
    padding:15px 22px; color:#fff; outline:none; font-size:14.5px;
  }
  .newsletter-form input::placeholder{color:#999;}
  .newsletter-form input:focus{border-color:var(--gold);}
  .newsletter-form button{
    background:#e9e9e9; color:#111; border:none; border-radius:30px;
    padding:15px 26px; font-size:14.5px; font-weight:600;
    display:flex; align-items:center; gap:8px; white-space:nowrap;
    transition:background .2s ease, color .2s ease;
  }
  .newsletter-form button:hover{background:var(--gold); color:#111;}

  footer{border-top:1px solid #2b2b2b; margin-top:36px; padding-top:34px;}
  .footer-links a{font-size:14.5px; color:#ddd; transition:color .2s ease;}
  .footer-links a:hover{color:var(--gold); text-decoration:underline;}
  .footer-address{color:#999; font-size:13.5px;}
  .footer-social a{
    width:36px; height:36px; border-radius:50%; border:1px solid #444;
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
  }
  .footer-social a:hover{background:var(--gold); color:#111; border-color:var(--gold); transform:translateY(-3px);}