/* =========================================================
   Company-page additions (BHY Properties)
   Loaded after style.css, which is shared with the property pages.
   ========================================================= */

/* Letter mark in place of the house number */
.big-num.letters { font-size: clamp(7rem, 17vw, 15.5rem); letter-spacing: -.02em; }

/* ---------- Principles (dark band over a photo) ---------- */
.principles { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; }
.principles-bg { position: absolute; inset: 0; z-index: -2; }
.principles-bg img { width: 100%; height: 100%; object-fit: cover; }
.principles::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 15, 12, .82) 0%, rgba(10, 15, 12, .45) 55%, rgba(10, 15, 12, .85) 100%);
}
.principles h2 em { color: var(--oak-2); }
.principles .section-head > p { color: rgba(255, 255, 255, .75); }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pr-card {
  padding: clamp(26px, 3vw, 38px); border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .5s var(--ease), border-color .4s, background-color .4s;
}
.pr-card:hover { transform: translateY(-4px); border-color: rgba(217, 174, 123, .5); background: rgba(255, 255, 255, .08); }
.pr-num { display: block; font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 1rem; font-weight: 600; letter-spacing: .2em; color: var(--oak-2); }
.pr-card h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin: 20px 0 10px; }
.pr-card p { color: rgba(255, 255, 255, .74); }

/* ---------- London split (image in place of the map) ---------- */
.split-media { position: relative; min-height: 520px; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.split-media:hover img { transform: scale(1.04); }
.split-media figcaption {
  position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px;
  background: rgba(20, 29, 25, .55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.near-list .n { font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 1.3rem; color: var(--oak-3); min-width: 2.2em; }
.near-list.numbered li { justify-content: flex-start; gap: 18px; }

@media (max-width: 980px) {
  .pr-grid { grid-template-columns: 1fr; }
  .split-media { min-height: 380px; }
}
@media (max-width: 700px) {
  .big-num.letters { font-size: 31vw; }
}