npm - @rubytech/create-maxy-code - Versions diffs - 0.1.398 → 0.1.400 - Mend

@rubytech/create-maxy-code 0.1.398 → 0.1.400

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

package/payload/platform/plugins/web-designer/skills/web-design/templates/index.html ADDED Viewed

@@ -0,0 +1,1004 @@
+<!DOCTYPE html>
+<html lang="{{ PAGE_LANG }}">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ COMPANY_NAME }} · {{ SECTOR_LABEL }} · Est. {{ ESTABLISHED_YEAR }} · {{ REGION }}</title>
+<meta name="description" content="{{ META_DESCRIPTION }}">
+<link rel="canonical" href="{{ WEBSITE_URL }}">
+<link rel="icon" href="favicon.png" type="image/png">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="{{ COMPANY_LEGAL_NAME }}">
+<meta property="og:title" content="{{ COMPANY_NAME }} · {{ SECTOR_LABEL }} · Est. {{ ESTABLISHED_YEAR }} · {{ REGION }}">
+<meta property="og:description" content="{{ META_DESCRIPTION }}">
+<meta property="og:url" content="{{ WEBSITE_URL }}">
+<meta property="og:image" content="{{ WEBSITE_URL }}socials/og-landscape-main.jpg">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="628">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ COMPANY_NAME }} · {{ SECTOR_LABEL }} · Est. {{ ESTABLISHED_YEAR }}">
+<meta name="twitter:description" content="{{ META_DESCRIPTION_SHORT }}">
+<meta name="twitter:image" content="{{ WEBSITE_URL }}socials/og-landscape-main.jpg">
+<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;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    /* Brand tokens — substituted per client by the brand-extract step.
+       Names are stable so all component CSS resolves regardless of brand. */
+    --paper:      {{ PAPER_100 }};   /* paper-100 · white surface (dominant body) */
+    --paper-2:    {{ PAPER_200 }};   /* paper-200 · page-bg tint (alternating bands, image cells, hover) */
+    --ink:        {{ INK_900 }};   /* ink-900 · primary text, headings, dark surfaces */
+    --ink-2:      {{ INK_700 }};   /* ink-700 · secondary text */
+    --slate:      {{ INK_400 }};   /* ink-400 · muted / captions */
+    --rule:       {{ RULE_100 }};   /* rule-100 · borders / dividers */
+    --rule-fine:  {{ RULE_100 }};
+    --gold:       {{ ACCENT_TEXT }};   /* copper, deepened for legible accent text (eyebrows, links, em) */
+    --gold-soft:  {{ ACCENT }};   /* brand accent — decorative tone */
+    --copper:     {{ ACCENT }};   /* brand accent */
+    --copper-soft:{{ ACCENT_SOFT }};   /* soft tint behind accent text (tag chip, quote ground) */
+    --brand-grey: {{ BRAND_GREY }};   /* {{ COMPANY_SHORT }} monogram / wordmark grey */
+    --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: 112px;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 32px;
+    background: var(--paper);
+    border-bottom: 1px solid var(--rule);
+  }
+  .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 {
+    position: fixed; top: 0; right: 0; bottom: 0;
+    width: min(360px, 86vw);
+    background: var(--paper);
+    box-shadow: -2px 0 36px rgba(42,45,56,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(--copper); color: #fff; }
+  .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(232,146,78,0.5); text-underline-offset: 3px;
+    font-variant-numeric: tabular-nums;
+  }
+  .drawer-backdrop {
+    position: fixed; inset: 0; background: rgba(42,45,56,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: 26px;
+    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: 84px; width: auto; }
+  /* ───────── HERO — 10-slide rotator with Ken-Burns (JS-driven .active) ───────── */
+  .hero {
+    position: relative; width: 100%; height: 80vh; min-height: 580px;
+    overflow: hidden; background: var(--ink);
+  }
+  .hero-stage { position: absolute; inset: 0; overflow: hidden; }
+  .hero-slide {
+    position: absolute; inset: 0; opacity: 0;
+    transition: opacity 1000ms ease; will-change: opacity;
+  }
+  .hero-slide.active { opacity: 1; }
+  .hero-slide img {
+    width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
+    transform: scale(1.05); transform-origin: 50% 50%; will-change: transform;
+  }
+  /* the visible slide gets a slow push-in for the time it is on screen */
+  .hero-slide.active img { animation: heroKb 7s ease-out forwards; }
+  @keyframes heroKb { from { transform: scale(1.05); } to { transform: scale(1.16); } }
+  /* subtle scrim so the info-card edge reads against any slide */
+  .hero::after {
+    content: ''; position: absolute; inset: 0; pointer-events: none;
+    background: linear-gradient(90deg, rgba(42,45,56,0.34) 0%, rgba(42,45,56,0.05) 42%, rgba(42,45,56,0) 70%);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hero-slide { transition: none; }
+    .hero-slide.active img { animation: none; transform: none; }
+  }
+  .info-card {
+    position: absolute; left: 6vw; bottom: 7vh; z-index: 2;
+    background: rgba(255, 255, 255, 0.97);
+    padding: 22px 28px 24px; width: 392px;
+    border-top: 3px solid var(--copper);
+    box-shadow: 0 8px 36px rgba(42,45,56,0.20);
+  }
+  .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: 36px; line-height: 1.04; color: var(--ink); margin-bottom: 10px;
+  }
+  .info-card .address {
+    font-family: var(--body-serif); font-size: 14px; color: var(--ink-2);
+    line-height: 1.5; margin-bottom: 14px;
+  }
+  .info-card .tagline {
+    font-family: var(--serif); font-style: italic; font-size: 20px;
+    color: var(--gold); margin-bottom: 4px; letter-spacing: 0.005em;
+  }
+  .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: 9px; font-weight: 600;
+    letter-spacing: 0.08em; 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(--copper); margin: 0 7px; }
+  .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: 13px 16px;
+    background: var(--ink); color: var(--paper);
+    font-family: var(--sans); font-size: 11px; font-weight: 500;
+    letter-spacing: 0.26em; text-transform: uppercase; text-align: center;
+    text-decoration: none; border: none; cursor: pointer; transition: background 200ms;
+  }
+  .info-card .cta:hover { background: var(--copper); }
+  /* ───────── STICKY SUB-NAV ───────── */
+  .subnav {
+    /* fixed (not sticky): a reveal-on-scroll bar. position:fixed + translateY(-100%)
+       moves it genuinely above the viewport, so there is nothing to overlap. This
+       also avoids the Safari/WebKit bug where transform on a sticky element promotes
+       it to its own compositing layer and breaks the z-index overlap-hide. */
+    position: fixed; top: 0; left: 0; right: 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: 18px; color: var(--ink); }
+  .subnav .left .price {
+    color: var(--slate); font-size: 11px; font-family: var(--sans);
+    letter-spacing: 0.16em; text-transform: uppercase; margin-left: 14px;
+  }
+  .subnav .right { display: flex; align-items: center; gap: 14px; }
+  .subnav .right a {
+    font-family: var(--sans); font-size: 10px; font-weight: 500;
+    letter-spacing: 0.20em; 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(--copper); border-color: var(--copper); }
+  /* ───────── BODY SECTIONS ───────── */
+  .body-block { max-width: 720px; margin: 0 auto; padding: 72px 32px 28px; }
+  .body-block.short { padding-bottom: 16px; }
+  .body-block h2 {
+    font-family: var(--serif); font-style: italic; font-weight: 400;
+    font-size: 27px; line-height: 1.2; color: var(--ink); margin-bottom: 18px; letter-spacing: -0.005em;
+  }
+  .body-block h2::before {
+    content: ''; display: block; width: 40px; height: 2px;
+    background: var(--copper); margin-bottom: 18px;
+  }
+  .body-block p {
+    font-family: var(--body-serif); font-size: 15.5px; line-height: 1.75;
+    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; }
+  .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.03); }
+  .photo-full { margin: 36px 0; }
+  .photo-full img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
+  /* ───────── TESTIMONIAL BAND (repurposed feature band) ───────── */
+  .testimonial { background: var(--ink); color: var(--paper); padding: 84px 32px; margin-top: 40px; }
+  .testimonial .inner {
+    max-width: 1040px; margin: 0 auto;
+    display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center;
+  }
+  .testimonial .home-img img {
+    width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
+    box-shadow: 0 16px 48px rgba(0,0,0,0.38); border-top: 3px solid var(--copper);
+  }
+  .testimonial .person {
+    display: flex; align-items: center; gap: 14px;
+    margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.18);
+  }
+  .testimonial .person img {
+    width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
+    object-position: 50% 35%; flex: 0 0 auto; border: 2px solid var(--copper);
+  }
+  .testimonial .person .who { display: flex; flex-direction: column; line-height: 1.25; }
+  .testimonial .person .pn { font-family: var(--serif); font-style: italic; font-size: 20px; color: #fff; }
+  .testimonial .person .pr {
+    font-family: var(--sans); font-size: 10px; font-weight: 600;
+    letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); margin-top: 3px;
+  }
+  .testimonial .meta .eyebrow {
+    font-family: var(--sans); font-size: 10px; font-weight: 600;
+    letter-spacing: 0.36em; text-transform: uppercase; color: var(--copper); margin-bottom: 20px;
+  }
+  .testimonial blockquote {
+    font-family: var(--serif); font-style: italic; font-weight: 400;
+    font-size: 27px; line-height: 1.34; color: var(--paper); margin: 0 0 22px;
+  }
+  .testimonial blockquote .hl { color: var(--copper); }
+  .testimonial .attrib {
+    font-family: var(--sans); font-size: 11px; font-weight: 500;
+    letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72);
+  }
+  .testimonial .attrib span { color: var(--copper); }
+  /* ───────── FOUNDER ───────── */
+  .founder { background: var(--paper-2); padding: 84px 32px; }
+  .founder .inner {
+    max-width: 1100px; margin: 0 auto;
+    display: grid; grid-template-columns: 0.8fr 1fr; gap: 56px; align-items: center;
+  }
+  .founder .portrait img {
+    width: 100%; max-width: 420px; height: auto; display: block;
+    box-shadow: 0 16px 48px rgba(42,45,56,0.22); border-top: 3px solid var(--copper);
+  }
+  .founder .portrait .cap {
+    display: block; margin-top: 12px; font-family: var(--sans);
+    font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-grey);
+  }
+  .founder .words h2 {
+    font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--ink); margin-bottom: 18px;
+  }
+  .founder .words h2::before { content: ''; display: block; width: 40px; height: 2px; background: var(--copper); margin-bottom: 18px; }
+  .founder .words p { font-family: var(--body-serif); font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
+  .founder .words p + p { margin-top: 14px; }
+  .founder .words blockquote {
+    font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4;
+    color: var(--ink); margin: 22px 0; padding-left: 20px; border-left: 3px solid var(--copper);
+  }
+  .founder .words .ethos { font-family: var(--body-serif); font-style: italic; font-size: 14.5px; color: var(--slate); }
+  .founder-extra {
+    max-width: 1100px; margin: 44px auto 0;
+    display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px;
+    align-items: end;
+  }
+  .founder-extra figure { margin: 0; display: flex; flex-direction: column; }
+  .founder-extra img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
+  .founder-extra figcaption { margin-top: 10px; font-family: var(--body-serif); font-style: italic; font-size: 12.5px; color: var(--slate); }
+  .site-updates { max-width: 1100px; margin: 56px auto 0; }
+  .site-updates .eyebrow {
+    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.36em;
+    text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 24px;
+  }
+  .site-updates .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+  .site-updates .card {
+    background: var(--paper); border: 1px solid var(--rule); padding: 24px 24px 26px;
+    display: flex; flex-direction: column;
+  }
+  .site-updates .card .loc {
+    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
+    text-transform: uppercase; color: var(--copper); margin-bottom: 10px;
+  }
+  .site-updates .card p {
+    font-family: var(--body-serif); font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
+    margin-top: auto;
+  }
+  /* ───────── SERVICES ───────── */
+  .services { max-width: 1100px; margin: 76px auto 32px; padding: 0 32px; }
+  .services h2 {
+    font-family: var(--serif); font-style: italic; font-size: 27px; color: var(--ink);
+    margin-bottom: 8px; text-align: center;
+  }
+  .services .lede {
+    text-align: center; font-family: var(--body-serif); font-size: 14.5px;
+    color: var(--ink-2); max-width: 560px; margin: 0 auto 36px;
+  }
+  .services h2::after {
+    content: ''; display: block; width: 40px; height: 2px; background: var(--copper); margin: 14px auto 0;
+  }
+  .services .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
+  .services .svc { background: var(--paper); padding: 30px 26px 32px; }
+  .services .svc .num {
+    font-family: var(--sans); font-size: 10px; font-weight: 600;
+    letter-spacing: 0.28em; color: var(--copper); margin-bottom: 14px;
+  }
+  .services .svc h3 {
+    font-family: var(--serif); font-style: italic; font-weight: 500;
+    font-size: 21px; color: var(--ink); margin-bottom: 10px;
+  }
+  .services .svc p { font-family: var(--body-serif); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
+  /* ───────── KEY FACTS ───────── */
+  .key-facts { max-width: 1100px; margin: 76px auto 32px; padding: 0 32px; }
+  .key-facts h2 {
+    font-family: var(--serif); font-style: italic; font-size: 27px; color: var(--ink);
+    margin-bottom: 24px; text-align: center;
+  }
+  .key-facts h2::after {
+    content: ''; display: block; width: 40px; height: 2px; background: var(--copper); margin: 14px 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: 14.5px; 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;
+  }
+  /* ───────── SCROLL TO TOP ───────── */
+  .to-top {
+    position: fixed; right: 26px; bottom: 26px; z-index: 45;
+    width: 48px; height: 48px; border-radius: 50%;
+    background: var(--ink); color: #fff; border: none; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 6px 22px rgba(42,45,56,0.30);
+    opacity: 0; visibility: hidden; transform: translateY(10px);
+    transition: opacity 240ms ease, transform 240ms ease, visibility 240ms, background 200ms;
+  }
+  .to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
+  .to-top:hover { background: var(--copper); }
+  .to-top svg { width: 18px; height: 18px; display: block; }
+  @media (max-width: 760px) { .to-top { right: 16px; bottom: 16px; } }
+  /* ───────── FAQ ───────── */
+  .faq { max-width: 760px; margin: 76px auto 16px; padding: 0 32px; }
+  .faq > h2 {
+    font-family: var(--serif); font-style: italic; font-size: 27px; color: var(--ink);
+    margin-bottom: 28px; text-align: center;
+  }
+  .faq > h2::after { content: ''; display: block; width: 40px; height: 2px; background: var(--copper); margin: 14px auto 0; }
+  .faq .qa { border-top: 1px solid var(--rule); padding: 22px 0; }
+  .faq .qa:last-child { border-bottom: 1px solid var(--rule); }
+  .faq .qa h3 {
+    font-family: var(--serif); font-style: italic; font-weight: 500;
+    font-size: 20px; color: var(--ink); margin-bottom: 8px;
+  }
+  .faq .qa p { font-family: var(--body-serif); font-size: 15px; line-height: 1.7; color: var(--ink-2); }
+  /* ───────── CTA STRIP ───────── */
+  .cta-strip { background: var(--copper); color: #fff; text-align: center; padding: 72px 32px; margin-top: 72px; }
+  .cta-strip .eyebrow {
+    font-family: var(--sans); font-size: 10px; font-weight: 600;
+    letter-spacing: 0.36em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 16px;
+  }
+  .cta-strip h2 {
+    font-family: var(--serif); font-style: italic; font-weight: 400;
+    font-size: 38px; margin-bottom: 30px; color: #fff;
+  }
+  .cta-strip .cta-row { display: flex; gap: 18px; 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.24em; text-transform: uppercase; color: #fff; text-decoration: none;
+    padding: 13px 24px; border: 1px solid rgba(255,255,255,0.55); transition: background 200ms, color 200ms, border-color 200ms;
+    font-variant-numeric: tabular-nums;
+  }
+  .cta-strip .cta-row a:hover { background: rgba(255,255,255,0.14); }
+  .cta-strip .cta-row a.solid { background: var(--ink); color: #fff; border-color: var(--ink); }
+  .cta-strip .cta-row a.solid:hover { background: #fff; color: var(--ink); border-color: #fff; }
+  /* ───────── FOOTER ───────── */
+  footer { background: var(--paper); padding: 56px 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: 40px;
+  }
+  footer .agent { font-family: var(--body-serif); font-size: 13.5px; color: var(--ink-2); line-height: 1.7; max-width: 320px; }
+  footer .agent .name { font-family: var(--serif); font-size: 19px; 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: 10px;
+  }
+  footer .agent a {
+    color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(232,146,78,0.5);
+    text-underline-offset: 3px; font-variant-numeric: tabular-nums;
+  }
+  footer .socials { display: flex; gap: 18px; margin-top: 14px; }
+  footer .socials a {
+    font-family: var(--sans); font-size: 10px; font-weight: 600;
+    letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-grey); text-decoration: none;
+  }
+  footer .socials a:hover { color: var(--gold); }
+  footer .legal {
+    font-family: var(--body-serif); font-style: italic; font-size: 11.5px;
+    color: var(--slate); line-height: 1.6; max-width: 560px;
+    align-self: flex-end;
+  }
+  footer .colophon {
+    width: 100%; border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 28px;
+    display: flex; justify-content: space-between; align-items: center;
+    font-family: var(--sans); font-size: 10px; font-weight: 500;
+    letter-spacing: 0.20em; text-transform: uppercase; color: var(--slate);
+  }
+  footer .colophon img { height: 60px; width: auto; opacity: 0.9; }
+  /* ───────── RESPONSIVE ───────── */
+  /* Nav collapses to a hamburger early: a wide centred logo lockup needs room,
+     so the deep links would otherwise collide with it well above 960px. Tune this
+     width to the logo's rendered width if the lockup is much narrower or wider. */
+  @media (max-width: 1240px) {
+    .burger { display: block; }
+    .topnav .left, .topnav .right { display: none; }
+    .topnav .center { left: auto; right: auto; transform: none; position: static; margin-left: auto; margin-right: auto; }
+  }
+  @media (max-width: 960px) {
+    .testimonial .inner { grid-template-columns: 1fr; gap: 36px; }
+    .testimonial .home-img { max-width: 460px; margin: 0 auto; }
+    .services .grid { grid-template-columns: 1fr 1fr; }
+    .founder .inner { grid-template-columns: 1fr; gap: 32px; }
+    .founder .portrait img { max-width: 360px; margin: 0 auto; }
+    .site-updates .grid { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 760px) {
+    .hero { height: auto; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
+    .hero::after { display: none; }
+    .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: 26px 24px 28px; box-shadow: none; border-top: 3px solid var(--copper); background: var(--paper);
+    }
+    .info-card .title { font-size: 32px; }
+    .info-card .specs { font-size: 9px; }
+    .info-card .links { font-size: 10px; }
+    .photo-grid { grid-template-columns: 1fr; gap: 12px; }
+    .key-facts .grid { grid-template-columns: 1fr 1fr; }
+    .subnav .right a:not(.cta) { display: none; }
+    .body-block { padding: 52px 24px 24px; }
+    .topnav { padding: 0 18px; height: 88px; }
+    .topnav .center img { height: 60px; }
+    .testimonial { padding: 60px 24px; }
+    .testimonial blockquote { font-size: 23px; }
+    .founder { padding: 56px 24px; }
+    .founder-extra { grid-template-columns: 1fr; }
+    .cta-strip h2 { font-size: 30px; }
+    footer .colophon { flex-direction: column; align-items: flex-start; gap: 12px; }
+  }
+  @media (max-width: 440px) {
+    .hero-stage { aspect-ratio: 5/4; }
+    .key-facts .grid { grid-template-columns: 1fr; }
+    .services .grid { grid-template-columns: 1fr; }
+    .subnav .left .price { display: none; }
+  }
+</style>
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "{{ SCHEMA_TYPE }}",
+  "name": "{{ COMPANY_NAME }}",
+  "legalName": "{{ COMPANY_LEGAL_NAME }}",
+  "url": "{{ WEBSITE_URL }}",
+  "image": "{{ WEBSITE_URL }}images/hero-01.webp",
+  "logo": "{{ WEBSITE_URL }}images/logo.png",
+  "slogan": "{{ TAGLINE }}",
+  "description": "{{ SCHEMA_DESCRIPTION }}",
+  "foundingDate": "{{ ESTABLISHED_YEAR }}",
+  "telephone": "{{ PHONE_INTL }}",
+  "email": "{{ EMAIL }}",
+  "identifier": { "@type": "PropertyValue", "name": "{{ COMPANY_NUMBER_LABEL }}", "value": "{{ COMPANY_NUMBER }}" },
+  "employee": { "@type": "Person", "name": "{{ FOUNDER_NAME }}" },
+  "address": {
+    "@type": "PostalAddress",
+    "streetAddress": "{{ STREET_ADDRESS }}",
+    "addressLocality": "{{ POST_TOWN }}",
+    "addressRegion": "{{ COUNTY }}",
+    "postalCode": "{{ POSTCODE }}",
+    "addressCountry": "{{ COUNTRY_CODE }}"
+  },
+  "areaServed": [
+    { "@type": "AdministrativeArea", "name": "{{ COUNTY }}" },
+    { "@type": "AdministrativeArea", "name": "{{ REGION_2 }}" }
+  ],
+  "sameAs": [
+    "{{ FACEBOOK_URL }}",
+    "{{ INSTAGRAM_URL }}",
+    "{{ TIKTOK_URL }}"
+  ],
+  "knowsAbout": ["{{ SERVICE_1_NAME }}", "{{ SERVICE_2_NAME }}", "{{ SERVICE_3_NAME }}", "{{ SERVICE_4_NAME }}", "{{ SERVICE_5_NAME }}", "{{ SERVICE_6_NAME }}"],
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "{{ OFFER_CATALOG_NAME }}",
+    "itemListElement": [
+      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "{{ SERVICE_1_NAME }}", "description": "{{ SERVICE_1_DESC }}" } },
+      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "{{ SERVICE_2_NAME }}", "description": "{{ SERVICE_2_DESC }}" } },
+      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "{{ SERVICE_3_NAME }}", "description": "{{ SERVICE_3_DESC }}" } },
+      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "{{ SERVICE_4_NAME }}", "description": "{{ SERVICE_4_DESC }}" } },
+      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "{{ SERVICE_5_NAME }}", "description": "{{ SERVICE_5_DESC }}" } },
+      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "{{ SERVICE_6_NAME }}", "description": "{{ SERVICE_6_DESC }}" } }
+    ]
+  }
+}
+</script>
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  "mainEntity": [
+    { "@type": "Question", "name": "{{ FAQ_1_Q }}",
+      "acceptedAnswer": { "@type": "Answer", "text": "{{ FAQ_1_A }}" } },
+    { "@type": "Question", "name": "{{ FAQ_2_Q }}",
+      "acceptedAnswer": { "@type": "Answer", "text": "{{ FAQ_2_A }}" } },
+    { "@type": "Question", "name": "{{ FAQ_3_Q }}",
+      "acceptedAnswer": { "@type": "Answer", "text": "{{ FAQ_3_A }}" } },
+    { "@type": "Question", "name": "{{ FAQ_4_Q }}",
+      "acceptedAnswer": { "@type": "Answer", "text": "{{ FAQ_4_A }}" } },
+    { "@type": "Question", "name": "{{ FAQ_5_Q }}",
+      "acceptedAnswer": { "@type": "Answer", "text": "{{ FAQ_5_A }}" } }
+  ]
+}
+</script>
+</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>
+  <div class="left">
+    <a href="#story">About</a>
+    <a href="#offer">What we do</a>
+    <a href="#how">How we work</a>
+    <a href="#founder">{{ FOUNDER_SECTION_LABEL }}</a>
+  </div>
+  <div class="center">
+    <img src="images/logo.png" alt="{{ COMPANY_NAME }}, {{ SECTOR_LABEL }}, est. {{ ESTABLISHED_YEAR }}">
+  </div>
+  <div class="right">
+    <a href="#words">Reviews</a>
+    <a href="#services">Services</a>
+    <a href="mailto:{{ EMAIL }}?subject=Project%20enquiry">Enquire</a>
+  </div>
+</nav>
+<!-- Mobile drawer -->
+<div class="drawer" id="drawer" aria-hidden="true">
+  <button class="drawer-close" aria-label="Close menu">&times;</button>
+  <nav class="drawer-nav">
+    <a href="#story">About</a>
+    <a href="#offer">What we do</a>
+    <a href="#how">How we work</a>
+    <a href="#founder">{{ FOUNDER_SECTION_LABEL }}</a>
+    <a href="#words">Reviews</a>
+    <a href="#services">Services</a>
+    <a href="#facts">{{ WHY_HEADLINE }}</a>
+    <a href="tel:{{ PHONE_TEL }}">Call {{ PHONE_DISPLAY }}</a>
+    <a href="{{ INSTAGRAM_URL }}" target="_blank" rel="noopener">Instagram</a>
+    <a href="{{ FACEBOOK_URL }}" target="_blank" rel="noopener">Facebook</a>
+    <a href="mailto:{{ EMAIL }}?subject=Project%20enquiry" class="drawer-cta">Request a callback</a>
+  </nav>
+  <div class="drawer-foot">
+    {{ COMPANY_LEGAL_NAME }} · {{ LOCALITY }}, {{ COUNTY }}<br>
+    <a href="tel:{{ PHONE_TEL }}">{{ PHONE_DISPLAY }}</a> · <a href="mailto:{{ EMAIL }}">{{ EMAIL }}</a>
+  </div>
+</div>
+<!-- ════════════════ STICKY SUB-NAV ════════════════ -->
+<nav class="subnav" id="subnav">
+  <div class="left">
+    {{ COMPANY_NAME }}
+    <span class="price">{{ SECTOR_LABEL }} · Est. {{ ESTABLISHED_YEAR }}</span>
+  </div>
+  <div class="right">
+    <a href="#how">How we work</a>
+    <a href="#services">Services</a>
+    <a href="#words">Reviews</a>
+    <a href="mailto:{{ EMAIL }}?subject=Project%20enquiry" class="cta">Get in touch</a>
+  </div>
+</nav>
+<!-- ════════════════ HERO ════════════════ -->
+<section class="hero">
+  <div class="hero-stage" aria-label="{{ COMPANY_NAME }}, views of our work" role="img">
+    <div class="hero-slide active"><img src="images/hero-01.webp" alt="{{ HERO_1_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-02.webp" alt="{{ HERO_2_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-03.webp" alt="{{ HERO_3_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-04.webp" alt="{{ HERO_4_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-05.webp" alt="{{ HERO_5_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-06.webp" alt="{{ HERO_6_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-07.webp" alt="{{ HERO_7_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-08.webp" alt="{{ HERO_8_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-09.webp" alt="{{ HERO_9_ALT }}"></div>
+    <div class="hero-slide"><img src="images/hero-10.webp" alt="{{ HERO_10_ALT }}"></div>
+  </div>
+  <div class="info-card">
+    <span class="tag">Est. {{ ESTABLISHED_YEAR }} · {{ COUNTY }}</span>
+    <h1 class="title">{{ COMPANY_NAME }}</h1>
+    <div class="address">{{ HERO_STRAPLINE }}</div>
+    <div class="tagline">{{ TAGLINE }}</div>
+    <div class="meta">{{ HERO_META }}</div>
+    <div class="specs">
+      <span>{{ HERO_SPEC_1 }}</span>
+      <span>{{ HERO_SPEC_2 }}</span>
+      <span>{{ HERO_SPEC_3 }}</span>
+      <span>{{ HERO_SPEC_4 }}</span>
+    </div>
+    <div class="links">
+      <a href="#offer">Our work</a>
+      <a href="#words">Reviews</a>
+      <a href="#services">Services</a>
+    </div>
+    <a href="mailto:{{ EMAIL }}?subject=Project%20enquiry" class="cta">Request a callback</a>
+  </div>
+</section>
+<!-- ════════════════ MAIN BODY ════════════════ -->
+<main>
+  <!-- OUR STORY -->
+  <article class="body-block" id="story">
+    <div class="section-eyebrow">Since {{ ESTABLISHED_YEAR }}</div>
+    <h2>{{ STORY_HEADLINE }}</h2>
+    <p>{{ STORY_PARA_1 }}</p>
+    <p>{{ STORY_PARA_2 }}</p>
+  </article>
+  <!-- PHOTO GRID 1 — finished work -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/grid-01.webp" alt="{{ GRID_1_ALT }}"></div>
+    <div class="cell"><img src="images/grid-02.webp" alt="{{ GRID_2_ALT }}"></div>
+    <div class="cell"><img src="images/grid-03.webp" alt="{{ GRID_3_ALT }}"></div>
+    <div class="cell"><img src="images/grid-04.webp" alt="{{ GRID_4_ALT }}"></div>
+  </div>
+  <!-- WHAT WE DO -->
+  <article class="body-block" id="offer">
+    <div class="section-eyebrow">What we do</div>
+    <h2>{{ BUILD_HEADLINE }}</h2>
+    <p>{{ BUILD_PARA_1 }}</p>
+    <p>{{ BUILD_PARA_2 }}</p>
+    <p>{{ BUILD_PARA_3 }}</p>
+  </article>
+  <!-- PHOTO GRID 2 — interiors & finishes -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/grid-05.webp" alt="{{ GRID_5_ALT }}"></div>
+    <div class="cell"><img src="images/grid-06.webp" alt="{{ GRID_6_ALT }}"></div>
+    <div class="cell"><img src="images/grid-07.webp" alt="{{ GRID_7_ALT }}"></div>
+    <div class="cell"><img src="images/grid-08.webp" alt="{{ GRID_8_ALT }}"></div>
+  </div>
+  <!-- HOW WE WORK -->
+  <article class="body-block" id="how">
+    <div class="section-eyebrow">Start to finish</div>
+    <h2>{{ CRAFT_HEADLINE }}</h2>
+    <p>{{ CRAFT_PARA_1 }}</p>
+    <p>{{ CRAFT_PARA_2 }}</p>
+    <p>{{ CRAFT_PARA_3 }}</p>
+  </article>
+  <!-- FULL-BLEED CRAFT MOMENT -->
+  <div class="photo-full">
+    <img src="images/fullbleed-01.webp" alt="{{ FULLBLEED_1_ALT }}">
+  </div>
+  <!-- PHOTO GRID 4 — process / detail -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/grid-09.webp" alt="{{ GRID_9_ALT }}"></div>
+    <div class="cell"><img src="images/grid-10.webp" alt="{{ GRID_10_ALT }}"></div>
+    <div class="cell"><img src="images/grid-11.webp" alt="{{ GRID_11_ALT }}"></div>
+    <div class="cell"><img src="images/grid-12.webp" alt="{{ GRID_12_ALT }}"></div>
+  </div>
+</main>
+<!-- ════════════════ FOUNDER / TEAM LEAD ════════════════ -->
+<section class="founder" id="founder">
+  <div class="inner">
+    <div class="portrait">
+      <img src="images/founder-portrait.webp" alt="{{ FOUNDER_PORTRAIT_ALT }}">
+      <span class="cap">{{ FOUNDER_NAME }} · {{ COMPANY_NAME }}</span>
+    </div>
+    <div class="words">
+      <div class="section-eyebrow">{{ FOUNDER_SECTION_LABEL }}</div>
+      <h2>{{ FOUNDER_HEADLINE }}</h2>
+      <p>{{ FOUNDER_INTRO }}</p>
+      <blockquote>{{ FOUNDER_QUOTE }}</blockquote>
+      <p class="ethos">{{ FOUNDER_ETHOS }}</p>
+    </div>
+  </div>
+  <div class="founder-extra">
+    <figure>
+      <img src="images/feature-project.webp" alt="{{ FEATURE_PROJECT_ALT }}">
+      <figcaption>{{ FEATURE_PROJECT_CAPTION }}</figcaption>
+    </figure>
+    <figure>
+      <img src="images/gift.webp" alt="{{ GIFT_ALT }}">
+      <figcaption>{{ GIFT_CAPTION }}</figcaption>
+    </figure>
+  </div>
+  <div class="site-updates">
+    <div class="eyebrow">{{ UPDATES_LABEL }}</div>
+    <div class="grid">
+      <div class="card">
+        <div class="loc">{{ UPDATE_1_LOC }}</div>
+        <p>{{ UPDATE_1_TEXT }}</p>
+      </div>
+      <div class="card">
+        <div class="loc">{{ UPDATE_2_LOC }}</div>
+        <p>{{ UPDATE_2_TEXT }}</p>
+      </div>
+      <div class="card">
+        <div class="loc">{{ UPDATE_3_LOC }}</div>
+        <p>{{ UPDATE_3_TEXT }}</p>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ════════════════ TESTIMONIAL BAND ════════════════ -->
+<section class="testimonial" id="words">
+  <div class="inner">
+    <div class="home-img">
+      <img src="images/testimonial.webp" alt="{{ TESTIMONIAL_ALT }}">
+    </div>
+    <div class="meta">
+      <div class="eyebrow">In their words</div>
+      <blockquote>{{ TESTIMONIAL_QUOTE }}</blockquote>
+      <div class="attrib">{{ TESTIMONIAL_ATTRIB }} · <span>{{ TESTIMONIAL_CONTEXT }}</span></div>
+      <div class="person">
+        <img src="images/founder-avatar.webp" alt="{{ FOUNDER_AVATAR_ALT }}">
+        <div class="who"><span class="pn">{{ FOUNDER_NAME }}</span><span class="pr">{{ COMPANY_NAME }}</span></div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ════════════════ SERVICES ════════════════ -->
+<section class="services" id="services">
+  <h2>{{ SERVICES_HEADLINE }}</h2>
+  <p class="lede">{{ SERVICES_LEDE }}</p>
+  <div class="grid">
+    <div class="svc"><div class="num">01</div><h3>{{ SERVICE_1_NAME }}</h3><p>{{ SERVICE_1_DESC }}</p></div>
+    <div class="svc"><div class="num">02</div><h3>{{ SERVICE_2_NAME }}</h3><p>{{ SERVICE_2_DESC }}</p></div>
+    <div class="svc"><div class="num">03</div><h3>{{ SERVICE_3_NAME }}</h3><p>{{ SERVICE_3_DESC }}</p></div>
+    <div class="svc"><div class="num">04</div><h3>{{ SERVICE_4_NAME }}</h3><p>{{ SERVICE_4_DESC }}</p></div>
+    <div class="svc"><div class="num">05</div><h3>{{ SERVICE_5_NAME }}</h3><p>{{ SERVICE_5_DESC }}</p></div>
+    <div class="svc"><div class="num">06</div><h3>{{ SERVICE_6_NAME }}</h3><p>{{ SERVICE_6_DESC }}</p></div>
+  </div>
+</section>
+<!-- ════════════════ WHY-US / KEY FACTS ════════════════ -->
+<section class="key-facts" id="facts">
+  <h2>{{ WHY_HEADLINE }}</h2>
+  <div class="grid">
+    <div class="row"><div class="k">Established</div><div class="v">{{ ESTABLISHED_YEAR }}</div></div>
+    <div class="row"><div class="k">{{ FACT_1_KEY }}</div><div class="v">{{ FACT_1_VALUE }}</div></div>
+    <div class="row"><div class="k">{{ FACT_2_KEY }}</div><div class="v">{{ FACT_2_VALUE }}</div></div>
+    <div class="row"><div class="k">Coverage</div><div class="v">{{ REGION }}</div></div>
+    <div class="row"><div class="k">Based</div><div class="v">{{ LOCALITY }}, {{ COUNTY }}</div></div>
+    <div class="row"><div class="k">{{ FACT_3_KEY }}</div><div class="v">{{ FACT_3_VALUE }}</div></div>
+    <div class="row"><div class="k">{{ FACT_4_KEY }}</div><div class="v">{{ FACT_4_VALUE }}</div></div>
+    <div class="row"><div class="k">{{ FACT_5_KEY }}</div><div class="v">{{ FACT_5_VALUE }}</div></div>
+    <div class="row"><div class="k">{{ FACT_6_KEY }}</div><div class="v">{{ FACT_6_VALUE }}</div></div>
+    <div class="footnote">{{ FACTS_FOOTNOTE }}</div>
+  </div>
+</section>
+<!-- ════════════════ FAQ (answer-first, AEO lift targets) ════════════════ -->
+<section class="faq" id="faq">
+  <h2>Frequently asked questions</h2>
+  <div class="qa">
+    <h3>{{ FAQ_1_Q }}</h3>
+    <p>{{ FAQ_1_A }}</p>
+  </div>
+  <div class="qa">
+    <h3>{{ FAQ_2_Q }}</h3>
+    <p>{{ FAQ_2_A }}</p>
+  </div>
+  <div class="qa">
+    <h3>{{ FAQ_3_Q }}</h3>
+    <p>{{ FAQ_3_A }}</p>
+  </div>
+  <div class="qa">
+    <h3>{{ FAQ_4_Q }}</h3>
+    <p>{{ FAQ_4_A }}</p>
+  </div>
+  <div class="qa">
+    <h3>{{ FAQ_5_Q }}</h3>
+    <p>{{ FAQ_5_A }}</p>
+  </div>
+</section>
+<!-- ════════════════ CTA STRIP ════════════════ -->
+<section class="cta-strip">
+  <div class="eyebrow">{{ TAGLINE }}</div>
+  <h2>{{ CTA_HEADLINE }}</h2>
+  <div class="cta-row">
+    <a href="tel:{{ PHONE_TEL }}">{{ PHONE_DISPLAY }}</a>
+    <a href="tel:{{ MOBILE_TEL }}">{{ MOBILE_DISPLAY }}</a>
+    <a href="mailto:{{ EMAIL }}?subject=Project%20enquiry" class="solid">Request a callback</a>
+  </div>
+</section>
+<!-- ════════════════ FOOTER ════════════════ -->
+<footer>
+  <div class="inner">
+    <div class="agent">
+      <div class="label">{{ FOOTER_LABEL }}</div>
+      <div class="name"><em>{{ COMPANY_NAME }}</em></div>
+      {{ STREET_ADDRESS }},<br>
+      {{ POST_TOWN }}, {{ COUNTY }}, {{ POSTCODE }}<br>
+      <a href="tel:{{ PHONE_TEL }}">{{ PHONE_DISPLAY }}</a> · <a href="tel:{{ MOBILE_TEL }}">{{ MOBILE_DISPLAY }}</a><br>
+      <a href="mailto:{{ EMAIL }}">{{ EMAIL }}</a>
+      <div class="socials">
+        <a href="{{ FACEBOOK_URL }}" target="_blank" rel="noopener">Facebook</a>
+        <a href="{{ INSTAGRAM_URL }}" target="_blank" rel="noopener">Instagram</a>
+        <a href="{{ TIKTOK_URL }}" target="_blank" rel="noopener">TikTok</a>
+      </div>
+    </div>
+    <p class="legal">{{ FOOTER_LEGAL }}</p>
+    <div class="colophon">
+      <img src="images/icon.png" alt="{{ COMPANY_SHORT }} monogram">
+      <span>© {{ COPYRIGHT_YEAR }} {{ COMPANY_LEGAL_NAME }} · {{ TAGLINE }}</span>
+    </div>
+  </div>
+</footer>
+<button class="to-top" id="toTop" aria-label="Back to top">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+</button>
+<script>
+  // Hero rotator — cycle the .active slide (skipped for reduced-motion users)
+  (function() {
+    const slides = [...document.querySelectorAll('.hero-slide')];
+    if (slides.length < 2) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    let i = 0;
+    setInterval(() => {
+      slides[i].classList.remove('active');
+      i = (i + 1) % slides.length;
+      slides[i].classList.add('active');
+    }, 5200);
+  })();
+  // Back to top
+  (function() {
+    const btn = document.getElementById('toTop');
+    if (!btn) return;
+    function upd() { (window.scrollY > 600) ? btn.classList.add('show') : btn.classList.remove('show'); }
+    window.addEventListener('scroll', upd, { passive: true }); upd();
+    btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+  })();
+  // Sticky sub-nav after the hero scrolls past
+  (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;
+    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);
+    drawer.querySelectorAll('a').forEach(a => a.addEventListener('click', close));
+    document.addEventListener('keydown', e => { if (e.key === 'Escape' && drawer.classList.contains('open')) close(); });
+  })();
+</script>
+</body>
+</html>