.hero { min-height: calc(100svh - 96px); }
.hero-shade { background: linear-gradient(90deg, rgba(16,15,17,.8), rgba(20,18,20,.42) 45%, rgba(20,18,20,.05) 85%); }
.hero-image { object-position: center 57%; }
.hero-note { max-width: 240px; }

.motto-section { padding: 5rem 7vw; }
.motto-grid { grid-template-columns: 1.15fr 1fr 1fr; }
.motto-card {
  min-width: 0;
  min-height: 360px;
  padding: clamp(1.25rem, 2.5vw, 2.2rem);
  gap: 2.5rem;
}
.motto-card .label { margin: 0 0 .75rem; line-height: 1.6; }
.motto-card h2 {
  font-size: clamp(2.75rem, 4.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.055em;
  margin: 0 0 1.25rem;
}
.motto-card h2 > span { color: #777277; }
.motto-card.featured h2 > span { color: var(--lime); }
.motto-card p:not(.label) { max-width: 31ch; margin: 0 0 1.5rem; color: #625e62; }
.motto-card.featured p:not(.label) { color: #c7c4c6; }
.motto-card a { display: inline-flex; gap: 1rem; align-items: center; line-height: 1.5; }
.motto-card a:hover { border-bottom-color: currentColor; }
.motto-card .number { color: #777277; }
.motto-card.featured .number { color: #b1adb2; }
.pricing { padding-top: 2rem; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lime); outline-offset: 5px; }
.motto-card:not(.featured) a:focus-visible { outline-color: var(--ink); }

@media (max-width: 800px) {
  .hero { min-height: 780px; }
  .hero-content { padding-bottom: 8rem; }
  .hero-note { bottom: 2rem; }
  .hero-image { object-position: 60% center; }
  .motto-section { padding: 3rem 1.5rem; }
  .motto-grid { grid-template-columns: 1fr; }
  .motto-card { min-height: 310px; padding: 1.75rem; gap: 2rem; }
  .motto-card h2 { font-size: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }