/* Alias this page's original token names to the shared site.css design tokens,
   so the catalogue matches the rest of the site exactly. */
:root{
  --obsidian: var(--bg-deep);
  --obsidian-raised: var(--bg-surface);
  --card: var(--bg-elevated);
  --hairline: var(--hairline-soft);
  --hairline-strong: var(--hairline);
  --gold-bright: var(--gold-light);
  --gold-dim: var(--gold-dim);
  --ivory: var(--cream);
  --ivory-dim: var(--cream-soft);
  --ivory-faint: var(--muted);
  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --ease: var(--ease-out);
  --ease-spring: var(--ease-luxury);
}

/* ==========================================================================
   NORTHSTONE GROUP — Property Portfolio
   Matched to the live site (northstonegroup.org):
   - Obsidian #0D0B08 background (exact theme-color from the live site)
   - Champagne gold accent
   - Cormorant Garamond display serif + Jost body sans
   - Numbered section convention ("01 The Firm", "02 Portfolio"...)
   - Flat stats row (not boxed cards) as used on the homepage
   ========================================================================== */

body{
  background:var(--obsidian);
  color:var(--ivory);
  font-family:var(--font-body);
  font-weight:300;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
button, input, select{ font-family:inherit; }

:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }

.container{ width:100%; max-width:1320px; margin:0 auto; padding:0 40px; }

/* section numbering, exactly as used site-wide: "02 Portfolio" */
.section-num{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-body);
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--gold);
  margin-bottom:10px;
}
.section-num .num{ font-family:var(--font-display); font-style:italic; font-size:1rem; }
.section-num .divider{ width:34px; height:1px; background:var(--gold-dim); }
.section-kicker{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ivory-faint);
  margin-bottom:22px;
}

/* ---------------------------------- INTRO REVEAL ---------------------------------- */

.curtain{ position:fixed; inset:0; z-index:999; display:flex; pointer-events:none; }
.curtain-panel{ flex:1; background:var(--obsidian); transform:scaleY(1); transform-origin:top; }
.curtain-panel + .curtain-panel{ border-left:1px solid rgba(201, 169, 106,.25); }
.curtain.is-hidden{ display:none; }
.curtain.is-animating .curtain-panel{ animation:curtainLift .95s var(--ease) forwards; }
.curtain.is-animating .curtain-panel:nth-child(1){ animation-delay:.05s; }
.curtain.is-animating .curtain-panel:nth-child(2){ animation-delay:.15s; }
.curtain.is-animating .curtain-panel:nth-child(3){ animation-delay:.25s; }
@keyframes curtainLift{ 0%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }

/* ---------------------------------- HEADER ---------------------------------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(13, 11, 8,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:92px; }
.brand{ font-family:var(--font-display); font-size:1.55rem; letter-spacing:.05em; line-height:1; }
.brand span{ display:block; font-size:.6rem; letter-spacing:.32em; color:var(--gold); font-family:var(--font-body); margin-top:6px; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav > a{ font-size:.8rem; letter-spacing:.05em; color:var(--ivory-dim); transition:color .25s var(--ease); position:relative; }
.main-nav > a:hover, .main-nav > a.active{ color:var(--gold-bright); }
.main-nav > a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-26px; height:1px; background:var(--gold); }

.nav-dropdown{ position:relative; }
.nav-dropdown-list{
  position:absolute; top:calc(100% + 20px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--obsidian-raised);
  border:1px solid var(--hairline-strong);
  min-width:190px;
  padding:10px 0;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-dropdown:hover .nav-dropdown-list{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dropdown-list a{ display:block; padding:10px 20px; font-size:.78rem; color:var(--ivory-dim); }
.nav-dropdown-list a:hover{ color:var(--gold-bright); background:rgba(201, 169, 106,.06); }

.btn-gold{
  border:1px solid var(--gold-dim);
  color:var(--gold-bright);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 26px;
  background:transparent;
  cursor:pointer;
  transition:all .3s var(--ease);
  white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn-gold span{ position:relative; z-index:1; }
.btn-gold:hover{ background:var(--gold); color:var(--obsidian); border-color:var(--gold); }

/* ---------------------------------- HERO ---------------------------------- */

.portfolio-hero{ position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; transform:translateY(0); will-change:transform; }
.hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13, 11, 8,.5) 0%, rgba(13, 11, 8,.25) 32%, rgba(13, 11, 8,.92) 86%, var(--obsidian) 100%),
    linear-gradient(90deg, rgba(13, 11, 8,.7) 0%, transparent 55%);
}
.hero-spotlight{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%), rgba(201, 169, 106,.14), transparent 65%);
  opacity:0; transition:opacity .4s var(--ease);
}
.portfolio-hero:hover .hero-spotlight{ opacity:1; }

.portfolio-hero .container{ position:relative; z-index:1; padding-bottom:88px; }
.hero-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin-bottom:22px;
}
.hero-eyebrow::before{ content:''; width:34px; height:1px; background:var(--gold-dim); }

.portfolio-hero h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3rem, 6.2vw, 6.2rem);
  line-height:1.05;
  max-width:18ch;
  letter-spacing:-.005em;
}
.portfolio-hero h1 em{ font-style:italic; color:var(--gold-bright); }

.hero-lower{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:60px; margin-top:40px; flex-wrap:wrap;
  border-top:1px solid var(--hairline-strong);
  padding-top:32px;
}
.hero-sub{ max-width:420px; color:var(--ivory-dim); font-size:1.02rem; line-height:1.75; }

.hero-scroll{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-faint);
}
.hero-scroll::after{
  content:''; width:1px; height:34px;
  background:linear-gradient(var(--gold), transparent);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------------------------------- SERVING-ACROSS MARQUEE ---------------------------------- */

.serving-marquee{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:18px 0; overflow:hidden; }
.serving-marquee-track{ display:flex; gap:56px; white-space:nowrap; animation:marquee 32s linear infinite; width:max-content; }
.serving-marquee-track span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-faint); display:inline-flex; align-items:center; gap:12px; }
.serving-marquee-track span::before{ content:'·'; color:var(--gold-dim); font-size:1rem; }
.serving-marquee-track span:first-child::before{ display:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------- STATS BAR (flat, matches homepage) ---------------------------------- */

.stats-bar{ padding:64px 0; border-bottom:1px solid var(--hairline); }
.stats-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; }
.stats-row .stat{ flex:1 1 140px; opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.stats-row .stat.in-view{ opacity:1; transform:translateY(0); }
.stats-row .stat:nth-child(2){ transition-delay:.06s; }
.stats-row .stat:nth-child(3){ transition-delay:.12s; }
.stats-row .stat:nth-child(4){ transition-delay:.18s; }
.stats-row .stat:nth-child(5){ transition-delay:.24s; }
.stats-row .stat-num{
  font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(2.2rem, 3.2vw, 2.8rem);
  color:var(--gold-bright);
  line-height:1;
}
.stats-row .stat-label{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-faint); margin-top:10px; }

/* ---------------------------------- DEPARTMENTS (category selector) ---------------------------------- */

.category-select{ padding:110px 0 100px; border-bottom:1px solid var(--hairline); }
.category-select .section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:52px; gap:40px; flex-wrap:wrap; }
.category-select h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem, 3.3vw, 3.1rem); max-width:17ch; }
.category-select h2 em{ font-style:italic; color:var(--gold-bright); }
.section-head p{ max-width:320px; color:var(--ivory-dim); font-size:.92rem; line-height:1.7; padding-bottom:4px; }

.category-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2px; background:var(--hairline); border:1px solid var(--hairline); perspective:1200px; }
.category-tile{
  position:relative; aspect-ratio:3/4.2; overflow:hidden; cursor:pointer;
  background:var(--card);
  display:flex; flex-direction:column; justify-content:flex-end;
  border:none; text-align:left; color:var(--ivory);
  transform-style:preserve-3d;
  transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease);
}
.category-tile:hover{ box-shadow:0 30px 50px -20px rgba(0,0,0,.6); }
.category-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) brightness(.6);
  clip-path:inset(0 0 0 100%);
  transition:transform 1s var(--ease), filter .6s var(--ease);
}
.category-tile.in-view img{ clip-path:inset(0 0 0 0%); transition:clip-path 1.1s var(--ease) .1s, transform 1s var(--ease), filter .6s var(--ease); }
.category-tile::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13, 11, 8,.05) 0%, rgba(13, 11, 8,.18) 40%, rgba(13, 11, 8,.95) 100%); z-index:1; }
.category-tile:hover img{ transform:scale(1.08); filter:saturate(1) brightness(.5); }

.tile-content{ position:relative; z-index:2; padding:30px 26px; }
.tile-label{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:12px; display:block; }
.tile-title{ font-family:var(--font-display); font-size:1.9rem; font-weight:500; line-height:1.1; margin-bottom:10px; }
.tile-meta{ font-size:.74rem; color:var(--ivory-dim); letter-spacing:.03em; line-height:1.6; }
.tile-count{ font-size:.74rem; color:rgba(247, 241, 227,.7); letter-spacing:.04em; margin-top:4px; }

.category-tile.tile-disabled{ cursor:default; }
.category-tile.tile-disabled img{ filter:grayscale(1) brightness(.32); }
.category-tile.tile-disabled:hover img{ transform:none; }
.category-tile.tile-active .tile-content::after{
  content:'Selected'; display:inline-block; margin-top:12px;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--obsidian); background:var(--gold); padding:5px 10px;
}

.coming-soon-note{ margin-top:26px; font-size:.82rem; color:var(--ivory-faint); letter-spacing:.02em; }
.coming-soon-note strong{ color:var(--gold-bright); font-weight:500; }

/* ---------------------------------- FILTER / SEARCH ---------------------------------- */

.filter-bar{ position:relative; padding:26px 0; }
.filter-panel{
  background:rgba(22, 19, 14,.9);
  backdrop-filter:blur(16px);
  border:1px solid var(--hairline-strong);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.6);
  padding:26px 30px;
}
.filter-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.filter-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.filter-field{ position:relative; flex:1 1 170px; min-width:150px; }
.filter-field select, .filter-field input[type="text"]{
  width:100%; background:var(--card); border:1px solid var(--hairline-strong); color:var(--ivory);
  font-size:.82rem; letter-spacing:.02em; padding:13px 16px; appearance:none; cursor:pointer;
  transition:border-color .25s var(--ease);
}
.filter-field input[type="text"]{ cursor:text; }
.filter-field select:focus, .filter-field input:focus{ border-color:var(--gold-dim); }
.filter-field::after{
  content:''; position:absolute; right:14px; top:50%;
  width:7px; height:7px; border-right:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}
.filter-field.search::after{ display:none; }
.filter-field.search{ flex:1 1 240px; }
.filter-field.search input{ padding-left:38px; }
.search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:13px; height:13px; border:1px solid var(--gold-dim); border-radius:50%; }
.search-icon::after{ content:''; position:absolute; width:6px; height:1px; background:var(--gold-dim); transform:rotate(45deg); right:-6px; bottom:-1px; }

.filter-actions{ display:flex; align-items:center; gap:16px; margin-left:auto; flex:0 0 auto; }
.results-count{ font-size:.78rem; letter-spacing:.04em; color:var(--ivory-faint); white-space:nowrap; }
.results-count strong{ color:var(--gold-bright); font-weight:500; font-family:var(--font-display); font-style:italic; font-size:1rem; }
.btn-clear{ background:none; border:none; color:var(--ivory-faint); font-size:.76rem; letter-spacing:.06em; text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:color .2s; }
.btn-clear:hover{ color:var(--gold-bright); }

/* ---------------------------------- GRID ---------------------------------- */

.portfolio-grid-section{ padding:70px 0 110px; }
.property-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px 30px; }

.property-card{ background:var(--card); border:1px solid var(--hairline-strong); position:relative; transition:transform .5s var(--ease); }
.property-card:hover{ transform:translateY(-5px); }

.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--obsidian-raised); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.property-card:hover .card-media img{ transform:scale(1.06); }
.card-media img, .media-placeholder{ clip-path:inset(0 0 0 100%); transition:clip-path .95s var(--ease) .1s; }
.property-card.in-view .card-media img, .property-card.in-view .media-placeholder{ clip-path:inset(0 0 0 0%); }

.media-placeholder{
  width:100%; height:100%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(201,169,106,.10), transparent 55%),
    repeating-linear-gradient(135deg, rgba(201, 169, 106,.045) 0 12px, transparent 12px 24px),
    var(--obsidian-raised);
  border:1px solid var(--hairline-strong);
  overflow:hidden;
}
.media-placeholder::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(201,169,106,.14) 50%, transparent 70%);
  background-size:220% 220%; background-position:120% 0;
  animation:placeholderSheen 5s ease-in-out infinite;
}
@keyframes placeholderSheen{
  0%, 100% { background-position:130% 0; }
  50% { background-position:-30% 100%; }
}
.media-placeholder-mark{
  width:44px; height:44px; opacity:.85; position:relative; z-index:1;
}
.media-placeholder span{
  position:relative; z-index:1;
  font-family:var(--font-display); font-style:italic; font-size:.78rem;
  letter-spacing:.03em; color:var(--gold-bright); opacity:.9;
}
.media-placeholder .media-placeholder-sub{
  position:relative; z-index:1;
  font-family:var(--font-body); font-style:normal; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-faint); opacity:.7;
}

.card-status{
  position:absolute; top:16px; left:16px; font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 12px; background:rgba(13, 11, 8,.75); backdrop-filter:blur(6px); border:1px solid var(--gold-dim); color:var(--gold-bright);
}
.card-curated-tag{
  position:absolute; top:16px; right:16px; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; background:var(--gold); color:var(--obsidian); font-weight:500;
  opacity:0; transform:translateY(-6px); transition:all .3s var(--ease);
}
.property-card.curated:hover .card-curated-tag{ opacity:1; transform:translateY(0); }

.card-body{ padding:26px 24px 24px; }
.card-type{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:10px; }
.card-title{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; line-height:1.2; margin-bottom:6px; }
.card-location{ font-size:.8rem; color:var(--ivory-dim); margin-bottom:18px; display:flex; align-items:center; gap:6px; }
.card-location::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-dim); flex-shrink:0; }

.card-meta{ display:flex; justify-content:space-between; padding-top:16px; margin-top:2px; border-top:1px solid var(--hairline-strong); }
.card-meta .meta-item{ display:flex; flex-direction:column; gap:3px; }
.card-meta .meta-label{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-faint); }
.card-meta .meta-value{ font-size:.86rem; color:var(--ivory); }
.card-meta .meta-value.price{ color:var(--gold-bright); font-family:var(--font-display); font-style:italic; font-size:1.08rem; }

.card-cta{ display:flex; gap:10px; margin-top:20px; }
.card-cta a{ flex:1; text-align:center; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:12px 10px; border:1px solid var(--hairline-strong); transition:all .3s var(--ease); }
.card-cta a.primary{ background:var(--gold); color:var(--obsidian); border-color:var(--gold); }
.card-cta a.primary:hover{ background:var(--gold-bright); }
.card-cta a.secondary{ color:var(--ivory-dim); }
.card-cta a.secondary:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }

/* ---------------------------------- EMPTY STATE ---------------------------------- */

.empty-state{ grid-column:1/-1; text-align:center; padding:90px 20px; border:1px dashed var(--hairline-strong); }
.empty-state h3{ font-family:var(--font-display); font-size:1.9rem; font-weight:400; margin:18px 0 10px; }
.empty-state p{ color:var(--ivory-dim); font-size:.9rem; margin-bottom:22px; }

/* ---------------------------------- LOAD MORE ---------------------------------- */

.load-more-wrap{ text-align:center; margin-top:56px; }
.btn-load-more{ border:1px solid var(--gold-dim); background:transparent; color:var(--gold-bright); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:16px 44px; cursor:pointer; transition:all .3s var(--ease); }
.btn-load-more:hover{ background:var(--gold); color:var(--obsidian); }
.load-more-note{ margin-top:14px; font-size:.76rem; color:var(--ivory-faint); letter-spacing:.04em; }

/* ---------------------------------- SCROLL REVEAL ----------------------------------
   Cards and tiles are visible immediately by default — the fade/slide is a
   progressive enhancement added only once JS confirms it can run (see the
   ".js-reveal-ready" class toggle in explore.js). This guarantees every
   property card and its image/placeholder is visible even if JS is slow,
   blocked, or the IntersectionObserver never fires. */
.js-reveal-ready .category-tile, .js-reveal-ready .property-card{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease-spring); }
.js-reveal-ready .category-tile.in-view, .js-reveal-ready .property-card.in-view{ opacity:1; transform:translateY(0); }
.property-grid .property-card:nth-child(2){ transition-delay:.06s; }
.property-grid .property-card:nth-child(3){ transition-delay:.12s; }
.category-grid .category-tile:nth-child(2){ transition-delay:.08s; }
.category-grid .category-tile:nth-child(3){ transition-delay:.16s; }
.category-grid .category-tile:nth-child(4){ transition-delay:.24s; }

/* ---------------------------------- FOOTER (matches live site's 4-column layout) ---------------------------------- */

.site-footer{ border-top:1px solid var(--hairline); padding:80px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:56px; }
.footer-brand p{ color:var(--ivory-dim); font-size:.88rem; line-height:1.7; margin:16px 0 22px; max-width:32ch; }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:36px; height:36px; border:1px solid var(--hairline-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ivory-dim);
  transition:all .25s var(--ease);
}
.footer-social a:hover{ border-color:var(--gold); color:var(--gold-bright); }
.footer-social svg{ width:15px; height:15px; }

.footer-col h4{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:20px; }
.footer-col a, .footer-col p{ display:block; font-size:.86rem; color:var(--ivory-dim); line-height:2; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-col .label{ color:var(--ivory-faint); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; margin-top:14px; }

.footer-bottom{
  border-top:1px solid var(--hairline);
  padding:26px 0;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
}
.footer-bottom p{ font-size:.76rem; color:var(--ivory-faint); }
.footer-bottom a{ color:var(--ivory-faint); }
.footer-bottom a:hover{ color:var(--gold-bright); }

/* ---------------------------------- FLOATING CTA CLUSTER ---------------------------------- */

.floating-cta{ position:fixed; right:26px; bottom:26px; z-index:200; display:flex; flex-direction:column; align-items:center; gap:14px; }
.fab{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--hairline-strong); position:relative; transition:transform .3s var(--ease-spring), background .3s var(--ease); }
.fab svg{ width:24px; height:24px; position:relative; z-index:1; }
.fab-whatsapp{ background:var(--obsidian-raised); color:var(--gold-bright); }
.fab-whatsapp:hover{ transform:translateY(-3px) scale(1.06); }
.fab-ring{ position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--gold-dim); animation:fabPulse 2.6s var(--ease) infinite; }
@keyframes fabPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
.fab-chat{ background:var(--gold); color:var(--obsidian); border:none; }
.fab-chat:hover{ background:var(--gold-bright); }
.fab-chat .icon-close{ display:none; }
.fab-chat.is-open .icon-chat{ display:none; }
.fab-chat.is-open .icon-close{ display:block; }

/* ---------------------------------- CONCIERGE CHAT ---------------------------------- */

.concierge-panel{
  position:fixed; right:26px; bottom:100px; z-index:199;
  width:340px; max-width:calc(100vw - 40px);
  background:var(--card); border:1px solid var(--hairline-strong);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.7);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease-spring);
}
.concierge-panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.concierge-header{ padding:20px 22px; border-bottom:1px solid var(--hairline-strong); background:var(--obsidian-raised); }
.concierge-title{ font-family:var(--font-display); font-size:1.2rem; color:var(--gold-bright); }
.concierge-status{ font-size:.72rem; color:var(--ivory-faint); letter-spacing:.04em; display:flex; align-items:center; gap:7px; margin-top:5px; }
.concierge-status .dot{ width:6px; height:6px; border-radius:50%; background:#6FBE8F; box-shadow:0 0 0 3px rgba(111,190,143,.2); }
.concierge-body{ padding:20px 22px; display:flex; flex-direction:column; gap:12px; max-height:280px; overflow-y:auto; }
.msg{ font-size:.85rem; line-height:1.55; padding:12px 14px; max-width:88%; }
.msg-bot{ background:var(--obsidian-raised); color:var(--ivory-dim); align-self:flex-start; border:1px solid var(--hairline-strong); }
.msg-user{ background:var(--gold); color:var(--obsidian); align-self:flex-end; font-weight:500; }
.concierge-quick{ padding:16px 22px 22px; display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--hairline-strong); }
.concierge-quick button{ flex:1 1 auto; background:transparent; border:1px solid var(--hairline-strong); color:var(--gold-bright); font-size:.74rem; letter-spacing:.05em; padding:10px 14px; cursor:pointer; transition:all .25s var(--ease); white-space:nowrap; }
.concierge-quick button:hover{ background:var(--gold); color:var(--obsidian); }
.concierge-quick button[data-action="whatsapp"]{ flex-basis:100%; border-color:var(--gold-dim); }

/* ---------------------------------- RESPONSIVE ---------------------------------- */

@media (max-width:1080px){
  .property-grid{ grid-template-columns:repeat(2, 1fr); }
  .category-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .main-nav{ display:none; }
  .hero-lower{ flex-direction:column; align-items:flex-start; gap:26px; }
  .filter-actions{ margin-left:0; width:100%; justify-content:space-between; }
  .category-select .section-head{ flex-direction:column; align-items:flex-start; }
  .stats-row{ justify-content:flex-start; }
}

@media (max-width:640px){
  .container{ padding:0 20px; }
  .property-grid{ grid-template-columns:1fr; }
  .category-grid{ grid-template-columns:1fr; }
  .portfolio-hero{ min-height:78vh; }
  .filter-bar{ top:0; position:static; padding:20px 0; }
  .filter-panel{ padding:20px; }
  .site-header .container{ height:76px; }
  .card-cta{ flex-direction:column; }
  .category-select{ padding:64px 0; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .floating-cta{ right:16px; bottom:16px; }
  .fab{ width:52px; height:52px; }
  .concierge-panel{ right:16px; bottom:84px; width:calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-bg img, .serving-marquee-track, .fab-ring, .curtain-panel, .hero-scroll::after{ animation:none !important; }
  .curtain{ display:none !important; }
  .category-tile, .property-card, .category-tile img, .card-media img, .media-placeholder{
    opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
  }
}

/* ---------------------------------- EMI CALCULATOR FLOATING WIDGET (left side, stacked above chat) ---------------------------------- */
.float-emi {
  position: fixed; left: 30px; right: auto; bottom: 166px; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 22px 0 0; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--gold-dim);
  box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 0 var(--gold-glow);
  cursor: pointer; transition: transform .35s var(--ease-out), background .3s, box-shadow .3s, padding .3s;
  animation: emiFloatIn .8s var(--ease-luxury) .6s both, emiPulseGlow 3.2s ease-in-out 1.6s infinite;
}
.float-emi:hover {
  transform: translateY(-3px);
  background: var(--gold); border-color: var(--gold);
}
.float-emi:hover .float-emi-icon,
.float-emi:hover .float-emi-label { color: var(--bg-deep); }

.float-emi-ring {
  position: absolute; left: 0; top: 0; width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--gold-dim); opacity: 0;
  animation: emiRingPulse 3.2s ease-out 1.6s infinite;
}

.float-emi-icon {
  position: relative; width: 58px; height: 58px; min-width: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold);
  transition: color .3s;
}

.float-emi-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-light); white-space: nowrap; transition: color .3s;
}

@keyframes emiFloatIn {
  from { opacity: 0; transform: translateY(24px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes emiPulseGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 0 var(--gold-glow); }
  50%      { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 10px transparent; }
}
@keyframes emiRingPulse {
  0%   { transform: scale(1); opacity: .6; }
  80%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 640px) {
  .float-emi { padding-right: 0; gap: 0; }
  .float-emi-label { display: none; }
}

.emi-panel {
  position: fixed; left: 30px; right: auto; bottom: 234px; z-index: 9997;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--bg-elevated); border: 1px solid var(--hairline);
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.7);
  padding: 26px 26px 22px;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-luxury);
}
.emi-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.emi-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.emi-panel-title { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--gold-light); }
.emi-close { background: none; border: none; color: var(--muted); cursor: pointer; width: 26px; height: 26px; }
.emi-row { margin-bottom: 16px; }
.emi-row-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.emi-row-head span:last-child { color: var(--gold-light); font-family: var(--font-display); font-style: italic; font-size: 14px; }
.emi-row input[type="range"] {
  width: 100%; accent-color: var(--gold); background: transparent;
}
.emi-result {
  margin-top: 20px; padding: 18px; background: var(--bg-surface); border: 1px solid var(--hairline); text-align: center;
}
.emi-result-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.emi-result-value { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--gold-light); }
.emi-breakdown { display: flex; justify-content: space-between; margin-top: 14px; font-size: 11px; color: var(--muted); }
.emi-breakdown strong { color: var(--cream-soft); font-weight: 500; display: block; margin-top: 2px; font-size: 13px; }
.emi-note { margin-top: 14px; font-size: 10.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 640px) {
  .float-emi { left: 16px; right: auto; bottom: 150px; width: 52px; height: 52px; padding: 0; }
  .float-emi-icon, .float-emi-ring { width: 52px; height: 52px; }
  .emi-panel { left: 16px; right: auto; bottom: 210px; width: calc(100vw - 32px); }
}