/* ─── Property Descriptions — scoped styles ──────────────────────────────
   Deliberately lighter than service-detail.css's other service pages: no
   interactive feature-swap list, no 2x2 process diagram, no diagonal-cut
   cross-sell cards. This is a $25 add-on, not a core service, so the page
   is shorter and quieter on purpose.

   Relies on style.css for navbar/final-cta/footer tokens, and on
   service-detail.css only for the shared .sd-hero house-cutout shell and
   the .sd-section__eyebrow / .sd-section__heading typographic utilities —
   everything below that is unique to this page, prefixed .pd-.
──────────────────────────────────────────────────────────────────────── */

/* ─── Hero — stacked two-line word, house overlapping only the lower line ─── */

.pd-hero__heading {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  user-select: none;
  gap: clamp(34px, 4.8vw, 66px);
}

/* line-height is deliberately looser here (1.05, not the shared .sd-hero__
   heading's 0.86) — that tight ratio is tuned for a single giant word whose
   glyphs are meant to bleed into the house image below it. Stacked two-line
   use needs each word's own box to actually contain its ink, or no gap
   value stays visually "tiny": at 0.86 even a 170px gap still touched. */
.pd-hero__word {
  font-family: 'Rothefight', sans-serif;
  font-weight: normal;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #1a1816;
}

.pd-hero__word--small {
  font-size: clamp(26px, 7.5vw, 92px);
}

.pd-hero__word--large {
  font-size: clamp(52px, 15.5vw, 210px);
}

[dir="rtl"] .pd-hero__word {
  font-family: 'Noto Naskh Arabic', serif;
  letter-spacing: 0;
}

[dir="rtl"] .pd-hero__word--small { font-size: clamp(1.3rem, 4.5vw, 3rem); }
[dir="rtl"] .pd-hero__word--large { font-size: clamp(2.4rem, 8vw, 6rem); }

/* ─── Intro — a single stated claim instead of a photo pairing ──────────── */

.pd-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(4vw + 40px) 24px calc(3vw + 24px);
  text-align: center;
}

.pd-intro__quote {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1a1816;
  margin: 0 0 1.75rem;
}

.pd-intro__body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #2e2c2c;
  opacity: 0.65;
  margin: 0;
}

/* ─── Shared section shell for everything below the intro ───────────────── */

.pd-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: calc(2.5vw + 24px) 24px;
}

.pd-section .sd-section__heading {
  max-width: 620px;
}

.pd-section .sd-section__heading--wide {
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .pd-section .sd-section__heading--wide {
    white-space: normal;
  }
}

/* ─── What Makes a Good Description — numbered list, two columns ────────── */

.pd-principles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.5rem;
  row-gap: 2.5rem;
}

.pd-principle {
  border-top: 1px solid rgba(46, 44, 44, 0.14);
  padding-top: 1.1rem;
}

.pd-principle__num {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: #1a1816;
  opacity: 0.18;
  margin-bottom: 0.6rem;
}

.pd-principle__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #2e2c2c;
  margin: 0 0 0.5rem;
}

.pd-principle__body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #2e2c2c;
  opacity: 0.62;
  margin: 0;
}

/* ─── How It Boosts Your Listing — points stacked left, image right ─────── */

.pd-benefits__layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 3.5rem;
  align-items: center;
}

.pd-benefits__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pd-benefits__image-wrap {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.pd-benefits__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-benefit {
  border-top: 1px solid rgba(46, 44, 44, 0.14);
  padding-top: 1.1rem;
}

.pd-benefit__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: #2e2c2c;
  margin: 0 0 0.6rem;
}

.pd-benefit__body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #2e2c2c;
  opacity: 0.62;
  margin: 0;
}

/* ─── How It Works — compact inline row, not a 2x2 diagram ───────────────── */

.pd-steps__row {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.pd-step {
  flex: 1;
}

.pd-step__num {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 0.7rem;
}

.pd-step__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: #2e2c2c;
  margin: 0 0 0.5rem;
}

.pd-step__body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #2e2c2c;
  opacity: 0.62;
  margin: 0;
}

.pd-step__arrow {
  flex-shrink: 0;
  padding-top: 0.3rem;
  color: #2e2c2c;
  opacity: 0.25;
  font-size: 1.3rem;
}

/* ─── Example — before/after written side by side, no photo assets ──────── */

/* Zero gap on purpose — the two cards sit flush against each other. Each
   card keeps its own full corner radius (not just the outer two corners),
   so where they meet in the middle, the two inner top corners curve away
   from each other and read as a shallow "M" notch instead of a straight
   seam. Same thing happens in mirror at the bottom. */
.pd-example__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 1.25rem;
}

.pd-example__card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
}

.pd-example__card--after {
  background: #1a1816;
}

/* Thin rainbow neon glow around the Runt Media card (image + body, since
   .pd-example__card is one continuous box) — same treatment as
   getting-home-ready.html's "See the Difference" slider. Lives on this
   wrapper (not .pd-example__card--after itself, which has overflow:hidden
   for the image clip) as a ::before — painted first, so it sits behind the
   card with no z-index needed, showing only as a soft ring bleeding past
   the rounded corners. No box-shadow involved, just one blurred
   conic-gradient ring. */
.pd-example__card-glow {
  position: relative;
  height: 100%;
}

.pd-example__card-glow .pd-example__card--after {
  position: relative;
  height: 100%;
}

.pd-example__card-glow::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 25px;
  background: conic-gradient(from 180deg,
    #ff3b3b, #ff9d3b, #fff23b, #3bff6e, #3bd4ff, #7a3bff, #ff3bcf, #ff3b3b);
  filter: blur(9px);
  opacity: 0.9;
}

/* Image sits flush at the very top of the card, clipped to the card's own
   radius by the parent's overflow:hidden — no gap between photo and copy,
   both are just one continuous box. */
.pd-example__img-wrap {
  aspect-ratio: 4 / 3;
}

.pd-example__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pulled up over the image on a negative margin, with rounded top corners,
   so the text card overlaps onto the photo instead of butting against it
   on a flat seam. */
.pd-example__body {
  position: relative;
  margin-top: -24px;
  border-radius: 24px 24px 0 0;
  background: #fff;
  padding: 1.5rem 1.75rem 1.75rem;
}

.pd-example__card--after .pd-example__body {
  background: #1a1816;
}

.pd-example__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 1rem;
}

.pd-example__card--after .pd-example__label {
  color: #fff;
  opacity: 0.5;
}

.pd-example__text {
  font-size: 0.98rem;
  line-height: 1.75;
  color: #2e2c2c;
  opacity: 0.72;
  margin: 0;
}

.pd-example__card--after .pd-example__text {
  color: #fff;
  opacity: 0.88;
}

/* Fixed-height viewport so the longer write-up scrolls in place instead of
   growing the card. Scrollbar hidden since the auto-scroll animation
   (inline script, property-descriptions.html) already communicates that it
   moves; manual wheel/touch scroll still works with it hidden. */
.pd-example__scroll {
  --lines: 5;
  height: calc(0.98rem * 1.75 * var(--lines));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pd-example__scroll::-webkit-scrollbar {
  display: none;
}

/* ─── Final CTA — match this page's cream background instead of
   style.css's default white. The footer card itself stays white. ─── */

.final-cta {
  background: #f7f5f2;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .pd-principles__grid {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }
  .pd-benefits__layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .pd-benefits__image-wrap {
    order: -1;
  }
  .pd-steps__row {
    flex-direction: column;
    gap: 1.75rem;
  }
  .pd-step__arrow {
    display: none;
  }
  .pd-example__grid {
    grid-template-columns: 1fr;
  }
}