/* Brand scale and intentionally restrained hero interactions. */
.brand img { width: 381px; }

@media (min-width: 901px) {
  .nav-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; }
  .brand { justify-self: start; }
  .menu { justify-self: center; gap: 31px; }
  .menu-cta { display: none; }
  .header-cta { justify-self: end; }
}

.header-cta { background: var(--ink); color: var(--white); padding: 13px 18px; font-size: .83rem; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.header-cta:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }

.hero-visual { overflow: hidden; }
.hero-visual::before { display: none; }
.hero-visual img { animation: camera-drift 22s ease-in-out infinite alternate; transform-origin: 55% 42%; transition: filter .4s ease; }
.hero-visual:hover img { filter: saturate(1.08) contrast(1.06) brightness(.98); }
.hero-visual figcaption { z-index: 3; }
@keyframes camera-drift { from { transform: scale(1.01) translate3d(-.18%,0,0); } to { transform: scale(1.045) translate3d(.55%,-.35%,0); } }

.hero-title {
  cursor: default;
  display: inline-block;
}

.hero-title .word {
  display: inline-block;
  white-space: nowrap;
}

.hero-title .letter {
  display: inline-block;
  will-change: opacity, transform, filter;
  cursor: default;
}

.hero-title .letter.space { width: .27em; }

@keyframes letter-return {
  0% { opacity: 1; transform: translateY(0); filter: blur(0); }
  38% { opacity: 0; transform: translateY(-.22em) scaleX(.76); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (hover: hover) {
  .hero .actions .button.primary {
    box-shadow: 5px 5px 0 rgba(255,255,255,.9);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .hero .actions .button.primary:hover {
    background: var(--white);
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transform: translate(5px,5px);
  }

  .hero .actions .text-link {
    padding: 11px 0 10px;
    border-bottom-color: rgba(255,255,255,.45);
    transition: border-color .2s ease, color .2s ease;
  }

  .hero .actions .text-link b {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid currentColor;
    transition: transform .2s ease, background .2s ease, color .2s ease;
  }

  .hero .actions .text-link:hover { color: var(--lime); border-bottom-color: var(--lime); }
  .hero .actions .text-link:hover b { background: var(--lime); color: var(--ink); transform: translateY(3px); }
}

.hero .actions a:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }

@media (max-width:900px) { .header-cta { display:none; } .menu-cta { display:block; } }
@media (max-width:620px) { .brand img { width: 299px; } }
@media (prefers-reduced-motion:reduce) { .hero .actions .button.primary,.hero .actions .text-link,.hero .actions .text-link b { transition:none; } }