/* Preserve every portrait edge at every viewport size. */
.portrait-frame {
  width: min(100%, 525px);
  height: auto;
  aspect-ratio: 1122 / 1402;
  flex: none;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.portrait-frame::after { display: none; }
.hero-visual {
  min-height: 0;
  align-items: center;
  isolation: isolate;
}
.hero-visual .orbit {
  z-index: 0;
  pointer-events: none;
}
.about-image-inner {
  height: auto;
  aspect-ratio: 1127 / 1396;
}
.about-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.about-image:hover img { transform: none; }
.about-image-inner { transition: box-shadow .35s ease; }
.about-image:hover .about-image-inner { box-shadow: 0 24px 50px rgba(16, 20, 24, .12); }
.service-card.is-touching {
  transform: translateY(-5px) scale(.99);
  box-shadow: 0 18px 38px rgba(16, 20, 24, .12);
}
.service-card.is-touching .growth-core { transform: rotate(32deg) scale(1.05); }
.service-card.is-touching .browser-shape { transform: rotate(-3deg) translateY(9px); }
.service-card.is-touching .node-a { transform: translate(-7px, -7px); }
.service-card.is-touching .node-b { transform: translate(7px, -5px); }
.service-card.is-touching .node-c { transform: translateY(9px); }
.marquee-track.is-paused { animation-play-state: paused; }
.marquee-wrap { touch-action: pan-y; }
.magnetic { transition: translate .25s ease, transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.button:active { transform: translateY(-1px) scale(.98); }
.button:focus-visible, .menu-toggle:focus-visible, .mobile-nav a:focus-visible,
.logo-item:focus-visible, .contact-details a:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }

@media (min-width: 901px) and (max-width: 1199px) {
  .hero h1 { font-size: clamp(44px, 4.5vw, 60px); white-space: normal; }
  .hero-content { grid-template-columns: 1.08fr .92fr; gap: 4%; }
}

@media (max-width: 900px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 140px;
    padding-bottom: 88px;
  }
  .hero h1 { white-space: normal; }
  .hero-visual {
    width: 100%;
    align-self: center;
    margin-top: 58px;
    min-height: 0;
  }
  .portrait-frame { width: min(100%, 490px); }
  .hero-proof { margin-top: 48px; }
}

@media (max-width: 650px) {
  .hero-content { padding-top: 128px; padding-bottom: 66px; }
  .hero-visual { margin-top: 48px; }
  .portrait-frame { width: min(100%, 430px); }
  .about-image-inner { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .magnetic { translate: none !important; }
  .service-card.is-touching { transform: none !important; }
}