/* =========================================================
   RESET / BASE
========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:#0e0e0e;
  color:#111;
  overflow-x:hidden;
}

button:focus { outline:none; }
button, a { -webkit-tap-highlight-color:transparent; }

/* =========================================================
   THEME / UI COLOR (logo + toggle inherit this)
========================================================= */
:root { --ui:#fff; }
.site-header { color: var(--ui); }

/* when a light section is in view, flip header UI to black */
.site-header.dark-logo { --ui:#111; }
.site-header .brand .brand-img { transition: filter .25s ease; }
.site-header.dark-logo .brand .brand-img { filter:none; } /* use dark asset */

/* =========================================================
   HEADER (transparent, aligned top-left)
========================================================= */
/* HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1400; /* was 1000 — put it above .site-menu(1200) */
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 28px);
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.site-header.hidden { opacity: 0; pointer-events: none; }

/* Brand (real image, same height as toggle) */
.site-header .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;               /* same as toggle icon height */
  width: auto;
  max-width: clamp(120px, 10vw, 180px);
  overflow: visible;
  line-height: 0;
  will-change: opacity;
}
.site-header .brand::before { display: none !important; }
.site-header .brand .brand-img {
  display: block !important;
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1); /* white by default */
}
.site-header .brand .brand-fallback { display: none !important; }

/* =========================================================
   GALLERY TOGGLE (two diagonal arrows)
========================================================= */
#galleryToggle {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ui);
  line-height: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease; /* follows header color flip */
}
#galleryToggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 8px;
}
/* remove any legacy burger lines */
#galleryToggle::before,
#galleryToggle::after,
#galleryToggle span { display: none !important; }

/* =========================================================
   HERO (full-bleed under transparent header)
========================================================= */
.hero{
  height:100vh; height:100svh;
  position:relative; overflow:hidden; background:#111;
  padding-top:0;
  transform-origin:center center;
  will-change:transform, filter;
  z-index:900;
}
.hero.on-top{ z-index:1200; }
.hero.hidden{ opacity:0; pointer-events:none; visibility:hidden; }

.gallery-track{ display:flex; height:100%; will-change:transform; }
.tile{ position:relative; min-width:100vw; height:100%; overflow:hidden; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Minimalist hero copy */
.tile-overlay{
  position:absolute;
  left: max(5vw, 72px);
  bottom: clamp(20px, 8vh, 72px);
  color:#fff; max-width:44rem;
}
.hero-title,
.tile-overlay h1{
  font-weight:800;
  font-size: clamp(20px, 3.8vw, 34px);
  line-height:1.15; letter-spacing:.01em;
  margin:0 0 .35em 0; color:#fff;
}
.hero-subtitle,
.tile-overlay h2{
  font-weight:700;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing:.08em;
  color: rgba(255,255,255,.92);
  margin:0 0 .7em 0;
}
.hero-lede,
.tile-overlay p{
  max-width: 40ch;
  font-weight:500;
  font-size: clamp(13px, 1.7vw, 16px);
  line-height:1.5;
  color: rgba(255,255,255,.92);
  margin:0 0 1em 0;
}

/* Minimal button */
.readmore{
  appearance:none; border:1px solid rgba(255,255,255,.55);
  background:transparent; color:#fff;
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:.9rem;
  cursor:pointer; text-decoration:none;
}
.readmore:hover{ border-color:#fff; }

/* NAV + DOTS */
.nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:30;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); color:#111; font-size:28px; font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  transition: opacity .25s ease, transform .25s ease;
}
.prev{ left:16px; } .next{ right:16px; }
.nav[disabled]{ opacity:.35; pointer-events:none; }
.nav.is-hidden { opacity:0; pointer-events:none; transform:translateY(-50%) scale(.98); }

.dots{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:8px; }
.dots button{ width:8px; height:8px; border-radius:50%; border:none; background:#fff6; }
.dots button.active{ background:#fff; }

.hero.home-locked { cursor: default; }
.dots.locked { pointer-events: none; opacity: .5; }

/* =========================================================
   DETAILS
========================================================= */
main#details{ background:#f7f7f7; }
.project{
  display:none; opacity:0; min-height:100vh;
  padding:clamp(40px,8vw,140px) 6vw; transition:opacity .6s ease;
}
.project.is-active{ display:block; opacity:1; }

/* =========================================================
   CHOOSER (thumbnail overlay)
========================================================= */
.chooser{
  position:fixed; inset:64px 0 0 0; z-index:1005;
  background:transparent; color:#e7e7e7;
  opacity:1 !important; visibility:hidden; pointer-events:none;
  transition:visibility .2s ease;
}
.chooser.is-open{ visibility:visible; pointer-events:auto; }

.chooser-rail{
  position:absolute; inset:8vh 4vw 12vh;
  display:flex; flex-wrap:nowrap; white-space:nowrap;
  align-items:flex-start; gap:48px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; min-height:260px;
}
.chooser-rail::-webkit-scrollbar{ display:none; }

.card{
  flex:0 0 auto; width:min(36vw,480px); min-width:340px;
  user-select:none; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  opacity:1 !important;
}
.card:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.card .cover{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; }
.card img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .meta{ text-align:center; margin-top:12px; }
.card .title{
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:clamp(14px,1.4vw,18px); color:#f3f3f3;
}
.card .subtitle{ margin-top:4px; opacity:.6; letter-spacing:.12em; font-size:10px; text-transform:uppercase; }

.chooser-progress{ position:absolute; left:3vw; right:3vw; bottom:24px; }
.progress-track{ height:4px; background:#2c2c2c; border-radius:999px; position:relative; cursor:pointer; }
.progress-fill{ height:100%; width:0%; background:#f0f0f0; border-radius:999px; }

/* =========================================================
   PROXY used for the zoom animation
========================================================= */
.proxy-zoom{
  position:fixed; left:0; top:0; width:0; height:0;
  z-index:1300; pointer-events:none;
  will-change:transform,width,height,border-radius,opacity;
  border-radius:14px; overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.45);
}
.proxy-zoom img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =========================================================
   DOOR SPLASH
========================================================= */
#splash{
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:9999; background:transparent;
  display:flex; justify-content:center; align-items:center; overflow:hidden;
}
.door{
  position:absolute; left:0; width:100%; height:50%;
  background:#ffffff; z-index:2; transform:translateY(0);
}
.door-top{ top:0; } .door-bottom{ bottom:0; }
#splash-logo{
  position:absolute; z-index:3; opacity:0; filter:none;
  width:clamp(160px, 26vw, 300px);
  height:auto;
}

/* Blur the page under the doors */
.hero.is-intro{ filter: blur(14px) saturate(115%) contrast(105%); }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .door{ transition:none !important; }
}

/* =========================================================
   FULL-BLEED safeguards
========================================================= */
.hero { backface-visibility:hidden; transform:translateZ(0); }
.gallery-track { height:100% !important; }
.tile { height:100% !important; }

/* =========================================================
   RESPONSIVE TEXT ALIGN + LAYOUT
========================================================= */
.tile-overlay, .project .inner { text-align: left; max-width: 44rem; }
.tile-overlay {
  left: max(16px, env(safe-area-inset-left), 5vw);
  right: max(16px, env(safe-area-inset-right));
  bottom: clamp(20px, 8vh, 72px);
  padding-right: 6vw;
}
.readmore { display: inline-flex; align-items: center; }

@media (max-width: 1024px) {
  .tile-overlay, .project .inner { max-width: 36rem; }
}
@media (max-width: 768px) {
  .tile-overlay, .project .inner { max-width: 30rem; }
}
@media (max-width: 480px) {
  .tile-overlay, .project .inner { max-width: 26rem; }
}

/* =========================================================
   Barba stacking tweaks
========================================================= */
[data-barba="container"]{ will-change: opacity, transform; }
html.is-transitioning .hero { pointer-events: none; }

/* ================================
   DETAILS SPLIT LAYOUT (single source of truth)
================================ */
#details { background:#fff; color:#111; }

.project .split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: clamp(40px, 8vw, 120px);
  padding: clamp(60px, 8vw, 120px) 6vw;
  position:relative;
}

.project .split.has-divider::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width:1px;
  background: rgba(0,0,0,.12);
  z-index: 1;
}

/* media (left) */
.project .split .media{
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.project .split .media img{
  width:100%; height:auto; display:block; object-fit:cover;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}

/* copy (right) */
.project .split .copy{
  z-index:2;
  max-width:560px;
  justify-self:start;
}
.project .split .copy h2{
  font-weight:800;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height:1.15;
  margin:0 0 .5em;
}
.project .split .copy p{
  color:#333;
  line-height:1.8;
  margin:0 0 1.2rem;
}

/* read-more buttons in details follow current text color */
.project .split .copy .readmore{
  display:inline-block;
  border:1px solid currentColor;
  background:transparent;
  padding:8px 18px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease;
  margin-top:.5rem;
}
.project .split .copy .readmore:hover{
  background:currentColor; color:#fff;
}

/* alignment helpers */
.copy.right{ text-align:right; margin-left:auto; }
.copy.left { text-align:left;  margin-right:auto; }

/* reverse layout (swap columns) */
.project .split.reverse { grid-template-columns: 1fr 1fr; }
.project .split.reverse .media { order:2; }
.project .split.reverse .copy  { order:1; }

/* theme variants */
.project.light { background:#fff; color:#111; }
.project.dark  { background:#0e0e0e; color:#fff; }
.project.dark .split.has-divider::before { background:rgba(255,255,255,.15); }
.project.dark .split .media img { box-shadow: 0 10px 30px rgba(255,255,255,0.05); }

/* responsive: stack on small screens (image first, text after) */
@media (max-width: 980px){
  .project .split{ grid-template-columns: 1fr; }
  .project .split.has-divider::before{ display:none; }
  .copy.right, .copy.left { text-align:left; margin:0 auto; }
  .project .split.reverse .media,
  .project .split.reverse .copy { order: unset; }
}

/* =========================================================
   STACK MODE (About page shows all sections, scroll alternates)
   — Add class="stack" to <main id="details"> to enable
========================================================= */
#details.stack { background: transparent; }
#details.stack .project { display: block; opacity: 1; }

/* =========================================================
   FINAL AUTHORITATIVE RULES for toggle icons
   (remove ALL other #galleryToggle .icon rules)
========================================================= */
#galleryToggle .icon {          /* hide both by default */
  display: none;
  width: 28px;
  height: 28px;
}
#galleryToggle[data-state="closed"] .icon-expand   { display: inline-block !important; }
#galleryToggle[data-state="open"]   .icon-collapse { display: inline-block !important; }
/* Right-side action group */
.header-actions{
  display:flex; align-items:center; gap:16px;
}

/* Burger button (morph to X) */
.menu-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--ui); cursor:pointer; position:relative;
}
.menu-btn .bar, .menu-btn .bar::before, .menu-btn .bar::after{
  content:""; display:block; position:absolute; left:50%; transform:translateX(-50%);
  width:22px; height:2px; background:currentColor; transition:transform .25s ease, opacity .2s ease;
}
.menu-btn .bar{ top:50%; }
.menu-btn .bar::before{ top:-7px; }
.menu-btn .bar::after{ top:7px; }

/* to X */
.menu-btn.is-open .bar{
  background: transparent;   /* was opacity:0; */
}
.menu-btn.is-open .bar::before{
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}
.menu-btn.is-open .bar::after{
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}


/* Full-screen menu overlay */
.site-menu{
  position:fixed; inset:0; z-index:1200;
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(120%) blur(6px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease;
}
.site-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.site-menu ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:22px; }
.site-menu a{
  color:#fff; text-decoration:none;
  font-weight:600; letter-spacing:.02em;
  font-size: clamp(22px, 3.2vw, 36px);
}
.site-menu a:hover{ opacity:.9; }

/* keep icons following header color flip */
.menu-btn { color: var(--ui); }
/* =========================================================
   SHARED GUTTERS
========================================================= */
:root{
  /* Left gutter so “Who we are” and MV align */
  --content-left: clamp(24px, 6vw, 80px);
}

/* Hide the in-page Home details in stack mode */
#details.stack #home-details { display: none !important; }

/* Keep dark sections so header stays white via your JS */
.project.dark { background-color: transparent; color:#fff; }

/* =========================================================
   ABOUT — full-bleed hero
========================================================= */
.about-hero{
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:#000;
}
.about-hero__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: block;
}
.about-hero__overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.62) 32%,
    rgba(0,0,0,.38) 58%,
    rgba(0,0,0,0) 86%
  );
}
.about-hero__copy{
  position: absolute; z-index: 2;
  top: 50%; transform: translateY(-50%);
  left: var(--content-left);
  max-width: min(44rem, 80vw);
  color:#fff;
}
.about-hero__copy .eyebrow{
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  margin: 0 0 .6rem 0;
}
.about-hero__copy p{
  font-size: clamp(13px, 1.55vw, 15px);
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  margin: 0 0 .9rem 0;
}

/* =========================================================
   MISSION & VISION — split hero (CLEAN)
   - grayscale image
   - single gray veil on the left
   - stacked text (no card backgrounds)
   - text stays inside the gray background
========================================================= */
#mv-hero.mv-split{
  /* Left column width (veil). Tweak to widen/narrow the gray side. */
  --mv-veil: 47.7%;
  --panel-right: clamp(12px, 3vw, 28px);
  --mv-gap: clamp(24px, 4vh, 40px);

  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, var(--mv-veil)) 1fr;
  align-content: start;
  min-height: 100vh;
}

/* Background image + overlay behind everything */
#mv-hero .mv-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  z-index: 0;
}
#mv-hero .mv-overlay{
  position: absolute; inset: 0; z-index: 0;
}
#mv-hero .mv-divider{ display: none; }

/* Single gray veil on the left */
#mv-hero.mv-split::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--mv-veil);
  background: rgba(0,0,0,.30);
  z-index: 1;
}

/* Panels stack inside the left column and never exceed it */
#mv-hero .mv-panel{
  grid-column: 1;
  position: relative;
  z-index: 2; /* above veil + image */
  margin-left: var(--content-left);
  margin-right: var(--panel-right);
  margin-bottom: var(--mv-gap);
  max-width: calc(var(--mv-veil) - var(--content-left) - var(--panel-right));
  box-sizing: border-box;
  padding: 0;
  color:#fff;
}
#mv-hero .mv-panel--mission{ margin-top: clamp(24px, 8vh, 72px); }

/* Simple labels (no pill background) */
#mv-hero .mv-chip,
#mv-hero .mv-chip--purple,
#mv-hero .mv-chip--light{
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0 0 6px;
  color:#fff;
}

/* Body text */
#mv-hero .mv-panel p{
  margin: 0;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
}

/* ---------- Breakpoints ---------- */
@media (max-width: 900px){
  /* Slightly wider text column on tablets */
  #mv-hero.mv-split{ --mv-veil: 60%; }
}
@media (max-width: 640px){
  /* Single column on phones; veil covers full width */
  #mv-hero.mv-split{
    --mv-veil: 100vw;
    grid-template-columns: 1fr;
  }
  #mv-hero.mv-split::before{ width: 100%; }
  #mv-hero .mv-panel{
    margin-left: 6vw;
    margin-right: 6vw;
    max-width: calc(100vw - 12vw);
  }
}
/* ================================
   CORE VALUES (full-bleed, greyed bg)
================================ */
.core-values{
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(60px, 10vh, 140px) 6vw;
}

.core-values .cv-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* dial back the grey: just a touch */
  filter: grayscale(55%) contrast(92%) brightness(94%);
}

/* Light veil for readability (softer than before) */
.core-values .cv-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.22) 45%,
      rgba(0,0,0,.26) 100%);
}

/* content */
.core-values .cv-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: min(900px, 86vw);
}

.core-values .cv-title{
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 clamp(16px, 2vh, 24px);
}

.core-values .cv-item{
  margin: clamp(12px, 2.2vh, 18px) auto;
}

.core-values .cv-item h3{
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 22px);
  letter-spacing: .02em;
  margin: 0 0 6px;
}

.core-values .cv-item p{
  margin: 0;
  color: rgba(255,255,255,.92);
  line-height: 1.7;
  font-size: clamp(13px, 1.7vw, 16px);
}

/* small screens: add comfy side padding via the existing 6vw */
@media (max-width: 640px){
  .core-values{ padding-top: clamp(80px, 14vh, 160px); }
}
/* Subheading under "Core Values" */
.core-values .cv-intro{
  margin: 10px auto 24px;         /* a little space below the H2 */
  max-width: 62ch;                /* readable width */
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.6;
  color: rgba(255,255,255,.92);   /* soft white like your body text */
  text-align: center;
}
/* ==============================
   OUR SERVICES — CLEAN CSS
   - hero with gray veil
   - 4× service cards (4→2→1)
   - equal-height cards, bottom-aligned CTA
   - listing sections w/ equalized cards
   - optional horizontal scroller
   ============================== */

/* Shared left gutter (matches other pages if you use it) */
:root { --content-left: clamp(24px, 6vw, 80px); }

/* Smooth anchor offset (if you have a fixed header) */
#services,
#design-listings,
#build-listings,
#renovate-listings,
#own-listings { scroll-margin-top: 84px; }

/* ---------- HERO ---------- */
.services-hero{
  position: relative;
  min-height: 100vh;
  background: #f2f2f2;
  color: #111;
  overflow: hidden;
}
.services-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(.82);
  z-index: 0;
}
.services-veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.40) 0%, rgba(0,0,0,.18) 36%, rgba(0,0,0,0) 72%),
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,0) 40%);
  z-index: 1;
}
.services-intro{
  position: relative; z-index: 2;
  padding: clamp(28px, 8vh, 80px) var(--content-left) 12px;
  max-width: 64rem; color: #fff;
}
.services-title{
  margin: 0 0 .35em;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
}
.services-sub{
  margin: 0;
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 16px);
  color: rgba(255,255,255,.9);
}

/* ---------- 4× SERVICE CARDS ---------- */
.services-grid{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 2vw, 28px);
  padding: 18px var(--content-left) clamp(40px, 10vh, 80px);
  align-items: stretch;               /* equal cell heights */
}
@media (max-width: 1100px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
}

.service-card{
  display: flex;                      /* make a column */
  flex-direction: column;
  height: 100%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(2px);
  transform: translateY(10px);
  opacity: 0;
  animation: sv-fadeUp .7s ease forwards;
  animation-delay: calc(0.06s * var(--i, 0));
}
@keyframes sv-fadeUp { to { transform: translateY(0); opacity: 1; } }

.service-media{ aspect-ratio: 16/10; overflow: hidden; }
.service-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform .6s ease;
}
.service-card:hover .service-media img{ transform: scale(1.06); }

.service-copy{
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto;                    /* copy area grows */
  padding: 14px 16px 18px;
  color: #fff;
}
.service-copy h3{
  margin: 0 0 6px;
  font-size: clamp(16px, 1.6vw, 18px);
}
.service-copy p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.92);
  line-height: 1.6;

  /* Keep buttons aligned on desktop/tablet */
  display: -webkit-box;
  -webkit-line-clamp: 3;             /* adjust 2–4 to taste */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1em * 1.6 * 3);   /* reserves space for 3 lines */
}
.service-cta{
  margin-top: auto;                  /* pin CTA to bottom */
  display: inline-block;
  font-weight: 700; font-size: .92rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  color: #fff; text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.service-cta:hover{ background: #fff; color: #111; border-color: #fff; }

@media (max-width: 640px){
  /* One column on phones: show full text */
  .service-copy p{
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    min-height: 0;
  }
}

/* ---------- LISTING SECTIONS ---------- */
.services-listing{
  background: #fff; color: #111;
  padding: clamp(36px, 8vh, 80px) var(--content-left);
}
.listing-head{
  max-width: 64rem;
  margin-bottom: clamp(16px, 3vh, 28px);
}
.listing-head h2{
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
}
.listing-head p{ margin: 0; color: #444; line-height: 1.7; }

.listing-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2vw, 28px);
  max-width: 1200px;
  align-items: stretch;              /* equal card heights per row */
}
@media (max-width: 1100px){
  .listing-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .listing-grid{ grid-template-columns: 1fr; }
}

/* Optional modifier for horizontal scrolling rails */
.listing-grid--scroll{
  display: flex; gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; padding-bottom: 8px;
}
.listing-grid--scroll .listing-card{
  flex: 0 0 clamp(260px, 28vw, 340px);
  scroll-snap-align: start;
}
.listing-grid--scroll::-webkit-scrollbar{ height: 8px; }
.listing-grid--scroll::-webkit-scrollbar-track{ background: transparent; }
.listing-grid--scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 999px; }

/* Listing card (house/project) */
.listing-card{
  background: #f8f8f8;
  border: 1px solid #e9e9e9;
  border-radius: 12px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;

  /* Equalize & anchor meta row */
  display: flex; flex-direction: column; height: 100%;
}
.listing-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.listing-card img{
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
}
.listing-body{
  display: flex; flex-direction: column;
  flex: 1 1 auto;                    /* fills remaining height */
  padding: 14px 16px 16px;
  min-height: 0;
}
.listing-body h3{
  margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; color: #111;
}
/* Description grows/shrinks; meta row stays at the bottom */
.listing-body p{
  margin: 0 0 10px; color: #444; line-height: 1.6;
  flex: 1 1 auto; min-height: 0; overflow-wrap: anywhere;
}
.listing-meta{
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 12px; flex-wrap: wrap;
  color: #666; font-size: .92rem;

  margin-top: auto;                 /* pin to bottom edge */
}
/* --- Our Services hero: blur-only, no gray tint --- */
.services-bg{
  filter: none !important;              /* keep original colors */
}

.services-veil{
  background: transparent !important;   /* no dark/white gradients */
  backdrop-filter: blur(4px) saturate(110%); /* subtle glassy blur */
  -webkit-backdrop-filter: blur(4px) saturate(110%);
}

/* Make heading readable over any photo without darkening it */
.services-intro{
  color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
/* ===== Fix: no ellipsis + perfectly aligned cards ===== */

/* 0) Never clamp/truncate in Services or Listings */
.services-grid .service-copy p,
.services-listing .listing-body p,
.services-listing .listing-body .desc {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  text-overflow: initial !important;
  white-space: normal !important;
}

/* 1) Services cards — equal height, CTA pinned to bottom */
.services-grid { align-items: stretch; }          /* grid items same height */
.service-card {
  display: flex; flex-direction: column; height: 100%;
}
.service-media { flex: 0 0 auto; aspect-ratio: 16/10; overflow: hidden; }
.service-copy  { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.service-cta   { margin-top: auto; }              /* button aligned across row */

/* 2) Listing cards — UL always aligned at the bottom */
.listing-grid { align-items: stretch; }           /* grid items same height */
.listing {
  display: flex; flex-direction: column; height: 100%;
}
.listing-figure { flex: 0 0 auto; aspect-ratio: 16/10; overflow: hidden; }
.listing-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.listing-body .desc,
.listing-body > p:first-of-type {                 /* description becomes spacer */
  flex: 1 1 auto; min-height: 0; margin: 0 0 10px; line-height: 1.6;
}
.listing-meta { margin-top: auto; }               /* UL flush with bottom */
/* ===== FINAL ALIGNMENT FIX (paste at end of style.css) ===== */

/* Services cards ---------------------------------------------------------- */
.services-grid { display:grid; align-items: stretch; }   /* grid cells equal height */

.service-card{
  display:flex;                 /* make the card a vertical flex box */
  flex-direction:column;
  height:100%;
}

.service-media{
  flex:0 0 auto;                /* fixed media area */
  aspect-ratio:16/10;
  overflow:hidden;
}

.service-copy{
  flex:1 1 auto;                /* copy area grows to fill remaining height */
  display:flex;
  flex-direction:column;
  gap:10px;
}

.service-copy p{
  /* NEVER truncate; let it wrap, but still allow the CTA to align */
  display:block !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  text-overflow:initial !important;
  white-space:normal !important;
  flex:1 1 auto;                /* this is the spacer */
  min-height:0;
  line-height:1.6;
}

.service-cta{                   /* button always sits on the bottom edge */
  margin-top:auto;
}

/* ================================
   LISTINGS — SINGLE, CONSISTENT SET
   (delete older/duplicate rules)
================================ */

/* Tune once, applies everywhere */
:root{
  --card-w: 320px;   /* width of each card in the horizontal rail */
  --card-h: 360px;   /* total card height (also used in grid rows) */
  --card-gap: 20px;
}

/* ---------- GRID (no side scroll) ---------- */
.listing-grid{
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, minmax(var(--card-w), 1fr));
  align-items: stretch;                 /* equal height per row */
}
@media (max-width: 1100px){
  .listing-grid{ grid-template-columns: repeat(2, minmax(var(--card-w), 1fr)); }
}
@media (max-width: 640px){
  .listing-grid{ grid-template-columns: 1fr; }
}

/* ================================
   LISTINGS — ONE SIZE + RAIL + LB
   (clean; no duplicates)
================================ */

/* Tune once, applies everywhere */
:root{
  --card-w: 320px;      /* exact card width for the rail */
  --card-h: 360px;      /* exact card height for grid & rail */
  --card-gap: 20px;
}

/* ---------- Grid (no horizontal scroll) ---------- */
.listing-grid{
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, minmax(var(--card-w), 1fr));
  align-items: stretch;                 /* same height per row */
}
@media (max-width: 1100px){
  .listing-grid{ grid-template-columns: repeat(2, minmax(var(--card-w), 1fr)); }
}
@media (max-width: 640px){
  .listing-grid{ grid-template-columns: 1fr; }
}

/* ---------- Horizontal rail (side-scroll) ---------- */
/* Add class .listing-grid--scroll to the container */
.listing-grid--scroll{
  display: grid !important;
  grid-auto-flow: column;               /* lay cards left→right */
  grid-auto-columns: var(--card-w);     /* same width for all */
  grid-auto-rows: var(--card-h);        /* same height for all */
  align-items: stretch;
  gap: var(--card-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;                  /* scrollbar room */
}
.listing-grid--scroll > .listing-card{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
}

/* ---------- Card ---------- */
.listing-card{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: var(--card-h);
  background: #f8f8f8;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.listing-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* Media (top image) */
.listing-card > img{
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;                  /* fixed media area */
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

/* Body (title + button + description + specs) */
.listing-body{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  background: #f8f8f8;
  color: #111;
}
.listing-body h3{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1.02rem;
  color: #111;
}

/* Description grows so specs pin to bottom */
.listing-body .desc,
.listing-body > p:first-of-type{
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 10px;
  line-height: 1.6;
  color: #444;
  overflow-wrap: anywhere;
}

/* Specs row at the bottom */
.listing-meta{
  margin-top: auto;
  list-style: none;
  padding: 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .92rem;
  color: #666;
}

/* Minimal, readable “View photos” button */
.btn-gallery{
  appearance: none;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
  align-self: flex-start;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-gallery:hover{ background:#000; border-color:#000; transform: translateY(-1px); }
.btn-gallery:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(17,17,17,.25); }

/* ---------- Lightbox ---------- */
.lb{
  position: fixed; inset: 0; z-index: 2000;
  display: none; place-items: center;
  background: rgba(0,0,0,.9);
  backdrop-filter: saturate(120%) blur(2px);
}
.lb.is-open{ display: grid; }

.lb-viewport{
  position: relative;
  width: min(92vw, 1100px);
  height: min(84vh, 760px);
  display: grid; place-items: center;
  background: #000; overflow: hidden; border-radius: 10px;
}
.lb-img{ max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.lb-close, .lb-prev, .lb-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff; border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center; cursor: pointer;
}
.lb-close{ top: 14px; right: 14px; transform: none; }
.lb-prev{ left: 12px; }
.lb-next{ right: 12px; }

.lb-counter{
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  color: #fff; font-weight: 700; font-size: .92rem;
  background: rgba(0,0,0,.4); padding: 6px 10px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
}

/* Safety: ensure nothing truncates or hides text */
.listing-body p{
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Anchor targets for “See listings” buttons */
#design-listings,
#build-listings,
#renovate-listings,
#own-listings{ scroll-margin-top: 84px; }
/* =========================
   LISTINGS — final, one size
   (put this AT THE END)
========================= */

/* 1) One size everywhere */
:root{
  --card-w: 320px;
  --card-h: 360px;
  --card-gap: 20px;
}

/* Base grid */
.listing-grid{
  display:grid;
  gap:var(--card-gap);
  grid-template-columns:repeat(3, minmax(var(--card-w), 1fr));
  align-items:stretch;
}
@media (max-width:1100px){ .listing-grid{ grid-template-columns:repeat(2, minmax(var(--card-w), 1fr)); } }
@media (max-width:640px){  .listing-grid{ grid-template-columns:1fr; } }

/* Horizontal rail */
.listing-grid--scroll{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:var(--card-w);
  grid-auto-rows:var(--card-h);
  align-items:stretch;
  gap:var(--card-gap);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
}
.listing-grid--scroll > .listing-card{
  width:100%; height:100%; box-sizing:border-box; scroll-snap-align:start;
}

/* Card */
.listing-card{
  box-sizing:border-box;
  display:flex; flex-direction:column;
  height:100%; min-height:var(--card-h);
  background:#f8f8f8; border:1px solid #e9e9e9; border-radius:12px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.listing-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.08); }

/* 2) DEFENSIVE: kill any legacy overlay styles that caused the overlap */
.services-listing .listing-card,
.services-listing .listing-card > img,
.services-listing .listing-body{
  position:relative !important;
  inset:auto !important;
  z-index:auto !important;
}

/* Media block */
.listing-card > img{
  width:100%; height:auto; aspect-ratio:16/10;
  object-fit:cover; display:block; flex:0 0 auto;
}

/* Body */
.listing-body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  margin:0; padding:14px 16px 16px; background:#f8f8f8;
}
.listing-body h3{ margin:0 0 6px; font-weight:700; font-size:1.02rem; color:#111; }
.listing-body .desc,
.listing-body > p:first-of-type{
  flex:1 1 auto; min-height:0;
  margin:0 0 10px; line-height:1.6; color:#444; overflow-wrap:anywhere;
}
.listing-meta{
  margin-top:auto; list-style:none; padding:0;
  display:flex; gap:12px; flex-wrap:wrap; font-size:.92rem; color:#666;
}

/* Button (readable on light card) */
.btn-gallery{
  appearance:none; border:1px solid #111; background:#111; color:#fff;
  padding:8px 12px; border-radius:10px; font-weight:700; font-size:.92rem; line-height:1;
  align-self:flex-start; text-decoration:none;
  transition:background .2s, border-color .2s, transform .15s;
}
.btn-gallery:hover{ background:#000; border-color:#000; transform:translateY(-1px); }

/* Smooth-scroll anchor offset for “See listings” */
#design-listings, #build-listings, #renovate-listings, #own-listings { scroll-margin-top: 84px; }

/* Safety: never clamp/truncate listing text here */
.listing-body p{ display:block !important; -webkit-line-clamp:unset !important; overflow:visible !important; }
/* ===== LISTINGS — single size + NO OVERLAY (FINAL) ===== */

/* 0) One size everywhere (grid & rail) */
:root{
  --card-w: 320px;
  --card-h: 360px;
  --card-gap: 20px;
}

/* 1) HARD RESET: kill any absolute/overlay rules from older CSS */
.services-listing .listing-card,
.services-listing .listing-card > img,
.services-listing .listing-card *{
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
}

/* 2) Base grid (no horizontal scroll) */
.services-listing .listing-grid{
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, minmax(var(--card-w), 1fr));
  align-items: stretch;                   /* equal height per row */
}
@media (max-width:1100px){
  .services-listing .listing-grid{
    grid-template-columns: repeat(2, minmax(var(--card-w), 1fr));
  }
}
@media (max-width:640px){
  .services-listing .listing-grid{ grid-template-columns: 1fr; }
}

/* 3) Horizontal rail (add .listing-grid--scroll to container) */
.services-listing .listing-grid--scroll{
  display: grid !important;
  grid-auto-flow: column;                 /* lay cards left→right */
  grid-auto-columns: var(--card-w);       /* SAME width for all   */
  grid-auto-rows: var(--card-h);          /* SAME height for all  */
  align-items: stretch;
  gap: var(--card-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;                    /* scrollbar room */
}
.services-listing .listing-grid--scroll > .listing-card{
  width: 100%; height: 100%; box-sizing: border-box; scroll-snap-align: start;
}

/* 4) Card layout */
.services-listing .listing-card{
  box-sizing: border-box;
  display: flex; flex-direction: column;
  height: 100%; min-height: var(--card-h);
  background: #f8f8f8;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.services-listing .listing-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* Top image (fixed aspect) */
.services-listing .listing-card > img{
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16/10;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Body (title + button + description + specs pinned bottom) */
.services-listing .listing-body{
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 14px 16px 16px;
  background: #f8f8f8; color: #111;
}
.services-listing .listing-body h3{
  margin: 0 0 6px; font-weight: 700; font-size: 1.02rem; color: #111;
}
.services-listing .listing-body .desc,
.services-listing .listing-body > p:first-of-type{
  flex: 1 1 auto; min-height: 0;
  margin: 0 0 10px; line-height: 1.6; color: #444; overflow-wrap: anywhere;
}
.services-listing .listing-meta{
  margin-top: auto;
  list-style: none; padding: 0;
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: .92rem; color: #666;
}

/* Readable “View photos” button */
.btn-gallery{
  appearance: none;
  border: 1px solid #111;
  background: #111; color: #fff;
  padding: 8px 12px; border-radius: 10px;
  font-weight: 700; font-size: .92rem; line-height: 1;
  align-self: flex-start; text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-gallery:hover{ background:#000; border-color:#000; transform: translateY(-1px); }

/* Anchor offset for “See listings” buttons */
#design-listings, #build-listings, #renovate-listings, #own-listings{ scroll-margin-top: 84px; }

/* Never clamp/truncate listing text */
.services-listing .listing-body p{
  display:block !important; -webkit-line-clamp:unset !important; overflow:visible !important;
}
/* ===============================
   LISTINGS — DESKTOP OVERLAP FIX
   (place LAST in your stylesheet)
================================ */

/* One size everywhere (grid + rail) */
:root{ --card-w:320px; --card-h:360px; --card-gap:20px; }

/* Rail: identical width/height per card */
.services-listing .listing-grid--scroll{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:var(--card-w);
  grid-auto-rows:var(--card-h);
  align-items:stretch;
  gap:var(--card-gap);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
}
.services-listing .listing-grid--scroll > .listing-card{
  width:100%; height:100%; box-sizing:border-box; scroll-snap-align:start;
}

/* HARD RESET: kill legacy overlay/absolute styles */
.services-listing .listing-card,
.services-listing .listing-card > img,
.services-listing .listing-body,
.services-listing .listing-card *{
  position:static !important;
  inset:auto !important;
  z-index:auto !important;
}

/* Card = vertical flex column, equal height */
.services-listing .listing-card{
  display:flex !important; flex-direction:column !important;
  height:100% !important; min-height:var(--card-h) !important;
  background:#f8f8f8; border:1px solid #e9e9e9; border-radius:12px;
  overflow:hidden;
}

/* Top image (fixed aspect) */
.services-listing .listing-card > img{
  flex:0 0 auto !important;
  width:100% !important; aspect-ratio:16/10; height:auto !important;
  object-fit:cover !important; display:block !important;
}

/* Body never overlays image; specs pinned to bottom */
.services-listing .listing-body{
  flex:1 1 auto !important; min-height:0 !important;
  display:flex !important; flex-direction:column !important;
  padding:14px 16px 16px !important; background:#f8f8f8 !important; color:#111 !important;
}
.services-listing .listing-body h3{ margin:0 0 6px; font-weight:700; font-size:1.02rem; }
.services-listing .listing-body .desc,
.services-listing .listing-body > p:first-of-type{
  flex:1 1 auto; min-height:0; margin:0 0 10px; line-height:1.6; color:#444; overflow-wrap:anywhere;
}
.services-listing .listing-meta{
  margin-top:auto; list-style:none; padding:0; display:flex; gap:12px; flex-wrap:wrap; font-size:.92rem; color:#666;
}

/* Readable button */
.btn-gallery{
  appearance:none; border:1px solid #111; background:#111; color:#fff;
  padding:8px 12px; border-radius:10px; font-weight:700; font-size:.92rem; line-height:1;
  align-self:flex-start; text-decoration:none;
  transition:background .2s, border-color .2s, transform .15s;
}
.btn-gallery:hover{ background:#000; border-color:#000; transform:translateY(-1px); }

/* Anchor offset for “See listings” buttons */
#design-listings, #build-listings, #renovate-listings, #own-listings{ scroll-margin-top:84px; }
/* Put "View photos" button BELOW the text & specs in listing cards */
.listing-body{
  display: flex;               /* you already have this; repeating is safe */
  flex-direction: column;
}

/* Preserve title first, then description (fills), then specs, then button */
.listing-body h3{ order: 0; }
.listing-body .desc,
.listing-body > p:first-of-type{
  order: 1;
  flex: 1 1 auto;              /* lets the text take available space */
  min-height: 0;
}
.listing-body .listing-meta{ order: 2; }

/* Button goes LAST, under the meta row */
.listing-body .btn-gallery{
  order: 3;
  align-self: flex-start;
  margin-top: 12px;            /* little breathing room from the specs */
}
.btn-gallery { display: none !important; }
/* Pointer + hover hint for clickable listing thumbnails */
.listing-card { position: relative; }

.listing-card > img {
  cursor: pointer;               /* hand cursor */
}

/* Show hint only on hover-capable devices */
@media (hover: hover) {
  .listing-card::after {
    content: "Click to view images";
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    font-size: .85rem;
    color: #fff;
    background: rgba(0,0,0,.6);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .listing-card:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- Thumbnail is clickable: hand cursor --- */
.listing-card > img {
  cursor: pointer;
}

/* --- Hint appears ONLY when hovering the image (uses :has) --- */
.listing-card { position: relative; }

@media (hover: hover) {
  .listing-card::after {
    content: "Click to view images";
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    font-size: .85rem;
    color: #fff;
    background: rgba(0,0,0,.6);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
  }
  /* show the hint only when the IMG (not the body) is hovered */
  .listing-card:has(> img:hover)::after {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Kill any hover/zoom scale on listing images & lightbox --- */
.listing-card > img {
  transform: none !important;
  transition: none !important;
}

/* If your lightbox adds any scale animation, neutralize it */
.lb, .lb-viewport, .lb-img {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
/* ============== Thumbnail hover hint centered on the image ============== */

/* Card constants (your rail uses 320px-wide cards → 16:10 = 200px tall img) */
.listing-card { --thumb-h: 200px; }        /* center anchor for the overlay */

/* Make the thumbnail clearly clickable */
.listing-card > img { cursor: pointer; }

/* The hint lives on the card but is positioned inside the thumbnail area */
.listing-card { position: relative; }

@media (hover: hover) {
  .listing-card::after {
    content: "Click to view images";
    position: absolute;
    left: 50%;
    top: calc(var(--thumb-h) / 2);         /* middle of the image block */
    transform: translate(-50%, -50%);
    padding: 8px 12px;
    font-size: .9rem;
    color: #fff;
    background: rgba(0,0,0,.6);
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
  }

  /* Show the hint ONLY while the thumbnail is hovered */
  .listing-card:has(> img:hover)::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

/* Optional: if you also show these cards in a wider grid with a different
   image height, override --thumb-h there. Example (tablet/desktop grid): */
@media (min-width: 900px) {
  /* if those cards are wider (e.g., 360px), 16:10 = 225px */
  .listing-grid:not(.listing-grid--scroll) .listing-card { --thumb-h: 225px; }
}

/* Disable any image/ LB zoom animation (keeps the big-screen snap-open) */
.listing-card > img,
.lb, .lb-viewport, .lb-img {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
/* Thumbnail wrapper */
.listing-thumb{
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 12px 12px 0 0;     /* matches your card radius */
  cursor: pointer;
}
.listing-thumb > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Centered hover hint (only on devices with hover) */
@media (hover:hover){
  .listing-thumb::after{
    content: "Click to view images";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .95rem;
    background: rgba(0,0,0,.38);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;           /* doesn't block clicks */
  }
  .listing-thumb:hover::after{
    opacity: 1;
  }
}

/* Optional: reduce-motion users see no fade */
@media (prefers-reduced-motion: reduce){
  .listing-thumb::after{ transition: none; }
}

/* Ensure no zoom animation on LB/open */
.listing-thumb, .listing-thumb img,
.lb, .lb-viewport, .lb-img{
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
/* Kill any older card-level badges */
.listing-card::after { content: none !important; }
/* Keep this one (the centered badge ON the thumbnail only) */
@media (hover:hover){
  .listing-thumb::after{
    content:"Click to view images";
    position:absolute; inset:0;
    display:grid; place-items:center;
    color:#fff; font-weight:700;
    background:rgba(0,0,0,.38);
    opacity:0; transition:opacity .18s ease;
    pointer-events:none;
  }
  .listing-thumb:hover::after{ opacity:1; }
}
/* --- Thumbnail-only overlay (final override) --- */

/* 0) Nuke any legacy card-wide overlay */
.listing-card::after {
  content: none !important;
  background: none !important;
}

/* 1) Make the thumbnail the overlay container */
.listing-thumb{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0;     /* match your card radius */
  cursor: pointer;
  z-index: 1;                       /* sits below the body */
}

/* 2) Gray veil + hint ONLY inside the thumbnail box */
@media (hover:hover){
  .listing-thumb::after{
    content: "Click to view images";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    background: rgba(0,0,0,.38);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;           /* do not block clicks */
    z-index: 2;                     /* above the photo */
  }
  .listing-thumb:hover::after{ opacity: 1; }
}

/* 3) Keep the text block above the image overlay */
.listing-body{
  position: relative !important;
  z-index: 3 !important;
  background: #f8f8f8;              /* ensures no dark bleed */
}
/* ==== FINAL OVERRIDE – overlay only on the thumbnail ==== */

/* 1) Kill ANY card-wide overlay that might be defined above */
.services-listing .listing-card::before,
.services-listing .listing-card::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* If you kept a :has(...) version, kill that too */
@media (hover:hover){
  .services-listing .listing-card:has(> img:hover)::after {
    content: none !important;
    display: none !important;
  }
}

/* 2) Thumbnail is the overlay container */
.services-listing .listing-thumb{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  z-index: 1;            /* below the text block */
}
.services-listing .listing-thumb > img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 3) Gray veil + hint INSIDE the thumbnail only */
@media (hover:hover){
  .services-listing .listing-thumb::after{
    content: "Click to view images";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    background: rgba(0,0,0,.38);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;     /* doesn’t block the click */
    z-index: 2;               /* above the photo, below details */
  }
  .services-listing .listing-thumb:hover::after{ opacity: 1; }
}

/* 4) Ensure details always sit above any image overlay */
.services-listing .listing-body{
  position: relative !important;
  z-index: 3 !important;
  background: #f8f8f8;
}