/* Previous UI glass treatment: restrained content overlays, clear editorial controls. */

/* Keep the global canvas quiet. The glass belongs to media overlays, not every control. */
.site-header {
  background: rgba(255, 255, 255, .9) !important;
  border-bottom-color: rgba(17, 17, 17, .09) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}

.site-header.is-dark:not(.is-scrolled) {
  color: var(--white) !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .18)) !important;
  border-bottom-color: rgba(255, 255, 255, .14) !important;
}

.site-header .site-nav a,
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible,
.site-header .site-nav a.is-active {
  color: inherit !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.mobile-panel a,
.mobile-panel button,
.menu-toggle,
.text-link,
.case-tabs button,
.service-dialog > button,
.service-dialog > a {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.menu-toggle { border: 0 !important; }

.text-link {
  color: rgba(17, 17, 17, .76) !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
}

.service-dialog > button,
.service-dialog > a { color: var(--ink) !important; }

/* This is the reference treatment: a compact frosted panel over the media. */
body[data-page="home"] .service-stage-copy {
  width: min(520px, calc(100% - 48px)) !important;
  max-width: 100% !important;
  padding: clamp(24px, 3vw, 34px) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(176, 176, 176, .5), rgba(113, 113, 113, .38)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 42px rgba(0, 0, 0, .15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

body[data-page="home"] .service-stage-copy > span,
body[data-page="home"] .service-stage-copy > h3,
body[data-page="home"] .service-stage-copy > p,
body[data-page="home"] .service-stage-copy > small:last-child {
  color: rgba(255, 255, 255, .94) !important;
}

body[data-page="home"] .service-stage-copy > span,
body[data-page="home"] .service-stage-copy > small:first-of-type {
  color: rgba(45, 45, 45, .64) !important;
}

body[data-page="home"] .service-stage-copy > small:last-child {
  display: inline-flex !important;
  margin-top: 18px !important;
}

body[data-page="home"] .service-index,
body[data-page="home"] .service-index button,
body[data-page="services"] .service-group-tabs,
body[data-page="services"] .service-group-tabs button,
body[data-page="services"] .service-goal {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body[data-page="home"] .service-index {
  min-height: 100% !important;
  color: #111 !important;
  border: 1px solid rgba(8, 8, 8, .08) !important;
  border-radius: clamp(20px, 1.8vw, 30px) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(245, 245, 241, .76)) !important;
  box-shadow: 0 22px 70px rgba(8, 8, 8, .08), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

body[data-page="home"] .service-index button {
  color: rgba(8, 8, 8, .62) !important;
  border-top-color: rgba(8, 8, 8, .08) !important;
}

body[data-page="home"] .service-index button.is-active,
body[data-page="home"] .service-index button:hover,
body[data-page="home"] .service-index button:focus-visible {
  color: #080808 !important;
  background: rgba(8, 8, 8, .055) !important;
}

/* Final mobile pass: keep the mission statement as a compact readable paragraph. */
@media (max-width: 767px) {
  .belief-card {
    padding-inline: 20px !important;
  }

  .belief-card h2,
  body[data-page="home"] .belief-card h2 {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    font-size: 18px !important;
    line-height: 1.62 !important;
    font-weight: 450 !important;
    text-wrap: pretty !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;
  }
}

/* About hero video: sound is enabled through an explicit user gesture when autoplay is blocked. */
body[data-page="about"] .about-hero-video-frame {
  position: relative;
  width: 100%;
  min-width: 0;
}

body[data-page="about"] .about-hero-video-frame .about-hero-video {
  display: block;
  width: 100%;
}

body[data-page="about"] .about-hero-audio-button {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  min-height: 40px;
  padding: 9px 14px;
  color: #111;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 8px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .82rem;
  line-height: 1.2;
  cursor: pointer;
}

body[data-page="about"] .about-hero-audio-button:hover,
body[data-page="about"] .about-hero-audio-button:focus-visible {
  background: rgba(255, 255, 255, .98);
}

@media (max-width: 767px) {
  body[data-page="about"] .about-hero-audio-button {
    right: 12px;
    bottom: 12px;
    min-height: 38px;
    padding: 8px 11px;
    font-size: .78rem;
  }
}

/* Service system refinement: title, duration, intent, and delivery stay visibly separate. */
body[data-page="services"] .service-group-tabs strong,
body[data-page="services"] .service-group-heading h2,
body[data-page="services"] .service-offer h3 {
  text-wrap: balance !important;
  overflow-wrap: normal !important;
}

body[data-page="services"] .service-group-tabs strong {
  max-width: 12em !important;
}

body[data-page="services"] .service-offer-main > div {
  min-width: 0;
}

body[data-page="services"] .service-offer-duration {
  display: block !important;
  margin-top: 10px !important;
  color: rgba(17, 17, 17, .48) !important;
  font-size: .76rem !important;
  font-weight: 450 !important;
  line-height: 1.35 !important;
  letter-spacing: .02em !important;
}

body[data-page="services"] .service-offer > p {
  max-width: 26em !important;
  margin: 0 !important;
  line-height: 1.85 !important;
}

body[data-page="services"] .service-scenes {
  align-self: start !important;
  padding-top: 3px !important;
  line-height: 1.8 !important;
}

body[data-page="home"] .work-preview .section-head h2 {
  max-width: 7em !important;
  text-wrap: balance !important;
}

body[data-page="home"] .work-preview .section-head {
  align-items: end !important;
  margin-bottom: clamp(30px, 4vw, 54px) !important;
}

body[data-page="home"] .featured-grid {
  gap: clamp(18px, 2.8vw, 42px) !important;
}

body[data-page="home"] .featured-case .featured-copy h3 {
  max-width: 14em !important;
  line-height: 1.25 !important;
  text-wrap: balance !important;
}

body[data-page="about"] .about-hero h1 {
  max-width: 15em !important;
  line-height: 1.18 !important;
  text-wrap: pretty !important;
}

@media (max-width: 767px) {
  body[data-page="services"] .service-offer-duration {
    margin-top: 7px !important;
    font-size: .72rem !important;
  }

  body[data-page="services"] .service-offer > p {
    max-width: 32em !important;
    line-height: 1.82 !important;
  }

  body[data-page="home"] .work-preview .section-head h2 {
    max-width: 8em !important;
  }

  body[data-page="about"] .about-hero h1 {
    max-width: 100% !important;
    line-height: 1.34 !important;
  }
}

/* Match the legacy page-specific selector so this mobile type scale wins the cascade. */
@media (max-width: 767px) {
  html body[data-page] .belief-card h2,
  html body[data-page="home"] .belief-card h2 {
    width: 100% !important;
    max-width: none !important;
    font-size: 18px !important;
    line-height: 1.62 !important;
  }

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

/* Keep the mission statement readable as a short editorial block on phones. */
@media (max-width: 767px) {
  .belief-card {
    padding-inline: 20px !important;
  }

  .belief-card h2,
  body[data-page="home"] .belief-card h2 {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    font-size: 18px !important;
    line-height: 1.62 !important;
    font-weight: 450 !important;
    text-wrap: pretty !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;
  }
}

/* Final mobile collision guard: the floating QR must never sit over a heading. */
@media (max-width: 767px) {
  body[data-page="services"] .service-system-head h2,
  body[data-page="services"] .service-goal-section .service-system-head h2,
  body[data-page="services"] .service-group-heading h2 {
    display: block !important;
    width: calc(100% - 76px) !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body[data-page="services"] .service-system-head > p,
  body[data-page="services"] .service-goal-section .service-system-head > p,
  body[data-page="services"] .service-group-heading > div:last-child p {
    width: calc(100% - 40px) !important;
    max-width: none !important;
  }

  .floating-contact {
    z-index: 40 !important;
  }
}

body[data-page="home"] .service-index em { color: rgba(8, 8, 8, .54) !important; }

body[data-page="home"] .service-index button,
body[data-page="services"] .service-group-tabs button,
body[data-page="services"] .service-goal {
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-page="home"] .service-index button.is-active,
body[data-page="home"] .service-index button:hover,
body[data-page="home"] .service-index button:focus-visible,
body[data-page="services"] .service-group-tabs button.is-active,
body[data-page="services"] .service-group-tabs button:hover,
body[data-page="services"] .service-group-tabs button:focus-visible {
  background: rgba(255, 255, 255, .08) !important;
}

body[data-page="home"] .service-index button { color: rgba(255, 255, 255, .58) !important; }
body[data-page="home"] .service-index button.is-active,
body[data-page="home"] .service-index button:hover,
body[data-page="home"] .service-index button:focus-visible { color: #fff !important; }
body[data-page="services"] .service-group-tabs button { color: rgba(17, 17, 17, .48) !important; }
body[data-page="services"] .service-group-tabs button.is-active,
body[data-page="services"] .service-group-tabs button:hover,
body[data-page="services"] .service-group-tabs button:focus-visible {
  color: #111 !important;
  background: rgba(17, 17, 17, .045) !important;
}
body[data-page="services"] .service-goal { color: var(--ink) !important; }

body[data-page="case-all"] .case-tabs {
  position: static !important;
  top: auto !important;
  padding: 0 !important;
  margin-bottom: clamp(30px, 4vw, 54px) !important;
  border: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-page="case-all"] .case-tabs::before,
body[data-page="case-all"] .case-tabs button {
  color: rgba(17, 17, 17, .54) !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-page="case-all"] .case-tabs button.is-active,
body[data-page="case-all"] .case-tabs button:hover,
body[data-page="case-all"] .case-tabs button:focus-visible {
  color: var(--ink) !important;
  border-bottom-color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The case arrows are useful controls, but remain light instead of becoming cards. */
body[data-page="case-all"] .case-slide-type,
body[data-page="case-all"] .case-slide-arrow {
  color: var(--ink) !important;
  border: 1px solid rgba(17, 17, 17, .16) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

body[data-page="case-all"] .case-slide-arrow:hover,
body[data-page="case-all"] .case-slide-arrow:focus-visible {
  color: #111 !important;
  border-color: rgba(17, 17, 17, .2) !important;
  background: rgba(178, 178, 178, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 8px 24px rgba(0, 0, 0, .08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
}

body[data-page="services"] .service-next-step .text-link span {
  display: inline-block !important;
  min-width: 1em !important;
  line-height: 1 !important;
  vertical-align: -1px !important;
  transform: none !important;
}

/* Keep the cooperation-flow entry readable without the legacy capsule or pseudo-rule. */
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;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 0 0 5px !important;
  color: #111 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17, 17, 17, .68) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-page="services"] .service-next-step .text-link::after {
  display: none !important;
  content: none !important;
}

body[data-page="services"] .service-next-step .text-link span {
  display: inline-block !important;
  min-width: 1em !important;
  color: inherit !important;
  line-height: 1 !important;
  transform: none !important;
}

body[data-page="services"] .service-next-step .text-link:hover span,
body[data-page="services"] .service-next-step .text-link:focus-visible span {
  transform: translateX(3px) !important;
}

/* The case caption is part of the slide content, below the film, never inside its crop. */
body[data-page="case-all"] .case-carousel-viewport {
  height: clamp(680px, calc(51vw + 90px), 840px) !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-page="case-all"] .case-slide {
  align-content: start !important;
  align-items: start !important;
}

body[data-page="case-all"] .case-slide-stack {
  height: auto !important;
  align-self: start !important;
  gap: 14px !important;
}

body[data-page="case-all"] .case-slide-media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body[data-page="case-all"] .case-slide-caption {
  position: relative !important;
  z-index: 4 !important;
  min-height: 72px !important;
  padding: 0 2px 12px !important;
  background: #fff !important;
}

/* Case controls stay translucent on hover instead of turning into black blocks. */
body[data-page="case-all"] .case-slide-arrow:hover,
body[data-page="case-all"] .case-slide-arrow:focus-visible {
  color: #111 !important;
  border-color: rgba(17, 17, 17, .2) !important;
  background: rgba(178, 178, 178, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 8px 24px rgba(0, 0, 0, .08) !important;
}

.floating-contact {
  position: fixed;
  z-index: 40;
  right: 22px;
  bottom: 24px;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 118px;
  padding: 12px 10px 10px;
  color: #111;
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 12px 34px rgba(17, 17, 17, .1), inset 0 1px 0 rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  pointer-events: none;
}

.floating-contact-label {
  color: rgba(17, 17, 17, .82);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.2;
}

.floating-contact-qr {
  display: block;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.floating-contact-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-contact-note {
  color: rgba(17, 17, 17, .5);
  font-size: .65rem;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 620px) {
  body[data-page="case-all"] .case-carousel-viewport {
    height: 900px !important;
    min-height: 0 !important;
  }

  body[data-page="case-all"] .case-slide-media {
    aspect-ratio: 4 / 3 !important;
  }

  .floating-contact {
    right: 12px;
    bottom: 14px;
    width: 82px;
    padding: 8px 7px;
    gap: 5px;
    border-radius: 11px;
  }

  .floating-contact-qr {
    width: 62px;
    height: 62px;
    border-radius: 5px;
  }

  .floating-contact-label { font-size: .66rem; }
  .floating-contact-note { display: none; }
}

/* Mobile refinement: keep the studio rhythm spacious but make every action and caption fit the viewport. */
@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .container {
    width: min(100% - 32px, 1120px) !important;
  }

  .site-header {
    min-height: 58px !important;
    padding: 0 16px !important;
  }

  .brand-mark {
    width: 25px !important;
    height: 25px !important;
  }

  .menu-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  .page-hero,
  .home-hero {
    min-height: 0 !important;
  }

  .page-hero .container,
  .home-hero .hero-inner {
    width: min(100% - 32px, 1120px) !important;
  }

  body[data-page="home"] .home-hero .hero-inner {
    min-height: min(720px, calc(100svh - 58px)) !important;
    padding-top: 74px !important;
    padding-bottom: 34px !important;
  }

  body[data-page="home"] .home-hero .hero-copy h1 {
    max-width: 9em !important;
    font-size: clamp(2.35rem, 11vw, 3.6rem) !important;
    line-height: 1.06 !important;
  }

  body[data-page="home"] .hero-lead {
    max-width: 27em !important;
    margin-top: 22px !important;
    font-size: .94rem !important;
    line-height: 1.75 !important;
  }

  body[data-page="home"] .hero-symbol {
    width: min(100%, 330px) !important;
    margin: 24px auto 0 !important;
  }

  .section {
    padding-top: clamp(58px, 15vw, 84px) !important;
    padding-bottom: clamp(58px, 15vw, 84px) !important;
  }

  .section-head {
    align-items: start !important;
    gap: 18px !important;
  }

  .section-head h2,
  body[data-page="services"] .service-system-head h2,
  body[data-page="services"] .service-goal-section .service-system-head h2 {
    max-width: 11em !important;
    font-size: clamp(1.8rem, 8.2vw, 2.55rem) !important;
    line-height: 1.15 !important;
  }

  body[data-page="home"] .services-preview .section-head > .text-link,
  body[data-page="home"] .work-preview .section-head > .text-link {
    align-self: start !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
  }

  body[data-page="home"] .brand-film-layout,
  body[data-page="home"] .brand-film-media {
    width: 100% !important;
  }

  body[data-page="home"] .brand-film-media h2 {
    max-width: 10em !important;
    font-size: clamp(1.9rem, 8.5vw, 2.7rem) !important;
    line-height: 1.18 !important;
  }

  body[data-page="home"] .brand-film-frame {
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
  }

  body[data-page="about"] .about-hero {
    padding-top: 78px !important;
    padding-bottom: 46px !important;
  }

  body[data-page="about"] .about-hero h1 {
    max-width: 15em !important;
    font-size: clamp(1.65rem, 7.4vw, 2.25rem) !important;
    line-height: 1.38 !important;
  }

  body[data-page="about"] .about-hero p:not(.section-label) {
    max-width: 28em !important;
    font-size: .94rem !important;
    line-height: 1.8 !important;
  }

  body[data-page="about"] .about-hero-grid > img,
  body[data-page="about"] .about-hero-grid > video {
    margin-top: 28px !important;
    border-radius: 10px !important;
  }

  body[data-page="services"] .service-hero-content h1,
  body[data-page="process"] .page-hero h1 {
    font-size: clamp(2.25rem, 10.5vw, 3.2rem) !important;
    line-height: 1.12 !important;
  }

  body[data-page="services"] .service-group-heading,
  body[data-page="services"] .service-system-head,
  body[data-page="services"] .service-goal-section .service-system-head {
    gap: 22px !important;
    padding-bottom: 48px !important;
  }

  body[data-page="services"] .service-group-heading > div:last-child p,
  body[data-page="services"] .service-system-head > p,
  body[data-page="services"] .service-goal-section .service-system-head > p {
    font-size: .94rem !important;
    line-height: 1.8 !important;
  }

  body[data-page="case-all"] .case-carousel-viewport {
    height: 540px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body[data-page="case-all"] .case-slide {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
  }

  body[data-page="case-all"] .case-slide-stack {
    width: 100% !important;
    gap: 11px !important;
  }

  body[data-page="case-all"] .case-slide-media {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 8px !important;
  }

  body[data-page="case-all"] .case-slide-caption {
    min-height: 0 !important;
    padding: 0 2px !important;
  }

  body[data-page="case-all"] .case-slide-caption h2 {
    max-width: 100% !important;
    font-size: clamp(1.08rem, 5vw, 1.35rem) !important;
    line-height: 1.3 !important;
  }

  body[data-page="case-all"] .case-slide-caption p {
    max-width: 100% !important;
    font-size: .78rem !important;
    line-height: 1.6 !important;
  }

  body[data-page="case-all"] .case-slide-arrow,
  body[data-page="case-all"] .case-slide-arrow-prev,
  body[data-page="case-all"] .case-slide-arrow-next {
    top: 38% !important;
    width: 58px !important;
    height: 54px !important;
    border-radius: 11px !important;
    transform: translateY(-50%) !important;
  }

  body[data-page="case-all"] .case-slide-arrow-prev,
  body[data-page="case-all"] .case-slide-arrow-prev:hover,
  body[data-page="case-all"] .case-slide-arrow-prev:focus-visible {
    left: 7px !important;
    right: auto !important;
  }

  body[data-page="case-all"] .case-slide-arrow-next,
  body[data-page="case-all"] .case-slide-arrow-next:hover,
  body[data-page="case-all"] .case-slide-arrow-next:focus-visible {
    right: 7px !important;
    left: auto !important;
  }

  body[data-page="case-all"] .case-slide-arrow-glyph {
    font-size: 1.35rem !important;
  }

  body[data-page="case-all"] .case-slide-arrow span:last-child {
    font-size: .58rem !important;
  }

  .floating-contact {
    right: 10px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 64px !important;
    padding: 6px 5px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    opacity: .9;
  }

  .floating-contact-qr {
    width: 48px !important;
    height: 48px !important;
  }

  .floating-contact-label {
    font-size: .6rem !important;
  }
}

/* Mobile container correction: keep the 16px safe edge inside the viewport.
   The calc() is intentional; without it min() is invalid in Chromium. */
@media (max-width: 767px) {
  .container,
  .page-hero .container,
  .home-hero .hero-inner {
    width: min(calc(100% - 32px), 1120px) !important;
    max-width: calc(100% - 32px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body[data-page="process"] .page-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.2vw, 2.7rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  body[data-page="process"] .page-hero .section-label {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Touch layouts need deliberate tap targets and predictable text metrics. */
  .site-nav a,
  .mobile-panel a,
  .mobile-panel button,
  .text-link,
  .case-tabs button,
  .case-carousel-controls > button {
    min-height: 44px !important;
  }

  .site-nav a,
  .text-link,
  .case-tabs button {
    display: inline-flex !important;
    align-items: center !important;
  }

  body[data-page="home"] h1,
  body[data-page="home"] h2,
  body[data-page="services"] h1,
  body[data-page="services"] h2,
  body[data-page="about"] h1,
  body[data-page="about"] h2,
  body[data-page="process"] h1,
  body[data-page="process"] h2,
  body[data-page="case-all"] h1,
  body[data-page="case-all"] h2 {
    text-wrap: balance !important;
    overflow-wrap: anywhere !important;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .site-footer {
    padding-bottom: max(48px, calc(48px + env(safe-area-inset-bottom))) !important;
  }
}

/* 2026-09 mobile editorial pass: a phone is a reading surface, not a scaled desktop. */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: 20px;
  }

  body {
    font-size: 16px;
    line-height: 1.65;
  }

  .container,
  .page-hero .container,
  .home-hero .hero-inner {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    max-width: none !important;
  }

  .site-header {
    min-height: 60px !important;
    padding-right: var(--mobile-gutter) !important;
    padding-left: var(--mobile-gutter) !important;
  }

  .brand-text {
    font-size: .7rem !important;
    line-height: 1.05 !important;
  }

  .brand-text em {
    font-size: .48rem !important;
  }

  .menu-toggle {
    width: 40px !important;
    height: 40px !important;
  }

  .section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .section-label {
    font-size: .64rem !important;
    line-height: 1.35 !important;
    letter-spacing: .08em !important;
  }

  /* Keep the entrance motion, but never leave previously read copy blurred or faded. */
  html.reveal-ready:not(.no-motion) [data-reveal].is-past:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  body[data-page="home"] .home-hero .hero-inner {
    min-height: min(760px, calc(100svh - 60px)) !important;
    padding-top: 92px !important;
    padding-bottom: 40px !important;
  }

  body[data-page="home"] .home-hero .hero-copy h1 {
    max-width: 9em !important;
    font-size: clamp(2.35rem, 10.8vw, 3.15rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
  }

  body[data-page="home"] .hero-kicker {
    max-width: 24em !important;
    font-size: .62rem !important;
    line-height: 1.45 !important;
  }

  body[data-page="home"] .hero-lead {
    max-width: 24em !important;
    margin-top: 24px !important;
    color: rgba(255, 255, 255, .86) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
  }

  body[data-page="home"] .hero-tags {
    display: grid !important;
    gap: 8px !important;
    margin-top: 28px !important;
  }

  body[data-page="home"] .hero-symbol {
    width: min(100%, 300px) !important;
    margin-top: 32px !important;
  }

  .section-head {
    display: grid !important;
    gap: 20px !important;
    margin-bottom: 34px !important;
  }

  .section-head h2,
  body[data-page="services"] .service-system-head h2,
  body[data-page="services"] .service-goal-section .service-system-head h2 {
    max-width: 12em !important;
    margin-top: 12px !important;
    color: #111 !important;
    font-size: clamp(1.9rem, 8.5vw, 2.65rem) !important;
    line-height: 1.15 !important;
    font-weight: 650 !important;
    letter-spacing: -.015em !important;
  }

  body[data-page="home"] .services-preview .section-head > .text-link,
  body[data-page="home"] .work-preview .section-head > .text-link {
    justify-self: start !important;
    margin-top: 0 !important;
  }

  body[data-page="home"] .brand-film-layout {
    display: block !important;
  }

  body[data-page="home"] .brand-film-media h2 {
    max-width: 12em !important;
    margin: 12px 0 0 !important;
    font-size: clamp(1.85rem, 8.4vw, 2.55rem) !important;
    line-height: 1.18 !important;
  }

  body[data-page="home"] .brand-film-media > p:not(.section-label) {
    max-width: 28em !important;
    margin: 16px 0 24px !important;
    color: rgba(17, 17, 17, .62) !important;
    font-size: .96rem !important;
    line-height: 1.8 !important;
  }

  body[data-page="home"] .brand-film-frame {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 10px !important;
  }

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

  body[data-page="home"] .formula-window {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 12px !important;
  }

  body[data-page="home"] .service-card-grid,
  body[data-page="home"] .featured-grid {
    gap: 18px !important;
  }

  body[data-page="home"] .service-stage-copy {
    width: calc(100% - 24px) !important;
    padding: 18px !important;
  }

  body[data-page="services"] .page-hero.service-hero {
    min-height: 560px !important;
    padding-top: 112px !important;
    padding-bottom: 64px !important;
  }

  body[data-page="services"] .service-hero h1 {
    max-width: 9em !important;
    margin-top: 18px !important;
    font-size: clamp(2.55rem, 11.2vw, 3.55rem) !important;
    line-height: 1.08 !important;
  }

  body[data-page="services"] .service-hero-content > p:last-child {
    max-width: 28em !important;
    margin-top: 24px !important;
    font-size: .98rem !important;
    line-height: 1.8 !important;
  }

  body[data-page="services"] .service-system,
  body[data-page="services"] .service-goal-section {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  body[data-page="services"] .service-system-head,
  body[data-page="services"] .service-goal-section .service-system-head {
    display: block !important;
    margin-bottom: 34px !important;
  }

  body[data-page="services"] .service-system-head > p,
  body[data-page="services"] .service-goal-section .service-system-head > p {
    max-width: 28em !important;
    margin-top: 18px !important;
    font-size: .96rem !important;
    line-height: 1.8 !important;
  }

  body[data-page="services"] .service-group-tabs {
    border-top: 1px solid rgba(17, 17, 17, .2) !important;
  }

  body[data-page="services"] .service-group-tabs button,
  body[data-page="services"] .service-group-tabs button:hover,
  body[data-page="services"] .service-group-tabs button.is-active {
    min-height: 78px !important;
    padding: 14px 8px !important;
  }

  body[data-page="services"] .service-group-tabs strong {
    margin: 7px 0 3px !important;
    font-size: 1.08rem !important;
  }

  body[data-page="services"] .service-group-panel {
    padding-top: 48px !important;
  }

  body[data-page="services"] .service-group-heading {
    gap: 24px !important;
    padding-bottom: 38px !important;
  }

  body[data-page="services"] .service-group-heading h2 {
    max-width: 10em !important;
    font-size: clamp(2rem, 9.2vw, 2.9rem) !important;
    line-height: 1.12 !important;
  }

  body[data-page="services"] .service-group-heading > div:last-child p {
    font-size: 1rem !important;
    line-height: 1.82 !important;
  }

  body[data-page="services"] .service-offer {
    gap: 13px !important;
    padding: 24px 0 !important;
  }

  body[data-page="services"] .service-offer h3 {
    font-size: 1.3rem !important;
  }

  body[data-page="services"] .service-offer > p {
    font-size: .94rem !important;
    line-height: 1.78 !important;
  }

  body[data-page="services"] .service-goal-section {
    margin-top: 0 !important;
    border-top: 1px solid rgba(17, 17, 17, .18) !important;
  }

  body[data-page="services"] .service-goal-list {
    margin-top: 30px !important;
  }

  body[data-page="services"] .service-goal {
    min-height: 112px !important;
    padding: 22px 0 !important;
  }

  body[data-page="services"] .service-goal-copy strong {
    font-size: 1.05rem !important;
  }

  body[data-page="services"] .service-goal-copy em {
    font-size: .9rem !important;
    line-height: 1.7 !important;
  }

  body[data-page="services"] .service-next-step {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  body[data-page="services"] .service-next-step h2 {
    max-width: 14em !important;
    margin: 16px 0 28px !important;
    font-size: clamp(1.9rem, 8.5vw, 2.65rem) !important;
    line-height: 1.18 !important;
  }

  body[data-page="case-all"] .page-hero.compact {
    min-height: 230px !important;
    padding-top: 104px !important;
    padding-bottom: 34px !important;
  }

  body[data-page="case-all"] .page-hero.compact h1 {
    font-size: clamp(2.45rem, 12vw, 3.25rem) !important;
    line-height: 1.05 !important;
  }

  body[data-page="case-all"] .case-tabs {
    gap: 2px 16px !important;
    margin-bottom: 28px !important;
    padding-bottom: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  body[data-page="case-all"] .case-tabs::-webkit-scrollbar {
    display: none;
  }

  body[data-page="case-all"] .case-tabs button {
    min-height: 38px !important;
    flex: 0 0 auto !important;
    font-size: .78rem !important;
  }

  body[data-page="case-all"] .case-carousel-viewport {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    height: 530px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body[data-page="case-all"] .case-slide-media {
    aspect-ratio: 4 / 3 !important;
    border-radius: 10px !important;
  }

  body[data-page="case-all"] .case-slide-poster,
  body[data-page="case-all"] .case-slide-video {
    transform: none !important;
  }

  body[data-page="case-all"] .case-slide-info {
    padding-top: 22px !important;
  }

  body[data-page="case-all"] .case-slide-info h2 {
    max-width: 14em !important;
    font-size: 1.42rem !important;
    line-height: 1.25 !important;
  }

  body[data-page="case-all"] .case-slide-summary {
    margin-top: 12px !important;
    font-size: .9rem !important;
    line-height: 1.7 !important;
  }

  body[data-page="case-all"] .case-slide-arrow,
  body[data-page="case-all"] .case-slide-arrow-prev,
  body[data-page="case-all"] .case-slide-arrow-next {
    width: 48px !important;
    height: 48px !important;
    top: 38% !important;
  }

  body[data-page="about"] .about-hero {
    padding-top: 82px !important;
    padding-bottom: 56px !important;
  }

  body[data-page="about"] .about-hero-grid {
    gap: 28px !important;
  }

  body[data-page="about"] .about-hero h1 {
    max-width: 16em !important;
    font-size: clamp(1.7rem, 7.6vw, 2.35rem) !important;
    line-height: 1.38 !important;
  }

  body[data-page="about"] .about-hero p:not(.section-label) {
    max-width: 28em !important;
    margin-top: 18px !important;
    font-size: .96rem !important;
    line-height: 1.8 !important;
  }

  body[data-page="about"] .about-hero-grid > img,
  body[data-page="about"] .about-hero-grid > video {
    width: 100% !important;
    margin-top: 0 !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }

  body[data-page="about"] .stats-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  body[data-page="about"] .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  body[data-page="about"] .stats-grid article {
    min-height: 100px !important;
    padding: 18px 0 !important;
  }

  body[data-page="about"] .stats-grid strong {
    font-size: 1.7rem !important;
  }

  body[data-page="about"] .contact-grid {
    gap: 34px !important;
  }

  body[data-page="process"] .page-hero.process-hero {
    padding-top: 108px !important;
    padding-bottom: 62px !important;
  }

  body[data-page="process"] .process-grid {
    gap: 16px !important;
    padding-left: 18px !important;
  }

  body[data-page="process"] .process-card {
    margin-left: 16px !important;
    padding: 22px !important;
    border-radius: 12px !important;
  }

  body[data-page="process"] .process-card h3 {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    font-size: 1.18rem !important;
  }

  body[data-page="process"] .process-card p {
    font-size: .92rem !important;
    line-height: 1.75 !important;
  }

  .site-footer {
    padding-top: 54px !important;
  }

  .footer-grid {
    gap: 46px !important;
  }

  .site-footer p,
  .site-footer li {
    font-size: .82rem !important;
    line-height: 1.7 !important;
  }

.site-footer h2 {
    margin-bottom: 18px !important;
    font-size: 1.18rem !important;
  }
}

/* UI material refinement: remove the toy-like glossy treatment from utility controls. */
.menu-toggle {
  position: relative !important;
  display: none !important;
  place-content: center !important;
  gap: 6px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  color: #111 !important;
  border: 1px solid rgba(17, 17, 17, .26) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .08) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease !important;
}

.menu-toggle span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  margin: 0 !important;
  background: currentColor !important;
  transition: transform .22s ease, opacity .22s ease !important;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: #111 !important;
  border-color: rgba(17, 17, 17, .38) !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(17, 17, 17, .12) !important;
  transform: translateY(-1px) !important;
}

.menu-toggle:focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 3px !important;
}

.site-header.is-dark:not(.is-scrolled) .menu-toggle {
  color: #111 !important;
  border-color: rgba(255, 255, 255, .82) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important;
}

.site-header.is-dark:not(.is-scrolled) .menu-toggle:hover,
.site-header.is-dark:not(.is-scrolled) .menu-toggle:focus-visible {
  color: #111 !important;
  border-color: #fff !important;
  background: #fff !important;
}

/* Reduce gloss: utility controls should read as precise instruments, not toys. */
.text-link,
.case-tabs button,
.service-group-tabs button,
.service-index button,
.service-dialog > button,
.service-dialog > a {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Formula board: let the meaningful Chinese labels lead the eye. */
body[data-page="home"] .formula-section {
  background: #fff !important;
}

body[data-page="home"] .formula-section::before {
  display: none !important;
}

body[data-page="home"] .engine-reference-eyebrow {
  color: rgba(17, 17, 17, .48) !important;
  font-size: .72rem !important;
  letter-spacing: .04em !important;
}

body[data-page="home"] .engine-reference-head h3 {
  margin-top: 16px !important;
  color: #111 !important;
  font-size: clamp(1.75rem, 3vw, 3.25rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.015em !important;
}

body[data-page="home"] .engine-reference-head strong {
  max-width: 18em !important;
  margin-top: 18px !important;
  color: #111 !important;
  font-size: clamp(1.45rem, 2.8vw, 3rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
}

body[data-page="home"] .engine-reference-head p {
  max-width: 32em !important;
  margin-top: 14px !important;
  color: rgba(17, 17, 17, .72) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

body[data-page="home"] .engine-reference-head small {
  max-width: 44em !important;
  margin-top: 8px !important;
  color: rgba(17, 17, 17, .5) !important;
  font-size: .84rem !important;
  line-height: 1.7 !important;
}

body[data-page="home"] .engine-card-visual > span {
  color: rgba(255, 255, 255, .9) !important;
  font-size: .72rem !important;
  letter-spacing: .02em !important;
}

/* Cases: a calmer editorial frame with less empty stage and stronger caption order. */
body[data-page="case-all"] .page-hero.compact {
  min-height: 340px !important;
  padding-top: 116px !important;
  padding-bottom: 52px !important;
}

body[data-page="case-all"] .page-hero.compact h1 {
  max-width: 10em !important;
  font-size: clamp(3.1rem, 6vw, 5.8rem) !important;
  line-height: 1.02 !important;
}

body[data-page="case-all"] .archive-section {
  padding-top: 42px !important;
}

body[data-page="case-all"] .case-tabs {
  max-width: 1180px !important;
  margin-bottom: 36px !important;
}

body[data-page="case-all"] .case-carousel-viewport {
  width: min(1180px, 100%) !important;
  min-height: min(59vw, 680px) !important;
  margin: 0 auto !important;
}

body[data-page="case-all"] .case-slide-stack {
  width: min(1120px, 100%) !important;
  gap: 14px !important;
}

body[data-page="case-all"] .case-slide-type {
  top: 0 !important;
  left: 0 !important;
  padding: 0 0 10px !important;
  color: rgba(17, 17, 17, .58) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17, 17, 17, .18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: .72rem !important;
  letter-spacing: .04em !important;
}

body[data-page="case-all"] .case-slide-media {
  border-radius: 6px !important;
  background: #f1f1ef !important;
}

body[data-page="case-all"] .case-slide-poster,
body[data-page="case-all"] .case-slide-video {
  object-fit: cover !important;
  background: transparent !important;
}

body[data-page="case-all"] .case-slide-caption {
  gap: 0 !important;
  padding-top: 10px !important;
}

body[data-page="case-all"] .case-slide-caption p {
  max-width: 48em !important;
  color: rgba(17, 17, 17, .62) !important;
  font-size: .92rem !important;
  line-height: 1.75 !important;
}

body[data-page="case-all"] .case-slide-caption-label {
  display: inline-block !important;
  margin-right: 12px !important;
  color: #111 !important;
  font-size: .7rem !important;
  font-weight: 650 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

body[data-page="case-all"] .case-slide-caption-method {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(17, 17, 17, .42) !important;
  font-size: .68rem !important;
  line-height: 1.5 !important;
  letter-spacing: .05em !important;
}

body[data-page="home"] .engine-reference-card .engine-reference-no {
  color: rgba(17, 17, 17, .3) !important;
  font-size: clamp(1.55rem, 2.3vw, 2.45rem) !important;
  line-height: 1 !important;
}

body[data-page="home"] .engine-reference-card h4 {
  margin-bottom: 8px !important;
  font-size: clamp(1.12rem, 1.45vw, 1.45rem) !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

body[data-page="home"] .engine-reference-card p {
  max-width: 22em !important;
  color: rgba(17, 17, 17, .62) !important;
  font-size: .88rem !important;
  line-height: 1.7 !important;
}

body[data-page="home"] .engine-reference-card ul {
  gap: 10px !important;
  margin-top: 14px !important;
}

body[data-page="home"] .engine-reference-card li {
  padding-top: 7px !important;
  color: rgba(17, 17, 17, .44) !important;
  font-size: .7rem !important;
  line-height: 1.35 !important;
}

body[data-page="case-all"] .case-slide-arrow {
  color: #111 !important;
  border-color: rgba(17, 17, 17, .18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 3px 12px rgba(17, 17, 17, .08) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

body[data-page="case-all"] .case-slide-arrow:hover,
body[data-page="case-all"] .case-slide-arrow:focus-visible {
  color: #111 !important;
  border-color: rgba(17, 17, 17, .36) !important;
  background: rgba(238, 238, 236, .94) !important;
}

@media (max-width: 767px) {
  body[data-page="home"] .engine-reference-head strong {
    max-width: 14em !important;
    font-size: 1.48rem !important;
    line-height: 1.22 !important;
  }

  body[data-page="home"] .engine-reference-head p {
    font-size: .94rem !important;
  }

  body[data-page="home"] .engine-reference-head small {
    font-size: .8rem !important;
  }

  body[data-page="case-all"] .page-hero.compact {
    min-height: 224px !important;
    padding-top: 102px !important;
    padding-bottom: 34px !important;
  }

  body[data-page="case-all"] .archive-section {
    padding-top: 32px !important;
  }

  body[data-page="case-all"] .case-carousel-viewport {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    min-height: 0 !important;
    height: 520px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body[data-page="case-all"] .case-slide-type {
    padding-bottom: 8px !important;
    font-size: .7rem !important;
  }

  body[data-page="case-all"] .case-slide-caption h2 {
    font-size: 1.28rem !important;
  }

  body[data-page="case-all"] .case-slide-caption p {
    font-size: .88rem !important;
  }
}

.mobile-panel {
  background: rgba(8, 8, 8, .975) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.mobile-panel button {
  min-width: 76px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .08) !important;
}

.mobile-panel button:hover,
.mobile-panel button:focus-visible {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .72) !important;
  background: rgba(255, 255, 255, .16) !important;
}

@media (max-width: 767px) {
  .menu-toggle {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
  }

  /* Light pages need a dark utility control; the dark hero inverts it below. */
  .menu-toggle {
    color: #fff !important;
    border-color: #111 !important;
    background: #111 !important;
    box-shadow: 0 3px 10px rgba(17, 17, 17, .14) !important;
  }

  .menu-toggle:hover,
  .menu-toggle:focus-visible {
    color: #fff !important;
    border-color: #000 !important;
    background: #000 !important;
  }

  .site-header.is-dark:not(.is-scrolled) .menu-toggle {
    color: #111 !important;
    border-color: #fff !important;
    background: #fff !important;
  }

  .site-header.is-dark:not(.is-scrolled) .menu-toggle:hover,
  .site-header.is-dark:not(.is-scrolled) .menu-toggle:focus-visible {
    color: #111 !important;
    background: #fff !important;
  }

  body[data-page="case-all"] .case-slide-arrow span:last-child {
    display: none !important;
  }

  body[data-page="case-all"] .case-slide-arrow,
  body[data-page="case-all"] .case-slide-arrow-prev,
  body[data-page="case-all"] .case-slide-arrow-next {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
  }

  body[data-page="case-all"] .case-slide-arrow-glyph {
    font-size: 1.55rem !important;
  }
}

/* 2026-09 mobile readability pass: reserve room for the fixed contact QR and open the copy. */
@media (max-width: 767px) {
  p,
  li {
    line-height: 1.82 !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-group-heading h2 {
    max-width: calc(100% - 64px) !important;
    line-height: 1.2 !important;
  }

  body[data-page="services"] .service-system-head > p,
  body[data-page="services"] .service-goal-section .service-system-head > p,
  body[data-page="services"] .service-group-heading > div:last-child p {
    max-width: calc(100% - 42px) !important;
    line-height: 1.9 !important;
  }

  body[data-page="services"] .service-group-tabs strong {
    line-height: 1.45 !important;
  }

  body[data-page="home"] .services-preview .section-head h2,
  body[data-page="home"] .work-preview .section-head h2 {
    max-width: calc(100% - 18px) !important;
    line-height: 1.2 !important;
  }

  .service-stage-copy p,
  .featured-case p,
  .work-card p,
  .about-hero p:not(.section-label),
  .process-card p,
  .site-footer p,
  .site-footer li {
    line-height: 1.86 !important;
  }

  .floating-contact {
    right: 8px !important;
    width: 58px !important;
    padding: 5px 4px !important;
    opacity: .94 !important;
  }

  .floating-contact-qr {
    width: 44px !important;
    height: 44px !important;
  }
}
}

.service-dialog {
  color: var(--ink) !important;
  border: 1px solid rgba(17, 17, 17, .1) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .18) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.contact-info {
  color: var(--ink) !important;
  border-radius: 12px !important;
  background: var(--soft) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.contact-info h3,
.contact-info p { color: inherit !important; }

.inquiry-form input,
.inquiry-form textarea {
  color: var(--white) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.inquiry-form button {
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--white) !important;
  box-shadow: none !important;
}

body[data-page="home"] .services-preview .section-head > .text-link,
body[data-page="home"] .work-preview .section-head > .text-link {
  color: rgba(8, 8, 8, .78) !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  background: transparent !important;
}

@media (max-width: 767px) {
  body[data-page="home"] .service-stage-copy {
    width: min(100%, calc(100% - 32px)) !important;
    padding: 22px !important;
    border-radius: 16px !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-page="home"] .service-stage-copy,
  .service-dialog,
  .inquiry-form input,
  .inquiry-form textarea {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Final cascade for the light business index used beside the frosted media card. */
body[data-page="home"] .service-index button {
  color: rgba(8, 8, 8, .62) !important;
  border-top-color: rgba(8, 8, 8, .08) !important;
  background: transparent !important;
}

body[data-page="home"] .service-index button > span,
body[data-page="home"] .service-index button > strong,
body[data-page="home"] .service-index button > em {
  color: inherit !important;
}

body[data-page="home"] .service-index button > span,
body[data-page="home"] .service-index button > em {
  opacity: .76 !important;
}

body[data-page="home"] .service-index button.is-active,
body[data-page="home"] .service-index button:hover,
body[data-page="home"] .service-index button:focus-visible {
  color: #080808 !important;
  background: rgba(8, 8, 8, .055) !important;
}

/* Mobile mission statement: one continuous, readable three-line rhythm. */
@media (max-width: 767px) {
  html body[data-page] .belief-card h2,
  html body[data-page="home"] .belief-card h2 {
    width: 100% !important;
    max-width: none !important;
    font-size: 18px !important;
    line-height: 1.62 !important;
  }

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

/* Final mobile pass: keep the mission statement as a compact readable paragraph. */
@media (max-width: 767px) {
  .belief-card {
    padding-inline: 20px !important;
  }

  .belief-card h2,
  body[data-page="home"] .belief-card h2 {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    font-size: 18px !important;
    line-height: 1.62 !important;
    font-weight: 450 !important;
    text-wrap: pretty !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;
  }
}