/* Keep complete artwork visible within the existing template frames. */
[data-screen-label="Hero"] h1 > span {
  flex-shrink: 0;
  overflow: visible !important;
  padding-right: .08em;
}
.hero-gallery {
  height: auto !important;
  align-items: center;
}
#top .hero-gallery > button {
  flex-grow: 1 !important;
  transform: none !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  box-shadow: 0 18px 40px -14px rgba(20,20,19,.35),0 2px 6px rgba(20,20,19,.12) !important;
}
/* The template's generated :hover rule is !important. Keep intrinsic image
   sizing stable instead of expanding flex width and therefore card height. */
@media (hover:hover) and (pointer:fine) and (min-width:601px) {
  #top .hero-gallery > button:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 36px -16px rgba(20,20,19,.35),0 0 0 1px rgba(255,122,26,.5) !important;
  }
}
#top .hero-gallery > button:focus-visible {
  outline: 2px solid #ff7a1a;
  outline-offset: 3px;
}
@media (prefers-reduced-motion:reduce) {
  #top .hero-gallery > button { transition:none !important; }
  #top .hero-gallery > button:hover { transform:none !important; }
}
.hero-gallery [data-strip] {
  position: relative !important;
}
.hero-gallery img[data-strip-img] {
  position: relative !important;
  display: block;
  height: auto !important;
}
@media (max-width: 600px) {
  .hero-gallery {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .hero-gallery > button {
    flex: 0 0 150px !important;
    scroll-snap-align: start;
  }
}
.portfolio-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  background: #f7f6f3;
}
#work [data-reveal="clip"] > div {
  transform: none !important;
  height: auto !important;
}
#work [data-reveal="clip"] {
  aspect-ratio: auto !important;
}
#work img[data-parallax] {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center;
  transform: none !important;
}
img[data-strip-img],
[data-screen-label="Sprints grid"] img {
  object-fit: contain !important;
  transform: none !important;
}
[data-screen-label="Case study"] img,
[data-screen-label="Sprint boards"] img {
  object-fit: contain !important;
}

.hero-disciplines { display:inline-block; white-space:nowrap; line-height:1.4; }
@media (max-width:600px) { .hero-disciplines { font-size:clamp(10.5px,2.9vw,13px); letter-spacing:.05em; } }

#about .about-page-link { color:#f2efe9; align-self:flex-start; display:inline-flex; gap:32px; border:1px solid #77736c; padding:16px 26px; border-radius:99px; font-size:14px; }
#about .about-page-link:hover { color:#ff7a1a; border-color:#ff7a1a; }
#about .about-page-link:focus-visible { outline:2px solid #ff7a1a; outline-offset:5px; }

/* Keep the copyright centered independently of unequal side links. */
*:has(> .site-copyright) { display:grid !important; grid-template-columns:1fr auto 1fr; }
.site-copyright { grid-column:2; grid-row:1; text-align:center; }
.site-copyright + a { grid-column:3; grid-row:1; justify-self:end; }
[data-screen-label="Hero"] h1, #work h3,
[data-screen-label="Case study"] h2,
[data-screen-label="Case study"] button > span:last-child { letter-spacing:0 !important; font-kerning:normal; }
[data-screen-label="Case study"] img,
[data-screen-label="Sprint boards"] img { display:block; width:100%; height:auto !important; aspect-ratio:auto !important; object-fit:contain !important; }
#about:not(.about-profile) > div:nth-child(2) { grid-template-columns:repeat(4,minmax(0,1fr)) !important; row-gap:40px !important; }
@media (max-width:900px) { #about:not(.about-profile) > div:nth-child(2) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:600px) { #about:not(.about-profile) > div:nth-child(2) { grid-template-columns:1fr !important; } }
@media (max-width:600px), (hover:none), (pointer:coarse) { .portfolio-cursor { display:none !important; } }
@media (max-width:600px) {
  *:has(> .site-copyright) { grid-template-columns:1fr auto; }
  .site-copyright { grid-column:1/-1; grid-row:2; justify-self:center; }
  .site-copyright + a { grid-column:2; }
}

/* Icon links retain readable names for assistive technology and tooltips. */
a.social-icon { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; flex-shrink:0; color:inherit; border-radius:50%; transition:color .2s,background .2s; }
a.social-icon svg { display:block; width:24px; height:24px; }
a.social-icon:hover { color:#ff7a1a; background:rgba(255,122,26,.08); }
a.social-icon:focus-visible { outline:2px solid #ff7a1a; outline-offset:3px; }
.about-social { flex-direction:column; flex-wrap:nowrap; gap:16px; align-items:flex-start; }


a.social-icon .social-brand-logo { display:block; width:28px; height:28px; object-fit:contain; border-radius:5px; }

#about:not(.about-profile) > div:first-child { position:relative; justify-content:center !important; }
#about:not(.about-profile) > div:first-child > p { flex:0 1 100% !important; text-align:center; margin-inline:auto !important; }
#about:not(.about-profile) > div:first-child > span { position:absolute; left:0; top:-36px; }