npm - @rubytech/create-realagent - Versions diffs - 1.0.843 → 1.0.844 - Mend

@rubytech/create-realagent 1.0.843 → 1.0.844

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 (13) hide show

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

@@ -1,1451 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Property Brochure — Template</title>
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-<style>
-  /* ═══════════════════════════════════════════════════
-     DESIGN TOKENS
-     ═══════════════════════════════════════════════════ */
-  :root {
-    --primary: #7C8C72;
-    --primary-hover: #6A7A62;
-    --primary-subtle: rgba(124, 140, 114, 0.08);
-    --primary-glow: rgba(124, 140, 114, 0.15);
-    --accent: #C5A572;
-    --accent-light: rgba(197, 165, 114, 0.12);
-    --accent-bright: #D4B882;
-    --background: #FAFAF8;
-    --surface: #F0EDE8;
-    --text: #2C2C2A;
-    --text-secondary: #5A5A56;
-    --text-tertiary: #8A8A84;
-    --border: rgba(124, 140, 114, 0.18);
-    --border-light: rgba(124, 140, 114, 0.08);
-    --white: #FFFFFF;
-    --display: 'Playfair Display', Georgia, serif;
-    --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    --glass-bg: rgba(250, 250, 248, 0.06);
-    --glass-border: rgba(250, 250, 248, 0.12);
-    --glass-bg-light: rgba(255, 255, 255, 0.55);
-    --glass-border-light: rgba(124, 140, 114, 0.15);
-    --dark-deep: #0a171c;
-    --dark: #0d1f26;
-    --teal: #2BBFD0;
-    --teal-light: #5DD9E8;
-  }
-  * { 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(--body);
-    background: #e8e5e0;
-    color: var(--text);
-    line-height: 1.5;
-    font-weight: 400;
-  }
-  /* ═══════════════════════════════════════════════════
-     DOWNLOAD BUTTON
-     ═══════════════════════════════════════════════════ */
-  .download-bar {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 1000;
-  }
-  .download-btn {
-    font-family: var(--body);
-    font-size: 0.72rem;
-    font-weight: 600;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--background);
-    background: rgba(44, 44, 42, 0.7);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(250, 250, 248, 0.12);
-    padding: 10px 20px;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .download-btn:hover {
-    background: rgba(44, 44, 42, 0.95);
-    border-color: var(--accent);
-    color: var(--accent-bright);
-  }
-  .download-btn svg { width: 14px; height: 14px; }
-  /* ═══════════════════════════════════════════════════
-     COVER — Dark dramatic hero (biosymm pattern)
-     ═══════════════════════════════════════════════════ */
-  .cover {
-    width: 210mm;
-    min-height: 297mm;
-    margin: 20px auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    position: relative;
-    overflow: hidden;
-    background: #1a1c18;
-    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
-  }
-  .cover-bg {
-    position: absolute;
-    inset: 0;
-  }
-  .cover-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  /* Lighter gradient vignette — house visible, text legible at bottom */
-  .cover-bg::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background:
-      linear-gradient(to bottom, rgba(26,28,24,0.05) 0%, rgba(26,28,24,0.1) 30%, rgba(26,28,24,0.55) 65%, rgba(26,28,24,0.9) 100%),
-      radial-gradient(ellipse 80% 50% at 75% 20%, rgba(197,165,114,0.04) 0%, transparent 60%);
-  }
-  .cover-inner {
-    position: relative;
-    z-index: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: 40px;
-  }
-  .cover-label {
-    font-family: var(--body);
-    font-size: 0.55rem;
-    font-weight: 600;
-    letter-spacing: 0.3em;
-    text-transform: uppercase;
-    color: var(--accent);
-    margin-bottom: 12px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-  .cover-label::before {
-    content: '';
-    width: 28px;
-    height: 1px;
-    background: var(--accent);
-  }
-  .cover-title {
-    font-family: var(--display);
-    font-size: 3.2rem;
-    font-weight: 400;
-    line-height: 1.08;
-    color: var(--background);
-    letter-spacing: -0.02em;
-    margin-bottom: 16px;
-  }
-  .cover-title em {
-    font-style: italic;
-    color: var(--accent-bright);
-  }
-  .cover-subtitle {
-    font-size: 0.82rem;
-    font-weight: 300;
-    color: rgba(250, 250, 248, 0.7);
-    max-width: 440px;
-    line-height: 1.65;
-    margin-bottom: 28px;
-  }
-  /* Glassmorphic stat cards — bottom of cover */
-  .cover-stats {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 10px;
-  }
-  .cover-stat {
-    background: var(--glass-bg);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid var(--glass-border);
-    border-radius: 5px;
-    padding: 14px 16px;
-  }
-  .cover-stat .stat-value {
-    font-family: var(--display);
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: var(--accent-bright);
-    line-height: 1;
-    margin-bottom: 4px;
-  }
-  .cover-stat .stat-label {
-    font-size: 0.48rem;
-    font-weight: 500;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: rgba(250, 250, 248, 0.55);
-    line-height: 1.35;
-  }
-  /* ═══════════════════════════════════════════════════
-     CONTENT PAGES — explicit A4 containers
-     ═══════════════════════════════════════════════════ */
-  .page {
-    width: 210mm;
-    min-height: 297mm;
-    margin: 20px auto 0;
-    background: var(--background);
-    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
-    overflow: hidden;
-    position: relative;
-  }
-  /* Page numbering on screen (cover = page 1, first .page = page 2) */
-  body { counter-reset: page-number 1; }
-  .page { counter-increment: page-number; }
-  .page::after {
-    content: counter(page-number);
-    position: absolute;
-    bottom: 16px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    font-family: var(--display);
-    font-size: 9px;
-    color: var(--text-tertiary);
-  }
-  .content {
-    padding: 28px 40px;
-  }
-  .section-label {
-    font-family: var(--body);
-    font-size: 0.55rem;
-    font-weight: 600;
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    color: var(--accent);
-    margin-bottom: 8px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .section-label::before {
-    content: '';
-    width: 16px;
-    height: 1px;
-    background: var(--accent);
-  }
-  .section-heading {
-    font-family: var(--display);
-    font-size: 1.4rem;
-    font-weight: 400;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--text);
-    line-height: 1.25;
-    margin-bottom: 14px;
-  }
-  .section-heading.small {
-    font-size: 1.05rem;
-    letter-spacing: 0.12em;
-  }
-  .body-text {
-    font-size: 0.72rem;
-    line-height: 1.7;
-    color: var(--text-secondary);
-    text-align: justify;
-    hyphens: auto;
-  }
-  .body-text + .body-text { margin-top: 8px; }
-  .body-text strong { color: var(--text); font-weight: 600; }
-  .divider {
-    height: 1px;
-    background: var(--border);
-    margin: 18px 0;
-  }
-  .divider.gold {
-    background: linear-gradient(90deg, transparent, var(--accent), transparent);
-  }
-  /* ═══════════════════════════════════════════════════
-     IMAGE LAYOUTS
-     ═══════════════════════════════════════════════════ */
-  .img-full {
-    margin: 0 -40px;
-    overflow: hidden;
-  }
-  .img-full img {
-    width: 100%;
-    height: 280px;
-    object-fit: cover;
-  }
-  .img-grid-2 {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-    margin: 16px 0;
-  }
-  .img-grid-2 img {
-    width: 100%;
-    height: 260px;
-    object-fit: cover;
-    border-radius: 3px;
-  }
-  .img-grid-3 {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 8px;
-    margin: 16px 0;
-  }
-  .img-grid-3 img {
-    width: 100%;
-    height: 220px;
-    object-fit: cover;
-    border-radius: 3px;
-  }
-  .img-banner {
-    position: relative;
-    margin: 0 -40px;
-    height: 220px;
-    overflow: hidden;
-  }
-  .img-banner img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .img-banner .banner-overlay {
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(to right, rgba(10, 23, 28, 0.8) 0%, rgba(10, 23, 28, 0.4) 50%, transparent 100%);
-    display: flex;
-    align-items: center;
-    padding: 0 80px;
-  }
-  .img-banner .banner-text {
-    max-width: 50%;
-  }
-  .img-banner .banner-text h2 {
-    font-family: var(--display);
-    font-size: 1.4rem;
-    font-weight: 400;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--background);
-    margin-bottom: 8px;
-  }
-  .img-banner .banner-text p {
-    font-size: 0.68rem;
-    line-height: 1.6;
-    color: rgba(250, 250, 248, 0.8);
-  }
-  /* ═══════════════════════════════════════════════════
-     SPLIT LAYOUTS
-     ═══════════════════════════════════════════════════ */
-  .split {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 24px;
-    align-items: start;
-  }
-  .split.text-right { direction: rtl; }
-  .split.text-right > * { direction: ltr; }
-  .split img {
-    width: 100%;
-    height: 100%;
-    min-height: 280px;
-    object-fit: cover;
-    border-radius: 3px;
-  }
-  /* ═══════════════════════════════════════════════════
-     CALLOUT / FEATURE LIST
-     ═══════════════════════════════════════════════════ */
-  .callout {
-    background: var(--glass-bg-light);
-    border: 1px solid var(--glass-border-light);
-    border-left: 3px solid var(--accent);
-    border-radius: 4px;
-    padding: 12px 16px;
-    margin: 12px 0;
-  }
-  .callout p {
-    font-size: 0.68rem;
-    line-height: 1.55;
-    color: var(--text-secondary);
-    font-style: italic;
-    margin: 0;
-  }
-  .callout p strong {
-    color: var(--text);
-    font-weight: 600;
-    font-style: normal;
-  }
-  .callout.primary {
-    border-left-color: var(--primary);
-    background: var(--primary-subtle);
-  }
-  .feature-list {
-    list-style: none;
-    margin: 10px 0;
-  }
-  .feature-list li {
-    font-size: 0.68rem;
-    line-height: 1.5;
-    color: var(--text-secondary);
-    padding: 4px 0;
-    padding-left: 16px;
-    position: relative;
-    border-bottom: 1px solid var(--border-light);
-  }
-  .feature-list li:last-child { border-bottom: none; }
-  .feature-list li::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 11px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--primary);
-  }
-  .feature-list li strong {
-    color: var(--text);
-    font-weight: 600;
-  }
-  /* ═══════════════════════════════════════════════════
-     ROOM DESCRIPTIONS
-     ═══════════════════════════════════════════════════ */
-  .room-name {
-    font-family: var(--display);
-    font-size: 0.9rem;
-    font-weight: 400;
-    color: var(--text);
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    margin-bottom: 6px;
-  }
-  /* ═══════════════════════════════════════════════════
-     DARK BAND
-     ═══════════════════════════════════════════════════ */
-  .dark-band {
-    background: var(--dark);
-    margin: 0 -40px;
-    padding: 24px 40px;
-    color: var(--background);
-  }
-  .dark-band .section-label { color: var(--accent-bright); }
-  .dark-band .section-label::before { background: var(--accent-bright); }
-  .dark-band .section-heading { color: var(--background); }
-  .dark-band .body-text { color: rgba(250, 250, 248, 0.75); }
-  .dark-band .body-text strong { color: var(--background); }
-  .dark-band .feature-list li {
-    color: rgba(250, 250, 248, 0.7);
-    border-bottom-color: rgba(250, 250, 248, 0.08);
-  }
-  .dark-band .feature-list li::before { background: var(--accent); }
-  .dark-band .feature-list li strong { color: var(--background); }
-  /* ═══════════════════════════════════════════════════
-     ORNAMENTAL FRAME
-     ═══════════════════════════════════════════════════ */
-  .ornamental-frame {
-    border: 1px solid var(--accent);
-    padding: 28px;
-    position: relative;
-    margin: 16px 0;
-  }
-  .ornamental-frame::before {
-    content: '';
-    position: absolute;
-    inset: 4px;
-    border: 1px solid rgba(197, 165, 114, 0.3);
-    pointer-events: none;
-  }
-  /* ═══════════════════════════════════════════════════
-     EPC CHART
-     ═══════════════════════════════════════════════════ */
-  .epc-label {
-    font-size: 0.55rem;
-    font-weight: 600;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--text-tertiary);
-    margin-bottom: 6px;
-  }
-  .epc-bar {
-    display: flex;
-    align-items: center;
-    margin-bottom: 2px;
-    height: 18px;
-    font-size: 0.5rem;
-    font-weight: 600;
-    color: var(--white);
-    position: relative;
-  }
-  .epc-bar span {
-    padding: 0 6px;
-    position: relative;
-    z-index: 1;
-    white-space: nowrap;
-    line-height: 18px;
-  }
-  .epc-bar.a { background: #008054; width: 50%; }
-  .epc-bar.b { background: #19b459; width: 57%; }
-  .epc-bar.c { background: #8dce46; width: 64%; color: var(--text); }
-  .epc-bar.d { background: #ffd500; width: 71%; color: var(--text); }
-  .epc-bar.e { background: #fcaa65; width: 78%; color: var(--text); }
-  .epc-bar.f { background: #ef8023; width: 85%; }
-  .epc-bar.g { background: #e9153b; width: 92%; }
-  .epc-bar.current {
-    outline: 2px solid var(--text);
-    outline-offset: -1px;
-    z-index: 1;
-  }
-  /* ═══════════════════════════════════════════════════
-     MATERIAL INFORMATION
-     ═══════════════════════════════════════════════════ */
-  .mi-section { margin-bottom: 18px; }
-  .mi-part-label {
-    font-family: var(--body);
-    font-size: 0.52rem;
-    font-weight: 700;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: var(--primary);
-    margin-bottom: 8px;
-    padding-bottom: 4px;
-    border-bottom: 1px solid var(--border-light);
-  }
-  .mi-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4px 20px;
-  }
-  .mi-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    padding: 4px 0;
-    border-bottom: 1px solid var(--border-light);
-    font-size: 0.62rem;
-  }
-  .mi-row:last-child { border-bottom: none; }
-  .mi-field {
-    color: var(--text-tertiary);
-    font-weight: 500;
-    flex-shrink: 0;
-  }
-  .mi-value {
-    color: var(--text);
-    font-weight: 400;
-    text-align: right;
-    margin-left: 8px;
-  }
-  .mi-note {
-    font-size: 0.52rem;
-    color: var(--text-tertiary);
-    line-height: 1.5;
-    margin-top: 6px;
-    font-style: italic;
-  }
-  /* ═══════════════════════════════════════════════════
-     BACK PAGE — Full-bleed glassmorphic
-     ═══════════════════════════════════════════════════ */
-  .backpage {
-    width: 210mm;
-    min-height: 297mm;
-    margin: 20px auto 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    overflow: hidden;
-    background: #1a1c18;
-    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
-  }
-  .back-bg {
-    position: absolute;
-    inset: 0;
-  }
-  .back-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    opacity: 0.25;
-  }
-  .back-bg::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background:
-      linear-gradient(to bottom, rgba(26,28,24,0.6) 0%, rgba(26,28,24,0.4) 40%, rgba(26,28,24,0.6) 70%, rgba(26,28,24,0.9) 100%);
-  }
-  .back-bg::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background:
-      radial-gradient(ellipse 50% 50% at 50% 40%, rgba(197,165,114,0.04) 0%, transparent 60%);
-  }
-  .back-inner {
-    position: relative;
-    z-index: 1;
-    min-height: 297mm;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 60px 40px;
-  }
-  .back-cta {
-    font-family: var(--display);
-    font-size: 2.2rem;
-    font-weight: 400;
-    line-height: 1.2;
-    color: var(--background);
-    margin-bottom: 28px;
-    max-width: 460px;
-  }
-  .back-cta em {
-    font-style: italic;
-    color: var(--accent-bright);
-  }
-  .back-description {
-    font-size: 0.85rem;
-    font-weight: 300;
-    color: rgba(250, 250, 248, 0.75);
-    line-height: 1.7;
-    max-width: 420px;
-    margin-bottom: 40px;
-  }
-  .back-contact-label {
-    font-size: 0.6rem;
-    font-weight: 600;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: rgba(250, 250, 248, 0.5);
-    margin-bottom: 10px;
-  }
-  .back-contact {
-    font-size: 0.78rem;
-    color: rgba(250, 250, 248, 0.8);
-    line-height: 1.8;
-  }
-  .back-disclaimer {
-    position: absolute;
-    bottom: 24px;
-    left: 40px;
-    right: 40px;
-    z-index: 1;
-    font-size: 0.58rem;
-    color: rgba(250, 250, 248, 0.5);
-    line-height: 1.65;
-    text-align: center;
-  }
-  /* Print snapshot images — loaded but invisible on screen */
-  .print-img {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    opacity: 0;
-    pointer-events: none;
-    overflow: hidden;
-  }
-  /* ═══════════════════════════════════════════════════
-     PRINT STYLES — A4 Print Skill patterns
-     ═══════════════════════════════════════════════════ */
-  @page {
-    size: A4 portrait;
-    margin: 0;
-  }
-  @media print {
-    html { font-size: 16px; }
-    body { background: white; }
-    .download-bar { display: none !important; }
-    /* Every page becomes a full-page print snapshot */
-    .cover, .page, .backpage {
-      width: auto; margin: 0; box-shadow: none; min-height: 0;
-      height: 100vh;
-      page-break-after: always;
-      position: relative;
-      overflow: hidden;
-    }
-    .cover::after, .page::after { display: none; }
-    /* Hide live content, show snapshot */
-    .cover > *:not(.print-img),
-    .page > *:not(.print-img),
-    .backpage > *:not(.print-img) {
-      display: none !important;
-    }
-    .print-img {
-      position: absolute !important;
-      inset: 0 !important;
-      width: 100% !important;
-      height: 100% !important;
-      opacity: 1 !important;
-      object-fit: cover !important;
-      z-index: 9999 !important;
-    }
-  }
-</style>
-</head>
-<body>
-<!-- Download / Print Button -->
-<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
-     ════════════════════════════════════════════════════ -->
-<div class="cover">
-  <img class="print-img" src="cover-print.png" alt="">
-  <!-- REPLACE: Cover hero image — main exterior or lifestyle shot -->
-  <div class="cover-bg">
-    <img src="images/FRONT-HERO.jpeg" alt="Property front hero image">
-  </div>
-  <div class="cover-inner">
-    <!-- REPLACE: Location label — village, road, or area name -->
-    <div class="cover-label">Location</div>
-    <!-- REPLACE: Property name or address line -->
-    <h1 class="cover-title">Property Name</h1>
-    <!-- REPLACE: One-sentence property summary — key selling points and hook -->
-    <p class="cover-subtitle">
-      Replace with a compelling one-sentence summary of the property highlighting its key features, unique selling points, and lifestyle appeal.
-    </p>
-    <!-- REPLACE: Cover statistics — five key facts about the property -->
-    <div class="cover-stats">
-      <div class="cover-stat">
-        <div class="stat-value">0</div>
-        <div class="stat-label">Bedrooms<br>description</div>
-      </div>
-      <div class="cover-stat">
-        <div class="stat-value">0</div>
-        <div class="stat-label">Bathrooms<br>description</div>
-      </div>
-      <div class="cover-stat">
-        <div class="stat-value">TBC</div>
-        <div class="stat-label">Energy rating<br>description</div>
-      </div>
-      <div class="cover-stat">
-        <div class="stat-value">TBC</div>
-        <div class="stat-label">Notable stat<br>description</div>
-      </div>
-      <div class="cover-stat">
-        <div class="stat-value">TBC</div>
-        <div class="stat-label">Notable stat<br>description</div>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 2 — PROPERTY OVERVIEW
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page2-print.png" alt="">
-  <div class="content">
-    <!-- REPLACE: Section label for the property overview -->
-    <div class="section-label">The Property</div>
-    <!-- REPLACE: Section heading — aspirational two-line title -->
-    <h2 class="section-heading">Section Heading,<br>Second Line</h2>
-    <div class="split">
-      <div>
-        <!-- REPLACE: Property overview paragraph one — introduce the property, its character, and headline features -->
-        <p class="body-text">
-          Property description paragraph one. Introduce the property, its character, setting, and headline features. Mention key upgrades, energy credentials, or standout qualities that set it apart.
-        </p>
-        <!-- REPLACE: Property overview paragraph two — elaborate on condition, finishes, and recent work -->
-        <p class="body-text">
-          Property description paragraph two. Elaborate on the condition of the property, recent renovations, quality of finishes, flooring, and any bespoke details that contribute to the overall impression.
-        </p>
-        <!-- REPLACE: At-a-glance callout — bullet-style summary of the property's key facts -->
-        <div class="callout">
-          <p><strong>At a glance:</strong> A summary of the property's key facts — number of bedrooms, bathrooms, reception rooms, notable features, garden, parking, and any standout attributes.</p>
-        </div>
-      </div>
-      <div>
-        <!-- REPLACE: Hallway or entrance image -->
-        <img src="images/HALLWAY.jpeg" alt="Entrance hallway" style="min-height:340px;">
-      </div>
-    </div>
-    <div class="divider gold"></div>
-    <!-- REPLACE: Two exterior images — front and rear -->
-    <div class="img-grid-2">
-      <img src="images/EXTERIOR-FRONT.jpeg" alt="Front exterior" style="height:380px;">
-      <img src="images/EXTERIOR-REAR.jpeg" alt="Rear elevation" style="height:380px;">
-    </div>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 3 — KITCHEN & LIVING
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page3-print.png" alt="">
-  <div class="content">
-    <!-- REPLACE: Kitchen hero banner image and overlay text -->
-    <div class="img-banner">
-      <img src="images/KITCHEN-HERO.jpeg" alt="Kitchen and dining area">
-      <div class="banner-overlay">
-        <div class="banner-text">
-          <h2>Banner<br>Heading</h2>
-          <p>Short description of the kitchen/dining/living space and how it connects to the outdoors.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="content">
-    <!-- REPLACE: Ground floor section label -->
-    <div class="section-label">Ground Floor</div>
-    <div class="split" style="margin-bottom: 20px;">
-      <div>
-        <!-- REPLACE: Kitchen / Dining room name and description -->
-        <h3 class="room-name">Kitchen / Dining</h3>
-        <p class="body-text">
-          Kitchen and dining room description paragraph. Describe the layout, fitted appliances, worktops, island or breakfast bar, natural light, doors to garden, and any standout design features.
-        </p>
-      </div>
-      <div>
-        <!-- REPLACE: Kitchen detail image -->
-        <img src="images/KITCHEN-DETAIL.jpeg" alt="Kitchen detail">
-      </div>
-    </div>
-    <div class="divider"></div>
-    <div class="split text-right">
-      <div>
-        <!-- REPLACE: Living room name and description -->
-        <h3 class="room-name">Reception Room</h3>
-        <p class="body-text">
-          Living room or reception room description paragraph. Describe the proportions, outlook, flooring, lighting, and how the room is used — whether for relaxing, entertaining, or both.
-        </p>
-      </div>
-      <div>
-        <!-- REPLACE: Living room image -->
-        <img src="images/LIVING-ROOM.jpeg" alt="Living room">
-      </div>
-    </div>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 4 — STUDY, UTILITY & SUSTAINABILITY
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page4-print.png" alt="">
-  <div class="content">
-    <!-- REPLACE: Three detail images — dining, kitchen, and living details -->
-    <div class="img-grid-3">
-      <img src="images/DETAIL-1.jpeg" alt="Interior detail one">
-      <img src="images/DETAIL-2.jpeg" alt="Interior detail two">
-      <img src="images/DETAIL-3.jpeg" alt="Interior detail three">
-    </div>
-    <div class="divider"></div>
-    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
-      <div>
-        <!-- REPLACE: Additional ground-floor room name and description -->
-        <h3 class="room-name">Study / Home Office</h3>
-        <p class="body-text">
-          Study or home office description paragraph. Describe the room's size, natural light, built-in furniture, and suitability for working from home.
-        </p>
-      </div>
-      <div>
-        <!-- REPLACE: Utility room or secondary ground-floor room name and description -->
-        <h3 class="room-name">Utility Room</h3>
-        <p class="body-text">
-          Utility room description paragraph. Describe the fitted units, appliances, ventilation, and any additional systems housed in this room.
-        </p>
-      </div>
-    </div>
-    <!-- REPLACE: Two additional ground-floor room images -->
-    <div class="img-grid-2">
-      <img src="images/STUDY.jpeg" alt="Study">
-      <img src="images/UTILITY.jpeg" alt="Utility room">
-    </div>
-  </div>
-  <div class="content">
-    <!-- REPLACE: Dark band section — sustainability, technology, or key selling point -->
-    <div class="dark-band">
-      <div class="section-label">Sustainability</div>
-      <h2 class="section-heading small">Key Feature Heading</h2>
-      <p class="body-text" style="margin-bottom: 10px;">
-        Key feature description paragraph. Describe the property's standout technical or lifestyle feature — energy efficiency, smart home technology, or other notable system.
-      </p>
-      <ul class="feature-list">
-        <!-- REPLACE: Feature list items — six to eight key technical or lifestyle features -->
-        <li><strong>Notable feature</strong> — description of the feature and its benefit</li>
-        <li><strong>Notable feature</strong> — description of the feature and its benefit</li>
-        <li><strong>Notable feature</strong> — description of the feature and its benefit</li>
-        <li><strong>Notable feature</strong> — description of the feature and its benefit</li>
-        <li><strong>Notable feature</strong> — description of the feature and its benefit</li>
-        <li><strong>Notable feature</strong> — description of the feature and its benefit</li>
-      </ul>
-    </div>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 5 — PRINCIPAL BEDROOM & ENSUITE
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page5-print.png" alt="">
-  <div class="content">
-    <!-- REPLACE: First floor section label and heading -->
-    <div class="section-label">First Floor</div>
-    <h2 class="section-heading">Rest &amp; Retreat</h2>
-    <div class="split" style="margin-bottom: 20px;">
-      <div>
-        <!-- REPLACE: Principal bedroom image -->
-        <img src="images/BEDROOM-PRINCIPAL.jpeg" alt="Principal bedroom">
-      </div>
-      <div>
-        <div class="ornamental-frame" style="text-align:center;">
-          <!-- REPLACE: Principal bedroom name and description -->
-          <h3 class="room-name" style="text-align:center">Principal Bedroom</h3>
-          <p class="body-text" style="text-align:center; margin-top: 8px;">
-            Principal bedroom description paragraph. Describe the room's size, aspect, views, dressing area or wardrobes, and ensuite bathroom facilities.
-          </p>
-        </div>
-      </div>
-    </div>
-    <!-- REPLACE: Three first-floor detail images — dressing room, ensuite, landing -->
-    <div class="img-grid-3">
-      <img src="images/DRESSING-ROOM.jpeg" alt="Dressing room">
-      <img src="images/ENSUITE.jpeg" alt="Ensuite bathroom">
-      <img src="images/LANDING.jpeg" alt="Landing">
-    </div>
-    <div class="divider"></div>
-    <div class="split">
-      <div>
-        <!-- REPLACE: Additional bedroom or flexible room name and description -->
-        <h3 class="room-name">Bedroom Four / Flexible Room</h3>
-        <p class="body-text">
-          Additional bedroom or flexible room description paragraph. Describe its current use, dimensions, natural light, and any notable features.
-        </p>
-      </div>
-      <div>
-        <!-- REPLACE: Additional bedroom image -->
-        <img src="images/BEDROOM-FLEXIBLE.jpeg" alt="Flexible room">
-      </div>
-    </div>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 6 — BEDROOMS & BATHROOMS
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page6-print.png" alt="">
-  <div class="content">
-    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px;">
-      <div>
-        <!-- REPLACE: Bedroom two name and description -->
-        <h3 class="room-name">Bedroom Two</h3>
-        <p class="body-text">Bedroom two description paragraph. Describe the room's size, outlook, fitted furniture, and current configuration.</p>
-      </div>
-      <div>
-        <!-- REPLACE: Bedroom three name and description -->
-        <h3 class="room-name">Bedroom Three</h3>
-        <p class="body-text">Bedroom three description paragraph. Describe the room's size, outlook, fitted furniture, and current configuration.</p>
-      </div>
-    </div>
-    <!-- REPLACE: Two bedroom images -->
-    <div class="img-grid-2">
-      <img src="images/BEDROOM-TWO.jpeg" alt="Bedroom two">
-      <img src="images/BEDROOM-THREE.jpeg" alt="Bedroom three">
-    </div>
-    <div class="divider"></div>
-    <!-- REPLACE: Bathrooms section label -->
-    <div class="section-label">Bathrooms</div>
-    <!-- REPLACE: Three bathroom images -->
-    <div class="img-grid-3">
-      <img src="images/BATHROOM-1.jpeg" alt="Family bathroom">
-      <img src="images/BATHROOM-2.jpeg" alt="Second bathroom">
-      <img src="images/CLOAKROOM.jpeg" alt="Ground floor cloakroom">
-    </div>
-    <!-- REPLACE: Bathrooms summary paragraph -->
-    <p class="body-text" style="margin-top: 8px;">
-      Bathrooms description paragraph. Describe the number of bathrooms, their key fittings, tiling, underfloor heating, mirrors, and overall style.
-    </p>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 7 — OUTSIDE / GARDEN
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page7-print.png" alt="">
-  <!-- ─── OUTSIDE ─── -->
-  <div class="content">
-    <!-- REPLACE: Full-width aerial or garden overview image -->
-    <div class="img-full">
-      <img src="images/AERIAL-PLAN.jpeg" alt="Aerial plan view of property" style="height:340px;">
-    </div>
-  </div>
-  <div class="content">
-    <!-- REPLACE: Outside section label and heading -->
-    <div class="section-label">Outside</div>
-    <h2 class="section-heading">Garden &amp; Terrace</h2>
-    <div class="split">
-      <div>
-        <!-- REPLACE: Garden description paragraph one — layout, planting, design -->
-        <p class="body-text">
-          Garden description paragraph one. Describe the overall layout, landscaping, lawn areas, planting, boundaries, and any design by a professional garden designer.
-        </p>
-        <!-- REPLACE: Garden description paragraph two — terraces, patios, parking -->
-        <p class="body-text">
-          Garden description paragraph two. Describe terraces, patios, seating areas, aspect, driveway, and parking arrangements.
-        </p>
-      </div>
-      <div>
-        <!-- REPLACE: Garden image -->
-        <img src="images/GARDEN-MAIN.jpeg" alt="Garden view">
-      </div>
-    </div>
-    <!-- REPLACE: Three garden/outside detail images -->
-    <div class="img-grid-3" style="margin-top:16px;">
-      <img src="images/GARDEN-1.jpeg" alt="Garden detail one">
-      <img src="images/GARDEN-2.jpeg" alt="Garden detail two">
-      <img src="images/GARDEN-3.jpeg" alt="Garden detail three">
-    </div>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 8 — FLOOR PLANS / KEY FEATURES / EPC
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page8-print.png" alt="">
-  <!-- ─── FLOOR PLAN ─── -->
-  <div class="content">
-    <div class="section-label">Floor Plans</div>
-    <h2 class="section-heading small">Specifications</h2>
-    <!-- REPLACE: Floor plan image -->
-    <div style="text-align:center; margin: 12px 0;">
-      <img src="images/FLOORPLAN.jpeg" alt="Floor plans" style="width:85%; border-radius:3px;">
-    </div>
-    <!-- REPLACE: Total floor area -->
-    <div style="font-family:var(--display); font-size:1.1rem; font-weight:400; color:var(--text); text-align:center; margin:12px 0;">
-      Total Floor Area: TBC sq.ft. (TBC sq.m.) approx.
-    </div>
-    <div style="font-size:0.5rem; color:var(--text-tertiary); text-align:center; line-height:1.5; max-width:480px; margin:0 auto;">
-      Whilst every attempt has been made to ensure the accuracy of the floor plans contained here, all measurements (including the placement of windows and doors) are approximate and no responsibility is taken for any error, omission or mis-statement. The plans are for illustrative purposes only and should not be used as such by any prospective purchaser.
-    </div>
-    <div class="divider gold" style="margin-top:20px;"></div>
-  </div>
-  <!-- ─── KEY FEATURES & EPC ─── -->
-  <div class="content">
-    <div class="section-label">Key Features</div>
-    <!-- REPLACE: Key features list — twelve headline selling points -->
-    <ul class="feature-list">
-      <li><strong>Number of bedrooms</strong> and configuration</li>
-      <li><strong>Number of bathrooms</strong> and additional WCs</li>
-      <li>Notable feature of the kitchen or dining space</li>
-      <li>Notable feature of the reception rooms</li>
-      <li>Notable feature of storage or dressing areas</li>
-      <li><strong>Energy or technology headline</strong></li>
-      <li>Notable feature of ventilation or insulation</li>
-      <li>Notable feature of recent renovation or condition</li>
-      <li>Notable feature of flooring or finishes</li>
-      <li>Notable feature of the garden or landscaping</li>
-      <li>Notable feature of parking or driveway</li>
-      <li>Notable feature of EPC or running costs</li>
-    </ul>
-    <!-- EPC horizontal footer bar -->
-    <!-- REPLACE: EPC current band — move the "current" class to the correct band letter -->
-    <div style="margin-top: 24px;">
-      <div class="divider"></div>
-      <div style="display:flex; align-items:center; gap:20px; margin-top:12px;">
-        <div class="epc-label" style="margin-bottom:0; white-space:nowrap;">Energy Performance Certificate</div>
-        <div style="flex:1;">
-          <div style="display:flex; gap:3px;">
-            <div class="epc-bar a" style="flex:1;margin:0;"><span>A</span></div>
-            <div class="epc-bar b" style="flex:1;margin:0;"><span>B</span></div>
-            <div class="epc-bar c" style="flex:1;margin:0;"><span>C</span></div>
-            <div class="epc-bar d current" style="flex:1;margin:0;"><span>D</span></div>
-            <div class="epc-bar e" style="flex:1;margin:0;"><span>E</span></div>
-            <div class="epc-bar f" style="flex:1;margin:0;"><span>F</span></div>
-            <div class="epc-bar g" style="flex:1;margin:0;"><span>G</span></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<!-- ════════════════════════════════════════════════════
-     PAGE 9 — MATERIAL INFORMATION
-     ════════════════════════════════════════════════════ -->
-<div class="page">
-  <img class="print-img" src="page9-print.png" alt="">
-  <!-- ─── MATERIAL INFORMATION ─── -->
-  <div class="content">
-    <div class="divider"></div>
-    <div class="section-label">Material Information</div>
-    <h2 class="section-heading small">Property Information</h2>
-    <p class="body-text" style="margin-bottom: 16px;">
-      The following information is 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.
-    </p>
-    <div class="mi-section">
-      <div class="mi-part-label">Part A — Material to All Transactions</div>
-      <!-- REPLACE: Part A material information values — update each mi-value to match the property -->
-      <div class="mi-grid">
-        <div class="mi-row">
-          <span class="mi-field">Asking Price</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Tenure</span>
-          <span class="mi-value">Freehold / Leasehold</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Council Tax Band</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Property Type</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Bedrooms</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Bathrooms</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Reception Rooms</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Total Floor Area</span>
-          <span class="mi-value">TBC sq.ft. / TBC sq.m.</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Electricity Supply</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Water Supply</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Sewerage</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Heating</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Broadband</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Mobile Signal</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Parking</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">EPC Rating</span>
-          <span class="mi-value">TBC</span>
-        </div>
-      </div>
-    </div>
-    <div class="divider"></div>
-    <div class="mi-section">
-      <div class="mi-part-label">Part B — Material Where Applicable</div>
-      <!-- REPLACE: Part B material information values — update each mi-value to match the property -->
-      <div class="mi-grid">
-        <div class="mi-row">
-          <span class="mi-field">Building Safety</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Restrictive Covenants</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Rights of Way</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Easements</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Listed Building</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Conservation Area</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Tree Preservation Orders</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Accessibility</span>
-          <span class="mi-value">TBC</span>
-        </div>
-      </div>
-    </div>
-    <div class="divider"></div>
-    <div class="mi-section">
-      <div class="mi-part-label">Part C — Additional Material Facts</div>
-      <!-- REPLACE: Part C material information values — update each mi-value to match the property -->
-      <div class="mi-grid">
-        <div class="mi-row">
-          <span class="mi-field">Flood Risk</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Coastal Erosion</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Planning Applications</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Construction</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Structural Issues</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Subsidence</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Damp</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Asbestos</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Japanese Knotweed</span>
-          <span class="mi-value">TBC</span>
-        </div>
-        <div class="mi-row">
-          <span class="mi-field">Mining Area</span>
-          <span class="mi-value">TBC</span>
-        </div>
-      </div>
-    </div>
-    <div class="callout primary" style="margin-top: 16px;">
-      <p>
-        <strong>Regulatory note:</strong> This information is provided in line with National Trading Standards guidance and the requirements of the Digital Markets, Competition and Consumers Act 2024 (DMCCA). Material information is information that the average consumer needs to make an informed transactional decision. The agent has made reasonable enquiries to verify this information but prospective purchasers should satisfy themselves as to its accuracy through their own legal and survey processes.
-      </p>
-    </div>
-  </div>
-</div><!-- .page 7 -->
-<!-- ════════════════════════════════════════════════════
-     PAGE 10 — BACK PAGE
-     ════════════════════════════════════════════════════ -->
-<div class="backpage">
-  <img class="print-img" src="backpage-print.png" alt="">
-  <!-- REPLACE: Back page background image — aerial or exterior shot -->
-  <div class="back-bg">
-    <img src="images/AERIAL-REAR.jpeg" alt="Aerial view of property">
-  </div>
-  <div class="back-inner">
-    <!-- REPLACE: Property logo — use property-specific logo or remove if not applicable -->
-    <img src="PROPERTY-LOGO-light.svg" alt="Property Name" style="width:160px; opacity:0.6; margin-bottom: 28px;">
-    <!-- REPLACE: Back page CTA heading -->
-    <div class="back-cta">Arrange a viewing of <em>Property Name</em></div>
-    <!-- REPLACE: Back page description — one paragraph encouraging a viewing -->
-    <p class="back-description">
-      Book a private viewing to experience this property for yourself. Replace with a short, inviting paragraph that highlights the key reasons to visit in person.
-    </p>
-    <div class="back-contact-label">Contact</div>
-    <div class="back-contact">
-      01279 600567<br>
-      sales@muvin.co.uk
-    </div>
-    <div style="font-size: 0.65rem; color: rgba(250,250,248,0.55); margin-top: 16px; line-height: 1.5; letter-spacing: 0.03em;">
-      25 Bell Street, Sawbridgeworth<br>
-      Hertfordshire CM21 9AR
-    </div>
-    <img src="muvin-light.png" alt="Muvin" style="width:90px; opacity:0.45; margin-top: 24px;">
-  </div>
-  <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. No person in this firm's employment has the authority to make or give any representation or warranty in respect of the property. All measurements are approximate and for guidance only. Floor plans are not to scale and are for guidance only. Photographs may have been taken with wide-angle lenses — room dimensions should be checked with the floor plans. No services, fixtures, fittings or appliances, including central heating, have been tested by the agent and therefore no guarantee can be given that they are in working order.
-  </div>
-</div>
-</body>
-</html>