/* =========================================================
   property.css — Property Media
   Dark, architectural and structured. Strict grids, visible
   rules, uppercase labels and real numbers. Estate agents
   compare on scope, turnaround and price, so the layouts here
   put those front and centre rather than making people hunt.
   ========================================================= */

/* ---------- Hero ---------- */
.p-hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.p-hero__media { position: absolute; inset: 0; z-index: -2; }
.p-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.p-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17,17,17,.94) 0%, rgba(17,17,17,.78) 46%, rgba(17,17,17,.40) 100%);
}
.p-hero__inner { position: relative; max-width: 56ch; }
.p-hero h1 { letter-spacing: -0.025em; }
.p-hero h1 em { font-style: italic; color: var(--taupe); }
.p-hero__sub {
  margin-top: 1.75rem;
  max-width: 52ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--fg-muted);
}
.p-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* Credential chips — CAA certification is the strongest trust
   signal on this side, so it sits in the hero, not a footnote. */
.p-chips { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2.5rem; }
.p-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9375rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--line);
}
.p-chip::before { content: ""; width: 5px; height: 5px; background: var(--taupe); }

/* ---------- Stat strip ---------- */
.p-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.p-stat {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  border-right: 1px solid var(--line);
}
.p-stat:last-child { border-right: 0; }
@media (max-width: 700px) {
  .p-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .p-stat:last-child { border-bottom: 0; }
}
.p-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: 1;
  color: var(--ivory);
  margin-bottom: .875rem;
}
.p-stat__value span { color: var(--taupe); }
.p-stat__label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- Section header with a rule ---------- */
.p-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) { .p-head { grid-template-columns: 1fr; align-items: start; } }
.p-head p { color: var(--fg-muted); }

/* ---------- Services grid ---------- */
.p-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.p-service {
  padding: clamp(2rem, 3.5vw, 3rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease);
}
.p-service:hover { background: var(--bg-alt); }
.p-service__index {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--taupe);
  margin-bottom: 2rem;
}
.p-service h3 { font-size: 1.375rem; margin-bottom: .875rem; }
.p-service p { font-size: 0.9375rem; color: var(--fg-muted); margin-bottom: 1.5rem; }
.p-service__list li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.8125rem;
  color: var(--fg-faint);
  line-height: 2;
}
.p-service__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1em;
  width: 6px; height: 1px;
  background: var(--taupe);
}

/* ---------- One-visit proposition ---------- */
.p-visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 900px) { .p-visit { grid-template-columns: 1fr; } }

.p-visit__flow { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.p-visit__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--bg);
}
.p-visit__row dt {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ivory);
}
.p-visit__row dd {
  grid-column: 3;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  text-align: right;
}
.p-visit__row .tick {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--taupe);
  color: var(--taupe);
  font-size: .625rem;
}

/* ---------- Process / turnaround ---------- */
.p-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.p-step {
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.p-step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--line);
  margin-bottom: 1.25rem;
  transition: color .5s var(--ease);
}
.p-step:hover .p-step__num { color: var(--taupe); }
.p-step h3 { font-size: 1.125rem; margin-bottom: .625rem; }
.p-step p { font-size: 0.875rem; color: var(--fg-muted); }

/* ---------- Coverage ---------- */
.p-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 2rem;
}
.p-coverage li {
  padding: .5rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  border: 1px solid var(--line);
}

/* ---------- Enquiry ---------- */
.p-enquire {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) { .p-enquire { grid-template-columns: 1fr; } }

.p-contact-list { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.p-contact-list dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: .375rem;
}
.p-contact-list dd { font-size: 1rem; color: var(--fg); }
.p-contact-list dd a:hover { color: var(--taupe); }