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

package/blocks/process/process-carousel/README.md

@@ -0,0 +1,33 @@
+# process-carousel
+
+Process cards in buttoned carousel.
+
+- **Category:** process
+- **Media:** optional
+- **Registers:** trade, beauty
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `cards` | 4–6 `.card` slides: `<p class="eyebrow">` step label, `<h3>`, `<p>` |
+
+## Example
+
+```html
+<process-carousel>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Day of</p>
+  <h2 slot="heading">What happens on install day</h2>
+  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">7:00 am</p><h3>Crew arrives, protection goes down</h3><p>Tarps over beds, plywood over the AC, driveway cones out.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">7:30 am</p><h3>Tear-off</h3><p>Old shingles into the dumpster by lunchtime on most houses.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">Midday</p><h3>Deck inspection</h3><p>Soft or rotted sheathing replaced and photographed before underlayment.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">Afternoon</p><h3>Underlayment and shingles</h3><p>Ice-and-water, synthetic underlayment, then shingles from the eaves up.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><p class="eyebrow">End of day</p><h3>Sweep and walkthrough</h3><p>Magnet sweep twice, gutters cleared, and a walk with the foreman.</p></div></div>
+</process-carousel>
+```
+
+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/process/process-carousel/styles.css

@@ -0,0 +1,5 @@
+.c-process-carousel__head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-5)}
+.c-process-carousel__head .section__head,.c-process-carousel__head .carousel__nav{margin-bottom:var(--space-6)}
+.c-process-carousel__carousel .carousel__track > *{flex-basis:min(85%,18rem)}
+.c-process-carousel__carousel .card__body{padding:var(--space-6);gap:var(--space-3)}
+.c-process-carousel__carousel .card__body .eyebrow{color:var(--color-accent);font-size:.75rem}

package/blocks/process/process-carousel/template.html

@@ -0,0 +1 @@
+<section class="c-process-carousel section section--muted"><div class="wrap"><div class="c-process-carousel__head"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="carousel__nav"><button type="button" data-carousel-prev aria-label="Previous"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" data-carousel-next aria-label="Next"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button></div></div></div><div class="wrap carousel c-process-carousel__carousel" data-island="carousel" tabindex="0"><div class="carousel__track"><slot name="cards"></slot></div></div></section>

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

@@ -0,0 +1,35 @@
+# process-split
+
+Copy + large how-it-works media.
+
+- **Category:** process
+- **Media:** illustration or photo
+- **Registers:** b2b, trade, beauty
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `steps` | 3–4 `<li>` with `<strong>` lead and text |
+| `media` | `<img>` 4:3 |
+
+## Example
+
+```html
+<process-split>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Your first visit</p>
+  <h2 slot="heading">Here's how a color consult goes</h2>
+  <li slot="steps"><span><strong>Talk first, 15 minutes</strong>Photos you like, your routine, and what you want to spend on upkeep.</span></li>
+  <li slot="steps"><span><strong>Strand test</strong>We test a hidden section so there are no surprises on the day.</span></li>
+  <li slot="steps"><span><strong>Written plan and price</strong>What we'll do, how long it takes, and the exact cost before you book.</span></li>
+  <img src="/media/harvest/consult.jpg" alt="Stylist consulting with a client" width="1200" height="900" slot="media" loading="lazy">
+</process-split>
+```
+
+Variants: `<process-split 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/process/process-split/styles.css

@@ -0,0 +1,6 @@
+.c-process-split__copy .section__head{margin-bottom:var(--space-5)}
+.c-process-split__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);counter-reset:step}
+.c-process-split__list > *{counter-increment:step;display:grid;grid-template-columns:2rem 1fr;gap:var(--space-3);align-items:start;color:var(--color-muted)}
+.c-process-split__list > *::before{content:counter(step);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent);font-weight:600;font-size:var(--step-0)}
+.c-process-split__list strong{display:block;color:var(--color-text);font-weight:600}
+.c-process-split--reverse .split > :first-child{order:2}

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

@@ -0,0 +1 @@
+<section class="c-process-split section"><div class="wrap split"><div class="c-process-split__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ol class="c-process-split__list"><slot name="steps"></slot></ol></div><div class="frame ratio-4x3"><slot name="media"></slot></div></div></section>

package/blocks/process/process-stepper/README.md

@@ -0,0 +1,40 @@
+# process-stepper
+
+One large photo panel per step with a step strip below (tabs island).
+
+- **Category:** process
+- **Media:** one photo per step
+- **Registers:** professional, trade, beauty
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `panels` | 3–6 `<div role="tabpanel" id="…" class="photo-card"><img><div class="photo-card__body"><p class="eyebrow">Step n of N</p><h3>…</h3><p>…</p></div></div>` |
+| `tabs` | Matching `<button role="tab" type="button" class="tabs__tab" aria-controls="…"><span>Step n</span><strong>Title</strong></button>` (first has `aria-selected="true"`) |
+
+## Example
+
+```html
+<process-stepper>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our process</p>
+  <h2 slot="heading">Five clear steps from first call to final result.</h2>
+  <p slot="lede" class="lede">Same steps, same care, every case. The same senior team is with you from the first call to the end.</p>
+  <div slot="panels" role="tabpanel" id="step-call" class="photo-card"><img src="/media/harvest/step-1.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 1 of 5</p><h3>First call</h3><p>A senior lawyer takes your call — never an assistant. We check for conflicts and decide together if we're the right fit.</p></div></div>
+  <div slot="panels" role="tabpanel" id="step-strategy" class="photo-card"><img src="/media/harvest/step-2.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 2 of 5</p><h3>Strategy</h3><p>A written plan with the likely paths, costs, and timelines — before you commit to anything.</p></div></div>
+  <div slot="panels" role="tabpanel" id="step-prep" class="photo-card"><img src="/media/harvest/step-3.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 3 of 5</p><h3>Preparation</h3><p>Evidence, witnesses, and filings assembled by the team that will actually argue the case.</p></div></div>
+  <div slot="panels" role="tabpanel" id="step-pretrial" class="photo-card"><img src="/media/harvest/step-4.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 4 of 5</p><h3>Pre-trial</h3><p>Motions and negotiations that often end the matter before a courtroom is needed.</p></div></div>
+  <div slot="panels" role="tabpanel" id="step-result" class="photo-card"><img src="/media/harvest/step-5.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 5 of 5</p><h3>Final result</h3><p>Trial, settlement, or dismissal — and a plain-language debrief on what it means for you.</p></div></div>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-call" aria-selected="true"><span>Step 1</span><strong>First call</strong></button>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-strategy"><span>Step 2</span><strong>Strategy</strong></button>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-prep"><span>Step 3</span><strong>Preparation</strong></button>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-pretrial"><span>Step 4</span><strong>Pre-trial</strong></button>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-result"><span>Step 5</span><strong>Final result</strong></button>
+</process-stepper>
+```
+
+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/process/process-stepper/styles.css

@@ -0,0 +1,11 @@
+.c-process-stepper__panels > [hidden]{display:none}
+.c-process-stepper__panels .photo-card{min-height:clamp(18rem,44vw,30rem)}
+.c-process-stepper__panels .photo-card__body{padding:var(--space-6);max-width:36rem}
+.c-process-stepper__panels .photo-card__body h3{font-size:var(--step-4)}
+.c-process-stepper__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:0;margin-top:var(--space-4);border-bottom:0;border-top:1px solid var(--color-border)}
+.c-process-stepper__list .tabs__tab{display:grid;gap:.1rem;justify-items:start;margin:-1px 0 0;padding:var(--space-4) var(--space-3);border:0;border-top:2px solid transparent;text-align:left;min-height:0}
+.c-process-stepper__list .tabs__tab span{font-size:var(--step-0);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
+.c-process-stepper__list .tabs__tab strong{font-weight:600;color:var(--color-text)}
+.c-process-stepper__list .tabs__tab[aria-selected="true"]{border-top-color:var(--color-accent);background:transparent}
+.c-process-stepper__list .tabs__tab[aria-selected="true"] span{color:var(--color-accent)}
+@media(max-width:719px){.c-process-stepper__list{grid-template-columns:repeat(2,minmax(0,1fr))}}

package/blocks/process/process-stepper/template.html

@@ -0,0 +1 @@
+<section class="c-process-stepper section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-process-stepper__tabs" data-island="tabs"><div class="c-process-stepper__panels"><slot name="panels"></slot></div><div class="tabs__list c-process-stepper__list" role="tablist" aria-label="Steps"><slot name="tabs"></slot></div></div></div></section>

package/blocks/process/process-steps/README.md

@@ -0,0 +1,35 @@
+# process-steps
+
+Numbered horizontal/stacked steps.
+
+- **Category:** process
+- **Media:** optional icons
+- **Registers:** trade, b2b, professional
+- **Variants:** three
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `steps` | 3–4 `<li>` with `<h3>` + `<p>`; numbers render automatically |
+
+## Example
+
+```html
+<process-steps>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">How it works</p>
+  <h2 slot="heading">From first call to final walkthrough</h2>
+  <p slot="lede" class="lede">Most projects take two weeks from estimate to finished roof.</p>
+  <li slot="steps"><h3>Call or book online</h3><p>Tell us what you're seeing. We'll schedule an inspection within three business days.</p></li>
+  <li slot="steps"><h3>Inspection &amp; estimate</h3><p>Drone photos, an attic check, and a written line-item estimate inside 48 hours.</p></li>
+  <li slot="steps"><h3>Install</h3><p>One crew, one to three days, tarps on the beds and a magnet sweep every evening.</p></li>
+  <li slot="steps"><h3>Walkthrough &amp; warranty</h3><p>We walk the roof with you, hand over photos, and register your warranty.</p></li>
+</process-steps>
+```
+
+Variants: `<process-steps 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/process/process-steps/styles.css

@@ -0,0 +1,6 @@
+.c-process-steps__grid{list-style:none;margin:0;padding:0;counter-reset:step;--gap:var(--space-6)}
+.c-process-steps__grid > *{counter-increment:step;display:grid;gap:var(--space-3);align-content:start;position:relative;padding-top:var(--space-5);border-top:1px solid var(--color-border)}
+.c-process-steps__grid > *::before{content:counter(step,decimal-leading-zero);display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent);font-family:var(--font-display);font-weight:600;font-size:var(--step-1);margin-bottom:var(--space-2)}
+.c-process-steps__grid h3{font-size:var(--step-2)}
+.c-process-steps__grid p{margin:0;color:var(--color-muted)}
+@media(min-width:1080px){.c-process-steps--three .c-process-steps__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

package/blocks/process/process-steps/template.html

@@ -0,0 +1 @@
+<section class="c-process-steps section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ol class="grid grid--4 c-process-steps__grid"><slot name="steps"></slot></ol></div></section>

package/blocks/process/process-sticky/README.md

@@ -0,0 +1,38 @@
+# process-sticky
+
+Sticky intro column beside numbered steps with thumbnails.
+
+- **Category:** process
+- **Media:** one thumbnail per step
+- **Registers:** trade, beauty, b2b
+- **Variants:** dark
+
+## 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 |
+| `steps` | 4–6 `<li><img><div><h3>Title</h3><p>…</p></div></li>` (numbers are added automatically) |
+
+## Example
+
+```html
+<process-sticky>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our process</p>
+  <h2 slot="heading">Five steps. Start to finish.</h2>
+  <p slot="lede" class="lede">We handle everything from the first visit to the final cleanup. You always know what happens next and what it costs.</p>
+  <a slot="actions" class="btn" href="/contact">Get a free estimate</a>
+  <li slot="steps"><img src="/media/harvest/step-a.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Free inspection</h3><p>We get on your roof, take photos, and tell you what shape it's in — then leave the decision to you.</p></div></li>
+  <li slot="steps"><img src="/media/harvest/step-b.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Clear written estimate</h3><p>Every cost and material choice on one page. The price we quote is the price you pay.</p></div></li>
+  <li slot="steps"><img src="/media/harvest/step-c.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Pick your date</h3><p>We set a date that works for you and drop off materials the day before, so the crew starts on time.</p></div></li>
+  <li slot="steps"><img src="/media/harvest/step-d.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Installation</h3><p>Our licensed crew tears off the old roof and installs the new one. Most homes are done in one or two days.</p></div></li>
+  <li slot="steps"><img src="/media/harvest/step-e.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Final walkthrough</h3><p>We sweep your yard for nails with magnets and walk the finished roof with you before we call it done.</p></div></li>
+</process-sticky>
+```
+
+Variants: `<process-sticky 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/process/process-sticky/styles.css

@@ -0,0 +1,12 @@
+.c-process-sticky__grid{display:grid;gap:var(--space-7)}
+.c-process-sticky__intro .section__head{margin-bottom:var(--space-5)}
+.c-process-sticky__intro .btn-group:empty{display:none}
+.c-process-sticky__steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);counter-reset:step}
+.c-process-sticky__steps > li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:var(--space-4);align-items:start;counter-increment:step}
+.c-process-sticky__steps > li > img{width:5rem;height:5rem;object-fit:cover;border-radius:var(--radius-md)}
+.c-process-sticky__steps > li > div{display:grid;gap:var(--space-2)}
+.c-process-sticky__steps h3{font-size:var(--step-1);display:flex;gap:var(--space-3);align-items:baseline}
+.c-process-sticky__steps h3::before{content:counter(step,decimal-leading-zero);font-size:var(--step-0);font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}
+.c-process-sticky__steps p{margin:0;color:var(--color-muted);font-size:var(--step-0);max-width:34rem}
+@media(min-width:900px){.c-process-sticky__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-9)}.c-process-sticky__steps{gap:var(--space-7)}.c-process-sticky__steps > li{grid-template-columns:6rem minmax(0,1fr);gap:var(--space-5)}.c-process-sticky__steps > li > img{width:6rem;height:6rem}}
+.c-process-sticky--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)}

package/blocks/process/process-sticky/template.html

@@ -0,0 +1 @@
+<section class="c-process-sticky section"><div class="wrap c-process-sticky__grid"><div class="c-process-sticky__intro sticky-col"><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><ol class="c-process-sticky__steps"><slot name="steps"></slot></ol></div></section>

package/blocks/process/process-timeline/README.md

@@ -0,0 +1,35 @@
+# process-timeline
+
+Vertical timeline.
+
+- **Category:** process
+- **Media:** optional
+- **Registers:** professional, b2b, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional button under the copy |
+| `steps` | 3–6 `<li>` with optional `<p class="eyebrow">` (when/duration), `<h3>`, `<p>` |
+
+## Example
+
+```html
+<process-timeline>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">What to expect</p>
+  <h2 slot="heading">Your first 90 days with us</h2>
+  <p slot="lede" class="lede">We front-load the work so the rest of the year is quiet.</p>
+  <a slot="actions" class="btn" href="/contact">Start a conversation</a>
+  <li slot="steps"><p class="eyebrow eyebrow--accent">Week 1</p><h3>Discovery call and document intake</h3><p>We collect last year's books, bank feeds, and payroll access. One hour of your time, total.</p></li>
+  <li slot="steps"><p class="eyebrow eyebrow--accent">Weeks 2–3</p><h3>Clean-up and chart of accounts</h3><p>We fix categorization, reconcile every account, and set up a chart that matches how you bid jobs.</p></li>
+  <li slot="steps"><p class="eyebrow eyebrow--accent">Week 4</p><h3>First monthly close</h3><p>P&amp;L, balance sheet, and a job-cost summary — reviewed together on a 20-minute call.</p></li>
+  <li slot="steps"><p class="eyebrow eyebrow--accent">Ongoing</p><h3>Books closed by the 5th</h3><p>Same report, same day every month. Questions answered inside one business day.</p></li>
+</process-timeline>
+```
+
+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/process/process-timeline/styles.css

@@ -0,0 +1,10 @@
+.c-process-timeline__copy .section__head{margin-bottom:var(--space-5)}
+@media(min-width:720px){.c-process-timeline__copy{position:sticky;top:calc(var(--header-h) + var(--space-5))}}
+.c-process-timeline__list{list-style:none;margin:0;padding:0;display:grid}
+.c-process-timeline__list > *{position:relative;padding:0 0 var(--space-6) var(--space-7);display:grid;gap:var(--space-2)}
+.c-process-timeline__list > *::before{content:"";position:absolute;left:.55rem;top:.5rem;bottom:0;width:2px;background:var(--color-border)}
+.c-process-timeline__list > *:last-child::before{display:none}
+.c-process-timeline__list > *::after{content:"";position:absolute;left:0;top:.35rem;width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);background:var(--color-bg);border:3px solid var(--color-accent)}
+.c-process-timeline__list h3{font-size:var(--step-2)}
+.c-process-timeline__list p{margin:0;color:var(--color-muted)}
+.c-process-timeline__list .eyebrow{font-size:.75rem}

package/blocks/process/process-timeline/template.html

@@ -0,0 +1 @@
+<section class="c-process-timeline section"><div class="wrap split split--top"><div class="c-process-timeline__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><ol class="c-process-timeline__list"><slot name="steps"></slot></ol></div></section>

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

@@ -0,0 +1,34 @@
+# services-cards
+
+Service cards with optional price.
+
+- **Category:** services
+- **Media:** card images optional
+- **Registers:** trade, beauty, professional, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional "View all" link/button on the head row |
+| `cards` | 3 or 6 `.card.card--interactive` with `.card__media.ratio-4x3`, `<h3>`, `<p>`, optional price line, and a `.btn-arrow` |
+
+## Example
+
+```html
+<services-cards>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Services</p>
+  <h2 slot="heading">Everything above the gutters.</h2>
+  <p slot="lede" class="lede">Repairs, replacements, and the maintenance that keeps you from needing either.</p>
+  <a slot="actions" class="btn-outline" href="/services">All services</a>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/svc-replace.jpg" alt="New architectural shingle roof" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Roof replacement</h3><p>Asphalt, metal, and cedar. Full tear-off with deck repair included.</p><p class="c-services-cards__price">From $9,800</p><a class="btn-arrow" href="/services">Learn more</a></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/svc-repair.jpg" alt="Repairing flashing around a chimney" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Leak repair</h3><p>Same-week diagnosis, most repairs finished in a single visit.</p><p class="c-services-cards__price">From $450</p><a class="btn-arrow" href="/services">Learn more</a></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/svc-gutters.jpg" alt="Seamless aluminum gutters" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Gutters &amp; guards</h3><p>Seamless aluminum sized to your roof, with guards that actually shed pine needles.</p><p class="c-services-cards__price">From $1,900</p><a class="btn-arrow" href="/services">Learn more</a></div></article>
+</services-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/services/services-cards/styles.css

@@ -0,0 +1,3 @@
+.c-services-cards__grid .card__body{gap:var(--space-2)}
+.c-services-cards__price{font-weight:600;color:var(--color-text)}
+.c-services-cards__price{margin:0}

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

@@ -0,0 +1 @@
+<section class="c-services-cards 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="grid grid--3 c-services-cards__grid"><slot name="cards"></slot></div></div></section>

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

@@ -0,0 +1,34 @@
+# services-carousel
+
+Buttoned carousel for 4+ services.
+
+- **Category:** services
+- **Media:** card media
+- **Registers:** trade, beauty, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `cards` | 4–8 `.card` slides with `.card__media.ratio-4x3`, `<h3>`, `<p>` |
+
+## Example
+
+```html
+<services-carousel>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Services</p>
+  <h2 slot="heading">Cut, color, and everything in between.</h2>
+  <p slot="lede" class="lede">Swipe or use the arrows.</p>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/cut.jpg" alt="Precision haircut" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Cuts</h3><p>Consultation, wash, cut, and a blow-dry finish. From $65.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/balayage.jpg" alt="Balayage highlights" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Balayage</h3><p>Hand-painted, low-maintenance dimension. From $220.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/gloss.jpg" alt="Gloss treatment" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Gloss &amp; toner</h3><p>Refresh tone between color appointments. From $55.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/treatment.jpg" alt="Deep conditioning treatment" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Treatments</h3><p>Bond repair and scalp care, 30 minutes. From $45.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/updo.jpg" alt="Bridal updo" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Event styling</h3><p>Bridal and occasion hair, on-site available. From $120.</p></div></article>
+</services-carousel>
+```
+
+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-carousel/styles.css

@@ -0,0 +1,6 @@
+.c-services-carousel__head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-5)}
+.c-services-carousel__head .section__head{margin-bottom:var(--space-6)}
+.c-services-carousel__head .carousel__nav{margin-bottom:var(--space-6);flex-shrink:0}
+.c-services-carousel__carousel .carousel__track{gap:var(--space-5);padding-bottom:var(--space-3)}
+.c-services-carousel__carousel .carousel__track > *{flex-basis:min(85%,20rem)}
+.c-services-carousel__carousel .card__body{gap:var(--space-2)}

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

@@ -0,0 +1 @@
+<section class="c-services-carousel section"><div class="wrap"><div class="c-services-carousel__head"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="carousel__nav"><button type="button" data-carousel-prev aria-label="Previous"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" data-carousel-next aria-label="Next"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button></div></div></div><div class="wrap carousel c-services-carousel__carousel" data-island="carousel" tabindex="0"><div class="carousel__track"><slot name="cards"></slot></div></div></section>

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

@@ -0,0 +1,32 @@
+# services-list
+
+Editorial service list with CTA per row.
+
+- **Category:** services
+- **Media:** optional thumbs
+- **Registers:** professional, trade, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `rows` | 4–8 rows: `<div>` with `<span class="c-services-list__num">`, a copy `<div>` (`<h3>`, `<p>`), and a `.btn-outline.btn-sm` or `.btn-arrow` |
+
+## Example
+
+```html
+<services-list>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Practice areas</p>
+  <h2 slot="heading">Focused on four things, and good at all of them.</h2>
+  <div slot="rows"><span class="c-services-list__num">01</span><div><h3>Wills &amp; trusts</h3><p>Flat-fee estate plans, from a simple will to a revocable trust with pour-over provisions.</p></div><a class="btn-outline btn-sm" href="/practice/estate">Learn more</a></div>
+  <div slot="rows"><span class="c-services-list__num">02</span><div><h3>Probate administration</h3><p>We handle the court filings, creditor notices, and distributions so the family doesn't have to.</p></div><a class="btn-outline btn-sm" href="/practice/probate">Learn more</a></div>
+  <div slot="rows"><span class="c-services-list__num">03</span><div><h3>Elder law &amp; MaineCare planning</h3><p>Protect the house and qualify for care without spending down everything first.</p></div><a class="btn-outline btn-sm" href="/practice/elder">Learn more</a></div>
+  <div slot="rows"><span class="c-services-list__num">04</span><div><h3>Small-business succession</h3><p>Buy-sell agreements and transition plans for owner-operated companies.</p></div><a class="btn-outline btn-sm" href="/practice/business">Learn more</a></div>
+</services-list>
+```
+
+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-list/block.meta.json

@@ -0,0 +1,85 @@
+{
+  "schemaVersion": 1,
+  "id": "services/services-list",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "5b26a7c187d49a5ffe6d79fc5c099f6846529a748bc7b0a5127831fa3e132732",
+  "fit": {
+    "visitorJobs": [
+      "Compare service scope and open the right detail"
+    ],
+    "pageRoles": [
+      "service index"
+    ],
+    "useWhen": [
+      "Compare service scope and open the right detail"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "rows"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "lede"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "numbered rows",
+    "alignment": "left",
+    "density": "dense",
+    "mediaProminence": "low",
+    "geometry": [
+      "list",
+      "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-list.json"
+  }
+}

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

@@ -0,0 +1,10 @@
+.c-services-list__rows{display:grid;border-top:1px solid var(--color-border)}
+.c-services-list__rows > *{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-5);align-items:center;padding:var(--space-5) 0;border-bottom:1px solid var(--color-border)}
+.c-services-list__rows > * > div{display:grid;gap:var(--space-1)}
+.c-services-list__rows p{color:var(--color-muted);margin:0;max-width:52rem}
+.c-services-list__num{font-family:var(--font-display);font-size:var(--step-1);color:var(--color-muted);font-variant-numeric:tabular-nums;min-width:2ch}
+.c-services-list__rows > * > a{grid-column:2;justify-self:start}
+@media(min-width:720px){
+  .c-services-list__rows > *{grid-template-columns:3rem 1fr auto}
+  .c-services-list__rows > * > a{grid-column:auto;justify-self:end}
+}

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

@@ -0,0 +1 @@
+<section class="c-services-list section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-services-list__rows"><slot name="rows"></slot></div></div></section>

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

@@ -0,0 +1,39 @@
+# services-menu
+
+Menu-style priced items.
+
+- **Category:** services
+- **Media:** food photos optional
+- **Registers:** food, beauty
+- **Variants:** two-col
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `items` | 6–12 `.c-services-menu__item` rows: copy `<div>` (`<h3>`, optional `<p>`) then a price `<span>` |
+
+## Example
+
+```html
+<services-menu>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Price list</p>
+  <h2 slot="heading">Hair services</h2>
+  <p slot="lede" class="lede">Prices are starting points; long or dense hair may add time.</p>
+  <div slot="items" class="c-services-menu__item"><h3>Women's cut</h3><p>Consult, wash, cut, blow-dry</p><span>$65</span></div>
+  <div slot="items" class="c-services-menu__item"><h3>Men's cut</h3><p>Includes neck trim and style</p><span>$40</span></div>
+  <div slot="items" class="c-services-menu__item"><h3>Single-process color</h3><p>Roots or all-over</p><span>$95</span></div>
+  <div slot="items" class="c-services-menu__item"><h3>Partial balayage</h3><p>Face-frame and crown</p><span>$160</span></div>
+  <div slot="items" class="c-services-menu__item"><h3>Full balayage</h3><p>Includes toner and treatment</p><span>$220</span></div>
+  <div slot="items" class="c-services-menu__item"><h3>Gloss / toner</h3><span>$55</span></div>
+  <div slot="items" class="c-services-menu__item"><h3>Blowout</h3><span>$45</span></div>
+  <div slot="items" class="c-services-menu__item"><h3>Bond-repair treatment</h3><span>$45</span></div>
+</services-menu>
+```
+
+Variants: `<services-menu variant="two-col">`.
+
+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-menu/styles.css

@@ -0,0 +1,6 @@
+.c-services-menu__grid{display:grid;gap:0 var(--space-8);max-width:44rem;margin-inline:auto}
+.c-services-menu__item{display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
+.c-services-menu__item h3{font-size:var(--step-1);font-family:var(--font-body);font-weight:600;letter-spacing:0}
+.c-services-menu__item p{grid-column:1;margin:0;color:var(--color-muted);font-size:var(--step-0)}
+.c-services-menu__item > span{grid-column:2;grid-row:1;font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
+@media(min-width:900px){.c-services-menu--two-col .c-services-menu__grid{grid-template-columns:1fr 1fr;max-width:none}}

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

@@ -0,0 +1 @@
+<section class="c-services-menu section"><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="c-services-menu__grid"><slot name="items"></slot></div></div></section>