Data Driven Dogs — Homev2 Build Reference

How to use this file: Paste the contents of each section into the appropriate Squarespace block on the claude page. Use it as a living reference — update it as the site evolves. Each section below is a self-contained specification.

Site Identity

Key	Value
Site URL	datadrivendogs.com
Working page	datadrivendogs.com/homev2
Squarespace site ID	`6006068047a6a51d636bfbf0`
Squarespace internal URL	mackerel-harmonica-gb4r.squarespace.com
Platform	Squarespace 7.1 — Fluid Engine

Squarespace CDN — Critical Knowledge

How Squarespace serves assets

Images:

https://images.squarespace-cdn.com/content/{SITE_ID}/{FILE_UUID}/{filename}?content-type=image%2Fpng

Videos:

https://video.squarespace-cdn.com/content/v1/{SITE_ID}/{FILE_UUID}/playlist.m3u8

Your site's asset URLs

Video (come_and_play_v1 — 2160p, 16:9 landscape, 0:47):

https://video.squarespace-cdn.com/content/v1/6006068047a6a51d636bfbf0/74c494fa-0c5c-46eb-ae46-951da5642b15/playlist.m3u8

Hero thumbnail (Hero_Thumbnail.png — cinematic still):

https://images.squarespace-cdn.com/content/6006068047a6a51d636bfbf0/9020980d-5509-4727-8938-71c279e86ed6/Hero_Thumbnail.png?content-type=image%2Fpng

Important CDN behaviour

Video is served as HLS (.m3u8 playlist). NOT a direct .mp4.
Segment URLs contain temporary Expires tokens. The playlist URL itself is permanent.
Chrome/Firefox require HLS.js. Safari plays natively.
HLS.js CDN (Squarespace CSP allows it): https://cdn.jsdelivr.net/npm/hls.js@1.5.7/dist/hls.min.js
Thumbnail serves as: instant loading fallback, section background-image, static frame after video ends.

Squarespace Layout Architecture — Critical Knowledge

Squarespace wraps each page section in this hierarchy:

.page-section
  └── .section-border
      └── .content-wrapper   ← has 126.72px padding top+bottom from SQS stylesheet
          └── .fluid-engine  ← CSS grid with 35 explicit row tracks (~1800px)
              └── .fe-block  ← grid-row: 1/36, grid-column: 2/26 (gutters on sides)
                  └── .sqs-block > .sqs-block-content
                      └── your HTML

Why this matters

content-wrapper padding: SQS injects ~127px top and bottom on every section. Zeroed out globally in CSS.
fluid-engine row tracks: SQS pre-generates 35 rows of ~~38px each (~~1800px total). Must be collapsed for hero.
page-section padding-top: SQS injects ~241px inline via JS. Must be overridden via JS setProperty('padding-top','0','important').
fe-block grid-row: Spans rows 1/36 by default. Collapsed to 1/2 via JS for hero only.
Body background: rgb(121, 121, 121) — gray shows through any transparent section. All ddd-* sections have explicit background:#fff.
box-sizing: SQS defaults to content-box. All ddd-* section containers use box-sizing:border-box so width:100% includes padding.

Fluid Engine block targeting

All Homev2 blocks share the prefix fe-block-yui_3_17_2_1_177525 (full timestamp: 1775254344337). Target all blocks on mobile:

@media (max-width: 767px) {
  [class*="fe-block-yui_3_17_2_1_177525"] {
    grid-column: 1 / -1 !important;
  }
}

Note: If you rebuild the page or add sections, new blocks get new timestamps. Inspect new class names in DevTools and update the prefix.

Design tokens

Token	Value
Primary font	`-apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif`
Border color	`#e5e5e5`
Border width	`0.5px`
Section padding desktop	`3.5rem 4rem`
Section padding mobile	`2.5rem 1.5rem`
Card radius	`10px`
Button radius	`8px`
Hero overlay	`rgba(0,0,0,0.42)`
Mobile breakpoint	`max-width: 767px`
Body background	`rgb(121,121,121)` — always override with explicit bg on sections

Complete CSS — v5 (paste into Page Header Code Injection)

<style>
/* ── Kill Squarespace content-wrapper padding on all homev2 sections ── */
/* Our ddd-* blocks manage their own internal padding */
.content-wrapper{padding-top:0 !important;padding-bottom:0 !important;}
/* ── Hero ── */
.ddd-hero{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:flex-end;padding-bottom:80px;box-sizing:border-box;background:#000;}
.ddd-hero video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.08);}
.ddd-hero__overlay{position:absolute;inset:0;background:rgba(0,0,0,0.42);z-index:1;}
.ddd-hero__content{position:relative;z-index:2;padding:0 60px;max-width:860px;}
.ddd-hero__tag{display:inline-block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:24px;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-hero__headline{font-size:clamp(36px,5vw,68px);font-weight:500;line-height:1.05;letter-spacing:-0.025em;color:#fff;margin:0 0 24px;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-hero__sub{font-size:18px;color:rgba(255,255,255,0.72);line-height:1.65;max-width:480px;margin:0 0 40px;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-hero__ctas{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.ddd-btn-primary{font-size:14px;font-weight:500;padding:12px 28px;background:#fff;color:#111;border-radius:8px;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;white-space:nowrap;}
.ddd-btn-ghost{font-size:15px;color:rgba(255,255,255,0.8);text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
/* ── Split ── */
.ddd-split{display:grid;grid-template-columns:1fr 1fr;width:100%;border-top:0.5px solid #e5e5e5;background:#fff;box-sizing:border-box;}
.ddd-split__panel{padding:3.5rem 4rem;}
.ddd-split__panel--left{border-right:0.5px solid #e5e5e5;}
.ddd-split__label{font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:#999;margin-bottom:1.25rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-split__headline{font-size:22px;font-weight:500;line-height:1.35;color:#111;margin-bottom:1rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-split__body{font-size:14px;color:#666;line-height:1.75;margin-bottom:1.5rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-split__link{font-size:13px;color:#111;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
/* ── Services ── */
.ddd-services{width:100%;padding:3.5rem 4rem;border-top:0.5px solid #e5e5e5;background:#fff;box-sizing:border-box;}
.ddd-services__label{font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:#999;margin-bottom:2rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e5e5e5;border:0.5px solid #e5e5e5;border-radius:10px;overflow:hidden;}
.ddd-services__card{padding:1.5rem 1.25rem;background:#fff;}
.ddd-services__title{font-size:14px;font-weight:500;color:#111;margin-bottom:6px;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-services__desc{font-size:13px;color:#777;line-height:1.65;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
/* ── Reviews ── */
.ddd-reviews{width:100%;padding:3.5rem 4rem;border-top:0.5px solid #e5e5e5;background:#fff;box-sizing:border-box;}
.ddd-reviews__label{font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:#999;margin-bottom:2rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-reviews__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ddd-reviews__card{padding:1.5rem;border:0.5px solid #e5e5e5;border-radius:10px;}
.ddd-reviews__quote{font-size:14px;color:#555;line-height:1.75;margin-bottom:1rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-reviews__attr{font-size:12px;color:#aaa;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
/* ── About ── */
.ddd-about{width:100%;padding:4rem;border-top:0.5px solid #e5e5e5;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;background:#fff;box-sizing:border-box;}
.ddd-about__label{font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:#999;margin-bottom:1.25rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-about__headline{font-size:26px;font-weight:500;line-height:1.3;color:#111;margin-bottom:1rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-about__body{font-size:14px;color:#666;line-height:1.75;margin-bottom:1.5rem;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-about__link{font-size:13px;color:#111;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;}
.ddd-about__photo{aspect-ratio:4/3;background:#f0f0f0;border-radius:10px;border:0.5px solid #e5e5e5;}
/* ── Squarespace overrides ── */
.sqs-block-code .sqs-block-content{padding:0 !important;}
/* ── Mobile ── */
@media (max-width:767px){
  [class*="fe-block-yui_3_17_2_1_177525"]{grid-column:1 / -1 !important;}
  .ddd-hero{min-height:100svh;padding-bottom:48px;}
  .ddd-hero__content{padding:0 24px;}
  .ddd-hero__sub{font-size:16px;}
  .ddd-split{grid-template-columns:1fr;}
  .ddd-split__panel{padding:2.5rem 1.5rem;}
  .ddd-split__panel--left{border-right:none;border-bottom:0.5px solid #e5e5e5;}
  .ddd-services{padding:2.5rem 1.5rem;}
  .ddd-services__grid{grid-template-columns:1fr;}
  .ddd-reviews{padding:2.5rem 1.5rem;}
  .ddd-reviews__grid{grid-template-columns:1fr;}
  .ddd-about{grid-template-columns:1fr;gap:2rem;padding:2.5rem 1.5rem;}
  .ddd-about__photo{display:none;}
}
</style>

Code Blocks — Complete HTML (one per Squarespace section)

Block 1 — Hero

<section class="ddd-hero" id="ddd-hero-section">
  <video id="ddd-hero-video" muted playsinline></video>
  <div class="ddd-hero__overlay"></div>
  <div class="ddd-hero__content">
    <span class="ddd-hero__tag">Mercer Island, WA</span>
    <h1 class="ddd-hero__headline">Dog training,<br>driven by data.</h1>
    <p class="ddd-hero__sub">Evidence-based behavior change for dogs and their handlers — grounded in 15 years of fieldwork and real-time behavioral analysis technology.</p>
    <div class="ddd-hero__ctas">
      <a class="ddd-btn-primary" href="/contact">Work with Will</a>
      <a class="ddd-btn-ghost" href="#technology">See the technology →</a>
    </div>
  </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.7/dist/hls.min.js"></script>
<script>
(function(){
  // ── Video ──
  var v = document.getElementById('ddd-hero-video');
  var section = document.getElementById('ddd-hero-section');
  var posterUrl = 'https://images.squarespace-cdn.com/content/6006068047a6a51d636bfbf0/9020980d-5509-4727-8938-71c279e86ed6/Hero_Thumbnail.png?content-type=image%2Fpng';
  var src = 'https://video.squarespace-cdn.com/content/v1/6006068047a6a51d636bfbf0/74c494fa-0c5c-46eb-ae46-951da5642b15/playlist.m3u8';
  section.style.backgroundImage = 'url(' + posterUrl + ')';
  section.style.backgroundSize = 'cover';
  section.style.backgroundPosition = 'center';
  v.addEventListener('ended', function(){
    v.style.transition = 'opacity 1.2s ease';
    v.style.opacity = '0';
  });
  if (Hls.isSupported()) {
    var hls = new Hls({autoStartLoad:true, startLevel:-1});
    hls.loadSource(src);
    hls.attachMedia(v);
    hls.on(Hls.Events.MANIFEST_PARSED, function(){ v.play(); });
  } else if (v.canPlayType('application/vnd.apple.mpegurl')) {
    v.src = src;
    v.play();
  }

  // ── Fix Squarespace container bloat ──
  // SQS wraps each section in page-section > section-border > content-wrapper > fluid-engine.
  // It injects padding on page-section (~241px) and content-wrapper (~127px each side),
  // and sizes the fluid-engine grid with 35 row tracks (~1800px total).
  // CSS !important cannot beat SQS JS-applied inline styles — we override via setProperty.
  function fixContainers() {
    var el = document.getElementById('ddd-hero-section');
    if (!el) return;

    // 1. page-section: kill injected padding-top (~241px inline style)
    var pageSection = el.closest('.page-section');
    if (pageSection) {
      pageSection.style.setProperty('padding-top',    '0px',  'important');
      pageSection.style.setProperty('padding-bottom', '0px',  'important');
      pageSection.style.setProperty('min-height',     '0',    'important');
      pageSection.style.setProperty('height',         'auto', 'important');
    }

    // 2. content-wrapper: kill CSS padding (~127px top + bottom)
    var cw = el.closest('.content-wrapper');
    if (cw) {
      cw.style.setProperty('padding-top',    '0', 'important');
      cw.style.setProperty('padding-bottom', '0', 'important');
    }

    // 3. fluid-engine: collapse 35 explicit row tracks to auto
    var fe = el.closest('.fluid-engine');
    if (fe) {
      fe.style.setProperty('grid-template-rows', 'auto', 'important');
      fe.style.setProperty('grid-auto-rows',     'auto', 'important');
      fe.style.setProperty('min-height',         '0',    'important');
      fe.style.setProperty('height',             'auto', 'important');
    }

    // 4. fe-block: collapse from grid-row 1/36 to 1/2
    var feBlock = el.closest('[class*="fe-block"]');
    if (feBlock) {
      feBlock.style.setProperty('grid-row',   '1 / 2', 'important');
      feBlock.style.setProperty('min-height', '0',     'important');
      feBlock.style.setProperty('height',     'auto',  'important');
      feBlock.style.setProperty('align-self', 'start', 'important');
    }
  }

  // Run immediately, then after SQS JS may re-apply values
  fixContainers();
  requestAnimationFrame(function(){ requestAnimationFrame(fixContainers); });
  window.addEventListener('load', fixContainers);
})();
</script>

Block 2 — Training / Technology Split

<div class="ddd-split">
  <div class="ddd-split__panel ddd-split__panel--left">
    <p class="ddd-split__label">Training</p>
    <p class="ddd-split__headline">Built on behavioral science, not guesswork.</p>
    <p class="ddd-split__body">In-home sessions, reactive dog programs, and handler education — all designed around how animals actually learn.</p>
    <a class="ddd-split__link" href="/contact">View services →</a>
  </div>
  <div class="ddd-split__panel">
    <p class="ddd-split__label">Technology</p>
    <p class="ddd-split__headline">Real-time canine behavioral analysis at the edge.</p>
    <p class="ddd-split__body">Conv2d-FSQ-HSMM pipeline. Sub-50ms inference on-device. 78% classification accuracy — built for the real world.</p>
    <a class="ddd-split__link" href="/technology">Learn about the platform →</a>
  </div>
</div>

Block 3 — Services

<div class="ddd-services">
  <p class="ddd-services__label">Services</p>
  <div class="ddd-services__grid">
    <div class="ddd-services__card">
      <p class="ddd-services__title">In-home sessions</p>
      <p class="ddd-services__desc">1:1 training in your dog's actual environment, where behavior matters most.</p>
    </div>
    <div class="ddd-services__card">
      <p class="ddd-services__title">Reactive dog program</p>
      <p class="ddd-services__desc">Structured multi-week protocols for leash reactivity and threshold work.</p>
    </div>
    <div class="ddd-services__card">
      <p class="ddd-services__title">Handler education</p>
      <p class="ddd-services__desc">Teach the human half of the team — timing, reading behavior, reinforcement mechanics.</p>
    </div>
  </div>
</div>

Block 4 — Reviews

<div class="ddd-reviews">
  <p class="ddd-reviews__label">What people say</p>
  <div class="ddd-reviews__grid">
    <div class="ddd-reviews__card">
      <p class="ddd-reviews__quote">"Will transformed how we understand our dog. It's not just tricks — it's a completely different relationship."</p>
      <p class="ddd-reviews__attr">— Mercer Island client</p>
    </div>
    <div class="ddd-reviews__card">
      <p class="ddd-reviews__quote">"Evidence-based and genuinely thoughtful. Will explains the science behind every decision he makes."</p>
      <p class="ddd-reviews__attr">— Seattle client</p>
    </div>
    <div class="ddd-reviews__card">
      <p class="ddd-reviews__quote">"We tried two other trainers before Will. Night and day difference. Our reactive dog is a different animal."</p>
      <p class="ddd-reviews__attr">— Bellevue client</p>
    </div>
    <div class="ddd-reviews__card">
      <p class="ddd-reviews__quote">"The data-driven approach resonated with us immediately. Will measures progress, not just vibes."</p>
      <p class="ddd-reviews__attr">— Mercer Island client</p>
    </div>
  </div>
</div>

Block 5 — About

<div class="ddd-about">
  <div>
    <p class="ddd-about__label">About</p>
    <p class="ddd-about__headline">Will Flower — trainer, researcher, builder.</p>
    <p class="ddd-about__body">15 years working with dogs and handlers on Mercer Island and across the Seattle area. Bridging applied ethology and machine learning to create the next generation of behavioral analysis tools.</p>
    <a class="ddd-about__link" href="/about">Full story →</a>
  </div>
  <div class="ddd-about__photo"></div>
</div>

Page Structure (Squarespace editor)

Section	Block type	Content
1	Code block	Hero (video + HLS.js + container fix script)
2	Code block	Training/Technology split
3	Code block	Services grid
4	Code block	Reviews 2×2
5	Code block	About 2-col

All blocks must be dragged to full width in the Fluid Engine editor (both desktop and mobile views).

Known Issues & Backlog

Backlogged (live, not critical)

Thin bar between hero and Training section — A ~2px dark line persists between the hero section and the Training/Technology split below it. Root cause not fully isolated; likely a rendering artifact from the background:#000 on .ddd-hero at the section boundary. Low visual impact on mobile; nearly invisible on desktop. Investigation deferred.

To do next

Update navigation links (currently Reviews/Photos/Contact Us/About → should be Training/Technology/About/Book)
Set Homev2 as the homepage (move to Main Navigation, set as Home)
Write real review copy from actual client reviews
Add photo to About section
Decide on /technology page — does it exist yet?
Test booking CTA link (/contact route)
Desktop: hero fe-block still has side gutters (grid-column 2/26) — hero not fully full-bleed on desktop

Squarespace Markdown — Quick Reference

Emphasis: *italic* / **bold**
Headings: # H1 / ## H2 / ### H3
Links: [text](https://url.com)
Images: ![alt text](https://image-url.com)
Inline code: `code`
Code block: indent 4 spaces
Horizontal rule: ---
Lists: 1. ordered / * unordered
Inline HTML works — <span style="color:red">text</span> for color, full <div> blocks for layout.
Line break: end line with two spaces before Return

CSS Class Naming Convention

All Homev2 classes use the ddd- prefix with BEM-style naming:

ddd-{section}__{element}--{modifier}

Examples: ddd-hero__headline, ddd-split__panel--left, ddd-services__card

Prevents conflicts with Squarespace CSS. Future pages use their own prefix (e.g., ddd-about-page__, ddd-tech-page__).

Last updated: April 2026 — Homev2 session 2 (alignment fixes, hero container fix, box-sizing, content-wrapper padding)