diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..c38adc2
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp@1.6.0", "--headless", "--isolated"]
+    }
+  }
+}
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index 69bf2fd..f957d9c 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -1,105 +1,249 @@
+/* ===== Progress Rail footer — light gray bg, dark nav text, blue legal
+   links. Verified directly against the source via getComputedStyle:
+   contrary to an earlier (wrong, unverified) assumption, this is NOT a
+   dark/white-text footer — background is a flat #ccc throughout, and
+   both the nav links and headings render in the page's own dark text
+   color, not white.
+
+   The gray lives on the outer <footer> element (full viewport width),
+   not on the block itself — verified via getBoundingClientRect: the
+   source's own outer footer wrapper spans the full 1600px viewport with
+   the gray background, while its inner `.footer.block` (background:
+   transparent) is just the centered/padded 1140px content column. */
 footer {
-  background-color: var(--brand-dark, #131313);
-  color: #fff;
-  font-size: var(--body-font-size-xs, 14px);
+  background-color: #ccc;
 }
 
-footer .footer > div {
-  margin: auto;
-  max-width: 1200px;
-  padding: 40px 24px 24px;
+/* the block itself is the grid container (verified: the source's own
+   `.footer.block` stacks its three sections — nav, social, copyright —
+   as named grid rows with a 24px row gap), so the three sections are
+   appended as its direct children in footer.js rather than nested in an
+   extra wrapper div. */
+footer .footer {
+  display: grid;
+  grid-template-areas: 'nav' 'social' 'copyright';
+  grid-template-columns: 1fr;
+  gap: 24px;
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 32px;
+  color: var(--text-color);
+  font-size: 14px;
 }
 
 footer .footer p {
   margin: 0;
 }
 
-@media (width >= 900px) {
-  footer .footer > div {
-    padding: 40px 32px 24px;
-  }
-}
-
-/* ===== Progress Rail footer branding — dark bg, white uppercase nav ===== */
+/* links */
 footer a:any-link {
-  color: #fff;
+  color: var(--text-color);
   text-decoration: none;
 }
 
-footer a:any-link:hover {
-  color: var(--brand-yellow, #ffcd11);
+footer a:hover {
+  color: var(--brand-yellow-hover, #e6b800);
+  text-decoration: underline;
+}
+
+/* ===== nav columns — each category is a native <details>/<summary>
+   accordion (collapsible on mobile, forced open and non-interactive at
+   desktop via the media query below — matches the source, which does the
+   same rather than using a heading + always-visible list). ===== */
+footer .footer-nav {
+  grid-area: nav;
 }
 
-/* column headings — white, bold, uppercase */
-footer .footer h3 {
-  margin: 0 0 12px;
-  color: #fff;
+footer .footer-nav .columns > div {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px 24px;
+
+  /* the generic .columns block centers items vertically at >=900px
+     (blocks/columns/columns.css) — verified against the source that
+     footer categories are top-aligned instead, so a shorter column
+     (e.g. "Supply Chain", 3 links) doesn't have its heading pulled down
+     to the vertical center of a taller neighbor (e.g. "Company", 5). */
+  align-items: start;
+}
+
+footer .footer-nav .columns > div > div {
+  min-width: 0;
+}
+
+footer .footer-nav details > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 16.8px 0;
+  list-style: none;
+  cursor: pointer;
   font-family: var(--heading-font-family);
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }
 
-footer .footer ul {
+footer .footer-nav details > summary::-webkit-details-marker {
+  display: none;
+}
+
+footer .footer-nav details > summary .icon-chevron {
+  flex: none;
+  height: 14px;
+  width: 14px;
+  transition: transform 0.2s ease;
+}
+
+footer .footer-nav details[open] > summary .icon-chevron {
+  transform: rotate(180deg);
+}
+
+footer .footer-nav ul {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 0 0 4px;
 }
 
-footer .footer li {
-  margin: 0 0 8px;
-  line-height: 1.4;
+footer .footer-nav li {
+  padding: 5.6px 0;
+  line-height: 1.6;
 }
 
-/* columns block → responsive grid of link columns */
-footer .columns > div {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 28px 24px;
+@media (width >= 600px) {
+  footer .footer-nav .columns > div {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
-footer .columns > div > div {
-  min-width: 0;
+@media (width >= 900px) {
+  /* at desktop every category stays permanently expanded, so the chevron
+     (a mobile collapse affordance) and the click-to-toggle interaction
+     it represents are both switched off. */
+  footer .footer-nav details > summary {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  footer .footer-nav details > summary .icon-chevron {
+    display: none;
+  }
 }
 
-/* legal / copyright row (loose links in the default-content-wrapper) */
-footer .default-content-wrapper > p:last-child {
+@media (width >= 1200px) {
+  footer .footer-nav .columns > div {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 16px;
+  }
+}
+
+/* ===== social icon row — a second, icon-only rendering of the same
+   links as the nav's own "Social Media" column (verified against the
+   source: both exist side by side). ===== */
+footer .footer-social {
+  grid-area: social;
+}
+
+footer .footer-social ul {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 14px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+footer .footer-social a {
+  display: flex;
   align-items: center;
-  gap: 6px 14px;
-  margin-top: 28px;
-  padding-top: 18px;
-  border-top: 1px solid rgb(255 255 255 / 20%);
+  justify-content: center;
+  height: 44px;
+  width: 44px;
+}
+
+footer .footer-social .icon {
+  display: block;
+  height: 24px;
+  width: 24px;
+}
+
+footer .footer-social .icon svg {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-footer .default-content-wrapper > p:last-child a:any-link {
+/* ===== legal / copyright row — a plain list, not a paragraph (the
+   source's own markup), with a literal "|" separator generated between
+   items rather than typed into the content, and its own blue link color
+   distinct from the rest of the footer's dark text.
+
+   It also sits on a distinct white background, not the footer's own
+   gray — verified via getComputedStyle(el, '::after'): the source gives
+   this row a full-viewport-width white rectangle behind it (a
+   `calc(50% - 50vw)` full-bleed technique, escaping the footer's own
+   padded/centered column), extending from its own top edge down through
+   its 32px of padding-top plus another 32px below it. ===== */
+footer .footer-copyright {
+  grid-area: copyright;
   position: relative;
-  color: rgb(255 255 255 / 85%);
-  font-size: 13px;
+  isolation: isolate;
+  padding-top: 32px;
+  color: #2679b8;
 }
 
-footer .default-content-wrapper > p:last-child a + a::before {
+footer .footer-copyright::after {
   content: '';
   position: absolute;
-  left: -8px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1px;
-  height: 12px;
-  background-color: rgb(255 255 255 / 30%);
+  top: 0;
+  left: calc(50% - 50vw);
+  bottom: -32px;
+  z-index: -1;
+  width: 100vw;
+  background-color: var(--background-color);
 }
 
-@media (width >= 600px) {
-  footer .columns > div {
-    grid-template-columns: repeat(3, 1fr);
-  }
+footer .footer-copyright ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
 }
 
-@media (width >= 900px) {
-  footer .columns > div {
-    grid-template-columns: repeat(6, 1fr);
-    gap: 32px 24px;
-  }
+footer .footer-copyright li {
+  margin: 0;
+}
+
+footer .footer-copyright li:not(:first-child)::before {
+  content: '|';
+  margin: 0 8px;
+  color: #555;
+}
+
+footer .footer-copyright a,
+footer .footer-copyright button {
+  color: inherit;
+}
+
+/* the cookie-preference control is a <button>, not a link — strip its
+   native chrome so it reads identically to the links beside it */
+footer .footer-copyright button {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+footer .footer-copyright a:hover,
+footer .footer-copyright button:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
 }
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
index ff5708a..e503cb8 100644
--- a/blocks/footer/footer.js
+++ b/blocks/footer/footer.js
@@ -1,6 +1,84 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
+// Inline (not decorateIcons' <img>) so currentColor tracks the link's hover
+// color — same reasoning as the chevron icons elsewhere in this project.
+// Path data copied directly from the source's own icons.
+const SOCIAL_ICONS = {
+  'facebook.com': '<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
+    + '<path fill="currentColor" d="M20.6067 22.9079H15.9121C15.5439 22.9079 15.1757 22.6318 15.1757 22.1715V14.7155C15.1757 14.3473 15.4519 13.9791 15.9121 13.9791H17.0167C17.2008 13.9791 17.2929 13.887 17.2929 13.7029V12.5063C17.2929 12.3222 17.2008 12.2301 17.0167 12.2301H16.0042C15.636 12.2301 15.2678 11.954 15.2678 11.4937V10.113C15.2678 8.08787 16.5565 8.08787 17.2008 8.08787H17.9372C18.0293 8.08787 18.0293 8.08787 18.1213 7.99582C18.2134 7.90377 18.2134 7.81172 18.2134 7.81172V6.61506C18.2134 6.52301 18.1213 6.43096 18.1213 6.43096C18.1213 6.43096 18.0293 6.33891 17.9372 6.33891H16.1883C14.5314 6.24686 13.1506 7.53556 13.0586 9.19247C13.0586 9.37657 13.0586 9.46862 13.0586 9.65272V11.5858C13.0586 11.954 12.7824 12.3222 12.4142 12.3222H11.4017C11.3096 12.3222 11.2176 12.4142 11.2176 12.4142C11.2176 12.4142 11.1255 12.5063 11.1255 12.5983V13.795C11.1255 13.9791 11.2176 14.0711 11.4017 14.0711H12.4142C12.7824 14.0711 13.0586 14.3473 13.0586 14.8075V22.2636C13.0586 22.6318 12.7824 23 12.4142 23H3.30126C2.01255 23 1 21.9874 1 20.6987V3.30126C1 2.01255 2.01255 1 3.30126 1H20.6987C21.9874 1 23 2.01255 23 3.30126V20.6987C22.9079 21.8954 21.8954 22.9079 20.6067 22.9079ZM16.5565 21.5272H20.6067C21.0669 21.5272 21.5272 21.159 21.5272 20.6067V3.30126C21.5272 2.841 21.159 2.38075 20.6067 2.38075H3.30126C2.841 2.38075 2.38075 2.74895 2.38075 3.30126V20.6987C2.38075 21.159 2.74895 21.6192 3.30126 21.6192H11.6778V15.5439H11.4017C10.4812 15.5439 9.74477 14.8075 9.74477 13.887V12.6904C9.74477 11.7699 10.5732 11.0335 11.4017 11.0335H11.6778V9.74477C11.6778 9.56067 11.6778 9.37657 11.6778 9.10042C11.7699 6.70711 13.795 4.77406 16.1883 4.95816H17.9372C18.3975 4.95816 18.8577 5.14226 19.1339 5.51046C19.41 5.87866 19.5941 6.24686 19.5941 6.70711V7.81172C19.5941 8.27197 19.41 8.64017 19.1339 9.00837C18.8577 9.28452 18.3975 9.46862 17.9372 9.46862H17.2008C17.1088 9.46862 16.8326 9.46862 16.7406 9.46862C16.7406 9.46862 16.6485 9.56067 16.6485 10.113V10.9414H17.0167C17.9372 10.9414 18.6736 11.6778 18.6736 12.5983V13.795C18.6736 14.7155 17.9372 15.4519 17.0167 15.4519H16.5565V21.5272Z"/>'
+    + '</svg>',
+  'linkedin.com': '<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
+    + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M4.54231 1.00016C4.53254 0.99995 4.52277 0.999947 4.51301 1.00015C3.80311 1.01498 3.12544 1.29934 2.61752 1.79551C2.10959 2.29169 1.80946 2.96252 1.77802 3.67187C1.77743 3.68538 1.77722 3.69891 1.77741 3.71244C1.78771 4.43764 2.07626 5.13116 2.5834 5.64964C3.09055 6.16813 3.77752 6.47193 4.50231 6.49826C4.51596 6.49876 4.52963 6.49885 4.54328 6.49854C5.27334 6.48192 5.96759 6.17891 6.47619 5.6549C6.9848 5.13088 7.26696 4.4279 7.26178 3.69767C7.26173 3.69075 7.26157 3.68383 7.26132 3.67692C7.23507 2.9681 6.93891 2.29612 6.43344 1.79851C5.92798 1.30091 5.25145 1.0153 4.54231 1.00016ZM3.58699 2.78794C3.83939 2.54137 4.175 2.39862 4.52732 2.3876C4.87726 2.39875 5.21038 2.54131 5.46014 2.78718C5.71091 3.03405 5.85885 3.36659 5.87448 3.71789C5.87436 4.08022 5.73319 4.42844 5.48065 4.68863C5.23045 4.94642 4.89061 5.09751 4.53215 5.11092C4.17052 5.09262 3.82874 4.93874 3.5752 4.67953C3.32161 4.42027 3.17532 4.07509 3.16507 3.71307C3.18562 3.36317 3.33592 3.0332 3.58699 2.78794Z"/>'
+    + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M4.5275 7.82742C4.40325 7.82742 4.28228 7.82468 4.158 7.82185L4.15517 7.82179C4.03489 7.81905 3.90833 7.81617 3.78672 7.81683C3.55198 7.81808 3.26712 7.83124 2.99853 7.9169C2.70312 8.01111 2.41936 8.19577 2.22902 8.52216C2.05352 8.8231 1.99774 9.17697 1.99774 9.54062V21.3118C1.99774 21.6782 2.05401 22.0373 2.23709 22.3396C2.43726 22.6702 2.73373 22.8444 3.03078 22.9263C3.29902 23.0003 3.58304 23.0034 3.81078 22.9989C3.92571 22.9966 4.02313 22.9928 4.11712 22.9891C4.2479 22.9839 4.37217 22.979 4.5275 22.979C4.68304 22.979 4.80701 22.9839 4.93751 22.9891C5.03085 22.9928 5.12766 22.9966 5.24164 22.9989C5.46769 23.0034 5.75091 23.0004 6.01838 22.9257C6.31595 22.8426 6.61001 22.6663 6.80715 22.3352C6.98668 22.0338 7.0414 21.6763 7.0414 21.3118V9.54062C7.0414 9.17884 6.98718 8.82658 6.81514 8.52655C6.62784 8.1999 6.34665 8.01314 6.05089 7.91765C5.78305 7.83118 5.49898 7.81808 5.26582 7.81683C5.14507 7.81617 5.01927 7.81905 4.89963 7.82178L4.89626 7.82185C4.77244 7.82468 4.65173 7.82742 4.5275 7.82742ZM3.3851 9.54062C3.3851 9.36037 3.40777 9.27275 3.41998 9.2387C3.47702 9.22051 3.58459 9.20529 3.79415 9.20417C3.89373 9.20364 4.0013 9.20601 4.12647 9.20886L4.13208 9.20898C4.25266 9.21173 4.38715 9.21478 4.5275 9.21478C4.66813 9.21478 4.80264 9.21171 4.92302 9.20897L4.9279 9.20886C5.05269 9.20601 5.15956 9.20364 5.25834 9.20417C5.46039 9.20526 5.56458 9.21965 5.61975 9.23639C5.63213 9.27221 5.65404 9.36113 5.65404 9.54062V21.3118C5.65404 21.4676 5.63762 21.5532 5.62609 21.5942C5.5659 21.6073 5.46076 21.6156 5.26914 21.6118C5.21042 21.6106 5.13303 21.6078 5.04608 21.6046C4.88661 21.5987 4.69495 21.5917 4.5275 21.5917C4.36048 21.5917 4.16889 21.5987 4.00891 21.6046C3.92118 21.6078 3.84292 21.6106 3.78347 21.6118C3.58414 21.6157 3.47567 21.6068 3.41358 21.5924C3.40206 21.5528 3.3851 21.4682 3.3851 21.3118V9.54062Z"/>'
+    + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M9.12731 8.41393C8.90916 8.72121 8.83194 9.0967 8.82549 9.4875C8.82414 9.5051 8.82346 9.52284 8.82346 9.5407V21.3119C8.82346 21.6744 8.8766 22.0307 9.0533 22.3316C9.2482 22.6636 9.54089 22.8416 9.83946 22.9255C10.1067 23.0006 10.3902 23.0035 10.6165 22.999C10.7298 22.9967 10.8266 22.993 10.9204 22.9893C11.0527 22.9841 11.179 22.9791 11.3374 22.9791C11.4955 22.9791 11.622 22.9841 11.7547 22.9892C11.8491 22.9929 11.9466 22.9967 12.0608 22.999C12.2888 23.0035 12.5731 23.0005 12.8411 22.9261C13.1391 22.8434 13.4342 22.6676 13.6322 22.3361C13.8124 22.0342 13.8671 21.6763 13.8671 21.3119V15.0347C13.8671 15.0121 13.866 14.9896 13.8638 14.9672C13.842 14.7441 13.8679 14.5189 13.9398 14.3066C14.0116 14.0942 14.1278 13.8996 14.2806 13.7355C14.4334 13.5715 14.6193 13.4418 14.826 13.3551C15.0327 13.2683 15.2555 13.2265 15.4796 13.2324C15.4993 13.233 15.5191 13.2326 15.5388 13.2315C15.763 13.2182 15.9874 13.2533 16.1968 13.3344C16.4062 13.4156 16.5957 13.5408 16.7524 13.7016C16.9092 13.8624 17.0295 14.055 17.1052 14.2665C17.181 14.4779 17.2103 14.7031 17.1914 14.9269C17.1897 14.9464 17.1889 14.9659 17.1889 14.9855V21.2643C17.1889 21.6269 17.242 21.9831 17.4187 22.2841C17.6136 22.616 17.9063 22.794 18.2049 22.8779C18.4721 22.953 18.7556 22.9559 18.9819 22.9514C19.0952 22.9492 19.192 22.9454 19.2858 22.9417C19.4181 22.9365 19.5445 22.9315 19.7028 22.9315C19.8613 22.9315 19.9879 22.9365 20.1204 22.9417C20.2142 22.9454 20.3113 22.9492 20.4246 22.9514C20.651 22.9559 20.9347 22.953 21.202 22.878C21.5006 22.7941 21.7934 22.6161 21.9883 22.2841C22.1651 21.9832 22.2183 21.6269 22.2183 21.2643V13.2438C22.2498 12.4922 22.1241 11.7423 21.8491 11.0421C21.5721 10.3368 21.1499 9.69767 20.6099 9.16619C20.0698 8.63472 19.424 8.22279 18.7144 7.95714C18.0212 7.69762 17.2822 7.58339 16.5433 7.62131C15.7714 7.55984 14.9961 7.69284 14.2884 8.00854C13.9797 8.14625 13.6883 8.31677 13.4188 8.51635C13.2448 8.20348 12.9223 7.84336 12.3743 7.84336C12.2473 7.84336 12.0615 7.83745 11.8394 7.83039C11.6635 7.8248 11.4647 7.81848 11.2545 7.8138C11.0283 7.80877 10.7967 7.80605 10.593 7.81005C10.4049 7.81374 10.1907 7.82352 10.0248 7.85683C9.71096 7.91929 9.36993 8.0722 9.12731 8.41393ZM14.8536 9.27555C15.3607 9.04935 15.9173 8.95704 16.4702 9.00746C16.5052 9.01065 16.5404 9.01118 16.5755 9.00904C17.1376 8.97472 17.7006 9.05901 18.228 9.25644C18.7554 9.45388 19.2354 9.76003 19.6367 10.155C20.0381 10.55 20.3519 11.025 20.5578 11.5492C20.7636 12.0734 20.8569 12.635 20.8316 13.1975C20.8311 13.2079 20.8309 13.2183 20.8309 13.2287V21.2643C20.8309 21.4194 20.8151 21.5056 20.8036 21.5479C20.7439 21.5601 20.64 21.568 20.452 21.5643C20.3928 21.5632 20.3152 21.5603 20.228 21.5571C20.0672 21.5513 19.8736 21.5442 19.7028 21.5442C19.5322 21.5442 19.3389 21.5512 19.1783 21.5571C19.0912 21.5603 19.0136 21.5632 18.9545 21.5643C18.7669 21.568 18.6631 21.5601 18.6035 21.5479C18.5921 21.5057 18.5762 21.4194 18.5762 21.2643V15.0129C18.6068 14.6012 18.5506 14.1875 18.4113 13.7986C18.2685 13.3999 18.0416 13.0365 17.7459 12.7332C17.4503 12.4299 17.0929 12.1938 16.6979 12.0408C16.3122 11.8913 15.8995 11.8247 15.4865 11.8449C15.0759 11.8382 14.6681 11.9168 14.2892 12.0758C13.9012 12.2386 13.5522 12.482 13.2654 12.79C12.9785 13.0979 12.7605 13.4633 12.6256 13.8619C12.4946 14.2492 12.445 14.6591 12.4798 15.0662V21.3119C12.4798 21.4675 12.4634 21.5529 12.4519 21.5937C12.3905 21.6072 12.2835 21.6157 12.088 21.6119C12.0283 21.6107 11.95 21.6079 11.8622 21.6047C11.701 21.5988 11.5075 21.5917 11.3374 21.5917C11.1668 21.5917 10.9735 21.5988 10.8128 21.6047C10.7257 21.6079 10.6481 21.6107 10.5891 21.6119C10.4014 21.6156 10.2977 21.6077 10.2381 21.5955C10.2267 21.5533 10.2108 21.467 10.2108 21.3119V9.58928C10.2119 9.57371 10.2124 9.55804 10.2124 9.54228C10.2124 9.34562 10.2407 9.25775 10.2531 9.22848C10.2619 9.22547 10.2756 9.22147 10.2959 9.21747C10.3285 9.21088 10.4302 9.20087 10.6202 9.19714C10.7951 9.19371 11.0042 9.19594 11.2236 9.20082C11.3949 9.20463 11.5794 9.21038 11.7541 9.21583C11.9286 9.22126 12.0938 9.2264 12.2255 9.22898C12.2947 9.4041 12.3307 9.6435 12.3246 9.86577C12.3163 10.1681 12.5049 10.441 12.7906 10.5401C13.0764 10.6393 13.3934 10.5419 13.5742 10.2994C13.9061 9.85427 14.3466 9.50174 14.8536 9.27555Z"/>'
+    + '</svg>',
+  'instagram.com': '<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
+    + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M7 12.1C7 14.9 9.3 17.2 12.1 17.2C14.9 17.2 17.2 14.9 17.2 12.1C17.2 9.3 14.9 7 12.1 7C9.3 7 7 9.3 7 12.1ZM8.5 12C8.5 10 10.1 8.4 12.1 8.4C14.1 8.4 15.7 10 15.7 12C15.7 14 14.1 15.6 12.1 15.6C10.1 15.6 8.5 14 8.5 12Z"/>'
+    + '<path fill="currentColor" d="M17.0996 6.19961C17.0996 6.69961 17.4996 7.09961 17.9996 7.09961C18.5996 7.09961 18.9996 6.69961 18.9996 6.09961C18.9996 5.59961 18.5996 5.09961 17.9996 5.09961C17.4996 5.09961 17.0996 5.49961 17.0996 5.99961V6.19961Z"/>'
+    + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M6.2 23.1H17.9C20.8 23.1 23.1 20.8 23.2 18V6.2C23.2 3.3 20.8 1 18 1H6.2C3.3 1 1 3.3 1 6.2V17.9C1 20.8 3.4 23.1 6.2 23.1ZM2.5 6.2C2.5 4.1 4.2 2.5 6.2 2.5H18C20.1 2.5 21.7 4.2 21.7 6.2V18C21.7 20.1 20 21.7 18 21.7H6.2C4.1 21.7 2.5 20 2.5 18V6.2Z"/>'
+    + '</svg>',
+  'x.com': '<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
+    + '<path fill="currentColor" d="M13.695 10.2308L21.636 1H19.7543L12.8591 9.01498L7.35188 1H1L9.32793 13.1201L1 22.8H2.88188L10.1634 14.3359L15.9794 22.8H22.3312L13.6945 10.2308H13.695ZM11.1175 13.2269L10.2737 12.02L3.55995 2.41665H6.4504L11.8685 10.1668L12.7123 11.3737L19.7551 21.4478H16.8647L11.1175 13.2273V13.2269Z"/>'
+    + '</svg>',
+  'youtube.com': '<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'
+    + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M9.70168 7.66067C9.44375 7.65375 9.18881 7.71733 8.96432 7.84454C8.73982 7.97175 8.55428 8.15778 8.42766 8.38261C8.30318 8.60364 8.24028 8.85393 8.24541 9.10738V16.2956C8.24384 16.5474 8.3085 16.7951 8.43292 17.014C8.558 17.2341 8.73904 17.4172 8.95768 17.5447C9.17631 17.6722 9.42479 17.7397 9.67791 17.7403C9.93104 17.7408 10.1798 17.6745 10.399 17.5479L16.575 13.9453C16.7908 13.8186 16.9699 13.6377 17.0943 13.4205C17.2187 13.2032 17.2841 12.9573 17.2841 12.707C17.2841 12.4567 17.2187 12.2107 17.0943 11.9935C16.9699 11.7763 16.7908 11.5953 16.575 11.4687L10.4127 7.87402C10.1989 7.74111 9.95354 7.66741 9.70168 7.66067ZM15.7208 12.707L9.74541 16.1926V9.22132L15.7208 12.707ZM8.24541 9.10738V9.0984L8.24573 9.12046L8.24541 9.10738Z"/>'
+    + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M4.17857 3C1.87081 3 0 4.87081 0 7.17857V17.4643C0 19.772 1.87081 21.6429 4.17857 21.6429H19.6071C21.9149 21.6429 23.7857 19.772 23.7857 17.4643V7.17857C23.7857 4.87081 21.9149 3 19.6071 3H4.17857ZM1.5 7.17857C1.5 5.69924 2.69924 4.5 4.17857 4.5H19.6071C21.0865 4.5 22.2857 5.69924 22.2857 7.17857V17.4643C22.2857 18.9436 21.0865 20.1429 19.6071 20.1429H4.17857C2.69924 20.1429 1.5 18.9436 1.5 17.4643V7.17857Z"/>'
+    + '</svg>',
+};
+
+const CHEVRON_SVG = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">'
+  + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M1.54977 4.69112C1.74503 4.49586 2.06161 4.49586 2.25687 4.69112L7.99999 10.4342L13.7431 4.69112C13.9384 4.49586 14.2549 4.49586 14.4502 4.69112C14.6455 4.88639 14.6455 5.20297 14.4502 5.39823L8.68639 11.162C8.5988 11.2535 8.49378 11.3266 8.37749 11.377C8.25832 11.4286 8.12985 11.4552 7.99999 11.4552C7.87013 11.4552 7.74165 11.4286 7.62248 11.377C7.50619 11.3266 7.40117 11.2535 7.31358 11.162L1.54977 5.39823C1.3545 5.20297 1.3545 4.88639 1.54977 4.69112Z"/></svg>';
+
+/**
+ * Turns each footer nav category (authored as a plain `<h3>` + `<ul>` —
+ * DA's block-cell content strips `<details>`/`<summary>` on upload, so
+ * the accordion has to be built here instead of authored directly) into
+ * a native, mobile-collapsible accordion: `<details><summary>` gives
+ * that behavior for free, plus a chevron indicator next to the label
+ * (matching the source, which shows/hides it purely via CSS at the
+ * 900px breakpoint — see footer.css).
+ * @param {Element} block The footer fragment's root element
+ */
+function decorateNavAccordion(block) {
+  block.querySelectorAll('.columns > div > div').forEach((col) => {
+    const heading = col.querySelector('h3');
+    const list = col.querySelector('ul');
+    if (!heading || !list) return;
+
+    const details = document.createElement('details');
+    details.open = true;
+
+    const summary = document.createElement('summary');
+    summary.append(heading.textContent);
+    const chevron = document.createElement('span');
+    chevron.className = 'icon icon-chevron';
+    chevron.innerHTML = CHEVRON_SVG;
+    summary.append(chevron);
+
+    details.append(summary, list);
+    heading.replaceWith(details);
+  });
+}
+
+/**
+ * Replaces each social link's authored text with its brand icon —
+ * matching the source, which shows icon-only links here (the nav
+ * accordion's own "Social Media" column keeps the plain text links).
+ * The accessible name comes from the link's own text/aria-label, so nothing
+ * is lost for assistive tech.
+ * @param {Element} block The footer fragment's root element
+ */
+function decorateSocialIcons(block) {
+  block.querySelectorAll('.footer-social a').forEach((a) => {
+    const host = new URL(a.href).hostname.replace(/^www\./, '');
+    const entry = Object.entries(SOCIAL_ICONS).find(([domain]) => host === domain || host.endsWith(`.${domain}`));
+    if (!entry) return;
+    if (!a.getAttribute('aria-label')) a.setAttribute('aria-label', a.textContent.trim());
+    a.innerHTML = `<span class="icon">${entry[1]}</span>`;
+  });
+}
+
 /**
  * loads and decorates the footer
  * @param {Element} block The footer block element
@@ -11,10 +89,27 @@ export default async function decorate(block) {
   const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
   const fragment = await loadFragment(footerPath);
 
-  // decorate footer DOM
+  // decorate footer DOM — the fragment's three sections (footer-nav,
+  // footer-social, footer-copyright) become direct children of the block
+  // itself, matching the source's own structure (no extra wrapper div;
+  // the block is the grid container — see footer.css) so its
+  // grid-template-areas can target each one directly.
   block.textContent = '';
-  const footer = document.createElement('div');
-  while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
+  while (fragment.firstElementChild) block.append(fragment.firstElementChild);
+
+  decorateNavAccordion(block);
+  decorateSocialIcons(block);
 
-  block.append(footer);
+  // authored as a plain <a> (DA's content pipeline strips <button> from
+  // default content) — swap it for a real button, matching the source,
+  // which has no consent-management platform wired up here either, so
+  // this stays a harmless no-op rather than a dead link
+  const cookieLink = block.querySelector('#footer-cookie-settings');
+  if (cookieLink) {
+    const cookieButton = document.createElement('button');
+    cookieButton.type = 'button';
+    cookieButton.id = cookieLink.id;
+    cookieButton.textContent = cookieLink.textContent;
+    cookieLink.replaceWith(cookieButton);
+  }
 }
diff --git a/blocks/header/header.css b/blocks/header/header.css
index fe5b2cc..ec41b37 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -11,7 +11,7 @@ header nav {
   box-sizing: border-box;
   display: grid;
   grid-template:
-    'hamburger brand tools' var(--nav-height)
+    'hamburger brand language' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
   gap: 0 24px;
@@ -22,13 +22,25 @@ header nav {
   font-family: var(--body-font-family);
 }
 
-header nav[aria-expanded='true'] {
-  grid-template:
-    'hamburger brand' var(--nav-height)
-    'sections sections' 1fr
-    'tools tools' var(--nav-height) / auto 1fr;
-  overflow-y: auto;
-  min-height: 100dvh;
+/* full-screen mobile menu overlay (hamburger opened) — desktop never needs
+   this layout, but `aria-expanded` is also set 'true' at desktop widths
+   (it doubles as "no hamburger needed" there), so this must stay scoped to
+   mobile or it fights the desktop grid-template below at equal specificity */
+@media (width < 900px) {
+  header nav[aria-expanded='true'] {
+    grid-template:
+      'hamburger brand' var(--nav-height)
+      'sections sections' 1fr
+      'language language' var(--nav-height) / auto 1fr;
+    overflow-y: auto;
+    min-height: 100dvh;
+  }
+}
+
+/* search is desktop-only (no room for it in the mobile hamburger layout) */
+header nav .nav-search {
+  display: none;
+  visibility: hidden;
 }
 
 @media (width >= 900px) {
@@ -200,39 +212,47 @@ header nav .nav-sections ul > li > ul > li {
 
   header nav .nav-sections .nav-drop {
     position: relative;
-    padding-right: 16px;
     cursor: pointer;
   }
 
-  header nav .nav-sections .nav-drop::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: 0.5em;
-    right: 2px;
-    transform: rotate(135deg);
-    width: 6px;
-    height: 6px;
-    border: 2px solid currentcolor;
-    border-radius: 0 1px 0 0;
-    border-width: 2px 2px 0 0;
+  /* chevron icon sits inline with the label as a flex sibling (gap-
+     separated), matching the source, rather than a small CSS triangle
+     absolutely positioned against the text */
+  header nav .nav-sections .nav-drop a {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
   }
 
-  header nav .nav-sections .nav-drop[aria-expanded='true']::after {
-    top: unset;
-    bottom: 0.5em;
-    transform: rotate(315deg);
+  header nav .nav-sections .nav-drop .icon-chevron {
+    height: 14px;
+    width: 14px;
+    color: inherit;
+    transition: transform 0.15s ease;
+  }
+
+  header nav .nav-sections .nav-drop .icon-chevron svg {
+    display: block;
+  }
+
+  header nav .nav-sections .nav-drop[aria-expanded='true'] .icon-chevron {
+    transform: rotate(180deg);
   }
 
   header nav .nav-sections ul {
     display: flex;
-    gap: 24px;
+    gap: 8px;
     margin: 0;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li {
     flex: 0 1 auto;
     position: relative;
+
+    /* source gives each top-level item its own ~8px padding (a button hit
+       target), on top of the 8px flex gap — match that instead of relying
+       on the gap alone, which reads far tighter than the source */
+    padding: 8px;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li > ul {
@@ -266,11 +286,32 @@ header nav .nav-sections ul > li > ul > li {
   header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
     padding: 8px 0;
   }
+
+  header nav .nav-sections .default-content-wrapper > ul > li:hover {
+    background-color: #555;
+  }
+}
+
+/* language switcher */
+header nav .nav-language {
+  grid-area: language;
 }
 
-/* tools */
-header nav .nav-tools {
-  grid-area: tools;
+/* stylelint-disable-next-line no-descending-specificity */
+header nav .nav-language ul {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+}
+
+header nav .nav-language .icon {
+  height: 14px;
+  width: 14px;
+  margin-right: 4px;
+  vertical-align: -2px;
 }
 
 /* ===== Progress Rail header branding — black bar, white uppercase nav ===== */
@@ -284,34 +325,79 @@ header .nav-brand {
   text-decoration: none;
 }
 
-/* top-level nav links: white, uppercase, condensed */
+/* top-level nav links: white, body font, regular weight, authored casing
+   ("Company", "Business Segments") — not the condensed heading font, and
+   not uppercased */
 header nav .nav-sections a:any-link,
 header nav .nav-sections .default-content-wrapper > ul > li {
   color: #fff;
-  font-family: var(--heading-font-family);
-  font-weight: 700;
+  font-family: var(--body-font-family);
+  font-weight: 400;
   font-size: 14px;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
+
+  /* the `header nav p { line-height: 1 }` rule above squashes these —
+     the source's nav links keep the body's normal (1.6) line-height,
+     which is most of where its taller nav row comes from */
+  line-height: 1.6;
 }
 
 header nav .nav-sections a:any-link:hover {
   color: var(--brand-yellow, #ffcd11);
+  text-decoration: none;
 }
 
-/* the trailing "Contact Us" tools link → yellow CTA-ish, uppercase */
+/* language switcher links: plain white for both languages, same body
+   font/weight as the main nav links — the source doesn't highlight the
+   current language */
 /* stylelint-disable-next-line no-descending-specificity */
-header nav .nav-tools a:any-link {
-  color: var(--brand-yellow, #ffcd11);
-  font-family: var(--heading-font-family);
-  font-weight: 700;
+header nav .nav-language a:any-link {
+  color: #fff;
+  font-family: var(--body-font-family);
+  font-weight: 400;
   font-size: 14px;
   text-transform: uppercase;
+}
+
+header nav .nav-language a:any-link:hover {
   text-decoration: none;
 }
 
-header nav .nav-tools a:any-link:hover {
-  color: #fff;
+/* search box */
+header nav .nav-search form {
+  display: flex;
+  align-items: stretch;
+  height: 40px;
+}
+
+header nav .nav-search input[type='search'] {
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  border: 0;
+  padding: 0 12px;
+  font-size: 14px;
+  color: var(--text-color);
+  background-color: #fff;
+  appearance: none;
+}
+
+header nav .nav-search button {
+  flex: none;
+  width: 40px;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--brand-yellow, #ffcd11);
+  color: var(--brand-dark, #131313);
+  cursor: pointer;
+}
+
+header nav .nav-search .icon {
+  height: 18px;
+  width: 18px;
 }
 
 /* desktop dropdown panels: keep readable (dark text on white panel) */
@@ -333,16 +419,25 @@ header nav .nav-tools a:any-link:hover {
 
 /* ===== Progress Rail two-row header (logo row + nav row) ===== */
 @media (width >= 900px) {
-  /* Two rows: logo on top, nav sections + Contact Us below — both on the
-     black bar. cols: sections take remaining space, tools hug the right. */
+  /* The boilerplate's global `header { height: var(--nav-height) }` assumes a
+     single nav row. This header renders two rows on desktop, so let it size
+     to its actual content — otherwise the nav overflows the header's box and
+     overlaps whatever section comes right after it. */
+  header {
+    height: auto;
+  }
+
+  /* Two rows: logo + search on top, nav sections + language below — all on
+     the black bar. Row 1: brand fixed, search fills the rest. Row 2: nav
+     links fill the rest, language switcher hugs the right. */
   header nav {
     display: grid;
     grid-template:
-      'brand brand' auto
-      'sections tools' auto / 1fr auto;
+      'brand search search' auto
+      'sections sections language' auto / auto 1fr auto;
     align-items: center;
     justify-content: unset;
-    gap: 12px 32px;
+    gap: 16px 32px;
     height: auto;
     padding: 16px 32px;
   }
@@ -351,16 +446,21 @@ header nav .nav-tools a:any-link:hover {
     grid-area: brand;
   }
 
+  header nav .nav-search {
+    grid-area: search;
+    display: block;
+    visibility: visible;
+    width: 100%;
+  }
+
   header nav .nav-sections {
     grid-area: sections;
     align-self: center;
   }
 
-  header nav .nav-tools {
-    grid-area: tools;
-    justify-self: end;
+  header nav .nav-language {
+    grid-area: language;
+    place-self: center end;
   }
 
-  /* logo a touch larger on the dedicated top row */
-  header nav .nav-brand img { height: 48px; }
 }
diff --git a/blocks/header/header.js b/blocks/header/header.js
index c7d6ea2..f1c57c9 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,4 +1,4 @@
-import { getMetadata } from '../../scripts/aem.js';
+import { getMetadata, decorateIcons } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
 // media query match that indicates mobile/tablet width
@@ -124,7 +124,7 @@ export default async function decorate(block) {
   nav.id = 'nav';
   while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
 
-  const classes = ['brand', 'sections', 'tools'];
+  const classes = ['brand', 'sections', 'language'];
   classes.forEach((c, i) => {
     const section = nav.children[i];
     if (section) section.classList.add(`nav-${c}`);
@@ -137,10 +137,51 @@ export default async function decorate(block) {
     brandLink.closest('.button-container').className = '';
   }
 
+  // language switcher: mark the current language, add a globe icon
+  const navLanguage = nav.querySelector('.nav-language');
+  if (navLanguage) {
+    const current = navLanguage.querySelector(`a[href="/${document.documentElement.lang || 'en'}/"]`)
+      || navLanguage.querySelector('a');
+    if (current) current.setAttribute('aria-current', 'true');
+    const firstLink = navLanguage.querySelector('a');
+    if (firstLink) {
+      const globe = document.createElement('span');
+      globe.className = 'icon icon-globe';
+      firstLink.prepend(globe);
+      decorateIcons(navLanguage);
+    }
+  }
+
+  // search box (UI only — this project has no search backend to submit to)
+  const navSearch = document.createElement('div');
+  navSearch.className = 'nav-search';
+  navSearch.innerHTML = `<form role="search">
+      <input type="search" placeholder="Search" aria-label="Search">
+      <button type="submit" aria-label="Search"><span class="icon icon-search"></span></button>
+    </form>`;
+  navSearch.querySelector('form').addEventListener('submit', (e) => e.preventDefault());
+  decorateIcons(navSearch);
+  navBrand.after(navSearch);
+
   const navSections = nav.querySelector('.nav-sections');
   if (navSections) {
     navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => {
-      if (navSection.querySelector('ul')) navSection.classList.add('nav-drop');
+      if (navSection.querySelector('ul')) {
+        navSection.classList.add('nav-drop');
+        // chevron as a real icon next to the label (matching the source),
+        // not a CSS-drawn triangle crammed against the text. Inlined
+        // directly (rather than through decorateIcons' <img>) so its
+        // `currentColor` fill tracks the label's hover color, the way
+        // the source's own inline chevron does. Path data copied from the
+        // source's own chevron icon — a thin stroke-based caret reads
+        // noticeably smaller/thinner than this within the same box.
+        const label = navSection.querySelector('a') || navSection;
+        const chevron = document.createElement('span');
+        chevron.className = 'icon icon-chevron';
+        chevron.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">'
+          + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M1.54977 4.69112C1.74503 4.49586 2.06161 4.49586 2.25687 4.69112L7.99999 10.4342L13.7431 4.69112C13.9384 4.49586 14.2549 4.49586 14.4502 4.69112C14.6455 4.88639 14.6455 5.20297 14.4502 5.39823L8.68639 11.162C8.5988 11.2535 8.49378 11.3266 8.37749 11.377C8.25832 11.4286 8.12985 11.4552 7.99999 11.4552C7.87013 11.4552 7.74165 11.4286 7.62248 11.377C7.50619 11.3266 7.40117 11.2535 7.31358 11.162L1.54977 5.39823C1.3545 5.20297 1.3545 4.88639 1.54977 4.69112Z"/></svg>';
+        label.append(chevron);
+      }
       navSection.addEventListener('click', () => {
         if (isDesktop.matches) {
           const expanded = navSection.getAttribute('aria-expanded') === 'true';
diff --git a/blocks/pr-cards/pr-cards.css b/blocks/pr-cards/pr-cards.css
index d5b5301..85bc641 100644
--- a/blocks/pr-cards/pr-cards.css
+++ b/blocks/pr-cards/pr-cards.css
@@ -8,12 +8,15 @@
 }
 
 .pr-cards > ul > li {
-  border: 1px solid #dadada;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
   background-color: var(--background-color);
+  transition: box-shadow 0.2s ease;
 }
 
-.pr-cards .pr-cards-card-body {
-  margin: 16px;
+.pr-cards > ul > li:hover {
+  box-shadow: 0 15px 40px rgb(67 72 92 / 20%);
 }
 
 .pr-cards .pr-cards-card-image {
@@ -25,3 +28,62 @@
   aspect-ratio: 4 / 3;
   object-fit: cover;
 }
+
+/* grows to fill the card's remaining height, so the footer below it lands
+   on the same baseline across every card regardless of how much body
+   copy precedes it */
+.pr-cards .pr-cards-card-body {
+  flex: 1;
+  padding: 24px;
+}
+
+.pr-cards .pr-cards-card-body h2,
+.pr-cards .pr-cards-card-body h3 {
+  margin: 0 0 6.5px;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.pr-cards .pr-cards-card-body p {
+  margin: 11.2px 0 0;
+  font-family: var(--body-font-family);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+/* no divider — just the link + chevron, bottom-aligned via the body's
+   flex:1 above */
+.pr-cards .pr-cards-card-footer {
+  padding: 0 24px 24px;
+}
+
+.pr-cards .pr-cards-card-footer p {
+  margin: 0;
+}
+
+/* inline-flex, not flex+space-between — the source sizes this to its own
+   content (text + chevron), sitting flush-left with empty space to its
+   right, not stretched to push the chevron out to the card's edge */
+.pr-cards .pr-cards-card-footer a {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-color);
+  font-family: var(--heading-font-family);
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.pr-cards .pr-cards-card-footer .icon-chevron {
+  flex: none;
+  height: 14px;
+  width: 14px;
+  transform: rotate(-90deg);
+}
+
+.pr-cards .pr-cards-card-footer .icon-chevron svg {
+  display: block;
+}
diff --git a/blocks/pr-cards/pr-cards.js b/blocks/pr-cards/pr-cards.js
index 05dd05a..3516de1 100644
--- a/blocks/pr-cards/pr-cards.js
+++ b/blocks/pr-cards/pr-cards.js
@@ -2,6 +2,13 @@ import { createOptimizedPicture } from '../../scripts/aem.js';
 import { moveInstrumentation } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
+  // the "Featured" jump-nav link targets this section directly — there's
+  // no heading here to auto-generate an id from (matching the source,
+  // which sets the id on the section itself rather than adding a
+  // visible heading)
+  const section = block.closest('.section');
+  if (section && !section.id) section.id = 'featured';
+
   /* change to ul, li */
   const ul = document.createElement('ul');
   [...block.children].forEach((row) => {
@@ -12,6 +19,32 @@ export default function decorate(block) {
       if (div.children.length === 1 && div.querySelector('picture')) div.className = 'pr-cards-card-image';
       else div.className = 'pr-cards-card-body';
     });
+
+    // split a trailing link-only paragraph (e.g. "Learn More") into its own
+    // footer, pinned to the card's bottom edge regardless of how much body
+    // copy precedes it (see .pr-cards-card-body's flex:1 in the CSS)
+    const body = li.querySelector('.pr-cards-card-body');
+    const lastP = body && body.lastElementChild;
+    const lastLink = lastP && lastP.tagName === 'P' && lastP.querySelector('a');
+    if (lastLink && lastP.textContent.trim() === lastLink.textContent.trim()) {
+      // chevron icon, inlined (not decorateIcons' <img>) so its
+      // currentColor fill matches the label — same icon as the header's
+      // nav-drop chevron, just rotated to point right instead of down
+      const chevron = document.createElement('span');
+      chevron.className = 'icon icon-chevron';
+      chevron.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">'
+        + '<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M1.54977 4.69112C1.74503 4.49586 2.06161 4.49586 2.25687 4.69112L7.99999 10.4342L13.7431 4.69112C13.9384 4.49586 14.2549 4.49586 14.4502 4.69112C14.6455 4.88639 14.6455 5.20297 14.4502 5.39823L8.68639 11.162C8.5988 11.2535 8.49378 11.3266 8.37749 11.377C8.25832 11.4286 8.12985 11.4552 7.99999 11.4552C7.87013 11.4552 7.74165 11.4286 7.62248 11.377C7.50619 11.3266 7.40117 11.2535 7.31358 11.162L1.54977 5.39823C1.3545 5.20297 1.3545 4.88639 1.54977 4.69112Z"/></svg>';
+      lastLink.append(chevron);
+
+      // a plain <div>, not <footer> — the page's <footer> landmark styling
+      // (blocks/footer/footer.css) targets the bare footer tag and would
+      // otherwise bleed into every card
+      const footer = document.createElement('div');
+      footer.className = 'pr-cards-card-footer';
+      footer.append(lastP);
+      li.append(footer);
+    }
+
     ul.append(li);
   });
   ul.querySelectorAll('picture > img').forEach((img) => {
diff --git a/blocks/pr-columns/pr-columns.css b/blocks/pr-columns/pr-columns.css
index 8ceb23a..3ce8e61 100644
--- a/blocks/pr-columns/pr-columns.css
+++ b/blocks/pr-columns/pr-columns.css
@@ -13,21 +13,73 @@
 
 .pr-columns > div > .pr-columns-img-col {
   order: 0;
+  position: relative;
+  overflow: hidden;
+  min-height: 184px;
 }
 
+/* absolutely positioned so the picture can't inflate the column's own
+   natural height — verified against the source: without this, the
+   percentage height below can't resolve during the grid's row-sizing
+   pass (the row's height is what's being computed), so the browser
+   falls back to the image's own aspect ratio, which made every row as
+   tall as its tallest *image* rather than the fixed 314px floor the
+   source actually uses. */
+.pr-columns > div > .pr-columns-img-col picture {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+}
+
+/* fills (and crops to) whatever height the column ends up at, rather
+   than the image's own natural aspect ratio dictating the row's height —
+   verified against the source: object-fit was defaulting to `fill`
+   (distorting the image) since neither height nor object-fit had been
+   set at all here before. */
 .pr-columns > div > .pr-columns-img-col img {
   display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 @media (width >= 900px) {
+  /* a true 50/50 grid, not flex:1 on both columns — verified via
+     getBoundingClientRect that the source's image and text columns are
+     always exactly equal halves (570px each of a 1140px row). flex:1 on
+     both looked equal in principle but the text column's own min-content
+     width (its longest unbreakable word/heading) forced the flex
+     algorithm to over-allocate it space at the image column's expense
+     once the 64px padding above was added. */
   .pr-columns > div {
-    align-items: center;
-    flex-direction: unset;
-    gap: 24px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
 
   .pr-columns > div > div {
-    flex: 1;
     order: unset;
+    min-width: 0;
+  }
+
+  /* no align-items override — grid's default `stretch` is what the
+     source relies on: whichever column is naturally taller (usually the
+     text column's padded content) sets the row's height, and the image
+     column (min-height below is a floor, not a fixed height) stretches
+     to match it, cropped via object-fit: cover above. An explicit
+     `center` here would leave the image pinned to its own min-height
+     instead of filling the taller row. */
+  .pr-columns > div > .pr-columns-img-col {
+    min-height: 314px;
+  }
+
+  /* the source gives the text column its own 64px padding on every side
+     (not a gap between it and the image) — verified via
+     getBoundingClientRect on both a picture-first row (News & Events)
+     and a text-first one (Supply Chain): the same uniform padding
+     applies regardless of which side the text sits on. Previously this
+     column had no padding at all (just a 24px inter-column gap), so text
+     sat flush against the image with barely any breathing room. */
+  .pr-columns > div > div:not(.pr-columns-img-col) {
+    padding: 64px;
   }
 }
diff --git a/blocks/pr-hero/pr-hero.css b/blocks/pr-hero/pr-hero.css
index c1b47d2..32df98f 100644
--- a/blocks/pr-hero/pr-hero.css
+++ b/blocks/pr-hero/pr-hero.css
@@ -3,46 +3,91 @@
   padding: 0;
 }
 
-.pr-hero {
-  position: relative;
-  padding: 40px 24px;
-  min-height: 300px;
+/* the hero's own section already has margin-top: 0 (the boilerplate
+   exempts the first section), but margin-bottom is still the generic
+   40px — since sibling margins collapse to their max, that alone was
+   enough to leave a 40px gap before the jump-nav even after zeroing its
+   margin-top. The source has these flush against each other.
+   (needs main > .section.pr-hero-container, not just .pr-hero-container,
+   to out-specificity main > .section itself) */
+main > .section.pr-hero-container {
+  margin-bottom: 0;
 }
 
-.pr-hero h1,
-.pr-hero h2,
-.pr-hero h3,
-.pr-hero h4,
-.pr-hero h5,
-.pr-hero h6,
-.pr-hero p {
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-  color: var(--background-color);
+.pr-hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 350px;
 }
 
-.pr-hero.no-image * {
-  color: var(--text-color);
+.pr-hero-media {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
 }
 
-.pr-hero picture {
+.pr-hero-media picture {
   position: absolute;
-  z-index: -1;
   inset: 0;
   object-fit: cover;
   box-sizing: border-box;
 }
 
-.pr-hero img {
+.pr-hero-media img {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
 
+/* content is vertically centered in the media's height (not top-padded
+   by a fixed offset) — a ~24px box, not the whole hero's padding */
+.pr-hero-body {
+  position: relative;
+  z-index: 2;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 24px;
+}
+
+.pr-hero-body h1,
+.pr-hero-body h2,
+.pr-hero-body h3,
+.pr-hero-body h4,
+.pr-hero-body h5,
+.pr-hero-body h6,
+.pr-hero-body p {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  color: var(--background-color);
+}
+
+.pr-hero.no-image .pr-hero-body * {
+  color: var(--text-color);
+}
+
 @media (width >= 900px) {
-  .pr-hero {
-    padding: 40px 32px;
+  .pr-hero-body {
+    padding: 24px 32px;
+  }
+
+  /* dark left-to-right gradient standing in for a solid backdrop behind
+     the heading/CTA — source measured: 85% opaque black fading to fully
+     transparent by 60% of the hero's width, gated to the same >=900px
+     breakpoint as the source's own rule. .pr-teaser has its own, stronger
+     variant of this (see pr-teaser.css). */
+  .pr-hero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(to right, rgb(0 0 0 / 85%) 7%, rgb(0 0 0 / 0%) 60%);
+    pointer-events: none;
+  }
+
+  .pr-hero.no-image::before {
+    display: none;
   }
 }
 
@@ -61,6 +106,6 @@
 
 /* When a video is present, keep the poster picture as the underlying fallback
    layer (one step further back). */
-.pr-hero.has-video picture {
+.pr-hero.has-video .pr-hero-media picture {
   z-index: -2;
 }
diff --git a/blocks/pr-hero/pr-hero.js b/blocks/pr-hero/pr-hero.js
index eeebf6e..6317c1a 100644
--- a/blocks/pr-hero/pr-hero.js
+++ b/blocks/pr-hero/pr-hero.js
@@ -7,24 +7,31 @@
  *               as a plain <a href="....mp4"> so the URL survives round-tripping.
  *   Row 2 cell: content — heading + CTA, overlaid on the media.
  *
+ * The two rows are marked as distinct layers (media full-bleed behind,
+ * body centered on top) rather than left as plain divs, so the content
+ * can be vertically centered in the media's height instead of just
+ * top-padded — matching the source's layout.
+ *
  * decorate() upgrades a background-video link into an autoplaying, muted,
  * looping, inline <video> (using the poster image from the <picture>), matching
  * the source site's hero. If the video can't play, the poster remains visible.
  */
 export default function decorate(block) {
-  const mediaCell = block.querySelector(':scope > div:first-child > div') || block.querySelector(':scope > div:first-child');
+  const [mediaRow, bodyRow] = [...block.children];
+  if (mediaRow) mediaRow.className = 'pr-hero-media';
+  if (bodyRow) bodyRow.className = 'pr-hero-body';
 
-  if (!block.querySelector(':scope > div:first-child picture')) {
+  if (!block.querySelector(':scope > .pr-hero-media picture')) {
     block.classList.add('no-image');
   }
 
   // Find a background-video link (....mp4 / .webm / .ogv), if the author supplied one.
-  const videoLink = [...block.querySelectorAll(':scope > div:first-child a')]
+  const videoLink = mediaRow && [...mediaRow.querySelectorAll('a')]
     .find((a) => /\.(mp4|webm|ogv)(\?|$)/i.test(a.getAttribute('href') || ''));
 
-  if (videoLink && mediaCell) {
+  if (videoLink && mediaRow) {
     const src = videoLink.getAttribute('href');
-    const poster = block.querySelector(':scope > div:first-child picture img');
+    const poster = mediaRow.querySelector('picture img');
 
     const video = document.createElement('video');
     video.className = 'pr-hero-video';
diff --git a/blocks/pr-jump-nav/pr-jump-nav.css b/blocks/pr-jump-nav/pr-jump-nav.css
index 3001f23..51ff69b 100644
--- a/blocks/pr-jump-nav/pr-jump-nav.css
+++ b/blocks/pr-jump-nav/pr-jump-nav.css
@@ -1,49 +1,126 @@
+/* full-bleed: the source's background/divider spans the full viewport
+   width, not just the standard 1200px content column — only the nav's
+   own content (below) is centered within that column */
+.pr-jump-nav-container .pr-jump-nav-wrapper {
+  max-width: unset;
+  padding: 0;
+}
+
 .pr-jump-nav {
   background-color: var(--background-color);
+  border-bottom: 1px solid #ccc;
+}
+
+/* the generic `main > .section { margin: 40px 0 }` rule exempts only the
+   first section (the hero) — the source has this strip sitting flush
+   against the hero with no gap at all, so exempt the section right after
+   it too (always this jump-nav, per the page's content model) */
+main > .section:first-of-type + .section:has(.pr-jump-nav) {
+  margin-top: 0;
+}
+
+/* `position: sticky` only holds an element within the height of its own
+   containing block — here that's just this one small section, so a plain
+   sticky rule would let go the moment that section scrolls past. The block
+   JS toggles `.is-stuck` (backed by an IntersectionObserver sentinel) to
+   fix it to the viewport for the rest of the page instead, using a spacer
+   to hold its place in the flow so nothing jumps. */
+.pr-jump-nav.is-stuck {
+  position: fixed;
+  top: var(--nav-height);
+  left: 0;
+  right: 0;
+  z-index: 1;
 }
 
 .pr-jump-nav nav {
+  box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px 24px;
-  padding: 12px 24px;
+  min-height: 68px;
+  padding: 0 24px;
 }
 
+/* the link list grows to fill the row (pushing the CTA to the far right)
+   and centers its own links within that space — the source doesn't left-
+   align them */
 .pr-jump-nav nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
+  flex: 1 1 auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 16px 24px;
+  justify-content: safe center;
+  gap: 0;
 }
 
 .pr-jump-nav nav ul li {
   margin: 0;
 }
 
+/* links are padded like buttons (matching the source's ~7px/16.8px), with
+   zero gap between them — the padding alone provides the spacing, and the
+   active-state bar spans the full padded width via ::after, not just the
+   text (a border-bottom on the inline text would only span the text) */
 .pr-jump-nav nav ul li a {
+  position: relative;
+  display: inline-block;
   text-transform: uppercase;
   text-decoration: none;
-  font-weight: 700;
+  font-family: var(--heading-font-family);
+  font-weight: 400;
+  font-size: 14px;
   letter-spacing: 0.02em;
   color: var(--text-color);
+  padding: 0.5em 1.2em;
+}
+
+.pr-jump-nav nav ul li a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 5px;
+  background-color: var(--brand-yellow);
+  opacity: 0;
 }
 
 .pr-jump-nav nav ul li a:hover {
-  text-decoration: underline;
+  color: var(--link-hover-color);
+  text-decoration: none;
+}
+
+.pr-jump-nav nav ul li a.active::after {
+  opacity: 1;
 }
 
 .pr-jump-nav nav .button-wrapper {
   margin: 0;
 }
 
+/* unlike the in-content CTAs (hero, teaser, columns), the jump-nav's own
+   CTA sizes to its label rather than a uniform 200px */
+.pr-jump-nav nav .button.cta {
+  min-width: 0;
+}
+
 @media (width >= 900px) {
+  .pr-jump-nav.is-stuck {
+    /* header is in normal flow (not fixed) at this width, so the strip can
+       stick right at the viewport top once it scrolls under the header */
+    top: 0;
+  }
+
   .pr-jump-nav nav {
-    padding: 12px 32px;
+    max-width: 1140px;
+    margin: 0 auto;
+    padding: 0 32px;
     flex-wrap: nowrap;
   }
 }
diff --git a/blocks/pr-jump-nav/pr-jump-nav.js b/blocks/pr-jump-nav/pr-jump-nav.js
index 40a3fa4..07f0800 100644
--- a/blocks/pr-jump-nav/pr-jump-nav.js
+++ b/blocks/pr-jump-nav/pr-jump-nav.js
@@ -6,7 +6,102 @@
  * (the jump/anchor links) followed optionally by a final link that acts as
  * the call-to-action (e.g. "Contact Us"). The CTA is detected as a link
  * already styled as a button (`a.button`) or, failing that, the last link.
+ *
+ * Once built, the strip sticks to the top of the viewport on scroll and
+ * underlines whichever jump link's target section is currently in view,
+ * matching the source site's behavior.
+ */
+
+/**
+ * Fixes the block to the top of the viewport once its natural position
+ * scrolls past it, using an IntersectionObserver sentinel left behind at
+ * its original spot (`position: sticky` can't do this here — see the CSS
+ * comment). A spacer holds the block's height in the flow while it's
+ * fixed, so removing it doesn't jump the rest of the page up.
+ * @param {Element} block The pr-jump-nav block element
+ */
+function setupSticky(block) {
+  const spacer = document.createElement('div');
+  const sentinel = document.createElement('div');
+  sentinel.setAttribute('aria-hidden', 'true');
+  block.before(sentinel, spacer);
+
+  const observer = new IntersectionObserver(([entry]) => {
+    const stuck = entry.boundingClientRect.top < 0;
+    block.classList.toggle('is-stuck', stuck);
+    spacer.style.height = stuck ? `${block.getBoundingClientRect().height}px` : '0';
+  }, { threshold: 0 });
+  observer.observe(sentinel);
+}
+
+// Must be at most the `scroll-margin-top` given to headings/sections in
+// styles.css. A click-triggered anchor jump lands the target's top at
+// exactly that offset — this constant is the floor the "passed" line
+// can never go below, otherwise the just-landed target wouldn't satisfy
+// its own "has this section been passed?" check immediately after the
+// click, and the previous link would stay active until scrolled further.
+const ANCHOR_SCROLL_OFFSET = 100;
+
+/**
+ * Highlights the nav link whose target section is currently in view.
+ * Tracked by scroll position rather than a narrow IntersectionObserver band,
+ * since a fast scroll (flick, Page Down) can jump straight past a narrow
+ * band between two animation frames and never register the crossing.
+ * @param {Element[]} navLinks The jump-nav anchor elements
  */
+function setupScrollSpy(navLinks) {
+  const targets = navLinks
+    .map((a) => {
+      const { hash } = new URL(a.href, window.location.href);
+      const target = hash && document.getElementById(hash.slice(1));
+      return target ? { link: a, target } : null;
+    })
+    .filter(Boolean);
+  if (!targets.length) return;
+
+  const setActive = (link) => {
+    navLinks.forEach((a) => a.classList.toggle('active', a === link));
+  };
+
+  let ticking = false;
+  const update = () => {
+    ticking = false;
+    // The "passed" line sits about a third down the viewport — not just
+    // past the sticky bar. A line pinned to the bar (e.g. ~100px) only
+    // reflects "did the click I just made land correctly"; for ordinary
+    // scrolling it leaves a huge dead zone where a section fills most of
+    // the screen but its heading hasn't crossed that narrow a line yet,
+    // so the *previous* section (long since scrolled out of view) stays
+    // marked active. +2px absorbs the sub-pixel layout this page renders
+    // at, so a target landing at e.g. 100.2px still counts as passed.
+    //
+    // Capped at 260px: on a tall enough viewport, 35% of it exceeds the
+    // ~314px gap between two of the page's own jump-nav targets (the
+    // "News & Events"/"Supply Chain" pr-columns rows) — reproduced with
+    // a 1250px-tall viewport, where a 437.5px line left both targets
+    // simultaneously "passed", and `.pop()` picked the later (wrong) one.
+    // 260px stays safely under every real inter-target gap on this page
+    // while still comfortably clearing the original dead-zone floor.
+    const line = Math.min(Math.max(ANCHOR_SCROLL_OFFSET + 2, window.innerHeight * 0.35), 260);
+    const passed = (t) => t.target.getBoundingClientRect().top <= line;
+    const current = targets.filter(passed).pop();
+    setActive(current ? current.link : navLinks[0]);
+  };
+
+  window.addEventListener('scroll', () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(update);
+  }, { passive: true });
+
+  // Re-measure on any layout shift, not just scroll/resize — the initial
+  // call can otherwise capture stale target positions from before images
+  // or fonts finish loading and never get a scroll event to correct it.
+  new ResizeObserver(() => window.requestAnimationFrame(update)).observe(document.body);
+
+  update();
+}
+
 export default function decorate(block) {
   const links = [...block.querySelectorAll('a')];
   if (!links.length) return;
@@ -17,6 +112,20 @@ export default function decorate(block) {
 
   const navLinks = links.filter((a) => a !== cta);
 
+  // The authored hrefs carry the source's own path convention (e.g.
+  // "/en/#featured", trailing slash), which may not match how this page
+  // is actually served (e.g. "/en", no trailing slash) — clicking would
+  // navigate to a different, likely-404ing path instead of just jumping
+  // to the anchor on the current page. Normalize same-page anchors to
+  // the page's real path.
+  navLinks.forEach((a) => {
+    try {
+      const url = new URL(a.getAttribute('href'), window.location.href);
+      const samePage = url.pathname.replace(/\/$/, '') === window.location.pathname.replace(/\/$/, '');
+      if (url.hash && samePage) a.href = window.location.pathname + url.hash;
+    } catch { /* malformed href — leave it alone */ }
+  });
+
   const nav = document.createElement('nav');
   nav.setAttribute('aria-label', 'Jump navigation');
 
@@ -38,4 +147,7 @@ export default function decorate(block) {
 
   block.textContent = '';
   block.append(nav);
+
+  setupSticky(block);
+  setupScrollSpy(navLinks);
 }
diff --git a/blocks/pr-teaser/pr-teaser.css b/blocks/pr-teaser/pr-teaser.css
index 7bd619a..4e316c4 100644
--- a/blocks/pr-teaser/pr-teaser.css
+++ b/blocks/pr-teaser/pr-teaser.css
@@ -1,47 +1,124 @@
-.pr-teaser-container .pr-teaser-wrapper {
-  max-width: unset;
-  padding: 0;
-}
-
+/* unlike the hero (genuinely full-bleed), the source keeps this teaser
+   within the page's normal content column — it doesn't stretch to the
+   viewport edges. No wrapper override needed here (unlike pr-hero/
+   pr-jump-nav, which deliberately go full-bleed): the standard
+   `main > .section > div` max-width (1140px) already applies.
+   The black fallback here matches the source's block-level background —
+   visible for an instant before the image loads, or permanently on the
+   no-image variant's mobile media strip below. */
 .pr-teaser {
-  position: relative;
-  padding: 40px 24px;
-  min-height: 300px;
-}
-
-.pr-teaser h1,
-.pr-teaser h2,
-.pr-teaser h3,
-.pr-teaser h4,
-.pr-teaser h5,
-.pr-teaser h6,
-.pr-teaser p {
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-  color: var(--background-color);
+  display: flex;
+  flex-direction: column;
+  min-height: 220px;
+  background-color: #000;
 }
 
-.pr-teaser.no-image * {
-  color: var(--text-color);
+.pr-teaser-media {
+  position: relative;
+  min-height: 220px;
 }
 
-.pr-teaser picture {
+.pr-teaser-media picture {
   position: absolute;
-  z-index: -1;
   inset: 0;
-  object-fit: cover;
-  box-sizing: border-box;
 }
 
-.pr-teaser img {
-  object-fit: cover;
+.pr-teaser-media img {
   width: 100%;
   height: 100%;
+  object-fit: cover;
+}
+
+.pr-teaser-body {
+  box-sizing: border-box;
+  padding: 24px;
+  background-color: #000;
+  color: var(--background-color);
+}
+
+.pr-teaser.no-image {
+  background-color: var(--light-color);
+}
+
+.pr-teaser.no-image .pr-teaser-body {
+  background-color: var(--light-color);
+  color: var(--text-color);
+}
+
+.pr-teaser-body h1,
+.pr-teaser-body h2,
+.pr-teaser-body h3,
+.pr-teaser-body h4,
+.pr-teaser-body h5,
+.pr-teaser-body h6 {
+  margin-top: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.pr-teaser-body p {
+  font-family: var(--body-font-family);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
 }
 
 @media (width >= 900px) {
+  /* the split-panel layout gives way to a full-bleed image with the text
+     overlaid on top of it — see the getBoundingClientRect note in
+     pr-teaser.js. Taking media out of flow (position: absolute) leaves
+     body as the sole flex child, so it naturally lands left without
+     needing row-reverse. */
   .pr-teaser {
-    padding: 40px 32px;
+    /* flex-direction stays column (inherited from the base rule), so
+       centering the body panel vertically within the teaser's height
+       takes justify-content, not align-items — align-items is the cross
+       (horizontal) axis here and would center the panel horizontally
+       instead of pinning it to the left like the source. */
+    position: relative;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 325px;
+  }
+
+  .pr-teaser-media {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    min-height: 0;
+  }
+
+  /* dark gradient standing in for the body panel's solid background —
+     stronger and less transparent than pr-hero's own (source measured:
+     opaque black vs. pr-hero's 85%, fading out further too — 93% vs.
+     pr-hero's 60%), since this panel's copy sits directly on the image
+     with no panel of its own underneath it. */
+  .pr-teaser::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(to right, rgb(0 0 0 / 100%) 7%, rgb(0 0 0 / 0%) 93%);
+    pointer-events: none;
+  }
+
+  .pr-teaser.no-image::before {
+    display: none;
+  }
+
+  .pr-teaser-body {
+    position: relative;
+    z-index: 2;
+    max-width: 488px;
+    padding: 24px 64px;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .pr-teaser.no-image .pr-teaser-body {
+    background: transparent;
   }
 }
diff --git a/blocks/pr-teaser/pr-teaser.js b/blocks/pr-teaser/pr-teaser.js
index bda7af1..b0d357d 100644
--- a/blocks/pr-teaser/pr-teaser.js
+++ b/blocks/pr-teaser/pr-teaser.js
@@ -1,5 +1,24 @@
+/**
+ * Progress Rail teaser.
+ *
+ * Authored structure (2 rows, matching pr-hero's convention):
+ *   Row 1 cell: media — a <picture>.
+ *   Row 2 cell: content — heading + copy + CTA.
+ *
+ * At desktop widths this uses the same full-bleed-media-with-overlaid-text
+ * layout as pr-hero (verified via getBoundingClientRect: the source's
+ * media-wrapper spans the block's entire width, with the text panel
+ * positioned on top of it and a dark gradient — not a solid panel —
+ * providing contrast), just with its own narrower text-panel width and a
+ * stronger, more opaque gradient. Below 900px it stacks image-then-copy
+ * like a plain two-row block instead.
+ */
 export default function decorate(block) {
-  if (!block.querySelector(':scope > div:first-child picture')) {
+  const [mediaRow, bodyRow] = [...block.children];
+  if (mediaRow) mediaRow.className = 'pr-teaser-media';
+  if (bodyRow) bodyRow.className = 'pr-teaser-body';
+
+  if (!block.querySelector(':scope > .pr-teaser-media picture')) {
     block.classList.add('no-image');
   }
 }
diff --git a/blocks/pr-video/pr-video.css b/blocks/pr-video/pr-video.css
index 18f8641..7239f04 100644
--- a/blocks/pr-video/pr-video.css
+++ b/blocks/pr-video/pr-video.css
@@ -1,7 +1,14 @@
+/* the source uses the same reading-width constraint here as the
+   default-content paragraphs (a 1070px --content-width, distinct from
+   the wider 1140px section column) rather than the boilerplate's own
+   900px default — verified via getComputedStyle: .video's max-width
+   resolves to the same 1070px. margin-top is 0, not 24px — vertical
+   spacing between this and the columns block above it is already
+   handled by the generic wrapper-to-wrapper rule in styles.css. */
 .pr-video {
   text-align: center;
-  max-width: 900px;
-  margin: 24px auto;
+  max-width: 1070px;
+  margin: 0 auto;
 }
 
 .pr-video[data-embed-loaded='false']:not(.placeholder) {
diff --git a/content/en.plain.html b/content/en.plain.html
index 66cef6c..46319d1 100644
--- a/content/en.plain.html
+++ b/content/en.plain.html
@@ -1,5 +1,5 @@
-<div><div class="pr-hero"><div><div><p><picture><img src="https://www.progressrail.com/en/media_10e0bd5ab02351447be201541d758addf6e18c691.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></p><p><a href="https://www.progressrail.com/en/media/hero-banner.mp4">mp4</a></p></div></div><div><div><h1 id="we-keep-you-rolling">We Keep You Rolling</h1><p><a href="/en/company" title="LEARN MORE">LEARN MORE</a></p></div></div></div><div class="section-metadata"><div><div>style</div><div>dark</div></div></div></div>
-<div><div class="pr-jump-nav"><div><div><ul> <li><a href="/en/#featured">FEATURED</a></li> <li><a href="/en/#news--events">NEWS &amp; EVENTS</a></li> <li><a href="/en/#supply-chain">SUPPLY CHAIN</a></li> <li><a href="/en/#gifts--apparel">GIFTS &amp; APPAREL</a></li> </ul><p><a href="/en/services/customer-service" title="CONTACT US">CONTACT US</a></p></div></div></div></div>
+<div><div class="pr-hero"><div><div><p><picture><img src="https://www.progressrail.com/en/media_10e0bd5ab02351447be201541d758addf6e18c691.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></p><p><a href="https://www.progressrail.com/en/media/hero-banner.mp4">mp4</a></p></div></div><div><div><h1 id="we-keep-you-rolling">We Keep You Rolling</h1><p><strong><a href="/en/company" title="LEARN MORE">LEARN MORE</a></strong></p></div></div></div><div class="section-metadata"><div><div>style</div><div>dark</div></div></div></div>
+<div><div class="pr-jump-nav"><div><div><ul> <li><a href="/en#featured">FEATURED</a></li> <li><a href="/en#news--events">NEWS &amp; EVENTS</a></li> <li><a href="/en#supply-chain">SUPPLY CHAIN</a></li> <li><a href="/en#gifts--apparel">GIFTS &amp; APPAREL</a></li> </ul><p><strong><a href="/en/services/customer-service" title="CONTACT US">CONTACT US</a></strong></p></div></div></div></div>
 <div><div class="pr-cards"><div><div><picture><img src="https://www.progressrail.com/en/media_1d5eae902d705bcc5f2b18002fc0c1e58ae2af1f4.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></div><div><h2 id="careers">Careers</h2><p>At Progress Rail, you can find a career you will be proud of, with work that makes a difference and the support you need to s…</p><p><a href="/en/careers" title="Learn More">Learn More</a></p></div></div><div><div><picture><img src="https://www.progressrail.com/en/media_13dd527b9f624b464a60b1acec23791a525af04c8.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></div><div><h2 id="sustainability">Sustainability</h2><p>Sustainability is part of who we are and what we do every single day. We recognize progress involves a balance of environment…</p><p><a href="/en/company/sustainability" title="Learn More">Learn More</a></p></div></div><div><div><picture><img src="https://www.progressrail.com/en/media_1612b2137663fab79980d36015a5e133cd5107677.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></div><div><h2 id="community-outreach">Community Outreach</h2><p>At Progress Rail, we understand the importance of giving back to our communities, which is why we started Christmas for Kids …</p><p><a href="/en/company/community-outreach" title="Learn More">Learn More</a></p></div></div><div><div><picture><img src="https://www.progressrail.com/en/media_149d6092ec82152d4ee2c999f979288996516ad4a.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></div><div><h2 id="customer-service">Customer Service</h2><p>Meeting our customer needs. Today, tomorrow and for the future.</p><p><a href="/en/services/customer-service" title="Learn More">Learn More</a></p></div></div></div></div>
-<div><h2 id="progress-rail">PROGRESS RAIL</h2><p><strong>Railroads transport goods and people millions of miles every day. At Progress Rail, we believe in going the distance with them.</strong></p><p>Addressing aging infrastructure needs while continuing to move freight efficiently poses a global challenge. Around the world, railroads continue to serve as a primary solution for effective hauling. Today’s industry priorities have become even more attuned to maximizing productivity and availability. Through fleet modernizations, track structure improvements and industry technology advancements, such as asset protection and predictive maintenance tools, railroads are taking efficiency, safety and reliability to the next level.</p><p>As a Caterpillar company, we are committed to our customers — having built a legacy on delivering superior value in a cost effective manner. Our team works hard to create lifelong relationships, supplying comprehensive rolling stock and infrastructure solutions for the global rail industry and setting the standard for excellence.</p><p>We care about fostering the sustainable movement of goods and people for generations to come, and we know our customers care, too. As one of the largest integrated and diversified suppliers of railroad and transit products and services worldwide, Progress Rail has nearly 200 facilities in 16 countries. Our strategic footprint ensures responsive, quality customer support all day, every day.</p><div class="pr-teaser"><div><div><picture><img src="https://www.progressrail.com/en/media_1ac9c32c59172134e954bf343f9806247a1727acf.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="INNOVATION, rail technology"></picture></div></div><div><div><h3 id="advanced-rail-technology">ADVANCED RAIL TECHNOLOGY</h3><p>We continue to invest in broadening our already rich product and service offerings. We are helping our customers by creating smart, connected fleets to meet and exceed the needs of the railroads of tomorrow.</p><p><a href="/en/segments/rail-technology" title="LEARN MORE">LEARN MORE</a></p></div></div></div><div class="pr-columns"><div><div><picture><img src="https://www.progressrail.com/en/media_11506e984ae9dcc773e3aec1c6498f62c7e3faa12.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></div><div><h3 id="news--events">NEWS &amp; EVENTS</h3><p>Stay up-to-date on our latest news with our corporate press releases listed below and by following us on Facebook, LinkedIn, Instagram, and Twitter.</p><p><a href="/en/company/news" title="Read More">Read More</a></p></div></div><div><div><h3 id="supply-chain">SUPPLY CHAIN</h3><p>Supplier information for conducting business with us.</p><p><a href="/en/services/supply-chain" title="Learn More">Learn More</a></p></div><div><picture><img src="https://www.progressrail.com/en/media_1b4b0ab1b17144838efa03fb36ae106db72297ee7.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="Supplier information"></picture></div></div><div><div><picture><img src="https://www.progressrail.com/en/media_171f102e0a7f7b599dd742eab799bcc8b47d3d2d7.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="Values In Action"></picture></div><div><h3 id="values-in-action">VALUES IN ACTION</h3><p>Integrity. Excellence. Teamwork. Commitment. Sustainability.</p><p><a href="/en/company/codeof-conduct" title="Learn More">Learn More</a></p></div></div><div><div><h3 id="gifts--apparel">GIFTS &amp; APPAREL</h3><p>Shop for official Progress Rail merchandise</p><p><a href="https://progressrailstore.com/default.aspx#" title="Shop Now">Shop Now</a></p></div><div><picture><img src="https://www.progressrail.com/en/media_1d1b8a4c66cafdcda10a8373f25f4d9a52c119287.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="Gifts &amp; Apparel"></picture></div></div></div><div class="pr-video"><div><div><p><picture><img src="https://www.progressrail.com/en/media_17b72c821060191fcc2cab569c995e13fe52c4e05.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></p><p><a href="https://www.youtube.com/embed/FuAkPwuQSig?enablejsapi=1&amp;origin=https%3A%2F%2Fwww.progressrail.com">https://www.youtube.com/embed/FuAkPwuQSig?enablejsapi=1&amp;origin=https%3A%2F%2Fwww.progressrail.com</a></p></div></div></div></div>
+<div><h2 id="progress-rail">PROGRESS RAIL</h2><p><strong>Railroads transport goods and people millions of miles every day. At Progress Rail, we believe in going the distance with them.</strong></p><p>Addressing aging infrastructure needs while continuing to move freight efficiently poses a global challenge. Around the world, railroads continue to serve as a primary solution for effective hauling. Today’s industry priorities have become even more attuned to maximizing productivity and availability. Through fleet modernizations, track structure improvements and industry technology advancements, such as asset protection and predictive maintenance tools, railroads are taking efficiency, safety and reliability to the next level.</p><p>As a Caterpillar company, we are committed to our customers — having built a legacy on delivering superior value in a cost effective manner. Our team works hard to create lifelong relationships, supplying comprehensive rolling stock and infrastructure solutions for the global rail industry and setting the standard for excellence.</p><p>We care about fostering the sustainable movement of goods and people for generations to come, and we know our customers care, too. As one of the largest integrated and diversified suppliers of railroad and transit products and services worldwide, Progress Rail has nearly 200 facilities in 16 countries. Our strategic footprint ensures responsive, quality customer support all day, every day.</p><div class="pr-teaser"><div><div><picture><img src="https://www.progressrail.com/en/media_1ac9c32c59172134e954bf343f9806247a1727acf.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="INNOVATION, rail technology"></picture></div></div><div><div><h3 id="advanced-rail-technology">ADVANCED RAIL TECHNOLOGY</h3><p>We continue to invest in broadening our already rich product and service offerings. We are helping our customers by creating smart, connected fleets to meet and exceed the needs of the railroads of tomorrow.</p><p><strong><a href="/en/segments/rail-technology" title="LEARN MORE">LEARN MORE</a></strong></p></div></div></div><div class="pr-columns"><div><div><picture><img src="https://www.progressrail.com/en/media_11506e984ae9dcc773e3aec1c6498f62c7e3faa12.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></div><div><h3 id="news--events">NEWS &amp; EVENTS</h3><p>Stay up-to-date on our latest news with our corporate press releases listed below and by following us on Facebook, LinkedIn, Instagram, and Twitter.</p><p><strong><a href="/en/company/news" title="Read More">Read More</a></strong></p></div></div><div><div><h3 id="supply-chain">SUPPLY CHAIN</h3><p>Supplier information for conducting business with us.</p><p><strong><a href="/en/services/supply-chain" title="Learn More">Learn More</a></strong></p></div><div><picture><img src="https://www.progressrail.com/en/media_1b4b0ab1b17144838efa03fb36ae106db72297ee7.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="Supplier information"></picture></div></div><div><div><picture><img src="https://www.progressrail.com/en/media_171f102e0a7f7b599dd742eab799bcc8b47d3d2d7.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="Values In Action"></picture></div><div><h3 id="values-in-action">VALUES IN ACTION</h3><p>Integrity. Excellence. Teamwork. Commitment. Sustainability.</p><p><strong><a href="/en/company/codeof-conduct" title="Learn More">Learn More</a></strong></p></div></div><div><div><h3 id="gifts--apparel">GIFTS &amp; APPAREL</h3><p>Shop for official Progress Rail merchandise</p><p><strong><a href="https://progressrailstore.com/default.aspx#" title="Shop Now">Shop Now</a></strong></p></div><div><picture><img src="https://www.progressrail.com/en/media_1d1b8a4c66cafdcda10a8373f25f4d9a52c119287.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt="Gifts &amp; Apparel"></picture></div></div></div><div class="pr-video"><div><div><p><picture><img src="https://www.progressrail.com/en/media_17b72c821060191fcc2cab569c995e13fe52c4e05.jpg?width=750&amp;format=jpg&amp;optimize=medium" alt=""></picture></p><p><a href="https://www.youtube.com/embed/FuAkPwuQSig?enablejsapi=1&amp;origin=https%3A%2F%2Fwww.progressrail.com">https://www.youtube.com/embed/FuAkPwuQSig?enablejsapi=1&amp;origin=https%3A%2F%2Fwww.progressrail.com</a></p></div></div></div></div>
 <div><div class="metadata"><div><div>Title</div><div>Progress Rail, A Caterpillar Company</div></div><div><div>Description</div><div>Railroads transport goods and people millions of miles every day. At Progress Rail, we believe in going the distance with them.</div></div><div><div>Image</div><div><picture><img src="https://www.progressrail.com/en/media_10e0bd5ab02351447be201541d758addf6e18c691.jpg?width=1200&amp;format=pjpg&amp;optimize=medium" alt=""></picture></div></div></div></div>
\ No newline at end of file
diff --git a/icons/chevron.svg b/icons/chevron.svg
new file mode 100644
index 0000000..68e5be5
--- /dev/null
+++ b/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path d="M4 6l4 4 4-4" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/icons/globe.svg b/icons/globe.svg
new file mode 100644
index 0000000..dfe7340
--- /dev/null
+++ b/icons/globe.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99286 15.2635C7.9949 15.2635 7.99694 15.2635 7.99898 15.2635C8.00071 15.2635 8.00244 15.2635 8.00416 15.2635C12.0135 15.2611 15.263 12.0101 15.263 8.00015C15.263 3.98872 12.0111 0.736816 7.99966 0.736816C3.98823 0.736816 0.736328 3.98872 0.736328 8.00015C0.736328 12.0093 3.98456 15.2598 7.99286 15.2635ZM6.94265 1.82563C4.14737 2.30072 1.98285 4.62787 1.75599 7.50016H4.93215C5.11699 5.46689 5.80997 3.51605 6.94265 1.82563ZM1.756 8.50016C1.98286 11.3724 4.14736 13.6996 6.94261 14.1747C5.80995 12.4842 5.11698 10.5334 4.93215 8.50016H1.756ZM14.2433 8.50016C14.0164 11.373 11.8512 13.7004 9.05517 14.1749C10.1879 12.4844 10.881 10.5335 11.0658 8.50016H14.2433ZM14.2433 7.50016C14.0164 4.62734 11.8512 2.29987 9.05514 1.82537C10.1879 3.51585 10.881 5.46678 11.0658 7.50016H14.2433ZM7.99898 13.9422C6.84337 12.3428 6.13139 10.465 5.93665 8.50016H10.0613C9.86657 10.465 9.15458 12.3428 7.99898 13.9422ZM10.0613 7.50016H5.93665C6.1314 5.53532 6.84338 3.65752 7.99898 2.05815C9.15458 3.65752 9.86656 5.53532 10.0613 7.50016Z" fill="#fff"/>
+</svg>
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 818b7d1..5e55520 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -126,19 +126,15 @@ function decorateButtons(main) {
     const em = a.closest('em');
     if (!strong && !em) return;
 
+    // Progress Rail uses a single CTA button style (Caterpillar yellow,
+    // a.button.cta — see styles.css) rather than the boilerplate's
+    // primary/secondary/accent variants, so any emphasis-wrapped link
+    // becomes a "cta" button.
     p.className = 'button-wrapper';
-    a.className = 'button';
-    if (strong && em) { // high-impact call-to-action
-      a.classList.add('accent');
-      const outer = strong.contains(em) ? strong : em;
-      outer.replaceWith(a);
-    } else if (strong) {
-      a.classList.add('primary');
-      strong.replaceWith(a);
-    } else {
-      a.classList.add('secondary');
-      em.replaceWith(a);
-    }
+    a.className = 'button cta';
+    let outer = strong || em;
+    if (strong && em) outer = strong.contains(em) ? strong : em;
+    outer.replaceWith(a);
   });
 }
 
diff --git a/styles/styles.css b/styles/styles.css
index ec03a16..83c877c 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -66,7 +66,7 @@
     --body-font-size-xs: 14px;
 
     /* heading sizes */
-    --heading-font-size-xxl: 45px;
+    --heading-font-size-xxl: 54px;
     --heading-font-size-xl: 36px;
     --heading-font-size-l: 28px;
     --heading-font-size-m: 22px;
@@ -114,10 +114,23 @@ h6 {
   font-family: var(--heading-font-family);
   font-weight: 600;
   line-height: 1.25;
-  scroll-margin: 40px;
+
+  /* clears the sticky pr-jump-nav strip (~69-93px depending on wrapping)
+     so an anchor-jump target isn't left hidden underneath it */
+  scroll-margin-top: 100px;
+}
+
+h1 {
+  font-size: var(--heading-font-size-xxl);
+
+  /* the only h1 on the site is the hero heading — source uses a bolder
+     weight than the shared h1-h6 rule and no top margin (the hero's own
+     padding already provides the offset) */
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 0.5em;
 }
 
-h1 { font-size: var(--heading-font-size-xxl); }
 h2 { font-size: var(--heading-font-size-xl); }
 h3 { font-size: var(--heading-font-size-l); }
 h4 { font-size: var(--heading-font-size-m); }
@@ -289,6 +302,60 @@ main img {
   height: auto;
 }
 
+/* Progress Rail heading underline — a short yellow bar under section
+   headings in the hero, teaser, and default-content/columns areas (not
+   used on card headings). */
+.pr-hero h1::after,
+.pr-teaser h1::after,
+.pr-teaser h2::after,
+.pr-teaser h3::after,
+.pr-columns h1::after,
+.pr-columns h2::after,
+.pr-columns h3::after,
+.default-content-wrapper > h1::after,
+.default-content-wrapper > h2::after,
+.default-content-wrapper > h3::after {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 5px;
+  margin: 16px 0 0;
+  background-color: var(--brand-yellow);
+}
+
+/* body-content headings/copy use a smaller, fixed scale, not the shared
+   h1-h6 scale sized for the hero — verified against the source: h2 is
+   26px everywhere in body content (default content, cards), h3 is 20px
+   in the columns headings, and paragraph copy is 14px throughout. */
+.default-content-wrapper > h2 {
+  margin-top: 0;
+  font-size: 26px;
+  font-weight: 700;
+}
+
+.pr-columns h3 {
+  margin-top: 0;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.default-content-wrapper > p,
+.pr-columns p {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+/* the source indents body copy under a default-content heading 35px on
+   both sides (not just visually left — verified via getComputedStyle,
+   all four paragraphs under "PROGRESS RAIL" measure margin: 35px
+   left/right), narrowing its effective max-width from 1140px to 1070px
+   to match. The heading itself is NOT indented. */
+.default-content-wrapper > p {
+  margin-left: 35px;
+  margin-right: 35px;
+}
+
 .icon {
   display: inline-block;
   height: 24px;
@@ -302,11 +369,22 @@ main img {
 
 /* sections */
 main > .section {
-  margin: 40px 0;
+  /* verified against the source via getBoundingClientRect on every
+     section boundary (cards-container, the teaser/columns/video
+     container, and the gap before the footer): 64px, not the
+     boilerplate's 40px default. */
+  margin: 64px 0;
+
+  /* same reasoning as the heading rule above — covers jump-nav targets
+     that land directly on a section (e.g. #featured has no heading) */
+  scroll-margin-top: 100px;
 }
 
 main > .section > div {
-  max-width: 1200px;
+  /* matches the source's actual content column — verified directly
+     against several unrelated sections (default content, cards, teaser,
+     jump-nav), all measure exactly 1140px, not the boilerplate default */
+  max-width: 1140px;
   margin: auto;
   padding: 0 24px;
 }
@@ -315,6 +393,21 @@ main > .section:first-of-type {
   margin-top: 0;
 }
 
+/* when a section stacks more than one block (e.g. the default-content +
+   pr-teaser + pr-columns + pr-video group), the source separates the
+   wrapper divs with their own top margin rather than relying on the
+   section's own padding — verified via getBoundingClientRect: every
+   wrapper-after-a-wrapper gets 32px, except straight after default
+   content, which gets a smaller 16.8px (matches that copy's own 1.2em
+   paragraph rhythm at its 14px font-size). */
+main > .section > [class$="-wrapper"] + [class$="-wrapper"] {
+  margin-top: 32px;
+}
+
+main > .section > .default-content-wrapper + [class$="-wrapper"] {
+  margin-top: 16.8px;
+}
+
 @media (width >= 900px) {
   main > .section > div {
     padding: 0 32px;
@@ -329,19 +422,30 @@ main .section.highlight {
   padding: 40px 0;
 }
 
-/* Progress Rail CTA button — Caterpillar yellow, square, condensed uppercase.
-   The source renders in-content CTAs as a.button.cta. */
+/* Progress Rail CTA button — Caterpillar yellow. The source renders
+   in-content CTAs as a.button.cta: a slightly-rounded pill, 14px regular
+   weight (its own size, not inherited from the surrounding copy), and
+   `capitalize` rather than a forced uppercase — authored text like
+   "Read More" keeps its own casing instead of becoming "READ MORE".
+   Every in-content CTA (hero, teaser, columns) is also a uniform 200px
+   wide regardless of label length, with the (shorter) label centered by
+   the shared .button rule's `justify-content: center` — the visible gap
+   either side of the text is well beyond what the 16.8px padding alone
+   gives you. The jump-nav's own CTA is the one exception (sizes to its
+   content) — see pr-jump-nav.css. */
 a.button.cta:any-link,
 button.button.cta {
-  border: 2px solid var(--brand-yellow);
-  border-radius: 0;
+  border: 1px solid var(--brand-yellow);
+  border-radius: 4px;
   background-color: var(--brand-yellow);
   color: var(--brand-dark);
   font-family: var(--heading-font-family);
-  font-weight: 700;
-  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: capitalize;
   letter-spacing: 0.3px;
-  padding: 0.6em 1.4em;
+  padding: 0.5em 1.2em;
+  min-width: 200px;
 }
 
 a.button.cta:hover,
diff --git a/tools/nav-footer-source/footer.html b/tools/nav-footer-source/footer.html
index 379b591..ae5f2f9 100644
--- a/tools/nav-footer-source/footer.html
+++ b/tools/nav-footer-source/footer.html
@@ -61,12 +61,42 @@ <h3>Social Media</h3>
           </div>
         </div>
       </div>
-      <p>
-        <a href="/en/company/legal-notices">Legal</a>
-        <a href="/en/company/legal-notices/privacy-notice">Privacy</a>
-        <a href="https://www.caterpillar.com/en/legal-notices/all-rights-reserved.html">Caterpillar © 2026. All Rights Reserved.</a>
-        <a href="https://privacyportal.onetrust.com/webform/ec73b9a1-eecd-48d1-a789-fa7761e54a29/cf3dfa36-1b53-4ec9-8dfc-e84988613fa1">Do Not Sell Or Share My Personal Information</a>
-      </p>
+      <div class="section-metadata">
+        <div>
+          <div>style</div>
+          <div>footer-nav</div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <ul>
+        <li><a href="https://www.facebook.com/progressrail" aria-label="Facebook">Facebook</a></li>
+        <li><a href="https://www.linkedin.com/company/progress-rail-services" aria-label="LinkedIn">LinkedIn</a></li>
+        <li><a href="https://www.instagram.com/progressrail" aria-label="Instagram">Instagram</a></li>
+        <li><a href="https://x.com/Progress_Rail" aria-label="X">X</a></li>
+        <li><a href="https://www.youtube.com/channel/UCsmOgNWA0osXhR0e8OIElOQ" aria-label="YouTube">YouTube</a></li>
+      </ul>
+      <div class="section-metadata">
+        <div>
+          <div>style</div>
+          <div>footer-social</div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <ul>
+        <li><a href="#" id="footer-cookie-settings">Cookie Settings</a></li>
+        <li><a href="/en/company/legal-notices">Legal</a></li>
+        <li><a href="/en/company/legal-notices/privacy-notice">Privacy</a></li>
+        <li><a href="https://www.caterpillar.com/en/legal-notices/all-rights-reserved.html">Caterpillar © 2026. All Rights Reserved.</a></li>
+        <li><a href="https://privacyportal.onetrust.com/webform/ec73b9a1-eecd-48d1-a789-fa7761e54a29/cf3dfa36-1b53-4ec9-8dfc-e84988613fa1">Do Not Sell Or Share My Personal Information</a></li>
+      </ul>
+      <div class="section-metadata">
+        <div>
+          <div>style</div>
+          <div>footer-copyright</div>
+        </div>
+      </div>
     </div>
   </main>
   <footer></footer>
diff --git a/tools/nav-footer-source/nav.html b/tools/nav-footer-source/nav.html
index 94485ff..59ef238 100644
--- a/tools/nav-footer-source/nav.html
+++ b/tools/nav-footer-source/nav.html
@@ -2,7 +2,7 @@
   <header></header>
   <main>
     <div>
-      <p><a href="/en/"><img src="/icons/progressrail-logo.webp" alt="Progress Rail, A Caterpillar Company" width="1049" height="317"></a></p>
+      <p><a href="/en/"><img src="https://main--progressrail-eds--samshao.aem.live/icons/progressrail-logo.webp" alt="Progress Rail, A Caterpillar Company" width="1049" height="317"></a></p>
     </div>
     <div>
       <ul>
@@ -35,11 +35,24 @@
             <li><a href="/en/services/supply-chain">Supply Chain</a></li>
           </ul>
         </li>
-        <li><a href="/en/careers">Careers</a></li>
+        <li>
+          <a href="/en/careers">Careers</a>
+          <ul>
+            <li><a href="/en/careers">All Careers</a></li>
+            <li><a href="/en/careers/brazil">Brazil Careers</a></li>
+            <li><a href="https://www.naukri.com/progress-rail-innovations-jobs-careers-526871" target="_blank" rel="noopener noreferrer">India Careers</a></li>
+            <li><a href="/en/careers/italy-ecm">Italy (ECM) Careers</a></li>
+            <li><a href="/en/careers/uk">UK Careers</a></li>
+            <li><a href="https://xjobs.brassring.com/TGnewUI/Search/Home/Home?partnerid=26144&amp;siteid=5496#home" target="_blank" rel="noopener noreferrer">US Careers</a></li>
+          </ul>
+        </li>
       </ul>
     </div>
     <div>
-      <p><a href="/en/services/customer-service">Contact Us</a></p>
+      <ul>
+        <li><a href="/en/">English</a></li>
+        <li><a href="/fr/">Français</a></li>
+      </ul>
     </div>
   </main>
   <footer></footer>