body.jak-intro-disabled .opening-splash,
body.jak-intro-disabled [class*="opening-splash"] {
  display: none !important;
}

/* Keep the first server-rendered frame aligned with the interactive hero. */
.jak-seo-prerender.jak-seo-home {
  padding: 0;
}

.jak-seo-home > section:not(#home),
.jak-seo-home > footer,
.jak-startup-context {
  padding-inline: clamp(20px, 4vw, 48px);
}

.jak-seo-home > .site-header {
  width: auto;
}

.jak-seo-home .header-name {
  max-width: none;
  font-size: 13px;
  line-height: 1;
}

.jak-seo-home .header-name .jak-header-pictogram-row {
  margin-block: 0;
}

.jak-seo-home #home {
  width: 100%;
  max-width: none;
  padding-block: 6rem 1.25rem;
  border: 0;
}

.jak-seo-home > #works { padding-top: 96px; }
.jak-seo-home > #works > .jak-seo-kicker {
  margin: 0 0 16px;
  font-size: 1.1rem;
  line-height: 1.5;
}
.jak-seo-home #jak-seo-works-title {
  font-size: 3.35rem;
  line-height: 0.76;
}

.jak-seo-home .side-navigation__link {
  text-decoration: none;
}

.jak-seo-home .side-navigation {
  width: auto;
  margin: 0;
}

.jak-seo-home .hero-foil-composition,
body.jak-intro-disabled:not(.jak-hero-ready) #home .hero-foil-composition {
  animation-play-state: paused;
}

.jak-progressive-image[data-entering="true"] {
  animation: jak-photo-arrive 1600ms ease-in-out both;
}

@keyframes jak-photo-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .jak-progressive-image[data-entering="true"] { animation: none; }
}

body.jak-intro-disabled .site-header,
body.jak-intro-disabled #home .jak-hero-flap {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 640px) {
  .jak-seo-home .header-name { font-size: 15px; }
  .jak-seo-home #jak-seo-works-title { font-size: 4.5rem; }
}

@media (min-width: 768px) {
  .jak-seo-home .header-name { font-size: 16px; }
  .jak-seo-home #home { padding-bottom: 2rem; }
  .jak-seo-home #jak-seo-works-title { font-size: 5.7rem; }
}

@media (min-width: 1024px) {
  .jak-seo-home > #works { padding-top: 112px; }
  .jak-seo-home #jak-seo-works-title { font-size: 5.5rem; }
}

@media (min-width: 1536px) {
  .jak-seo-home #jak-seo-works-title { font-size: 6.6rem; }
}

.jak-work-permalink {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: block;
  border-radius: inherit;
  color: inherit;
}

.jak-work-permalink:focus-visible {
  outline: 2px solid #ff5c00;
  outline-offset: -5px;
}

/* Legacy floating layers are replaced by the header and hero motif rows. */
.hero-pictogram-stage,
.hero-pictogram,
.site-pictogram-layer,
.jak-site-pictogram-layer {
  display: none !important;
}

.header-name.jak-header-pictograms-host {
  display: grid !important;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
}

.header-name.jak-header-pictograms-host > .header-name__left,
.header-name.jak-header-pictograms-host > .header-name__right {
  min-width: 0;
  max-width: clamp(4ch, 22vw, 18ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.jak-header-pictogram-row {
  --jak-header-icon-size: 0.7em;
  min-width: 0;
  height: var(--jak-header-icon-size);
  margin-inline: clamp(0.75em, 3vw, 3.25em);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.08em, 0.35vw, 0.32em);
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  animation: none !important;
  transition: none !important;
}

@supports (height: 1cap) {
  .jak-header-pictogram-row {
    --jak-header-icon-size: 1cap;
  }
}

.jak-header-pictogram-row img {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  height: var(--jak-header-icon-size);
  max-width: min(100%, 1.75em);
  max-height: var(--jak-header-icon-size);
  object-fit: contain;
  opacity: 0.82;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

@media (max-width: 480px) {
  .jak-header-pictogram-row {
    margin-inline: 0.5em;
  }
}

.jak-header-pictogram-row img[src*='.svg'] {
  opacity: 0.95;
}

body.jak-hero-flap-pending .hero-poster__title,
body.jak-hero-flap-pending #home .hero-copy-wrap p {
  visibility: hidden;
}

.jak-hero-flap {
  width: clamp(15rem, 34vw, 27rem);
  max-width: min(100%, 27rem);
  height: clamp(3.2rem, 5.8vw, 4.6rem);
  display: grid;
  grid-template-columns: repeat(var(--jak-hero-flap-slots, 5), minmax(0, 1fr));
  gap: clamp(0.2rem, 0.55vw, 0.42rem);
  visibility: visible;
}

.jak-hero-motifs-host {
  border: 0 !important;
  padding-left: 0 !important;
}

.jak-hero-flap__cell {
  position: relative;
  min-width: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.jak-hero-flap__cell img {
  position: absolute;
  inset: 14% 12%;
  display: block;
  width: 76%;
  height: 72%;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.jak-hero-flap__cell.is-leaving img {
  opacity: 0;
  transition-duration: 900ms;
}

@media (max-width: 640px) {
  .jak-hero-flap {
    width: min(72vw, 18rem);
    height: 3.2rem;
    gap: 0.2rem;
  }

  .jak-hero-flap__cell img {
    inset: 16% 10%;
    width: 80%;
    height: 68%;
  }
}

@supports (height: 1cap) {
  .jak-header-pictogram-row img {
    max-width: min(100%, 2.05cap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jak-header-pictogram-row,
  .jak-header-pictogram-row img,
  .jak-hero-flap__cell img {
    animation: none !important;
    transition: none !important;
  }
}
/* Keep photographs ungraded; the stencil supplies the silhouette, not a light wash. */
#home .hero-foil-texture {
  display: none;
}

#home .hero-image-field {
  animation: none;
  transform: none;
  will-change: auto;
}

#home .hero-image-field img {
  filter: none;
}