/* Mobile layout pass: let content determine height and preserve readable hierarchy. */
@media (max-width: 767px) {
  :root {
    --side: 18px;
  }

  html, body {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* Mobile content must never depend on an observer firing to become readable. */
  html.reveal-ready:not(.no-motion) [data-reveal],
  html.reveal-ready:not(.no-motion) [data-reveal].is-visible,
  html.reveal-ready:not(.no-motion) .scroll-rhythm,
  html.reveal-ready:not(.no-motion) .scroll-rhythm.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .container,
  .page-shell,
  .section,
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section {
    padding: 58px var(--side) !important;
  }

  .section > .container,
  .page-hero > .container,
  .site-footer > .footer-grid {
    width: 100% !important;
    max-width: none !important;
  }

  .site-header {
    padding-inline: var(--side) !important;
  }

  .brand-text {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    opacity: 1 !important;
  }

  /* Home hero: keep the supplied two-line title intact. */
  body[data-page="home"] .home-hero {
    min-height: max(650px, 100svh) !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-hero .hero-inner {
    min-height: max(650px, 100svh) !important;
    height: auto !important;
    padding: 112px var(--side) 64px !important;
    align-items: center !important;
  }

  body[data-page="home"] .home-hero .hero-copy {
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page="home"] .home-hero .hero-copy h1 {
    width: 100% !important;
    max-width: none !important;
    margin: 16px 0 22px !important;
    font-size: clamp(27px, 7.4vw, 31px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
  }

  body[data-page="home"] .home-hero .hero-copy h1 span {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] .hero-lead {
    max-width: 31em !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
  }

  body[data-page="home"] .hero-tags {
    gap: 10px 14px !important;
    margin-top: 22px !important;
  }

  body[data-page="home"] .hero-symbol {
    display: none !important;
  }

  /* Brand engine: no fixed-height clipping on the generated board or cards. */
  body[data-page="home"] .formula-section,
  body[data-page="home"] .formula-grid,
  body[data-page="home"] .formula-window,
  body[data-page="home"] .engine-reference-board {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="home"] .formula-window {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  body[data-page="home"] .formula-section {
    padding-top: 54px !important;
    padding-bottom: 58px !important;
  }

  body[data-page="home"] .engine-reference-board {
    padding: 24px 16px !important;
    border-radius: 18px !important;
  }

  body[data-page="home"] .engine-reference-head {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 24px !important;
  }

  body[data-page="home"] .engine-reference-head h3 {
    max-width: 100% !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body[data-page="home"] .engine-reference-head strong {
    display: block !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    font-size: 23px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page="home"] .engine-reference-head p,
  body[data-page="home"] .engine-reference-head small {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  body[data-page="home"] .engine-reference-flow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-page="home"] .engine-reference-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 15px !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .engine-card-visual {
    height: 152px !important;
    min-height: 152px !important;
  }

  /* Home services: media, explanation and index are three readable blocks. */
  body[data-page="home"] .service-showcase {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  body[data-page="home"] .service-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .service-stage-copy {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin: 0 14px 14px !important;
    padding: 16px !important;
    border-radius: 14px !important;
  }

  body[data-page="home"] .service-stage-copy h3 {
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  body[data-page="home"] .service-stage-copy p,
  body[data-page="home"] .service-stage-copy small {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  body[data-page="home"] .service-index {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  body[data-page="home"] .service-index button {
    min-height: 72px !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px 16px !important;
    white-space: normal !important;
    text-align: left !important;
  }

  body[data-page="home"] .service-index button > strong {
    font-size: 16px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  body[data-page="home"] .service-index button > span,
  body[data-page="home"] .service-index button > em {
    font-size: 11px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  /* The home work header and its first case must have independent vertical space. */
  body[data-page="home"] .work-preview {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-page="home"] .work-preview .section-head {
    margin-bottom: 28px !important;
  }

  body[data-page="home"] .featured-grid {
    grid-auto-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-page="home"] .featured-case,
  body[data-page="home"] .featured-case.large {
    min-height: 360px !important;
    height: 360px !important;
    transform: none !important;
  }

  body[data-page="home"] .featured-case .featured-image,
  body[data-page="home"] .featured-case .featured-image img,
  body[data-page="home"] .featured-case .featured-image video {
    height: 100% !important;
    min-height: 0 !important;
  }

  body[data-page="home"] .featured-case .featured-copy {
    position: absolute !important;
    inset: auto 16px 16px !important;
    z-index: 3 !important;
  }

  body[data-page="home"] .featured-case h3 {
    position: static !important;
    margin: 8px 0 0 !important;
    font-size: 22px !important;
  }

  body[data-page="home"] .featured-case .case-meta {
    position: static !important;
    margin: 0 !important;
  }

  body[data-page="home"] .featured-case p {
    position: static !important;
    display: block !important;
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  /* All inner-page heroes and section headings. */
  .page-hero,
  .page-hero.compact,
  .about-hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 92px var(--side) 46px !important;
    overflow: visible !important;
  }

  .page-hero h1,
  .about-hero h1,
  .service-hero h1 {
    max-width: 100% !important;
    font-size: clamp(29px, 8.5vw, 37px) !important;
    line-height: 1.22 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .page-hero p:not(.section-label),
  .about-hero p:not(.section-label),
  .service-hero p:not(.section-label) {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .about-hero-grid,
  .service-layout,
  .service-specs,
  .service-platforms,
  .service-goal-list,
  .process-grid,
  .contact-grid,
  .footer-grid {
    gap: 28px !important;
  }

  .about-hero-grid img,
  .about-hero-grid video {
    width: 100% !important;
    max-height: 54svh !important;
    object-fit: cover !important;
  }

  /* Services: separate information levels and prevent panel text clipping. */
  body[data-page="services"] .service-system,
  body[data-page="services"] .service-goal-section,
  body[data-page="services"] .service-next-step {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  body[data-page="services"] .service-system-head h2,
  body[data-page="services"] .service-goal-section .service-system-head h2,
  body[data-page="services"] .service-next-step h2 {
    max-width: 100% !important;
    margin-top: 12px !important;
    font-size: 25px !important;
    line-height: 1.28 !important;
  }

  body[data-page="services"] .service-system-head > p,
  body[data-page="services"] .service-group-heading p,
  body[data-page="services"] .service-goal-section .service-system-head > p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
  }

  body[data-page="services"] .service-group-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body[data-page="services"] .service-group-tabs button,
  body[data-page="services"] .service-goal-list > * {
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
  }

  body[data-page="services"] .service-group-panel,
  body[data-page="services"] .service-goal-list,
  body[data-page="services"] .service-next-step {
    overflow: visible !important;
  }

  body[data-page="services"] .service-group-panel * {
    max-width: 100% !important;
  }

  /* Cases and detail: stable media sizing, generous copy spacing. */
  .case-collection,
  .archive-section,
  .detail-section,
  .process-section,
  .contact-section {
    overflow: visible !important;
  }

  .case-grid,
  .featured-grid,
  .detail-intro,
  .detail-story,
  .type-row,
  .type-thumbs {
    gap: 24px !important;
  }

  .case-grid .work-card,
  .featured-case,
  .work-card,
  .process-card {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .case-grid img,
  .featured-case img,
  .work-card img,
  .case-grid video,
  .featured-case video,
  .work-card video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  body[data-page="case-all"] .case-carousel-viewport {
    overflow: hidden !important;
  }

  body[data-page="case-all"] .case-slide-media {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="case-all"] .case-slide-poster,
  body[data-page="case-all"] .case-slide-video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .featured-case h3,
  .work-card h3,
  .detail-intro h1,
  .detail-story h2 {
    font-size: clamp(21px, 6.2vw, 29px) !important;
    line-height: 1.3 !important;
    margin-top: 14px !important;
  }

  .featured-case p,
  .work-card p,
  .detail-story p,
  .process-card p {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  .detail-nav {
    gap: 12px !important;
    margin-top: 28px !important;
  }

  .detail-nav a,
  .detail-nav button {
    min-height: 44px !important;
    padding: 12px 14px !important;
  }

  /* Mission statement: visible, centered, and limited to a calm three-line rhythm. */
  .belief-section {
    min-height: 0 !important;
    height: auto !important;
    padding: 72px var(--side) !important;
    overflow: visible !important;
  }

  .belief-card {
    width: 100% !important;
    padding: 0 !important;
  }

  .belief-card h2,
  body[data-page="home"] .belief-card h2 {
    max-width: 100% !important;
    margin: 16px auto !important;
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.58 !important;
    font-weight: 450 !important;
    white-space: normal !important;
  }

  .belief-card h2 span,
  body[data-page="home"] .belief-card h2 span {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
  }

  .site-footer {
    padding: 52px var(--side) 24px !important;
  }

  .site-footer p,
  .site-footer li,
  .site-footer label {
    font-size: 13px !important;
    line-height: 1.85 !important;
  }
}

@media (max-width: 370px) {
  body[data-page="home"] .home-hero .hero-copy h1 {
    font-size: 26px !important;
  }

  .page-hero h1,
  .about-hero h1,
  .service-hero h1 {
    font-size: 28px !important;
  }
}

/* Keep the service film as the visual focus; the glass panel is supporting copy only. */
body[data-page="home"] .service-stage-copy {
  width: min(38%, 360px) !important;
  max-width: 360px !important;
  margin: 0 0 clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px) !important;
  padding: clamp(15px, 1.35vw, 20px) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(82, 82, 82, .42), rgba(38, 38, 38, .3)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(108%) !important;
  backdrop-filter: blur(12px) saturate(108%) !important;
}

/* The homepage work section has one clear destination: the selected case index. */
body[data-page="home"] .work-preview-entry {
  display: inline-flex !important;
  align-items: center;
  min-height: 42px;
  padding: 0 2px 5px !important;
  color: #111 !important;
  font-size: clamp(.8rem, .9vw, .95rem) !important;
  font-weight: 560 !important;
  white-space: nowrap;
  border-bottom: 1px solid rgba(17, 17, 17, .48) !important;
  transition: color .25s ease, border-color .25s ease, transform .25s ease !important;
}

body[data-page="home"] .work-preview-entry::after {
  content: "↗";
  margin-left: 9px;
  font-size: 1rem;
  line-height: 1;
}

body[data-page="home"] .work-preview-entry:hover,
body[data-page="home"] .work-preview-entry:focus-visible {
  color: rgba(17, 17, 17, .62) !important;
  border-color: rgba(17, 17, 17, .22) !important;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  body[data-page="home"] .work-preview-entry {
    min-height: 38px;
    font-size: .78rem !important;
  }
}

body[data-page="home"] .service-stage-copy h3 {
  margin: 7px 0 7px !important;
  font-size: clamp(1.5rem, 2.1vw, 2.25rem) !important;
  line-height: 1.08 !important;
}

body[data-page="home"] .service-stage-copy p {
  font-size: clamp(.78rem, .82vw, .9rem) !important;
  line-height: 1.55 !important;
}

body[data-page="home"] .service-stage-copy > small:first-of-type {
  display: none !important;
}

body[data-page="home"] .service-stage-copy > small:last-child {
  margin-top: 10px !important;
  font-size: .72rem !important;
}

/* Homepage work preview: an editorial photo wall with one clear destination. */
body[data-page="home"] .featured-grid.featured-wall {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, clamp(190px, 18vw, 285px)) !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

body[data-page="home"] .featured-wall .featured-case {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #ececea !important;
  pointer-events: none !important;
  transform: none !important;
}

body[data-page="home"] .featured-wall .wall-card-1 { grid-column: span 5 !important; grid-row: span 2 !important; }
body[data-page="home"] .featured-wall .wall-card-2 { grid-column: span 3 !important; }
body[data-page="home"] .featured-wall .wall-card-3 { grid-column: span 4 !important; }
body[data-page="home"] .featured-wall .wall-card-4 { grid-column: span 4 !important; }
body[data-page="home"] .featured-wall .wall-card-5 { grid-column: span 3 !important; }
body[data-page="home"] .featured-wall .wall-card-6 { display: none !important; }
body[data-page="home"] .featured-wall .wall-card-7,
body[data-page="home"] .featured-wall .wall-card-8,
body[data-page="home"] .featured-wall .wall-card-9 { display: none !important; }

body[data-page="home"] .featured-wall .featured-image,
body[data-page="home"] .featured-wall .featured-image > img,
body[data-page="home"] .featured-wall .featured-image > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

body[data-page="home"] .featured-wall .featured-image > video { opacity: 0; transition: opacity .35s ease !important; }
body[data-page="home"] .featured-wall .featured-image.is-video-active > video { opacity: 1; }
body[data-page="home"] .featured-wall .featured-image {
  filter: blur(2px) saturate(.92) brightness(.94) !important;
  transform: scale(1.025) !important;
  opacity: .92 !important;
}
body[data-page="home"] .featured-wall .featured-copy {
  display: none !important;
}
body[data-page="home"] .featured-wall::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,.06);
  border-radius: 16px;
}
body[data-page="home"] .featured-wall .featured-wall-entry {
  position: absolute !important;
  z-index: 8 !important;
  left: 50% !important;
  top: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 192px !important;
  min-height: 60px !important;
  padding: 0 28px !important;
  color: #111 !important;
  background: rgba(255,255,255,.96) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.16), 0 16px 40px rgba(0,0,0,.26) !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
  backdrop-filter: blur(16px) saturate(115%) !important;
  transform: translate(-50%, -50%) !important;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
body[data-page="home"] .featured-wall .featured-wall-entry span { font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.5 !important; white-space: nowrap !important; }
body[data-page="home"] .featured-wall .featured-wall-entry:hover,
body[data-page="home"] .featured-wall .featured-wall-entry:focus-visible { background: #fff !important; box-shadow: 0 6px 10px rgba(0,0,0,.18), 0 20px 44px rgba(0,0,0,.3) !important; transform: translate(-50%, -50%) scale(1.03) !important; }

/* Shared centered action treatment: the label carries the action, not a rule or arrow. */
body[data-page="home"] .services-preview .section-head > .text-link,
body[data-page="services"] .service-next-step .text-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 146px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.92) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.14) !important;
  transform: none !important;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
body[data-page="home"] .services-preview .text-link::before,
body[data-page="home"] .services-preview .text-link::after,
body[data-page="services"] .service-next-step .text-link::before,
body[data-page="services"] .service-next-step .text-link::after { display: none !important; content: none !important; }
body[data-page="home"] .services-preview .section-head > .text-link:hover,
body[data-page="home"] .services-preview .section-head > .text-link:focus-visible,
body[data-page="services"] .service-next-step .text-link:hover,
body[data-page="services"] .service-next-step .text-link:focus-visible {
  background: #3f3f3f !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.2) !important;
  transform: translateY(-2px) !important;
}
body[data-page="cases"] .type-row > a,
body[data-page="case-all"] .type-row > a {
  min-width: 118px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #171717 !important;
  color: #fff !important;
  text-align: center !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.14) !important;
}
body[data-page="cases"] .type-row > a:hover,
body[data-page="cases"] .type-row > a:focus-visible,
body[data-page="case-all"] .type-row > a:hover,
body[data-page="case-all"] .type-row > a:focus-visible {
  background: #3f3f3f !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
body[data-page] .case-slide-stack > .case-slide-type {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-width: 112px !important;
  min-height: 40px !important;
  padding: 8px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f0f0f0 !important;
  color: #333 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  box-shadow: none !important;
}
body[data-page] .case-slide-stack > .case-slide-type::before,
body[data-page] .case-slide-stack > .case-slide-type::after {
  content: none !important;
  display: none !important;
}
body[data-page="home"] .featured-wall .featured-wall-entry {
  background: rgba(255,255,255,.96) !important;
  color: #171717 !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.16), 0 16px 34px rgba(0,0,0,.18) !important;
}
body[data-page="home"] .featured-wall .featured-wall-entry:hover,
body[data-page="home"] .featured-wall .featured-wall-entry:focus-visible {
  background: #f1f1f1 !important;
  color: #171717 !important;
  box-shadow: 0 7px 15px rgba(0,0,0,.18), 0 18px 38px rgba(0,0,0,.2) !important;
}

/* Final centered white controls. Keep the label readable on the white site. */
body[data-page="home"] .services-preview .section-head > .text-link,
body[data-page="services"] .service-next-step .text-link,
body[data-page="cases"] .case-tabs button,
body[data-page="case-all"] .case-tabs button,
body[data-page="cases"] .type-row > a,
body[data-page="case-all"] .type-row > a {
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  color: #171717 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.14) !important;
  text-decoration: none !important;
  text-align: center !important;
}
body[data-page="cases"] .case-tabs button,
body[data-page="case-all"] .case-tabs button {
  min-height: 42px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
body[data-page="cases"] .case-tabs button::after,
body[data-page="case-all"] .case-tabs button::after,
body[data-page="cases"] .case-tabs button::before,
body[data-page="case-all"] .case-tabs button::before {
  display: none !important;
  content: none !important;
}
body[data-page="cases"] .case-tabs button.is-active,
body[data-page="case-all"] .case-tabs button.is-active {
  color: #171717 !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.14) !important;
}
body[data-page="home"] .services-preview .section-head > .text-link:hover,
body[data-page="home"] .services-preview .section-head > .text-link:focus-visible,
body[data-page="services"] .service-next-step .text-link:hover,
body[data-page="services"] .service-next-step .text-link:focus-visible,
body[data-page="cases"] .case-tabs button:hover,
body[data-page="cases"] .case-tabs button:focus-visible,
body[data-page="case-all"] .case-tabs button:hover,
body[data-page="case-all"] .case-tabs button:focus-visible,
body[data-page="cases"] .type-row > a:hover,
body[data-page="cases"] .type-row > a:focus-visible,
body[data-page="case-all"] .type-row > a:hover,
body[data-page="case-all"] .type-row > a:focus-visible {
  background: #ededed !important;
  color: #171717 !important;
  box-shadow: 0 7px 16px rgba(0,0,0,.16) !important;
}

/* Keep the cooperation entry identical to the white centered case entry. */
body[data-page="services"] .service-next-step .text-link,
body[data-page="services"] .service-next-step .text-link:hover,
body[data-page="services"] .service-next-step .text-link:focus-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 146px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  color: #171717 !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.16) !important;
  text-decoration: none !important;
  transform: none !important;
}
body[data-page="services"] .service-next-step .text-link::before,
body[data-page="services"] .service-next-step .text-link::after,
body[data-page="services"] .service-next-step .text-link span {
  display: none !important;
  content: none !important;
}

/* The case label is a quiet caption above the film, without a capsule or rule. */
body[data-page="case-all"] .case-slide-stack > .case-slide-type,
body[data-page="cases"] .case-slide-stack > .case-slide-type {
  position: static !important;
  display: block !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(17,17,17,.58) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body[data-page="case-all"] .case-slide-stack > .case-slide-type::before,
body[data-page="case-all"] .case-slide-stack > .case-slide-type::after,
body[data-page="cases"] .case-slide-stack > .case-slide-type::before,
body[data-page="cases"] .case-slide-stack > .case-slide-type::after {
  display: none !important;
  content: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .featured-wall .featured-wall-entry { transition: none !important; }
}

@media (max-width: 767px) {
  body[data-page="home"] .featured-grid.featured-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, 146px) !important;
    gap: 9px !important;
  }
  body[data-page="home"] .featured-wall .featured-case { border-radius: 12px !important; }
  body[data-page="home"] .featured-wall .wall-card-1 { grid-column: span 2 !important; grid-row: span 2 !important; }
  body[data-page="home"] .featured-wall .wall-card-2,
  body[data-page="home"] .featured-wall .wall-card-3,
  body[data-page="home"] .featured-wall .wall-card-4,
  body[data-page="home"] .featured-wall .wall-card-5 { grid-column: span 1 !important; grid-row: span 1 !important; }
  body[data-page="home"] .featured-wall .wall-card-2 { grid-column: 1 !important; grid-row: 3 !important; }
  body[data-page="home"] .featured-wall .wall-card-3 { grid-column: 2 !important; grid-row: 3 !important; }
  body[data-page="home"] .featured-wall .wall-card-4 { grid-column: 1 !important; grid-row: 4 !important; }
  body[data-page="home"] .featured-wall .wall-card-5 { grid-column: 2 !important; grid-row: 4 !important; }
  body[data-page="home"] .featured-grid.featured-wall { grid-template-rows: repeat(4, 146px) !important; }
  body[data-page="home"] .featured-wall .wall-card-6 { display: none !important; }
  body[data-page="home"] .featured-wall .featured-wall-entry { min-width: 168px !important; min-height: 54px !important; padding: 0 24px !important; }
  body[data-page="home"] .featured-wall .featured-wall-entry span { font-size: 15px !important; }
}

@media (max-width: 767px) {
  body[data-page="home"] .service-stage-copy {
    width: min(62%, 215px) !important;
    max-width: 215px !important;
    margin: 0 10px 10px auto !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(72, 72, 72, .44), rgba(30, 30, 30, .32)) !important;
    -webkit-backdrop-filter: blur(10px) saturate(106%) !important;
    backdrop-filter: blur(10px) saturate(106%) !important;
  }

  body[data-page="home"] .service-stage-copy > span {
    font-size: .61rem !important;
  }

  body[data-page="home"] .service-stage-copy h3 {
    max-width: none !important;
    margin: 5px 0 6px !important;
    font-size: 1.05rem !important;
    line-height: 1.14 !important;
  }

  body[data-page="home"] .service-stage-copy p {
    display: none !important;
  }

  body[data-page="home"] .service-stage-copy > small:last-child {
    margin-top: 7px !important;
    font-size: .66rem !important;
  }
}

/* About page behind-the-scenes contact sheet. */
body[data-page="about"] .about-gallery-section {
  padding-top: clamp(64px, 8vw, 112px) !important;
  padding-bottom: clamp(80px, 10vw, 140px) !important;
  background: #fff !important;
}

body[data-page="about"] .about-gallery-heading {
  display: grid !important;
  grid-template-columns: minmax(120px, .38fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 5vw, 80px) !important;
  align-items: end !important;
  margin-bottom: clamp(28px, 4vw, 52px) !important;
}

body[data-page="about"] .about-gallery-heading h2 {
  max-width: 13em !important;
  margin: 0 !important;
  color: #080808 !important;
  font-size: clamp(2rem, 4vw, 4.2rem) !important;
  line-height: 1.06 !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
}

body[data-page="about"] .about-gallery {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: clamp(68px, 6.4vw, 104px) !important;
  grid-auto-flow: dense !important;
  gap: clamp(8px, 1.2vw, 16px) !important;
}

body[data-page="about"] .about-gallery-item {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #ecece9 !important;
  cursor: zoom-in !important;
}

body[data-page="about"] .about-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 68%, rgba(0, 0, 0, .16));
  opacity: .42;
  pointer-events: none;
  transition: opacity .35s ease;
}

body[data-page="about"] .about-gallery-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  filter: saturate(.9) contrast(1.02) !important;
  transition: transform .6s cubic-bezier(.2, .72, .2, 1), filter .35s ease !important;
}

body[data-page="about"] .about-gallery-item:hover img,
body[data-page="about"] .about-gallery-item:focus-visible img {
  transform: scale(1.045) !important;
  filter: saturate(1) contrast(1.04) !important;
}

body[data-page="about"] .about-gallery-item:hover::after,
body[data-page="about"] .about-gallery-item:focus-visible::after { opacity: .72; }

body[data-page="about"] .about-gallery-item:nth-child(1) { grid-column: span 5; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(2) { grid-column: span 3; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(3) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(4) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(5) { grid-column: span 5; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(6) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(7) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(8) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(9) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(10) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(11) { grid-column: span 5; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(12) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(13) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(14) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(15) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(16) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(17) { grid-column: span 5; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(18) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(19) { grid-column: span 5; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(20) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(21) { grid-column: span 3; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(22) { grid-column: span 3; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(23) { grid-column: span 5; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(24) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(25) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(26) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(27) { grid-column: span 4; grid-row: span 3; }

body[data-page="about"] .about-gallery-lightbox {
  width: min(92vw, 1180px) !important;
  max-width: min(92vw, 1180px) !important;
  max-height: 92vh !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-page="about"] .about-gallery-lightbox::backdrop { background: rgba(8, 8, 8, .78); }
body[data-page="about"] .about-gallery-lightbox-inner { position: relative; display: grid; justify-items: center; gap: 12px; }
body[data-page="about"] .about-gallery-lightbox img { display: block; width: auto; max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 10px; background: #111; }
body[data-page="about"] .about-gallery-lightbox-close { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 8px 12px; color: #fff; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; background: rgba(8,8,8,.46); cursor: pointer; }
body[data-page="about"] .about-gallery-lightbox p { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; letter-spacing: .08em; }

@media (max-width: 767px) {
  body[data-page="about"] .about-gallery-heading { grid-template-columns: 1fr !important; gap: 12px !important; align-items: start !important; margin-bottom: 26px !important; }
  body[data-page="about"] .about-gallery-heading h2 { max-width: 11em !important; font-size: 2rem !important; line-height: 1.12 !important; }
  body[data-page="about"] .about-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 112px !important; gap: 8px !important; }
  body[data-page="about"] .about-gallery-item { border-radius: 10px !important; }
  body[data-page="about"] .about-gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  body[data-page="about"] .about-gallery-item:nth-child(1),
  body[data-page="about"] .about-gallery-item:nth-child(7),
  body[data-page="about"] .about-gallery-item:nth-child(18) { grid-column: span 2; grid-row: span 2; }
  body[data-page="about"] .about-gallery-lightbox { width: 94vw !important; max-width: 94vw !important; }
  body[data-page="about"] .about-gallery-lightbox img { max-height: 76vh; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] .about-gallery-item img { transition: none !important; }
}

/* 2026-09-21: editorial contact sheet for the new production stills. */
body[data-page="about"] .about-gallery-heading {
  position: relative !important;
  grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 6vw, 96px) !important;
}
body[data-page="about"] .about-gallery-heading::after {
  content: "现场记录 / 2026";
  align-self: end;
  justify-self: end;
  color: rgba(17,17,17,.42);
  font-size: 11px;
  letter-spacing: .12em;
  white-space: nowrap;
}
body[data-page="about"] .about-gallery-item {
  border-radius: 10px !important;
  background: #f2f2ef !important;
  box-shadow: 0 14px 32px rgba(8,8,8,.07) !important;
}
body[data-page="about"] .about-gallery-item::after {
  background: linear-gradient(180deg, transparent 72%, rgba(0,0,0,.1)) !important;
  opacity: .28 !important;
}
body[data-page="about"] .about-gallery-item:nth-child(1) { grid-column: span 6; grid-row: span 5; }
body[data-page="about"] .about-gallery-item:nth-child(2) { grid-column: span 3; grid-row: span 5; }
body[data-page="about"] .about-gallery-item:nth-child(3) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(4) { grid-column: span 3; grid-row: span 2; }
body[data-page="about"] .about-gallery-item:nth-child(5) { grid-column: span 3; grid-row: span 2; }
body[data-page="about"] .about-gallery-item:nth-child(6) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(7) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(8) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(9) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(10) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(11) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(12) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(13) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(14) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(15) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(16) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(17) { grid-column: span 5; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(18) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(19) { grid-column: span 5; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(20) { grid-column: span 3; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(21) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(22) { grid-column: span 4; grid-row: span 4; }
body[data-page="about"] .about-gallery-item:nth-child(23) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(24) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(25) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(26) { grid-column: span 4; grid-row: span 3; }
body[data-page="about"] .about-gallery-item:nth-child(27) { grid-column: span 4; grid-row: span 3; }
@media (max-width: 767px) {
  body[data-page="about"] .about-gallery-heading { grid-template-columns: 1fr !important; gap: 10px !important; }
  body[data-page="about"] .about-gallery-heading::after { justify-self: start; align-self: start; }
  body[data-page="about"] .about-gallery-item { box-shadow: 0 8px 20px rgba(8,8,8,.06) !important; }
}