npm - @rubytech/create-maxy - Versions diffs - 1.0.879 → 1.0.881 - Mend

@rubytech/create-maxy 1.0.879 → 1.0.881

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/payload/premium-plugins/real-agency/plugins/brochures/skills/property-brochure/references/template.html ADDED Viewed

@@ -0,0 +1,1824 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Property Folio — Template</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">
+<style>
+  /* ═══════════════════════════════════════════════════
+     EDITORIAL PROPERTY FOLIO — DEFAULT TEMPLATE
+     A4 landscape (297 × 210 mm) — magazine-grade layout
+     Type: Cormorant Garamond (display) + Poppins (text)
+     Palette: Muvin teal/gold on warm paper
+     ═══════════════════════════════════════════════════ */
+  :root {
+    --teal-900: #064444;
+    --teal-950: #042D2D;
+    --teal-700: #0e5959;
+    --gold-500: #C7A86A;
+    --gold-700: #A88848;
+    --gold-300: #E5D2A8;
+    --paper-0: #FFFFFF;
+    --paper-25: #FCFBF8;
+    --paper-50: #FBF8F8;
+    --paper-100: #F5F0E6;
+    --slate-600: #6E6E6E;
+    --slate-400: #A09F9A;
+    --rule: rgba(6,68,68,0.16);
+    --rule-soft: rgba(6,68,68,0.08);
+    --ink: #1c2222;
+    --serif: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
+    --sans: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  body {
+    font-family: var(--sans);
+    background: #d8d4cc;
+    color: var(--ink);
+    line-height: 1.55;
+    font-weight: 300;
+  }
+  img { display: block; }
+  /* Download bar (screen only) */
+  .download-bar { position: fixed; top: 18px; right: 18px; z-index: 1000; }
+  .download-btn {
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 400;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--paper-0); background: var(--teal-900);
+    border: 1px solid rgba(255,255,255,0.16);
+    padding: 12px 22px;
+    cursor: pointer;
+    display: flex; align-items: center; gap: 10px;
+    transition: background 250ms ease;
+  }
+  .download-btn:hover { background: var(--gold-700); }
+  .download-btn svg { width: 13px; height: 13px; }
+  /* ═══════════════════════════════════════════════════
+     PAGE BOXES
+     ═══════════════════════════════════════════════════ */
+  .page {
+    width: 297mm;
+    height: 210mm;
+    margin: 18px auto 0;
+    position: relative;
+    overflow: hidden;
+    background: var(--paper-25);
+    box-shadow: 0 4px 28px rgba(0,0,0,0.14);
+  }
+  .page:last-of-type { margin-bottom: 22px; }
+  /* Folio (page-number) chrome — the bottom strip on a magazine page */
+  .folio {
+    position: absolute;
+    bottom: 8mm; left: 14mm; right: 14mm;
+    display: flex; justify-content: space-between; align-items: center;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: var(--teal-900);
+    z-index: 5;
+    pointer-events: none;
+  }
+  .folio > span {
+    background: rgba(252, 251, 248, 0.92);
+    backdrop-filter: blur(10px) saturate(1.2);
+    -webkit-backdrop-filter: blur(10px) saturate(1.2);
+    padding: 5px 10px;
+    border-radius: 2px;
+    box-shadow: 0 1px 0 rgba(6,68,68,0.04);
+    white-space: nowrap;
+  }
+  .folio .folio-mid { letter-spacing: 0.4em; }
+  .folio em { font-style: normal; color: var(--gold-700); font-weight: 500; }
+  /* On dark/photo-heavy pages, swap to light text on dark pill */
+  .page.folio-dark .folio { color: var(--paper-25); }
+  .page.folio-dark .folio > span { background: rgba(6, 68, 68, 0.55); }
+  .page.folio-dark .folio em { color: var(--gold-300); }
+  /* ═══════════════════════════════════════════════════
+     COVER
+     ═══════════════════════════════════════════════════ */
+  .cover {
+    background: var(--teal-950);
+    color: var(--paper-25);
+  }
+  .cover-bg { position: absolute; inset: 0; }
+  .cover-bg img {
+    width: 100%; height: 100%; object-fit: cover;
+    object-position: 50% 58%;
+    filter: brightness(0.78) saturate(0.92);
+  }
+  .cover-bg::after {
+    content: '';
+    position: absolute; inset: 0;
+    background:
+      linear-gradient(180deg, rgba(4,45,45,0.18) 0%, rgba(4,45,45,0.08) 35%, rgba(4,45,45,0.55) 78%, rgba(4,45,45,0.95) 100%),
+      linear-gradient(90deg, rgba(4,45,45,0.45) 0%, rgba(4,45,45,0.10) 40%, transparent 70%);
+  }
+  .cover-frame {
+    position: absolute;
+    top: 14mm; left: 14mm; right: 14mm; bottom: 14mm;
+    border: 1px solid rgba(229, 210, 168, 0.32);
+    z-index: 2;
+    pointer-events: none;
+  }
+  .cover-mast {
+    position: absolute; top: 18mm; left: 0; right: 0; z-index: 3;
+    text-align: center;
+    display: flex; align-items: center; justify-content: center; gap: 16px;
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 400;
+    letter-spacing: 0.55em; text-transform: uppercase;
+    color: rgba(229, 210, 168, 0.88);
+  }
+  .cover-mast img { height: 26px; width: auto; display: block; filter: drop-shadow(0 1px 8px rgba(0,0,0,0.35)); }
+  .cover-mast .pipe { width: 1px; height: 18px; background: rgba(229, 210, 168, 0.55); }
+  .cover-mast .label { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: 0.45em; text-transform: uppercase; color: rgba(229, 210, 168, 0.88); }
+  .cover-edition {
+    position: absolute; top: 28mm; left: 0; right: 0; z-index: 3;
+    text-align: center;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 13px; font-weight: 400;
+    color: rgba(252,251,248,0.7);
+    letter-spacing: 0.04em;
+  }
+  .cover-center {
+    position: absolute; left: 0; right: 0;
+    top: 50%; transform: translateY(-52%);
+    z-index: 3;
+    text-align: center;
+    padding: 0 30mm;
+  }
+  .cover-eyebrow {
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 400;
+    letter-spacing: 0.5em; text-transform: uppercase;
+    color: var(--gold-300);
+    margin-bottom: 14px;
+  }
+  .cover-title {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 96px;
+    line-height: 0.92;
+    letter-spacing: -0.015em;
+    color: var(--paper-0);
+    margin-bottom: 6px;
+  }
+  .cover-title em {
+    display: block;
+    font-style: italic;
+    font-weight: 400;
+    color: var(--gold-300);
+    font-size: 0.62em;
+    margin-top: 8px;
+    letter-spacing: 0.005em;
+  }
+  .cover-rule {
+    width: 56px; height: 1px;
+    background: var(--gold-500);
+    margin: 20px auto 16px;
+  }
+  .cover-tagline {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 19px;
+    font-weight: 300;
+    color: rgba(252,251,248,0.85);
+    line-height: 1.45;
+    max-width: 520px;
+    margin: 0 auto;
+    letter-spacing: 0.005em;
+  }
+  .cover-foot {
+    position: absolute; left: 22mm; right: 22mm; bottom: 24mm;
+    z-index: 3;
+    display: flex; justify-content: space-between; align-items: flex-end;
+  }
+  .cover-foot-block .label {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 400;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: rgba(252,251,248,0.55);
+    margin-bottom: 6px;
+  }
+  .cover-foot-block .val {
+    font-family: var(--serif);
+    font-size: 19px; font-weight: 400;
+    color: var(--paper-0);
+    letter-spacing: 0.01em;
+  }
+  .cover-foot-block.right { text-align: right; }
+  .cover-foot-block .val em { font-style: italic; color: var(--gold-300); }
+  /* ═══════════════════════════════════════════════════
+     CONTENTS PAGE
+     ═══════════════════════════════════════════════════ */
+  .toc-page {
+    display: grid;
+    grid-template-columns: 1.1fr 1fr;
+    height: 100%;
+  }
+  .toc-image {
+    position: relative;
+    overflow: hidden;
+  }
+  .toc-image img { width: 100%; height: 100%; object-fit: cover; }
+  .toc-image::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18) 100%);
+  }
+  .toc-image .caption {
+    position: absolute; bottom: 14mm; left: 12mm; right: 12mm;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 13px;
+    color: rgba(252,251,248,0.92);
+    letter-spacing: 0.01em;
+    line-height: 1.5;
+  }
+  .toc-image .caption::before {
+    content: ''; display: block;
+    width: 28px; height: 1px;
+    background: var(--gold-300);
+    margin-bottom: 10px;
+  }
+  .toc-content {
+    padding: 18mm 16mm 16mm;
+    display: flex; flex-direction: column;
+    justify-content: space-between;
+  }
+  .toc-eyebrow {
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 500;
+    letter-spacing: 0.42em; text-transform: uppercase;
+    color: var(--gold-700);
+  }
+  .toc-rule { width: 32px; height: 1px; background: var(--gold-500); margin: 7px 0 14px; }
+  .toc-title.compact {
+    font-size: 38px !important;
+    line-height: 0.95 !important;
+    margin-bottom: 16px !important;
+  }
+  .toc-title {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 56px;
+    line-height: 1;
+    color: var(--teal-900);
+    letter-spacing: -0.01em;
+    margin-bottom: 24px;
+  }
+  .toc-title em { font-style: italic; color: var(--gold-700); }
+  .toc-list {
+    list-style: none;
+    border-top: 1px solid var(--rule);
+  }
+  .toc-list li {
+    display: grid;
+    grid-template-columns: 26px 1fr 34px;
+    align-items: baseline;
+    column-gap: 12px;
+    padding: 6.5px 0;
+    border-bottom: 1px solid var(--rule);
+  }
+  .toc-num {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 13px;
+    color: var(--gold-700);
+  }
+  .toc-name {
+    font-family: var(--serif);
+    font-size: 15.5px;
+    font-weight: 400;
+    color: var(--teal-900);
+    letter-spacing: 0.005em;
+    line-height: 1.25;
+  }
+  .toc-name span {
+    font-family: var(--sans);
+    font-size: 8.5px; font-weight: 400;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--slate-600);
+    display: block;
+    margin-top: 2px;
+  }
+  .toc-page-num {
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 500;
+    letter-spacing: 0.2em;
+    color: var(--gold-700);
+    text-align: right;
+  }
+  .toc-credit {
+    margin-top: auto;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 12px;
+    color: var(--slate-600);
+    line-height: 1.55;
+  }
+  .toc-credit strong { font-style: normal; color: var(--teal-900); font-weight: 500; }
+  /* ═══════════════════════════════════════════════════
+     SHARED EDITORIAL STYLES
+     ═══════════════════════════════════════════════════ */
+  .ed-eyebrow {
+    font-family: var(--sans);
+    font-size: 9.5px; font-weight: 500;
+    letter-spacing: 0.42em; text-transform: uppercase;
+    color: var(--gold-700);
+    margin-bottom: 8px;
+  }
+  .ed-rule { width: 32px; height: 1px; background: var(--gold-500); margin: 8px 0 14px; }
+  .ed-headline {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 50px;
+    line-height: 0.98;
+    letter-spacing: -0.012em;
+    color: var(--teal-900);
+  }
+  .ed-headline em { font-style: italic; font-weight: 400; color: var(--gold-700); }
+  .ed-headline.smaller { font-size: 38px; }
+  .ed-deck {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 17px;
+    line-height: 1.42;
+    color: var(--teal-700);
+    margin-top: 16px;
+    letter-spacing: 0.005em;
+  }
+  .ed-body {
+    font-family: var(--sans);
+    font-size: 10.5px; font-weight: 300;
+    line-height: 1.78;
+    color: #2c3535;
+    text-align: justify;
+    hyphens: auto;
+  }
+  .ed-body + .ed-body { margin-top: 9px; }
+  .ed-body strong { color: var(--teal-900); font-weight: 500; }
+  .ed-body em { color: var(--gold-700); font-style: italic; }
+  .ed-body.dropcap::first-letter {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 64px;
+    line-height: 0.85;
+    float: left;
+    color: var(--gold-700);
+    padding: 6px 10px 0 0;
+    margin-top: 4px;
+  }
+  .ed-caption {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--slate-600);
+    line-height: 1.5;
+    letter-spacing: 0.01em;
+    margin-top: 6px;
+  }
+  .ed-caption strong { font-style: normal; color: var(--teal-900); font-weight: 500; }
+  .ed-pullquote {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 26px;
+    line-height: 1.22;
+    color: var(--teal-900);
+    letter-spacing: -0.005em;
+    padding: 12px 0 14px;
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+  }
+  .ed-pullquote::before {
+    content: '“';
+    display: block;
+    font-size: 50px;
+    line-height: 0.6;
+    color: var(--gold-500);
+    margin-bottom: 8px;
+  }
+  .ed-pullquote .attrib {
+    display: block;
+    font-family: var(--sans);
+    font-style: normal;
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: var(--slate-600);
+    margin-top: 12px;
+  }
+  .ed-stat {
+    border-top: 1px solid var(--rule);
+    padding-top: 8px;
+  }
+  .ed-stat .v {
+    font-family: var(--serif);
+    font-size: 36px; font-weight: 400;
+    line-height: 1;
+    color: var(--teal-900);
+    letter-spacing: -0.01em;
+  }
+  .ed-stat .v em { font-style: italic; color: var(--gold-700); }
+  .ed-stat .l {
+    font-family: var(--sans);
+    font-size: 8.5px; font-weight: 400;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--slate-600);
+    margin-top: 8px;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 01 — OPENER (Pont Street-style two-page editorial)
+     Big serif title left, hero photo right
+     ═══════════════════════════════════════════════════ */
+  .opener {
+    display: grid;
+    grid-template-columns: 1fr 1.35fr;
+    height: 100%;
+  }
+  .opener-text {
+    padding: 22mm 14mm 18mm 18mm;
+    display: flex; flex-direction: column;
+  }
+  .opener-spec {
+    margin-top: 10px;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 16px;
+    color: var(--gold-700);
+    letter-spacing: 0.01em;
+  }
+  .opener-spec strong { font-style: normal; font-weight: 500; color: var(--teal-900); }
+  .opener-title {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 88px;
+    line-height: 0.94;
+    letter-spacing: -0.018em;
+    color: var(--teal-900);
+    margin: 18px 0 0;
+  }
+  .opener-title em {
+    display: block;
+    font-style: italic;
+    font-weight: 400;
+    color: var(--gold-700);
+    font-size: 0.7em;
+    line-height: 1;
+    margin-top: 4px;
+  }
+  .opener-meta-row {
+    display: flex; gap: 22px;
+    margin: 22px 0 18px;
+    padding: 12px 0;
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+  }
+  .opener-meta-row .item {
+    font-family: var(--serif);
+  }
+  .opener-meta-row .item .k {
+    font-family: var(--sans);
+    font-size: 8.5px; font-weight: 500;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--slate-600);
+    display: block; margin-bottom: 4px;
+  }
+  .opener-meta-row .item .v {
+    font-family: var(--serif);
+    font-size: 18px; font-weight: 400;
+    color: var(--teal-900);
+    letter-spacing: 0;
+  }
+  .opener-meta-row .item .v em { font-style: italic; color: var(--gold-700); }
+  .opener-body { margin-top: auto; }
+  .opener-body .ed-body { font-size: 11px; }
+  .opener-image {
+    position: relative;
+    overflow: hidden;
+  }
+  .opener-image img { width: 100%; height: 100%; object-fit: cover; }
+  .opener-image::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.25) 100%);
+  }
+  .opener-image .img-caption {
+    position: absolute;
+    bottom: 12mm; right: 12mm;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 11px;
+    color: rgba(252,251,248,0.92);
+    text-align: right;
+    line-height: 1.5;
+    max-width: 220px;
+  }
+  .opener-image .img-caption::before {
+    content: ''; display: block;
+    width: 28px; height: 1px; background: var(--gold-300);
+    margin-left: auto; margin-bottom: 8px;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 02 — STORY: ground floor / living
+     Mosaic with narrative column
+     ═══════════════════════════════════════════════════ */
+  .spread {
+    padding: 14mm 14mm 16mm;
+    height: 100%;
+    display: grid;
+    gap: 10px;
+  }
+  .spread-2 {
+    grid-template-columns: 1.1fr 1fr 1.1fr;
+    grid-template-rows: 1fr 56mm;
+    min-height: 0;
+  }
+  .spread-2 .hero-img {
+    grid-column: 1 / 3;
+    grid-row: 1;
+    overflow: hidden;
+    position: relative;
+    min-height: 0;
+  }
+  .spread-2 .hero-img img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-2 .text-col {
+    grid-column: 3;
+    grid-row: 1;
+    padding: 2mm 0 0 4mm;
+    display: flex; flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .spread-2 .strip {
+    grid-column: 1 / 4;
+    grid-row: 2;
+    margin-top: 2mm;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 14px;
+  }
+  .spread-2 .strip-cell { display: flex; flex-direction: column; gap: 6px; }
+  .spread-2 .strip-cell img {
+    width: 100%; height: 42mm; object-fit: cover;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 03 — RECEPTION ROOMS / HALL
+     Asymmetric: left big text, right offset photo column
+     ═══════════════════════════════════════════════════ */
+  .spread-3 {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 60mm 1fr;
+    column-gap: 18px;
+    row-gap: 8px;
+    min-height: 0;
+  }
+  .spread-3 .head {
+    grid-column: 1 / 3;
+    grid-row: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 22px;
+    align-items: end;
+    overflow: hidden;
+  }
+  .spread-3 .head .right { padding-left: 0; }
+  .spread-3 .left-img {
+    grid-column: 1;
+    grid-row: 2;
+    position: relative;
+    overflow: hidden;
+  }
+  .spread-3 .left-img img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-3 .right-stack {
+    grid-column: 2;
+    grid-row: 2;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+    min-height: 0;
+  }
+  .spread-3 .right-stack .cell { position: relative; overflow: hidden; min-height: 0; }
+  .spread-3 .right-stack img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-3 .right-stack img { width: 100%; height: 100%; object-fit: cover; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 04 — BEDROOMS GALLERY (Savills-style)
+     Tile grid + sidebar text
+     ═══════════════════════════════════════════════════ */
+  .spread-4 {
+    grid-template-columns: 1fr 2.1fr;
+    grid-template-rows: auto 1fr;
+    column-gap: 18px;
+    row-gap: 12px;
+  }
+  .spread-4 .text-side {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    padding-right: 6mm;
+    display: flex; flex-direction: column;
+  }
+  .spread-4 .gallery {
+    grid-column: 2;
+    grid-row: 1 / 3;
+    display: grid;
+    grid-template-columns: 1.4fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 10px;
+  }
+  .spread-4 .gallery .cell { position: relative; overflow: hidden; }
+  .spread-4 .gallery .cell img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-4 .gallery .cell.tall { grid-row: 1 / 3; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 05 — ANNEXE FEATURE: full-bleed photo + side panel
+     ═══════════════════════════════════════════════════ */
+  .feature-page {
+    display: grid;
+    grid-template-columns: 1.45fr 1fr;
+    height: 100%;
+  }
+  .feature-page .photo {
+    position: relative; overflow: hidden;
+  }
+  .feature-page .photo img { width: 100%; height: 100%; object-fit: cover; }
+  .feature-page .photo::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.2) 100%);
+  }
+  .feature-page .photo .photo-caption {
+    position: absolute;
+    bottom: 12mm; left: 12mm; right: 12mm;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 12px;
+    color: rgba(252,251,248,0.94);
+    line-height: 1.5;
+    max-width: 70%;
+  }
+  .feature-page .photo .photo-caption::before {
+    content: ''; display: block;
+    width: 28px; height: 1px; background: var(--gold-300);
+    margin-bottom: 8px;
+  }
+  .feature-page .panel {
+    background: var(--paper-100);
+    padding: 22mm 14mm 18mm 16mm;
+    display: flex; flex-direction: column;
+    position: relative;
+  }
+  .feature-page .panel::before {
+    content: '';
+    position: absolute;
+    top: 14mm; left: 16mm; right: 14mm;
+    height: 1px;
+    background: var(--gold-500);
+  }
+  /* Annexe attribute cards */
+  .attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
+  .attr {
+    border-top: 1px solid var(--rule);
+    padding: 8px 0 4px;
+  }
+  .attr .k {
+    font-family: var(--sans);
+    font-size: 8px; font-weight: 500;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--gold-700);
+    margin-bottom: 4px;
+  }
+  .attr .v {
+    font-family: var(--serif);
+    font-size: 14px;
+    color: var(--teal-900);
+    line-height: 1.3;
+    letter-spacing: 0.005em;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 06 — GROUNDS & DEVELOPMENT
+     Big landscape image top, two-column text under
+     ═══════════════════════════════════════════════════ */
+  .spread-6 {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1.1fr auto;
+    row-gap: 14px;
+    column-gap: 14px;
+  }
+  .spread-6 .top-image {
+    grid-column: 1 / 5;
+    grid-row: 1;
+    position: relative; overflow: hidden;
+  }
+  .spread-6 .top-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
+  .spread-6 .top-image::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(90deg, rgba(4,45,45,0.55) 0%, rgba(4,45,45,0.10) 45%, transparent 70%);
+  }
+  .spread-6 .top-image .overlay {
+    position: absolute;
+    top: 14mm; left: 14mm;
+    max-width: 50%;
+    color: var(--paper-25);
+  }
+  .spread-6 .top-image .overlay .ed-eyebrow { color: var(--gold-300); }
+  .spread-6 .top-image .overlay .ed-rule { background: var(--gold-300); }
+  .spread-6 .top-image .overlay .ed-headline { color: var(--paper-0); font-size: 44px; }
+  .spread-6 .top-image .overlay .ed-headline em { color: var(--gold-300); }
+  .spread-6 .bottom { grid-row: 2; grid-column: span 1; }
+  .spread-6 .bottom h4 {
+    font-family: var(--serif);
+    font-size: 19px; font-weight: 500;
+    color: var(--teal-900);
+    margin-bottom: 6px;
+    letter-spacing: 0.005em;
+  }
+  .spread-6 .bottom h4 em { font-style: italic; font-weight: 400; color: var(--gold-700); }
+  .spread-6 .bottom .ed-body { font-size: 10px; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 07 — FLOORPLAN & SPECIFICATION
+     ═══════════════════════════════════════════════════ */
+  .spread-7 {
+    grid-template-columns: 1.4fr 1fr;
+    grid-template-rows: auto 1fr;
+    column-gap: 22px;
+    row-gap: 10px;
+  }
+  .spread-7 .header {
+    grid-column: 1 / 3;
+  }
+  .spread-7 .plan-area {
+    grid-column: 1;
+    grid-row: 2;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+  }
+  .spread-7 .plan-area img {
+    max-width: 100%;
+    max-height: 130mm;
+    width: auto; height: auto;
+    object-fit: contain;
+  }
+  .spread-7 .plan-area .meta {
+    margin-top: 10px;
+    text-align: center;
+  }
+  .spread-7 .plan-area .meta .lead {
+    font-family: var(--serif);
+    font-size: 16px; font-weight: 400;
+    color: var(--teal-900);
+    letter-spacing: 0.005em;
+  }
+  .spread-7 .plan-area .meta .lead em { font-style: italic; color: var(--gold-700); }
+  .spread-7 .plan-area .meta .sub {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 300;
+    color: var(--slate-600);
+    letter-spacing: 0.16em; text-transform: uppercase;
+    margin-top: 4px;
+  }
+  .spec-side {
+    grid-column: 2;
+    grid-row: 2;
+    border-left: 1px solid var(--rule);
+    padding-left: 18px;
+    display: flex; flex-direction: column;
+  }
+  .spec-list {
+    list-style: none;
+    margin-top: 8px;
+  }
+  .spec-list li {
+    display: grid;
+    grid-template-columns: 24px 1fr;
+    column-gap: 12px;
+    padding: 7px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    font-family: var(--sans);
+    font-size: 9.5px; font-weight: 300;
+    line-height: 1.5;
+    color: #2c3535;
+  }
+  .spec-list li:last-child { border-bottom: none; }
+  .spec-list li .num {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--gold-700);
+  }
+  .spec-list li strong { color: var(--teal-900); font-weight: 500; }
+  /* EPC bars */
+  .epc-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
+  .epc-title {
+    font-family: var(--serif);
+    font-size: 14px; font-weight: 500;
+    color: var(--teal-900);
+    margin-bottom: 8px;
+    letter-spacing: 0.005em;
+  }
+  .epc-title em { font-style: italic; color: var(--gold-700); }
+  .epc-bars { display: flex; gap: 2px; }
+  .epc-bar {
+    flex: 1;
+    height: 18px;
+    display: flex; align-items: center; justify-content: center;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 600;
+    color: white;
+  }
+  .epc-bar.a { background: #008054; }
+  .epc-bar.b { background: #19b459; }
+  .epc-bar.c { background: #8dce46; color: #1c2222; }
+  .epc-bar.d { background: #ffd500; color: #1c2222; }
+  .epc-bar.e { background: #fcaa65; color: #1c2222; }
+  .epc-bar.f { background: #ef8023; }
+  .epc-bar.g { background: #e9153b; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 08 — MATERIAL INFORMATION
+     Editorial directory style
+     ═══════════════════════════════════════════════════ */
+  .mi-page { padding: 18mm 14mm; height: 100%; display: flex; flex-direction: column; }
+  .mi-head { display: grid; grid-template-columns: 2fr 3fr; column-gap: 24px; align-items: end; margin-bottom: 14px; }
+  .mi-intro {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--teal-700);
+    border-left: 1px solid var(--gold-500);
+    padding-left: 14px;
+  }
+  .mi-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: 24px;
+    row-gap: 18px;
+    margin-top: 6px;
+  }
+  .mi-section .mi-label {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.36em; text-transform: uppercase;
+    color: var(--gold-700);
+    border-bottom: 1px solid var(--gold-500);
+    padding-bottom: 6px;
+    margin-bottom: 8px;
+  }
+  .mi-section .mi-row {
+    display: flex; justify-content: space-between; align-items: baseline;
+    padding: 6px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    font-family: var(--sans);
+    font-size: 9.5px;
+    column-gap: 10px;
+  }
+  .mi-section .mi-row:last-child { border-bottom: none; }
+  .mi-section .mi-row .k {
+    color: var(--slate-600); font-weight: 300;
+  }
+  .mi-section .mi-row .v {
+    color: var(--teal-900); font-weight: 400;
+    text-align: right;
+    font-family: var(--serif);
+    font-size: 11.5px;
+    letter-spacing: 0.01em;
+  }
+  .mi-foot {
+    margin-top: auto;
+    padding-top: 14px;
+    border-top: 1px solid var(--rule);
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--slate-600);
+    line-height: 1.55;
+  }
+  /* ═══════════════════════════════════════════════════
+     BACK PAGE
+     ═══════════════════════════════════════════════════ */
+  .backpage {
+    background: var(--teal-950);
+    color: var(--paper-25);
+  }
+  .backpage .bg { position: absolute; inset: 0; }
+  .backpage .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
+  .backpage .bg::after {
+    content: '';
+    position: absolute; inset: 0;
+    background:
+      radial-gradient(ellipse 60% 60% at 50% 40%, rgba(199,168,106,0.10) 0%, transparent 70%),
+      linear-gradient(180deg, rgba(4,45,45,0.55) 0%, rgba(4,45,45,0.45) 50%, rgba(4,45,45,0.92) 100%);
+  }
+  .backpage-frame {
+    position: absolute;
+    top: 14mm; left: 14mm; right: 14mm; bottom: 14mm;
+    border: 1px solid rgba(229, 210, 168, 0.32);
+    z-index: 1;
+    pointer-events: none;
+  }
+  .backpage-inner {
+    position: relative; z-index: 2;
+    height: 100%;
+    padding: 26mm 28mm 22mm;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    text-align: center;
+  }
+  .back-mast {
+    display: flex; align-items: center; justify-content: center; gap: 16px;
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 400;
+    letter-spacing: 0.55em; text-transform: uppercase;
+    color: rgba(229, 210, 168, 0.82);
+    margin-bottom: 22px;
+  }
+  .back-mast img { height: 28px; width: auto; display: block; filter: drop-shadow(0 1px 8px rgba(0,0,0,0.35)); }
+  .back-mast .pipe { width: 1px; height: 18px; background: rgba(229, 210, 168, 0.55); }
+  .back-mast .label { letter-spacing: 0.45em; text-transform: uppercase; color: rgba(229, 210, 168, 0.88); }
+  .back-headline {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 60px;
+    line-height: 0.98;
+    letter-spacing: -0.012em;
+    color: var(--paper-0);
+    margin-bottom: 12px;
+  }
+  .back-headline em { font-style: italic; color: var(--gold-300); }
+  .back-tagline {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 17px;
+    color: rgba(252,251,248,0.82);
+    line-height: 1.5;
+    max-width: 540px;
+    margin: 0 auto 28px;
+  }
+  .back-rule {
+    width: 56px; height: 1px;
+    background: var(--gold-500);
+    margin: 0 auto 20px;
+  }
+  .back-contact-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 36px;
+    max-width: 540px;
+    margin: 0 auto;
+    text-align: left;
+  }
+  .back-contact-grid .cell .k {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: rgba(229, 210, 168, 0.7);
+    margin-bottom: 8px;
+    border-bottom: 1px solid rgba(229,210,168,0.25);
+    padding-bottom: 6px;
+  }
+  .back-contact-grid .cell .name {
+    font-family: var(--serif);
+    font-size: 19px;
+    color: var(--paper-0);
+    margin-bottom: 6px;
+    letter-spacing: 0.005em;
+  }
+  .back-contact-grid .cell .name em { font-style: italic; color: var(--gold-300); }
+  .back-contact-grid .cell .line {
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 300;
+    color: rgba(252,251,248,0.85);
+    line-height: 1.7;
+  }
+  .back-foot {
+    position: absolute;
+    bottom: 28mm; left: 28mm; right: 28mm;
+    z-index: 2;
+    display: flex; justify-content: space-between; align-items: flex-end;
+  }
+  .back-foot .left, .back-foot .right {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 400;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: rgba(252,251,248,0.55);
+  }
+  .back-foot .right { text-align: right; }
+  .back-foot em { font-style: normal; color: var(--gold-300); }
+  .back-disclaimer {
+    position: absolute;
+    bottom: 16mm; left: 28mm; right: 28mm;
+    z-index: 2;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 9px;
+    line-height: 1.55;
+    color: rgba(252,251,248,0.45);
+    text-align: center;
+  }
+  /* ═══════════════════════════════════════════════════
+     PRINT
+     ═══════════════════════════════════════════════════ */
+  .print-img {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+  @page { size: A4 landscape; margin: 0; }
+  @media print {
+    html, body { background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    .download-bar { display: none !important; }
+    .page { margin: 0; box-shadow: none; page-break-after: always; page-break-inside: avoid; overflow: hidden; }
+    .page:last-of-type { page-break-after: auto; }
+    /* PRIMARY PATH — when print-img snapshots exist, hide everything else and show only the snapshot.
+       The snapshot is a flat raster of the on-screen page (folio + all chrome baked in). */
+    .page:has(.print-img[src]:not([src=""])) > *:not(.print-img) { display: none !important; }
+    .print-img[src]:not([src=""]) {
+      position: absolute !important;
+      inset: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      opacity: 1 !important;
+      object-fit: cover !important;
+      z-index: 9999 !important;
+    }
+    /* FALLBACK PATH — no snapshot present. Print the live DOM directly.
+       Force folio reliability: drop backdrop-filter (Chrome's PDF engine strips it, pill goes invisible),
+       lift z-index above any absolute imagery, and bring it 2mm inward of the printable edge. */
+    .folio { z-index: 100 !important; bottom: 6mm !important; }
+    .folio > span { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(252, 251, 248, 0.95) !important; }
+    .page.folio-dark .folio > span { background: rgba(6, 68, 68, 0.78) !important; }
+    .back-foot { z-index: 100 !important; }
+    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+  }
+</style>
+</head>
+<body>
+<div class="download-bar">
+  <button class="download-btn" onclick="window.print()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+      <polyline points="7 10 12 15 17 10"/>
+      <line x1="12" y1="15" x2="12" y2="3"/>
+    </svg>
+    Download PDF
+  </button>
+</div>
+<!-- ════════════════════════════════════════════════════
+     COVER
+     ════════════════════════════════════════════════════ -->
+<section class="page cover" data-screen-label="01 Cover">
+  <img class="print-img" src="cover-print.png" alt="">
+  <div class="cover-bg">
+    <img src="images/PROPERTY-SLUG-01.webp" alt="Cover hero — golden-hour exterior">
+  </div>
+  <div class="cover-frame"></div>
+  <!-- REPLACE: Brand masthead — use the brand logo (white/light variant for the dark cover image).
+       Path is relative to brochure.html. Fall back to a text masthead if no logo asset exists. -->
+  <div class="cover-mast">
+    <img src="images/BRAND-LOGO-LIGHT.png" alt="BRAND">
+    <span class="pipe"></span>
+    <span class="label">Property Folio</span>
+  </div>
+  <!-- REPLACE: Edition / issue line (top-right) — folio number, season, Roman year -->
+  <div class="cover-edition">No. NN·NN · Season · YEAR</div>
+  <div class="cover-center">
+    <!-- REPLACE: Location eyebrow — village/town, county -->
+    <div class="cover-eyebrow">Village, County</div>
+    <!-- REPLACE: Property name (cover-title) — house name with optional <em> sub-line -->
+    <h1 class="cover-title">Property Name<em>an editorial sub-line</em></h1>
+    <div class="cover-rule"></div>
+    <!-- REPLACE: Cover tagline — one or two sentences, the headline pitch -->
+    <p class="cover-tagline">
+      A one or two sentence editorial pitch for the property — square footage, key features, and the lifestyle hook.
+    </p>
+  </div>
+  <div class="cover-foot">
+    <div class="cover-foot-block">
+      <div class="label">Guide Price</div>
+      <!-- REPLACE: Guide price -->
+      <div class="val"><em>£0,000,000</em></div>
+    </div>
+    <div class="cover-foot-block right">
+      <div class="label">Folio</div>
+      <!-- REPLACE: Folio / reference number -->
+      <div class="val">№ 0000000</div>
+    </div>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     CONTENTS — page 2
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="02 Contents">
+  <img class="print-img" src="page2-print.png" alt="">
+  <div class="toc-page">
+    <div class="toc-image">
+      <!-- REPLACE: Contents-page hero image -->
+      <img src="images/PROPERTY-SLUG-04.webp" alt="Property hero image for contents page">
+      <!-- REPLACE: Contents-page caption — a single editorial sentence -->
+      <div class="caption">A single editorial sentence introducing the property's character.</div>
+    </div>
+    <div class="toc-content">
+      <div>
+        <div class="toc-eyebrow">In this folio</div>
+        <div class="toc-rule"></div>
+        <h2 class="toc-title">Contents <em>&amp; itinerary</em></h2>
+        <!-- REPLACE: Table of contents — eight chapters, Roman numerals i-viii.
+             Each <li> has: numeral, chapter title, italic-style subtitle in nested <span>, page number.
+             If a property has no annexe (or some other chapter doesn't apply), keep the slot
+             but rename the chapter (e.g. "v. Workshop & studio") rather than removing the row —
+             the layout assumes eight items. -->
+        <ul class="toc-list">
+          <li>
+            <span class="toc-num">i.</span>
+            <span class="toc-name">Of place &amp; pedigree<span>The opening — Location, County</span></span>
+            <span class="toc-page-num">03</span>
+          </li>
+          <li>
+            <span class="toc-num">ii.</span>
+            <span class="toc-name">A house at ease<span>Living, dining &amp; the everyday rooms</span></span>
+            <span class="toc-page-num">04</span>
+          </li>
+          <li>
+            <span class="toc-num">iii.</span>
+            <span class="toc-name">Hall, hearth &amp; sun<span>Reception rooms, study &amp; garden room</span></span>
+            <span class="toc-page-num">05</span>
+          </li>
+          <li>
+            <span class="toc-num">iv.</span>
+            <span class="toc-name">Bedrooms &amp; baths<span>N bedrooms · N bathrooms</span></span>
+            <span class="toc-page-num">06</span>
+          </li>
+          <li>
+            <span class="toc-num">v.</span>
+            <span class="toc-name">A flexible feature<span>Annexe / studio / outbuilding chapter</span></span>
+            <span class="toc-page-num">07</span>
+          </li>
+          <li>
+            <span class="toc-num">vi.</span>
+            <span class="toc-name">Garden &amp; ground<span>The plot, planting, planning</span></span>
+            <span class="toc-page-num">08</span>
+          </li>
+          <li>
+            <span class="toc-num">vii.</span>
+            <span class="toc-name">Plan &amp; particulars<span>Floor plans · features · energy</span></span>
+            <span class="toc-page-num">09</span>
+          </li>
+          <li>
+            <span class="toc-num">viii.</span>
+            <span class="toc-name">Material information<span>Disclosure under DMCCA 2024</span></span>
+            <span class="toc-page-num">10</span>
+          </li>
+        </ul>
+      </div>
+      <!-- REPLACE: Editorial credit line — photographer/marketing footer.
+           Optional: prepend the dark brand logo (teal/dark variant for the warm-paper background). -->
+      <div class="toc-credit">
+        <img src="images/BRAND-LOGO-DARK.png" alt="BRAND" style="height: 22px; width: auto; display: block; margin: 0 0 10px 0; opacity: 0.92;">
+        Photographed in‑situ. Floor plans drawn to indicative scale.<br>
+        <strong>Marketed by BRAND</strong> — Office · Town
+      </div>
+    </div>
+  </div>
+  <!-- REPLACE: Footer folio — left = "Property Name · Location"; middle = chapter; right = page number.
+       Repeat across every page; keep the structure identical. -->
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Contents</em> —</span>
+    <span>02</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     OPENER — Spread 03 (Of Place & Pedigree)
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="03 Opener">
+  <img class="print-img" src="page3-print.png" alt="">
+  <div class="opener">
+    <div class="opener-text">
+      <div class="ed-eyebrow">Chapter I · Of place &amp; pedigree</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE: Property name + italic location sub-line -->
+      <h2 class="opener-title">Property Name<em>Location</em></h2>
+      <!-- REPLACE: County and postcode -->
+      <div class="opener-spec"><strong>County</strong> · POSTCODE</div>
+      <!-- REPLACE: Five-stat headline row — bedrooms, bathrooms, receptions, internal sq ft, plus one property-specific stat (annexe / studio / parking / acreage). -->
+      <div class="opener-meta-row">
+        <div class="item">
+          <span class="k">Bedrooms</span>
+          <span class="v">N</span>
+        </div>
+        <div class="item">
+          <span class="k">Bathrooms</span>
+          <span class="v">N</span>
+        </div>
+        <div class="item">
+          <span class="k">Receptions</span>
+          <span class="v">N</span>
+        </div>
+        <div class="item">
+          <span class="k">Internal</span>
+          <span class="v">0,000 <em>sq ft</em></span>
+        </div>
+        <div class="item">
+          <span class="k">Feature</span>
+          <span class="v"><em>Yes</em></span>
+        </div>
+      </div>
+      <!-- REPLACE: Two opening paragraphs. The first paragraph carries the dropcap class — keep it.
+           The second paragraph is the "headline / hook" — bold the most important feature; close with an italicised promise. -->
+      <div class="opener-body">
+        <p class="ed-body dropcap">
+          Opening paragraph introducing the setting, scale and character of the property — three or four sentences, written in a measured editorial tone.
+        </p>
+        <p class="ed-body">
+          Second paragraph leading on the property's <strong>standout feature</strong> — what makes this house unusual — and closing with an italicised editorial promise: <em>buy today, do something tomorrow</em>.
+        </p>
+      </div>
+    </div>
+    <div class="opener-image">
+      <!-- REPLACE: Front elevation image -->
+      <img src="images/PROPERTY-SLUG-02.webp" alt="The principal elevation of the property">
+      <!-- REPLACE: Image caption — single editorial sentence -->
+      <div class="img-caption">A short editorial caption describing the elevation or photograph.</div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Of place &amp; pedigree</em> —</span>
+    <span>03</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 04 — A HOUSE AT EASE
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="04 House at ease">
+  <img class="print-img" src="page4-print.png" alt="">
+  <!-- Spread layout: large hero image on left, text column on right, three-image caption strip across the bottom. -->
+  <div class="spread spread-2">
+    <div class="hero-img">
+      <!-- REPLACE: Hero image for this spread (open-plan living, kitchen-dining, or main reception) -->
+      <img src="images/PROPERTY-SLUG-04.webp" alt="Hero spread image">
+    </div>
+    <div class="text-col">
+      <div class="ed-eyebrow">Chapter II</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE: Chapter II headline — keep the <em> on the emphatic word -->
+      <h3 class="ed-headline smaller">A house <em>at ease</em></h3>
+      <!-- REPLACE: Chapter II deck — single sentence, editorial tone -->
+      <p class="ed-deck">A single-sentence editorial deck setting up the chapter.</p>
+      <!-- REPLACE: Chapter II body paragraph 1 — describe the ground-floor flow -->
+      <p class="ed-body" style="margin-top: 12px;">
+        Body paragraph describing the ground floor — reception rooms, kitchen, dining, and how they flow together.
+      </p>
+      <!-- REPLACE: Chapter II body paragraph 2 — pick out one detail with <strong> emphasis -->
+      <p class="ed-body">
+        Closing paragraph picking out one notable feature — a <strong>signature detail</strong> — to anchor the room in the reader's memory.
+      </p>
+    </div>
+    <!-- REPLACE: Three-image caption strip. Each cell: image + caption with <strong>lead-in</strong>. -->
+    <div class="strip">
+      <div class="strip-cell">
+        <img src="images/PROPERTY-SLUG-06.webp" alt="Strip image one">
+        <div class="ed-caption"><strong>Lead-in.</strong> One-sentence caption describing this image.</div>
+      </div>
+      <div class="strip-cell">
+        <img src="images/PROPERTY-SLUG-07.webp" alt="Strip image two">
+        <div class="ed-caption"><strong>Lead-in.</strong> One-sentence caption describing this image.</div>
+      </div>
+      <div class="strip-cell">
+        <img src="images/PROPERTY-SLUG-08.webp" alt="Strip image three">
+        <div class="ed-caption"><strong>Lead-in.</strong> One-sentence caption describing this image.</div>
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>A house at ease</em> —</span>
+    <span>04</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 05 — HALL, HEARTH & SUN
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="05 Hall hearth sun">
+  <img class="print-img" src="page5-print.png" alt="">
+  <!-- Spread layout: split header (chapter title left, deck + body right), large left image, two stacked images right. -->
+  <div class="spread spread-3">
+    <div class="head">
+      <div class="left">
+        <div class="ed-eyebrow">Chapter III</div>
+        <div class="ed-rule"></div>
+        <!-- REPLACE: Chapter III headline — two-line, italic emphasis on second line -->
+        <h3 class="ed-headline">Hall, hearth<br><em>&amp; sun</em></h3>
+      </div>
+      <div class="right">
+        <!-- REPLACE: Chapter III deck — single editorial sentence -->
+        <p class="ed-deck" style="margin-top: 0;">A single-sentence editorial deck describing the entrance and the secondary spaces.</p>
+        <!-- REPLACE: Chapter III body — describe entrance hall and a secondary room (study, garden room, etc.) -->
+        <p class="ed-body" style="margin-top: 12px;">
+          Body paragraph describing the <strong>entrance hallway</strong> and a secondary feature room such as a <strong>garden room</strong>, study or sun room — pick out atmosphere, light and use.
+        </p>
+      </div>
+    </div>
+    <!-- REPLACE: Large left-side image (an open reception shot or hero room) -->
+    <div class="left-img">
+      <img src="images/PROPERTY-SLUG-05.webp" alt="Open reception or hero room">
+    </div>
+    <!-- REPLACE: Two stacked right-side images — entrance hall + secondary room -->
+    <div class="right-stack">
+      <div class="cell">
+        <img src="images/PROPERTY-SLUG-09.webp" alt="Entrance hallway image">
+      </div>
+      <div class="cell">
+        <img src="images/PROPERTY-SLUG-10.webp" alt="Secondary room image">
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Hall, hearth &amp; sun</em> —</span>
+    <span>05</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 06 — BEDROOMS & BATHS
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="06 Bedrooms baths">
+  <img class="print-img" src="page6-print.png" alt="">
+  <!-- Spread layout: left text column with chapter intro + 3-stat row + closing paragraph; right gallery of 5 cells (one tall, four standard). -->
+  <div class="spread spread-4">
+    <div class="text-side">
+      <div class="ed-eyebrow">Chapter IV</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE: Chapter IV headline — italic on emphatic word -->
+      <h3 class="ed-headline smaller">Bedrooms<br>&amp; <em>baths</em></h3>
+      <!-- REPLACE: Chapter IV deck — opening sentence on the sleeping floor -->
+      <p class="ed-deck">Editorial deck describing the bedroom floor's character — number of rooms, layout, who it suits.</p>
+      <!-- REPLACE: Body paragraph 1 — outlooks, glazing, principal bedroom location -->
+      <p class="ed-body" style="margin-top: 14px;">
+        Body paragraph describing aspects, glazing and the position of the principal bedroom.
+      </p>
+      <!-- REPLACE: Three stats — bedrooms, bathrooms, and one specific feature (loft sq ft, dressing area, etc.) -->
+      <div style="margin-top: 14px; display: grid; gap: 10px;">
+        <div class="ed-stat"><div class="v">N <em>bedrooms</em></div><div class="l">Short qualifying line</div></div>
+        <div class="ed-stat"><div class="v">N <em>bathrooms</em></div><div class="l">Short qualifying line</div></div>
+        <div class="ed-stat"><div class="v">000 <em>sq ft</em></div><div class="l">Loft / extension scope</div></div>
+      </div>
+      <!-- REPLACE: Body paragraph 2 — a closing thought, often the loft / scope to extend -->
+      <p class="ed-body" style="margin-top: 14px;">
+        Closing paragraph — a <strong>standout feature</strong> on this floor (loft, dressing room, principal suite) and what it could become.
+      </p>
+    </div>
+    <!-- REPLACE: Five-cell gallery. The first cell is "tall" (occupies two rows). Use principal bedroom as the tall feature; the four standard cells mix bedrooms and bathrooms. -->
+    <div class="gallery">
+      <div class="cell tall">
+        <img src="images/PROPERTY-SLUG-13.webp" alt="Principal bedroom (tall feature)">
+      </div>
+      <div class="cell">
+        <img src="images/PROPERTY-SLUG-15.webp" alt="Bedroom two">
+      </div>
+      <div class="cell">
+        <img src="images/PROPERTY-SLUG-18.webp" alt="Bedroom three">
+      </div>
+      <div class="cell">
+        <img src="images/PROPERTY-SLUG-19.webp" alt="Family bathroom">
+      </div>
+      <div class="cell">
+        <img src="images/PROPERTY-SLUG-14.webp" alt="Secondary bathroom or shower room">
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Bedrooms &amp; baths</em> —</span>
+    <span>06</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 07 — THE ANNEXE
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="07 Annexe">
+  <img class="print-img" src="page7-print.png" alt="">
+  <!-- Feature spread: full-bleed image left + narrow text panel right.
+       Use this for ONE distinctive property feature — annexe, studio, outbuilding, separate cottage, garden office.
+       If the property has no such feature, repurpose this spread for whatever the property's standout chapter is
+       (e.g. the principal suite, the kitchen, the gallery wing). -->
+  <div class="feature-page">
+    <div class="photo">
+      <!-- REPLACE: Feature image -->
+      <img src="images/PROPERTY-SLUG-15.webp" alt="Feature image">
+      <!-- REPLACE: Single editorial caption beneath the image -->
+      <div class="photo-caption">A single editorial sentence framing the feature.</div>
+    </div>
+    <div class="panel">
+      <!-- REPLACE: Chapter V eyebrow — "Chapter V · The feature name" -->
+      <div class="ed-eyebrow">Chapter V · Feature name</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE: Chapter V headline — italic emphasis -->
+      <h3 class="ed-headline smaller">A standout <em>feature<br>headline</em></h3>
+      <!-- REPLACE: Chapter V deck -->
+      <p class="ed-deck" style="margin-top: 12px;">A single sentence framing why this feature matters.</p>
+      <!-- REPLACE: Chapter V body — describe the feature, its layout, its use cases -->
+      <p class="ed-body" style="margin-top: 14px;">
+        Body paragraph describing the feature in detail — what it contains, how it's used, why it works in <em>practice</em> rather than just in principle.
+      </p>
+      <!-- REPLACE: Four attribute pairs describing the feature.
+           Adapt key/value labels to fit (e.g. for a studio: "Footprint", "Use", "Power", "Access"). -->
+      <div class="attr-grid">
+        <div class="attr">
+          <div class="k">Key</div>
+          <div class="v">Value description</div>
+        </div>
+        <div class="attr">
+          <div class="k">Key</div>
+          <div class="v">Value description</div>
+        </div>
+        <div class="attr">
+          <div class="k">Key</div>
+          <div class="v">Value description</div>
+        </div>
+        <div class="attr">
+          <div class="k">Key</div>
+          <div class="v">Value description</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Feature name</em> —</span>
+    <span>07</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 08 — GARDEN & GROUND
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="08 Garden ground">
+  <img class="print-img" src="page8-print.png" alt="">
+  <!-- Spread layout: full-bleed top hero (aerial / drone / wide garden) with overlaid chapter title;
+       four short-text panels along the bottom acting as captions for different aspects of the outside. -->
+  <div class="spread spread-6">
+    <div class="top-image">
+      <!-- REPLACE: Aerial / drone / wide garden hero image -->
+      <img src="images/PROPERTY-SLUG-24.webp" alt="Aerial or wide garden image">
+      <div class="overlay">
+        <div class="ed-eyebrow">Chapter VI</div>
+        <div class="ed-rule"></div>
+        <!-- REPLACE: Chapter VI headline — two-line, italic on second line -->
+        <h3 class="ed-headline">Garden,<br>plot <em>&amp; planning</em></h3>
+      </div>
+    </div>
+    <!-- REPLACE: Four short panels — each a sub-heading + 1-2 sentence body.
+         Sub-headings should sit in <h4>The <em>topic</em> sub</h4> form.
+         Common topics: rear garden, side plot, scope to extend, ancillary buildings, parking, planning. -->
+    <div class="bottom">
+      <h4>The <em>rear</em> garden</h4>
+      <p class="ed-body">Short paragraph describing layout, planting, lawn, terraces.</p>
+    </div>
+    <div class="bottom">
+      <h4>The <em>front</em> &amp; approach</h4>
+      <p class="ed-body">Short paragraph describing approach, driveway, parking, frontage.</p>
+    </div>
+    <div class="bottom">
+      <h4>Scope to <em>extend</em></h4>
+      <p class="ed-body">Short paragraph describing planning, plots, scope to extend (or remove if not applicable).</p>
+    </div>
+    <div class="bottom">
+      <h4>The <em>ancillary</em></h4>
+      <p class="ed-body">Short paragraph describing garage, outbuildings, EV point, services.</p>
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Garden &amp; ground</em> —</span>
+    <span>08</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 09 — PLAN & PARTICULARS
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="09 Plan particulars">
+  <img class="print-img" src="page9-print.png" alt="">
+  <!-- Spread layout: full-width chapter header along the top, large floor plan area on the left,
+       particulars list + EPC block on the right. -->
+  <div class="spread spread-7">
+    <div class="header">
+      <div class="ed-eyebrow">Chapter VII · Plan &amp; particulars</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE: Chapter VII headline — italic on emphatic phrase -->
+      <h3 class="ed-headline smaller">All floors <em>at a glance</em></h3>
+    </div>
+    <div class="plan-area">
+      <!-- REPLACE: Floor plan image (composite of all floors) -->
+      <img src="images/PROPERTY-SLUG-25.webp" alt="Floor plans, all floors">
+      <!-- REPLACE: Floor area meta — total sq ft / sq m + qualifying sub-line -->
+      <div class="meta">
+        <div class="lead">Total floor area · <em>0,000 sq ft</em> · 000 sq m</div>
+        <div class="sub">Qualifying line — loft, garage, outbuildings, etc.</div>
+      </div>
+    </div>
+    <div class="spec-side">
+      <div class="ed-eyebrow" style="margin-bottom: 6px;">Particulars</div>
+      <!-- REPLACE: Particulars list — eight to ten lower-case Roman-numerated headline features.
+           Keep <strong> on the headline phrase, then a short qualifying clause. -->
+      <ol class="spec-list">
+        <li><span class="num">i</span><span><strong>Headline feature one</strong> with a short qualifier</span></li>
+        <li><span class="num">ii</span><span><strong>Headline feature two</strong> with a short qualifier</span></li>
+        <li><span class="num">iii</span><span><strong>Headline feature three</strong> with a short qualifier</span></li>
+        <li><span class="num">iv</span><span><strong>Headline feature four</strong> with a short qualifier</span></li>
+        <li><span class="num">v</span><span><strong>Headline feature five</strong> with a short qualifier</span></li>
+        <li><span class="num">vi</span><span><strong>Headline feature six</strong> with a short qualifier</span></li>
+        <li><span class="num">vii</span><span><strong>Headline feature seven</strong> with a short qualifier</span></li>
+        <li><span class="num">viii</span><span><strong>Headline feature eight</strong> with a short qualifier</span></li>
+        <li><span class="num">ix</span><span><strong>Headline feature nine</strong> with a short qualifier</span></li>
+      </ol>
+      <div class="epc-block">
+        <!-- REPLACE: EPC title — replace " · EPC pending" with " · EPC <RATING>" or "· Rated B" once known -->
+        <div class="epc-title">Energy &amp; environment <em>· EPC pending</em></div>
+        <!-- REPLACE: EPC bar chart — add the "current" class to the correct band:
+             <div class="epc-bar c current">C</div> -->
+        <div class="epc-bars">
+          <div class="epc-bar a">A</div>
+          <div class="epc-bar b">B</div>
+          <div class="epc-bar c">C</div>
+          <div class="epc-bar d">D</div>
+          <div class="epc-bar e">E</div>
+          <div class="epc-bar f">F</div>
+          <div class="epc-bar g">G</div>
+        </div>
+        <!-- REPLACE: Energy caption — short note on heating, solar, running costs -->
+        <p class="ed-caption" style="margin-top: 8px;">
+          A short editorial caption on the property's energy story — heating system, insulation, solar, EV.
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Plan &amp; particulars</em> —</span>
+    <span>09</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 10 — MATERIAL INFORMATION
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="10 Material information">
+  <img class="print-img" src="page10-print.png" alt="">
+  <div class="mi-page">
+    <div class="mi-head">
+      <div>
+        <div class="ed-eyebrow">Chapter VIII · Disclosure</div>
+        <div class="ed-rule"></div>
+        <h3 class="ed-headline smaller">Material <em>information</em></h3>
+      </div>
+      <!-- Disclosure intro paragraph — DO NOT EDIT (boilerplate compliance text). -->
+      <div class="mi-intro">
+        Provided in accordance with the Consumer Protection from Unfair Trading Regulations 2008, the Digital Markets, Competition and Consumers Act 2024, and National Trading Standards guidance on material information in property listings.
+      </div>
+    </div>
+    <!-- REPLACE: Three-part Material Information disclosure (UK regulatory).
+         Update each <span class="v"> with the actual property value; mark unknowns "TBC".
+         Add or remove rows as appropriate, but do not collapse the three-section structure. -->
+    <div class="mi-grid">
+      <div class="mi-section">
+        <div class="mi-label">Part A · Material to all transactions</div>
+        <div class="mi-row"><span class="k">Asking Price</span><span class="v">£0,000,000</span></div>
+        <div class="mi-row"><span class="k">Tenure</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Council Tax Band</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Property Type</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Bedrooms</span><span class="v">N</span></div>
+        <div class="mi-row"><span class="k">Bathrooms</span><span class="v">N</span></div>
+        <div class="mi-row"><span class="k">Receptions</span><span class="v">N</span></div>
+        <div class="mi-row"><span class="k">Floor Area</span><span class="v">0,000 sq ft</span></div>
+        <div class="mi-row"><span class="k">Heating</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Electricity</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Broadband</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Mobile Signal</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Parking</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">EV Charging</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">EPC</span><span class="v">TBC</span></div>
+      </div>
+      <div class="mi-section">
+        <div class="mi-label">Part B · Where applicable</div>
+        <div class="mi-row"><span class="k">Building Safety</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Restrictive Covenants</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Rights of Way</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Easements</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Listed Building</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Conservation Area</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Tree Preservation</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Accessibility</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Sewerage</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Water Supply</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Property-specific</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Property-specific</span><span class="v">TBC</span></div>
+      </div>
+      <div class="mi-section">
+        <div class="mi-label">Part C · Additional material facts</div>
+        <div class="mi-row"><span class="k">Flood Risk</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Coastal Erosion</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Planning</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Construction</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Structural</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Subsidence</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Damp</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Asbestos</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Japanese Knotweed</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Mining</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Electrical Cert.</span><span class="v">TBC</span></div>
+        <div class="mi-row"><span class="k">Property-specific</span><span class="v">TBC</span></div>
+      </div>
+    </div>
+    <!-- Disclosure footer — keep boilerplate; tweak only if your jurisdiction requires different wording. -->
+    <div class="mi-foot">
+      The agent has made reasonable enquiries to verify this information; prospective purchasers should satisfy themselves as to its accuracy through their own legal and survey processes. Items marked TBC will be confirmed by the seller's solicitor.
+    </div>
+  </div>
+  <div class="folio">
+    <span>Property Name · Location</span>
+    <span class="folio-mid">— <em>Material information</em> —</span>
+    <span>10</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     BACK PAGE
+     ════════════════════════════════════════════════════ -->
+<section class="page backpage" data-screen-label="11 Back page">
+  <img class="print-img" src="backpage-print.png" alt="">
+  <!-- REPLACE: Back-page background image — wide, atmospheric, golden-hour feel. -->
+  <div class="bg">
+    <img src="images/PROPERTY-SLUG-26.webp" alt="Atmospheric rear or aerial image at golden hour">
+  </div>
+  <div class="backpage-frame"></div>
+  <div class="backpage-inner">
+    <!-- REPLACE: Brand masthead — use the brand logo (white/light variant for the dark back image). -->
+    <div class="back-mast">
+      <img src="images/BRAND-LOGO-LIGHT.png" alt="BRAND">
+      <span class="pipe"></span>
+      <span class="label">Property Folio</span>
+    </div>
+    <!-- REPLACE: Back-page CTA headline — italic on property name -->
+    <h2 class="back-headline">Arrange a viewing of <em>Property Name</em></h2>
+    <!-- REPLACE: Back-page tagline — one-sentence summary echoing the cover -->
+    <p class="back-tagline">A short editorial summary of the property's headline features — best understood in person.</p>
+    <div class="back-rule"></div>
+    <!-- REPLACE: Two contact panels — agent + office. -->
+    <div class="back-contact-grid">
+      <div class="cell">
+        <div class="k">The Agent</div>
+        <div class="name"><em>First</em> Last</div>
+        <div class="line">
+          Phone number<br>
+          email@brand.co.uk
+        </div>
+      </div>
+      <div class="cell">
+        <div class="k">The Office</div>
+        <div class="name">BRAND · <em>Town</em></div>
+        <div class="line">
+          Address line 1<br>
+          Town · County POSTCODE
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- REPLACE: Back-page footer — folio number on left, edition / season on right -->
+  <div class="back-foot">
+    <div class="left">Folio № <em>0000000</em></div>
+    <div class="right">Season · YEAR</div>
+  </div>
+  <!-- Back-page disclaimer — keep boilerplate; adjust the closing planning sentence
+       to match the property's actual planning status (or remove if not applicable). -->
+  <div class="back-disclaimer">
+    These particulars, whilst believed to be accurate, are set out as a general outline only for guidance and do not constitute any part of an offer or contract. Intending purchasers should not rely on them as statements or representations of fact, but must satisfy themselves by inspection or otherwise as to their accuracy. All measurements are approximate and floor plans not to scale.
+  </div>
+</section>
+</body>
+</html>