html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

body {
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default);
}

wa-page,
wa-card {
  display: block;
}

wa-page::part(main-content) {
  padding: 0;
}

wa-page > main {
  padding: 0;
}

.hero {
  min-block-size: 100svh;
  background:
    radial-gradient(
      circle at 100% 0%,
      var(--wa-color-brand-fill-quiet),
      transparent 38%
    ),
    var(--wa-color-surface-default);
}

.hero__inner {
  max-inline-size: 150ch;
  min-block-size: 100svh;
  margin-inline: auto;
  padding: var(--wa-space-2xl);
  justify-content: center;
}

.hero__grid {
  --min-column-size: 36ch;
  align-items: center;
}

.dealership-logo {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  inline-size: min(100%, 54ch);
  block-size: auto;
}

.identity {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.eyebrow {
  margin: 0;
  color: var(--wa-color-text-link);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-bold);
  text-transform: uppercase;
}

.identity h1 {
  margin: 0;
  color: var(--wa-color-text-normal);
  font-size: clamp(var(--wa-font-size-3xl), 8vi, var(--wa-font-size-5xl));
  line-height: var(--wa-line-height-condensed);
}

.role {
  margin: 0;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-l);
}

.bio {
  --wa-prose-line-length: 65ch;
  color: var(--wa-color-text-normal);
}

.bio p {
  margin-block: 0;
}

.action-pair {
  display: inline-flex;
}

.wa-action {
  display: none;
}

.wa-action:defined {
  display: inline-flex;
}

.wa-action:defined + .native-action {
  display: none;
}

.native-action {
  display: inline-flex;
  min-block-size: calc(var(--wa-space-2xl, 2em) + var(--wa-space-xs, 0.75em));
  align-items: center;
  justify-content: center;
  padding-inline: var(--wa-space-l, 1em);
  border: var(--wa-border-width-s, 0.0625em) solid
    var(--wa-color-surface-border, currentColor);
  border-radius: var(--wa-border-radius-pill, 999em);
  color: var(--wa-color-text-normal, CanvasText);
  background: var(--wa-color-surface-raised, Canvas);
  font-weight: var(--wa-font-weight-semibold, 600);
  text-decoration: none;
}

.native-action--primary {
  border-color: var(--wa-color-brand-border-loud, currentColor);
  color: var(--wa-color-brand-on-loud, Canvas);
  background: var(--wa-color-brand-fill-loud, CanvasText);
}

.native-action--plain {
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
}

.native-action:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.native-action:focus-visible {
  outline: var(--wa-focus-ring, solid 0.15em currentColor);
  outline-offset: var(--wa-focus-ring-offset, 0.15em);
}

.identity-divider {
  --color: var(--wa-color-brand-fill-loud);
  --spacing: var(--wa-space-l);
  --width: var(--wa-border-width-s);
}

.contact-card {
  --spacing: var(--wa-space-l);
  max-inline-size: 65ch;
}

.contact-card h2 {
  margin: 0;
  font-size: var(--wa-font-size-l);
}

.portrait {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  inline-size: 100%;
  max-inline-size: 58ch;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: var(--wa-color-surface-lowered);
  box-shadow: var(--wa-shadow-l);
}

.portrait img,
.portrait__fallback {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.portrait img {
  object-fit: cover;
  object-position: center 28%;
}

.portrait__fallback {
  display: grid;
  place-items: center;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-4xl);
  font-weight: var(--wa-font-weight-bold);
}

.portrait[data-image-state="missing"] img {
  display: none;
}

.site-footer {
  padding: var(--wa-space-l) var(--wa-space-2xl);
  color: var(--wa-color-text-quiet);
  background: var(--wa-color-surface-lowered);
}

@media (width <= 48em) {
  .hero__inner {
    padding: var(--wa-space-l);
  }

  .hero__grid {
    --min-column-size: 100%;
  }

  .dealership-logo,
  .identity,
  .portrait {
    grid-column: auto;
    grid-row: auto;
  }

  .portrait {
    max-inline-size: 48ch;
    margin-inline: auto;
  }

  .action-pair {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .primary-actions .action-pair {
    flex: 1 1 18ch;
  }

  .wa-action,
  .native-action {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .wa-action::part(button) {
    min-inline-size: 0;
    inline-size: 100%;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0s;
    animation-duration: 0s;
  }
}