@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Karla:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  --color-primary: #286234;
  --color-primary-bright: #3B914E;
  --color-primary-deep: #1D4927;
  --color-secondary: #AED5B7;
  --color-secondary-wash: #D2E8D7;
  --color-secondary-mist: #E7F2E9;
  --color-accent: #09D736;
  --color-ink: #1B281D;
  --color-muted: #5C7060;
  --color-surface: #F8FAF8;
  --color-paper: #FFFFFF;
  --color-rule: #CFDAD1;
  --color-rule-strong: #7A8F7E;
  --color-on-deep: #E4EFE6;
  --color-on-deep-link: #CFE8D5;
  --font-display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.625rem;
  --text-sm: 0.75rem;
  --text-base: 1rem;
  --text-half: 1.272rem;
  --text-lg: 1.618rem;
  --text-mid: 2.058rem;
  --text-xl: 2.618rem;
  --text-xxl: 3.5rem;
  --text-hero: 4.5rem;
  --text-hero-floor: 2.75rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 4rem;
  --gutter: var(--space-md);
  --column-max: 72rem;
  --column-pad: max(var(--gutter), calc((100% - var(--column-max)) / 2));
  --band-space: var(--space-xl);
  --measure: 68ch;
  --cut-sm: 0.75rem;
  --cut-lg: 1.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
  background-color: var(--color-surface);
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

video {
  width: 100%;
  background-color: var(--color-ink);
}

iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-xl);
  line-height: 1.02;
}

h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-mid);
  line-height: 1.06;
}

h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: var(--text-half);
  line-height: 1.15;
}

h4,
h5,
h6 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  font-size: var(--text-base);
}

:is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

p {
  max-width: var(--measure);
  margin: 0 0 var(--space-sm);
}

ul,
ol,
dl {
  max-width: var(--measure);
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--text-sm);
}

address {
  font-style: normal;
}

mark {
  padding-inline: 0.15em;
  color: var(--color-ink);
  background-color: var(--color-secondary-wash);
}

hr {
  height: 1px;
  margin: var(--space-xl) 0;
  border: 0;
  background-color: var(--color-rule);
}

a {
  color: var(--color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-primary-deep);
  text-decoration-thickness: 0.125em;
}

p a:where(:not([class]), [class=""], [class="visible"]),
li a:where(:not([class]), [class=""], [class="visible"]),
figcaption a:where(:not([class]), [class=""], [class="visible"]),
blockquote a:where(:not([class]), [class=""], [class="visible"]),
dd a:where(:not([class]), [class=""], [class="visible"]),
td a:where(:not([class]), [class=""], [class="visible"]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 0.1875rem solid var(--color-primary);
  outline-offset: 0.1875rem;
}

::selection {
  color: var(--color-ink);
  background-color: var(--color-accent);
}

ul {
  margin: 0 0 var(--space-md);
  padding-inline-start: 1.25rem;
  list-style: square;
}

ol {
  margin: 0 0 var(--space-md);
  padding-inline-start: 1.5rem;
}

li {
  margin: 0 0 var(--space-xs);
  padding-inline-start: 0.25rem;
}

li::marker {
  color: var(--color-primary-bright);
}

ol > li::marker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
}

blockquote {
  max-width: 42ch;
  margin: var(--space-lg) 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}

blockquote::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin-bottom: var(--space-sm);
  background-color: var(--color-primary-bright);
}

blockquote p {
  max-width: none;
  margin-bottom: var(--space-xs);
}

blockquote > footer,
blockquote > cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
}

blockquote footer cite {
  font-style: normal;
}

blockquote + blockquote {
  margin-top: var(--space-xl);
}

figure {
  margin: var(--space-lg) 0;
}

figure > a,
figure > picture {
  display: block;
}

figure img {
  width: 100%;
}

figcaption {
  max-width: 60ch;
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-muted);
}

figure > blockquote {
  margin: 0;
}

figure > blockquote + figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 400;
}

details {
  max-width: var(--measure);
  border-top: 1px solid var(--color-rule);
}

details:last-of-type {
  border-bottom: 1px solid var(--color-rule);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-primary-bright);
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 0.75rem 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 2px 0.75rem no-repeat;
}

summary:hover {
  color: var(--color-primary);
}

details[open] > summary {
  padding-bottom: var(--space-xs);
}

details[open] > summary::after {
  border-color: var(--color-accent);
  background:
    linear-gradient(var(--color-ink), var(--color-ink)) 50% 50% / 0.75rem 2px no-repeat,
    var(--color-accent);
}

details > :last-child:not(summary) {
  margin-bottom: var(--space-md);
}

dl {
  margin: 0 0 var(--space-md);
}

dt {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
}

dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

dd {
  margin: var(--space-xs) 0 0;
}

table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: var(--space-lg) 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-base);
}

caption {
  padding-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-muted);
  text-align: start;
  caption-side: top;
}

th {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  line-height: 1.2;
  text-align: start;
  vertical-align: bottom;
}

tbody th {
  font-size: var(--text-base);
  vertical-align: top;
  border-bottom: 1px solid var(--color-rule);
}

td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

main,
.body-region {
  display: block;
}

:is(main, .body-region) > *,
body > :is(section, article) {
  padding-inline: var(--column-pad);
}

:where(main, .body-region) > :where(section, article),
:where(body) > :where(section, article) {
  padding-block: var(--band-space);
}

:is(main, .body-region) > :is(p, ul, ol, dl, details, blockquote) {
  max-width: calc(var(--measure) + 2 * var(--column-pad));
}

.body-region-column {
  width: 100%;
  max-width: calc(var(--column-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:is(main, .body-region) > * .body-region-column {
  max-width: var(--column-max);
  padding-inline: 0;
}

:is(main, .body-region) > section:not(.first-impression, .story-strip--text-left-70-small-image-30, .page-part-endorsement) + section:not(.first-impression, .story-strip--text-left-70-small-image-30, .page-part-endorsement) {
  background-image: linear-gradient(var(--color-rule), var(--color-rule));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: calc(100% - 2 * var(--column-pad)) 1px;
}

:is(main, .body-region, body) > :is(section, article):is(:not([class]), [class=""], [class="visible"], [class="body-region-section"], [class="body-region-section visible"], .page-part, .page-part-opening) > :last-child {
  margin-bottom: 0;
}

.page-part-lede,
:is(main, .body-region) > section > h1 + p {
  max-width: 52ch;
  font-size: var(--text-half);
  line-height: 1.45;
}

.page-part-opening h1 {
  margin-bottom: var(--space-md);
}

.primary-menu {
  position: relative;
  z-index: 20;
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}

.primary-menu-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 4rem auto auto;
  grid-template-areas:
    "brand toggle"
    "links links"
    "action action";
  align-content: start;
  align-items: center;
  column-gap: var(--space-sm);
  row-gap: 0;
  padding: 0 var(--column-pad);
}

.primary-menu-brand {
  grid-area: brand;
  justify-self: start;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 var(--space-sm) 0 var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-paper);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(45deg, transparent var(--cut-sm), var(--color-primary) calc(var(--cut-sm) + 1px));
}

.primary-menu-brand:hover {
  color: var(--color-paper);
  background: linear-gradient(45deg, transparent var(--cut-sm), var(--color-primary-deep) calc(var(--cut-sm) + 1px));
}

.primary-menu-toggle {
  grid-area: toggle;
  justify-self: end;
  display: inline-grid;
  place-content: center;
  gap: 0.3125rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-ink);
  background-color: transparent;
  border: 2px solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
}

.primary-menu-toggle span {
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  background-color: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.primary-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.primary-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.primary-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

.primary-menu-links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.3s ease, visibility 0s linear 0.3s;
}

.primary-menu-links.is-active {
  max-height: 31.25rem;
  visibility: visible;
  transition: max-height 0.3s ease, visibility 0s linear 0s;
}

.primary-menu-links a {
  display: block;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.primary-menu-links a:first-child {
  margin-top: var(--space-xs);
}

.primary-menu--top-bar-right-underline .primary-menu-links a:hover,
.primary-menu--top-bar-right-underline .primary-menu-links a:focus-visible {
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.1875rem;
  text-underline-offset: 0.4em;
}

.primary-menu--top-bar-right-underline .primary-menu-links a[aria-current="page"] {
  color: var(--color-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 0.1875rem;
  text-underline-offset: 0.4em;
}

.action-link,
.page-part-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-paper);
  text-align: center;
  text-decoration: none;
  background: linear-gradient(225deg, transparent var(--cut-sm), var(--color-primary) calc(var(--cut-sm) + 1px));
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.action-link:hover,
.page-part-form button[type="submit"]:hover {
  color: var(--color-paper);
  background: linear-gradient(225deg, transparent var(--cut-sm), var(--color-primary-deep) calc(var(--cut-sm) + 1px));
}

.action-link-primary {
  min-height: 3.25rem;
  padding-inline: var(--space-lg);
}

.action-link-quiet {
  color: var(--color-ink);
  background: transparent;
  border: 2px solid var(--color-ink);
}

.action-link-quiet:hover {
  color: var(--color-ink);
  background: var(--color-secondary-wash);
}

.primary-menu .primary-menu-action {
  grid-area: action;
  display: none;
  justify-self: start;
  min-height: 2.5rem;
  margin: var(--space-xs) 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-ink);
  white-space: nowrap;
  background: transparent;
  border: 2px solid var(--color-ink);
}

.primary-menu .primary-menu-action:hover {
  color: var(--color-ink);
  background: var(--color-secondary-wash);
}

.primary-menu.is-active .primary-menu-action {
  display: inline-flex;
}

.next-step-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.first-impression {
  padding-block: 0;
  padding-inline: 0;
  background-color: var(--color-surface);
}

.first-impression--large-product-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: 0;
}

.first-impression-showcase {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  margin: 0;
}

.first-impression-showcase > a,
.first-impression-showcase > picture {
  display: block;
  min-width: 0;
}

.first-impression-showcase img,
.first-impression-showcase video,
.first-impression-showcase iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  background-color: var(--color-secondary-mist);
}

.first-impression-showcase img,
.first-impression-showcase video {
  object-fit: cover;
  object-position: center;
}

.first-impression-showcase figcaption {
  max-width: none;
  margin: 0;
  padding: var(--space-xs) var(--column-pad) 0;
}

.first-impression-content {
  min-width: 0;
  padding: var(--space-lg) var(--column-pad) var(--space-xl);
}

.first-impression-content h1 {
  margin-bottom: var(--space-md);
  font-size: var(--text-hero-floor);
  line-height: 0.98;
  letter-spacing: -0.005em;
}

.first-impression-content > p {
  max-width: 46ch;
}

.first-impression-specs {
  max-width: 34rem;
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  list-style: none;
  background: linear-gradient(225deg, transparent var(--cut-lg), var(--color-secondary-wash) calc(var(--cut-lg) + 1px));
  animation: tag-settle 0.7s ease-out 0.2s both;
}

.first-impression-specs li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: var(--space-sm);
  align-items: baseline;
  margin: 0;
  padding: var(--space-xs) 0;
  text-align: start;
}

.first-impression-specs li + li {
  border-top: 0.125rem dotted var(--color-primary);
}

.first-impression-specs strong {
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  text-align: start;
}

.first-impression-content .next-step-group {
  margin-top: 0;
}

@keyframes tag-settle {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.body-region-section > h2 {
  max-width: 30ch;
}

.story-strip--text-left-70-small-image-30 {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background-color: var(--color-secondary-mist);
}

.story-strip-text {
  min-width: 0;
}

.story-strip-text--wide > :last-child {
  margin-bottom: 0;
}

.story-strip-media {
  min-width: 0;
  margin: 0;
}

.story-strip-media > a,
.story-strip-media > picture {
  display: block;
}

.story-strip-media img,
.story-strip-media video,
.story-strip-media iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0;
}

.story-strip-media img,
.story-strip-media video {
  object-fit: cover;
  object-position: center;
}

.story-strip-media iframe {
  aspect-ratio: 16 / 9;
}

.story-strip-media figcaption {
  margin-top: var(--space-xs);
}

.story-strip--three-column-text > h2,
.story-strip--timeline-horizontal-vertical > h2 {
  margin-bottom: var(--space-lg);
}

.story-strip-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.story-strip-columns > * {
  min-width: 0;
  padding-top: var(--space-sm);
  border-top: 2px solid var(--color-ink);
}

.story-strip-columns h3 {
  margin-top: 0;
}

.story-strip-columns > * > :last-child {
  margin-bottom: 0;
}

.story-strip-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.story-strip-timeline > li {
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-lg) var(--space-lg);
  border-inline-start: 2px solid var(--color-primary-bright);
}

.story-strip-timeline > li:last-child {
  padding-bottom: 0;
  border-inline-start-color: transparent;
}

.story-strip-timeline > li::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: calc(-0.375rem - 1px);
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--color-primary);
}

.story-strip-timeline time {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
}

.story-strip-timeline h3 {
  margin: 0 0 var(--space-xs);
}

.story-strip-timeline p {
  margin: 0;
}

.arrangement {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: var(--space-xs);
  margin-block: var(--space-lg);
}

.arrangement--packery-tight-fit {
  align-items: stretch;
}

.offering {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
}

.offering > a,
.offering > picture {
  display: block;
}

.offering img,
.offering video,
.offering iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
}

.offering img,
.offering video {
  object-fit: cover;
  object-position: center;
}

.offering h3 {
  margin: var(--space-md) var(--space-md) var(--space-xs);
}

.offering p {
  margin: 0 var(--space-md) var(--space-sm);
}

.offering > :last-child {
  margin-bottom: var(--space-md);
}

.offering--sm h3 {
  font-size: var(--text-half);
}

.info-callout {
  max-width: 44rem;
  margin: var(--space-md) auto;
  padding: var(--space-md) var(--space-lg);
  color: var(--color-ink);
  background: var(--color-secondary-mist);
  border: 1px solid var(--color-rule);
  border-inline-start: 4px solid var(--color-primary);
}

.info-callout h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-half);
}

.info-callout p {
  max-width: 62ch;
}

.info-callout p:last-child {
  margin-bottom: 0;
}

.page-part-endorsement {
  max-width: 44rem;
  margin: var(--space-md) 0;
  padding: var(--space-lg);
  color: var(--color-on-deep);
  background: linear-gradient(225deg, transparent var(--cut-lg), var(--color-primary-deep) calc(var(--cut-lg) + 1px));
}

.page-part-endorsement h3 {
  margin: 0 0 var(--space-sm);
  padding-inline-end: var(--space-md);
  font-size: var(--text-half);
  color: var(--color-paper);
}

.page-part-endorsement p {
  max-width: 62ch;
}

.page-part-endorsement p:last-child {
  margin-bottom: 0;
}

.page-part-endorsement a[href] {
  color: var(--color-on-deep-link);
  text-decoration-color: currentColor;
}

.page-part-endorsement a[href]:hover {
  color: var(--color-paper);
}

.page-part-endorsement :focus-visible {
  outline-color: var(--color-paper);
}

:is(main, .body-region) > .page-part-endorsement {
  max-width: none;
  margin: var(--band-space) 0;
  padding: var(--space-xl) var(--column-pad);
}

.page-part-contact {
  max-width: 40rem;
  margin-block: var(--space-md);
  padding-block: var(--space-md);
  border-top: 2px solid var(--color-ink);
  border-bottom: 1px solid var(--color-rule);
  font-style: normal;
}

.page-part-contact p {
  margin-bottom: var(--space-xs);
}

.page-part-contact > :last-child {
  margin-bottom: 0;
}

.page-part-contact dt {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-base);
}

.page-part-contact dd {
  margin: 0 0 var(--space-sm);
}

figure.page-part-video {
  margin: var(--space-lg) 0;
}

figure.page-part-video > :is(iframe, video),
.page-part-video > figure > :is(iframe, video) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  object-fit: cover;
  background-color: var(--color-ink);
}

.page-part-video figcaption {
  max-width: 60ch;
  margin-top: var(--space-xs);
  color: var(--color-muted);
}

.page-part-table {
  max-width: 100%;
  margin: var(--space-lg) 0;
  overflow-x: auto;
}

.page-part-table > table {
  margin: 0;
}

.page-part-form {
  display: grid;
  gap: var(--space-md);
  max-width: 40rem;
  margin-block: var(--space-md);
}

.page-part-form label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  line-height: 1.2;
}

.page-part-form :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  color: var(--color-ink);
  background-color: var(--color-paper);
  border: 2px solid var(--color-rule-strong);
  border-radius: 0;
}

.page-part-form :is(input[type="checkbox"], input[type="radio"]) {
  display: inline-block;
  width: auto;
  min-height: 0;
}

.page-part-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.page-part-form :is(input, select, textarea):focus-visible {
  border-color: var(--color-primary);
}

.page-part-form button[type="submit"] {
  justify-self: start;
}

.closing-block {
  margin: 0;
  color: var(--color-ink);
  background-color: var(--color-surface);
}

.closing-block--cta-1col-own-row,
.closing-block[data-edge="hairline"] {
  border-top: 1px solid var(--color-rule);
}

.closing-block-inner {
  padding: var(--space-xl) var(--column-pad);
}

.closing-block-inner--1col {
  display: block;
}

.closing-block-column {
  min-width: 0;
}

.closing-block-column--cta > * {
  max-width: var(--measure);
}

.closing-block-heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-mid);
}

.closing-block-column--cta > p {
  margin-bottom: var(--space-md);
}

.closing-block-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  max-width: none;
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 0 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}

.closing-block-pages li {
  margin: 0;
  padding: 0;
}

.closing-block .closing-block-pages a {
  font-family: var(--font-display);
  font-size: var(--text-half);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--color-rule-strong);
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

.closing-block .closing-block-pages a:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

.closing-block-meta {
  padding: var(--space-sm) var(--column-pad);
  border-top: 1px solid var(--color-rule);
}

.closing-block-meta--row {
  display: block;
}

.closing-block-meta p {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-muted);
}

@media (min-width: 480px) {
  dl.page-part-contact {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-lg);
    row-gap: var(--space-xs);
  }

  dl.page-part-contact dd {
    margin: 0;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-lg);
    --band-space: var(--space-xxl);
  }

  h1 {
    font-size: var(--text-xxl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
  }

  blockquote {
    font-size: var(--text-lg);
  }

  table {
    display: table;
    overflow-x: visible;
  }

  .first-impression-showcase img,
  .first-impression-showcase video,
  .first-impression-showcase iframe {
    aspect-ratio: 16 / 9;
  }

  .first-impression-content h1 {
    font-size: var(--text-xxl);
  }

  .first-impression-specs li {
    display: flex;
    column-gap: 0;
    text-align: end;
  }

  .first-impression-specs li + li {
    border-top: 0;
  }

  .first-impression-specs strong {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    min-width: 5rem;
  }

  .first-impression-specs strong::after {
    content: "";
    flex: 1 1 var(--space-md);
    min-width: var(--space-sm);
    margin-inline: var(--space-xs);
    border-bottom: 0.125rem dotted var(--color-primary);
    transform: translateY(-0.3em);
  }

  .story-strip--text-left-70-small-image-30 {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .story-strip-text,
  .story-strip-text--wide {
    flex: 7 1 0;
  }

  .story-strip-media,
  .story-strip-media--small {
    flex: 3 1 0;
  }

  .story-strip-media--small img,
  .story-strip-media--small video {
    aspect-ratio: 4 / 5;
  }

  .arrangement {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offering--lg {
    grid-column: span 2;
  }

  .page-part-endorsement {
    padding: var(--space-xl);
  }

  .page-part-endorsement h3 {
    font-size: var(--text-lg);
  }

  :is(main, .body-region) > .page-part-endorsement {
    margin-inline: var(--column-pad);
    padding: var(--space-xl);
  }

  .closing-block-heading {
    font-size: var(--text-xl);
  }
}

@media (min-width: 1024px) {
  .primary-menu-inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 4.5rem;
    grid-template-areas: "links action brand";
    column-gap: var(--space-md);
  }

  .primary-menu-toggle {
    display: none !important;
  }

  .primary-menu-links,
  .primary-menu-links.is-active {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-sm);
    max-height: none;
    overflow: visible;
    visibility: visible;
    transition: none;
  }

  .primary-menu-links a {
    flex: 0 0 auto;
    padding: var(--space-xs) 0;
    border-top: 0;
    font-size: var(--text-base);
  }

  .primary-menu-links a:first-child {
    margin-top: 0;
  }

  .primary-menu .primary-menu-action {
    display: inline-flex;
    margin: 0;
  }

  .primary-menu-brand {
    margin-bottom: -1px;
    padding: 0 var(--space-md) 0 var(--space-lg);
    background: linear-gradient(45deg, transparent var(--cut-lg), var(--color-primary) calc(var(--cut-lg) + 1px));
  }

  .primary-menu-brand:hover {
    background: linear-gradient(45deg, transparent var(--cut-lg), var(--color-primary-deep) calc(var(--cut-lg) + 1px));
  }

  .story-strip-text,
  .story-strip-text--wide {
    flex: 2 1 0;
  }

  .story-strip-media,
  .story-strip-media--small {
    flex: 1 1 0;
  }

  :is(main, .body-region) > .page-part-endorsement {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-xl);
    align-items: start;
  }

  :is(main, .body-region) > .page-part-endorsement > * {
    grid-column: 2;
    min-width: 0;
  }

  :is(main, .body-region) > .page-part-endorsement > :is(h2, h3) {
    grid-column: 1;
    grid-row: span 8;
    margin: 0;
    padding-inline-end: 0;
  }

  .first-impression--large-product-showcase {
    grid-template-columns: var(--column-pad) minmax(0, 1fr) minmax(0, 1fr);
    min-height: 36rem;
  }

  .first-impression-showcase {
    grid-column: 3;
    grid-row: 1;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .first-impression-showcase > a,
  .first-impression-showcase > picture {
    height: 100%;
  }

  .first-impression-showcase img,
  .first-impression-showcase video,
  .first-impression-showcase iframe {
    height: 100%;
    min-height: 30rem;
    aspect-ratio: auto;
  }

  .first-impression-showcase figcaption {
    padding: var(--space-xs) var(--space-md) var(--space-sm);
  }

  .first-impression-content {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: var(--space-xxl) var(--space-xl) var(--space-xxl) 0;
  }

  :is(main, .body-region, body) > :is(section, article):is(:not([class]), [class=""], [class="visible"], [class="body-region-section"], [class="body-region-section visible"], .page-part, .page-part-opening) {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-xl);
    row-gap: 0;
    align-items: start;
  }

  :is(main, .body-region, body) > :is(section, article):is(:not([class]), [class=""], [class="visible"], [class="body-region-section"], [class="body-region-section visible"], .page-part, .page-part-opening) > * {
    grid-column: 2;
    min-width: 0;
  }

  :is(main, .body-region, body) > :is(section, article):is(:not([class]), [class=""], [class="visible"], [class="body-region-section"], [class="body-region-section visible"], .page-part, .page-part-opening) > h2 {
    position: sticky;
    top: var(--space-lg);
    grid-column: 1;
    grid-row: span 24;
    max-width: none;
    margin: 0;
  }

  :is(main, .body-region, body) > :is(section, article):is(:not([class]), [class=""], [class="visible"], [class="body-region-section"], [class="body-region-section visible"], .page-part, .page-part-opening) > :is(h1, table, .arrangement, .page-part-table) {
    grid-column: 1 / -1;
  }

  :is(main, .body-region, body) > :is(section, article):is(:not([class]), [class=""], [class="visible"], [class="body-region-section"], [class="body-region-section visible"], .page-part, .page-part-opening) > h2 + * {
    margin-top: 0;
  }

  .story-strip-columns {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    column-gap: var(--space-xl);
  }

  .story-strip-columns--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-strip-timeline {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    row-gap: var(--space-xl);
  }

  .story-strip-timeline > li {
    padding: var(--space-lg) var(--space-lg) 0 0;
    border-inline-start: 0;
    border-top: 2px solid var(--color-primary-bright);
  }

  .story-strip-timeline > li::before {
    top: calc(-0.375rem - 1px);
    left: 0;
  }

  .arrangement--packery-tight-fit {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .offering--sm {
    grid-column: span 1;
  }

  .offering--md {
    grid-column: span 2;
  }

  .offering--lg {
    grid-column: span 2;
    grid-row: span 2;
  }

  .offering--lg > a,
  .offering--lg > picture {
    display: flex;
    flex: 1 1 0;
    min-height: 14rem;
  }

  .offering--lg img,
  .offering--lg video {
    flex: 1 1 0;
    min-height: 14rem;
    aspect-ratio: auto;
  }

  .offering--lg > a img,
  .offering--lg > picture img {
    height: auto;
    min-height: 0;
  }

  .closing-block-inner {
    padding-block: var(--space-xxl);
  }

  .closing-block-column--cta {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-xl);
    row-gap: 0;
    align-items: start;
  }

  .closing-block-column--cta > * {
    grid-column: 2;
  }

  .closing-block-column--cta > .closing-block-heading {
    grid-column: 1;
    grid-row: span 8;
    margin: 0;
  }
}

@media (min-width: 1280px) {
  .primary-menu-inner {
    column-gap: var(--space-lg);
  }

  .primary-menu-brand {
    font-size: var(--text-mid);
  }

  :is(main, .body-region) > .page-part-endorsement {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .primary-menu-links,
  .primary-menu-links.is-active {
    gap: var(--space-md);
  }

  .primary-menu-links a {
    font-size: var(--text-half);
  }

  .first-impression--large-product-showcase {
    grid-template-columns: var(--column-pad) minmax(0, 5fr) minmax(0, 7fr);
    min-height: 40rem;
  }

  .first-impression-content h1 {
    font-size: var(--text-hero);
  }

  :is(main, .body-region, body) > :is(section, article):is(:not([class]), [class=""], [class="visible"], [class="body-region-section"], [class="body-region-section visible"], .page-part, .page-part-opening) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .closing-block-column--cta {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .first-impression-specs {
    animation: none;
  }

  [data-animate],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}