/* =====================================
   FINAL SITE-WIDE OVERRIDES
   Loaded last on every public portfolio page
====================================== */

/* =====================================
   SHARED TYPE, MEDIA AND CONTROLS
====================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  line-height: 1.6;
}

:where(h1, h2, h3, h4) {
  max-width: 100%;
  margin-block-start: 0;
  overflow-wrap: break-word;
  line-height: 1.04;
  text-wrap: balance;
}

body :is(h1, h2) {
  line-height: 1.02 !important;
}

body :is(h3, h4) {
  line-height: 1.1 !important;
}

:where(p, li, dd, figcaption) {
  line-height: 1.6;
}

:where(img, video, svg) {
  max-width: 100%;
}

:where(img, video) {
  object-position: center;
}

:where(button, input, select, textarea, .button, .btn, [role="button"]) {
  min-height: 44px;
  font: inherit;
}

:where(button, .button, .btn, [role="button"]) {
  line-height: 1.2;
}

.site-nav a {
  display: flex;
  min-height: 44px;
  align-items: center;
}

.horizontal-track > *,
.horizontal-case-track > *,
.horizontal-track > * > *,
.horizontal-case-track > * > * {
  min-width: 0;
}

.horizontal-pagination button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

.hero-feature-controls {
  gap: 0 !important;
}

.hero-feature-controls button,
.hero-feature-controls button.is-active {
  position: relative;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  background: transparent !important;
}

.hero-feature-controls button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  background: transparent;
  content: "";
  transform: translate(-50%, -50%);
}

.hero-feature-controls button.is-active::before {
  border-color: #00adb5;
  background: #00adb5;
}

body:is([data-page="legal"], [data-page="error"]) .policy-content a {
  color: #006d73 !important;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

body.horizontal-case-page[data-project="kelsey"] .kelsey-workflow span {
  color: #63d5da !important;
}

body.horizontal-case-page .horizontal-case-track > .poster-hero h1 {
  line-height: 1.02 !important;
}

/* =====================================
   CONSISTENT FOOTER SURFACE
====================================== */
.site-footer,
.horizontal-page .horizontal-footer,
.horizontal-case-page .horizontal-case-track > .site-footer {
  position: relative !important;
  display: grid !important;
  width: 100vw !important;
  min-height: 100svh !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 0.85fr) !important;
  grid-template-rows: 1fr auto !important;
  gap: clamp(2rem, 6vw, 7rem) !important;
  padding: clamp(2rem, 5vh, 4rem) clamp(2.5rem, 5.5vw, 6.5rem) !important;
  overflow: hidden !important;
  background: #222831 !important;
  background-color: #222831 !important;
  color: #eeeeee !important;
}

.site-footer::after,
.horizontal-page .horizontal-footer::after,
.horizontal-case-page .horizontal-case-track > .site-footer::after {
  display: none !important;
  background: transparent !important;
  content: none !important;
}

.site-footer::before,
.horizontal-page .horizontal-footer::before,
.horizontal-case-page .horizontal-case-track > .site-footer::before {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  background: radial-gradient(
    circle 17rem at 24% 52%,
    rgb(0 173 181 / 16%),
    transparent 100%
  ) !important;
  content: "" !important;
  pointer-events: none !important;
}

.site-footer > *,
.horizontal-page .horizontal-footer > *,
.horizontal-case-page .horizontal-case-track > .site-footer > * {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

.site-footer .footer-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  max-width: 14ch !important;
  font-size: clamp(2.8rem, 5vw, 6rem) !important;
  line-height: 1.02 !important;
}

.site-footer .footer-links {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem 1.5rem !important;
}

.site-footer .footer-links .eyebrow {
  grid-column: 1 / -1 !important;
}

.site-footer .footer-designation {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
}

.site-footer .footer-meta {
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 0.75rem 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgb(238 238 238 / 18%) !important;
}

.site-footer .footer-animated-logo {
  position: absolute !important;
  z-index: 2 !important;
  top: clamp(2rem, 5vh, 4rem) !important;
  right: clamp(2.5rem, 5.5vw, 6.5rem) !important;
}

/* Case-study footer reset. Older project rules used a different sidebar
   grid, so these values intentionally mirror the main-page footer. */
.horizontal-case-page .horizontal-case-track > .site-footer .footer-links,
.horizontal-case-page .horizontal-case-track > .site-footer .footer-designation,
.horizontal-case-page .horizontal-case-track > .site-footer .footer-meta {
  width: auto !important;
  max-width: none !important;
}

.horizontal-case-page .horizontal-case-track > .site-footer .footer-designation {
  width: 100% !important;
}

.horizontal-case-page .horizontal-case-track > .site-footer .footer-animated-logo {
  position: absolute !important;
  top: clamp(2rem, 5vh, 4rem) !important;
  right: clamp(2.5rem, 5.5vw, 6.5rem) !important;
  bottom: auto !important;
  left: auto !important;
  width: 5rem !important;
  height: 5rem !important;
}

/* Shared-image pairs keep the artwork visually fixed while the contextual
   glass panel and its supporting tint leave or return. */
.horizontal-case-viewport.is-pair-transition {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

.horizontal-case-track > .case-image-pair-panel > img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.horizontal-case-track > :is(
  .roadtrip-wayfinding-feature,
  .aad-image-story,
  .horizon-image-story,
  .kelsey-image-story,
  .museum-image-story
)::after {
  opacity: 1;
  transition: opacity 420ms ease !important;
}

.horizontal-case-track > :is(
  .roadtrip-wayfinding-feature,
  .aad-image-story,
  .horizon-image-story,
  .kelsey-image-story,
  .museum-image-story
).is-text-hidden::after {
  opacity: 0 !important;
}

.horizontal-page .horizontal-footer,
.horizontal-case-page .horizontal-case-track > .site-footer {
  height: 100% !important;
  min-height: 100% !important;
  flex: 0 0 100vw !important;
}

/* =====================================
   ABOUT BACKGROUND AND APPROACH
   Keep the complete story visible without an internal scrollbar
====================================== */
@media (min-width: 851px) {
  body[data-page="about"].horizontal-page .story {
    width: 100vw !important;
    flex: 0 0 100vw !important;
    grid-template-columns: minmax(22rem, 0.8fr) minmax(36rem, 1.2fr) !important;
    gap: clamp(2rem, 4vw, 5rem) !important;
    padding: clamp(2rem, 4vh, 3.25rem) clamp(2.5rem, 5.5vw, 6.5rem) !important;
  }

  body[data-page="about"].horizontal-page .story-sticky {
    max-width: 34rem !important;
  }

  body[data-page="about"].horizontal-page .story-copy {
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(1.5rem, 2.5vw, 2.5rem) !important;
    columns: 1 !important;
    overflow: visible !important;
  }

  body[data-page="about"].horizontal-page .story-copy p:last-child {
    margin-bottom: 0 !important;
  }

  body[data-page="about"].horizontal-page .listening-section {
    display: grid !important;
    width: 100vw !important;
    flex: 0 0 100vw !important;
    grid-template-columns: minmax(18rem, 0.6fr) minmax(0, 0.7fr) minmax(0, 0.7fr) !important;
    gap: clamp(1.5rem, 3vw, 3.5rem) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: clamp(2rem, 4vh, 3.25rem) clamp(2.5rem, 5.5vw, 6.5rem) !important;
    overflow: hidden !important;
  }

  body[data-page="about"].horizontal-page .listening-intro {
    display: block !important;
    align-self: stretch !important;
    margin: 0 !important;
  }

  body[data-page="about"].horizontal-page .listening-intro > * {
    grid-column: auto !important;
  }

  body[data-page="about"].horizontal-page .listening-group {
    min-width: 0 !important;
  }

  body[data-page="about"].horizontal-page .listening-group > h3 {
    margin: 0 0 0.8rem !important;
    color: #eeeeee !important;
    font: 600 clamp(1.15rem, 1.5vw, 1.5rem) / 1.2 Manrope, sans-serif !important;
  }

  body[data-page="about"].horizontal-page .listening-group .media-shelf {
    grid-auto-columns: minmax(13rem, 1fr) !important;
    margin: 0 !important;
    padding: 0 0 1rem !important;
  }

  body[data-page="about"].horizontal-page .qa-section {
    width: 100vw !important;
    flex: 0 0 100vw !important;
    margin: 0 !important;
    padding: clamp(2rem, 4vh, 3.25rem) clamp(2.5rem, 5.5vw, 6.5rem) !important;
    overflow: visible !important;
  }

  body[data-page="about"].horizontal-page .qa-list {
    align-self: center !important;
    overflow: visible !important;
  }
}

body[data-page="about"] .qa-answer {
  overflow: hidden;
  will-change: height, opacity, transform;
}

/* =====================================
   CONTACT FORM HEIGHT SAFEGUARD
====================================== */
@media (min-width: 851px) and (max-height: 760px) {
  body[data-page="contact"].horizontal-page .horizontal-panel--contact-form {
    padding-block: 1.25rem !important;
  }

  body[data-page="contact"].horizontal-page .horizontal-panel--contact-form form {
    height: min(100%, 31rem) !important;
    padding: 1.5rem !important;
  }

  body[data-page="contact"].horizontal-page .horizontal-panel--contact-form form #message {
    min-height: 6rem !important;
  }
}

/* =====================================
   TABLET LAYOUT SAFEGUARDS
====================================== */
@media (min-width: 851px) and (max-width: 1100px) {
  .horizontal-page,
  .horizontal-case-page {
    --panel-gutter: 2rem;
    --case-gutter: 2rem;
  }

  .horizontal-case-track > .case-panel--split-layout,
  .horizontal-case-track > .case-panel--media-left {
    grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 2rem !important;
    padding-inline: 2rem !important;
  }

  .horizontal-case-track > .case-panel h1 {
    font-size: clamp(3rem, 7vw, 5.2rem) !important;
  }

  .horizontal-case-track > .case-panel h2 {
    font-size: clamp(2.2rem, 4.8vw, 3.6rem) !important;
  }

  .site-footer .footer-title {
    font-size: clamp(2.6rem, 5vw, 4.6rem) !important;
  }
}

@media (max-width: 850px) {
  .site-footer,
  .horizontal-page .horizontal-footer,
  .horizontal-case-page .horizontal-case-track > .site-footer {
    display: flex !important;
    width: 100% !important;
    min-height: 100svh !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    padding: 5rem 1.25rem 1.5rem !important;
    background: #222831 !important;
  }

  .horizontal-page .horizontal-footer,
  .horizontal-case-page .horizontal-case-track > .site-footer {
    min-height: 100% !important;
  }

  .horizontal-case-page .horizontal-case-track > .site-footer {
    padding: 5rem 1.25rem 1.5rem !important;
  }

  .site-footer .footer-title {
    align-self: stretch !important;
    font-size: clamp(2.3rem, 11vw, 3.6rem) !important;
  }

  .site-footer .footer-links {
    align-self: stretch !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .site-footer .footer-designation {
    align-self: stretch !important;
  }

  .site-footer .footer-meta {
    flex-direction: column !important;
  }

  .site-footer .footer-animated-logo {
    top: 1.25rem !important;
    right: 1.25rem !important;
  }

  body[data-page="about"].horizontal-page .mobile-story-panel .story-copy {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .site-footer::before,
  .horizontal-page .horizontal-footer::before,
  .horizontal-case-page .horizontal-case-track > .site-footer::before {
    background: radial-gradient(
      circle 10rem at 42% 28%,
      rgb(0 173 181 / 14%),
      transparent 100%
    ) !important;
  }

  .horizontal-page .horizontal-panel,
  .horizontal-case-page .horizontal-case-track > .case-panel:not(.site-footer) {
    padding-bottom: max(4.75rem, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }

  .horizontal-page :where(h1, h2),
  .horizontal-case-page :where(h1, h2) {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .horizontal-page h1,
  .horizontal-case-page h1 {
    font-size: clamp(2.4rem, 11vw, 4rem) !important;
    line-height: 1 !important;
  }

  .horizontal-page h2,
  .horizontal-case-page h2 {
    font-size: clamp(2rem, 9vw, 3.3rem) !important;
    line-height: 1.03 !important;
  }

  .horizontal-page :where(p, li, label, summary),
  .horizontal-case-page :where(p, li, label, summary) {
    font-size: clamp(0.94rem, 3.8vw, 1.05rem);
    line-height: 1.58;
  }

  .horizontal-case-track > .case-panel--split-layout :is(
      figure,
      picture,
      [class*="art"],
      [class*="image"],
      [class*="mockup"],
      [class*="visual"]
    ) {
    max-width: 100% !important;
  }

  .horizontal-case-track > .case-panel:not(.case-panel--full-media) :where(img, video) {
    max-width: 100% !important;
    object-fit: contain;
    object-position: center;
  }

  .horizontal-pagination {
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }
}

/* =====================================
   REDUCED MOTION
====================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================
   MOBILE RESPONSIVE SYSTEM
   Shared phone layout without changing desktop composition
====================================== */
@media (max-width: 850px) {
  :root {
    --mobile-safe-bottom: 3.75rem;
  }

  /* Plain hamburger control with a clear 44 px touch target. */
  .menu-toggle,
  .menu-toggle:hover,
  .menu-toggle:focus-visible,
  .menu-toggle[aria-expanded="true"] {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Keep page numbers, remove the three floating arrow controls. */
  .horizontal-pagination {
    right: 50% !important;
    bottom: max(0.8rem, env(safe-area-inset-bottom)) !important;
    display: block !important;
    width: max-content !important;
    padding: 0 !important;
    transform: translateX(50%) !important;
    pointer-events: none;
  }

  .horizontal-pagination button {
    display: none !important;
  }

  .horizontal-pagination__status {
    display: block !important;
    min-width: 5.5rem;
    padding: 0.25rem !important;
    color: #eeeeee !important;
    text-shadow: 0 1px 4px rgb(0 0 0 / 72%);
  }

  .horizontal-page .horizontal-panel:not(.horizontal-footer),
  .horizontal-case-page .horizontal-case-track > .case-panel:not(.site-footer, .case-panel--full-media) {
    padding-bottom: var(--mobile-safe-bottom) !important;
  }

  /* Home hero: introduction above, featured work below, one screen. */
  .horizontal-page .mobile-hero-panel--combined {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(0.45rem, 1.4vh, 0.8rem) !important;
    padding: 1rem 1rem var(--mobile-safe-bottom) !important;
    overflow: hidden !important;
  }

  .horizontal-page .mobile-hero-panel--combined > .eyebrow {
    margin: 0 !important;
    font-size: 0.62rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined > h1 {
    max-width: 18ch !important;
    margin: 0 !important;
    font-size: clamp(1.72rem, 7.4vw, 2.65rem) !important;
    line-height: 0.98 !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-support {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    margin: 0 !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-support > p {
    display: none !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-actions {
    display: flex !important;
    gap: 1rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-actions a {
    min-height: 36px !important;
    padding-block: 0.35rem !important;
    font-size: 0.76rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-bottom {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
  }

  .horizontal-page .mobile-hero-panel--combined::before,
  .horizontal-page .mobile-hero-panel--combined::after {
    display: none !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-feature {
    min-height: 0 !important;
    border-radius: 0.8rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-feature-caption {
    right: 0.75rem !important;
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    padding: 0.7rem 3.5rem 0.7rem 0.8rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-feature-caption small {
    margin-bottom: 0.2rem !important;
    font-size: 0.58rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-feature-caption strong {
    font-size: 1rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-feature-caption em {
    font-size: 0.7rem !important;
  }

  .horizontal-page .mobile-hero-panel--combined .hero-feature-controls {
    right: 1rem !important;
    bottom: 1rem !important;
  }

  /* Home project thumbnails share one predictable crop system. */
  .horizontal-page .horizontal-panel--project .project-art {
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #222831 !important;
  }

  .horizontal-page .horizontal-panel--project .project-art > img:not(.roadtrip-home-logo) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .horizontal-page .horizontal-panel--project.project-kelsey .project-art > .kelsey-home-preview {
    object-fit: cover !important;
    object-position: center 46% !important;
  }

  .horizontal-page .horizontal-panel--project.project-horizon .project-art > .horizon-home-image {
    object-position: 44% center !important;
  }

  .horizontal-page .horizontal-panel--project.project-kcff .project-art > .kcff-home-image {
    object-position: center 52% !important;
  }

  .horizontal-page .horizontal-panel--project .roadtrip-home-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: min(62%, 18rem) !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* About introduction, portrait, practice areas and Q&A each fit one screen. */
  .horizontal-page .mobile-about-panel--combined {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.72fr) !important;
    grid-template-rows: auto 1fr !important;
    gap: 0.75rem 1rem !important;
    align-items: center !important;
    padding: 1rem 1rem var(--mobile-safe-bottom) !important;
  }

  .horizontal-page .mobile-about-panel--combined > .eyebrow {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  .horizontal-page .mobile-about-panel--combined > h1 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 12ch !important;
    margin: 0 !important;
    font-size: clamp(1.8rem, 7.5vw, 2.8rem) !important;
    line-height: 1 !important;
  }

  .horizontal-page .mobile-about-panel--combined .portrait-stage {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 14rem !important;
    height: auto !important;
    margin: 0 !important;
    transform: rotate(2deg) !important;
  }

  .horizontal-page .mobile-about-panel--combined .portrait-stage img {
    width: 100% !important;
    height: min(48vh, 22rem) !important;
    object-fit: cover !important;
  }

  .horizontal-page .horizontal-panel--mobile-capabilities {
    gap: 0.75rem !important;
    padding: 1rem 1rem var(--mobile-safe-bottom) !important;
  }

  .horizontal-page .mobile-capability-panel .cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: center !important;
  }

  .horizontal-page .mobile-capability-panel .cap-grid h2 {
    padding: clamp(0.4rem, 1.2vh, 0.7rem) 0 !important;
    font-size: clamp(1.55rem, 7.4vw, 2.45rem) !important;
    overflow-wrap: normal !important;
  }

  .horizontal-page .mobile-capability-panel .cap-grid h2:nth-child(odd) {
    padding-right: 0.75rem !important;
    border-right: 1px solid rgb(238 238 238 / 24%) !important;
  }

  .horizontal-page .mobile-capability-panel .cap-grid h2:nth-child(even) {
    padding-left: 0.75rem !important;
  }

  .horizontal-page .horizontal-panel--mobile-qa {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0.7rem !important;
    padding: 1rem 1rem var(--mobile-safe-bottom) !important;
    overflow: hidden !important;
  }

  .horizontal-page .mobile-qa-panel .qa-heading h2 {
    max-width: none !important;
    margin: 0.25rem 0 0 !important;
    font-size: clamp(1.8rem, 8vw, 2.7rem) !important;
  }

  .horizontal-page .mobile-qa-panel .qa-list {
    align-content: start !important;
    gap: 0.4rem !important;
  }

  .horizontal-page .mobile-qa-panel .qa-item {
    padding: 0 0.75rem !important;
    border-radius: 0.65rem !important;
  }

  .horizontal-page .mobile-qa-panel .qa-item summary {
    min-height: 44px !important;
    padding: 0.5rem 0 !important;
    font-size: clamp(0.78rem, 3.5vw, 0.95rem) !important;
  }

  .horizontal-page .mobile-qa-panel .qa-answer p {
    margin: 0 0 0.65rem !important;
    font-size: clamp(0.75rem, 3.2vw, 0.9rem) !important;
    line-height: 1.45 !important;
  }

  /* One mobile footer structure on every horizontal page. */
  .site-footer,
  .horizontal-page .horizontal-footer,
  .horizontal-case-page .horizontal-case-track > .site-footer {
    display: grid !important;
    width: 100vw !important;
    height: 100% !important;
    min-height: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto 1fr !important;
    align-content: center !important;
    gap: 0.65rem 1rem !important;
    padding: 4rem 1rem var(--mobile-safe-bottom) !important;
    overflow: hidden !important;
  }

  .site-footer .footer-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    max-width: 13ch !important;
    font-size: clamp(1.75rem, 8.5vw, 2.7rem) !important;
  }

  .site-footer .footer-links {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.25rem 0.8rem !important;
    font-size: clamp(0.72rem, 3vw, 0.88rem) !important;
  }

  .site-footer .footer-links a {
    min-height: 32px !important;
  }

  .site-footer .footer-designation {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    width: min(7rem, 24vw) !important;
  }

  .site-footer .rgd-badge {
    width: 100% !important;
    padding: 0 !important;
  }

  .site-footer .footer-meta {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.3rem 0.75rem !important;
    padding-top: 0.65rem !important;
    font-size: 0.6rem !important;
    line-height: 1.35 !important;
  }

  .site-footer .footer-animated-logo,
  .horizontal-case-page .horizontal-case-track > .site-footer .footer-animated-logo {
    top: 0.8rem !important;
    right: 1rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  /* Case studies use contained artwork and readable copy below it. */
  .horizontal-case-page .horizontal-case-track > .case-hero.case-panel {
    display: grid !important;
    grid-template-rows: minmax(0, 48%) minmax(0, 52%) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 0 var(--mobile-safe-bottom) !important;
    overflow: hidden !important;
    background: #222831 !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-hero.case-panel > * {
    grid-column: 1 !important;
  }

  .horizontal-case-page .case-hero__media {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    background: #222831 !important;
  }

  .horizontal-case-page .horizontal-case-track .case-hero__media :is(img, video) {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .horizontal-case-page .horizontal-case-track .case-hero__glass {
    position: relative !important;
    inset: auto !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    gap: 0.35rem !important;
    padding: 0.85rem 1rem !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #393e46 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .horizontal-case-page .case-hero__glass > h1 {
    margin: 0.2rem 0 !important;
    font-size: clamp(1.55rem, 7.5vw, 2.35rem) !important;
  }

  .horizontal-case-page .case-hero__glass .case-meta {
    gap: 0.35rem 0.75rem !important;
    margin-top: 0.2rem !important;
    padding-top: 0.45rem !important;
  }

  .horizontal-case-page .case-hero__glass .case-meta p {
    font-size: 0.68rem !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-panel--full-media,
  .horizontal-case-page .horizontal-case-track > :is(.aad-image-full, .horizon-image-full, .kelsey-image-full, .museum-image-full) {
    display: grid !important;
    place-items: center !important;
    padding: 0 0 var(--mobile-safe-bottom) !important;
    background: #222831 !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-panel--full-media :is(img, video),
  .horizontal-case-page .horizontal-case-track > :is(.aad-image-full, .horizon-image-full, .kelsey-image-full, .museum-image-full) > img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: calc(100% - var(--mobile-safe-bottom)) !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-panel--split-layout:not(.poster-entry),
  .horizontal-case-page .horizontal-case-track > .case-panel--split-layout.case-panel--media-left:not(.poster-entry) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.8rem !important;
    padding: 1rem 1rem var(--mobile-safe-bottom) !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-panel--narrative {
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-panel--split-layout:not(.poster-entry) :is(
    figure,
    picture,
    [class*="art"],
    [class*="image"],
    [class*="mockup"],
    [class*="visual"]
  ) {
    order: 0 !important;
    width: 100% !important;
    height: min(42vh, 22rem) !important;
    flex: 0 0 auto !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-panel--split-layout:not(.poster-entry) :is(h1, h2, h3, p, ul, ol, [class*="copy"], [class*="text"]) {
    order: 1 !important;
  }

  .horizontal-case-page .horizontal-case-track > .case-panel--split-layout:not(.poster-entry) :is(img, video) {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .horizontal-case-page .horizontal-case-track > :is(.aad-image-story, .horizon-image-story, .kelsey-image-story, .museum-image-story, .roadtrip-wayfinding-feature).case-panel {
    display: grid !important;
    grid-template-rows: minmax(0, 55%) minmax(0, 45%) !important;
    padding: 0 0 var(--mobile-safe-bottom) !important;
    background: #222831 !important;
  }

  .horizontal-case-page .horizontal-case-track > :is(.aad-image-story, .horizon-image-story, .kelsey-image-story, .museum-image-story, .roadtrip-wayfinding-feature) > img {
    position: relative !important;
    inset: auto !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .horizontal-case-page .horizontal-case-track > :is(.aad-image-story, .horizon-image-story, .kelsey-image-story, .museum-image-story, .roadtrip-wayfinding-feature)::after {
    display: none !important;
  }

  .horizontal-case-page .horizontal-case-track > :is(.aad-image-story, .horizon-image-story, .kelsey-image-story, .museum-image-story, .roadtrip-wayfinding-feature) > :is(.aad-image-story__glass, .horizon-image-story__glass, .kelsey-image-story__glass, .museum-image-story__glass, .roadtrip-wayfinding-feature__glass) {
    position: relative !important;
    inset: auto !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0.85rem 1rem !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #393e46 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  /* Force text presentation for arrows on Apple and Android devices. */
  :is(.text-link, .view-project, .back-link, .next-project, .footer-links, button) span,
  :is(.text-link, .view-project, .back-link, .next-project, .footer-links, button) {
    font-variant-emoji: text;
  }

  /* Project refresh files carry stronger desktop selectors. These phone-only
     rules keep paired artwork contained and place its copy underneath. */
  body.horizontal-case-page[data-project] .horizontal-case-track > :is(
    .aad-image-story,
    .horizon-image-story,
    .kelsey-image-story,
    .museum-image-story,
    .roadtrip-wayfinding-feature
  ).case-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 55%) minmax(0, 45%) !important;
    padding: 0 0 var(--mobile-safe-bottom) !important;
  }

  body.horizontal-case-page[data-project] .horizontal-case-track > :is(
    .aad-image-story,
    .horizon-image-story,
    .kelsey-image-story,
    .museum-image-story,
    .roadtrip-wayfinding-feature
  ) > img {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  body.horizontal-case-page[data-project] .horizontal-case-track > :is(
    .aad-image-story,
    .horizon-image-story,
    .kelsey-image-story,
    .museum-image-story,
    .roadtrip-wayfinding-feature
  ) > :is(
    .aad-image-story__glass,
    .horizon-image-story__glass,
    .kelsey-image-story__glass,
    .museum-image-story__glass,
    .roadtrip-wayfinding-feature__glass
  ) {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0.85rem 1rem !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #393e46 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  body.horizontal-case-page[data-project] .horizontal-case-track > :is(
    .aad-image-full,
    .horizon-image-full,
    .kelsey-image-full,
    .museum-image-full,
    .roadtrip-wayfinding-full
  ).case-panel {
    display: grid !important;
    place-items: center !important;
    padding: 0 0 var(--mobile-safe-bottom) !important;
  }

  body.horizontal-case-page[data-project] .horizontal-case-track > :is(
    .aad-image-full,
    .horizon-image-full,
    .kelsey-image-full,
    .museum-image-full,
    .roadtrip-wayfinding-full
  ) > img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: calc(100% - var(--mobile-safe-bottom)) !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  body.horizontal-case-page .horizontal-case-track > .site-footer .footer-links {
    width: auto !important;
    max-width: none !important;
  }

  body.horizontal-case-page .horizontal-case-track > .site-footer .footer-designation {
    width: min(6.5rem, 24vw) !important;
    max-width: min(6.5rem, 24vw) !important;
  }

  body.horizontal-case-page .horizontal-case-track > .site-footer .footer-meta {
    width: auto !important;
    max-width: none !important;
  }

  body.horizontal-case-page .horizontal-case-track > .site-footer .footer-animated-logo {
    position: absolute !important;
    top: 0.8rem !important;
    right: 1rem !important;
    bottom: auto !important;
    left: auto !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  /* Poster descriptions remain on the same screen without an inner scrollbar. */
  body.horizontal-case-page .horizontal-case-track > .poster-entry.case-panel,
  body.horizontal-case-page .horizontal-case-track > .poster-entry:nth-child(even).case-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 31%) minmax(0, 69%) !important;
    gap: 0.45rem !important;
    padding: 0.75rem 1rem var(--mobile-safe-bottom) !important;
  }

  body.horizontal-case-page .horizontal-case-track > .poster-entry .poster-frame {
    height: 100% !important;
    padding-bottom: 2.7rem !important;
  }

  body.horizontal-case-page .horizontal-case-track > .poster-entry .poster-copy {
    height: 100% !important;
    max-height: none !important;
    padding: 0.7rem 0.8rem !important;
    overflow: hidden !important;
  }

  body.horizontal-case-page .horizontal-case-track > .poster-entry .poster-copy h2 {
    margin: 0.25rem 0 0.4rem !important;
    font-size: clamp(1.2rem, 5.5vw, 1.7rem) !important;
    line-height: 1 !important;
  }

  body.horizontal-case-page .horizontal-case-track > .poster-entry .poster-copy p {
    margin: 0.35rem 0 !important;
    font-size: clamp(0.66rem, 2.65vw, 0.76rem) !important;
    line-height: 1.4 !important;
  }

  body.horizontal-case-page .horizontal-case-track > .poster-entry .poster-copy .eyebrow {
    font-size: 0.56rem !important;
  }

  body.horizontal-case-page .horizontal-case-track > .poster-entry .poster-copy .status {
    margin-bottom: 0.25rem !important;
    padding: 0.25rem 0.45rem !important;
    font-size: 0.55rem !important;
  }
}