@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/blocks/services/services-packages/README.md

@@ -0,0 +1,34 @@
+# services-packages
+
+Tiered packages / retainers.
+
+- **Category:** services
+- **Media:** none
+- **Registers:** b2b, professional, trade
+- **Variants:** highlight-mid
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `cards` | 3 `.card` tiers: `<h3>`, `.price`, `<p>`, `<ul class="list-check">`, button. Add `card--accent` to the recommended tier (or use the `highlight-mid` variant). |
+
+## Example
+
+```html
+<services-packages>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Maintenance plans</p>
+  <h2 slot="heading">Pick a plan. We'll keep the building running.</h2>
+  <p slot="lede" class="lede">All plans include priority scheduling and no overtime rates.</p>
+  <div slot="cards" class="card"><div class="card__body"><h3>Essential</h3><p class="price"><span class="price__amount">$89</span><span class="price__period">/unit · yr</span></p><p>Two visits a year for buildings with newer equipment.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Spring &amp; fall tune-ups</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Filter changes included</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>10% off repairs</li></ul><a class="btn-outline" href="/contact">Choose Essential</a></div></div>
+  <div slot="cards" class="card card--accent"><div class="card__body"><h3>Standard</h3><p class="price"><span class="price__amount">$149</span><span class="price__period">/unit · yr</span></p><p>Quarterly visits and faster response for mixed-age systems.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Four visits a year</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>4-hour emergency response</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>15% off repairs</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Photo report after every visit</li></ul><a class="btn" href="/contact">Choose Standard</a></div></div>
+  <div slot="cards" class="card"><div class="card__body"><h3>Complete</h3><p class="price"><span class="price__amount">$229</span><span class="price__period">/unit · yr</span></p><p>Everything covered, including parts on scheduled visits.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly visits</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>2-hour emergency response</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Parts on maintenance visits</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Annual lifecycle plan</li></ul><a class="btn-outline" href="/contact">Choose Complete</a></div></div>
+</services-packages>
+```
+
+Variants: `<services-packages variant="highlight-mid">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/services/services-packages/styles.css

@@ -0,0 +1,6 @@
+.c-services-packages__grid{align-items:stretch}
+.c-services-packages__grid .card__body{padding:var(--space-6);gap:var(--space-4)}
+.c-services-packages__grid .card__body > h3{font-size:var(--step-1);font-family:var(--font-body);letter-spacing:.02em;text-transform:uppercase;color:var(--color-muted)}
+.c-services-packages__grid .list-check{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
+.c-services-packages__grid .card__body > .btn,.c-services-packages__grid .card__body > .btn-outline{margin-top:auto;justify-self:stretch}
+.c-services-packages--highlight-mid .c-services-packages__grid > :nth-child(2){border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-2)}

package/blocks/services/services-packages/template.html

@@ -0,0 +1 @@
+<section class="c-services-packages section section--muted"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-services-packages__grid"><slot name="cards"></slot></div></div></section>

package/blocks/services/services-panels/README.md

@@ -0,0 +1,36 @@
+# services-panels
+
+Horizontal photo panels — the hovered or focused one expands.
+
+- **Category:** services
+- **Media:** one photo per service
+- **Registers:** professional, beauty, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional 1–2 buttons / `.btn-arrow` links |
+| `panels` | 4–6 `<a class="photo-card" href><img><div class="photo-card__body"><h3>…</h3><p>…</p></div></a>` |
+
+## Example
+
+```html
+<services-panels>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our services</p>
+  <h2 slot="heading">Trusted legal help across five practice areas.</h2>
+  <p slot="lede" class="lede">Every business hits moments where good legal advice really matters. Each area is led by a senior partner.</p>
+  <a slot="actions" class="btn-arrow" href="/services">All services <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+  <a slot="panels" class="photo-card" href="/services/business-law"><img src="/media/harvest/svc-1.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Business law</h3><p>Contracts, deals, and partnerships that survive the tough conversations.</p></div></a>
+  <a slot="panels" class="photo-card" href="/services/disputes"><img src="/media/harvest/svc-2.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Lawsuits &amp; disputes</h3><p>From first filing to final ruling.</p></div></a>
+  <a slot="panels" class="photo-card" href="/services/compliance"><img src="/media/harvest/svc-3.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Compliance</h3><p>Steady guidance with regulators.</p></div></a>
+  <a slot="panels" class="photo-card" href="/services/ip"><img src="/media/harvest/svc-4.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Intellectual property</h3><p>Patents, secrets, and brands.</p></div></a>
+  <a slot="panels" class="photo-card" href="/services/restructuring"><img src="/media/harvest/svc-5.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Restructuring</h3><p>Workouts and creditor protection.</p></div></a>
+</services-panels>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/services/services-panels/styles.css

@@ -0,0 +1,15 @@
+.c-services-panels__list{display:grid;gap:var(--space-3)}
+.c-services-panels__list > *{min-height:14rem}
+.c-services-panels__list .photo-card__body h3{font-size:var(--step-2)}
+.c-services-panels__list .photo-card__body p{font-size:var(--step-0)}
+@media(min-width:900px){
+  .c-services-panels__list{display:flex;min-height:30rem}
+  .c-services-panels__list > *{flex:1 1 0;min-width:0;min-height:0;transition:flex .5s cubic-bezier(.2,.7,.2,1)}
+  .c-services-panels__list > * .photo-card__body{justify-items:start}
+  .c-services-panels__list > * .photo-card__body h3{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--step-1);white-space:nowrap;max-height:22rem;overflow:hidden;text-overflow:ellipsis}
+  .c-services-panels__list > * .photo-card__body p{display:none}
+  .c-services-panels__list:not(:hover):not(:focus-within) > :first-child,.c-services-panels__list > :hover,.c-services-panels__list > :focus-within{flex:3.2 1 0}
+  .c-services-panels__list:not(:hover):not(:focus-within) > :first-child .photo-card__body h3,.c-services-panels__list > :hover .photo-card__body h3,.c-services-panels__list > :focus-within .photo-card__body h3{writing-mode:horizontal-tb;transform:none;font-size:var(--step-2);white-space:normal;max-height:none}
+  .c-services-panels__list:not(:hover):not(:focus-within) > :first-child .photo-card__body p,.c-services-panels__list > :hover .photo-card__body p,.c-services-panels__list > :focus-within .photo-card__body p{display:block}
+}
+@media(prefers-reduced-motion:reduce){.c-services-panels__list > *{transition:none}}

package/blocks/services/services-panels/template.html

@@ -0,0 +1 @@
+<section class="c-services-panels section"><div class="wrap"><div class="section__head section__head--row"><div class="stack stack--tight"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="c-services-panels__list"><slot name="panels"></slot></div></div></section>

package/blocks/services/services-photo-grid/README.md

@@ -0,0 +1,39 @@
+# services-photo-grid
+
+Photo tiles with the service name over a scrim; optional dark CTA tile.
+
+- **Category:** services
+- **Media:** one photo per service
+- **Registers:** trade, professional, beauty
+- **Variants:** four
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional 1–2 buttons / `.btn-arrow` links |
+| `tiles` | 3–8 `<a class="photo-card" href><img><div class="photo-card__body"><h3>…</h3><p>…</p></div></a>`; optionally one `<div class="card" data-scheme="dark">` CTA tile |
+
+## Example
+
+```html
+<services-photo-grid>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">What we do</p>
+  <h2 slot="heading">When we put our name on a case, we mean it.</h2>
+  <p slot="lede" class="lede">Five practice areas, one standard — honest, careful, and ours.</p>
+  <a slot="actions" class="btn-arrow" href="/services">All practice areas <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+  <a slot="tiles" class="photo-card" href="/services/business-law"><img src="/media/harvest/svc-1.jpg" alt="" width="1200" height="900" loading="lazy"><div class="photo-card__body"><h3>Business law</h3><p>Contracts, deals, and partnerships.</p></div></a>
+  <a slot="tiles" class="photo-card" href="/services/disputes"><img src="/media/harvest/svc-2.jpg" alt="" width="1200" height="900" loading="lazy"><div class="photo-card__body"><h3>Lawsuits &amp; disputes</h3><p>From first filing to final ruling.</p></div></a>
+  <a slot="tiles" class="photo-card" href="/services/compliance"><img src="/media/harvest/svc-3.jpg" alt="" width="1200" height="900" loading="lazy"><div class="photo-card__body"><h3>Compliance &amp; rules</h3><p>Steady guidance with regulators.</p></div></a>
+  <a slot="tiles" class="photo-card" href="/services/ip"><img src="/media/harvest/svc-4.jpg" alt="" width="1200" height="900" loading="lazy"><div class="photo-card__body"><h3>Intellectual property</h3><p>Patents, secrets, and brands.</p></div></a>
+  <a slot="tiles" class="photo-card" href="/services/restructuring"><img src="/media/harvest/svc-5.jpg" alt="" width="1200" height="900" loading="lazy"><div class="photo-card__body"><h3>Restructuring &amp; recovery</h3><p>Workouts and creditor protection.</p></div></a>
+  <div slot="tiles" class="card" data-scheme="dark"><div class="card__body"><h3>Meet the team behind the verdicts.</h3><a class="btn-arrow" href="/team">Our people <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div></div>
+</services-photo-grid>
+```
+
+Variants: `<services-photo-grid variant="four">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/services/services-photo-grid/styles.css

@@ -0,0 +1,10 @@
+.c-services-photo-grid__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
+.c-services-photo-grid__grid > *{aspect-ratio:4/3;min-height:0}
+.c-services-photo-grid__grid .photo-card__body h3{font-size:var(--step-2)}
+.c-services-photo-grid__grid .photo-card__body p{font-size:var(--step-0)}
+.c-services-photo-grid__grid .card{justify-content:flex-end}
+.c-services-photo-grid__grid .card .card__body{flex:0;padding:var(--space-5)}
+.c-services-photo-grid__grid .card .card__body h3{font-size:var(--step-2)}
+@media(max-width:719px){.c-services-photo-grid__grid .photo-card__body p{display:none}.c-services-photo-grid__grid .photo-card__body{padding:var(--space-4)}.c-services-photo-grid__grid .photo-card__body h3{font-size:var(--step-1)}}
+@media(min-width:720px){.c-services-photo-grid__grid{gap:var(--space-4)}}
+@media(min-width:1080px){.c-services-photo-grid__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.c-services-photo-grid--four .c-services-photo-grid__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

package/blocks/services/services-photo-grid/template.html

@@ -0,0 +1 @@
+<section class="c-services-photo-grid section"><div class="wrap"><div class="section__head section__head--row"><div class="stack stack--tight"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="c-services-photo-grid__grid"><slot name="tiles"></slot></div></div></section>

package/blocks/services/services-priority/README.md

@@ -0,0 +1,33 @@
+# services-priority
+
+An unequal service index for a business with one primary offer and several supporting services. The featured service gets depth; the remaining rows stay easy to scan. Fictional Northline Counsel copy is used only for teaching.
+
+- **Category:** services
+- **Media:** none
+- **Registers:** professional, trade, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional section label |
+| `heading` | `<h2>` explaining the service group |
+| `intro` | Optional brief context paragraph |
+| `featured` | One primary service article with action |
+| `items` | Two to four secondary service articles |
+
+## Example
+
+```html
+<services-priority>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">How we help</p>
+  <h2 slot="heading">Start with the decision in front of you.</h2>
+  <p slot="intro" class="lede">The first conversation is about the choice you need to make, the documents you have, and the time available.</p>
+  <article slot="featured"><p class="eyebrow">Primary practice</p><h3>Planning for the people who depend on you.</h3><p>Make your wishes clear and give the people you trust a workable plan.</p><a class="btn" href="/services/planning">Explore planning</a></article>
+  <article slot="items"><h3>Probate guidance</h3><p>Understand the court process and what the estate needs next.</p><a class="btn-arrow" href="/services/probate">View service</a></article>
+  <article slot="items"><h3>Business transitions</h3><p>Prepare ownership, documents, and decisions before a handover.</p><a class="btn-arrow" href="/services/business">View service</a></article>
+</services-priority>
+```
+
+Only use the unequal hierarchy when the business has a genuinely primary offer. Reorder or redesign the section if the services are peers.

package/blocks/services/services-priority/block.meta.json

@@ -0,0 +1,86 @@
+{
+  "schemaVersion": 1,
+  "id": "services/services-priority",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "538a84d99d4dc98cf0e725ccfba0749f71d254cabe70be9015354c017bc674a6",
+  "fit": {
+    "visitorJobs": [
+      "Compare primary and supporting services"
+    ],
+    "pageRoles": [
+      "service index"
+    ],
+    "useWhen": [
+      "Compare primary and supporting services"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "featured",
+      "items"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "intro"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "one lead offer and supporting rows",
+    "alignment": "asymmetric",
+    "density": "medium",
+    "mediaProminence": "none",
+    "geometry": [
+      "priority",
+      "rows"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/services--services-priority.json"
+  }
+}

package/blocks/services/services-priority/styles.css

@@ -0,0 +1,16 @@
+.c-services-priority{overflow-wrap:anywhere}
+.c-services-priority__head{display:grid;gap:var(--space-4);margin-bottom:var(--space-7)}
+.c-services-priority__head h2{max-width:15ch}
+.c-services-priority__head > p{max-width:52ch;color:var(--color-muted)}
+.c-services-priority__layout{display:grid;gap:var(--space-5)}
+.c-services-priority__featured{padding:var(--space-6);background:var(--color-surface-2);display:grid;align-content:space-between;min-height:24rem;min-width:0}
+.c-services-priority__featured > article{display:grid;gap:var(--space-4);align-content:start}
+.c-services-priority__featured h3{font-size:var(--step-3);max-width:16ch}
+.c-services-priority__featured p{max-width:48ch}
+.c-services-priority__others{border-top:1px solid var(--color-border);min-width:0}
+.c-services-priority .btn,.c-services-priority .btn-outline{white-space:normal;text-align:center;max-width:100%}
+.c-services-priority__others > article{display:grid;gap:var(--space-2);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
+.c-services-priority__others h3{font-size:var(--step-1)}
+.c-services-priority__others p{color:var(--color-muted);margin:0}
+.c-services-priority__others a{justify-self:start}
+@media(min-width:850px){.c-services-priority__head{grid-template-columns:minmax(0,1fr) minmax(18rem,.75fr);align-items:end}.c-services-priority__layout{grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);gap:var(--space-8)}}

package/blocks/services/services-priority/template.html

@@ -0,0 +1 @@
+<section class="c-services-priority section"><div class="wrap"><div class="c-services-priority__head"><div><slot name="eyebrow"></slot><slot name="heading"></slot></div><slot name="intro"></slot></div><div class="c-services-priority__layout"><div class="c-services-priority__featured"><slot name="featured"></slot></div><div class="c-services-priority__others"><slot name="items"></slot></div></div></div></section>

package/blocks/stats/stats-cards/README.md

@@ -0,0 +1,31 @@
+# stats-cards
+
+Metric cards with labels.
+
+- **Category:** stats
+- **Media:** none
+- **Registers:** b2b, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `cards` | 3 `.card` items with a `.stat` and optional `<p>` detail |
+
+## Example
+
+```html
+<stats-cards>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">By the numbers</p>
+  <h2 slot="heading">What a year of maintenance looks like</h2>
+  <div slot="cards" class="card"><div class="card__body"><div class="stat"><p class="stat__value" data-count-to="312">312</p><p class="stat__label">Units under contract</p></div><p>Across 41 buildings from Kittery to Brunswick.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><div class="stat"><p class="stat__value" data-count-to="97" data-count-suffix="%">97%</p><p class="stat__label">Issues caught on a scheduled visit</p></div><p>Only 3% of last year's repairs were emergency calls.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><div class="stat"><p class="stat__value">2.6h</p><p class="stat__label">Median emergency response</p></div><p>Against a 4-hour contractual promise.</p></div></div>
+</stats-cards>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/stats/stats-cards/styles.css

@@ -0,0 +1,4 @@
+.c-stats-cards__grid .card{background:var(--color-surface-2);border-color:transparent}
+.c-stats-cards__grid .card__body{padding:var(--space-6);gap:var(--space-4)}
+.c-stats-cards__grid .stat__value{font-size:var(--step-5)}
+.c-stats-cards__grid .card__body > p{font-size:var(--step-0)}

package/blocks/stats/stats-cards/template.html

@@ -0,0 +1 @@
+<section class="c-stats-cards section" data-island="counter"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-stats-cards__grid"><slot name="cards"></slot></div></div></section>

package/blocks/stats/stats-mosaic/README.md

@@ -0,0 +1,27 @@
+# stats-mosaic
+
+Dark stat tiles alternating with photos in one band.
+
+- **Category:** stats
+- **Media:** 2 photos
+- **Registers:** professional, b2b, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `tiles` | 4 tiles alternating `<div class="stat" data-scheme="dark"><p class="eyebrow">Label</p><p class="stat__value">200+</p><p>Sentence.</p></div>` and `<div class="frame"><img></div>` |
+
+## Example
+
+```html
+<stats-mosaic>
+  <div slot="tiles" class="stat" data-scheme="dark"><p class="eyebrow">Cases</p><p class="stat__value">200+</p><p>Cases successfully resolved — showing the steady results we deliver.</p></div>
+  <div slot="tiles" class="frame"><img src="/media/harvest/mosaic-1.jpg" alt="Partners reviewing a brief" width="900" height="900" loading="lazy"></div>
+  <div slot="tiles" class="stat" data-scheme="dark"><p class="eyebrow">Clients</p><p class="stat__value">100+</p><p>Clients served with personal attention, clear advice, and dedicated support.</p></div>
+  <div slot="tiles" class="frame"><img src="/media/harvest/mosaic-2.jpg" alt="Lawyers walking through the office" width="900" height="900" loading="lazy"></div>
+</stats-mosaic>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/stats/stats-mosaic/styles.css

@@ -0,0 +1,9 @@
+.c-stats-mosaic__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
+.c-stats-mosaic__grid > *{min-height:15rem}
+.c-stats-mosaic__grid > .stat{padding:var(--space-6);border-radius:var(--radius-lg);align-content:space-between;gap:var(--space-4)}
+.c-stats-mosaic__grid > .stat .eyebrow{color:var(--color-muted)}
+.c-stats-mosaic__grid > .stat .stat__value{font-size:var(--step-5)}
+.c-stats-mosaic__grid > .stat > p:last-child{margin:0;color:var(--color-muted);font-size:var(--step-0);max-width:16rem}
+.c-stats-mosaic__grid > .frame{box-shadow:none}
+.c-stats-mosaic__grid > .frame img{width:100%;height:100%;object-fit:cover}
+@media(min-width:900px){.c-stats-mosaic__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}.c-stats-mosaic__grid > *{min-height:17rem}}

package/blocks/stats/stats-mosaic/template.html

@@ -0,0 +1 @@
+<section class="c-stats-mosaic section--tight"><div class="wrap c-stats-mosaic__grid"><slot name="tiles"></slot></div></section>

package/blocks/stats/stats-row/README.md

@@ -0,0 +1,29 @@
+# stats-row
+
+Inline four metrics.
+
+- **Category:** stats
+- **Media:** none
+- **Registers:** trade, b2b, professional
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `stats` | 3–4 `.stat` blocks (`data-count-to` optional) |
+
+## Example
+
+```html
+<stats-row>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="1200" data-count-suffix="+">1200+</p><p class="stat__label">Roofs replaced</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="15">15</p><p class="stat__label">Years in Portland</p></div>
+  <div slot="stats" class="stat"><p class="stat__value">4.9</p><p class="stat__label">Average rating</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="48" data-count-suffix="h">48h</p><p class="stat__label">Estimate turnaround</p></div>
+</stats-row>
+```
+
+Variants: `<stats-row variant="dark">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/stats/stats-row/styles.css

@@ -0,0 +1,8 @@
+.c-stats-row{border-block:1px solid var(--color-border)}
+.c-stats-row__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
+.c-stats-row__row .stat{text-align:center;justify-items:center}
+@media(min-width:720px){
+  .c-stats-row__row{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
+  .c-stats-row__row .stat + .stat{border-left:1px solid var(--color-border)}
+}
+.c-stats-row--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text);border-block-color:transparent;padding-block:var(--space-7)}

package/blocks/stats/stats-row/template.html

@@ -0,0 +1 @@
+<section class="c-stats-row section--tight" data-island="counter"><div class="wrap c-stats-row__row"><slot name="stats"></slot></div></section>

package/blocks/stats/stats-split/README.md

@@ -0,0 +1,35 @@
+# stats-split
+
+Stat cluster beside copy.
+
+- **Category:** stats
+- **Media:** optional media
+- **Registers:** professional, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional button |
+| `stats` | 4 `.stat` blocks (rendered as a 2×2 grid) |
+
+## Example
+
+```html
+<stats-split>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Track record</p>
+  <h2 slot="heading">Numbers our clients check before they call</h2>
+  <p slot="lede" class="lede">Every figure here is from the last twelve months and updates quarterly.</p>
+  <a slot="actions" class="btn" href="/contact">Talk to us</a>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="214">214</p><p class="stat__label">Estates administered</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="11">11</p><p class="stat__label">Days median to first filing</p></div>
+  <div slot="stats" class="stat"><p class="stat__value">$0</p><p class="stat__label">Surprise fees, ever</p></div>
+  <div slot="stats" class="stat"><p class="stat__value">4.9</p><p class="stat__label">Client rating</p></div>
+</stats-split>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/stats/stats-split/styles.css

@@ -0,0 +1,3 @@
+.c-stats-split__copy .section__head{margin-bottom:var(--space-5)}
+.c-stats-split__grid{--gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr))}
+.c-stats-split__grid .stat{padding:var(--space-5);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border)}

package/blocks/stats/stats-split/template.html

@@ -0,0 +1 @@
+<section class="c-stats-split section section--muted" data-island="counter"><div class="wrap split"><div class="c-stats-split__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="grid grid--2 c-stats-split__grid"><slot name="stats"></slot></div></div></section>

package/blocks/team/team-featured/README.md

@@ -0,0 +1,42 @@
+# team-featured
+
+Featured person + roster.
+
+- **Category:** team
+- **Media:** portraits
+- **Registers:** professional, beauty
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `media` | Featured portrait `<img>` (3:4) |
+| `lead` | `<h3>` name, `<p class="c-team-role">`, 1–2 `<p>` bio |
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `people` | 2 or 4 compact `.card` people (portrait, `<h3>`, `<p class="c-team-role">`) |
+
+## Example
+
+```html
+<team-featured>
+  <img src="/media/harvest/team-elena.jpg" alt="Dr. Elena Marsh" width="900" height="1200" slot="media" loading="lazy">
+  <h3 slot="lead">Dr. Elena Marsh, DDS</h3>
+  <p slot="lead" class="c-team-role">Owner &amp; general dentist</p>
+  <p slot="lead">Elena bought the practice in 2016 after eight years in a hospital dental clinic. She's known for talking through every step and for a very steady hand.</p>
+  <p slot="lead">Tufts DMD · Maine Dental Association · Invisalign certified</p>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our team</p>
+  <h2 slot="heading">Small on purpose</h2>
+  <p slot="lede" class="lede">Four people who know your name and your history.</p>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-nick.jpg" alt="Nick Alvarez" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>Nick Alvarez</h3><p class="c-team-role">Hygienist</p></div></div>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-june.jpg" alt="June Park" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>June Park</h3><p class="c-team-role">Hygienist</p></div></div>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-rob.jpg" alt="Rob Feeney" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>Rob Feeney</h3><p class="c-team-role">Dental assistant</p></div></div>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-tess.jpg" alt="Tess Morrow" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>Tess Morrow</h3><p class="c-team-role">Front desk &amp; billing</p></div></div>
+</team-featured>
+```
+
+Variants: `<team-featured variant="reverse">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/team/team-featured/styles.css

@@ -0,0 +1,9 @@
+.c-team-featured__grid{display:grid;gap:var(--space-7);align-items:start}
+@media(min-width:900px){.c-team-featured__grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-8)}.c-team-featured--reverse .c-team-featured__lead{order:2}}
+.c-team-featured__lead .card__body{padding:var(--space-5);gap:var(--space-2)}
+.c-team-featured__lead .card__body > h3{font-size:var(--step-2)}
+.c-team-featured__lead .card__body > p:not(.c-team-role){margin-top:var(--space-2)}
+.c-team-featured .c-team-role{color:var(--color-accent);font-weight:600;font-size:var(--step-0)}
+.c-team-featured__people{grid-template-columns:repeat(2,minmax(0,1fr));--gap:var(--space-4)}
+.c-team-featured__people .card__body{padding:var(--space-4);gap:var(--space-1)}
+.c-team-featured__people .card__body > h3{font-size:var(--step-1)}

package/blocks/team/team-featured/template.html

@@ -0,0 +1 @@
+<section class="c-team-featured section section--muted"><div class="wrap c-team-featured__grid"><div class="card c-team-featured__lead"><div class="card__media ratio-3x4"><slot name="media"></slot></div><div class="card__body"><slot name="lead"></slot></div></div><div class="c-team-featured__rest"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--2 c-team-featured__people"><slot name="people"></slot></div></div></div></section>

package/blocks/team/team-grid/README.md

@@ -0,0 +1,35 @@
+# team-grid
+
+Portrait grid of people.
+
+- **Category:** team
+- **Media:** portraits
+- **Registers:** professional, beauty, b2b, trade
+- **Variants:** three
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `people` | 4 or 8 `.card` items: `.card__media.ratio-3x4` portrait, `<h3>` name, `<p class="c-team-role">`, optional one-line `<p>` |
+
+## Example
+
+```html
+<team-grid>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">The crew</p>
+  <h2 slot="heading">Eight people. Zero subcontractors.</h2>
+  <p slot="lede" class="lede">Everyone on your roof is on our payroll, trained by us, and insured by us.</p>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-mike.jpg" alt="Mike Harbor" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>Mike Harbor</h3><p class="c-team-role">Founder &amp; lead estimator</p><p>Started roofing in 1998; still climbs every roof he quotes.</p></div></div>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-ana.jpg" alt="Ana Reyes" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>Ana Reyes</h3><p class="c-team-role">Foreman</p><p>Runs the install crew. Twelve years, four hundred roofs.</p></div></div>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-devon.jpg" alt="Devon Blake" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>Devon Blake</h3><p class="c-team-role">Foreman</p><p>Metal and cedar specialist. Ex-shipwright.</p></div></div>
+  <div slot="people" class="card"><div class="card__media ratio-3x4"><img src="/media/harvest/team-sarah.jpg" alt="Sarah Lin" width="900" height="1200" loading="lazy"></div><div class="card__body"><h3>Sarah Lin</h3><p class="c-team-role">Office &amp; scheduling</p><p>The voice on the phone. Returns every call the same day.</p></div></div>
+</team-grid>
+```
+
+Variants: `<team-grid variant="three">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/team/team-grid/styles.css

@@ -0,0 +1,8 @@
+.c-team-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr));--gap:var(--space-4)}
+@media(min-width:720px){.c-team-grid__grid{--gap:var(--space-5)}}
+@media(min-width:1080px){.c-team-grid__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
+.c-team-grid__grid .card__body{padding:var(--space-4) var(--space-4) var(--space-5);gap:var(--space-1)}
+.c-team-grid__grid .card__body > h3{font-size:var(--step-1)}
+.c-team-grid__grid .c-team-role{font-size:var(--step-0);color:var(--color-accent);font-weight:600}
+.c-team-grid__grid .card__body > p:not(.c-team-role){font-size:var(--step-0);margin-top:var(--space-2)}
+@media(min-width:1080px){.c-team-grid--three .c-team-grid__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

package/blocks/team/team-grid/template.html

@@ -0,0 +1 @@
+<section class="c-team-grid section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--4 c-team-grid__grid"><slot name="people"></slot></div></div></section>