npm - @rubytech/create-sitedesk-code - Versions diffs - 0.1.340 - Mend

@rubytech/create-sitedesk-code 0.1.340

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

package/payload/premium-plugins/sitedesk/plugins/sitedesk-media/skills/microsite/templates/index.html ADDED Viewed

@@ -0,0 +1,1004 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<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": "UK company number", "value": "{{ COMPANY_NUMBER }}" },
+  "employee": { "@type": "Person", "name": "{{ FOUNDER_NAME }}" },
+  "address": {
+    "@type": "PostalAddress",
+    "streetAddress": "{{ STREET_ADDRESS }}",
+    "addressLocality": "{{ POST_TOWN }}",
+    "addressRegion": "{{ COUNTY }}",
+    "postalCode": "{{ POSTCODE }}",
+    "addressCountry": "GB"
+  },
+  "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">Our story</a>
+    <a href="#build">What we build</a>
+    <a href="#craft">Our craft</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">Our story</a>
+    <a href="#build">What we build</a>
+    <a href="#craft">Our craft</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="#craft">Our craft</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="A family home with a glazed garden-room extension and bi-fold doors onto the lawn, built by {{ COMPANY_NAME }}"></div>
+    <div class="hero-slide"><img src="images/hero-02.webp" alt="A bright open-plan living and kitchen extension lit by twin roof lanterns"></div>
+    <div class="hero-slide"><img src="images/hero-03.webp" alt="A finished kitchen with a central island, shaker units and quartz worktops"></div>
+    <div class="hero-slide"><img src="images/hero-04.webp" alt="A finished reception room with a large new window over the garden"></div>
+    <div class="hero-slide"><img src="images/hero-05.webp" alt="New sandstone steps and landscaping completing a home's approach"></div>
+    <div class="hero-slide"><img src="images/hero-06.webp" alt="An aerial view of a major rear extension under way on a period home"></div>
+    <div class="hero-slide"><img src="images/hero-07.webp" alt="A new room framed out beneath its exposed timber roof structure"></div>
+    <div class="hero-slide"><img src="images/hero-08.webp" alt="A contemporary clad building with a standing-seam roof"></div>
+    <div class="hero-slide"><img src="images/hero-09.webp" alt="The {{ COMPANY_NAME }} team at work on the rear of a brick home"></div>
+    <div class="hero-slide"><img src="images/hero-10.webp" alt="A rear extension taking shape in blockwork, ready for its roof"></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="#build">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="New sandstone steps, a retaining wall and planting completing a home's approach"></div>
+    <div class="cell"><img src="images/grid-02.webp" alt="A contemporary clad building with a standing-seam roof, nearing completion"></div>
+    <div class="cell"><img src="images/grid-03.webp" alt="A new room framed out, its timber roof structure exposed before lining"></div>
+    <div class="cell"><img src="images/grid-04.webp" alt="The {{ COMPANY_NAME }} team at work on the rear of a brick home"></div>
+  </div>
+  <!-- WHAT WE BUILD -->
+  <article class="body-block" id="build">
+    <div class="section-eyebrow">What we build</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="A structural steel beam set in to open up the back of a house for an extension"></div>
+    <div class="cell"><img src="images/grid-06.webp" alt="Stripping and re-laying an old clay-tiled roof from the scaffold"></div>
+    <div class="cell"><img src="images/grid-07.webp" alt="A rear extension taking shape in blockwork, ready for its roof"></div>
+    <div class="cell"><img src="images/grid-08.webp" alt="A gable rebuilt and re-roofed, with the {{ COMPANY_NAME }} board on site"></div>
+  </div>
+  <!-- OUR CRAFT -->
+  <article class="body-block" id="craft">
+    <div class="section-eyebrow">Ground 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="An aerial view of a major rear extension under way on a period home, by {{ COMPANY_NAME }}">
+  </div>
+  <!-- PHOTO GRID 4 — process, groundworks to roof -->
+  <div class="photo-grid">
+    <div class="cell"><img src="images/grid-09.webp" alt="The groundworks crew at work beside an existing home"></div>
+    <div class="cell"><img src="images/grid-10.webp" alt="The team raising an insulated timber-frame wall on a new build"></div>
+    <div class="cell"><img src="images/grid-11.webp" alt="Underfloor-heating pipes laid out during first fix"></div>
+    <div class="cell"><img src="images/grid-12.webp" alt="A freshly poured floor screed in a room under renovation"></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_NAME }} of {{ COMPANY_NAME }}, on site in front of the company hoarding">
+      <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="A bespoke kitchen with a large island, built and fitted by {{ COMPANY_NAME }}">
+    </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_NAME }} of {{ COMPANY_NAME }} on site">
+        <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>