/* ==========================================================
   KEYNEST STAYS — Additions
   Loads AFTER style.css and pages.css. Uses only the existing
   tokens (--gold, --cream, --black, --charcoal, --gray…).
   Nothing from the approved design is overridden except where
   a real photo replaces a gradient placeholder.
   ========================================================== */

/* ==========================================================
   Real photos over the existing placeholders
   Each rule keeps the approved gradient underneath, so if the
   jpg is missing the design looks exactly as it does today.
   ========================================================== */
.gallery-tile::before,
.prop-media .ph,
.gal-main,
.gal-thumb{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Room pictures on the homepage */
.tile-1::before{ background-image:url("../images/rooms/living-area.jpg"), linear-gradient(135deg,#2b2b2b,#141414); }
.tile-2::before{ background-image:url("../images/rooms/bedroom.jpg"),     linear-gradient(135deg,#3a2f14,#17140a); }
.tile-3::before{ background-image:url("../images/rooms/kitchen.jpg"),     linear-gradient(135deg,#26241d,#111);   }
.tile-4::before{ background-image:url("../images/rooms/common-room.jpg"), linear-gradient(135deg,#312912,#141210); }
.tile-5::before{ background-image:url("../images/rooms/workspace.jpg"),   linear-gradient(135deg,#20201f,#0d0d0d); }
.tile-6::before{ background-image:url("../images/rooms/exterior.jpg"),    linear-gradient(135deg,#332a13,#151310); }

/* Listing cards and the detail gallery */
.ph-1{ background-image:url("../images/properties/property-1.jpg"), linear-gradient(135deg,#2b2b2b,#141414); }
.ph-2{ background-image:url("../images/properties/property-2.jpg"), linear-gradient(135deg,#3a2f14,#17140a); }
.ph-3{ background-image:url("../images/properties/property-3.jpg"), linear-gradient(135deg,#26241d,#111);   }
.ph-4{ background-image:url("../images/properties/property-4.jpg"), linear-gradient(135deg,#312912,#141210); }
.ph-5{ background-image:url("../images/properties/property-5.jpg"), linear-gradient(135deg,#20201f,#0d0d0d); }
.ph-6{ background-image:url("../images/properties/property-6.jpg"), linear-gradient(135deg,#332a13,#151310); }
/* once a real photo is in place the placeholder house icon is noise */
.prop-media .ph:not(.no-photo) svg,
.gal-main:not(.no-photo) svg{ display:none }

/* the gallery caption bar reads better with a photo behind it */
.gallery-tile .tile-note{
  display:block; font-family:var(--font-body); font-size:.78rem;
  color:rgba(255,255,255,.65); margin-top:.25rem; letter-spacing:.03em;
}

/* ==========================================================
   Owner's story (homepage + landlord page)
   ========================================================== */
.story{ padding:120px 0; background:var(--white); }
.story-grid{
  display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:center;
}
.story-portrait{
  aspect-ratio:4/5;
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  background-image:url("../images/team/owner.jpg"), linear-gradient(150deg,#1d1b16,#0d0d0d);
  background-size:cover; background-position:center;
  position:relative;
}
.story-portrait::after{
  content:""; position:absolute; inset:14px; border:1px solid rgba(201,162,39,.35);
  pointer-events:none;
}
.story-portrait .cap{
  position:absolute; left:0; bottom:-1px; background:var(--gold); color:var(--black);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.5rem .9rem;
}
.story-copy h2{ font-size:clamp(1.8rem,3vw,2.5rem); }
.story-copy p{ max-width:60ch; }
.story-quote{
  font-family:var(--font-display); font-style:italic; font-size:1.22rem;
  color:var(--charcoal); border-left:2px solid var(--gold);
  padding:.2rem 0 .2rem 1.4rem; margin:2rem 0;
}
.story-sign{
  display:flex; align-items:center; gap:14px; margin-top:1.6rem;
}
.story-sign .who{ font-family:var(--font-display); font-size:1.05rem; color:var(--charcoal); }
.story-sign .role{ font-size:.8rem; color:var(--gray-dark); letter-spacing:.06em; }
.story-facts{
  display:flex; flex-wrap:wrap; gap:34px; margin-top:2.2rem;
  padding-top:1.8rem; border-top:1px solid rgba(0,0,0,.1);
}
.story-facts div{ display:flex; flex-direction:column; }
.story-facts b{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-dim); }
.story-facts span{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-dark); margin-top:4px; }

/* ==========================================================
   Split promo band (commercial / landlords / blog teasers)
   ========================================================== */
.promo{ padding:120px 0; background:var(--cream); }
.promo.dark{ background:var(--black); }
.promo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.promo-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  padding:52px 42px; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:340px; border:1px solid rgba(201,162,39,.22);
  background-color:var(--charcoal);
  background-size:cover; background-position:center;
  transition:transform var(--transition), border-color var(--transition);
}
.promo-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,.35) 0%, rgba(13,13,13,.92) 88%);
}
.promo-card:hover{ transform:translateY(-6px); border-color:var(--gold); }
.promo-card > *{ position:relative; z-index:2; }
.promo-card h3{ color:var(--white); font-size:1.6rem; margin-bottom:.4em; }
.promo-card p{ color:rgba(255,255,255,.68); font-size:.95rem; max-width:44ch; }
.promo-card .promo-link{
  color:var(--gold); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem;
}
.promo-card .promo-link i{ font-style:normal; transition:transform var(--transition); }
.promo-card:hover .promo-link i{ transform:translateX(5px); }
.promo-commercial{ background-image:url("../images/properties/commercial-teaser.jpg"); }
.promo-landlord{ background-image:url("../images/properties/landlord-teaser.jpg"); }

/* ==========================================================
   Blog
   ========================================================== */
.blog-section{ padding:120px 0; background:var(--cream); }
.blog-grid{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
}
.post-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(13,13,13,.07);
  transition:transform var(--transition), box-shadow var(--transition);
}
/* .post-card's own display:flex above outranks the browser's default
   [hidden]{display:none}, so the blog category filter in site-extra.js
   (post.hidden = true) never actually hid a non-matching card. */
.post-card[hidden]{display:none}
.post-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -26px rgba(13,13,13,.5); }
.post-media{
  aspect-ratio:16/10; background-size:cover; background-position:center;
  background-color:var(--charcoal); position:relative;
}
.post-media .cat{
  position:absolute; left:14px; top:14px; background:rgba(13,13,13,.86); color:var(--gold);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; padding:.35rem .7rem; border-radius:2px;
}
.post-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-meta{ font-size:.76rem; letter-spacing:.06em; color:var(--gray-dark); margin-bottom:.7rem; }
.post-body h3{ font-size:1.2rem; margin-bottom:.4em; color:var(--charcoal); }
.post-body p{ font-size:.92rem; margin-bottom:1.2rem; }
.post-body .text-link{ margin-top:auto; align-self:flex-start; font-size:.85rem; }
.post-1{ background-image:url("../images/blog/post-1.jpg"), linear-gradient(135deg,#2b2b2b,#141414); }
.post-2{ background-image:url("../images/blog/post-2.jpg"), linear-gradient(135deg,#3a2f14,#17140a); }
.post-3{ background-image:url("../images/blog/post-3.jpg"), linear-gradient(135deg,#26241d,#111); }
.post-4{ background-image:url("../images/blog/post-4.jpg"), linear-gradient(135deg,#312912,#141210); }
.post-5{ background-image:url("../images/blog/post-5.jpg"), linear-gradient(135deg,#20201f,#0d0d0d); }
.post-6{ background-image:url("../images/blog/post-6.jpg"), linear-gradient(135deg,#332a13,#151310); }

/* Single post */
.article{ background:var(--cream); padding:56px 0 90px; }
.article-wrap{ max-width:760px; margin:0 auto; }
.article-hero{
  aspect-ratio:16/9; border-radius:var(--radius); margin-bottom:36px;
  background-size:cover; background-position:center; background-color:var(--charcoal);
}
.article-head h1{ font-size:clamp(1.9rem,3.6vw,2.8rem); color:var(--charcoal); margin-bottom:.3em; }
.article-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.84rem; color:var(--gray-dark);
  padding-bottom:1.6rem; margin-bottom:2rem; border-bottom:1px solid rgba(0,0,0,.1);
}
.article-body p{ font-size:1.02rem; line-height:1.85; }
.article-body h2{ font-size:1.45rem; color:var(--charcoal); margin:2rem 0 .6em; }
.article-body h3{ font-size:1.15rem; color:var(--charcoal); margin:1.6rem 0 .5em; }
.article-body ul{ margin:0 0 1.4em; padding-left:1.1rem; list-style:disc; }
.article-body li{ color:var(--gray-dark); line-height:1.8; margin-bottom:.5rem; }
.article-body blockquote{
  margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:2px solid var(--gold);
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--charcoal);
}
.article-share{
  display:flex; align-items:center; gap:14px; margin-top:2.6rem;
  padding-top:1.6rem; border-top:1px solid rgba(0,0,0,.1);
  font-size:.82rem; color:var(--gray-dark);
}
.article-share a{
  width:36px; height:36px; border:1px solid rgba(201,162,39,.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold-dim);
  transition:background var(--transition), color var(--transition);
}
.article-share a:hover{ background:var(--gold); color:var(--black); }
.article-share svg{ width:16px; height:16px; }

/* ==========================================================
   Landlord / owner page
   ========================================================== */
.own-points{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.9rem; }
.own-points li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.95rem; color:var(--gray-dark); }
.own-points svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:.25rem; }

.own-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:34px; margin-top:3rem;
}
.own-step{ padding-top:1.2rem; border-top:1px solid rgba(0,0,0,.12); }
.own-step .no{
  font-family:var(--font-display); color:var(--gold); font-size:.9rem;
  letter-spacing:.1em; display:block; margin-bottom:.7rem;
}
.own-step h4{ font-size:1.1rem; margin-bottom:.4em; }
.own-step p{ font-size:.92rem; margin:0; }
.promo.dark .own-step{ border-top-color:rgba(255,255,255,.14); }
.promo.dark .own-step h4{ color:var(--white); }
.promo.dark .own-step p{ color:rgba(255,255,255,.6); }

/* the interest cards reuse .service-card; this only adds the button */
.pick-btn{
  margin-top:22px; background:none; border:0; padding:0 0 3px;
  border-bottom:1px solid rgba(201,162,39,.5);
  color:var(--gold); font-family:var(--font-body); font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; transition:border-color var(--transition);
}
.pick-btn:hover{ border-color:var(--gold); }

/* success panel inside the dark enquiry form */
.form-success{
  display:none; text-align:center; padding:20px 4px 4px;
}
.form-success.show{ display:block; }
.form-success .tick{
  width:56px; height:56px; margin:0 auto 1.2rem; border-radius:50%;
  border:1px solid var(--gold); background:rgba(201,162,39,.12);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
}
.form-success .tick svg{ width:24px; height:24px; }
.form-success h3{ color:var(--white); font-size:1.4rem; margin-bottom:.4em; }
.form-success p{ color:rgba(255,255,255,.65); max-width:34ch; margin:0 auto 1.6rem; }
.form-success .recap{
  text-align:left; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:1.6rem; display:grid; gap:.5rem; font-size:.88rem;
  color:rgba(255,255,255,.6);
}
.form-success .recap b{ color:var(--white); font-weight:500; }

.form-row .err-msg{ display:none; color:#e3665c; font-size:.8rem; margin-top:6px; }
.form-row.has-error input,
.form-row.has-error select{ border-color:#e3665c; }
.form-row.has-error .err-msg{ display:block; }
.form-row .opt{ color:var(--gray-dark); letter-spacing:0; text-transform:none; }
label .req{ color:var(--gold); }

/* Validation-error toast (public forms) — matches the admin panel's toast. */
.kn-form-toast{
  position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%,140%);
  background:var(--charcoal); border:1px solid var(--gold); border-radius:var(--radius);
  color:var(--cream); font-size:.87rem; padding:.8rem 1.2rem; z-index:900;
  transition:transform .35s cubic-bezier(.2,.8,.3,1); box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.kn-form-toast.show{ transform:translate(-50%,0); }

.contact-form.flash{ animation:cardFlash .9s ease; }
@keyframes cardFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
  35%    { box-shadow:0 0 0 3px rgba(201,162,39,.35); }
}

/* ==========================================================
   Commercial listing extras
   ========================================================== */
.prop-tag.commercial{ color:var(--gold-light); }
.spec-strip{
  background:var(--charcoal); color:rgba(255,255,255,.8);
  padding:26px 0; border-bottom:1px solid rgba(201,162,39,.15);
}
.spec-strip .container{ display:flex; flex-wrap:wrap; gap:34px; justify-content:center; }
.spec-strip span{ display:flex; align-items:center; gap:10px; font-size:.88rem; }
.spec-strip svg{ width:18px; height:18px; color:var(--gold); flex:none; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:980px){
  .story-grid{ grid-template-columns:1fr; gap:44px; }
  .story-portrait{ max-width:320px; margin:0 auto; }
  .promo-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .story, .promo, .blog-section{ padding:80px 0; }
  .promo-card{ padding:40px 28px; min-height:280px; }
}

/* blog teaser on the homepage sits on white */
.blog-section.light{ background:var(--white); }