.single-page { --hero-header-offset: 24px; --hero-grid-top: 12px; --hero-footer-space: 76px; }
.single-page .site-header { top: var(--hero-header-offset); }
.single-page .hero-building { padding-top: 0; }
.single-page .hero-building .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(calc(var(--header-height) + var(--hero-header-offset) + var(--hero-grid-top)), 1fr) auto minmax(min-content, 1fr); min-height: 100dvh; align-items: center; justify-items: center; gap: 0; padding-block: 0; }
.single-page .hero-building .hero-copy { grid-row: 2; align-self: center; width: 100%; max-width: 880px; margin-top: 0; text-align: center; background: transparent; padding: clamp(20px, 2vw, 32px); }
.single-page .hero-building .hero-description { max-width: 46em; margin-inline: auto; text-wrap: pretty; }
.single-page .hero-building .hero-bottom { position: absolute; inset: auto 0 0; }
.single-page .hero-building .hero-kicker, .single-page .hero-building .hero-actions { justify-content: center; }
.single-page .hero-building .hero-kicker .little-line,
.single-page .hero-building .hero-kicker::after { width: 25px; height: 2px; background: var(--accent); flex-shrink: 0; }
.single-page .hero-building .hero-kicker::after { content: ""; }
.single-page .hero-building h1 { margin-block: clamp(18px, 2.4dvh, 32px); }
.single-page .hero-building .hero-actions { margin-top: 24px; }
.single-page .hero-building .hero-actions .button { transition: background-color .2s ease, color .2s ease; }
.single-page .hero-building .hero-actions:has(.text-link:is(:hover, :focus-visible)) .button { background: transparent; color: inherit; }
.single-page .hero-building .hero-actions .text-link { min-height: 54px; padding: 15px 25px; background: transparent; transition: background-color .2s ease, color .2s ease; }
.single-page .hero-building .hero-actions .text-link:is(:hover, :focus-visible) { background: var(--accent); color: #000; }
.hero-platform-showcase { grid-row: 3; align-self: end; min-width: 0; width: 100%; max-width: 1400px; padding-block: 28px var(--hero-footer-space); }
.hero-card-stage { display: flex; gap: clamp(12px, 1.5vw, 24px); width: 100%; padding: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #60748a #101c2b; }
.hero-platform-card { flex: 1 0 150px; min-width: 150px; height: 160px; border: 0; overflow: hidden; background: transparent; }
.hero-platform-face { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 26px 12px 18px; }
.hero-platform-face img { width: 100%; max-width: 140px; height: 44px; object-fit: contain; }
.hero-platform-logo { opacity: 1; visibility: visible; }
.hero-platform-caption { color: var(--text); font-size: 14px; line-height: 1.5; text-align: center; white-space: nowrap; }
.hero-platform-card:focus-visible { outline-offset: -2px; }
.hero-platform-card:focus-visible .hero-platform-caption { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.hero-platform-card:focus-visible :is(.hero-platform-logo, .hero-platform-caption) { opacity: 1; visibility: visible; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .hero-platform-card:hover .hero-platform-caption { color: var(--accent-ink); }
  .hero-platform-card:hover :is(.hero-platform-logo, .hero-platform-caption) { opacity: 1; visibility: visible; transform: translateY(0); }
}
@media (min-width: 601px) and (min-height: 800px) {
  .single-page .hero-building .hero-copy { position: relative; top: calc(-1 * clamp(24px, 4dvh, 56px)); }
}
@media (min-width: 601px) and (max-height: 1100px) {
  .single-page { --hero-header-offset: 16px; --hero-grid-top: 16px; --hero-footer-space: 52px; }
  .single-page .hero-building .hero-copy { padding-block: 12px; }
  .hero-platform-showcase { padding-top: 12px; }
  .single-page .hero-building h1 { font-size: 48px; line-height: 1.15; margin-block: 12px; }
  .single-page .hero-building .hero-position { font-size: 19px; margin-bottom: 10px; }
  .single-page .hero-building .hero-description { font-size: 14px; line-height: 1.75; }
  .single-page .hero-building .hero-actions { margin-top: 16px; }
  .single-page .hero-building .hero-actions .button { min-height: 40px; padding-block: 10px; }
  .single-page .hero-building .hero-actions .text-link { min-height: 40px; padding-block: 10px; }
  .single-page .hero-building .hero-bottom { min-height: 44px; }
  .hero-platform-card { height: 132px; }
}
@media (max-width: 600px) {
  .single-page { --hero-header-offset: 12px; --hero-grid-top: 16px; --hero-footer-space: 62px; }
  .single-page .hero-building .hero-actions { margin-top: 20px; }
  .single-page .hero-building .hero-actions .text-link { padding-inline: 14px; }
  .hero-platform-card { height: 132px; }
  .hero-platform-face { gap: 12px; padding-inline: 10px; }
  .hero-platform-face img { height: 34px; }
  .hero-platform-caption { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-platform-card, .hero-platform-face .hero-platform-logo, .hero-platform-caption { transition: none; }
}