/* =============================================================
   Buck Global Living — Marketplace v2
   Bento Hero · Editorial Showcase · Filter · Sticky Mobile
   Brand: Atlantic Deep · Costa Sand · Eucalypto · Paper
   ============================================================= */

.page-marketplace{
  background: var(--surface);
  color: var(--ink);
}

/* ---------- shared atoms ---------- */
.mp-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Inter', sans-serif;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color: var(--harbor);
  margin: 0 0 1.25rem 0;
}
.mp-eyebrow .dot{
  display:inline-block;
  width:6px; height:6px; border-radius: 50%;
  background: var(--euca);
  box-shadow: 0 0 0 4px rgba(124,148,131,.18);
}
.mp-eyebrow.light{ color: rgba(217,201,174,.85); }
.mp-eyebrow.light .dot{ background: var(--sand); box-shadow:0 0 0 4px rgba(217,201,174,.18); }

.mp-section-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color: var(--harbor);
  margin: 0 0 1.25rem 0;
}

.mp-h1{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  line-height: .98;
  letter-spacing:-0.02em;
  color: var(--atlantic);
  margin: 0;
}
.mp-h1 em{ font-style: italic; font-weight:300; color: var(--harbor); }
.mp-h1 .line{ display:block; overflow:hidden; }

.mp-h2{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height:1.05;
  letter-spacing:-0.015em;
  color: var(--atlantic);
  margin: 0;
}
.mp-h2 em{ font-style: italic; font-weight:300; color: var(--harbor); }
.mp-h2 .line{ display:block; overflow:hidden; }
.mp-h2.light{ color: var(--paper); }
.mp-h2.light em{ color: var(--sand); }

/* ============================================================
   NAV — sticky, light
============================================================ */
.mp-nav{
  position: sticky; top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(251, 250, 245, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.mp-logo{
  display:inline-flex; align-items:center; gap:.6rem;
  color: var(--atlantic);
  flex: 0 0 auto;
}
.mp-logo:hover{ opacity:1; }
.mp-logo svg{ flex:0 0 auto; color: var(--atlantic); }
.mp-logo-text{
  display:flex; flex-direction:column;
  font-family:'Inter', sans-serif;
  letter-spacing:-.005em;
  line-height: .98;
}
.mp-logo-1{ font-weight:600; font-size:.9rem; color: var(--atlantic); }
.mp-logo-2{ font-weight:400; font-size:.7rem; color: var(--harbor); letter-spacing:.04em; text-transform: uppercase; margin-top:2px; }

.mp-nav-links{
  display:flex; align-items:center; gap: 2rem;
  margin-left: auto; margin-right: auto;
  font-family:'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing:-0.005em;
}
.mp-nav-link{
  color: var(--atlantic);
  opacity: .68;
  position: relative;
  padding: .35rem 0;
  transition: opacity 180ms cubic-bezier(.16,1,.3,1);
}
.mp-nav-link:hover{ opacity: 1; }
.mp-nav-link.is-active{ opacity: 1; }
.mp-nav-link.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom: -2px;
  height: 1px;
  background: var(--atlantic);
}

.mp-cta-line{
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .65rem 1.05rem;
  border: 1px solid var(--atlantic);
  background: transparent;
  color: var(--atlantic);
  font-family:'Inter', sans-serif;
  font-size: .8rem; font-weight: 500;
  letter-spacing:.005em;
  border-radius: 999px;
  transition: background 220ms cubic-bezier(.16,1,.3,1), color 220ms cubic-bezier(.16,1,.3,1);
  flex: 0 0 auto;
}
.mp-cta-line:hover{ background: var(--atlantic); color: var(--paper); opacity:1; }
.mp-cta-line svg{ transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.mp-cta-line:hover svg{ transform: translateX(3px); }

.mp-burger{
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.mp-burger span{
  display:block; width:18px; height:1px;
  background: var(--atlantic);
  transition: transform 220ms cubic-bezier(.16,1,.3,1), opacity 220ms cubic-bezier(.16,1,.3,1);
}
body.mp-nav-open .mp-burger span:nth-child(1){ transform: translateY(3px) rotate(45deg); }
body.mp-nav-open .mp-burger span:nth-child(2){ transform: translateY(-3px) rotate(-45deg); }

/* mobile dropdown for nav links */
@media (max-width: 1024px){
  .mp-nav-links{
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 5rem clamp(1.25rem, 4vw, 2.5rem);
    background: var(--paper);
    margin: 0;
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform 480ms cubic-bezier(.16,1,.3,1), visibility 0s linear 480ms;
    z-index: 49;
  }
  body.mp-nav-open .mp-nav-links{
    transform: translateY(0);
    visibility: visible;
    transition: transform 480ms cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
  }
  .mp-nav-link{
    font-family:'Fraunces', serif;
    font-weight: 300;
    font-size: 2rem;
    letter-spacing: -0.01em;
    opacity: 1;
  }
  .mp-burger{ display: flex; margin-left: auto; z-index: 50; }
  .mp-cta-line{ display: none; }
}

/* ============================================================
   BENTO HERO
============================================================ */
.mp-hero{
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vh, 4.5rem);
}
.mp-hero-grid{
  width:100%; max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}
.bento{
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}
/* tile A — headline (left, large) */
.bento-headline{
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(360px, 52vh, 520px);
  border: 1px solid var(--hairline);
}
.mp-h1-sub{
  font-family:'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(.98rem, 1.1vw, 1.08rem);
  line-height: 1.55;
  color: #364450;
  max-width: 52ch;
  margin: 1.4rem 0 0 0;
}
.mp-h1-actions{
  display: flex; flex-wrap: wrap; gap: .75rem 1rem;
  margin-top: 1.6rem;
}

/* tile B — video (right top, large) */
.bento-video{
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  background: var(--atlantic);
  min-height: clamp(360px, 52vh, 520px);
}
.bento-video-el{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(.86) saturate(.95);
}
.bento-video::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,42,58,0) 30%, rgba(14,42,58,.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.bento-overlay{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--paper);
}
.bento-tag{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sand);
  margin: 0 0 .45rem 0;
}
.bento-caption{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  color: var(--paper);
  margin: 0;
  max-width: 28ch;
}

/* tile C — stat */
.bento-stat{
  grid-column: 1 / span 4;
  grid-row: 3;
  background: var(--atlantic);
  color: var(--paper);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: .5rem;
  min-height: 220px;
}
.bento-stat-label{
  font-family:'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(217,201,174,.78);
  margin: 0;
}
.bento-stat-num{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(3rem, 5vw, 4.6rem);
  line-height: .92;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: .25rem 0 .25rem 0;
}
.bento-stat-sub{
  font-family:'Inter', sans-serif;
  font-size: .82rem;
  color: rgba(246,243,236,.68);
  margin: 0 0 .9rem 0;
}
.bento-stat-list{
  list-style: none; margin: auto 0 0 0; padding: .75rem 0 0 0;
  display: flex; flex-direction: column; gap: .35rem;
  border-top: 1px solid rgba(246,243,236,.16);
}
.bento-stat-list li{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: .85rem;
  font-family:'Inter', sans-serif;
  font-size: .82rem;
  color: rgba(246,243,236,.85);
}
.bento-stat-list li > span:first-child{
  font-family:'Fraunces', serif;
  font-weight: 400;
  color: var(--sand);
  font-size: .92rem;
  letter-spacing: -0.01em;
}

/* tile D — preview (image link) */
.bento-preview{
  grid-column: 5 / span 4;
  grid-row: 3;
  display: block;
  background: var(--paper);
  min-height: 220px;
  color: var(--paper);
  border-radius: 4px;
  overflow: hidden;
}
.bento-preview img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.bento-preview::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,42,58,.05) 30%, rgba(14,42,58,.62) 100%);
  z-index: 1;
  pointer-events: none;
}
.bento-preview:hover{ opacity: 1; }
.bento-preview:hover img{ transform: scale(1.04); }
.bento-preview-meta{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1rem, 1.6vw, 1.4rem);
}
.bento-preview-loc{
  font-family:'Fraunces', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 .15rem 0;
  line-height: 1.15;
}
.bento-preview-spec{
  font-family:'Inter', sans-serif;
  font-size: .78rem;
  color: rgba(217,201,174,.92);
  margin: 0;
  letter-spacing: .005em;
}
.bento-preview-arrow{
  position: absolute;
  top: clamp(.85rem, 1.4vw, 1.2rem);
  right: clamp(.85rem, 1.4vw, 1.2rem);
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(246,243,236,.15);
  border: 1px solid rgba(246,243,236,.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--paper);
  transition: background 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1);
}
.bento-preview:hover .bento-preview-arrow{
  background: var(--paper);
  color: var(--atlantic);
  transform: translate(2px, -2px);
}

/* tile E — region */
.bento-region{
  grid-column: 9 / span 4;
  grid-row: 3;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: .75rem;
  min-height: 220px;
}
.bento-region-eyebrow{
  font-family:'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--harbor);
  margin: 0 0 .3rem 0;
}
.bento-region-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .85rem;
}
.bento-region-list li{
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: .35rem 0;
  border-top: 1px solid var(--hairline);
}
.bento-region-list li:first-child{ border-top: 0; padding-top: 0; }
.r-dot{
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--euca);
  box-shadow: 0 0 0 3px rgba(124,148,131,.2);
}
.r-dot.inactive{
  background: var(--hairline);
  box-shadow: 0 0 0 3px rgba(201,195,182,.25);
}
.r-name{
  font-family:'Inter', sans-serif;
  font-weight: 500;
  font-size: .9rem;
  color: var(--atlantic);
  letter-spacing: -0.005em;
}
.r-meta{
  font-family:'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* primary / line buttons */
.btn-primary{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.35rem;
  background: var(--atlantic);
  color: var(--paper);
  font-family:'Inter', sans-serif;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .01em;
  border-radius: 999px;
  border: 1px solid var(--atlantic);
  transition: background 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover{ background: #14384c; transform: translateY(-1px); opacity: 1; }
.btn-primary svg{ transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.btn-primary:hover svg{ transform: translateX(3px); }
.btn-primary.light{
  background: var(--paper);
  color: var(--atlantic);
  border-color: var(--paper);
}
.btn-primary.light:hover{ background: var(--sand); }

.btn-line{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.3rem;
  background: transparent;
  color: var(--atlantic);
  font-family:'Inter', sans-serif;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .01em;
  border-radius: 999px;
  border: 1px solid var(--atlantic);
  transition: background 220ms cubic-bezier(.16,1,.3,1), color 220ms cubic-bezier(.16,1,.3,1);
}
.btn-line:hover{ background: var(--atlantic); color: var(--paper); opacity: 1; }
.btn-line.light{
  color: var(--paper);
  border-color: rgba(246,243,236,.45);
}
.btn-line.light:hover{ background: var(--paper); color: var(--atlantic); border-color: var(--paper); }

/* ============================================================
   MARQUEE BAND
============================================================ */
.mp-marquee{
  background: var(--atlantic);
  color: var(--paper);
  border-top: 1px solid rgba(246,243,236,.10);
  border-bottom: 1px solid rgba(246,243,236,.10);
  overflow: hidden;
  padding: 1.4rem 0;
}
.mp-marquee-track{
  display: inline-flex;
  gap: 2.5rem;
  white-space: nowrap;
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  animation: mp-marquee 42s linear infinite;
  will-change: transform;
}
.mp-marquee-track span{ color: var(--paper); display:inline-flex; align-items:center; }
.mp-marquee-track span em{ font-style: italic; color: var(--paper); }
.mp-marquee-track span.dot{ color: var(--sand); opacity:.7; font-size:1.2rem; }
@keyframes mp-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ============================================================
   FILTER STRIP
============================================================ */
.mp-filter{
  background: var(--surface);
  padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 4vh, 3rem);
}
.mp-filter-inner{
  width: 100%; max-width: 1440px;
  margin: 0 auto;
}
.mp-filter-head{
  margin-bottom: 2.5rem;
}
.mp-filter-head .mp-h2{
  max-width: 18ch;
}
.mp-filter-bar{
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.filter-chip{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  background: transparent;
  color: var(--atlantic);
  font-family:'Inter', sans-serif;
  font-size: .82rem; font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 220ms cubic-bezier(.16,1,.3,1), color 220ms cubic-bezier(.16,1,.3,1), border-color 220ms cubic-bezier(.16,1,.3,1);
  cursor: pointer;
}
.filter-chip span{
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: .04em;
}
.filter-chip:hover{ border-color: var(--hairline); }
.filter-chip.is-active{
  background: var(--atlantic);
  color: var(--paper);
  border-color: var(--atlantic);
}
.filter-chip.is-active span{ color: var(--sand); }
.filter-divider{
  width: 1px; height: 22px;
  background: var(--hairline);
  margin: 0 .25rem;
}
.filter-pdf{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem;
  background: transparent;
  color: var(--harbor);
  font-family:'Inter', sans-serif;
  font-size: .8rem; font-weight: 500;
  letter-spacing: .005em;
  border-radius: 999px;
  margin-left: auto;
  transition: color 220ms cubic-bezier(.16,1,.3,1);
}
.filter-pdf:hover{ color: var(--atlantic); opacity: 1; }
.filter-pdf svg{ flex: 0 0 auto; }

/* ============================================================
   PROPERTY EDITORIAL STRIPE
============================================================ */
.mp-prop{
  background: var(--surface);
  padding: clamp(3rem, 6vh, 5rem) clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  transition: opacity 280ms cubic-bezier(.2,.7,.2,1);
}
.mp-prop.is-hidden{ display: none; }

.mp-prop-grid{
  width: 100%; max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "head head head head figmain figmain figmain figmain figmain figmain figmain figmain"
    "body body body body body body body specs specs specs specs specs"
    "figa figa figa figa figa figa figb figb figb figb figb figb"
    "actions actions actions actions actions actions actions actions actions actions actions actions";
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.mp-prop.alt .mp-prop-grid{
  grid-template-areas:
    "figmain figmain figmain figmain figmain figmain figmain figmain head head head head"
    "specs specs specs specs specs body body body body body body body"
    "figb figb figb figb figb figb figa figa figa figa figa figa"
    "actions actions actions actions actions actions actions actions actions actions actions actions";
}

.mp-prop-head{ grid-area: head; padding-top: 1rem; }
.mp-prop-figmain{ grid-area: figmain; }
.mp-prop-body{ grid-area: body; }
.mp-prop-specs{ grid-area: specs; }
.mp-prop-figa{ grid-area: figa; }
.mp-prop-figb{ grid-area: figb; }
.mp-prop-actions{ grid-area: actions; }

.mp-prop-index{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--harbor);
  letter-spacing: -0.01em;
  margin: 0 0 1rem 0;
}
.mp-prop-tags{
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 0 0 1.25rem 0;
}
.tag{
  display: inline-block;
  padding: .3rem .7rem;
  font-family:'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--sand);
  color: var(--harbor);
  background: transparent;
}
.tag-strong{
  background: var(--atlantic);
  color: var(--paper);
  border-color: var(--atlantic);
}
.mp-prop-title{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--atlantic);
  margin: 0 0 .65rem 0;
}
.mp-prop-title em{ font-style: italic; color: var(--harbor); font-weight: 300; }
.mp-prop-loc{
  font-family:'Inter', sans-serif;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* main image */
.mp-prop-figmain{
  margin: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper);
}
.mp-prop-figmain img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms cubic-bezier(.2,.7,.2,1);
}
.mp-prop:hover .mp-prop-figmain img{ transform: scale(1.02); }

/* body */
.mp-prop-lead{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: var(--atlantic);
  margin: 0 0 1rem 0;
}
.mp-prop-desc{
  font-family:'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #2a3942;
  margin: 0;
  max-width: 56ch;
}

/* specs */
.mp-prop-specs{
  margin: 0;
  padding: 1.5rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
.mp-prop-specs > div{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--hairline);
}
.mp-prop-specs > div:last-child{ border-bottom: 0; padding-bottom: 0; }
.mp-prop-specs dt{
  font-family:'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.mp-prop-specs dd{
  margin: 0;
  font-family:'Fraunces', serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--atlantic);
  letter-spacing: -0.005em;
  text-align: right;
}

/* secondary figs */
.mp-prop-figa, .mp-prop-figb{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper);
}
.mp-prop-figa img, .mp-prop-figb img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms cubic-bezier(.2,.7,.2,1);
}
.mp-prop:hover .mp-prop-figa img,
.mp-prop:hover .mp-prop-figb img{ transform: scale(1.02); }

/* actions */
.mp-prop-actions{
  display: flex; flex-wrap: wrap; gap: .75rem 1rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

/* ============================================================
   DISCRETION NOTE
============================================================ */
.mp-discreet{
  background: var(--surface);
  padding: clamp(2.5rem, 5vh, 4rem) clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline);
}
.mp-discreet-inner{
  width: 100%; max-width: 1440px;
  margin: 0 auto;
  display: flex; align-items: flex-start; gap: 1rem;
}
.mp-discreet-rule{
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--harbor);
  margin-top: .9rem;
  flex: 0 0 auto;
}
.mp-discreet p{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--harbor);
  max-width: 64ch;
  margin: 0;
}

/* ============================================================
   PROCESS / SERVICE
============================================================ */
.mp-service{
  background: var(--surface);
  padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 4vw, 2.5rem) clamp(5rem, 10vh, 8rem);
  border-top: 1px solid var(--hairline);
}
.mp-section-head{
  width:100%; max-width: 1440px;
  margin: 0 auto clamp(3rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.mp-section-head .mp-h2{ grid-column: 1 / span 8; }
.mp-section-side{
  grid-column: 9 / span 4;
  font-family:'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
}
.mp-section-side p{ margin: 0; color: inherit; }
.mp-section-side-double p + p{ margin-top: 1rem; }

.mp-service-grid{
  width:100%; max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.mp-service-panel{
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 3rem);
  display: flex; flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.mp-service-title{
  font-family:'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--atlantic);
  letter-spacing: -0.01em;
  margin: 0 0 .25rem 0;
}
.mp-service-title em{ font-style: italic; color: var(--harbor); font-weight: 300; }
.mp-service-desc{
  font-size: 1rem; line-height: 1.55;
  color: #364450;
  margin: 0 0 1rem 0;
}
.mp-service-tabs{
  list-style: none;
  margin: auto 0 0 0;
  padding: 1.5rem 0 0 0;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  gap: .85rem;
}
.mp-service-tabs li{
  font-family:'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -0.005em;
  display: flex; gap: .5rem;
}
.mp-service-tabs li.is-active{ color: var(--atlantic); }
.mp-service-tabs li.is-active span{ color: var(--harbor); }
.mp-service-fig{
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
}
.mp-service-fig img{
  width:100%; height:100%; object-fit: cover;
}

/* ============================================================
   STATS SECTION
============================================================ */
section.mp-stats{
  background: var(--surface);
  padding: clamp(4rem, 8vh, 6rem) clamp(1.25rem, 4vw, 2.5rem) clamp(5rem, 10vh, 8rem);
  border-top: 1px solid var(--hairline);
}
.mp-stat-cards{
  width:100%; max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.mp-stat-card{
  background: var(--paper);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  min-height: 320px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.mp-stat-label{
  font-family:'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(14,42,58,.5);
  font-weight: 500;
  margin: 0;
}
.mp-stat-value{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  letter-spacing: -0.02em;
  color: var(--atlantic);
  margin: 0;
  line-height: 1;
}
.mp-bars{
  display: flex; align-items: flex-end;
  gap: 6%;
  height: 110px;
  min-height: 110px;
  flex: 0 0 110px;
  width: 100%;
}
.mp-bars .bar{
  flex: 1;
  position: relative;
  background: linear-gradient(to top, rgba(14,42,58,.06), rgba(14,42,58,.18));
  height: 0;
  transition: height 1.2s cubic-bezier(.2,.7,.2,1);
  border-radius: 1px;
}
.mp-bars .bar::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--atlantic);
}
.mp-stat-foot{
  font-family:'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   FINAL CTA
============================================================ */
.mp-final{
  background: var(--atlantic);
  color: var(--paper);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(246,243,236,.10);
}
.mp-final-inner{
  width:100%; max-width: 1240px;
  margin: 0 auto;
}
.mp-final .mp-h2{ margin-bottom: 1.5rem; max-width: 18ch; }
.mp-final-sub{
  font-family:'Fraunces', serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(246,243,236,.78);
  max-width: 50ch;
  margin: 0 0 2.25rem 0;
}
.mp-final-actions{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.25rem;
}

/* ============================================================
   STICKY MOBILE BAR
============================================================ */
.mp-sticky-mobile{
  display: none;
}
@media (max-width: 768px){
  .mp-sticky-mobile{
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    display: flex;
    gap: .5rem;
    padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom, 0));
    background: rgba(251, 250, 245, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--hairline);
  }
  .mp-sticky-portfolio{
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    flex: 0 0 auto;
    padding: .8rem 1rem;
    font-family:'Inter', sans-serif;
    font-size: .8rem; font-weight: 500;
    color: var(--atlantic);
    background: var(--paper);
    border: 1px solid var(--atlantic);
    border-radius: 999px;
  }
  .mp-sticky-cta{
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    flex: 1 1 auto;
    padding: .8rem 1rem;
    font-family:'Inter', sans-serif;
    font-size: .85rem; font-weight: 500;
    color: var(--paper);
    background: var(--atlantic);
    border: 1px solid var(--atlantic);
    border-radius: 999px;
  }
  /* leave room above sticky bar */
  body.page-marketplace{ padding-bottom: 76px; }
}

/* ============================================================
   REVEAL ANIMATIONS
============================================================ */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1100ms cubic-bezier(.16,1,.3,1),
    transform 1100ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* Editorial line-reveal for big headlines */
.mp-h1 .line > .inner,
.mp-h2 .line > .inner{
  display: block;
  transform: translateY(110%);
  transition: transform 1300ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--line-delay, 0s);
}
.mp-h1 .line:nth-child(2) > .inner,
.mp-h2 .line:nth-child(2) > .inner{ --line-delay: .12s; }
.mp-h1 .line:nth-child(3) > .inner,
.mp-h2 .line:nth-child(3) > .inner{ --line-delay: .24s; }
/* Image figures: subtle scale + brightness on entry */
figure[data-reveal] img,
.mp-prop-figmain[data-reveal] img,
.mp-prop-figa[data-reveal] img,
.mp-prop-figb[data-reveal] img,
.bento-preview[data-reveal] img,
.bento-video[data-reveal] video{
  transform: scale(1.04);
  filter: brightness(.92) saturate(.96);
  transition:
    transform 1600ms cubic-bezier(.16,1,.3,1),
    filter 1400ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, filter;
}
figure[data-reveal].is-visible img,
.mp-prop-figmain[data-reveal].is-visible img,
.mp-prop-figa[data-reveal].is-visible img,
.mp-prop-figb[data-reveal].is-visible img,
.bento-preview[data-reveal].is-visible img,
.bento-video[data-reveal].is-visible video{
  transform: scale(1);
  filter: brightness(1) saturate(1);
}
/* Eyebrow rule reveal — 32px hairline scaling in */
.mp-eyebrow[data-reveal]::before,
.mp-prop-index[data-reveal]::before,
.mp-section-eyebrow[data-reveal]::before{
  content:"";
  display:inline-block;
  width:32px;
  height:1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity:.4;
  transition: transform 900ms cubic-bezier(.16,1,.3,1) calc(var(--reveal-delay, 0s) + .1s);
}
.mp-eyebrow[data-reveal].is-visible::before,
.mp-prop-index[data-reveal].is-visible::before,
.mp-section-eyebrow[data-reveal].is-visible::before{
  transform: scaleX(1);
}
.is-visible .mp-h1 .line > .inner,
.is-visible .mp-h2 .line > .inner,
.mp-h1.is-visible .line > .inner,
.mp-h2.is-visible .line > .inner{ transform: translateY(0); }
.is-visible .mp-h1 .line:nth-child(2) > .inner,
.is-visible .mp-h2 .line:nth-child(2) > .inner,
.mp-h1.is-visible .line:nth-child(2) > .inner,
.mp-h2.is-visible .line:nth-child(2) > .inner{ transition-delay: 120ms; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px){
  /* simplify Bento grid */
  .mp-hero-grid{
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(120px, auto);
  }
  .bento-headline{ grid-column: 1 / -1; grid-row: 1; min-height: auto; }
  .bento-video   { grid-column: 1 / -1; grid-row: 2; min-height: 320px; }
  .bento-stat    { grid-column: 1 / span 3; grid-row: 3; }
  .bento-preview { grid-column: 4 / span 3; grid-row: 3; min-height: 220px; }
  .bento-region  { grid-column: 1 / -1; grid-row: 4; }

  /* property layout simplifies */
  .mp-prop-grid,
  .mp-prop.alt .mp-prop-grid{
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "head head head head head head"
      "figmain figmain figmain figmain figmain figmain"
      "body body body body specs specs"
      "figa figa figa figb figb figb"
      "actions actions actions actions actions actions";
  }
  .mp-section-head{ grid-template-columns: 1fr; gap: 1.5rem; }
  .mp-section-head .mp-h2{ grid-column: 1; }
  .mp-section-side{ grid-column: 1; max-width: 56ch; }
  .mp-stat-cards{ grid-template-columns: repeat(2, 1fr); }
  .mp-service-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .mp-hero{ padding-top: 1.25rem; }
  .mp-hero-grid{ grid-template-columns: 1fr; }
  .bento-headline,
  .bento-video,
  .bento-stat,
  .bento-preview,
  .bento-region{
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .bento-headline{ padding: 1.5rem; }
  .bento-video{ min-height: 280px; }

  .mp-filter-bar{
    border-radius: 16px;
    padding: .85rem;
  }
  .filter-pdf{ margin-left: 0; padding: .55rem .65rem; }
  .filter-divider{ display: none; }

  .mp-prop-grid,
  .mp-prop.alt .mp-prop-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "figmain"
      "body"
      "specs"
      "figa"
      "figb"
      "actions";
  }
  .mp-prop-figmain{ aspect-ratio: 4 / 3; }

  .mp-stat-cards{ grid-template-columns: 1fr; }
  .mp-stat-card{ min-height: 240px; }

  .mp-marquee-track{ font-size: 1.3rem; }
  .mp-discreet-inner{ flex-direction: column; gap: .85rem; }
  .mp-discreet-rule{ margin-top: 0; }
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .mp-h1 .line > .inner, .mp-h2 .line > .inner{ transform: none; transition: none; }
  .mp-marquee-track{ animation: none; }
  .mp-bars .bar{ transition: none; }
  .mp-prop, .mp-prop-figmain img, .mp-prop-figa img, .mp-prop-figb img,
  .bento-preview img{ transition: none !important; }
}