/*
 * Store placeholder. Loads on top of services.css, which supplies the shell,
 * design tokens, header, footer, buttons, section heads and step numbers.
 */

/*
 * Copy left, stock room right. The artwork is 1.81:1 after cropping the empty
 * left third off the original -- the subject sits on the right of the frame,
 * so the crop discarded dead background rather than anything in the picture.
 */
.st-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  border-bottom: 1px solid var(--rule-soft);
}
.st-hero-copy {
  padding: 78px 56px 66px var(--gutter);
  max-width: 46rem;
}

.st-hero-media {
  position: relative;
  align-self: stretch;
  min-height: 100%;
  overflow: hidden;
  background: var(--bg-image);
}
.st-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The stock shelving fills the right of the frame; hold that in view when
     the panel is taller than the picture's ratio. */
  object-position: 70% 50%;
  filter: var(--img-filter);
}

/*
 * The photo is near-black at its left edge in dark mode and would otherwise
 * meet the copy with a hard seam. In light mode the same gradient stops the
 * dark picture butting straight into an off-white page.
 */
.st-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.12) 38%, rgba(var(--bg-rgb), 0.05) 100%);
}

/*
 * The badge does the honest work of this page, so it is stated plainly rather
 * than buried in a paragraph. Outline instead of a solid fill: a filled red
 * chip reads like a live promotion, which is the opposite of the message.
 */
.st-badge {
  display: inline-block;
  margin: 0 0 22px;
  padding: 7px 16px;
  border: 1px solid var(--accent);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.st-lead {
  margin: 26px 0 0;
  max-width: 52ch;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.st-lead-strong { color: var(--ink); }

/* ---- what it will carry ---- */

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}

.st-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 28px;
  background: var(--bg);
}
.st-item-index {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.st-item-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.st-item-desc { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); }

/* ---- how to get it now ---- */

.st-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--rule);
  margin-top: 28px;
}
.st-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 26px 22px 28px 0;
  background: var(--bg);
}
.st-steps li + li { padding-left: 22px; }

@media (max-width: 900px) {
  /* Picture above the copy, capped so it cannot swallow the fold. */
  .st-hero { grid-template-columns: 1fr; }
  .st-hero-media { order: -1; aspect-ratio: 1486 / 821; min-height: 0; }
  .st-hero-media img { object-position: 60% 50%; }
  .st-hero-scrim {
    background: linear-gradient(0deg, rgba(var(--bg-rgb), 0.85) 0%, rgba(var(--bg-rgb), 0.05) 55%);
  }
  .st-hero-copy { padding: 44px var(--gutter) 46px; }
  .st-steps li,
  .st-steps li + li { padding: 22px 0 24px; }
}