/* Typography and layout for the public site. */
body { --muted: #526458; }
header nav a, .small, .brand small, .eyebrow,
.section-head .eyebrow, .reference-hero .eyebrow { font-size: .875rem; }
.reference-hero .intro, .section-head > p:last-child,
.catalog .section-head > p:last-child, .maintenance-copy > p:not(.eyebrow),
.process-heading > p, .process-grid p, .cap p, .warehouse-services p {
  font-size: 1rem;
  line-height: 1.65;
  color: #526458;
}
.capabilities .section-head, .warehouse-services .section-head {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
  gap: 1rem clamp(2rem, 4vw, 5rem);
}
.capabilities .section-head > p:last-child,
.warehouse-services .section-head > p:last-child {
  align-self: start;
  margin: 0;
  max-width: 36rem;
}
.capabilities .section-head > p:last-child { font-size: 1.125rem; }
.reference-hero .primary, .hero-quote, .maintenance .primary, .contact > .primary,
.filters button, .search input, .product-card h3, .steps strong, .more {
  font-size: .9375rem;
}
.hero-note, .hero-watch, .hero-image-caption, .business-rail small,
.scope-strip small, .catalog-note, .result-line, .application-grid a,
.steps small, .product-card small, .contact-grid small, .contact-grid a,
.contact-grid p, footer > span, footer > a:not(.brand), .cap-bottom,
.network-control p, .network-control button, .equipment-readout,
.care-card .service-explanation, .care-card #careDescription, .care-card > small,
.care-card-head, .equipment-node span, .quote-row, form label, form > small {
  font-size: .8125rem;
}
.equipment-node span { white-space: normal; width: max-content; max-width: 100%; }
.qr-hub strong { font-size: clamp(.45rem, 1.2vw, .75rem); letter-spacing: 0; }
.hub-subtitle { display: none; }
.cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cap-grid .cap { display: flex; flex-direction: column; min-height: 0 !important; }
.cap-grid .cap-media { position: relative; inset: auto !important; order: 4; height: clamp(160px, 18vw, 240px); margin: 1rem 0; }
.cap-grid .cap-bottom { order: 5; padding-top: 0; }
.cap-grid .cap p { min-height: 0; }
.cap-grid .warehouse-card img { object-fit: contain !important; }
.warehouse-services { background: #f0f3ea; }
.warehouse-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.warehouse-services-grid {
  gap: 0;
  border-block: 1px solid #bdccba;
}
.warehouse-services-grid > div {
  padding: 1.25rem clamp(1rem, 2.4vw, 2rem);
}
.warehouse-services-grid > div + div {
  border-inline-start: 1px solid #bdccba;
}
.warehouse-services-grid h3 { margin: 0 0 .65rem; }
.warehouse-services-grid p { margin: 0; max-width: 40ch; }
@media (max-width: 720px) {
  .warehouse-services-grid > div { padding-inline: 0; }
  .warehouse-services-grid > div + div {
    border-inline-start: 0;
    border-block-start: 1px solid #bdccba;
  }
}
.sheet-crop[class*="crop-"]:not(.crop-pp):not(.crop-pe) {
  background-image: url('assets/systems.png');
  width: min(90%, 350px, calc(130px * var(--crop-width) / var(--crop-height)));
  aspect-ratio: var(--crop-width) / var(--crop-height);

  background-size: var(--sheet-width) var(--sheet-height);
  background-position: var(--sheet-x) var(--sheet-y);
}
@media (max-width: 720px) {
  .capabilities .section-head > p:last-child, .warehouse-services .section-head > p:last-child { margin-top: 1rem; }
  .cap-grid, .warehouse-services-grid { grid-template-columns: 1fr; }
  .cap-grid .cap-media { height: 185px; }
  .reference-hero .actions { flex-wrap: wrap; }
  .equipment-node span { font-size: .6875rem; }
}

.crop-helmet {
  --crop-width: 295;
  --crop-height: 215;
  --sheet-width: 520.678%;
  --sheet-height: 476.279%;
  --sheet-x: 1.612%;
  --sheet-y: 85.785%;
}

.crop-eyewear {
  --crop-width: 233;
  --crop-height: 115;
  --sheet-width: 659.227%;
  --sheet-height: 890.435%;
  --sheet-x: 20.491%;
  --sheet-y: 75.028%;
}

.crop-gloves {
  --crop-width: 215;
  --crop-height: 193;
  --sheet-width: 714.419%;
  --sheet-height: 530.570%;
  --sheet-x: 17.260%;
  --sheet-y: 96.270%;
}

.crop-footwear {
  --crop-width: 330;
  --crop-height: 220;
  --sheet-width: 465.455%;
  --sheet-height: 465.455%;
  --sheet-x: 34.909%;
  --sheet-y: 95.274%;
}

.crop-mop {
  --crop-width: 284;
  --crop-height: 352;
  --sheet-width: 540.845%;
  --sheet-height: 290.909%;
  --sheet-x: 96.645%;
  --sheet-y: 96.726%;
}

/* Keep each section's introduction together before its card grid. */
.capabilities .section-head,
.warehouse-services .section-head,
.process .process-heading {
  display: block;
}

.capabilities .section-head > p:last-child,
.warehouse-services .section-head > p:last-child,
.process .process-heading > p {
  max-width: 60ch;
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (min-width: 721px) {
  .capabilities .section-head,
  .warehouse-services .section-head,
  .process .process-heading {
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
  }

  .capabilities .section-head .eyebrow {
    justify-content: center;
  }

  .capabilities .section-head > p:last-child,
  .warehouse-services .section-head > p:last-child,
  .process .process-heading > p {
    margin-inline: auto;
  }
}

/* Keep every maintenance step readable before selection. */
.maintenance .steps button { opacity: 1; }
.maintenance .steps button.selected { border-bottom-color: #718a6a; }

.process .eyebrow {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: .08em;
}

/* Compact maintenance overview without reducing the supporting text. */
.maintenance {
  padding-block: clamp(2rem, 4vw, 3.75rem);
}

.maintenance h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 3.3vw, 3.25rem);
  line-height: 1.12;
  margin-block: .75rem 1rem;
}

.maintenance .steps { margin-block: 1rem 1.25rem; }
.maintenance .steps button { padding-block: .8rem; }
.maintenance .care-visual {
  min-height: 0;
  width: 100%;
  max-width: 31rem;
  margin-inline: auto;
}

@media (max-width: 720px) {
  .maintenance .care-visual { margin-top: 2rem; }
}

.contact .eyebrow {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: .08em;
  color: #405743;
}

/* Give the emblem room beside the wordmark. */
header .brand img {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
}
@media (max-width: 720px) {
  header .brand img { width: 58px; height: 58px; flex-basis: 58px; }
}

@media (prefers-reduced-motion: no-preference) {
  .reference-hero .industrial-photo {
    animation: hero-photo-enter 1.1s cubic-bezier(.2,.7,.25,1) both;
  }
  .reference-hero .hero-copy > * {
    animation: hero-copy-enter .65s ease-out both;
  }
  .reference-hero .hero-copy > h1 { animation-delay: .1s; }
  .reference-hero .hero-copy > .intro { animation-delay: .2s; }
  .reference-hero .hero-copy > .actions { animation-delay: .3s; }
  .reference-hero .hero-copy > .hero-note { animation-delay: .4s; }
}

@keyframes hero-photo-enter {
  from { opacity: .65; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hero-copy-enter {
  from { opacity: 0; transform: translateY(.85rem); }
  to { opacity: 1; transform: translateY(0); }
}