/* ==========================================================================
   MyCabin Ready Houses Page Pack — frontend.css
   Clean-room build from source-design/ready-houses-original.zip. Every
   selector is scoped under .pp-ready-houses (Page Pack Spec §5). Design
   tokens below are the same MyCabin site-wide palette/scale used by every
   other Page Pack in this project — copied here (not shared) because each
   pack owns its own CSS per spec, not because these values are page-
   specific. This page's own source styles.css/script.js are confirmed to
   be the exact same shared site-wide files Contact/Milla47/Homes-with-
   Plot's own sources used — only the subset of rules this page's own DOM
   references was ported.
   ========================================================================== */

.pp-ready-houses {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-beige:        #FBF6F3;
  --pp-surface:      var(--pp-beige);
  --pp-olive:        #6E5C3C;
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;
  --pp-stone:        color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone));
  --pp-ink-hair:     color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-ink-line:     color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone));
  --pp-ink-72: color-mix(in oklab, var(--pp-ink) 72%, transparent);
  --pp-ink-56: color-mix(in oklab, var(--pp-ink) 65%, transparent);
  --pp-ink-28: color-mix(in oklab, var(--pp-ink) 28%, transparent);
  --pp-bone-80: color-mix(in oklab, var(--pp-bone) 80%, transparent);
  --pp-bone-60: color-mix(in oklab, var(--pp-bone) 60%, transparent);
  --pp-bone-line: color-mix(in oklab, var(--pp-bone) 22%, transparent);

  --pp-maxw:    1280px;
  --pp-gutter:  clamp(18px, 4vw, 40px);
  --pp-hdr-h:   clamp(58px, 7vw, 74px);
  --pp-sec-y-p: clamp(48px, 7vw, 104px);

  --pp-r-pill: 999px;
  --pp-r-card: 11px;
  --pp-r-lg:   10px;
  --pp-r-md:   9px;
  --pp-r-xs:   7px;

  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-med:  .25s;

  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  color: var(--pp-ink);
  background: var(--pp-bone);
  overflow-x: clip;
}

/* Fine paper-grain dot texture over the whole page (source styles.css §02) —
   built in from v1.0.0 this round rather than retrofitted later, the same
   exact mechanism (same values, same shared source file) already restored
   on Contact v1.0.1 and Milla 47 v1.0.23 after both initially shipped
   without it. Page Pack CSS may never target bare body (Spec §5); ported
   as ::after on this pack's own root instead — position:fixed makes the
   result identical regardless of which element the pseudo-element is
   attached to, since fixed positioning is relative to the viewport. */
.pp-ready-houses::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  background-image: radial-gradient(color-mix(in oklab, var(--pp-ink) 55%, transparent) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* Real WordPress typography-cascade fix (Master Workflow §44) — the active
   theme's own generated global-styles block declares a direct font-family
   rule on h1-h6 and .wp-block-button__link/.wp-element-button, confirmed
   necessary on every prior Page Pack in this project. */
.pp-ready-houses h1,
.pp-ready-houses h2,
.pp-ready-houses h3,
.pp-ready-houses h4,
.pp-ready-houses .wp-block-button__link,
.pp-ready-houses .wp-element-button {
  font-family: inherit;
}

/* Page-wide anchor reset — source's own global a{color:ink;text-decoration:
   none} a:hover{color:accent}. */
.pp-ready-houses a { color: var(--pp-ink); text-decoration: none !important; }
.pp-ready-houses a:hover { color: var(--pp-accent); text-decoration: none !important; }
.pp-ready-houses :focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.pp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pp-no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.pp-no-bar::-webkit-scrollbar { display: none; }

/* ==========================================================================
   WordPress Flow-margin defense — every custom component that owns its own
   direct-child spacing/layout must neutralize WordPress's default Flow
   margin-block-start injection (Master Workflow §7.1/§17), confirmed as a
   recurring, real mechanism across every prior Page Pack in this project.
   Built in from v1.0.0 (not discovered later) — every multi-child custom
   row/column/list on this page is listed below.
   ========================================================================== */
.pp-ready-houses .pp-rh-hero > *,
.pp-ready-houses .pp-rh-hero__text > *,
.pp-ready-houses .pp-rh-hero-grid > *,
.pp-ready-houses .pp-rh-hero__table-col > *,
.pp-ready-houses .pp-rh-compare > *,
.pp-ready-houses .pp-rh-compare__row > *,
.pp-ready-houses .pp-rh-included > *,
.pp-ready-houses .pp-rh-included__list > *,
.pp-ready-houses .pp-rh-included__item > *,
.pp-ready-houses .pp-rh-photo__copy > *,
.pp-ready-houses .pp-rh-stock-cards > *,
.pp-ready-houses .pp-rh-stock-card > *,
.pp-ready-houses .pp-rh-stock-media > *,
.pp-ready-houses .pp-rh-stock-gallery > *,
.pp-ready-houses .pp-rh-stock-body > *,
.pp-ready-houses .pp-rh-stock-head > *,
.pp-ready-houses .pp-rh-stock-head__name > *,
.pp-ready-houses .pp-rh-stock-colour > *,
.pp-ready-houses .pp-rh-stock-price > *,
.pp-ready-houses .pp-rh-stock-specs > *,
.pp-ready-houses .pp-rh-stock-specs__row > *,
.pp-ready-houses .pp-rh-stock-specs__item > *,
.pp-ready-houses .pp-rh-stock-controls > *,
.pp-ready-houses .pp-rh-addons > *,
.pp-ready-houses .pp-rh-addons__item > *,
.pp-ready-houses .pp-rh-stock-cta > *,
.pp-ready-houses .pp-rh-faq-split > *,
.pp-ready-houses .pp-rh-faq-split__intro > *,
.pp-ready-houses .pp-rh-faq-list > *,
.pp-ready-houses .pp-rh-faq-item > *,
.pp-ready-houses .pp-rh-enquiry-grid > *,
.pp-ready-houses .pp-rh-enquiry__copy > *,
.pp-ready-houses .pp-rh-dark-cta > *,
.pp-ready-houses .pp-rh-dark-cta__copy > *,
.pp-ready-houses .pp-rh-dark-cta__btns > *,
.pp-ready-houses .pp-wrap > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.pp-ready-houses .pp-wrap {
  box-sizing: border-box;
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding-inline: var(--pp-gutter);
}

/* ==========================================================================
   Buttons — same shared .btn system as every other Page Pack in this
   project (base + variant classes ported 1:1 from source's own values).
   ========================================================================== */
.pp-ready-houses .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 21px;
  border-radius: var(--pp-r-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-ready-houses .pp-btn-ink .wp-block-button__link { background: var(--pp-ink); color: var(--pp-bone); border: 0; }
.pp-ready-houses .pp-btn-ink .wp-block-button__link:hover { background: var(--pp-accent); color: var(--pp-bone); }
.pp-ready-houses .pp-btn-light .wp-block-button__link { background: var(--pp-bone); color: var(--pp-ink); border: 0; }
.pp-ready-houses .pp-btn-light .wp-block-button__link:hover { background: var(--pp-accent-soft); color: var(--pp-ink); }
.pp-ready-houses .pp-btn-outline .wp-block-button__link { background: transparent; color: var(--pp-ink); border: 1px solid var(--pp-ink); }
.pp-ready-houses .pp-btn-outline .wp-block-button__link:hover { background: var(--pp-surface); color: var(--pp-ink); }
.pp-ready-houses .pp-btn-ghost .wp-block-button__link {
  background: color-mix(in oklab, var(--pp-ink) 30%, transparent);
  color: var(--pp-bone);
  border: 1px solid var(--pp-bone-60);
}
.pp-ready-houses .pp-btn-ghost .wp-block-button__link:hover {
  background: color-mix(in oklab, var(--pp-bone) 14%, transparent);
  border-color: var(--pp-bone);
  color: var(--pp-bone);
}
.pp-ready-houses .pp-btn-block { display: flex; width: 100%; }
.pp-ready-houses .pp-btn-block .wp-block-button__link { width: 100%; }

/* Text link with the underline that wipes in left to right (source's own
   mechanism verbatim: a permanent thin ink-line border-bottom, plus an
   accent-colour background-image swipe that grows from 0% to 100% width on
   hover — both sit in the exact same 1.5px-tall strip at the text's own
   baseline, so they visually coincide rather than doubling). */
.pp-ready-houses .pp-rh-link-arrow a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--pp-ink-line);
  background-image: linear-gradient(var(--pp-accent), var(--pp-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .45s var(--pp-ease);
}
.pp-ready-houses .pp-rh-link-arrow a:hover { background-size: 100% 1.5px; }
.pp-ready-houses .pp-rh-link-arrow a::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  order: 2;
}
.pp-ready-houses .pp-rh-link-arrow a { flex-direction: row; }

/* ==========================================================================
   Hero
   ========================================================================== */
.pp-ready-houses .pp-rh-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--pp-hdr-h) + clamp(20px, 3vw, 44px)) 0 clamp(32px, 5vw, 56px);
  margin-top: 0 !important;
}
.pp-ready-houses .pp-rh-hero__bg.wp-block-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  width: 100%;
  height: 100%;
}
.pp-ready-houses .pp-rh-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  display: block;
}
.pp-ready-houses .pp-rh-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--pp-ink) 55%, transparent) 0%, color-mix(in oklab, var(--pp-ink) 78%, transparent) 100%);
}
.pp-ready-houses .pp-rh-hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 72px);
  align-items: end;
}
/* gap:0 — spacing between the H1 and paragraph comes solely from the
   paragraph's own margin-top:22px (below), matching source exactly. A
   non-zero flex gap here previously stacked ON TOP of that margin-top
   (flex gap and a child's own margin never collapse into each other),
   measuring an 38px H1→paragraph gap in WordPress against source's 22px. */
.pp-ready-houses .pp-rh-hero__text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pp-ready-houses .pp-rh-hero__h1 {
  font-size: clamp(30px, 7vw, 52px);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 500;
  color: var(--pp-bone);
}
.pp-ready-houses .pp-rh-hero__more { margin-top: 22px !important; font-size: 16px; line-height: 1.5; font-weight: 300; color: var(--pp-bone-80); max-width: 46ch; }

.pp-ready-houses .pp-rh-hero__table-col { display: flex; flex-direction: column; min-width: 0; }
.pp-ready-houses .pp-rh-hero__tablecap {
  margin-bottom: 10px !important;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pp-bone-80);
}

/* --- Comparison table, built as structured native Groups rather than
   core/table or core/html: core/table has no per-column background-wash
   control (the "Ready house" column needs a stronger accent-soft wash than
   the rest of the header row, and a lighter version in every body row),
   which its own block editor UI cannot express without hand-edited HTML —
   exactly the case the project's own spec allows falling back to
   structured Groups for. Each row is a real, independently-editable Group;
   each cell a real, independently-editable Paragraph. */
.pp-ready-houses .pp-rh-compare {
  display: grid;
  /* Column proportions measured directly off the real source <table>'s own
     browser auto-layout algorithm at 1440px (label/ready/alt = 146.1 /
     219.3 / 205.8px of 571.2px total, confirmed via getBoundingClientRect
     on the live source page). A genuine <table>'s auto-layout does NOT
     size the label column to its own min-content and split the rest
     evenly (measured: that gives 116px, not 146px) — it distributes the
     table's full declared width across ALL columns proportional to each
     column's own content-driven weight, label column included. That
     proportion doesn't move with viewport width (the content driving it
     is fixed, unwrapped text), so it's reproduced here as three fixed fr
     weights rather than max-content/1fr/1fr, which under-sized the label
     column and equal-split the two data columns instead of weighting
     Ready house wider than Made to order. */
  grid-template-columns: 146.1fr 219.3fr 205.8fr;
  border-radius: var(--pp-r-md);
  overflow: hidden;
  background: var(--pp-bone);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--pp-ink) 7%, transparent);
}
/* Each row is subgridded into the table's own column tracks (rather than
   being its own independent 3-column grid) so every row's label/ready/alt
   cells align to ONE shared set of column widths — exactly how a real
   <table> shares column widths across every <tr> — while still remaining
   a normal, independently-selectable/duplicatable Group block in Gutenberg
   (unlike a display:contents row, which would render no box of its own
   and complicate block-outline/selection UI in the editor). */
.pp-ready-houses .pp-rh-compare__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
/* Border lives on the cell, not the row — matching source, where it's
   `.compare th, .compare td { border-bottom }`, never a rule on `<tr>`
   itself. Putting it on both (a prior version of this fix did) double-
   stacked the header row's border-bottom (its own row-level 1px plus the
   head cell's own 1px override), measuring the header row 2px taller
   than source. */
.pp-ready-houses .pp-rh-compare__row--last .pp-rh-compare__cell { border-bottom: 0; }
.pp-ready-houses .pp-rh-compare__cell {
  margin: 0 !important;
  padding: 15px 16px;
  font-size: 14.5px;
  line-height: 1.35;
  text-align: center;
  border-bottom: 1px solid var(--pp-ink-hair);
}
.pp-ready-houses .pp-rh-compare__cell--label { text-align: left; font-weight: 400; color: var(--pp-ink-72); white-space: nowrap; }
.pp-ready-houses .pp-rh-compare__cell--ready { background: color-mix(in oklab, var(--pp-accent-soft) 10%, transparent); font-weight: 500; }
.pp-ready-houses .pp-rh-compare__cell--alt { color: var(--pp-ink-72); font-weight: 400; }
.pp-ready-houses .pp-rh-compare__row--head .pp-rh-compare__cell {
  /* No border-bottom: on the real source page the header <tr> is also its
     <thead>'s only/last child, so source's own `tr:last-child th { border-
     bottom: 0 }` rule wins over `.compare thead th`'s ink-line border —
     confirmed directly (computed borderBottomWidth: 0px on the live
     source header cells, measured height 50.2px). */
  background: var(--pp-tint);
  border-bottom: 0;
  padding-block: 16px;
  font-size: 13.5px;
  font-weight: 500;
}
.pp-ready-houses .pp-rh-compare__row--head .pp-rh-compare__cell--ready { background: var(--pp-accent-soft); }
.pp-ready-houses .pp-rh-compare__row--head .pp-rh-compare__cell--label { color: var(--pp-ink); }

/* "Included in every price" — check icons are real core/image blocks
   (independently selectable/replaceable/duplicatable), matching this
   project's established editable-icon-architecture rule. */
.pp-ready-houses .pp-rh-included { margin-top: 22px !important; }
.pp-ready-houses .pp-rh-included__label { font-size: 13px; font-weight: 500; color: var(--pp-bone-80); }
.pp-ready-houses .pp-rh-included__list {
  margin-top: 14px !important;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
}
.pp-ready-houses .pp-rh-included__item { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--pp-bone); white-space: nowrap; }
.pp-ready-houses .pp-rh-included__icon { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; }
.pp-ready-houses .pp-rh-included__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ==========================================================================
   Divider rules — the two section-boundary hairlines the source declares
   as a border-top on the section container itself (.ready-photo,
   .stock-list) migrated to real core/separator siblings, per this
   project's page-section-divider policy.
   ========================================================================== */
.pp-ready-houses .pp-rh-rule { border-top-width: 1px; border-color: var(--pp-ink-hair); margin: 0 !important; }
.pp-ready-houses .pp-rh-rule--stock { border-color: var(--pp-ink-line); }

/* ==========================================================================
   Photo band intro
   ========================================================================== */
.pp-ready-houses .pp-rh-photo { margin-top: 0 !important; padding: clamp(32px, 5vw, 56px) 0; background: var(--pp-surface); }
.pp-ready-houses .pp-rh-photo__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pp-ready-houses .pp-rh-photo__copy { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.pp-ready-houses .pp-rh-photo__copy h2 { font-size: clamp(24px, 5vw, 34px); line-height: 1.18; letter-spacing: -.025em; font-weight: 500; color: var(--pp-ink); }
.pp-ready-houses .pp-rh-photo__copy p { font-size: clamp(13.5px, 2.8vw, 15px); line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }

/* ==========================================================================
   Stock list
   ========================================================================== */
.pp-ready-houses .pp-rh-stock {
  margin-top: 0 !important;
  background: var(--pp-surface);
  padding: clamp(24px, 4vw, 44px) 0 clamp(32px, 5vw, 56px);
}
.pp-ready-houses .pp-rh-stock__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(16px, 2.4vw, 22px);
}
.pp-ready-houses .pp-rh-stock__count { font-size: 13px; font-weight: 500; letter-spacing: .05em; color: var(--pp-ink); }

.pp-ready-houses .pp-rh-stock-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.pp-ready-houses .pp-rh-stock-card {
  display: flex;
  flex-direction: column;
  background: var(--pp-bone);
  border: 1px solid var(--pp-stone);
  border-radius: var(--pp-r-card);
  overflow: hidden;
}
.pp-ready-houses .pp-rh-stock-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pp-surface);
}

/* Per-card photo gallery — every photo is a real core/image block; the
   scroll-snap rail mechanics live here in CSS, matching every other rail
   in this project. */
.pp-ready-houses .pp-rh-stock-gallery {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  touch-action: pan-x;
}
.pp-ready-houses .pp-rh-stock-gallery > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  height: 100%;
  margin: 0 !important;
}
.pp-ready-houses .pp-rh-stock-gallery__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-ready-houses .pp-rh-stock-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 6px 11px;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-ink) 88%, transparent);
  color: var(--pp-bone);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.pp-ready-houses .pp-rh-stock-tag--new { background: var(--pp-accent-soft); color: var(--pp-ink); }

.pp-ready-houses .pp-rh-stock-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pp-ready-houses .pp-rh-stock-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-ink) 72%, transparent);
  color: var(--pp-bone);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pp-ready-houses .pp-rh-stock-dots { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 4px; }
.pp-ready-houses .pp-rh-dot {
  pointer-events: auto;
  width: 6px;
  height: 6px;
  min-width: 0;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-bone) 55%, transparent);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pp-ready-houses .pp-rh-dot.is-active { background: var(--pp-bone); }
/* Previous/next controls are real core/image blocks (figure > img), not
   <button>s — the icon itself must stay a real, independently selectable/
   replaceable/duplicatable Gutenberg block (editable-icon-architecture
   rule), matching the FAQ +/- and included-list check icons already
   established elsewhere on this page. The figure becomes the same
   absolutely-positioned circular hit-target the old <button> was;
   core/image's own default margin is reset (margin normally offsets an
   absolutely-positioned box away from its inset-calculated position, the
   same class of bug already found and fixed on this page's dividers).
   :disabled doesn't exist on a <figure> (it's not a real form control),
   so the "hide at the gallery's start/end" state moves from the CSS
   :disabled pseudo-class to an aria-disabled="true" attribute frontend.js
   now sets directly (kept in sync with the exact same scroll-position
   logic that previously drove the native .disabled property). */
.pp-ready-houses .pp-rh-stock-arrow.wp-block-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  pointer-events: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pp-r-pill);
  border: 0;
  background: color-mix(in oklab, var(--pp-ink) 55%, transparent);
  cursor: pointer;
  transition: background .2s ease;
}
.pp-ready-houses .pp-rh-stock-arrow.wp-block-image:hover { background: color-mix(in oklab, var(--pp-ink) 75%, transparent); }
.pp-ready-houses .pp-rh-stock-arrow.wp-block-image[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.pp-ready-houses .pp-rh-stock-arrow--prev { left: 10px; }
.pp-ready-houses .pp-rh-stock-arrow--next { right: 10px; }
.pp-ready-houses .pp-rh-stock-arrow img { width: 16px; height: 16px; object-fit: contain; display: block; margin: 0; }

.pp-ready-houses .pp-rh-stock-body { display: flex; flex-direction: column; gap: 14px; padding: clamp(16px, 2.2vw, 20px); flex: 1; }
.pp-ready-houses .pp-rh-stock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pp-ready-houses .pp-rh-stock-head__name { display: flex; flex-direction: column; min-width: 0; }
.pp-ready-houses .pp-rh-stock-head__name h2 { font-size: 22px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.pp-ready-houses .pp-rh-stock-colour { margin-top: 6px !important; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pp-ink-56); }
.pp-ready-houses .pp-rh-swatch { width: 13px; height: 13px; flex: 0 0 13px; border-radius: var(--pp-r-pill); border: 1px solid var(--pp-ink-28); }
.pp-ready-houses .pp-rh-stock-price { text-align: right; white-space: nowrap; flex: 0 0 auto; }
.pp-ready-houses .pp-rh-stock-price__old { display: block; font-size: 13px; font-weight: 400; color: var(--pp-ink-56); text-decoration: line-through; }
.pp-ready-houses .pp-rh-stock-price__new { display: block; margin-top: 0 !important; font-size: 19px; font-weight: 500; letter-spacing: -.018em; }
/* margin-top 7.5px, not 0 — source's own VAT line is a plain inline
   <small> following two block-level siblings (old/new price), which puts
   it in its own anonymous block box in an inline formatting context; that
   box measures visibly taller/lower than a plain block element at the
   same font-size (measured directly on the live source page: a genuine
   ~6px gap before the VAT text, plus a taller box overall — real browser
   rendering, not a design margin declared anywhere in source CSS). This
   pack uses three independently-editable core/paragraphs instead of
   source's mixed inline/block markup (deliberately, for Gutenberg
   editability), so that inline-formatting-context side effect doesn't
   happen here on its own — reproduced with an explicit margin-top instead
   so the price block's own height matches source exactly, since it is the
   taller of stock-head's two flex children and governs the whole head's
   height (this cascades: every gap below the header in the card was
   otherwise correct — this single price-height shortfall was the entire
   source of Card 1/2/3's ~7.5px total-height mismatch against source). */
.pp-ready-houses .pp-rh-stock-price__vat { display: block; margin-top: 7.5px !important; font-size: 11px; color: var(--pp-ink-56); }

/* The spec grid's own border-top/border-bottom were previously CSS-owned,
   living directly on this component (matching source's own .stock-specs
   {border-top;border-bottom}) — not independently selectable/editable in
   Gutenberg. Converted to two real core/separator blocks, nested as this
   group's own first/last child (the same nested-inside-repeated-items
   divider policy already used for this page's FAQ item rules), with the
   4-item row moved into its own .pp-rh-stock-specs__row wrapper carrying
   the padding that used to live here — this keeps both divider lines at
   the EXACT same pixel position as the borders they replace (padding
   sits between the separator and the row either way, 13px both sides;
   only the "border" became a real 1px block instead of a border on this
   now-plain wrapper). */
.pp-ready-houses .pp-rh-stock-specs { display: flex; flex-direction: column; }
.pp-ready-houses .pp-rh-stock-specs__rule { border-top-width: 1px; border-top-style: solid; border-bottom-width: 0; border-color: var(--pp-ink-hair); margin: 0 !important; }
.pp-ready-houses .pp-rh-stock-specs__row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; }
.pp-ready-houses .pp-rh-stock-specs__item { display: flex; flex-direction: column; gap: 3px; }
.pp-ready-houses .pp-rh-stock-specs__label { font-size: 10.5px; color: var(--pp-ink-56); }
.pp-ready-houses .pp-rh-stock-specs__value { font-size: 13.5px; font-weight: 500; white-space: nowrap; }

/* Add-on icons are real core/image blocks, same reasoning as the included-
   in-every-price icons above. */
.pp-ready-houses .pp-rh-addons { display: flex; flex-direction: column; gap: 9px; }
.pp-ready-houses .pp-rh-addons__item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 300; color: var(--pp-ink-72); }
.pp-ready-houses .pp-rh-addons__icon { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; }
.pp-ready-houses .pp-rh-addons__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp-ready-houses .pp-rh-addons__qty { color: var(--pp-ink-56); }

.pp-ready-houses .pp-rh-stock-cta { margin-top: auto !important; display: flex; flex-direction: column; gap: 8px; }
.pp-ready-houses .pp-rh-stock-cta__btn.wp-block-buttons { margin: 0 !important; }
/* Icon + text as one centered flex group, matching source's own .btn
   mechanism (display:inline-flex; align-items:center; justify-content:
   center; gap:10px — already the base .wp-block-button__link rule above,
   untouched here). Previously the icon was pulled out of that flow with
   position:absolute + a fixed left:21px, while padding-left:40px shifted
   the button's own centered text-content box independently — two
   unrelated positioning systems for one visual group, which is why the
   icon and text centered independently instead of as a unit. The pseudo-
   element needs no positioning of its own now: as an in-flow ::before
   inside a flex container it simply becomes the first flex item, taking
   its place immediately before the text with the container's own 10px
   gap, and the container's existing justify-content:center centers the
   icon+text pair together as source does. flex:none keeps it at its
   intrinsic 16x16 size (never stretched/shrunk by the flex layout). */
.pp-ready-houses .pp-rh-stock-cta__btn .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a12 12 0 006 6l1.5-2 4 1.5v3a2 2 0 01-2.2 2A17 17 0 014.5 5.7 2 2 0 016.5 3.5z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a12 12 0 006 6l1.5-2 4 1.5v3a2 2 0 01-2.2 2A17 17 0 014.5 5.7 2 2 0 016.5 3.5z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}
.pp-ready-houses .pp-rh-stock-cta__fine { margin: 0 !important; text-align: center; font-size: 11.5px; color: var(--pp-ink-56); font-weight: 300; }
.pp-ready-houses .pp-rh-stock-cta__fine a { text-decoration: underline !important; }

.pp-ready-houses .pp-rh-stock-foot { margin-top: 0 !important; padding-top: clamp(16px, 2.4vw, 22px); text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--pp-ink-56); font-weight: 300; }

/* ==========================================================================
   FAQ — dividers are real core/separator blocks, nested as each FAQ item's
   own first child (source's own per-item border-top migrated to a native,
   independently-editable block, per the nested-inside-repeated-items
   divider policy), plus one trailing separator closing the list (source's
   own .faq-cols border-bottom).
   ========================================================================== */
.pp-ready-houses .pp-rh-faq { margin-top: 0 !important; padding-block: var(--pp-sec-y-p); }
/* margin-top on the grid itself — source's own .faq-split carries this
   (margin-top: clamp(24px,3.5vw,36px)), separate from the section's own
   padding-block; missing here previously, which measured a 36px shortfall
   in "section top -> H2 top" against source at every viewport. */
.pp-ready-houses .pp-rh-faq-split { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); align-items: start; margin-top: clamp(24px, 3.5vw, 36px) !important; }
.pp-ready-houses .pp-rh-faq-split__intro { display: flex; flex-direction: column; max-width: 52ch; }
/* font-size/line-height previously matched source's .h2--xs variant
   (clamp(26px,4.6vw,40px)/1.08) instead of the variant this heading's own
   source markup actually carries, .h2--p (clamp(28px,4.4vw,46px)/1.06) —
   measured 6px too small at the clamp's max end. */
.pp-ready-houses .pp-rh-faq-split__intro h2 {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -.022em;
  font-weight: 500;
  max-width: 16ch;
}
.pp-ready-houses .pp-rh-faq-split__lede { margin-top: 14px !important; font-size: 15.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); max-width: 46ch; }
.pp-ready-houses .pp-rh-faq-split__intro .pp-rh-link-arrow { margin-top: 22px !important; }

/* margin-top: 0, not clamp(28px,4vw,52px) — source's generic .faq-cols
   carries that margin, but its own more specific .faq-cols.faq-split__list
   override (the variant this exact list uses) resets it back to 0, since
   this list already gets its top spacing from align-items:start on the
   parent grid, not its own margin. Measured as a 52px shortfall in
   "H2 top -> FAQ list top" against source at 1440px — the FAQ column
   sitting well below the left column's top instead of level with it. */
.pp-ready-houses .pp-rh-faq-list { display: flex; flex-direction: column; margin-top: 0 !important;
  /* Belt-and-suspenders alongside the content.html fix below: each FAQ
     item's saved block previously used "layout":{"type":"constrained"},
     WordPress's own default group-layout mode that applies
     --wp--style--global--content-size as a max-width (and auto
     inline-margins) to the item's direct children — a REAL WordPress
     rendering behaviour driven by block-supports at render time, which
     never shows up anywhere in a static content.html file and is
     therefore completely invisible to this project's local preview
     harness (confirmed: the harness's own rendered markup never carries
     an .is-layout-constrained class either way). That's the actual reason
     the previous round's identical defensive var() override here didn't
     visibly resolve the real-WordPress symptom even though every local
     measurement already matched source: it was fighting a mechanism the
     content.html markup no longer needs to invoke at all, since (see
     below) the FAQ items' own layout type has now been changed at the
     source from "constrained" to "default". This variable override is
     kept anyway as a second line of defense in case any other ancestor
     (a theme/global-styles root layout, for instance) also constrains
     content width — costs nothing if the content.html fix alone is
     already sufficient. */
  --wp--style--global--content-size: none;
}
.pp-ready-houses .pp-rh-faq-item { display: flex; flex-direction: column; }
/* border-bottom-width: 0 — a bare <hr> (core/separator's real element)
   carries a UA-default 1px border on every side; the pack's own rule only
   ever set border-top-width/color, leaving the browser's own default
   1px border-bottom in place underneath it and adding an extra,
   unaccounted-for 1px to every single FAQ row's height (measured: every
   row 1px taller than source, uniformly). border-top-style is set
   explicitly too so the visible top rule never silently depends on the
   UA default remaining "inset" for its style. max-width/margin-inline
   reset defensively — a constrained-layout max-width (real WordPress
   only, see .pp-rh-faq-list above) would otherwise shrink AND center
   this divider, both narrowing it and pulling it off the column's own
   left edge — exactly "too short / misplaced" as reported. */
.pp-ready-houses .pp-rh-faq-item__rule,
.pp-ready-houses .pp-rh-faq-list__rule-bottom { border-top-width: 1px; border-top-style: solid; border-bottom-width: 0; border-color: var(--pp-ink-line); margin: 0 !important; max-width: none !important; }

/* box-sizing: border-box — without it, width:100% + the 30px right padding
   (reserved for the absolutely-positioned +/- sign below) added up to a
   box 30px WIDER than its 580px column, so the sign's own `right:0`
   (measured from this element's own padding-box edge) landed 30px past
   the FAQ column's true right edge/the separators' own right edge,
   instead of flush with them. Source has no equivalent bug because its
   own stylesheet resets `*, *::before, *::after { box-sizing: border-box }`
   globally; this page pack doesn't carry an equivalent global reset, so
   it has to be set explicitly wherever (as here) a fixed/100% width and
   padding combine on the same box. */
.pp-ready-houses .pp-rh-faq__q {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 30px 20px 0;
  margin: 0 !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: color .2s;
}
.pp-ready-houses .pp-rh-faq__q:hover { color: var(--pp-accent); }
.pp-ready-houses .pp-rh-faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 20px;
  flex: 0 0 22px;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  color: var(--pp-ink-56);
  text-align: right;
}
.pp-ready-houses .pp-rh-faq__q[aria-expanded="true"]::after { content: "\2212"; }
.pp-ready-houses .pp-rh-faq__a { margin: 0 !important; padding: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--pp-ink-72); font-weight: 300; max-width: 52ch; }
.pp-ready-houses .pp-rh-faq__a[hidden] { display: none; }

/* ==========================================================================
   Enquiry form — olive band, form fields sit directly on it (no white
   card wrapper in source). Focus-state geometry lock built in from
   v1.0.0 — Contact's own multi-round lesson (constant border-width,
   outline/box-shadow only, box-sizing:border-box, explicit height,
   :focus-within wrapper lock, gap replaced by margin so a third-party
   password-manager DOM injection can never add layout space) applied
   proactively here rather than discovered later.
   ========================================================================== */
.pp-ready-houses .pp-rh-enquiry {
  margin-top: 0 !important;
  background: var(--pp-olive);
  color: var(--pp-bone);
  padding: clamp(40px, 7vw, 88px) 0;
}
.pp-ready-houses .pp-rh-enquiry-grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.pp-ready-houses .pp-rh-enquiry__copy { display: flex; flex-direction: column; min-width: 0; }
.pp-ready-houses .pp-rh-enquiry__copy h2 {
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 500;
  max-width: 16ch;
  color: var(--pp-bone);
}
.pp-ready-houses .pp-rh-enquiry__lede { margin-top: 14px !important; font-size: clamp(15px, 1.8vw, 17px); line-height: 1.6; font-weight: 300; color: var(--pp-bone-80); max-width: 46ch; }

.pp-ready-houses .pp-rh-form { display: grid; gap: 12px; }
.pp-ready-houses .pp-rh-field { display: flex; flex-direction: column; min-width: 0; }
/* margin:0 explicit — this label carries the ONLY spacing above it that's
   allowed to exist (the form's own 12px row-gap); nothing in this rule
   previously reset margin-bottom/left/right on it at all, unlike every
   other element in this form, so it was the one element with no defense
   against a real-WordPress-only default label margin this local static
   harness (frontend.css + Google Fonts only, no theme/global-styles CSS)
   could never load or detect either way. */
.pp-ready-houses .pp-rh-field label { display: block; margin: 0 !important; font-size: 11.5px; color: var(--pp-bone-60); }
/* margin: 6px 0 0 0, not margin-top: 6px — explicitly zeroing bottom/left/
   right (not just leaving them at whatever else cascades in) closes the
   same class of gap: this base (non-focus) rule previously only set
   margin-top, while the :focus/:focus-visible variant below it already
   used the safer full margin shorthand — an inconsistency between the two
   states with no local-only way to prove whether it mattered on real
   WordPress. Made identical here so neither state can carry a stray
   margin-bottom the other doesn't. */
.pp-ready-houses.pp-ready-houses .pp-rh-field input,
.pp-ready-houses.pp-ready-houses .pp-rh-field select,
.pp-ready-houses.pp-ready-houses .pp-rh-field textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 47px !important;
  margin: 6px 0 0 0 !important;
  font: 400 14px "Poppins", "Helvetica Neue", Helvetica, sans-serif !important;
  line-height: normal !important;
  color: var(--pp-bone) !important;
  background: color-mix(in oklab, var(--pp-bone) 9%, transparent) !important;
  border: 1px solid var(--pp-bone-line) !important;
  border-radius: var(--pp-r-xs) !important;
  padding: 12px 14px !important;
  outline: none;
}
.pp-ready-houses.pp-ready-houses .pp-rh-field select { appearance: none; height: 47px !important; }
.pp-ready-houses.pp-ready-houses .pp-rh-field select option { color: var(--pp-ink); }
.pp-ready-houses.pp-ready-houses .pp-rh-field textarea { height: auto !important; min-height: 76px !important; resize: vertical; }
.pp-ready-houses.pp-ready-houses .pp-rh-field input:focus,
.pp-ready-houses.pp-ready-houses .pp-rh-field select:focus,
.pp-ready-houses.pp-ready-houses .pp-rh-field textarea:focus,
.pp-ready-houses.pp-ready-houses .pp-rh-field input:focus-visible,
.pp-ready-houses.pp-ready-houses .pp-rh-field select:focus-visible,
.pp-ready-houses.pp-ready-houses .pp-rh-field textarea:focus-visible {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 47px !important;
  margin: 6px 0 0 !important;
  font: 400 14px "Poppins", "Helvetica Neue", Helvetica, sans-serif !important;
  line-height: normal !important;
  color: var(--pp-bone) !important;
  background: color-mix(in oklab, var(--pp-bone) 9%, transparent) !important;
  border: 1px solid var(--pp-bone-line) !important;
  border-radius: var(--pp-r-xs) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  transform: none !important;
  outline: 2px solid var(--pp-accent-soft) !important;
  outline-offset: 2px;
}
.pp-ready-houses.pp-ready-houses .pp-rh-field textarea:focus,
.pp-ready-houses.pp-ready-houses .pp-rh-field textarea:focus-visible { height: auto !important; min-height: 76px !important; }
.pp-ready-houses.pp-ready-houses .pp-rh-field:focus-within {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}
.pp-ready-houses.pp-ready-houses .pp-rh-form:focus-within {
  display: grid !important;
  gap: 12px !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}
.pp-ready-houses .pp-rh-field input::placeholder,
.pp-ready-houses .pp-rh-field textarea::placeholder { color: var(--pp-bone-60) !important; opacity: 1; }

/* margin/box-sizing forced explicit — this button (a plain <button> inside
   a raw core/html <form>, not a core/button block) previously had no
   margin or box-sizing declared at all, the only form element in this
   component with zero defense against a real UA/theme default margin;
   every other control already had at least a margin-top override. Since
   it's the row directly before the fineprint, any real-WordPress-only
   default margin here would explain exactly the "button sits too low,
   button-to-fineprint gap too large" symptom reported — undetectable in
   this local static harness (frontend.css + Google Fonts only) either
   way, since it never loads WordPress core/theme default form styles. */
.pp-ready-houses .pp-rh-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 100%;
  height: 45px;
  margin: 0 !important;
  padding: 0 21px;
  border: 0;
  border-radius: var(--pp-r-pill);
  font: 500 15px "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  background: var(--pp-bone);
  color: var(--pp-ink);
  transition: background var(--pp-t-med), color var(--pp-t-med);
}
.pp-ready-houses .pp-rh-form-submit:hover { background: var(--pp-accent-soft); color: var(--pp-ink); }
.pp-ready-houses .pp-rh-fineprint { margin: 0 !important; text-align: center; font-weight: 300; font-size: 11.5px; line-height: 1.5; color: var(--pp-bone-60); }

/* ==========================================================================
   Dark closing CTA
   ========================================================================== */
.pp-ready-houses .pp-rh-cta { margin-top: 0 !important; padding: var(--pp-sec-y-p) 0; background: var(--pp-ink); }
.pp-ready-houses .pp-rh-dark-cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 40px); }
.pp-ready-houses .pp-rh-dark-cta__copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; }
.pp-ready-houses .pp-rh-dark-cta__copy h2 { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-bone); }
.pp-ready-houses .pp-rh-dark-cta__copy p { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); }
.pp-ready-houses .pp-rh-dark-cta__note { margin-top: 2px !important; font-size: 13.5px; font-weight: 300; color: var(--pp-bone-60); }
.pp-ready-houses .pp-rh-dark-cta__btns.wp-block-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; flex: 0 0 auto; }
.pp-ready-houses .pp-rh-dark-cta__btns .wp-block-button { width: 100%; }
.pp-ready-houses .pp-rh-dark-cta__btns .wp-block-button__link { width: 100%; height: 38px; padding-inline: 19px; }

/* ==========================================================================
   Desktop layer — the design's single breakpoint (min-width: 900px)
   Preserved exactly at the source's own 900px cut — tested at 901/899.
   ========================================================================== */
@media (min-width: 900px) {
  .pp-ready-houses .pp-rh-hero-grid { grid-template-columns: 1fr 1fr; }
  .pp-ready-houses .pp-rh-enquiry-grid { grid-template-columns: 1fr 1fr; }
  .pp-ready-houses .pp-rh-faq-split { grid-template-columns: 1fr 1fr; }

  .pp-ready-houses .pp-rh-dark-cta__btns.wp-block-buttons { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
  .pp-ready-houses .pp-rh-dark-cta__btns .wp-block-button,
  .pp-ready-houses .pp-rh-dark-cta__btns .wp-block-button__link { width: auto; }

  .pp-ready-houses .pp-rh-included__list { gap: 40px; }
  .pp-ready-houses .pp-rh-included__item { font-size: 17px; gap: 9px; }
  .pp-ready-houses .pp-rh-included__icon { width: 19px; height: 19px; }

  .pp-ready-houses .pp-rh-form { grid-template-columns: 1fr 1fr; }
  .pp-ready-houses .pp-rh-field--wide,
  .pp-ready-houses .pp-rh-form-submit,
  .pp-ready-houses .pp-rh-fineprint { grid-column: 1 / -1; }

  .pp-ready-houses .pp-rh-stock-media { aspect-ratio: 16 / 10; }
  .pp-ready-houses .pp-rh-stock-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, calc((100% - 2 * clamp(16px, 2vw, 22px)) / 3))), 1fr)); }
  .pp-ready-houses .pp-rh-compare__cell { padding: 17px 22px; font-size: 15px; }
}

/* ==========================================================================
   Scroll reveal (frontend.js) + reduced motion
   ========================================================================== */
.pp-ready-houses .pp-io-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease);
}
.pp-ready-houses .pp-io-fade.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pp-ready-houses .pp-io-fade { transition: none; }
  .pp-ready-houses .pp-rh-stock-gallery { scroll-behavior: auto; }
}

/* Header-clearance offset for the #faq/#visit anchors (source: html{scroll-
   padding-top:calc(var(--hdr-h) + 12px)} — lives on bare <html>, outside
   this pack's own CSS scope, Page Pack Spec §5, same constraint already
   solved on Contact v1.0.6). scroll-margin-top on the section root
   reproduces the header-clearance offset with zero JS; frontend.js adds
   only the missing smooth-animation half. */
.pp-ready-houses .pp-rh-faq,
.pp-ready-houses .pp-rh-enquiry {
  scroll-margin-top: calc(var(--pp-hdr-h) + 12px);
}