.hardware-page .hardware-intro {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hardware-intro .section-inner { padding-top: 88px; padding-bottom: 38px; }
.hardware-intro h1 { max-width: 900px; text-wrap: balance; }
.hardware-intro-copy { max-width: 780px; }
.hardware-intro-copy .body-copy { margin: 18px 0 24px; }

.hardware-index {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 64px;
  padding-top: 22px;
}

.hardware-index a {
  align-items: center;
  color: var(--forest);
  display: inline-flex;
  font-size: 14px;
  font-weight: 750;
  gap: 10px;
  min-height: 44px;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.hardware-index span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.hardware-environment {
  --environment-accent: #725337;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  scroll-margin-top: 90px;
}

.hardware-stage {
  align-items: center;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1180px;
  min-height: 820px;
  min-height: max(740px, calc(100svh - 72px));
  padding: 96px 24px;
  position: relative;
  z-index: 1;
}

.hardware-panel {
  background: var(--paper);
  border-left: 5px solid var(--environment-accent);
  border-radius: 0 8px 8px 0;
  padding: 40px;
}

.hardware-kicker {
  align-items: baseline;
  color: var(--environment-accent);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 12px;
  margin: 0 0 22px;
  text-transform: uppercase;
}

.hardware-kicker span { font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1; }
.hardware-panel h2 { font-size: 42px; text-wrap: balance; }
.hardware-panel > p:not(.hardware-kicker) { color: #46534d; font-size: 16px; margin: 20px 0 0; }
.hardware-panel > .hardware-lead { color: var(--forest) !important; font-size: 21px !important; line-height: 1.4; }

.hardware-next {
  align-items: center;
  color: var(--forest);
  display: inline-flex;
  font-size: 14px;
  font-weight: 750;
  gap: 12px;
  margin-top: 22px;
  min-height: 44px;
  text-underline-offset: 5px;
}

.hardware-brief { background: #fffef8; border-radius: 8px; padding: 28px 30px; }
.hardware-brief .eyebrow { color: var(--environment-accent); font-size: 12px; }
/* Community concept image in the hardware overview brief. */
.hardware-brief-concept { margin: 20px 0 0; }
.hardware-brief-concept img { display: block; width: 100%; height: auto; border-radius: 4px; }
.hardware-brief-concept figcaption { color: #46534d; font-size: 12px; line-height: 1.5; margin-top: 8px; }

.hardware-brief dl { margin: 20px 0 0; }
.hardware-brief dl > div { border-top: 1px solid var(--line); padding: 18px 0; }
.hardware-brief dl > div:last-child { padding-bottom: 0; }
.hardware-brief dt { color: var(--forest); font-size: 16px; font-weight: 800; }
.hardware-brief dd { color: #46534d; font-size: 15px; margin: 6px 0 0; }

.hardware-home {
  background-color: #b39575;
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(247, 229, 201, 0.7), transparent 62%),
    linear-gradient(115deg, #c9b193, #9d7d5e);
}

.hardware-travel {
  --environment-accent: #52636a;
  background-color: #cfd2cf;
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0.45), transparent 72%),
    repeating-linear-gradient(0deg, #c7cbc8 0 2px, #e1e3df 3px 32px, #bdc2bf 33px 35px, #d5d9d5 37px 68px);
}

.hardware-travel#trucking-construction {
  background-color: #c7b496;
  background-image:
    linear-gradient(rgba(226, 218, 203, 0.16), rgba(226, 218, 203, 0.16)),
    url("trucking-osb.jpg");
  background-size: auto, 900px 900px;
}

.hardware-community {
  --environment-accent: #365b4a;
  background-color: #a5b9ab;
  background-image: linear-gradient(180deg, #d0ddd6, #b1c3b8 48%, #7d9787);
}

.hardware-community::before,
.hardware-community::after {
  content: "";
  height: 62%;
  inset: auto 0 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hardware-community::before {
  background: #819b8b;
  clip-path: polygon(0 36%, 14% 12%, 30% 39%, 46% 0, 67% 44%, 85% 15%, 100% 36%, 100% 100%, 0 100%);
}

.hardware-community::after {
  background: #5f7c6c;
  clip-path: polygon(0 65%, 22% 39%, 44% 72%, 63% 37%, 82% 61%, 100% 40%, 100% 100%, 0 100%);
}

.hardware-response {
  --environment-accent: #9c3332;
  background-color: #a53c39;
  background-image: linear-gradient(125deg, #ba5550, #8b2f2f);
  border-top: 12px solid #e4bd50;
  border-bottom: 12px solid #e4bd50;
}

.hardware-response::after {
  background: repeating-linear-gradient(-45deg, #e4bd50 0 24px, #583e32 24px 48px);
  bottom: 0;
  content: "";
  height: 12px;
  left: 0;
  position: absolute;
  right: 0;
}

.hardware-response .hardware-panel { border-left-color: #d3a234; }

.hardware-field {
  --environment-accent: #515c43;
  background-color: #888b72;
  background-image: url("field-terrain.svg");
  background-size: 900px 600px;
}

.hardware-commission { background: var(--paper); scroll-margin-top: 90px; }
.hardware-commission-intro { align-items: start; display: grid; gap: 48px; grid-template-columns: 1fr 1fr; }
.hardware-commission-intro .body-copy { margin: 0; }
.hardware-process { display: grid; gap: 26px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 52px 0 0; padding: 0; }
.hardware-process li { border-top: 2px solid var(--line); padding-top: 18px; }
.hardware-process li > span { color: var(--moss); font-size: 13px; font-weight: 800; }
.hardware-process h3 { font-size: 19px; line-height: 1.2; margin-top: 14px; }
.hardware-process p { color: var(--muted); font-size: 15px; margin: 10px 0 0; }

@media (max-width: 980px) {
  .hardware-stage { gap: 28px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 72px 24px; }
  .hardware-panel { padding: 28px; }
  .hardware-panel h2 { font-size: 36px; }
  .hardware-brief { padding: 24px; }
  .hardware-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hardware-intro .section-inner { padding-top: 56px; padding-bottom: 28px; }
  .hardware-title-break { display: none; }
  .hardware-index { column-gap: 20px; margin-top: 38px; }
  .hardware-index a { font-size: 13px; }
  .hardware-stage { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 60px 18px; }
  .hardware-panel { padding: 28px 24px; }
  .hardware-panel h2 { font-size: 32px; }
  .hardware-panel > .hardware-lead { font-size: 19px !important; }
  .hardware-panel > p:not(.hardware-kicker) { font-size: 16px; }
  .hardware-brief { padding: 24px; }
  .hardware-commission-intro { gap: 24px; grid-template-columns: 1fr; }
  .hardware-process { gap: 28px; margin-top: 34px; }
}

@media (max-width: 380px) {
  .hardware-panel { padding: 26px 20px; }
  .hardware-panel h2 { font-size: 30px; }
  .hardware-process { grid-template-columns: 1fr; }
}

.hardware-options {
  background: var(--paper);
  border-radius: 8px;
  grid-column: 1 / -1;
  padding: 28px 30px;
}

.hardware-options > .eyebrow { color: var(--environment-accent); font-size: 12px; }
.hardware-options-grid { display: grid; gap: 36px; grid-template-columns: 1fr 1fr; margin-top: 22px; }
.hardware-options h3 { font-size: 20px; }
.hardware-options p:not(.eyebrow) { color: #46534d; font-size: 16px; margin: 12px 0 0; }
.hardware-options p.hardware-footnote { font-size: 14px; }
.hardware-options sup { font-size: 0.75em; line-height: 0; }

.hardware-arctic {
  --environment-accent: #3e6372;
  background-color: #becfd4;
  background-image: linear-gradient(180deg, #e4eeee, #bdd0d8 55%, #99b2be);
}

.hardware-arctic::before,
.hardware-arctic::after {
  bottom: 0;
  content: "";
  height: 68%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 0;
}

.hardware-arctic::before {
  background: #dce7e8;
  clip-path: polygon(0 38%, 20% 6%, 43% 49%, 63% 0, 84% 32%, 100% 14%, 100% 100%, 0 100%);
}

.hardware-arctic::after {
  background: #a7bec7;
  clip-path: polygon(0 68%, 25% 45%, 49% 76%, 71% 35%, 100% 66%, 100% 100%, 0 100%);
}

@media (max-width: 760px) {
  .hardware-options { padding: 24px; }
  .hardware-options-grid { gap: 28px; grid-template-columns: 1fr; }
}

.hardware-view { margin-top: 24px; text-align: right; }
.hardware-view .button { font-size: 14px; }