npm - @rubytech/create-maxy-code - Versions diffs - 0.1.0 - Mend

@rubytech/create-maxy-code 0.1.0

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

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

@@ -0,0 +1,1288 @@
+<!--
+  ════════════════════════════════════════════════════════════════════════════
+  COMPANION LANDING PAGE — page.html · canonical reference template
+  ════════════════════════════════════════════════════════════════════════════
+  This file is the canonical starting point for the property micro-site that
+  ships inside <property>/output/web/ alongside brochure.html. Every property
+  brochure run that produces a web bundle MUST start by copying this file —
+  do NOT rebuild it from scratch from the SKILL.md prose. The prose
+  describes the spec; this file IS the spec.
+  SUBSTITUTION CONTRACT
+  ─────────────────────
+  Every property-specific value in this file is a {{ token }} placeholder.
+  There is no exemplar copy left to accidentally inherit. After substitution,
+  `grep "{{" output/web/page.html` must return ZERO matches — any remaining
+  {{ x }} is a bug.
+  The full token list (with source field, format, length, voice) lives in
+  references/placeholders.md, shared with brochure.html. Each <!- - REPLACE: - ->
+  inline annotation here gives the short version (what fills the token, how
+  long, what voice). Style guidance per section is in references/copy.md.
+  Contract:
+  1. Copy this file to <property>/output/web/page.html.
+  2. Substitute every {{ placeholder }} token from the master placeholders.md.
+  3. Update <title>, meta description, OG/Twitter image refs.
+  4. If a section does not apply (e.g. property has no garden complex), follow
+     the SKILL's "Page-count expansion / repurposing" guidance — repurpose the
+     section title and copy. Do NOT delete sections; the layout assumes the
+     full set.
+  Editorial decisions baked into this file (KEEP, do not re-derive):
+    - Drop cap: .body-block p:first-of-type::first-letter (Cormorant ink, 3.6em
+      float-left). Every body-block opens with one. Mirrors the brochure's
+      opener treatment.
+    - Hero: 3-slide Ken-Burns rotator on an 18s cycle, pure CSS, with reduced-
+      motion fallback. See .hero-stage / .hero-slide CSS comments.
+    - Mobile collapse: top-nav → hamburger drawer at ≤960px; hero stacks at
+      ≤760px; hero aspect 5/4 at ≤440px.
+    - Type system: Cormorant Garamond (display) + Lora (body serif) + Inter
+      (UI labels). DO NOT swap these per-brand — the page.html register is
+      tuned to the canonical premium tier; brand identity lives in the logo,
+      copy and brand-specific colour accents that may be added via :root
+      overrides if needed (rare).
+  Authoring note — keep the body of this docstring free of inner HTML
+  comment delimiters. HTML does not allow nested comments: an inner "- - >"
+  would terminate this outer comment early and the rest of these
+  instructions would render as visible text on the live page (the bug that
+  prompted this note). When referring to the inline REPLACE markers, use
+  prose ("REPLACE comment block") not the literal delimiter pair.
+  ════════════════════════════════════════════════════════════════════════════
+-->"
+  would terminate this outer comment early and the rest of these
+  instructions would render as visible text on the live page (the bug that
+  prompted this note). When referring to the inline REPLACE markers, use
+  prose ("REPLACE: comment block") not the literal "<!- - REPLACE: ... - ->"
+  delimiter pair.
+  ════════════════════════════════════════════════════════════════════════════
+-->
+<html lang="en-GB">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- REPLACE {{ page_title }}: "<Property name> · <street>, <locality> · For Sale".
+     Used as the browser tab title and search-result link. -->
+<title>{{ page_title }}</title>
+<!-- REPLACE {{ meta_description }}: single-sentence elevator pitch (25-45 words).
+     Same content as {{ backpage_tagline }} in the brochure; the two should mirror
+     each other. Used by social previews and search. -->
+<meta name="description" content="{{ meta_description }}">
+<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,400;0,500;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --paper: #FBF9F4;
+    --paper-2: #F4EFE5;
+    --ink: #0E1418;
+    --ink-2: #2A3036;
+    --slate: #5C6470;
+    --rule: rgba(14,20,24,0.14);
+    --rule-fine: #E2D5BD;
+    --gold: #7A6235;
+    --gold-soft: #A4884C;
+    --serif: 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
+    --body-serif: 'Lora', 'Source Serif Pro', Georgia, serif;
+    --sans: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
+  body {
+    font-family: var(--body-serif);
+    background: var(--paper);
+    color: var(--ink);
+    line-height: 1.65;
+  }
+  img { display: block; max-width: 100%; height: auto; }
+  a { color: inherit; }
+  /* ───────── TOP NAV ───────── */
+  .topnav {
+    position: relative;
+    z-index: 50;
+    height: 60px;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 32px;
+    background: var(--paper);
+    border-bottom: 1px solid var(--rule);
+  }
+  /* Hamburger button — hidden on desktop, visible at ≤ 960px */
+  .burger {
+    display: none;
+    background: transparent;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    margin-left: -10px;
+  }
+  .burger span {
+    display: block;
+    width: 22px;
+    height: 1.5px;
+    background: var(--ink);
+    margin: 4px 0;
+    transition: transform 250ms ease, opacity 250ms ease;
+  }
+  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
+  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
+  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
+  /* Drawer overlay — hidden by default, slides in from the right when opened */
+  .drawer {
+    position: fixed;
+    top: 0; right: 0; bottom: 0;
+    width: min(360px, 86vw);
+    background: var(--paper);
+    box-shadow: -2px 0 36px rgba(14,20,24,0.18);
+    transform: translateX(100%);
+    transition: transform 320ms ease;
+    z-index: 60;
+    padding: 64px 28px 28px;
+    display: flex; flex-direction: column; gap: 18px;
+    overflow-y: auto;
+  }
+  .drawer.open { transform: translateX(0); }
+  .drawer-close {
+    position: absolute;
+    top: 16px; right: 18px;
+    width: 36px; height: 36px;
+    background: transparent;
+    border: none;
+    font-size: 32px; line-height: 1;
+    color: var(--ink);
+    cursor: pointer;
+  }
+  .drawer-nav {
+    display: flex; flex-direction: column;
+    gap: 4px;
+  }
+  .drawer-nav a {
+    font-family: var(--sans);
+    font-size: 12px; font-weight: 500;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--ink-2);
+    text-decoration: none;
+    padding: 14px 0;
+    border-bottom: 1px solid var(--rule);
+  }
+  .drawer-nav a:hover { color: var(--gold); }
+  .drawer-nav a.drawer-cta {
+    margin-top: 12px;
+    padding: 14px 18px;
+    background: var(--ink);
+    color: var(--paper);
+    text-align: center;
+    border-bottom: none;
+  }
+  .drawer-nav a.drawer-cta:hover { background: var(--gold); color: var(--paper); }
+  .drawer-foot {
+    margin-top: auto;
+    padding-top: 24px;
+    border-top: 1px solid var(--rule);
+    font-family: var(--body-serif);
+    font-size: 13px;
+    color: var(--slate);
+    line-height: 1.55;
+  }
+  .drawer-foot a {
+    color: var(--ink-2);
+    text-decoration: underline;
+    text-decoration-color: rgba(122, 98, 53, 0.4);
+    text-underline-offset: 3px;
+    font-variant-numeric: tabular-nums;
+  }
+  /* Backdrop behind the drawer */
+  .drawer-backdrop {
+    position: fixed; inset: 0;
+    background: rgba(14,20,24,0.45);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 320ms ease;
+    z-index: 55;
+  }
+  .drawer-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  body.drawer-open { overflow: hidden; }
+  .topnav .left, .topnav .right {
+    display: flex; align-items: center; gap: 28px;
+    font-family: var(--sans);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--ink-2);
+  }
+  .topnav .left a, .topnav .right a { text-decoration: none; }
+  .topnav .left a:hover, .topnav .right a:hover { color: var(--gold); }
+  .topnav .center {
+    position: absolute; left: 50%; top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex; align-items: center;
+  }
+  .topnav .center img { height: 18px; width: auto; }
+  /* ───────── HERO — rotating Ken-Burns stage ─────────
+     Three slides cross-fade on an 18s cycle (each visible ~5.5s,
+     ~0.5s crossfade), each with a slow Ken-Burns pan/zoom on its
+     <img> so the camera "moves" while the slide is visible. Pure
+     CSS — no JS dependency, no layout reflow. */
+  .hero {
+    position: relative;
+    width: 100%;
+    height: 78vh;
+    min-height: 560px;
+    overflow: hidden;
+    background: var(--ink);
+  }
+  .hero-stage {
+    position: absolute; inset: 0;
+    overflow: hidden;
+  }
+  .hero-slide {
+    position: absolute; inset: 0;
+    opacity: 0;
+    will-change: opacity;
+  }
+  .hero-slide img {
+    width: 100%; height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+    transform-origin: 50% 50%;
+    will-change: transform;
+  }
+  /* Stagger: each slide's animation starts 6s apart so they
+     never overlap except during the 0.5s crossfade. */
+  .hero-slide.s1 { animation: heroFade 18s 0s   infinite; }
+  .hero-slide.s2 { animation: heroFade 18s 6s   infinite; }
+  .hero-slide.s3 { animation: heroFade 18s 12s  infinite; }
+  .hero-slide.s1 img { animation: heroKb1 18s 0s   infinite ease-out; }
+  .hero-slide.s2 img { animation: heroKb2 18s 6s   infinite ease-out; }
+  .hero-slide.s3 img { animation: heroKb3 18s 12s  infinite ease-out; }
+  @keyframes heroFade {
+    0%   { opacity: 0; }
+    3%   { opacity: 1; }   /* fade in over ~540ms */
+    33%  { opacity: 1; }   /* hold visible ~5.4s out of the 6s window */
+    36%  { opacity: 0; }   /* fade out over ~540ms */
+    100% { opacity: 0; }
+  }
+  /* Slide 1 — main exterior. Slow push-in from a slight pull-back. */
+  @keyframes heroKb1 {
+    0%   { transform: scale(1.04) translate(0%, 0%); }
+    36%  { transform: scale(1.16) translate(-1.2%, 0.4%); }
+    100% { transform: scale(1.16) translate(-1.2%, 0.4%); }
+  }
+  /* Slide 2 — interior moment. Pan right while pushing in. */
+  @keyframes heroKb2 {
+    0%   { transform: scale(1.06) translate(1.5%, 0%); }
+    36%  { transform: scale(1.18) translate(-1%, -0.8%); }
+    100% { transform: scale(1.18) translate(-1%, -0.8%); }
+  }
+  /* Slide 3 — garden / outdoor. Tilt up while pushing in. */
+  @keyframes heroKb3 {
+    0%   { transform: scale(1.05) translate(0%, 1%); }
+    36%  { transform: scale(1.18) translate(0.8%, -1.4%); }
+    100% { transform: scale(1.18) translate(0.8%, -1.4%); }
+  }
+  /* Reduced-motion users: hold slide 1, no crossfade, no zoom. */
+  @media (prefers-reduced-motion: reduce) {
+    .hero-slide.s1 { opacity: 1; animation: none; }
+    .hero-slide.s2, .hero-slide.s3 { opacity: 0; animation: none; }
+    .hero-slide img { animation: none; transform: none; }
+  }
+  .info-card {
+    position: absolute;
+    left: 6vw; bottom: 6vh;
+    background: rgba(252, 250, 246, 0.97);
+    padding: 20px 26px 22px;
+    width: 380px;
+    border-top: 1px solid var(--gold-soft);
+    box-shadow: 0 8px 36px rgba(14,20,24,0.14);
+  }
+  .info-card .tag {
+    display: inline-block;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: var(--gold);
+    margin-bottom: 12px;
+  }
+  .info-card .title {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 1.1;
+    color: var(--ink);
+    margin-bottom: 8px;
+  }
+  .info-card .address {
+    font-family: var(--body-serif);
+    font-size: 14px;
+    color: var(--ink-2);
+    line-height: 1.45;
+    margin-bottom: 14px;
+  }
+  .info-card .price {
+    font-family: var(--serif);
+    font-size: 19px;
+    color: var(--ink);
+    margin-bottom: 4px;
+    letter-spacing: 0.005em;
+  }
+  .info-card .price em { font-style: italic; color: var(--gold); }
+  .info-card .meta {
+    font-family: var(--body-serif);
+    font-size: 12.5px;
+    color: var(--slate);
+    line-height: 1.55;
+    margin-bottom: 14px;
+  }
+  .info-card .specs {
+    display: flex; flex-wrap: nowrap;
+    gap: 0;
+    padding: 10px 0;
+    margin-bottom: 14px;
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+    font-family: var(--sans);
+    font-size: 9.5px; font-weight: 500;
+    letter-spacing: 0.10em; text-transform: uppercase;
+    color: var(--ink-2);
+    font-variant-numeric: tabular-nums;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+  .info-card .specs span { white-space: nowrap; flex: 0 0 auto; }
+  .info-card .specs span + span::before {
+    content: "·";
+    color: var(--gold-soft);
+    margin: 0 8px;
+  }
+  .info-card .links {
+    display: flex; flex-wrap: nowrap; gap: 16px;
+    font-family: var(--sans);
+    font-size: 9.5px; font-weight: 500;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ink-2);
+    margin-bottom: 16px;
+  }
+  .info-card .links a {
+    text-decoration: none;
+    border-bottom: 1px solid var(--gold-soft);
+    padding-bottom: 2px;
+    white-space: nowrap;
+    transition: color 200ms;
+  }
+  .info-card .links a:hover { color: var(--gold); }
+  .info-card .cta {
+    display: block;
+    width: 100%;
+    padding: 12px 16px;
+    background: var(--ink);
+    color: var(--paper);
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 500;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    text-align: center;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: background 200ms;
+  }
+  .info-card .cta:hover { background: var(--gold); }
+  /* ───────── STICKY SUB-NAV (after scroll) ───────── */
+  .subnav {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    background: var(--paper);
+    border-bottom: 1px solid var(--rule);
+    padding: 14px 32px;
+    display: flex; align-items: center; justify-content: space-between;
+    transform: translateY(-100%);
+    transition: transform 300ms ease;
+  }
+  .subnav.visible { transform: translateY(0); }
+  .subnav .left {
+    font-family: var(--serif);
+    font-size: 17px;
+    color: var(--ink);
+  }
+  .subnav .left .price {
+    color: var(--slate);
+    font-size: 12px;
+    font-family: var(--sans);
+    letter-spacing: 0.12em;
+    margin-left: 14px;
+    font-variant-numeric: tabular-nums;
+  }
+  .subnav .right {
+    display: flex; align-items: center; gap: 16px;
+  }
+  .subnav .right a {
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 500;
+    letter-spacing: 0.22em; text-transform: uppercase;
+    color: var(--ink-2);
+    text-decoration: none;
+    padding: 6px 10px;
+    border: 1px solid var(--rule);
+  }
+  .subnav .right a:hover { background: var(--paper-2); }
+  .subnav .right a.cta {
+    background: var(--ink);
+    color: var(--paper);
+    border-color: var(--ink);
+  }
+  .subnav .right a.cta:hover { background: var(--gold); border-color: var(--gold); }
+  /* ───────── BODY SECTIONS ───────── */
+  main {
+    padding: 0;
+  }
+  .body-block {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 64px 32px 32px;
+  }
+  .body-block.short { padding-bottom: 16px; }
+  .body-block h2 {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 22px;
+    color: var(--ink);
+    margin-bottom: 18px;
+    letter-spacing: -0.005em;
+  }
+  .body-block h2::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 1px;
+    background: var(--gold-soft);
+    margin-bottom: 16px;
+  }
+  .body-block p {
+    font-family: var(--body-serif);
+    font-size: 15.5px;
+    line-height: 1.7;
+    color: var(--ink-2);
+    letter-spacing: 0.005em;
+  }
+  .body-block p + p { margin-top: 16px; }
+  .body-block p strong { color: var(--ink); font-weight: 500; }
+  .body-block p em { color: var(--gold); font-style: italic; }
+  /* Drop cap on the first paragraph of each body-block. Cormorant Garamond
+     to echo the section h2 voice; ink rather than gold so the existing gold
+     accent (eyebrows, em-text, hairlines) stays the only chromatic editorial
+     note on the page. KEEP — this is the signature editorial detail of the
+     landing page, mirroring the brochure's opener treatment. */
+  .body-block p:first-of-type::first-letter {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 3.6em;
+    line-height: 0.85;
+    float: left;
+    margin: 0.08em 0.12em -0.04em 0;
+    color: var(--ink);
+    letter-spacing: -0.02em;
+  }
+  .section-eyebrow {
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 600;
+    letter-spacing: 0.36em; text-transform: uppercase;
+    color: var(--gold);
+    margin-bottom: 14px;
+  }
+  /* ───────── PHOTO GRID ───────── */
+  .photo-grid {
+    max-width: 1100px;
+    margin: 32px auto;
+    padding: 0 32px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+  .photo-grid .cell {
+    position: relative;
+    overflow: hidden;
+    aspect-ratio: 4/3;
+    background: var(--paper-2);
+  }
+  .photo-grid .cell img {
+    width: 100%; height: 100%;
+    object-fit: cover;
+    transition: transform 600ms ease;
+  }
+  .photo-grid .cell:hover img { transform: scale(1.02); }
+  .photo-grid.tall .cell {
+    aspect-ratio: 4/5;
+  }
+  /* Wider single full-width image for atmospheric breaks */
+  .photo-full {
+    margin: 32px 0;
+  }
+  .photo-full img {
+    width: 100%;
+    height: auto;
+    max-height: 80vh;
+    object-fit: cover;
+  }
+  /* ───────── FLOOR PLAN ───────── */
+  .floorplan-section {
+    background: var(--paper-2);
+    padding: 80px 32px;
+    margin-top: 32px;
+  }
+  .floorplan-section .inner {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1.3fr 1fr;
+    gap: 48px;
+    align-items: start;
+  }
+  .floorplan-section img {
+    width: 100%;
+    height: auto;
+    background: white;
+    padding: 16px;
+  }
+  .floorplan-section .meta h2 {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 26px;
+    color: var(--ink);
+    margin-bottom: 8px;
+  }
+  .floorplan-section .meta .lead {
+    font-family: var(--body-serif);
+    font-size: 14px;
+    color: var(--ink-2);
+    margin-bottom: 24px;
+    line-height: 1.6;
+  }
+  .floorplan-section .areas {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px 18px;
+    border-top: 1px solid var(--rule);
+    padding-top: 20px;
+    font-variant-numeric: tabular-nums;
+  }
+  .floorplan-section .areas .row .k {
+    display: block;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--slate);
+    margin-bottom: 4px;
+  }
+  .floorplan-section .areas .row .v {
+    font-family: var(--serif);
+    font-size: 17px;
+    color: var(--ink);
+  }
+  .floorplan-section .areas .row .v em { font-style: italic; color: var(--gold); }
+  /* ───────── KEY FACTS / MATERIAL INFO ───────── */
+  .key-facts {
+    max-width: 1100px;
+    margin: 64px auto 32px;
+    padding: 0 32px;
+  }
+  .key-facts h2 {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 22px;
+    color: var(--ink);
+    margin-bottom: 24px;
+    text-align: center;
+  }
+  .key-facts h2::after {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 1px;
+    background: var(--gold-soft);
+    margin: 12px auto 0;
+  }
+  .key-facts .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 18px 36px;
+    font-variant-numeric: tabular-nums;
+  }
+  .key-facts .row {
+    border-bottom: 1px solid var(--rule);
+    padding: 12px 0 14px;
+  }
+  .key-facts .row .k {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--slate);
+    margin-bottom: 5px;
+  }
+  .key-facts .row .v {
+    font-family: var(--body-serif);
+    font-size: 14px;
+    color: var(--ink);
+  }
+  .key-facts .footnote {
+    grid-column: 1 / -1;
+    margin-top: 18px;
+    font-family: var(--body-serif);
+    font-style: italic;
+    font-size: 12px;
+    color: var(--slate);
+    text-align: center;
+  }
+  /* ───────── CTA STRIP ───────── */
+  .cta-strip {
+    background: var(--ink);
+    color: var(--paper);
+    text-align: center;
+    padding: 64px 32px;
+    margin-top: 64px;
+  }
+  .cta-strip h2 {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 32px;
+    margin-bottom: 28px;
+    color: var(--paper);
+  }
+  .cta-strip .cta-row {
+    display: flex; gap: 32px; justify-content: center; align-items: center;
+    flex-wrap: wrap;
+  }
+  .cta-strip .cta-row a {
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 500;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--paper);
+    text-decoration: none;
+    padding: 12px 22px;
+    border: 1px solid rgba(252,250,246,0.32);
+    transition: background 200ms, border-color 200ms;
+  }
+  .cta-strip .cta-row a:hover {
+    background: var(--gold);
+    border-color: var(--gold);
+  }
+  .cta-strip .cta-row a.solid {
+    background: var(--paper);
+    color: var(--ink);
+    border-color: var(--paper);
+  }
+  .cta-strip .cta-row a.solid:hover {
+    background: var(--gold);
+    color: var(--paper);
+    border-color: var(--gold);
+  }
+  /* ───────── FOOTER ───────── */
+  footer {
+    background: var(--paper);
+    padding: 48px 32px 32px;
+    border-top: 1px solid var(--rule);
+  }
+  footer .inner {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 32px;
+  }
+  footer .agent {
+    font-family: var(--body-serif);
+    font-size: 13px;
+    color: var(--ink-2);
+    line-height: 1.6;
+    max-width: 320px;
+  }
+  footer .agent .name {
+    font-family: var(--serif);
+    font-size: 17px;
+    color: var(--ink);
+    margin-bottom: 4px;
+  }
+  footer .agent .name em { font-style: italic; color: var(--gold); }
+  footer .agent .label {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: var(--slate);
+    margin-bottom: 8px;
+  }
+  footer .legal {
+    font-family: var(--body-serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--slate);
+    line-height: 1.55;
+    max-width: 600px;
+  }
+  footer .colophon {
+    width: 100%;
+    border-top: 1px solid var(--rule);
+    padding-top: 18px;
+    margin-top: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 500;
+    letter-spacing: 0.22em; text-transform: uppercase;
+    color: var(--slate);
+  }
+  footer .colophon img { height: 14px; width: auto; opacity: 0.75; }
+  /* ───────── RESPONSIVE ─────────
+     The desktop top-nav (deep-section links + centred logo +
+     utility links) needs ~1100 px to breathe. Below 960 px the
+     deep-section labels overlap the centred logo, so we collapse
+     the entire desktop nav into a hamburger-revealed drawer.
+     The hero overlay → vertical-stack rule kicks in slightly later
+     at 760 px (where the floating info-card starts to occlude
+     the rotator). */
+  @media (max-width: 960px) {
+    .burger { display: block; }
+    .topnav .left, .topnav .right { display: none; }
+    /* The centred logo stays — it's the only element left on the bar */
+    .topnav .center { left: auto; right: auto; transform: none; position: static; margin-left: auto; margin-right: auto; }
+  }
+  @media (max-width: 760px) {
+    .hero {
+      height: auto;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      background: var(--paper);
+    }
+    .hero-stage {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 4/3;
+      flex: 0 0 auto;
+      background: var(--ink);
+    }
+    .info-card {
+      position: static;
+      left: auto; right: auto; bottom: auto;
+      width: auto;
+      margin: 0;
+      padding: 24px 24px 28px;
+      box-shadow: none;
+      border-top: 1px solid var(--rule);
+      background: var(--paper);
+    }
+    .info-card .title { font-size: 30px; }
+    .info-card .specs { font-size: 10px; }
+    .info-card .links { font-size: 10px; }
+    .photo-grid { grid-template-columns: 1fr; gap: 12px; }
+    .floorplan-section .inner { grid-template-columns: 1fr; gap: 28px; }
+    .key-facts .grid { grid-template-columns: 1fr 1fr; }
+    .subnav .right a:not(.cta) { display: none; }
+    .body-block { padding: 48px 24px 24px; }
+    .topnav { padding: 0 18px; }
+    /* Footer colophon stacks on mobile: property line on its own row,
+       copyright on its own row beneath. Matches the rest of the mobile
+       stack pattern (every multi-column block becomes single-column). */
+    footer .colophon {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+    }
+  }
+  @media (max-width: 440px) {
+    .hero-stage { aspect-ratio: 5/4; }
+    .key-facts .grid { grid-template-columns: 1fr; }
+    .subnav .left .price { display: none; }
+  }
+</style>
+</head>
+<body>
+<!-- ════════════════ TOP NAV ════════════════ -->
+<nav class="topnav">
+  <button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="drawer">
+    <span></span><span></span><span></span>
+  </button>
+  <!-- REPLACE: Deep-section links — section names + #anchor IDs that match the
+       <article id="..."> blocks below. Keep the four-link rhythm; rename only
+       if the property's narrative arc differs from the canonical
+       (Story / The Home / The Garden / The Area). All four anchors are also
+       used in the drawer + sub-nav below. -->
+  <div class="left">
+    <a href="#story">{{ nav_section_1 }}</a>
+    <a href="#home">{{ nav_section_2 }}</a>
+    <a href="#garden">{{ nav_section_3 }}</a>
+    <a href="#area">{{ nav_section_4 }}</a>
+  </div>
+  <div class="center">
+    <!-- The brand DARK-art logo (placed on the warm-paper top-nav).
+         {{ brand_slug }} resolves to the agent's brand slug; the file is
+         <brand>-logo-dark.png per the brand-design SKILL convention. -->
+    <img src="images/{{ brand_slug }}-logo-dark.png" alt="{{ brand_name }}">
+  </div>
+  <!-- REPLACE: Utility links — Brochure (downloads the in-bundle PDF, named
+       {{ property_slug }}-brochure.pdf), Listing (the agent's live listing
+       URL), Enquire (mailto: agent). Three links, in that order. -->
+  <div class="right">
+    <a href="{{ property_slug }}-brochure.pdf" download>Brochure</a>
+    <a href="{{ listing_url }}" target="_blank">Listing</a>
+    <a href="mailto:{{ office_email }}">Enquire</a>
+  </div>
+</nav>
+<!-- Mobile drawer (revealed by the hamburger).
+     IMPORTANT: drawer must contain EVERY nav link the desktop has, PLUS the
+     extra utility links (Floor plan, Key facts, Watch video tour) and a CTA.
+     Mobile users get more navigation, not less. Order is: deep sections,
+     then utility links, then a closing CTA. -->
+<div class="drawer" id="drawer" aria-hidden="true">
+  <button class="drawer-close" aria-label="Close menu">&times;</button>
+  <!-- REPLACE: Drawer nav — same anchors as the desktop deep-links plus
+       the utility links + a closing CTA. Mobile users get MORE navigation,
+       not less. The "View on Brand" label uses the brand's name verbatim
+       ("View on Beacons", "View on Muvin", etc.). -->
+  <nav class="drawer-nav">
+    <a href="#story">{{ nav_section_1 }}</a>
+    <a href="#home">{{ nav_section_2 }}</a>
+    <a href="#garden">{{ nav_section_3 }}</a>
+    <a href="#area">{{ nav_section_4 }}</a>
+    <a href="#floorplan">Floor plan</a>
+    <a href="#facts">Key facts</a>
+    <a href="{{ property_slug }}-brochure.pdf" download>Download brochure</a>
+    <a href="{{ video_url }}" target="_blank">Watch video tour</a>
+    <a href="{{ listing_url }}" target="_blank">View on {{ brand_name }}</a>
+    <a href="mailto:{{ office_email }}?subject={{ email_subject_enquiry }}" class="drawer-cta">Enquire</a>
+  </nav>
+  <!-- REPLACE: Drawer foot — agent name, agency, branch, plus a tel: link.
+       {{ office_phone_tel }} is the international-format dialer link (e.g.
+       "+441873377575"); {{ office_phone }} is the display format. -->
+  <div class="drawer-foot">
+    {{ agent_first_name }} {{ agent_surname }} · {{ brand_name }} · {{ brand_town }}<br>
+    <a href="tel:{{ office_phone_tel }}">{{ office_phone }}</a>
+  </div>
+</div>
+<!-- ════════════════ STICKY SUB-NAV ════════════════ -->
+<!-- Revealed by the JS at the bottom of the page once the hero scrolls past.
+     Mirrors the hero info-card's three utility links plus a Request-viewing CTA. -->
+<nav class="subnav" id="subnav">
+  <!-- REPLACE: Sub-nav left — property name + price + postcode (compressed
+       summary of the hero info-card for the scrolled state). -->
+  <div class="left">
+    {{ property_name }}
+    <span class="price">{{ price_formatted }} · {{ postcode }}</span>
+  </div>
+  <!-- REPLACE: Sub-nav right — same utility links as the hero info-card.
+       Keep "Request viewing" as the rightmost CTA in solid ink. -->
+  <div class="right">
+    <a href="#floorplan">Floor plan</a>
+    <a href="{{ property_slug }}-brochure.pdf" download>Brochure</a>
+    <a href="{{ video_url }}" target="_blank">Video tour</a>
+    <a href="mailto:{{ office_email }}?subject={{ email_subject_viewing }}" class="cta">Request viewing</a>
+  </div>
+</nav>
+<!-- ════════════════ HERO ════════════════ -->
+<!-- 3-slide Ken-Burns rotator. Image filenames follow the convention
+     PROPERTY-SLUG-hero-N-<role>.webp (source-resolution, q88 — see SKILL
+     "Hero — rotating Ken-Burns stage"). Pick three different MOMENTS, not
+     three angles of the same shot:
+       Slide 1: main exterior (often the cover image — golden hour preferred)
+       Slide 2: principal interior (kitchen-dining, hearth, principal sitting)
+       Slide 3: garden / outdoor / aerial (different from slide 1 in subject) -->
+<section class="hero">
+  <!-- REPLACE three hero slides. Filename pattern:
+         {{ property_slug }}-hero-N-<role>.webp
+       Three DIFFERENT MOMENTS, not three angles of the same shot:
+         Slide 1: main exterior (often golden hour; usually the cover image)
+         Slide 2: principal interior (kitchen-dining, hearth, principal sitting)
+         Slide 3: garden / outdoor / aerial (different subject from slide 1)
+       Alt: property name + the moment captured. -->
+  <div class="hero-stage" aria-label="{{ property_name }} — three views" role="img">
+    <div class="hero-slide s1"><img src="images/{{ hero_1_src }}" alt="{{ hero_1_alt }}"></div>
+    <div class="hero-slide s2"><img src="images/{{ hero_2_src }}" alt="{{ hero_2_alt }}"></div>
+    <div class="hero-slide s3"><img src="images/{{ hero_3_src }}" alt="{{ hero_3_alt }}"></div>
+  </div>
+  <!-- REPLACE: Info-card — sits over the hero (desktop) or stacks under
+       (mobile). Substitute the title, address (two lines via <br>), price
+       (qualifier + amount), meta (tenure · year), four spec cells, three
+       utility links, and the request-viewing CTA. The specs row + links row
+       each MUST stay single-line — see copy.md "Stats rows". -->
+  <div class="info-card">
+    <span class="tag">{{ hero_tag }}</span>
+    <h1 class="title">{{ property_name }}</h1>
+    <div class="address">{{ address_line_1 }},<br>{{ locality }}, {{ county }} {{ postcode }}</div>
+    <div class="price">{{ price_qualifier }} <em>{{ price_formatted }}</em></div>
+    <div class="meta">{{ tenure }} · c.&nbsp;{{ year_built }}</div>
+    <div class="specs">
+      <span>{{ spec_beds }}</span>
+      <span>{{ spec_baths }}</span>
+      <span>{{ spec_area }}</span>
+      <span>{{ spec_plot }}</span>
+    </div>
+    <div class="links">
+      <a href="#floorplan">Floor plan</a>
+      <a href="{{ property_slug }}-brochure.pdf" download>Brochure</a>
+      <a href="{{ video_url }}" target="_blank">Video tour</a>
+    </div>
+    <a href="mailto:{{ office_email }}?subject={{ email_subject_viewing }}" class="cta">Request viewing</a>
+  </div>
+</section>
+<!-- ════════════════ MAIN BODY ════════════════ -->
+<main>
+  <!-- INTRO BLOCK -->
+  <!-- REPLACE: Story / "Of place & pedigree" section.
+       eyebrow → fixed phrase or property-specific synonym for the chapter
+       h2 → italic editorial headline summarising what this home is
+              (15-25 words; one declarative sentence; place + character)
+       p1, p2 → two paragraphs of opening editorial. Distil from seller
+              brief Q1/Q3/Q5/Q19/Q20. Para 1 short (3-4 sentences) so the
+              dropcap reads cleanly; para 2 longer (4-6 sentences). Close
+              para 2 with an italic phrase wrapped in <em>. -->
+  <article class="body-block" id="story">
+    <div class="section-eyebrow">{{ landing_story_eyebrow }}</div>
+    <h2>{{ landing_story_headline }}</h2>
+    <p>
+      {{ landing_story_para_1 }}
+    </p>
+    <p>
+      {{ landing_story_para_2 }}
+    </p>
+  </article>
+  <!-- PHOTO GRID 1 — Establishing exterior + drone -->
+  <!-- REPLACE four establishing cells — front elevation, drone aerial,
+       atmospheric exterior, garden-with-home-context. These set scale
+       before the body copy goes inside. -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/{{ landing_grid_1_src_a }}" alt="{{ landing_grid_1_alt_a }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_1_src_b }}" alt="{{ landing_grid_1_alt_b }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_1_src_c }}" alt="{{ landing_grid_1_alt_c }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_1_src_d }}" alt="{{ landing_grid_1_alt_d }}"></div>
+  </div>
+  <!-- THE HOME -->
+  <!-- REPLACE: The Home / "A home at ease" section.
+       Three paragraphs (each 4-6 sentences) covering:
+         (1) entrance hall + how the ground-floor plan opens / divides
+         (2) kitchen-dining detail — cabinetry, worksurfaces, appliances,
+             connection to utility / outdoor
+         (3) sitting room(s) + any signature interior feature (hearth,
+             orangery, conservatory, garden room). Use <strong> sparingly
+             for the two or three most distinctive features. Em-dashes
+             rare. Distil from seller brief Q5-Q7. -->
+  <article class="body-block" id="home">
+    <div class="section-eyebrow">{{ landing_home_eyebrow }}</div>
+    <h2>{{ landing_home_headline }}</h2>
+    <p>
+      {{ landing_home_para_1 }}
+    </p>
+    <p>
+      {{ landing_home_para_2 }}
+    </p>
+    <p>
+      {{ landing_home_para_3 }}
+    </p>
+  </article>
+  <!-- PHOTO GRID 2 — Kitchen & dining. REPLACE four cells from the
+       kitchen-breakfast-dining narrative: wide shot, island detail,
+       range/appliances, dining end. -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/{{ landing_grid_2_src_a }}" alt="{{ landing_grid_2_alt_a }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_2_src_b }}" alt="{{ landing_grid_2_alt_b }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_2_src_c }}" alt="{{ landing_grid_2_alt_c }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_2_src_d }}" alt="{{ landing_grid_2_alt_d }}"></div>
+  </div>
+  <!-- PHOTO GRID 3 — Reception & living. REPLACE four cells from the
+       reception narrative: signature hearth/sitting room, second reception,
+       hallway, third reception (orangery / day room / garden room). -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/{{ landing_grid_3_src_a }}" alt="{{ landing_grid_3_alt_a }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_3_src_b }}" alt="{{ landing_grid_3_alt_b }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_3_src_c }}" alt="{{ landing_grid_3_alt_c }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_3_src_d }}" alt="{{ landing_grid_3_alt_d }}"></div>
+  </div>
+  <!-- THE BEDROOMS -->
+  <!-- REPLACE: Bedrooms & baths section. Two paragraphs:
+         (1) the sleeping floor's character + the bedroom sequence (count,
+             layout, light, view)
+         (2) the principal suite + family bath split, and any standout
+             bathroom feature.
+       Distil from seller brief Q6/Q10. Avoid "house" — use "home". -->
+  <article class="body-block" id="bedrooms">
+    <div class="section-eyebrow">{{ landing_bedrooms_eyebrow }}</div>
+    <h2>{{ landing_bedrooms_headline }}</h2>
+    <p>
+      {{ landing_bedrooms_para_1 }}
+    </p>
+    <p>
+      {{ landing_bedrooms_para_2 }}
+    </p>
+  </article>
+  <!-- PHOTO GRID 4 — Bedrooms & baths. REPLACE four cells, mixing
+       bedrooms and bathrooms so the grid reads as the floor as a whole:
+       principal bedroom (hero), second/third double, family bathroom,
+       secondary bathroom. -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/{{ landing_grid_4_src_a }}" alt="{{ landing_grid_4_alt_a }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_4_src_b }}" alt="{{ landing_grid_4_alt_b }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_4_src_c }}" alt="{{ landing_grid_4_alt_c }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_4_src_d }}" alt="{{ landing_grid_4_alt_d }}"></div>
+  </div>
+  <!-- THE GARDEN -->
+  <!-- REPLACE: Garden / outdoor section. Two paragraphs:
+         (1) the principal outdoor features (terrace, pool, outdoor kitchen,
+             pergola, summerhouse — whatever the property actually has;
+             see structure.md "Distinguishing features clearly")
+         (2) the wider garden — lawns, planting, paddocks, screening, outlook.
+       Close para 2 with a one-clause italic if the brief supports one.
+       For properties without a garden complex, repurpose this section as
+       the property's single most distinctive outdoor feature page — keep
+       the eyebrow tied to the actual feature names, never "garden complex". -->
+  <article class="body-block" id="garden">
+    <div class="section-eyebrow">{{ landing_garden_eyebrow }}</div>
+    <h2>{{ landing_garden_headline }}</h2>
+    <p>
+      {{ landing_garden_para_1 }}
+    </p>
+    <p>
+      {{ landing_garden_para_2 }}
+    </p>
+  </article>
+  <!-- PHOTO GRID 5 — Garden complex. REPLACE four cells. For properties
+       without a true garden complex, use atmospheric shots: rear elevation,
+       garden-from-distance, twilight exterior, drone aerial of the plot. -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/{{ landing_grid_5_src_a }}" alt="{{ landing_grid_5_alt_a }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_5_src_b }}" alt="{{ landing_grid_5_alt_b }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_5_src_c }}" alt="{{ landing_grid_5_alt_c }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_5_src_d }}" alt="{{ landing_grid_5_alt_d }}"></div>
+  </div>
+  <!-- THE AREA -->
+  <!-- REPLACE: The Area section. Two paragraphs:
+         (1) administrative + transport + nearest amenities (LA, nearest
+             town, train/airport, schools)
+         (2) the qualitative setting — open countryside / village vibe /
+             urban edge / coastal — and signature walks/landmarks.
+       Distil from seller brief Q11-Q14. -->
+  <article class="body-block" id="area">
+    <div class="section-eyebrow">{{ landing_area_eyebrow }}</div>
+    <h2>{{ landing_area_headline }}</h2>
+    <p>
+      {{ landing_area_para_1 }}
+    </p>
+    <p>
+      {{ landing_area_para_2 }}
+    </p>
+  </article>
+  <!-- PHOTO GRID 6 — Closing photographic narrative. REPLACE four cells —
+       a wider aerial, an additional internal moment, an open-plan view,
+       and an atmospheric closing shot (often the cover hero re-used here
+       as a book-end). -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/{{ landing_grid_6_src_a }}" alt="{{ landing_grid_6_alt_a }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_6_src_b }}" alt="{{ landing_grid_6_alt_b }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_6_src_c }}" alt="{{ landing_grid_6_alt_c }}"></div>
+    <div class="cell"><img src="images/{{ landing_grid_6_src_d }}" alt="{{ landing_grid_6_alt_d }}"></div>
+  </div>
+  <!-- ════════════════ FLOOR PLAN ════════════════ -->
+  <section class="floorplan-section" id="floorplan">
+    <div class="inner">
+      <!-- Floor plan PNG — line-art, copied unchanged from the canonical
+           ({{ property_slug }}-floorplan.png). -->
+      <img src="images/{{ property_slug }}-floorplan.png" alt="The composite floor plan for {{ property_name }}">
+      <!-- REPLACE Floor plan meta — italic h2, lead sentence (total area +
+           plot), and the .areas grid. Six rows MAX. Drop any row that
+           doesn't apply (no acreage → drop Plot; no outbuildings → drop
+           those rows). Excluded outbuildings MUST be listed separately,
+           never folded into the principal home's sq ft. -->
+      <div class="meta">
+        <h2>{{ landing_floorplan_heading }}</h2>
+        <p class="lead">{{ landing_floorplan_lead }}</p>
+        <div class="areas">
+          <div class="row"><span class="k">{{ landing_floorplan_row_1_k }}</span><span class="v">{{ landing_floorplan_row_1_v }}</span></div>
+          <div class="row"><span class="k">{{ landing_floorplan_row_2_k }}</span><span class="v">{{ landing_floorplan_row_2_v }}</span></div>
+          <div class="row"><span class="k">{{ landing_floorplan_row_3_k }}</span><span class="v">{{ landing_floorplan_row_3_v }}</span></div>
+          <div class="row"><span class="k">{{ landing_floorplan_row_4_k }}</span><span class="v">{{ landing_floorplan_row_4_v }}</span></div>
+          <div class="row"><span class="k">{{ landing_floorplan_row_5_k }}</span><span class="v">{{ landing_floorplan_row_5_v }}</span></div>
+          <div class="row"><span class="k">EPC</span><span class="v">{{ epc_rating }}</span></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ════════════════ KEY FACTS ════════════════ -->
+  <!-- REPLACE Key facts — 15-row three-column grid mirroring the brochure's
+       Material Information Part A. Mark unknowns "TBC"; never invent. The
+       footnote is fixed boilerplate (DMCCA 2024 + CPR 2008) — keep. The
+       keys below match the brochure's mi-rows by intent; substitute the
+       values from property.json. -->
+  <section class="key-facts" id="facts">
+    <h2>Key facts</h2>
+    <div class="grid">
+      <div class="row"><div class="k">Tenure</div><div class="v">{{ mi_tenure }}</div></div>
+      <div class="row"><div class="k">Title</div><div class="v">{{ mi_title_number }}</div></div>
+      <div class="row"><div class="k">Council Tax</div><div class="v">{{ mi_council_tax }}</div></div>
+      <div class="row"><div class="k">Local Authority</div><div class="v">{{ mi_local_authority }}</div></div>
+      <div class="row"><div class="k">Heating</div><div class="v">{{ mi_heating }}</div></div>
+      <div class="row"><div class="k">Electricity</div><div class="v">{{ mi_electricity }}</div></div>
+      <div class="row"><div class="k">Water</div><div class="v">{{ mi_water }}</div></div>
+      <div class="row"><div class="k">Sewerage</div><div class="v">{{ mi_sewerage }}</div></div>
+      <div class="row"><div class="k">Broadband</div><div class="v">{{ mi_broadband }}</div></div>
+      <div class="row"><div class="k">Mobile</div><div class="v">{{ mi_mobile }}</div></div>
+      <div class="row"><div class="k">Flood Risk</div><div class="v">{{ landing_flood_summary }}</div></div>
+      <div class="row"><div class="k">Construction</div><div class="v">{{ mi_construction }}</div></div>
+      <div class="row"><div class="k">Conservation Area</div><div class="v">{{ mi_conservation }}</div></div>
+      <div class="row"><div class="k">Listed Building</div><div class="v">{{ mi_listed }}</div></div>
+      <div class="row"><div class="k">UPRN</div><div class="v">{{ mi_uprn }}</div></div>
+      <div class="footnote">Material information provided in accordance with the Consumer Protection from Unfair Trading Regulations 2008 and the Digital Markets, Competition and Consumers Act 2024.</div>
+    </div>
+  </section>
+</main>
+<!-- ════════════════ CTA STRIP ════════════════ -->
+<!-- REPLACE CTA strip — italic h2 (canonical "Interested? Let's talk." or
+     property-specific variant), three CTAs in order: tel:, mailto: enquiry,
+     mailto: request-viewing (the rightmost, .solid). Drop the tel: only if
+     the agent's number isn't published. -->
+<section class="cta-strip">
+  <h2>{{ landing_cta_headline }}</h2>
+  <div class="cta-row">
+    <a href="tel:{{ office_phone_tel }}">{{ office_phone }}</a>
+    <a href="mailto:{{ office_email }}?subject={{ email_subject_enquiry }}">{{ office_email }}</a>
+    <a href="mailto:{{ office_email }}?subject={{ email_subject_viewing }}" class="solid">Request viewing</a>
+  </div>
+</section>
+<!-- ════════════════ FOOTER ════════════════ -->
+<!-- REPLACE Footer — agent block (label, name with first name in <em>,
+     agency · branch + address + tel/email), legal disclaimer, colophon.
+     Disclaimer is mostly boilerplate; keep the CGI/AI sentence if any
+     image in the brochure was AI-staged. -->
+<footer>
+  <div class="inner">
+    <div class="agent">
+      <div class="label">The Agent</div>
+      <div class="name"><em>{{ agent_first_name }}</em> {{ agent_surname }}</div>
+      {{ brand_name }} · {{ brand_town }}<br>
+      {{ office_address_line_1 }}<br>
+      {{ office_address_line_2 }}<br>
+      {{ office_phone }} · {{ office_email }}
+    </div>
+    <p class="legal">
+      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 are drawn to indicative scale. Some images may include CGI or AI enhancements for illustrative purposes.
+    </p>
+    <div class="colophon">
+      <span>{{ property_name }} · {{ address_line_1 }}, {{ locality }}</span>
+      <span>© {{ brand_year }} {{ brand_name }}</span>
+    </div>
+  </div>
+</footer>
+<script>
+  // Show sticky sub-nav after scrolling past the hero
+  (function() {
+    const subnav = document.getElementById('subnav');
+    const hero = document.querySelector('.hero');
+    function update() {
+      const heroBottom = hero.getBoundingClientRect().bottom;
+      if (heroBottom < 0) subnav.classList.add('visible');
+      else subnav.classList.remove('visible');
+    }
+    window.addEventListener('scroll', update, { passive: true });
+    update();
+  })();
+  // Hamburger / drawer
+  (function() {
+    const burger = document.querySelector('.burger');
+    const drawer = document.getElementById('drawer');
+    if (!burger || !drawer) return;
+    // Inject backdrop sibling (created lazily so the markup stays clean)
+    const backdrop = document.createElement('div');
+    backdrop.className = 'drawer-backdrop';
+    document.body.appendChild(backdrop);
+    function open() {
+      drawer.classList.add('open');
+      backdrop.classList.add('open');
+      document.body.classList.add('drawer-open');
+      burger.setAttribute('aria-expanded', 'true');
+      drawer.setAttribute('aria-hidden', 'false');
+    }
+    function close() {
+      drawer.classList.remove('open');
+      backdrop.classList.remove('open');
+      document.body.classList.remove('drawer-open');
+      burger.setAttribute('aria-expanded', 'false');
+      drawer.setAttribute('aria-hidden', 'true');
+    }
+    burger.addEventListener('click', () => {
+      drawer.classList.contains('open') ? close() : open();
+    });
+    backdrop.addEventListener('click', close);
+    document.querySelector('.drawer-close').addEventListener('click', close);
+    // Close on link click (so clicking a section link also closes the drawer)
+    drawer.querySelectorAll('a').forEach(a => a.addEventListener('click', close));
+    // Close on Escape
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape' && drawer.classList.contains('open')) close();
+    });
+  })();
+</script>
+</body>
+</html>