diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
new file mode 100644
index 0000000..27c26be
--- /dev/null
+++ b/blocks/carousel/carousel.css
@@ -0,0 +1,194 @@
+/* homepage feature carousel: one slide visible at a time on a white band,
+   image + heading/body/CTA, with arrows, dots and a counter below */
+.carousel {
+  position: relative;
+  background-color: var(--conti-white);
+}
+
+.carousel-viewport {
+  overflow: hidden;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.carousel-slide {
+  display: flex;
+  flex: 0 0 100%;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.carousel-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 4 / 3;
+  background-color: var(--conti-lightest-grey);
+  line-height: 0;
+}
+
+.carousel-media picture,
+.carousel-media img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-media img {
+  object-fit: contain;
+}
+
+.carousel-content {
+  padding: 24px 0 0;
+}
+
+.carousel-content h3 {
+  margin-top: 0;
+}
+
+.carousel-content p {
+  color: var(--conti-black);
+  font-size: var(--body-font-size-m);
+}
+
+.carousel-content .carousel-cta-wrapper {
+  margin-top: 20px;
+}
+
+.carousel-cta {
+  display: inline-flex;
+  align-items: center;
+  color: var(--conti-black);
+  font-family: var(--heading-font-family);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.25px;
+  text-decoration: underline;
+  text-decoration-color: var(--conti-yellow);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+  text-transform: uppercase;
+}
+
+.carousel-cta:hover,
+.carousel-cta:focus-visible {
+  color: var(--conti-dark-yellow);
+}
+
+.carousel-cta::after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-inline-start: 8px;
+  border-inline-end: 2px solid currentcolor;
+  border-block-end: 2px solid currentcolor;
+  transform: translateY(-1px) rotate(-45deg);
+}
+
+.carousel-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px 0 0;
+}
+
+.carousel-arrow {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--conti-grey);
+  border-radius: 50%;
+  background-color: var(--conti-white);
+  padding: 0;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.carousel-arrow:hover,
+.carousel-arrow:focus-visible {
+  border-color: var(--conti-black);
+}
+
+.carousel-arrow::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-inline-start: 2px solid var(--conti-black);
+  border-block-end: 2px solid var(--conti-black);
+}
+
+.carousel-prev::before {
+  transform: rotate(45deg) translate(1px, -1px);
+}
+
+.carousel-next::before {
+  transform: rotate(-135deg) translate(1px, -1px);
+}
+
+.carousel-dots {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.carousel-dot {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 50%;
+  background-color: var(--conti-grey);
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.carousel-dot:hover,
+.carousel-dot:focus-visible {
+  background-color: var(--conti-dark-yellow);
+}
+
+.carousel-dot[aria-current="true"] {
+  background-color: var(--conti-yellow);
+  transform: scale(1.2);
+}
+
+.carousel-counter {
+  color: var(--conti-black);
+  font-family: var(--heading-font-family);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.25px;
+}
+
+@media (width >= 900px) {
+  .carousel-slide {
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 48px;
+  }
+
+  .carousel-media {
+    flex: 1 1 auto;
+    aspect-ratio: 16 / 9;
+  }
+
+  .carousel-content {
+    flex: 0 0 340px;
+    width: 340px;
+    padding: 0;
+  }
+
+  .carousel-nav {
+    justify-content: flex-start;
+    padding: 32px 0 0;
+  }
+}
diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js
new file mode 100644
index 0000000..b6db895
--- /dev/null
+++ b/blocks/carousel/carousel.js
@@ -0,0 +1,127 @@
+import { createOptimizedPicture } from '../../scripts/aem.js';
+
+/**
+ * Feature carousel: one slide visible at a time, each pairing an image with
+ * a heading, body copy and a CTA link. Reads slides from authored rows
+ * (image cell + text cell) and builds a track plus prev/next arrows, dot
+ * indicators and an "N of X" counter. Wraps around. Autoplay is opt-in via
+ * a `carousel (autoplay)` variant and pauses on hover/focus.
+ * @param {Element} block the carousel block
+ */
+export default function decorate(block) {
+  const rows = [...block.children];
+  const total = rows.length;
+  if (total === 0) return;
+
+  const slides = rows.map((row, i) => {
+    const [imageCell, textCell] = [...row.children];
+
+    const media = document.createElement('div');
+    media.className = 'carousel-media';
+    if (imageCell) {
+      while (imageCell.firstChild) media.append(imageCell.firstChild);
+      media.querySelectorAll('picture > img').forEach((img) => {
+        img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt));
+      });
+    }
+
+    const content = document.createElement('div');
+    content.className = 'carousel-content';
+    if (textCell) {
+      while (textCell.firstChild) content.append(textCell.firstChild);
+    }
+    // the CTA is a paragraph whose entire text is a single link
+    const ctaPara = [...content.children].find((el) => {
+      const a = el.tagName === 'P' ? el.querySelector('a') : null;
+      return a && el.textContent.trim() === a.textContent.trim();
+    });
+    if (ctaPara) {
+      ctaPara.classList.add('carousel-cta-wrapper');
+      ctaPara.querySelector('a').classList.add('carousel-cta');
+    }
+
+    const slide = document.createElement('div');
+    slide.className = 'carousel-slide';
+    slide.setAttribute('role', 'group');
+    slide.setAttribute('aria-roledescription', 'slide');
+    slide.setAttribute('aria-label', `${i + 1} of ${total}`);
+    slide.append(media, content);
+    return slide;
+  });
+
+  const track = document.createElement('div');
+  track.className = 'carousel-track';
+  track.append(...slides);
+
+  const viewport = document.createElement('div');
+  viewport.className = 'carousel-viewport';
+  viewport.append(track);
+
+  const prevBtn = document.createElement('button');
+  prevBtn.type = 'button';
+  prevBtn.className = 'carousel-arrow carousel-prev';
+  prevBtn.setAttribute('aria-label', 'Previous slide');
+
+  const nextBtn = document.createElement('button');
+  nextBtn.type = 'button';
+  nextBtn.className = 'carousel-arrow carousel-next';
+  nextBtn.setAttribute('aria-label', 'Next slide');
+
+  const dots = document.createElement('div');
+  dots.className = 'carousel-dots';
+  const dotButtons = rows.map((row, i) => {
+    const dot = document.createElement('button');
+    dot.type = 'button';
+    dot.className = 'carousel-dot';
+    dot.setAttribute('aria-label', `Show slide ${i + 1} of ${total}`);
+    dots.append(dot);
+    return dot;
+  });
+
+  const counter = document.createElement('div');
+  counter.className = 'carousel-counter';
+  counter.setAttribute('aria-live', 'polite');
+  counter.setAttribute('aria-atomic', 'true');
+
+  const nav = document.createElement('div');
+  nav.className = 'carousel-nav';
+  nav.append(prevBtn, dots, nextBtn, counter);
+
+  let current = 0;
+  const goTo = (index) => {
+    current = ((index % total) + total) % total;
+    track.style.transform = `translateX(-${current * 100}%)`;
+    slides.forEach((slide, i) => {
+      slide.setAttribute('aria-hidden', i === current ? 'false' : 'true');
+      slide.toggleAttribute('inert', i !== current);
+    });
+    dotButtons.forEach((dot, i) => dot.setAttribute('aria-current', i === current ? 'true' : 'false'));
+    counter.textContent = `${current + 1} of ${total}`;
+  };
+
+  prevBtn.addEventListener('click', () => goTo(current - 1));
+  nextBtn.addEventListener('click', () => goTo(current + 1));
+  dotButtons.forEach((dot, i) => dot.addEventListener('click', () => goTo(i)));
+  block.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowLeft') goTo(current - 1);
+    if (e.key === 'ArrowRight') goTo(current + 1);
+  });
+
+  // gentle optional autoplay, default off: add an `autoplay` variant to enable
+  if (block.classList.contains('autoplay')) {
+    let timer;
+    const start = () => { timer = window.setInterval(() => goTo(current + 1), 6000); };
+    const stop = () => window.clearInterval(timer);
+    block.addEventListener('mouseenter', stop);
+    block.addEventListener('mouseleave', start);
+    block.addEventListener('focusin', stop);
+    block.addEventListener('focusout', start);
+    start();
+  }
+
+  goTo(0);
+  block.setAttribute('role', 'region');
+  block.setAttribute('aria-roledescription', 'carousel');
+  block.setAttribute('aria-label', 'Featured highlights');
+  block.replaceChildren(viewport, nav);
+}
diff --git a/blocks/perfect-fit/perfect-fit.css b/blocks/perfect-fit/perfect-fit.css
index ec71c78..82aaeb4 100644
--- a/blocks/perfect-fit/perfect-fit.css
+++ b/blocks/perfect-fit/perfect-fit.css
@@ -32,6 +32,21 @@ main .section.perfect-fit-container {
   padding: 0;
 }
 
+.perfect-fit-item {
+  display: block;
+  border: 0;
+  background: none;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.perfect-fit-item:focus-visible {
+  outline: 2px solid var(--conti-yellow);
+  outline-offset: 4px;
+}
+
 .perfect-fit-items p {
   display: flex;
   align-items: center;
@@ -61,3 +76,143 @@ main .section.perfect-fit-container {
     padding: 14px 32px;
   }
 }
+
+/* tire-finder modal, opened from the perfect-fit items above */
+.perfect-fit-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / 60%);
+  padding: 16px;
+}
+
+.perfect-fit-overlay[hidden] {
+  display: none;
+}
+
+body.perfect-fit-modal-open {
+  overflow: hidden;
+}
+
+.perfect-fit-dialog {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  background-color: var(--conti-white);
+  padding: 32px 24px 24px;
+  text-align: left;
+}
+
+.perfect-fit-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  border: 0;
+  background: none;
+  padding: 8px;
+  color: var(--conti-black);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.perfect-fit-modal-title {
+  margin: 0 0 20px;
+  color: var(--conti-black);
+  font-family: var(--heading-font-family);
+  font-size: var(--heading-font-size-s);
+  font-weight: 300;
+}
+
+.perfect-fit-tablist {
+  display: flex;
+  gap: 24px;
+  border-bottom: 1px solid var(--conti-grey);
+  margin-bottom: 20px;
+}
+
+.perfect-fit-tab {
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  margin-bottom: -1px;
+  padding: 0 0 12px;
+  color: var(--conti-darkest-grey);
+  font-family: var(--heading-font-family);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.25px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.perfect-fit-tab[aria-selected="true"] {
+  border-bottom-color: var(--conti-yellow);
+  color: var(--conti-black);
+}
+
+.perfect-fit-close:focus-visible,
+.perfect-fit-tab:focus-visible {
+  outline: 2px solid var(--conti-yellow);
+  outline-offset: 2px;
+}
+
+.perfect-fit-form {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.perfect-fit-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.perfect-fit-field label {
+  color: var(--conti-black);
+  font-size: var(--body-font-size-xs);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.perfect-fit-field select,
+.perfect-fit-field input {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--conti-grey);
+  border-radius: 0;
+  background-color: var(--conti-white);
+  padding: 10px 12px;
+  color: var(--conti-black);
+  font-family: var(--body-font-family);
+  font-size: var(--body-font-size-s);
+}
+
+.perfect-fit-field select:focus-visible,
+.perfect-fit-field input:focus-visible {
+  outline: 2px solid var(--conti-yellow);
+  outline-offset: 2px;
+}
+
+.perfect-fit-form .button {
+  margin-top: 8px;
+  justify-self: start;
+}
+
+@media (width >= 700px) {
+  .perfect-fit-form {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .perfect-fit-form .button {
+    grid-column: 1 / -1;
+  }
+}
diff --git a/blocks/perfect-fit/perfect-fit.js b/blocks/perfect-fit/perfect-fit.js
index 13d8382..a3def8e 100644
--- a/blocks/perfect-fit/perfect-fit.js
+++ b/blocks/perfect-fit/perfect-fit.js
@@ -1,7 +1,257 @@
+/**
+ * "Find your perfect fit:" bar plus its tire-finder modal. The bar's three
+ * items open the modal on a matching tab (By Vehicle / By Tire Size / By
+ * Plate); each tab is a simple, non-functional sample search form.
+ */
+
+const TABS = [
+  { id: 'vehicle', label: 'By Vehicle' },
+  { id: 'tire-size', label: 'By Tire Size' },
+  { id: 'plate', label: 'By Plate' },
+];
+
+function range(start, end, step = 1) {
+  const values = [];
+  for (let n = start; n <= end; n += step) values.push(n);
+  return values;
+}
+
+const YEARS = range(2015, 2026).reverse();
+const MAKES = ['Chevrolet', 'Ford', 'Toyota', 'BMW', 'Honda'];
+const WIDTHS = range(185, 315, 10);
+const ASPECT_RATIOS = range(40, 75, 5);
+const RIM_DIAMETERS = range(15, 22);
+const STATES = ['California', 'Florida', 'Illinois', 'New York', 'Ohio', 'Texas'];
+
+/**
+ * Builds a labelled `<select>` or `<input>` field.
+ * @returns {{ wrapper: Element, field: Element }}
+ */
+function createField(tag, id, labelText) {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'perfect-fit-field';
+  const label = document.createElement('label');
+  label.setAttribute('for', id);
+  label.textContent = labelText;
+  const field = document.createElement(tag);
+  field.id = id;
+  field.name = id;
+  wrapper.append(label, field);
+  return { wrapper, field };
+}
+
+/** Fills a `<select>` with a disabled placeholder plus one option per value. */
+function populateSelect(select, values, placeholder) {
+  const placeholderOption = document.createElement('option');
+  placeholderOption.value = '';
+  placeholderOption.textContent = placeholder;
+  placeholderOption.disabled = true;
+  placeholderOption.selected = true;
+  select.append(placeholderOption, ...values.map((value) => {
+    const option = document.createElement('option');
+    option.value = value;
+    option.textContent = value;
+    return option;
+  }));
+}
+
+function buildSearchButton() {
+  const button = document.createElement('button');
+  button.type = 'submit';
+  button.className = 'button primary';
+  button.textContent = 'Search';
+  return button;
+}
+
+function buildForm(fields) {
+  const form = document.createElement('form');
+  form.className = 'perfect-fit-form';
+  form.action = '/tires';
+  form.append(...fields, buildSearchButton());
+  return form;
+}
+
+function buildVehicleForm() {
+  const year = createField('select', 'perfect-fit-year', 'Year');
+  populateSelect(year.field, YEARS, 'Select year');
+  const make = createField('select', 'perfect-fit-make', 'Make');
+  populateSelect(make.field, MAKES, 'Select make');
+  const model = createField('select', 'perfect-fit-model', 'Model');
+  populateSelect(model.field, [], 'Select...');
+  const trim = createField('select', 'perfect-fit-trim', 'Trim');
+  populateSelect(trim.field, [], 'Select...');
+  return buildForm([year.wrapper, make.wrapper, model.wrapper, trim.wrapper]);
+}
+
+function buildTireSizeForm() {
+  const width = createField('select', 'perfect-fit-width', 'Width');
+  populateSelect(width.field, WIDTHS, 'Select width');
+  const aspectRatio = createField('select', 'perfect-fit-aspect-ratio', 'Aspect Ratio');
+  populateSelect(aspectRatio.field, ASPECT_RATIOS, 'Select ratio');
+  const rim = createField('select', 'perfect-fit-rim', 'Rim Diameter');
+  populateSelect(rim.field, RIM_DIAMETERS, 'Select diameter');
+  return buildForm([width.wrapper, aspectRatio.wrapper, rim.wrapper]);
+}
+
+function buildPlateForm() {
+  const plate = createField('input', 'perfect-fit-plate', 'License Plate');
+  plate.field.type = 'text';
+  plate.field.autocomplete = 'off';
+  const state = createField('select', 'perfect-fit-state', 'State');
+  populateSelect(state.field, STATES, 'Select state');
+  return buildForm([plate.wrapper, state.wrapper]);
+}
+
+/** Keyboard-focusable elements in `container`, ignoring hidden tab panels. */
+function getFocusable(container) {
+  const candidates = [...container.querySelectorAll('button, input, select, textarea')];
+  return candidates.filter((el) => (
+    !el.disabled && el.tabIndex !== -1 && !el.closest('[hidden]')
+  ));
+}
+
+/**
+ * Builds the tire-finder modal (overlay, tabs, one form per tab) and wires
+ * its interactions. Detached from the DOM; the caller appends `overlay`.
+ * @returns {{ overlay: Element, open: Function }}
+ */
+function buildModal() {
+  const overlay = document.createElement('div');
+  overlay.className = 'perfect-fit-overlay';
+  overlay.hidden = true;
+
+  const dialog = document.createElement('div');
+  dialog.className = 'perfect-fit-dialog';
+  dialog.setAttribute('role', 'dialog');
+  dialog.setAttribute('aria-modal', 'true');
+  dialog.setAttribute('aria-labelledby', 'perfect-fit-modal-title');
+
+  const closeButton = document.createElement('button');
+  closeButton.type = 'button';
+  closeButton.className = 'perfect-fit-close';
+  closeButton.setAttribute('aria-label', 'Close');
+  closeButton.textContent = '×';
+
+  const title = document.createElement('h2');
+  title.id = 'perfect-fit-modal-title';
+  title.className = 'perfect-fit-modal-title';
+  title.textContent = 'Find Your Perfect Fit';
+
+  const tablist = document.createElement('div');
+  tablist.className = 'perfect-fit-tablist';
+  tablist.setAttribute('role', 'tablist');
+  tablist.setAttribute('aria-label', 'Find your perfect fit');
+
+  const panelsWrapper = document.createElement('div');
+  panelsWrapper.className = 'perfect-fit-panels';
+
+  const forms = {
+    vehicle: buildVehicleForm,
+    'tire-size': buildTireSizeForm,
+    plate: buildPlateForm,
+  };
+  const tabs = {};
+  const panels = {};
+
+  TABS.forEach(({ id, label }) => {
+    const tab = document.createElement('button');
+    tab.type = 'button';
+    tab.id = `perfect-fit-tab-${id}`;
+    tab.className = 'perfect-fit-tab';
+    tab.setAttribute('role', 'tab');
+    tab.setAttribute('aria-selected', 'false');
+    tab.setAttribute('aria-controls', `perfect-fit-panel-${id}`);
+    tab.tabIndex = -1;
+    tab.textContent = label;
+    tablist.append(tab);
+    tabs[id] = tab;
+
+    const panel = document.createElement('div');
+    panel.id = `perfect-fit-panel-${id}`;
+    panel.setAttribute('role', 'tabpanel');
+    panel.setAttribute('aria-labelledby', tab.id);
+    panel.hidden = true;
+    panel.append(forms[id]());
+    panelsWrapper.append(panel);
+    panels[id] = panel;
+  });
+
+  dialog.append(closeButton, title, tablist, panelsWrapper);
+  overlay.append(dialog);
+
+  let lastTrigger = null;
+
+  function switchTab(tabId) {
+    TABS.forEach(({ id }) => {
+      const selected = id === tabId;
+      tabs[id].setAttribute('aria-selected', String(selected));
+      tabs[id].tabIndex = selected ? 0 : -1;
+      panels[id].hidden = !selected;
+    });
+  }
+
+  function close() {
+    overlay.hidden = true;
+    document.body.classList.remove('perfect-fit-modal-open');
+    if (lastTrigger) lastTrigger.focus();
+  }
+
+  function open(tabId, trigger) {
+    lastTrigger = trigger;
+    switchTab(tabId);
+    overlay.hidden = false;
+    document.body.classList.add('perfect-fit-modal-open');
+    const focusable = getFocusable(panels[tabId]);
+    (focusable[0] || closeButton).focus();
+  }
+
+  closeButton.addEventListener('click', close);
+  overlay.addEventListener('click', (event) => {
+    if (event.target === overlay) close();
+  });
+  dialog.addEventListener('submit', (event) => event.preventDefault());
+  dialog.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      close();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+    const focusable = getFocusable(dialog);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  });
+
+  TABS.forEach(({ id }) => {
+    tabs[id].addEventListener('click', () => switchTab(id));
+  });
+  tablist.addEventListener('keydown', (event) => {
+    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
+    const ids = TABS.map(({ id }) => id);
+    const current = ids.findIndex((id) => tabs[id] === document.activeElement);
+    if (current === -1) return;
+    const delta = event.key === 'ArrowRight' ? 1 : -1;
+    const next = ids[(current + delta + ids.length) % ids.length];
+    event.preventDefault();
+    switchTab(next);
+    tabs[next].focus();
+  });
+
+  return { overlay, open };
+}
+
 /**
  * "Find your perfect fit:" bar: a label followed by a row of icon+label
- * shortcut links. The first authored row is the label, the second row's
- * cells are the items.
+ * shortcut buttons. Each button opens the tire-finder modal on the matching
+ * tab. Authoring is unchanged: first row is the label, second row's cells
+ * are the items.
  * @param {Element} block the perfect-fit block
  */
 export default function decorate(block) {
@@ -10,15 +260,24 @@ export default function decorate(block) {
   const label = labelRow ? labelRow.querySelector('p') : null;
   if (label) label.className = 'perfect-fit-label';
 
+  const modal = buildModal();
+
   const list = document.createElement('ul');
   list.className = 'perfect-fit-items';
   const cells = itemsRow ? [...itemsRow.children] : [];
-  cells.forEach((cell) => {
+  cells.forEach((cell, index) => {
+    const tabId = (TABS[index] || TABS[0]).id;
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'perfect-fit-item';
+    button.dataset.tab = tabId;
+    while (cell.firstElementChild) button.append(cell.firstElementChild);
+    button.addEventListener('click', () => modal.open(tabId, button));
     const li = document.createElement('li');
-    while (cell.firstElementChild) li.append(cell.firstElementChild);
+    li.append(button);
     list.append(li);
   });
 
   const children = label ? [label, list] : [list];
-  block.replaceChildren(...children);
+  block.replaceChildren(...children, modal.overlay);
 }
diff --git a/blocks/promo-bar/promo-bar.css b/blocks/promo-bar/promo-bar.css
index 90b5681..0901e23 100644
--- a/blocks/promo-bar/promo-bar.css
+++ b/blocks/promo-bar/promo-bar.css
@@ -10,29 +10,106 @@ main .section.promo-bar-container {
 .promo-bar {
   background-color: var(--conti-yellow);
   color: var(--conti-black);
+}
+
+/* row 1: slim toggle bar, full-bleed background with a centered max-width inner */
+.promo-bar-bar {
+  display: flex;
+  justify-content: center;
+}
+
+.promo-bar-bar-inner {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
   text-align: center;
 }
 
-.promo-bar > div > div {
+.promo-bar-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   margin: 0;
-  padding: 4px 24px;
+  border: 0;
+  background: none;
+  padding: 10px 0;
+  color: inherit;
   font-family: var(--body-font-family);
   font-size: 12px;
   font-weight: 700;
+  cursor: pointer;
 }
 
-.promo-bar p {
-  margin: 0;
+.promo-bar-toggle:hover,
+.promo-bar-toggle:focus-visible {
+  color: var(--conti-dark-black);
 }
 
-.promo-bar p::before {
-  content: '+';
-  display: inline-block;
-  margin-inline-end: 8px;
-  font-weight: bold;
+.promo-bar-toggle:focus-visible {
+  outline: 2px solid var(--conti-dark-black);
+  outline-offset: 2px;
 }
 
-.promo-bar a:any-link {
-  color: inherit;
-  text-decoration: underline;
+.promo-bar-chevron {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid currentcolor;
+  border-bottom: 2px solid currentcolor;
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+.promo-bar-toggle[aria-expanded="true"] .promo-bar-chevron {
+  transform: rotate(-135deg);
+}
+
+/* row 2: collapsible panel, animated via a 0fr/1fr grid track so the
+   height never has to be measured in JS */
+.promo-bar-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  background-color: var(--conti-white);
+  transition: grid-template-rows 0.3s ease;
+}
+
+.promo-bar-panel.promo-bar-panel-open {
+  grid-template-rows: 1fr;
+}
+
+.promo-bar-panel-inner {
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.promo-bar-panel-open .promo-bar-panel-inner {
+  opacity: 1;
+  transition-delay: 0.05s;
+}
+
+.promo-bar-panel-inner h3 {
+  margin-top: 0;
+}
+
+.promo-bar-panel-inner p {
+  margin: 0.25em 0;
+}
+
+@media (width >= 900px) {
+  .promo-bar-bar-inner {
+    padding: 0 32px;
+  }
+
+  .promo-bar-panel-inner {
+    padding: 32px;
+  }
 }
diff --git a/blocks/promo-bar/promo-bar.js b/blocks/promo-bar/promo-bar.js
index de043d2..0c9f121 100644
--- a/blocks/promo-bar/promo-bar.js
+++ b/blocks/promo-bar/promo-bar.js
@@ -1,7 +1,65 @@
 /**
- * Thin promo bar: static text content, no behavior needed. The default
- * row/cell markup is styled directly by promo-bar.css.
+ * Promo bar: a slim disclosure. Row 1 is the toggle label, row 2 is the
+ * detail panel revealed on click. The row/cell divs are reused as the
+ * bar/panel wrappers rather than replaced, so only the button and its
+ * label/chevron spans are newly created.
  * @param {Element} block the promo-bar block
  */
-// eslint-disable-next-line no-unused-vars
-export default function decorate(block) {}
+export default function decorate(block) {
+  const [toggleRow, panelRow] = [...block.children];
+  if (!toggleRow || !panelRow) return;
+
+  const toggleCell = toggleRow.firstElementChild;
+  const panelCell = panelRow.firstElementChild;
+  if (!toggleCell || !panelCell) return;
+
+  const panelId = `promo-bar-panel-${Math.random().toString(36).slice(2, 8)}`;
+
+  // pull the authored text out of its <p> wrapper so it can live in a
+  // <button> (a <p> is not valid content inside a button)
+  const toggleContent = toggleCell.firstElementChild || toggleCell;
+  const label = document.createElement('span');
+  label.className = 'promo-bar-toggle-label';
+  label.append(...toggleContent.childNodes);
+
+  const chevron = document.createElement('span');
+  chevron.className = 'promo-bar-chevron';
+  chevron.setAttribute('aria-hidden', 'true');
+
+  const toggle = document.createElement('button');
+  toggle.type = 'button';
+  toggle.className = 'promo-bar-toggle';
+  toggle.setAttribute('aria-expanded', 'false');
+  toggle.setAttribute('aria-controls', panelId);
+  toggle.append(label, chevron);
+
+  toggleRow.className = 'promo-bar-bar';
+  toggleCell.className = 'promo-bar-bar-inner';
+  toggleCell.replaceChildren(toggle);
+
+  panelRow.className = 'promo-bar-panel';
+  panelRow.id = panelId;
+  panelRow.setAttribute('inert', '');
+  panelCell.className = 'promo-bar-panel-inner';
+  panelCell.querySelectorAll('a[href]').forEach((a) => {
+    a.classList.add('button', 'secondary');
+    if (a.parentElement.tagName === 'P') a.parentElement.className = 'button-wrapper';
+  });
+
+  const setExpanded = (expanded) => {
+    toggle.setAttribute('aria-expanded', String(expanded));
+    panelRow.classList.toggle('promo-bar-panel-open', expanded);
+    panelRow.toggleAttribute('inert', !expanded);
+  };
+
+  toggle.addEventListener('click', () => {
+    setExpanded(toggle.getAttribute('aria-expanded') !== 'true');
+  });
+
+  block.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
+      setExpanded(false);
+      toggle.focus();
+    }
+  });
+}